Dr. Kone

HTML juga dapat di gunakan untuk membuat simbol, selain membuat lebih menarik simbol juga di gunakan pada kepentingan kepentingan lain nya.

berikut ini adalah beberapa kode html yang bisa di gunakan untuk membuat simbol.

Untuk membuat symbol html anda bisa menggunakan kode yang berbentuk number atau entity. Perhatikan contoh membuat symbol dengan html berikut ini. Belajar HTML Membuat symbol pada HTML.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Membuat symbol pada HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Membuat symbol pada HTML<br/>dr-kone.blogspot.com</h1>
<p>&#9824;</p>
<a href="#">Simbol panah &#8594;</a><br/>
<a href="#">Simbol panah &rarr;</a><br/>
&#8704;<br/>
&#8711;<br/>
&#8719;<br/>
&#174; <br/>
&#9829;<br/>
&#8594;<br/>
&#8593;<br/>
&#8592;<br/>
&#8482;<br/>
</body>
</html>

coba jalankan file di atas di browser maka hasilnya akan seperti berikut.

Dapat di lihat pada contoh di atas, simbol html pun terbentuk sesuai dengan kode symbol html yang di gunakan. Belajar HTML Membuat symbol pada HTML.
berikutnya kita akan mempelajari tentang html, langsung saja pilih pada menu di atas dan pilih CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengenal Class dan ID pada HTML

Seperti yang sudah saya jelaskan pada pembahasan sebelum nya di sini kita akan mengenal class dan id pada HTML secara lebih dalam lagi.

Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ?

agar dapat lebih mudah di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna kotak yang ketiga, nah di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama pada kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah.

Mengenal Class dan Id Pada HTML

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”.

Ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja, perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang class dan id pada html ini.

index.html


<html>
<head>
<title>Mengenal Class dan Id pada HTML | dr-kone.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>dr-kone.blogspot.com</h1>
<!-- contoh penggunaan class -->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>
<!-- contoh penggunaan id -->
<div id="kotak">Kotak 4</div>
</body>
</html>

style.css

h1{
color: orange;
font-family: sans-serif;
text-align: center;
}
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
}
#kotak{
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}

jalankan file di atas pada browser, hasilnya akan nampak seperti ini

Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class yang kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak juga. maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak. dan kotak 4 kita beri tanda dengan id kotak.
Selanjutnya pada css juga dapat anda lihat, class di panggil dengan tanda titik “.” dan id di panggil dengan tanda pagar “#”.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

menghubungkan HTML dengan CSS

kita lanjutkan sesi pelajaran kita sebelumnya, kesempatan kali ini kita akan membahas cara menghubungkan HTML dan CSS.

Menghubungkan HTML dengan CSS ini merupakan salah satu pembahasan yang paling terpenting. karena jika kita tidak mengetahui cara menghubungkan HTML dengan CSS secara otomatis pasti kita tidak mengetahui bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML tidak terhubung dengan CSS. Bukan hanya HTML sebenarnya. tetapi PHP juga sama, PHP yang akan kita gunakan untuk membuat website. Setelah anda selesai mempelajari tutoria-tutorial

HTML ini di anjurkan untuk melanjutkan ke pembahasan belajar css dan pembahasan belajarPHP di https://dr-kone.blogspot.com agar materi yang di pelajari menjadi terurut dan terstruktur.

Setelah anda mempelajari tutorial belajar html menghubungkan html dengan css ini selanjutnya akan di jelaskan lagi pada tutorial selanjutnya tentang Class dan id pada html.

Pemahaman tentang Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum anda melangkah lebih jauh mempelajari CSS. apalagi bagi anda yang ingin memfokuskan diri pada bagian front-end developer/web designer. silahkan simak penjelasan tentang cara menghubungkan HTML dengan CSS berikut ini. dan untuk penjelasan class dan id akan di bahas

pada tutorial selanjutnya.

Cara Menghubungkan HTML dengan CSS

Untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah. gunakan tag <link> untuk menghubungkan html dengan css.

tag link di letakkan pada bagian element head pada struktur HTML. baiklah perhatikan contoh cara menghubungkan html dengan CSS berikut ini.

