Kumpulan materi dasar HTML untuk pemula - Halo sob, kali ini saya akan membagikan sedikit ilmu tentang HTML. Ini adalah modal dasar bagi pemula yang ingin menjadi programmer ataupun profesi lainnya yang berkaitan dengan coding. Memang sih sedikit rumit, tapi kalo niat ya pasti bisa karena nothing is impossible kan?hehe. Ngomong-ngomong udah tau belum apa itu HTML dan apa singkatan dari HTML tersebut? kalau anda belum mengetahuinya silakan simak saja artikel dibawah ini!
1. PENGENALAN HTML
HTML adalah singkatan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal dengan web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser.
Dokumen HTML diberi nama sembarang kemudian diberi tambah format atau ekstensi .htm atau .html. Dokumen HTML disusun elemen-elemen atau komponen dasar pambentuk HTML. Contoh dari elemen dokumen HTML adalah : head, body, table, paragraf, list.
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head>, dan <body>. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut dan elemen body berisi teks yang akan ditampilkan di browser.
2. TAG HTML
Setelah kita sudah mengerti apa itu HTML, maka saya berikan materi berikutnya yaitu tentang tag HTML. Tag HTML ini digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan contoh <H1> Dengan </H1>. Secara umum suatu elemen dalam dukmen HTML yang dinyatakan dengan tagnya, dituliskan dengan <namatag> - </namatag>
Tag Head
Tag head merupakan tag untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.
contoh : <head>
<title>Belajar HTML</title>
</head>
Title
Title merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Dan hasil tag ini akan ditampilkan dalam browser. Contohnya <title>Belajar HTML</title>
Body
Body merupakan section dalam dokumen HTML yang akan ditampilkan kedalam browser.
contoh : <body>
Belajar HTML
</body>
Heading
Heading dimanfaatkan untuk menandai judul topik atau untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai enam. Nomor 1 merupakan heading yang terbesar.
contoh : <body>
<h1>Heading 1<h1>
<h2>Heading 2<h2>
<h3>Heading 3<h3>
<h4>Heading 4<h4>
<h5>Heading 5<h5>
<h6>Heading 6<h6>
</body>
Paragraf
Pada paragraf harus dimulai dengan memberi tag <p> dan diakhiri denagn </p>.
contoh : <body>
<p>
Contoh paragraf 1. Contoh paragraf
1. Contoh paragraf 1. Contoh paragraf 1.
</p>
<p>
Contoh paragraf 2. Contoh paragraf
2. Contoh paragraf 2.. Contoh paragraf 2.
</p>
</body>
Line Break
Line break digunakan untuk ganti barus atau Enter. Tag yang digunakan adalah <br>.
contoh : <body>
<p>
Contoh paragraf 1.<br>
Contoh paragraf 1.<br>
Contoh paragraf 1.<br>
Contoh paragraf 1.<br>
Contoh paragraf 1.
</p>
<p>
Contoh paragraf 2.<br>
Contoh paragraf 2.<br>
Contoh paragraf 2.<br>
Contoh paragraf 2.<br>
Contoh paragraf 2.
</p>
</body>
3. PEMFORMATAN TEKS
Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, garis bawah, dan lain-lain.
Pemformatan Teks
- Menebalkan huruf (bold)
- Memiringkan huruf (italic)
- Garis bawah
- Mengecilkan huruf
- Superscript
- Subscript
<body>
<b>Tulisan ini ditebalkan (bold)</b>
<strong>Tulisan ini ditebalkan (strong)</strong><br>
<em>Tulisan ini miring (emphasize)</em><br>
<big>Tulisan ini besar (big)</big><br>
<i>Tulisan ini miring (italic)</i><br>
Tulisan ini <sub>subsccript</sub><br>
Tulisan ini <sup>superscript</sup>
</body>
Teks Preformat
Digunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.
contoh :
<body>
<pre>
Contoh text preformat
contoh
text
preformat
Contoh text preformat
</pre>
</body>
4. Hyperlink
Dokumen HTML mempunyai kemampuan untuk memberikan link dari satu text dan / atau gambar menuju ke dokumen atau bagian lain dalam satu dokumen. Browser web akan menyorot teks atau gambar yang diidentifikasikan sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link.
HTML menggunakan tag <a> yang disebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain.
Contoh :
<a href="http://anemostingdi.blogspot.com"Link ke
http://anemostingdi.blogspot.com</a>
Membuat Link Untuk Window Baru
Untuk membuat link supaya membuka window baru dapat ditambahkan artibut: target="_blank".
Contoh :
Buka halaman <a href="http://anemostingdi.blogspot.com"
target="_blank">http://anemostingdi.blogspot.com</a> di window baru.
Mailto
Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat email.
contoh :
Kirim masukkan anda ke <a href="mailto:yashlana7x@gmail.com">Email kami</a>
5. LIST
List item ini digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).
Ordered List
Untuk membuat list terurt nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya mengunakan tag <li> dan penutup </li>.
contoh :
Daftar Hari:<br>
<ol>
<li>senin</li>
<li>selasa</li>
<li>rabu</li>
<li>kamis</li>
<li>jumat</li>
<li>sabtu</li>
<li>minggu</li>
</ol>
Unordered List
Untuk membuat list tidak terurut nomor , kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> dan penutup </li>.
contoh :
Daftar Hari:<br>
<ul>
<li>senin</li>
<li>selasa</li>
<li>rabu</li>
<li>kamis</li>
<li>jumat</li>
<li>sabtu</li>
<li>minggu</li>
</ul>
5. Gambar
Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu website. Umomnya website dilengkapi dengan gambar-gambar untuk membuat orang-orang tertarik lalu melihat dan membaca isi yang ada disuatu website. Setiap gambar akan butuh waktu tambah untuk download dan memperlambat awal penampilan suatu dokumen dalam browser. Untuk itu perlu hati-hati untuk menyertakan gambar dalam dokumen website. Untuk menyertakan sebuahimage dalam dokumen web adalah <img scr="nama_gambar.jpg">.
contoh :
<img scr="gambarhp.jpg"
width="300px" height="300px" >
<img scr="http://anemostingdi.blogspot.com/gambar/dinosaurus.png"
width="300px" height="300px" >
Teks Alternatif Untuk Image
Artibut alt pada tag <img> menyediakan tempat untuk menampilkan teks pengganti gambar. Keterangan alternatif akan muncul jika kita menaruh mouse pointer di atas agak lama.
contoh :
<img scr="http://anemostingdi.blogspot.com/gambar/dinosaurus.png"
alt="dinosaurus"width="300px" height="300px" >
6. Tabel
Tabel digunakan untuk menyajikan data dala bentuk kolom atau baris. Tabel didefinisikan dengan tag <table>. Sebagian tabel dibagi dengan beberapa baris dengan tag <tr>, dan setiap baris dibagi dengan menjadi beberapa kolom dengan tag <td>. td singkatan dari "table data" yang berati tempat penyimpanan data (data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, from, tabel, dll.
contoh :
<table border="1">
<tr>
<th>Nama</th>
<th>Alamat</>
</tr>
<tr>
<td>Sule</td>
<td>Jawa Barat</td>
</tr>
<tr>
<td>Alan Walker</td>
<td>Jakarta Pusat</td> </tr>
<tr>
<td>Naruto</td>
<td>Lampung</td>
<tr>
</table>
7. Form
Form HTML adalah sebuah area yang mengandung elemen-elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan informasi seperti text, textarea, menu drop-down, radio button, dll. Sebuah form didefinisikan dengan tag <form>.
Saya ambil contoh textarea seperti ini:
<form>
<textarea name+"textarea"
cols="50" rows="5">isikan komentar anda disini</textarea>
</form>
0 Comments:
Post a Comment