3.struktur Elemen HTML

o t e
Fn
Im
Perancangan Web
#3-Sruktur Elemen HTML Imam Fathurrahman, M.Kom
Materi
Elemen HTML
01
o t e
02
HTML
Fn
-Pengertian
m
-format
I
-contoh
03 Penggunaan <Taq>
04 Attribute
Elemen dasar HTML
• <html></html>
– Dikenal dengan element utama karena semua el
e
<html>
t
ement berada di dalamnya.
o
<head> • <head></head>
<title>
n
– Element ini berfungsi untuk memasukkan konten
F
yang tidak ingin ditampilkan. Konten tersebut da
</title> pat berupa keyword, deskripsi, CSS, dll.
</head>
<body> Im • <title></title>
– Merupakan judul dari halaman website yang mu
ncul pada bagian tab browser.
</body> • <body></body>
– Berisi konten yang ditampilkan pada browser ket
</html> ika pengunjung mengakes halaman tersebut, co
ntohnya seperti artikel yang sedang Anda baca s
aat ini.
Elemen dasar HTML
Contoh penggunaan HTML

<html>
<head>
o t e
Fn
<title>
I
</head>m
</title>
<body> helo... slamat belajar

membuat home page dengan Html
</body>
</html>
Elemen dasar HTML
Lanjutan contoh
• Ketiklah code dibawah ini menggunakan di salah satu text editor yang ada gunakan:
o t e
n
<html>
<head>
<title></title>
m F
</head>
<body>helo... Html
I
</body>
</html>
• Kemudian save dengan format “tes.html” dan di jalankan menggunakan browser.

HTML
Pengertian Tag dalam HTML
o t e
Hampir semua tag di dalam HTML ditulis secara ber
Fn
pasangan, yakni tag pembuka dan tag penutup, di
mana objek yang dikenai perintah tag berada di anta
Im
ra tag pembuka dan tag penutup. Objek disini dapat
berupa text, gambar, maupun video. Penulisan tag b
erada di antara dua kurung siku: “<” dan “>”.
HTML
format dasar penulisan tag HTML:
t e
• <tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
o
Atau Fn
Im
• <BEGIN TAG> </END TAG>
HTML
Contoh penggunaan Taq
o t e
– Ini adalah sebuah paragraf 
F n
•
Im
 adalah tag pembuka, dalam
graf.
contoh ini p adalah tag untuk para
• adalah tag penutup paragraf. Perbedaannya dengan tag pemb

uka terletak dari tanda forward slash (/)
HTML
Contoh penggunaan Taq
Contoh:
o t e
n
Setiap document HTML di awali dan di akhiri dengan tag
HTML.
m F
<HTML>
...
I
</HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya
menghasilkan output yang sama.
HTML
Bentuk dari tag HTML sebagai berikut:
o t e
<ELEMENT ATTRIBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Fn
I
Value - nilai dari atribut.
m
Contoh:
BODY merupakan element, BGCOLOR (Background) merupakan atribut yang

memiliki nilai lavender.
HTML
Contoh 1
<html>
<head>
o t e
<title>cintoh 1</title>
</head> Fn
Im
<body>helo... slamat belajar membuat home page dengan Html
</body>
</html>
HTML
Contoh 2-Bgcolor
<html>
<head>
o t e
<title>contoh 2-background color</title>
</head>
Fn
<body bgcolor=#808080>
Im
sekarang warna latar menjadi abu-abu tua
</body>
</html>
HTML
Contoh 3 –Heading/judul
e
<html>
<head>
<title>contoh 3- heading</title>
o t
n
</head>
F
<body>
<h1>:. 6 Tingkatan Heading :. </h1>
 
 
Im
<h1> heading dengan tingkat 1</h1>
</body>
</html>
HTML
Contoh 4-background
<html>
<head>
o t e
</head>
<body background="aLIEN.jpg">
Fn
<title>contoh 4-bacgkround image</title>

Im
sekarang latar belakang dengan gambar