Buat sebuah file html atau php terserah anda. karena ini merupakan tutorial HTML maka saya menggunakan file HTML untuk di hubungkan dengan CSS. di sini saya membuat file html dengan nama index.html. kemudian buat sebuah file css lagi dengan nama terserah anda, di sini saya membuat file css dengan nama style.css. jadi ada dua buah file yang saya buat yaitu file index.html dan fiel style.css.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | dr-kone.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

Contoh di atas merupakan cara menghubungkan file html/php dengan CSS. pada contoh di atas saya membuat tag link yang berfungsi untuk menghubungkan file html/php dengan file css yang kita inginkan.

atribut rel=”stylesheet” dan type=”text/css” merupakan deklarasi untuk menjelaskan bahwa file yang kita panggil atau hubungkan adalah file stylesheet atau css. dan pada atribut href digunakan untuk meletakkan lokasi dan nama file css yang ingin kita hubungkan.

pada contoh ini saya menghubungkan file html saya dengan file css yang sudah saya berinama dengan style.css.
Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong belum berisi element apapun selain struktur dasar html.
Untuk mencoba apakah file css sudah berhasil terhubung dengan file html maka akan kita cek dengan cara berikut ini. kita buat contoh sederhana dulu dengan cara membuat sebuah element heading 1, dan kemudian kita beri warna text heading 1 tersebut dengan warna red.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | dr-kone.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
</html>

style.css

h1{
color: orange;
font-family: sans-serif;
text-align: center;
}

File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di gunakan dan text-align untuk mengatur rata text.
syntax css di atas merupakan syntax css yang paling dasar yang akan kita pelajari juga pada tutorial selanjutnya tentang pengertian dan pengenalan dasar css pada https://dr-kone.blogspot.com.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat tag iframe dengan HTML

Setelah beberapa sesi sebelumnya kita telah membahas tentang HTML, kali ini kita akan membahas tag iframe.

Iframe merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut. jadi apabila anda ingin menampilkan website lain dalam halaman web anda maka anda bisa menggunakan tag <iframe> untuk menampilkannya. caranya sangat mudah, anda hanya perlu menambahkan atribut src=”” pada tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan. cara penulisan tag iframe di awali dengan tag iframe pembuka “<iframe>” dan di akhiri dengan tag iframe penutup </iframe>.

Perhatikan contoh dan penjelasan berikut ini tentang cara menggunakan tag <iframe>.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | dr-kone.blogspot.com</h1>
<iframe src="https://dr-kone.blogspot.com" height="500px" width="1000px"></iframe>
</body>
</html>

coba jalan kan contoh di atas, berinama contohifram.html lalu jalankan di browser anda.

hasilnya akan seperti ini

Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin anda tampilkan. pada contoh ini kita akan menampilkan halaman website dr-kone.blogspot.com sehingga contoh nya seperti berikut. Belajar HTML Tag Iframe Pada HTML.

<iframe src="https://dr-kone.blogspot.com" height="500px" width="1000px"></iframe>

Atribut height dan width pada contoh di atas untuk menentukan tinggi dan lebar iframe. tapi anda bisa menggunakan css untuk mengatur ukuran tinggi dan lebar iframe.
kita akan lanjutkan sesi berikutnya dalam menggabung kan css dan HTML.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Menampilkan Gambar dengan HTML

June 24, 2018

Setelah sebelumnya kita mempelajari tentang form, kali ini kita akan membahas tentang Cara Menampilkan Gambar.

Gambar adalah salah satu element yang penting dalam sebuah website, selain memperindah tampilan juga untuk memberikan informasi secara visual kepada pengunjung web kita.

Cara Menampilkan Gambar

Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”.

Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya sudah menyediakan sebuah file gambar yang berekstensi .png atau kalian dapat menggunakan gambar kalian sendiri.

contoh

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar dengan HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Menampilkan gambar dengan HTML | dr-kone.blogspot.com;/h1>
<img src="nama file/folder/url gambar">
</body>
</html>

perhatikan kode di atas

gunakan tag "img src" untuk memberitahu browser letak file gambar kita, kalian bisa menggunakan berbagai jenis gambar (png, jpeg, jpg dan lainnya).

Anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar yang tampil.

