HTML Pengenalan
Apa sih HTML ?
HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web).
- HTML singkatan H yper T ext M arkup L anguage
- Sebuah bahasa markup adalah seperangkat tag markup
- Dokumen HTML dijelaskan oleh tag HTML
- Setiap tag HTML menjelaskan isi dokumen yang berbeda
<!--Struktur awal penulisan HTML--> <!DOCTYPE html> <!--Jenis tag/kode HTML yang di pakai versi 5--> <html> <head> <title></title> </head> <body> <body> </html>
Keterangan :
- DOCTYPE deklarasi mendefinisikan jenis dokumen menjadi HTML
- Teks antara <html> dan </html> menggambarkan sebuah dokumen HTML
- Teks antara <head> dan </head> memberikan informasi tentang dokumen
- Teks antara <title> dan </title> memberikan judul untuk dokumen
- Teks antara <body> dan </body> menggambarkan isi halaman yang terlihat
HTML Tag
< Tagname > konten < / tagname>- Tag HTML biasanya datang berpasangan seperti < p > dan < / p>
- Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
- Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag
Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.
HTML Editor
Dalam penulisan HTML dapat menggunakan beberapa editor , antara lain :
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
- TextEdit
- Notepad++
- PHP Storm
- Sublime
- dll
Namun, untuk awal belajar HTML sebaiknya editor teks yang digunakan seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML. Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
- Langkah 1: Buka Notepad
Untuk membuka Notepad di Windows 7 atau sebelumnya:
Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.
Untuk membuka Notepad di Windows 8 atau yang lebih baru:
Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad. - Langkah 2: Menulis Beberapa HTML
Menulis atau menyalin beberapa HTML ke Notepad. - Langkah 3: Menyimpan Halaman HTML Cara menyimpan file HTML adalah klik File -> Save As lalu simpan dengan ekstensi htm atau html contohnya index.html
- Langkah 4 : Melihat Hasil file HTML di Browser Klik dua kali file HTML yang disimpan, dan hasilnya akan terlihat seperti ini:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <body> </html>
HTML Basic
Semua dokumen HTML harus dimulai dengan deklarasi tipe:
< ! DOCTYPE html >.
Dokumen HTML itu sendiri dimulai dengan
< html > dan diakhiri dengan < / html >.
Bagian terlihat dari dokumen HTML adalah antara
< body > dan < / body>.<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <body> </html>
HTML Elements
Elemen HTML ditulis dengan tag awal, dengan tag akhir, contoh:
< Tagname > konten < / tagname>
Elemen HTML adalah segalanya dari tag awal sampai tag akhir:
< p > My first HTML paragraf. < / p> | Tag Pembuka | Elemen | Tag Penutup |
<h1> | My First Heading | </h1> |
<p> | My First Paragraf | </p> |
< br > | ||
Beberapa elemen tidak membutuhkan tag penutup.
Keterangan :
< html > elemen mendefinisikan seluruh dokumen, dimana elemen ini berfungsi sebagai kerangka website atau bagian terluar website
< body > elemen mendefinisikan tubuh dokumen, seluruh tag atau kode HTML
< p > < / p > elemen p adalah paragraf
< h1 > < /h1 > elemen ini merupakan heading, biasanya digunakan untuk membuat judul website
selalu tambahkan tag penutup dan jangan lupa biasakan menulis tag HTML dengan huruf kecil semua.
HTML Attributes
Atribut memberikan informasi tambahan tentang elemen HTML.
Atribut HTML
- Elemen HTML dapat memiliki atribut
- Atribut memberikan informasi tambahan tentang elemen
- Atribut selalu ditentukan dalam tag awal
- Atribut datang dalam nama / nilai pasangan seperti: name = "value"
Atribut Lang
Atribut lang dapat dideklarasikan dengan tag < html > , lang juga berfungsi sebagai penentu bahasa pada mesin pencari. contoh :
<!DOCTYPE html> <html lang="en_US" > <head> <title></title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <body> </html>
Atribut Title
<!DOCTYPE html> <html lang="en_US" > <head> <title></title> </head> <body> <h1>About NOMOR1.com</h1> <p title="About NOMOR1.com" >NOMOR1.com is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc. </p> <body> </html>
Bila Anda meletakkan mouse/kursor di atas elemen p / paragraf, judul akan ditampilkan sebagai tooltip.
Atribut Href
Atribut href digunakan pada sebuah link yaitu tag a
<a href="http://www.nomor1.com">This is a link</a>
Atribut Ukuran
Gambar HTML didefinisikan dengan tag < img > .
Nama file dari sumber (src), dan ukuran gambar (lebar dan tinggi) semua disediakan sebagai atribut:
<img src="nomor1.jpg" width="104" height="142">Nama file dari sumber (src), dan ukuran gambar (lebar dan tinggi) semua disediakan sebagai atribut:
Ukuran gambar ditentukan dalam pixel: width = "104" berarti 104 layar pixel.
Anda akan belajar lebih banyak tentang gambar dan < img > tag kemudian dalam tutorial ini.
Anda akan belajar lebih banyak tentang gambar dan < img > tag kemudian dalam tutorial ini.
Atribut Alt
Atribut alt menentukan sebuah teks alternatif yang akan digunakan, ketika sebuah elemen HTML tidak dapat ditampilkan.
<img src="nomor1.jpg" alt="nomor1.com" width="104" height="142">
HTML Heading
Heading HTML digunakan untuk judul terdiri dari level tag h1 sampai h6
<h1>Heading dengan level 1 </h1> <h2>Heading dengan level 2 </h2> <h3>Heading dengan level 3 </h3> <h4>Heading dengan level 4 </h4> <h5>Heading dengan level 5 </h5> <h6>Heading dengan level 6 </h6>
INFO PENTING
Dalam penggunaan heading harus digunakan untuk judul yang membutuhkan ukuran besar dan tebal
HTML Paragraf
Untuk membuat paragraf di html tag nya adalah p . dalam paragraf dapat menambahkan atribut untuk perataan kanan, kiri, tengah atau rata kanan - kiri
<p>Ini adalah paragraf</p> <p align="center">Ini adalah paragraf rata tengah </p> <p align="left">Ini adalah paragraf rata kiri </p> <p align="right">Ini adalah paragraf rata kanan </p> <p align="justify">Ini adalah paragraf rata kanan - kiri </p>
HTML Style
Setiap elemen HTML memiliki gaya default (warna latar belakang putih, warna teks hitam, teks-ukuran 12px ...)
Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.
Contoh ini akan mengubah warna latar belakang standar dari putih ke lightgrey:
Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.
Contoh ini akan mengubah warna latar belakang standar dari putih ke lightgrey:
<body style="background-color:lightgrey" > <p>Ini adalah paragraf</p> <p>Ini adalah paragraf</p> </body>
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1>Tentang style </h1> <p style="color:red;font-family:verdana;font-size:30px;" >Paragraf dengan warna tulisan merah, karakter font verdana dan ukuran font 30 pixel</p> <body> </html>
HTML Style merupakan bagian dari CSS tipe inline , dalam atribut style = " properties : value "
HTML Format
Dalam format HTML terdiri beberapa elemen atau tag diantaranya untuk :
- Teks tebal
- Teks miring
- Teks Ditekankan
- Teks Ditandai
- Teks kecil
Teks Dihapus- Teks dimasukkan
- Subskrip : H2O
- Superscripts : X2
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <b>Text tebal / bold </b> <strong>Text tebal / bold </strong> <i>Text miring / italic </i> <em>Text miring </em> <u>Text garis bawah / underline </u> <ins>Text dimasukkan </ins> <s>Text dihapus / striketrue </s> H<sub>2</sub>O X<sup>2</sup> <mark>Text untuk memperjelas </mark> <small>Text kecil </small> <body> </html>
HTML Kutipan
Di HTML kutipan terdapat beberapa tag yang digunakan, seperti :
<q> </q>: sebagai kutipan pendek<blockquote> </blockquote>: digunakan untuk kutipan panjang<abbr> </abbr>: untuk singkatan atau akronim<dfn> </dfn>: untuk mendefinisikan istilah atau singkatan<address> </address>: untuk penulisan informasi kontak<cite> </cite>: mendefinisikan judul karya<bdo> </bdo>: mendifiniskan bi-directional
Contoh :
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <q>Teks ini adalah contoh q </q> <blockquote> Teks ini adalah contoh blockquote </blockquote> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> THE <dfn>WHO </dfn> World Health Organization was founded in 1948. <address> Written by Jon Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland <br> USA </address> Teks ini adalah <cite> contoh cite </cite> <bdo dir="rtl" > Jika browser Anda mendukung bdo, teks ini akan ditulis dari kanan ke kiri: </bdo> <body>
</html>
Tidak ada komentar:
Posting Komentar