Sobat Bermanfaat, Tujuan dasar membangun website dan Blog menurut saya pribadi haruslah kita memiliki dasar dan diniatkan untuk belajar, belajar dan belajar seperti halnya mempelajari dasar – dasarnya HTML dan CSS, agar kita dapat menikmati seluruh proses kita dalam menggapai sukses di dunia On Line.
Sobat Bermanfaat, sebelumnya saya minta maaf, bukan bermaksud menggurui tapi di sini saya hanya bermaksud ingin berbagi dan belajar menyampaikan apa yang saya pahami selama empat hari terahir tentang Belajar HTML dan CSS Dasar.
Mohon maaf kepada para suhu tentang materi Belajar HTML dan CSS Dasar dan sekaligus minta koreksinya, karena saya yakin dalam tulisan saya ini pasti terdapat banyak kesalahan akibat dari kebodohan saya. Maklum henya belajar secara otodidak.
Oke, mari kita mulai materi Belajar HTML dan CSS Dasar.
Apa itu HTML ?
HTML adalah bahasa markup untuk mendeskripsikan dokumen web (halaman web).
- HTML singkatan dari Hyper Text Markup Language.
- HTML sebenarnya bukan tentang Pemograman atau Coding tapi HTML adalah tentang sebuah rangkaian <Tag HTML> yang disusun dan disajikan dalam tampilan sebuah halaman Web.
- Markup adalah seperangkat tag markup yang ditulis dalam tanda </>
- Dokumen HTML dijelaskan oleh Tag HTML
- Setiap Tag HTML menjelaskan isi dokumen yang berbeda
- Tag HTML datang dalam pasangan seperti <p> dan </p>
- Tag pertama pada susunan adalah tag awal, tag kedua adalah tag akhir
- Tag akhir ditulis seperti tag awal, tetapi didahului dengan garis miring sebagai tanda penutup
- Susunan HTML terdiri dari Tag, Elemen dan Atribut. Dan yang ditampilkan oleh web browser adalah elemen yang dibangun antara Tag <body> dan penutupnya </body>.
Struktur HTML
Di bawah ini adalah contoh susunan dasar dari struktur halaman HTML:
<html>
<head>
<title> Contoh Dasar HTML </title>
</head>
<body>
<h1> Belajar HTML dan CSS Dasar </h1>
<br />
<p> Ini adalah sebuah paragraf. </p>
<p> Yang tampil pada web Broser Hanya yang di dalam Body. </p>
</body>
</html>
<head>
<title> Contoh Dasar HTML </title>
</head>
<body>
<h1> Belajar HTML dan CSS Dasar </h1>
<br />
<p> Ini adalah sebuah paragraf. </p>
<p> Yang tampil pada web Broser Hanya yang di dalam Body. </p>
</body>
</html>
Yang ditampilkan oleh Web Browser hanya yang dibangun diantara tang <body> dan tag penutupnya </body>. Seperti gambar dibaah ini.
Penjelasan Contoh :
- <html> mendefinisikan dokumen ini adalah jenis HTML.
- Teks antara <html> dan </html> menggambarkan isi sebuah dokumen HTML
- Teks antara <head> dan </head> memberikan informasi tentang dokumen HTML
- Teks antara <title> dan </title> memberikan Judul untuk dokumen (terlihat dalam jendela TAB browser atas)
- Teks antara <body> dan </body> menggambarkan Isi halaman yang terlihat
- Teks antara <h1> dan </h1> menggambarkan Judul isi
- Tag <br /> memberikan satu buah baris kosong antara Judul dan Paragraf
- Teks antara <p> dan </p> menggambarkan Sebuah Paragraf
Sobat Bermanfaat, agar anda dapat lebih memahami dari uraian Belajar HTML dan CSS Dasar ini, silahkan sobat coba praktekkan sendiri.
Pertama, Buka Notepad pada PC anda. Caranya: Tekan tombol “START” (gambar jendela windows pada pojok kiri bawah) >> kemidan “All Programs” >> cari dan Klik “Folder Accessories” >> dan pilih “Notepad”.
Kedua, Setelah jendela “Notepad” terbuka, isikan kode di atas pada papan “Notepad” sobat. Atau bisa juga Copy Paste kode di bawah ini:
<html>
<head>
<title> Contoh Dasar HTML </title>
</head>
<body>
<h1> Belajar HTML dan CSS Dasar </h1>
<br />
<p> Ini adalah sebuah paragraf. </p>
<p> Yang tampil pada web Browser Hanya yang di dalam Body. </p>
</body>
</html>
<head>
<title> Contoh Dasar HTML </title>
</head>
<body>
<h1> Belajar HTML dan CSS Dasar </h1>
<br />
<p> Ini adalah sebuah paragraf. </p>
<p> Yang tampil pada web Browser Hanya yang di dalam Body. </p>
</body>
</html>
Silahkan sobat ganti tulisan yang berwarna “Merah” dengan kata atau tulisan sobat sendiri.
Ketiga, Simpan tulisan sobat tadi dengan format .html, caranya, pada jendela “Notepad” klik “File” >> “Save As…” >> setelah jendela “Save As” terbuka, pada “Save as type:” pilih “All Files (*.*)” >> kemudian Tuliskan nama file latihan sobat dengan ekstensi “.html” tanpa tanda petik pada kolom “File name:” sebagai contoh tuliskan saja “ latihan.html “ kemudian klik “Save”.
Keempat, untuk melihat hasil dari kerja sobat tadi, silahkan sobat buka File tadi cari di “File explorer” setelah ketemu, klik kanan pada Mouse, pilih Open with dan pilih Mozilla / Web browser kesayangan sobat, dan lihat hasilnya.
Apabila sobat kesulitan mencari file tadi, sobat bisa gunakan cara ini: Klik START (gambar jendela pojok kiri bawah) >> di pojok bawah pada kolom “Search Programs and Files” ketik nama file yang tadi sudah sobat simpan, contoh: latihan.html dan file hasil pencarian akan muncul pada hasil pencarian sebelah atas >> arahkan mouse pada file latihan.html >> klik kanan pada Mouse, >> pilih Open with dan pilih Mozilla / Web browser kesayangan sobat, dan lihat hasilnya.
Untuk lebih jelasnya silahkan lihat gambar.
Semoga penjelasan Belajar HTML dan CSS Dasar singkat ini bisa sobat pahami dan silahkan dipraktekkan.
Untuk merubah warna, bentuk tulisan, besar kecilnya halaman dan sebagainya (gaya tampilan / Styling) pada halam sebuah website atau blog ini menggunakan CSS (Cascading Style Sheets) yang akan kita bahas bersama pada kesempatan berikutnya.
Baca juga : Membuat Blog atau Website, Apakah Penting?.
Semoga bermanfaat… Aamiin…!!!
Referensi: http://w3school.com
