HTML DASAR
Assalamu'alaikum Wr. Wb
Kali ini saya akan posting mengenai Struktur dasar dan sintak-sintak dasar HTML, ini merupakan postingan lanjutan dari posting sebelumnya mengenai aplikasi text editor, sesudah kita tahu mengenai apa saja macam - macam aplikasi text editor sekarang kita berlanjut untuk mencoba sintak-sintak yg ada di HTML, ini baru dasarnya saja ya jadi biar lebih paham.
Langsung saja...
Disini saya memakai aplikasi text editor Sublime Text, untuk installasi Sublime Text sudah saya bahas pada postingan sebelumnya. Silakan dicari ya.
Langsung saja kita mulai bermain sintak...
-
Tag paling atas sendiri adlah <DTD> atau <DOCTYPE> singkatan dari Document Type Declaration fungsinya adalah untuk memberitahu kepada browser bahwa dokumen yang akan diproses adalah HTML
-
Tag <html> ini adalah tag pembuka dari keseluruhan halaman web. Pada tag ini berisi semua kode HTML. Tag ini ditutup dengan </html>
-
Tag <head> ini berisi berbagai definisi dari halaman web, tag <title> untuk memberikan judul dari halaman web yg dibuat. Tag ini diakhiri dengan </head>
-
Tag <body> ini berisi semua elemen yang akan ditampilkan dalam halaman web seperti text, gambar, link, tabel dll. Tag ini ditutup dengan </body>
Untuk menyimpan filenya klik pada menu File > Save as, beri nama terserah kalian untuk ekstensinya adalah *.html lalu klik Save
Setelah kalian save, langsung saja double klik pada file html dan secara otomatis terbuka sendiri di browser kalian.
Untuk hasilnya adalah seperti berikut :
Simple sekali ya?? Memang, itu hanya dasarnya saja.
Nah, sekarang lanjut ke tutorial dasar yang selanjutnya...
1. Membuat heading
Disini untuk heading ada 6 pilihan mulai dari
h1 - h6, yang paling besar ukurannya adalah h1 lalu yang paling
kecil adalah h6. Sintaknya :
<h1> Ini adalah heading </h1>.
Silakan disesuaikan sendiri dengan kebutuhan.
Untuk hasilnya adalah seperti ini :
2. Membuat Paragraf
Sintaknya :
<p> Ini adalah paragraf </p>
Untuk hasilnya seperti ini :
3. Membuat LINK
Sintaknya :
<a href="https://www.facebook.com"> Ini adalah link facebook </a> .
Kalian bisa mengubah link dan kata-katanya sesuai yang kalian suka, tetapi pastikan kalian punya koneksi internet, kalau tidak ya tidak bisa membuka link yang dituju.
Untuk hasilnya seperti ini :
Kalau text yang berwarna biru di klik maka akan menuju kehalaman
facebook seperti ini :
4. Menyisipkan gambar
Untuk memasukan gambar pastikan file
gambarnya berada dalam satu folder dengan file html nya ya.
Sintaknya :
<img src="1.jpg">
untuk teks yang saya blok biru harus sama dengan nama gambarnya dan jangan lupa juga dikasih ekstensinya, contoh: fb.jpg, love.png, miss.gif
Untuk hasilnya seperti ini :
Hasilnya nanti ukuran gambarnya masih original, jadi terlihat
besar sekali, untuk mengatur ukurannya bisa menggunakan atribut width
dan height yang akan kita bahas pada postingan selanjutnya... Silakan Ditunggu aja ya...
Berdasarkan kegiatan ini kita bisa mengerti tentang sintak-sintak dasar pada HTML dan Struktur Dasar HTML.
Referensi :
http://203.130.243.185/w3/w3schools/html/html_basic.html
http://www.duniailkom.com/tutorial-belajar-html-langkah-pertama-untuk-membuat-web/
Wassalamu'alaikum Wr. Wb