HTML- teks , , , , , , , … - pendukung teks , , , , … - gambar

HTML [email protected]

<HTML>Hypertext Markup Language

http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sir_Tim_Berners-Lee.jpg/640px-Sir_Tim_Berners-Lee.jpg

Tim Berners-Lee

http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sir_Tim_Berners-Lee.jpg/640px-Sir_Tim_Berners-Lee.jpg

Tim Berners-Lee

- HTTP

- HTML

- WWW

- Web Browser

- Web Server

- Web Page

World Wide Web Consortiumwww.w3.org

web browser

perkembangan teknologi internetwww.evolutionoftheweb.com

HTML

HTML

CSS

HTML

CSS javascript

HTML

HTML CSS

+

HTML CSS javascript

+ +

www.pw1.if-unpas.org/2014

next?

Let’s code!

<HTML>Hypertext Markup Language

Let’s code!

notepad

namafile.html

<HTML>kerangka

<HTML>tag

<head>bagian

<title></title>- judul halaman

<style></style>

<script></script>- javascript

<meta></meta>- metadata

- CSS

metadata

<body>bagian

- teks <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, …

- pendukung teks <br>, <hr>, <em>, <strong>, …

- gambar <img>

- hyperlink <a>

- list (bullets & numbering) <ul>, <ol>, <li>, <dl>, <dt>, <dd>

- tabel <table>, <thead>, <tbody>, …

- form <form>, <input>, <select>, <button> …

- script <script>

- object <object>

- grouping <div>, <span>

komentar 

tagstruktur

<namatag atribut=“nilai”>

<body bgcolor=“lightblue”>


nama tag


nama tag

atribut


nama tag

atribut

nilai / value

<body bgcolor=“lightblue” id=“myid” class=“myclass”>

globalatribut

accesskey class

id dir

lang style

tabindex title

www.w3school.com/Tagsatribut lengkap

<HTML>paragraf

<p></p>

<br> & <hr>

<b></b>, <i></i> & <u></u>

<b></b>, <i></i> & <u></u>

<strong></strong> & <em></em>

<HTML>heading

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

<HTML>list

<ol></ol>, <ul></ul> & <dl></dl>

<ol></ol>ordered list

<ol><li>item 1</li><li>item 2</li>…

</ol>

<ol type=“”></ol>1 A a I i

<ul></ul>unordered list

<ul><li>item 1</li><li>item 2</li>…

</ul>

<ul type=“”></ul>disc

square circle

<dl></dl>definition list

<dl><dt>term 1</dt><dd>description 1</li><dt>term 2</dt><dd>description 2</li>…

</dl>

<HTML>hyperlink

<a></a>anchor

<a href=“”></a>

external link http://www.google.com,

http://twitter.com/sandhikagalih

internal link / relative url product.html,

../admin/index.html

<a href=“”></a>

page anchor #about,

index.html#contact

<a href=“”></a>

<a target=“”></a>_self

_blank _parent

_top

hyperlink + image ?

<HTML>image

<img src=“”>

internal resource logo.png, background.jpg, …

<img src=“”>

<img src=“”>

external resource (hotlink)

https://www.google.com/images/srpr/logo11w.png,http://pw1.if-unpas.org/2014/images/dosen/

sandhika.png

<img src=“”>

external resource (hotlink)

https://www.google.com/images/srpr/logo11w.png,http://pw1.if-unpas.org/2014/images/dosen/

sandhika.png

<img>src alt title

width height

px

%

<img width=“” height=“”>

hyperlink + image ?

<HTML>tabel

struktur tabel

baris 1, kolom 1 baris 2, kolom 2

baris 2, kolom 1 baris 2, kolom 2

}baris

}kolom

cell / data

Nama Depan Nama Belakang

Sandhika Galih

Doddy Ferdiansyah

Nofariza Handayani

}header

}header1 2

1 3 6

2 7 5}header

<table></table>

simple

<table>…

</table>

<table><tr>…

</tr></table>

<table><tr>…

</tr></table>

table row

<table><tr><td>…</td>

</tr></table>

<table><tr><td>…</td>

</tr></table>

table data

<table><tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td>

</tr><tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td>

</tr>…

</table>

complex

<table><thead>

<tr><th></th><th>Kolom 1</th><th>Kolom 2</th>

</tr></thead><tbody>

<tr><th>Baris 1</th><td>Baris 1, Kolom 1</td><td>Baris 1, Kolom 2</td>

</tr><tr>

<th>Baris 2</th><td>Baris 2, Kolom 1</td><td>Baris 2, Kolom 2</td>

</tr></tbody>

</table>

<table><thead>

<tr><th></th><th>Kolom 1</th><th>Kolom 2</th>

</tr></thead><tbody>

<tr><th>Baris 1</th><td>Baris 1, Kolom 1</td><td>Baris 1, Kolom 2</td>

</tr><tr>

<th>Baris 2</th><td>Baris 2, Kolom 1</td><td>Baris 2, Kolom 2</td>

</tr></tbody>

}header

header

header

<table></table>border

cellspacing cellpadding

colspan rowspan

<table></table>border

cellspacing cellpadding

colspan rowspan

}gunakan css!

<table border=“1”>

<table border=“1” cellspacing=“0”>

<table border=“1” cellspacing=“0” cellpadding=“8”>

<table></table>

colspan rowspan

<table border="1" cellspacing="0" cellpadding="5"><tr>

<td>1,1</td><td>1,2</td><td>1,3</td>

</tr><tr>

<td>2,1</td><td>2,2</td><td>2,3</td>

</tr><tr>

<td>3,1</td><td>3,2</td><td>3,3</td>

</tr></table>


<td>1,1</td><td colspan="2">colspan = 2</td>

</tr><tr>

<td>2,1</td><td>2,2</td><td>2,3</td>

</tr><tr>

<td>3,1</td><td>3,2</td><td>3,3</td>

</tr></table>


<td>1,1</td><td colspan="2">colspan = 2</td>

</tr><tr>

<td>2,1</td><td>2,2</td><td>2,3</td>

</tr><tr>

<td>3,1</td><td>3,2</td><td>3,3</td>

</tr></table>

menggabungkan 2 buah cell (1,2) & (1,3)


<td rowspan="3">rowspan = 3</td><td colspan="2">colspan = 2</td>

</tr><tr>

<td>2,2</td><td>2,3</td>

</tr><tr>

<td>3,2</td><td>3,3</td>

</tr></table>


<td rowspan="3">rowspan = 3</td><td colspan="2">colspan = 2</td>

</tr><tr>

<td>2,2</td><td>2,3</td>

</tr><tr>

<td>3,2</td><td>3,3</td>

</tr></table>

menggabungkan 3 buah cell (1,1), (1,2) & (1,3)

<td> hilang

<td> hilang

latihan

1,1 1,2 1,3 1,4

2,1 ? 2,4

3,1 3,4

4,1 4,2 4,3 4,4

<HTML>form

1

1

2

<form></form>

<form>…



…</form>

<form></form>

method

action

<form></form>

method

action}GET

POST

elemen

form

input

textarea

select

button

label

<input type=“”>text

password radio

checkbox submit reset

button …

<button type=“”></button>

submit reset

button

<textarea></textarea>

<select><option> opsi 1 </option><option> opsi 2 </option><option> opsi 3 </option>…

</select>

sekian

[email protected]

Documents

HTML- teks , , , , , , , … - pendukung teks , , , , … - gambar