contoh

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | dr-kone.blogspot.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | dr-kone.blogspot.com</h1>
<img src="nama file.jpg/(url gambar)" height="300px" width="500px;">
</body>
</html>

cobalah buat seperti contoh di atas, selanjutnya kita akan kita akan mempelajari style di html tanpa css.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat form dengan HTML

June 21, 2018

setelah kita mempelajari tentang list sekarang kita lanjutkan membuat form html.

Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya

adalah form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk membuat form ini adalah tag <form> yang didalamnya bisa berupa <input>, <textarea>, <opstion> dan <select>.

Tag <form>

Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. nilai dari method ini biasanya get atau post.

Tag <input>

Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai dengan tombol submit berada dalam tag <input>.

Berikut beberapa bentuk dalam tag <input> yang di kategorikan berdasarkan atribut :

Tag <textarea>

Tag <textarea> adalah tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya untuk pengisian alamat lengkap.

berikut contoh penulisan textarea :

<textarea></textarea>

Tag <select>

Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk membuat pilihan.

berikut contoh penulisan <select> pada HTML

<select>
<option>Semarang</option>
<option>Bandung</option>
</select>

Untuk lebih memberikan pemahaman lebih tentang cara membuat form pada HTML, silahkan perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
nama : <input type="text" name="nama"> <br/>
alamat : <input type="text" name="alamat"> </br/>
password : <input type="password" name="pass"> <br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki"/> Laki - Laki
<input type="radio" name="jk" value="perempuan" /> Perempuan
<br/>
bahas pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
pesan anda :
<textarea></textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>

jalankan browser untuk melihat hasilnya

Setelah ini kita lanjut ke cara menampilkan gambar dengan html.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat list dengan HTML

Kita lanjutkan lagi, disini kita akan mempelajari tentang cara membuat list dengan HTML.

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.

Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka.

tag yang digunakan dalam ordered list ini yaitu <ol>.

unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul>

untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>

jalankan kode diatas.
hasilnya akan seperti ini

contoh di atas menggunakan <li> untuk membuat list pada HTML. dapat anda lihat sendiri bahwa tampilan standar dari list pada HTML di awali dengan tanda titik.

Ordered List <ol>

Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk implementasi ordered list pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>

jalankan di browser

Unordered list <ul>

Unordered list adalah jenis list HTML dalam bentu titik pada awal list.

berikut contoh unordered list pada HTML :

<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>

jalankan dan lihat hasilnya

gampang bukan. Setelah ini kita akan mempelajari tentang form pada HTML, di harap anda sudah mengerti dan hapal materi sebelumnya.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat Hyperlink

Setelah kita mempelajari tentang tabel di sesi sebelumnya saatnya kita lanjut dengan materi membuat hyperlink.

Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokumen dengan dokumen yang lain pada HTML.

Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyerlink tersebut.

Hyperlink sendiri ditulis dengan menggunakan tag <a>. tag <a> ini selalu di ikuti oleh atribut href, dimana didalam href (hypertext reference) ini lah yang akan di isikan alamat yang dituju ketika text atau gambar di klik.

berikut cara penulisan untuk membuat hyperlink :

<a href="https://dr-kone.blogspot.com">klik disini</a>

ketika di klik pada kata “klik disini” maka halaman akan di alihkan ke halaman link tersebut. hal ini sesuai dengan ketentuan yang telah kita tetapkan pada atribut href.

Gampang bukan hyperlink ini, setelah ini kita akan mempelajari list dan cara membuat list.
saya ingatkan lagi di sini, semua pelajaran yang sebelumnya akan terus kita ulangi setiap tahap ke depan jadi jangan lupakan dan hapal terus materi kita sebelumnya.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat Tabel dengan HTML

Sekarang kita lanjutkan pembahasan kita tentang materi ini, di sini kita akan mempelajari tentang Tabel.

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.

Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML.

Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table.

Perhatikan contoh pembuatan table pada HTML berikut :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
<td>baris 1 / kolom 2</td>
<td>baris 1 / kolom 3</td>
</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>
</tr>
<tr>
<td>baris 3/ kolom 1</td>
<td>baris 3/ kolom 2</td>
<td>baris 3/ kolom 3</td>
</tr>
<tr>
<td>baris 4/ kolom 1</td>
<td>baris 4/ kolom 2</td>
<td>baris 4/ kolom 3</td>
</tr>
</table>
</body>
</html>

