Belajar HTML Part 1.
Senin, 09 Maret 2020
HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat di buat dengan teks editor seperti anwriter, notepad ++ dll. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disaji kan dalam web browser.
Penamaan Dokumen
Dokumen HTML di beri nama sembarangan kemudian di beri tambahan ekstensi .htm atau .html
Definisi Elemen
Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML.
Contoh dari elemen dokumen HTML adalah : head, body, table, paragraf, list.
Elemen HTML
Elemen yg di butuh kan untuk membuat suatu dokumen HTML dinyatakan dengan Tag <html>, <head>, dan <body>. Setiap dokumen terdiri atas tag head dan body. Elemen haed berisi informasi masi tentang dokumen tersebut dan elemen body berisi teks yang akan di tampilkan di browser.
1.) Tag HTML
Tag di gunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil) nama sebuah tag, dan sebuah tanda kurang sudut kanan (>, tanda lebih besar). Tag umum nya berpasangan contoh <H1> dengan </H1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <namatag> - </namatag>
2.) Tag Head
Tag head merupakan tag untuk menuliskan keterangan tentang dokumen HTML. Isi teks di antara <head> dengan </head> tidak ditampilkan di dalam browser
Contoh :
<head>
<title>Belajar HTML Bersama Razzer</title>
</head>
Hasil :
3.) Tag Title
Tag title merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser. Nah ini juga sama seperti tag Head cuman beda nya ini kaga ada Tag Head nya.
Contoh :
<title>Belajar HTML Bersama Razzer</title>
4.) Tag Body
Tag body merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.
Contoh :
<body>
Belajar HTML Bersama Razzer
</body>
Hasil :
5.) Heading
Heading dimanfaatkan untuk memindai judul topic atau untuk menunjukkan tingkat keberartian deti teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Semakin dia naik maka semakin dia kecil....
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>
Hasil :
6.) Paragraf
Setiap paragraf harus di mulai dengan memulai tag <p> dan diakhiri dengan </p>.
Contoh :
<body>
<p>
Contoh paragraf 1. Razzer
</p>
<p>
Contoh Paragraf 2. Razzer
</p>
</body>
Hasil :
7.) Line Break
Digunakan untuk ganti baris atau ENTER. Tag yang digunakan adalah <br>. Nah ini jga sma dengan Paragraf cuman paragraf kan ke samping maka ini ke bawah.
Contoh :
<body>
<p>
Contoh paragraf 1. Razzer <br>
</p>
<p>
Contoh paragraf 2. Razzer <br>
C
</p>
</body>
Hasil :
8.) Align
Digunakan untuk menentukan rata tulisan.
Ada 3 Macam Align :
1) Left -> Paragraf Kiri
2) Center -> Paragraf Tengah
3) Right -> Paragraf Kanan
Contoh :
<body>
<p align="left">
Contoh paragraf rata kiri. Razzer
</p>
<p align="center">
Contoh paragraf rata tengah. Razzer
</p>
<p align="right">
Contoh paragraf rata kanan. Razzer
</p>
</body>
Hasil :
9.) Pemformatan Text
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
- Ini Tebal huruf (bold)
- Memiringkan huruf (italic)
- Garis bawah
- Membesarkan huruf
- Mengecilkan huruf
- Superscript
- Subscript
Contoh :
<body>
<b>Tulisan ini di tebalkan (bold)</br>
<br>
<strong>Tulisan ini di tebalkan (strong)</strong><br>
<i>Tulisan ini miring (italic)</i><br>
<em>Tulisan ini miring (emphasize)</em><br>
<u>Tulisan ini digaris bawahi (underline)</u><br>
<big>Tulisan ini besar (big)</big><br>
<small>Tulisan ini kecil (small)</small><br>
Tulisan ini <sub>superscript</sub><br>
Tulisan ini <sub>superscript</sub><br>
</body>
Hasil :
10.) Teks preformat
Digunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks
Contoh:
<body>
<pre>
teks preformat
contoh
teks
preformat
Contoh text preformat
</pre>
</body>
Hasil :
11.) Hyperlink
Dokumen HTML mempunyai kemampuan untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen.
Browser web akan menyorotkan teks atau gambar yg di dentifikasikan sabagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link.
HTML menggunakan tag <a> yang di sebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain.
Contoh:
<a
href="https://razzerhacker.blogspot.com/">Klik Disini -> Link ke Razzer Hacker</a>
Hasil :
Nah nanti kalian setelah "Klik Disini" Nanti kalian akan di bawa ke Web tersebut
Bukak halaman, sama seperti buka di tab baru contoh nanti dia akan blank ya sobat
Contoh :
<a href="http://razzerhacker.blogspot.com" target="_blank">KLIK DISINI NANTI KALIAN AKAN DI BAWA KE TAB BARU</a>
Hasil :
12.) Mailto
Berikut ini adalah contoh link untuk menghubungkan kesebuah alamat email.
Contoh :
Kirim kritik dan saran anda tentang blog kami <a
href="milto:ridwan.hndsm2@gmail.com">Email kami</a>
Hasil :
Sekian dari saya apa, nanti saya akan tambahkan lagi Part 2 nya.