Scribd
Unggah
35 tayangan21 halaman

Week 2 - HTML 1

Tag-tag HTML menjelaskan tentang elemen dasar yang digunakan dalam membuat struktur dan format dokumen HTML seperti tag <head>, <body>, <p>, <ul>, <ol>, <li>, <table>, <tr>, <td>, dan lainnya beserta atribut yang dapat digunakan untuk memberi format tampilan dan tata letak konten dalam dokumen web.

Diunggah oleh

Gulo Kacang
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPT, PDF, TXT atau baca online di Scribd
35 tayangan21 halaman

Week 2 - HTML 1

Tag-tag HTML menjelaskan tentang elemen dasar yang digunakan dalam membuat struktur dan format dokumen HTML seperti tag <head>, <body>, <p>, <ul>, <ol>, <li>, <table>, <tr>, <td>, dan lainnya beserta atribut yang dapat digunakan untuk memberi format tampilan dan tata letak konten dalam dokumen web.

Diunggah oleh

Gulo Kacang
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Tag-tag HTML

 Kalo pada bahasa pemrograman kita


mengenal code, maka pada HTML kita
mengenal yang namanya tag.
 Contoh tag html adalah <head>, <title>,
<body>, <html>, <img>, dan lain-lain.
 Tag html tidak bersifat case sensitive 
<body> sama dengan <BODY>

1
Tag-tag HTML - continued
 Bentuk umum penulisan tag html
adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
• Element - nama tag
• Attribute - atribut dari tag
• Value - nilai dari atribut.
 Contoh:
<BODY BGCOLOR=lavender>
2
Struktur HTML document
 Document HTML bisa di bagi mejadi tiga bagian
utama: html, head, dan body.

<html>
<head>

</head>

<body>

</body>
</html>
3
Susunan HTML

<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>

Homepage
<Body>
Tubuh Isi…Teks
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>

4
<html>
 Setiap document HTML harus di
awali dan di tutup dengan tag HTML
 <html> …… </html>
 Tag <html> memberi tahu browser
bahwa yang di dalam kedua tag
tersebut adalah document HTML.

5
<head>
 Bagian header dari document HTML di apit oleh tag
<head></head>.
 Di dalam bagian ini biasanya dimuat tag <tittle> yang
menampilkan judul dari halaman web.
<head>
<title>Welcome to eepis-its</title>
</head>

6
<body>
 Tag <body> di gunakan untuk menampilkan text,
image link dan semua yang akan di tampilkan
pada web page.

<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>

7
Elemen dasar – Block Level
 Block level element:
terdapat 6 tingkatan, yaitu
H1 sampai H6.

<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>

8
Elemen dasar – Paragraph (p)
 Menampilkan teks dalam bentuk paragraf.

<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan telekom PENS ITS.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>

9
Elemen dasar – list item (li)
 Unordered list <ul>: List item tidak berurutan (bullet)

<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>

10
list item (li) - continued
 Ordered list <ol>: List item berurutan.

<body>
<P>Daftar Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</li>
</ol>
<body>

11
list item (li) - continued
 Tipe-tipe pada list item - ordered list <ol> :
• “A” : A, B, C, …
• ”a” : a, b, c, …
• ”I” : I, II, III, …
• ”i” : i, ii, iii, …
• ”1” : 1, 2, 3, …

12
Elemen dasar – Horizontal Rules <hr>
 Horizontal Rule tag digunakan untuk
menggambar garis horizontal dalam dokumen
html.
 Attribut dari <hr> adalah:
• Position: menetukan posisi dari <hr>, dengan nilai :
center | right | left.
• Width: untuk menentukan panjang <hr>. Nilai default
100%.
• Size: untuk menentukan tebal dari <hr> dalam pixel.
• Noshad: Efek bayangan.
 Contoh:
<hr position=“center” width=90% size=3
noshad>
13
Pemformatan Page
 Break : memulai baris baru
tag : <br>
 Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>

 Color : attribute dgn 3 kategori warna (RGB)


#RRGGBB, misal #FF0000 adalah Red 14
Pemformatan Page – Cont. 1
 Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan PENS ITS</P>
 Format Text :
A. Physical Format B. Logical Format

C. Preformatted Text : menampilkan text spt aslinya.


<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre> 15
Pemformatan Page – Cont. 2
 Contoh :
<html>
<head>
<title>Welcome to eepis-its</title>
</head>
<body>
<B><P align="center">Lab di Jur. Telkom</P></B>
Jurusan Telkom mempunyai 7 lab, diantaranya <br>
<font color="#9966FF" size="3" face="arial">
1. Lab. Multimedia </font> <br>
2. Lab. Microwave <br>
3. Lab. Komunikasi Digital <br>
</body>
</html>

16
Elemen dasar – hyperlink <a>
 Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://lecturer.eepis-its.edu/
~zenhadi”> WEB PRIBADI ZEN </a>
 Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:

17
Pembuatan Tabel
 Untuk membuat tabel : <table>
Cell-nya dengan tag <td>
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html> 18
Pembuatan Tabel – Cont. 1
 Untuk membuat baris cell : <tr>
 Untuk title tabel : <caption>
<body>
<table border="1">
<caption>Creating Table</caption>
<tr> <td>cell 1a</td>
<td>cell 1b</td>
</tr>
<tr> <td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table>
</body>
19
Pemformatan Tabel
 Perataan tabel :
1. align (center, justify, left, right).
2. valign (baseline, top, middle, bottom)
 Lebar tabel : width=“25%”
 Warna cell : bgcolor=“red”
 Spasi tabel :
cellspacing untuk memberi spasi antar sel
cellpadding untuk spasi dari border ke text dalam cell

20
Pemformatan Tabel – Cont. 1
 Contoh :
<body>
<table border=1 cellspacing=5
cellpading=10>
<tr align="left" valign="top">
<td width="25%"
bgcolor=red>cell 1a</td>
<td width="25%"
bgcolor=yellow>cell 1b</td>
</tr>
<tr align="center"
valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
</tr>
</table> 21

</body>

Anda mungkin juga menyukai