</body>
</html>
HTML
Contoh 5-image-(size/ukuran)
<html>
<head>
o t e
<title> contoh 5-image size</title>
</head>
Fn
<body>
I m
<img src="aLIEN.jpg"width="304" height="228">
</body>
</html>
HTML
Contoh 6-Paragraf
<html>
<head><title>contoh 6-paragraf</title></head>
o t e
n
<body>
F
rata kiri
rata kanan
m
rata tengah
I
rata kiri kananrata kiri kananrata kiri kananrat
a kiri kananrata kirirata kiri kananrata kiri kananrata kiri kananra
ta kiri kananrata kiri kananrata kiri kananrata kiri kananrata kiri k
ananrata kiri kananrata kiri kananrata kiri kananrata kiri kananrat
a kiri kananrata kiri kananrata kiri kananrata kiri kananrata kiri ka
nanrata kiri kananrata kiri kananrata kiri kananrata kiri 
</html>
</html>
HTML
Contoh 7-Preformatted text
e
<html>
t
<head><title>contoh 7-preformatted text</title></head>
<body>
o
<pre>
n
Uniform resource Locator (URL)
==========================
F
URL adalah suatu sarana yang dipakai untuk menentukan lokasi informasi pada suatu web server.
URL dapat diibaratkan suatu alamat, dimana alamat tersebut terdiri dari :
m
: ) Protocol yang digunakan oleh suatu browser untuk mengambil informasi
I
: ) Nama komputer (server) dimana informasi tersebut berada
: ) Jalur/path serta nama file dari suatu informasi
</pre>
</body>
</html>
HTML
Contoh 8-Font size

<html>
<head><title>contoh 8-font size</title></head>
o t e
n
<body>
F
ukuran font 1 
m
I
</body>
</html>
HTML
Contoh 9-Jenis Font
t e
<html>
<head><title>jenis font</title></head>
<body>
n o
jenis font arial size 5
m F
jenis font verdana size 3 
jenis font Engravers MT 
I
jenis font Tahoma 
 jenis font Chiller 
 jenis font monotype corsiva 
</body>
</html>
HTML
Contoh 10-Warna Font
<html>
<head><title>contoh 10-warna font</title></head>
o t e
<body>
Fn
jenis font arial size 5 warna merah 
jenis font arial size 5 warna merah 
I m
Font dengan warna hijau 
Font dengan warna biru 
Font dengan warna kuning
</body>
</html>
HTML
o t e
Fn
Im
HTML
Contoh 11-Format kalimat
<html>
o t e
n
<head><title>contoh 11-Format Kalimat</title>
</head>
<body>
 Teks ini ditebalkan 
m F
 teks ini kuat 
<big> Teks ini adalah besar </big> 
 teks ini miring 
 teks Hal ini ditekankan 
I
<code> Ini adalah output komputer </code> 
Ini adalah subskrip dan superscript 
</body>
</html>
HTML
Contoh 12-untuk text berjalan kalimat
e
Gunakan taq <marque> untuk membuat text berjalan:( buat contoh tam
pilannya)
o t
Fn
<marquee>testing marquee</marquee>
m
<marquee direction="up">testing marquee</marquee>
I
<marquee behavior="alternate">testing marquee</marquee>
HTML
Contoh 13-Garis Pemisah <HR>
<html>
o t e
<head><title>contoh 13-Garis pemisah</title></head>
<body>
Selamat datang
Fn
<hr size=1 width=100 align=left>
I m
<h1><center>garis pemisah dengan warna</h1>
<hr color="#0000FF" size="5" width="100%">
</body>
</html>
HTML
Contoh 14-List/daftar
<html>
<head><title>contoh 14-List/daftar</title></head>
o t e
n
<body>
F
Hoby saya adalah
<ul type=circle>
m
<li>olahraga</li>
</ul>
<ul type=square>
<li>shurfing</li>
I
</ul>
<ul type=disc>
<li>makan bakso</li>
</ul>
</body>
</html>
HTML
Paragraf
o t e
Font/jenis font/format kalimat
List/daftar Fn
Table Im
Framset
Link
o t e
Thanknyou
F
Im

3.struktur Elemen HTML

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

3.struktur Elemen HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

o t e

Contoh penggunaan HTML

<body> helo... slamat belajar

• Kemudian save dengan format “tes.html” dan di jalankan menggunakan browser.

Pengertian Tag dalam HTML

format dasar penulisan tag HTML:

Contoh penggunaan Taq

• </p> adalah tag penutup paragraf. Perbedaannya dengan tag pemb

Contoh penggunaan Taq

Bentuk dari tag HTML sebagai berikut:

BODY merupakan element, BGCOLOR (Background) merupakan atribut yang

Contoh 7-Preformatted text

Contoh 8-Font size

Contoh 9-Jenis Font

Contoh 10-Warna Font

Contoh 11-Format kalimat

Contoh 12-untuk text berjalan kalimat

Contoh 13-Garis Pemisah <HR>

Anda mungkin juga menyukai