Dan coba jalankan pada browser.
outputnya akan seperti ini

Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita bahas diatas. namun pada tag table saya memberikan atribut border=’1’. atribut border ini digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).
Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian kepala tabel.
contoh

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Badrul</td>
<td>Sumedang</td>
</tr>
<tr>
<td>2</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Budi</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>

coba jalankan di browser anda, perhatikan dan cobalah membuat tabel sendiri untuk latihan. untuk mempercantik tampilan tabel akan kita lanjutkan di pembahasan selanjutnya menggunakan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat paragraf dengan HTML

Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :

 Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>

 Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>

 Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>

 Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>

perhatikan contoh berikut :

Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>

Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>

Jenis paragraph

Berikut ini adalah beberapa contoh jenis paragraf pada HTML.

Paragraf rata kiri
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>

Paragraf rata kanan
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>

paragraf rata tengah
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>

paragraf rata kiri kanan
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>

berikut contoh lengkapnya

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>

setelah kita selesai mempelajari paragraf selanjutnya kita akan mempelajari tentang tabel.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Format text dengan menggunakan HTML

sebelumnya kita telah mempelajari tentang Heading dan sekarang kita lanjutkan materi dalam memformat teks dengan HTML.

Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.

Membuat huruf tebal (bold) pada HTML

Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b> berikut contoh syntax HTML untuk membuat format text tebal :

<b>ini text tebal</b>

Membuat huruf miring (italic) pada HTML

untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>. contohnya:

<i>ini text miring</i>

Membuat huruf bergaris bawah (underline) pada HTML

untuk membuat teks underline/garis bawah pada HTML kita bias menggunakan tag <u>. contohnya :

<u>ini text underline</u>

berikut format text yang sering digunanakan dalam HTML.

Berikut contoh penulisan tag/element format text di yang sudah di pelajari di atas :

<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>

Jalankan kode diatas dan lihat hasilnya.
Berikut nya kita akan mempelajari bagaimana membuat paragraf dengan html.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Heading pada HTML

Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya.

Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web :

<h1> adalah heading yang digunakan untuk penulisan judul utama dari dokumen

<h2> adalah heading yang digunaakan sebagai sub dari <h1><h3> adalah heading yang digunakan sebagai sub dari <h2> untuk penggunaan <h4><h4><h5><h6> tergantung programmer sendiri untuk memperindah halaman web sesuai keperluan.

berikut contoh penerapan masing-masing element/tag heading :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>

contoh lain

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
</body>
</html>

Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element heading di dalam tag lain :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://dr-kone.blogspot.com/"><h1>ini adalah heading 1 </h1></a>
</body>
</html>

contoh diatas yaitu penggunaan tag heading yang berada dalam tag a. sedangkan atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain. ketika diklik pada “ini adalah heading 1” maka halaman akan di alihkan ke halaman https://dr-kone.blogspot.com.

Selanjutnya setelah kita mempelajari heading kita akan mempelajari tentang format text menggunakan html, jadi lanjutkan terus belajarnya Ok.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengenal Tag, Element, Atribut HTML

Sebelumnya kita telah mengenal tentang editor yang di pakai dan browser, sekarang kita akan mempelajari tentang Tag, Element dan Atribut HTML.

Tag HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya.

disinilah di gunakan tag. dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. berikut penulisan tag yang digunakan dalam HTML

<tag> Objek yang diisi </tag>

Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup, diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</>).
jenis tag yang sering digunakan dalam html
berikut beberapa jenis tag yang akan sering anda jumpai kalo di web programing :

Element HTML

Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi
yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini adalah heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link> dan sebagainya.

Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. atribut bisanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalan atribut HTML</h2>
</body>
</html>

Perhatikan pada syntax di atas :


adalah tag heading 2

 align adalah nama dari atribut

 center adalah nilai/value dari atribut

 “Pengenalan atribut HTML” adalah element dari tag h2

Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.

Setelah kita mengenal tag, element, dan atribut selanjutnya kita akan mempelajari tentang Heading, stay terus materi selanjutnya.

Pengenalan HTML