Ini merupakan tutorial pendek yang bisa kita gunakan untuk kita yang masih awam, yang ingin belajar mengenai CSS. Tutorial ini tidak menerangkan secara mendetil mengenai CSS, namun menerangkan bagaimana caranya membuat sebuah file HTML, sebuah file CSS dan membuat mereka dapat bekerja bersama.
Menurut saran saya kita lebih baik menggunakan tools yang simple agar kita dapat berlajar dengan mudah. Contoh tool simple seperti Notepad (Windows), TextEdit (Mac), Kedit (KDE). Disini peralatan yang saya gunakan adalah Notepad.
Langkah Pertama : Buka Notepad (texteditor), maka akan terlihat halaman kosong pada Notepad,dan kemudian ketik dibawah ini
<head>
<title>My first Styled Page</title>
</head>
<body>
<!--Site navigation menu-->
<ul class="navbar">
<li><a href="index.html">Home Page</a>
<li><a href="musings.html">Musik</a>
<li><a href="town.html">Town</a>
<li><a href="links.html">Links</a>
</ul>
<!--Halaman Utama--!>
<p> Selamat datang di Halaman Pertamaku
<p> Gambar yang saya suguhkan sangat sederhana, namun gambar ini punya style, Punya link
<p> Saya akan mengubah sesuai dengan keinginan saya dengan belajar lebih banyak mengenai CSS
<!--Tulis tanggal, it's only polite-->
<address>Made 13 Maret 2014<br>
by myself.</adrres>
</body>
</html>
Catatatan :
Baris pertama dalam file html diatas menerangkan pada browser jenis HTML yang kita gunakan (DOCTYPE berarti DOCument TYPE)
< > ini disebut dengan Tags. Seperti yang terlihat dalam file HTML diatas mengandung <html> dan </html>. Antara <Head> dan </Head> merupakan sebuah ruang untuk berbagai macam informasi yang tidak akan ditampilkan di dalam screen/Monitor, fungsi utama ruang ini adalah sebagai judul dari sebuah dokumen namun kita kemudian akan menambahkan file CSS disini.
Antara <body> dan </body> dari artinya saja kita bisa tahu ini merupakan badan dari sebuah Web, segala sesuatu yang ditulis diantara ruang ini akan ditampilkan di layar kecuali ini<!---->, karena
<!----> merupakan tulisan komentar yang tidak akan terbaca oleh browser.
<!----> merupakan tulisan komentar yang tidak akan terbaca oleh browser.
<ul></ul>" Unordered List " penulisan daftar bukan nomor.
contoh:
- Hitam
- Biru
- Merah
<li> List Item (daftar text perincinya)
<p>Paragraph
<a>Anchor (membuat link)
Show Time:
Berikutnya
kita akan melihat hasil dari tulisan HTML kita. Caranya dengan
"Save..As" dari file Menu.Tempatkan di direktori/ folder. Untuk
mempermudah kita bisa ke jendela desktop lalu klik kanan pada mouse
pilih New-Folder kemudian namai dengan "Mywebsite". Kita bisa menaruh file HTml kita di folder MyWebsite simpan dengan nama "mypage.html". Pelu diingat ekstensinya harus .html agar bisa di jalankan di Browser. Dan Berikut hasilnya ini masih tahapan dasar penulisan file HTML selanjutnya kita belajar ke STEP 2.
No comments:
Post a Comment