Dalam tahap kelima ini, saya akan coba menjelaskan bagaimana cara memahami HTML, agar kita bisa memakainya dengan rapih.Seusai kita melakukan di tahap ke-empat kamu akan memulai dari HTML, klik seperti petunjuk di atas, apa bila Dreamweaver kamu tidak nampak seperti gambar di atas, kamu bisa langsung ke menu paling atas terdapat "File" lalu pilih "New" dan lanjutkan pemilihan HTML. Ok?
1. Lanjut.., saat kamu buka kamu lakukan Save As terlebih dahulu, untuk lebih cepat kamu bisa menggunakan Ctrl + Shift + S.
2. lakukan Rename dari " Untitled-1.html " menjadi > " index.html ", dan taruh di samping folder images, dan sekarang kamu meiliki folder images dan index.html.
Kenapa harus index ?
Untuk lebih mudahnya karena Index akan yang paling pertama dibaca dan terbuka.
apabila sudah diSAVE. maka kita lanjut ke dalam Code HTML, dan saat ini kita memiliki codeyang secara otomatis sudah kita dapatkan, mari kita lihat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
saya tidak perlu menjelaskan code yang sulit di mengerti dan dijelaskan buat kamu. saya akan jelaskan yang mudah di mengerti buat kamu.
ok, kita langsung memulai dari code HTML yang di berikan oleh dreamweaver. yaitu terdapat 2 bagian
yaitu <Head> dan <Body>
kita akan mulai dari ' Head ' terlebih dahulu.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
disinilah kita akan memulai untuk memasukan nama Web kita, dan CSS. ( untuk sementara ini dulu.)<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet, Css lah yang akan membuat bentuk template, semakin kamu mengetahui fungsi-fungsi code CSS, kamu akan bisa membuat tamplilan lebih menarik.
Ok, kita Skip dulu untuk penjelasan HTML di Head ini. karena kita membutuhkan CSS yang di bangun dengan cara sendiri ataupun dengan buatan orang. tapi kita butuh CSS.
1. lakukan Create New File lagi. seperti kamu menciptakan file index.html, namun kamu jangan pilih HTML, melainkan CSS,
2. dan Save As, (Ctrl + Shift + S), lalu buat Folder baru di samping images dengan nama 'CSS', *ini dilakukan hanyalah untuk merapihkan saja, dan nantinya akan mempermudah kamu untuk pembelajaran. sebenernya bisa dimana aja asal terpanggil di HTML. ( bingung ? klo bingung dengan penjelasan ini, hiraukan saja.. ikuti intruksi)
3. lalu Save file Css ini di dalam folder CSS dengan nama 'style.css', Ok .. Done ?
di file CSS kamu akan melihat code seperti ini :
@charset "utf-8";
/* CSS Document */
/* CSS Document */
apa bila sudah masukkan Code seperti berikut :
@charset "utf-8";
/* CSS Document */
html { background-color:#f1f1f1; }
/* CSS Document */
html { background-color:#f1f1f1; }
Code tersebut akan membuat HTML kamu akan berwarna #f1f1f1 ( abu-abu tapi tipis ).
kembali ke code HTML :
kita akan panggil CSS tersebut ke dalam HTML dan menamakan website kita
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atwal</title> <!--Nama website -->
<link href="css/style.css" type="text/css" rel="stylesheet" /> <!--Memanggil CSS -->
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atwal</title> <!--Nama website -->
<link href="css/style.css" type="text/css" rel="stylesheet" /> <!--Memanggil CSS -->
</head>
lakukan di atas dan jangan hiraukan tulisan yang di dalam tanda <!-- * --> itu hanya pemberitahuan saja.
kalau sudah, mari kita cek apakah sudah terpanggil atau tidak. buka browser kamu , dan ketik localhost/atwal <- *nama folder yang kamu buat pertamakali di dalam C:\xampp\htdocs\ .
kalau halamannya berwarna abu-abu dan tidak nampak putih lagi, maka itu experiment kamu berhasil.
karena dasar design yang kita rencanakan itu putih, maka kita kembalikan dari #f1f1f1 menjadi #FFFFFF.
beberapa penjelasan sedikit dalam penulisan coding:
mungkin kamu akan melihat beberapa perbedaas dalam versi penulisan seperti ini <link type="text/css" href="css/style.css" rel="stylesheet" />, yang href ada ditengah-tengah, itu sama sekali tidak masalah, yang penting, tidak terpisah dari status nya.
Contoh <link type="text/css" href="css/style.css" rel="stylesheet" />, setiap kelompok warna ygn sama tersebut jangan terpisah. ok ?
Code apakah ini ' <!-- ' dan di akhiri dengan ' --> ' ?
Code itu dinamakan remark / comment tag , semua tulisan yang didalam code itu, dia tidak terbaca sebagai coding dan tidak akan dihiraukan oleh browser, alias di cuekin. biasa ini di gunakan untuk comentar saja atau menyembunyikan code yang tidak mau kita delete.
Tidak ada komentar:
Posting Komentar