Tutorial HTML Lengkap dari penjelasan hingga basic-basicnya

Beranda

...

Website, Webmaster, Webdeveloper
Tutorial HTML Lengkap dari penjelasan hingga basic-basicnya

stephan123

12-07-2015 14:58

Tutorial HTML Lengkap dari penjelasan hingga basic-basicnya

Selamat Datang di Tutorial HTML Bagian 1
WARNING!!!! NIAT ONLY!!!!

Pertama-tama gw ucapkan terima kasih karena telam menyempatkan untuk membaca thread ini, dan juga gw ucapkan maaf sebesar-besarnya jikalau dirasa ada salah kata atau kosakata yang kurang tepat karena ini thread pertama gw emoticon-Malu (S)

Di sini gw tegaskan semua ide-ide yang ada di sini merupakan ide murni 100%dari kepala gw jadi DILARANG UNTUK COPAS DAN DI PERJUAL-BELIKAN!!!!, ya materi pembelajarannya sendiri gw memang pelajari dari website luar tetapi gw ringkas dan rangkum kembali yang penting penting dan tentunya dalam bahasa indonesia emoticon-I Love Indonesia (S)

perlu di ingat semua hal itu butuh NIAT jadinya kalo ada niat pasti cepet ngerti kok, dan dalam kasus HTML ini gw rasa sih sekali dua kali ampe tiga kali baca bisa di mengerti >.<
Pertama-tama sebelum belajar HTML sebaiknya tau apa itu HTML dan juga fungsi serta kegunaannya

Spoiler for 1. Pengenalan HTML:

Apa itu HTML ?
HTML merupakan kepanjangan dari Hyper Text Markup Language yang juga merupakan kode yang digunakan untuk mendiskripsikan gambar ataupun juga bisa link dalam bentuk teks biasa. Dokumen HTML terdiri dari "HTML tags" dan tiap "tags" nya mendiskripsikan konten yang berbeda-beda.
Contoh HTML :

Quote:

Spoiler for 2. Penjelasan lebih lanjut tentang tags:

Dari gambar tadi dapat kita ibaratkan atau artikan seperti ini :
- <!DOCTYPE html> merupakan tags yang mendefinisikan kalau dokumen itu merupakan html
- <html> serta </html> , di antara tags tersebut isi dari dokumen HTML
- <head> serta </head> , di antara tags tersebut merupakan struktur dari "head" atau "header" jika di blog
- <title> serta </title> , di antara tags tersebut merupakan Title dari dokumen HTML (kalau di preview di browser akan menjadi tulisan di tab browser)
- <body> serta </body> , di antara tags tersebut merupakan atau mendekskripsikan "body" atau "badan" dari dokumen tersebut
- <h1> serta </h1> , mendekskripsikan heading (ada 6 heading)
- <p> serta </p> , mendekskripsikan paragraf

Tags di HTML kurang lebih seperti ini <nama-tag>isinya</nama-tag>
jadi setiap ada tag pembuka di HTML pastilah ada tag penutup/akhiran

Contohnya :

Quote:

Spoiler for 3. Tentang versi HTML dan penempatannya:

HTML itu seperti yang kita tau di definisikan dari <!DOCTYPE> nah dalam kasus ini dapat muncul pertanyaan begini,
"Gan kalo salah nulis DOCTYPE nya gimana ?" Perlu di ketahui gan kalo HTML itu bukanlah kode yg sensitif (maksudnya di sini tidak terlalu menuntup hurup besar dan huruf kecil) bukannya yg sensitif yg laen ya emoticon-Ngakak (S)

maka dari itu penulisan salah pun masih dapat di terima (salah dalam konteks huruf besar dan kecil bercampur aduk ya)
contohnya begini nih

Quote:

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

nah semua kode di atas itu bisa di gunakan (cobain aja noh sendiri)
"Lalu gan gimana kalo soal versi dari HTML itu sendiri ?"
Kalo versi HTML itu sih sprti ini gan :

Spoiler for HTML5:

<!DOCTYPE html>

Spoiler for HTML4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Spoiler for XHTML1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quote:

HTML1 - 1991
HTML2 - 1995
HTML3.2 - 1997
HTML4.01 - 1999
XHTML - 2000
HTML5 - 2014

Spoiler for 4. Waktunya berekperimen ^_^:

Nah sebelumnya, perlu di ketahui kalau HTML ini bisa di buat dengan menggunakan Notepad (Windows), TextEdit (Mac), Microsoft WebMatrix, ataupun Sublime Text.

Spoiler for 4.1 Buka Notepad-mu!:

gw rasa ga usah di jelasin gimana cara buka notepad psti udeh pada tau emoticon-Ngakak (S)

"Kalo ga tau gimana gan?" Tanya Mbah Google yang konon serba tau emoticon-Ngakak (S)

Spoiler for 4.2 Menulis HTML:

Copas kan kode di bwh ini

Quote:

<!DOCTYPE html>
<html>
<body>

<h1>TS Ganteng</h1>
<p>Sumpah GA BOONG.</p>

</body>
</html>

Spoiler for 4.3 Save as HTML format lalu view di browser:

klik save as lalu pilih all files di bagian save as type kemudian tulis index.html atau index.htm di bagian file name Tutorial HTML Lengkap dari penjelasan hingga basic-basicnya

lalu setelah itu preview di browsermu dan... tadaaaa...

karena di tempat gw udh gelap gulita dan juga faktor "mata 5 wat" emoticon-Malu (S)

jadinya nanti gw lanjutin lagi emoticon-Ngakak (S)

di akhir kata gw minta maaf sebesar-besarnya kalo ada kesalahan dan juga jika ada yang ingin di tanyakan bisa PM, atau lewat fb : https://www.facebook.com/lstephan.vebrianl

1.6K

Kutip

Balasan

Komentar yang asik ya

Mari bergabung, dapatkan informasi dan teman baru!

Website, Webmaster, Webdeveloper

23.3KThread•4.4KAnggota

Urutkan

Terlama

Komentar yang asik ya