HTML Dasar

KERANGKA DASAR WEB
DESAIN... FORMAT LAYOUT WEB

KERANGKA DASAR
• Tahapan pembuatan kerangka dasar
digunakan bahasa pemrograman HTML dan
yang akan dibuat :
– kerangka dari header,
– content,
– sidebar dan
– footer
KERANGKA DASAR
• Simpan file ini dengan nama index.html
<html>
<head>meta charset = “utf-8”
<title>Layout website sederhana</title>
</head>
<body>
<div class=“wrap”>
</div>
</body>
</html>
KERANGKA DASAR
• Apabila koding itu dijalankan maka akan
menampilkan halaman kosong....
</div>
• Berfungsi untuk, membuat halaman website
terletak di tengah tengah dan terlihat lebih rapih
• Selanjutnya membuat header dan diletakan setelah,
wrap..
KERANGKA DASAR
• Kerangka HEADER
<div class=“header”>
</div>
Selanjutnya buat conten....
• Kerangka CONTENT
<div class=“main”>
<div class=“content”>
<h2>content </h2>
<p>Apa kabar, ini buat conten</p>
</div>
Selanjutnya buat sidebar
• Kerangka SIDEBAR
<div class=“sidebar”>
<h2>sidebar</h2>
<p>yang ini sidebar</p>
</div>
<div class=“clear”> </div>
(<div class =“clear”, berfungsi untuk membuat komponen berikutnya kembali pada posisinya, dan
tidak mengikuti posisi sidebar ataupun konten..)
Selanjutnya buat footer

KERANGKA DASAR
• Kerangka FOOTER
<div class=“footer”>
<center> <p>copy right </p></center>
</div>
</div>
</body>
</html>
KERANGKA DASAR
• Hasilnya....
<html>
<head>meta charset = “utf-8”
<title>Layout website sederhana</title>
</head>
<body>
</div>
<div class=“header”>
</div>
<div class=“main”>
<div class=“content”>
<h2>content </h2> <p>Apa kabar, ini buat conten</p>
</div>
<div class=“sidebar”>
<h2>sidebar</h2> <p>yang ini sidebar</p>
</div>
<div class=“clear”> </div>
<div class=“footer”>
<center> <p>copy right </p></center>
</div>
</div>
</body>
</html>
BELAJAR DASAR HTML
• Tujuannya :
Memahami struktur dasar dari dokumen
HTML
• Materi :
Struktur dasar dokumen HTML(Tag, Element,
Attribute), Element HTML, Element HEAD,
Element TITLE, Element BODY
HTML
(HyperText Mark up Languange)
• adalah script/naskah untuk menyusun
dokumen-dokumen Web.
• Script /naskah merupakan kumpulan perintah
yang tersusun.
• Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag yang
memerintahkan web browser untuk
mengeksekusi perintah-perintah yang
dispesifikasikan.
Struktur Dasar Document HTML
• <html>
<head>
<title>Disini Judul Dokumen HTML
</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dijelaskan
sebagai berikut :
1. Tag
2. Element
3. Atribute
4. Element HTML
5. Element Head
6. Element Title
7. Element Body
1. Tag
Adalah teks khusus (markup) berupa dua karakter
"<" dan ">", sebagai contoh <body> adalah tag
dengan nama body.
Secara umum tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag
penutup (ditambahkan karakter "/" setelah
karakter "<"), sebagai contoh <body> ini adalah tag
pembuka isi dokumen HTML, dan </body> ini
adalah tag penutup isi dokumen HTML.
2. Element
Element terdiri atas tiga bagian, yaitu :
– tag pembuka,
– isi, dan
– tag penutup.
Contoh : untuk menampilkan judul dokumen HTML pada web

browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

• Dalam penulisan Element ditulis secara
berpasangan, Tidak boleh saling tumpang
tindih dengan tag-tag yang lain.
• Contoh :
<p> <p>
<b> <b>
................ ................
</b> </p>
</p> </b>
Benar Salah
3. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang
terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau
dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan
latarbelakang halaman web menjadi hitam, penulisannya
adalah <body bgcolor="black" text="yellow">
4. Element HTML
Menyatakan pada browser bahwa dokumen
Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
5. Element HEAD
Merupakan kepala dari dokumen HTML.
Tag <head> dan tag </head> terletak di antara
tag <html> dan tag </html>.
Sintaks:
<head>
...........
</head>
6. Element Title
Merupakan judul dari dokumen HTML yang
ditampilkan pada judul jendela browser. Tag <title>
dan tag </title> terletak di antara tag <head> dan
tag </head>.
Sintaks:
<title>
.........
</title>
7. Element Body
Element ini untuk menampilkan isi dokumen
HTML. Tag <body> dan tag </body> terletak di
bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute
yang menspesifikasikan khususnya warna dan
latarbelakang dokumen yang akan ditampilkan
pada browser.
Latihan
• Kalo sudah mengerti ….. Coba tes buat html
sederhana….

HTML Dasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

KERANGKA DASAR WEB

DESAIN... FORMAT LAYOUT WEB

Selanjutnya buat footer

Contoh : untuk menampilkan judul dokumen HTML pada web

</title> ini adalah tag penutup judul dokumen HTML

Anda mungkin juga menyukai