Selamat datang di blog Diary Technology, disini saya akan menunjukkan tutorial cara membuat HTML. Tutorial ini ditujukan untuk kalian yang ingin belajar membuat HTML. Sebelum kalian mulai tutorial cara membuat HTML, ada beberapa hal yang harus kalian ketahui. HTML adalah protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser kita (Internet Explorer, Google Chrome, Mozilla Firefox, Bing, dll.). HTML inilah yang memungkinkan kalian untuk menjelajah internet dan melihat halaman web yang menarik. Oke… Sudah kebayang dong tentang HTML itu apa, sekarang tanpa basa-basi ini dia tutorialnya.
· Membuat website dalam 1 menit
1. Bukalah NotePad (Start-All Program-NotePad)
2. Ketiklah teks SMA 2 BAE KUDUS
3. Pilih menu File – Save As
4. Beri nama‚ latihan1.html (tanpa kalian kutip)
5. Pada bagian Save as type, pilih All Files (*.*). Lalu klik tombol save.
6. Sekarang klik dua kali file HTMLyang telah kalian buat, (atau Klik dan Drag ke Web Browser kalian,disini saya menggunakan Google Chrome
· Struktur file HTML
Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus kalian tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:
1.<!DOCTYPE HTML>
2.<HTML>
3. <head>
4. <title>Judul File HTML</title>
5. </head>
6.
7. <body>
8. Website <strong><em>pertama</em></strong>saya
9. </body>
10.</HTML>
Keterangan :
<!DOCTYPE HTML>
Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTMLyang akan kalian buat.
<HTML> ... </HTML>
Awal dari isi dokumen HTMLdimulai dari sini, semua kode HTMLyang akan kalian buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.
<head> ... <head>
Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> ... </title>
Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> ... </body>
Nah, apa yang ingin kalian tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.
Setelah kalian memahami tentang cara membuat website melalui NotePad, dan struktur file HTML. Sekarang saya akan membahas mengenai tutorial yang ada di file HTML.
Ø Tutorial memuat gambar pada file HTML.
1. Buatlah file HTML baru dengan nama latihan2.html
2. Carilah sebuah gambar dan simpan satu folder dengan file HTML kalian.
3. Ketiklah kode HTML berikut
4. Bukalah pada browser, kalian akan melihat gambar telah termuat pada file HTML kalian.
Ø Tutorial memuat file HTML baru dan membuat link
1. Buatlah file baru dengan nama latihan3.html, simpanlah di folder yang sama dengan latihan-latihan sebelumnya.
2. Ketikkan kode berikut pada file latihan3.html
3. Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah link yang akan mengait ke file latihan3.html tepat sebelum penutup tag body ( </body> ).
...
<a href=”latihan3.html”>Kembali ke halaman utama <a>
4. Save pekerjaan kalian, dan bukalah file latihan3.html pada browser. Kalian dapat mengklik linknya satu persatu. Ketika link “buka latihan 1”di klik, browser akan menampilkan file latihan1.html. Dan Klik link “Kembali ke halaman utama” untuk menampilkan latihan3.html kembali.
Ø Tutorial membuat penjudulan/ heading pada file HTML
1. Buatlah file baru dengan nama latihan4.html
2. Ketiklah kode HTML berikut
3. Bukalah pada browser, kalian akan melihat penjudulan/ heading pada file HTML kalian
Ø Tutorial membuat ordered list pada file HTML
1. Buatlah file baru dengan nama latihan5.html
2. Ketiklah kode HTML berikut
3. Bukalah pada browser, kalian akan melihat ordered list pada file HTML kalian
Ø Tutorial membuat formulir pada file HTML
1. Buatlah file baru dengan nama latihan6.html
2. Ketiklah kode HTML berikut
3. Bukalah pada browser, kalian akan melihat formulir pada file HTML kalian
Ø Tutorial membuat footer pada file HTML
1. Buatlah file baru dengan nama latihan7.html
2. Ketiklah kode HTML berikut
3. Bukalah pada browser, kalian akan melihat footer pada file HTML kalian
Sekian tutorial cara membuat HTML, segera praktekkan karena membuat HTML itu mudah, caranya sama hanya saja beda tag. Jika ada pertanyaan, silahkan ajukan dalam komentar dibawah. Jangan lupa komen yang banyak yaa, komentar kalian sangat berarti… See you
Wassalamualaikum Wr. Wb.
