Wearne es Edu ucation Ce enter

Wearnees Eduucation Ceenter

SOAL LATIHHAN HTMML DAN DREAMWE

EAVER CS

S6

Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center

Informatika dan Teknik Komputer 2

CHAPTER 1 MENGENAL <TAG> HTML

STRUCTURE HTML TEXT ( PARAGRAF, BOLD, ITALIC,UNDERLINE, BREAK , LINE ) SEMANTIC MARKUP


HTML adalah suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi dengan lebih menarik dibandingkan dengan tulisan teks biasa ( plain text) .

1. Struktur HTML HTML mempunyai aturan dan struktur tertentu untuk menuliskan perintah yang biasa dinamakan <tag> . Aturan tersebut diawali dengan lambang <tag> dan dbiasanya akan diakhiri dengan lambang </tag>. Berikut gambaran setruktur HTML :

<html>

<head>

<title>Judul Latihan 1</title>

</head>

<body>

Disini content yang tampil di browser

</body>

</html>

Sekarang ketik kode diatas ke dalam sebuah notepad kemudian simpan dengan nama latih1.html. Kemudian Jalankan di browser .

Kemudian silahkan anda coba untuk mengganti judul dan isinya.



2. Mengenal Tag 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. Sekarang praktekkan beberapa tag berikut ini : a. Tag <p> ( paragraph)

Tag ini digunakan untuk membuat paragraph di HTML

<p>Ini adalah paragraph pertama. Anda bisa mengetik teks

di dalam paragraph pertama ini sesuai dengan keinginan anda

</p>

<p>Ini adalah paragraph kedua . Merupakan paragraph

lanjutan dari paragraph sebelumnya . Anda juga bisa

melanjutkan untuk membuat paragraph selanjutnya</p>

HTML

HASIL

b. Tag Heading <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Heading biasanya digunakan untuk membuat sebuah judul . Tag Heading dimulai dari 1 – 6 ( <h1> s/d <h6>). <h1> merupakan tingkatan heading yang paling besar dan <h6> merupakan tingkatan heading paling kecil.



<h1>Ini Heading 1 </h1>






HTML

HASIL

c. Tag <b> (bold), <i> (italic), <u> (underline) Tag <b> digunakan untuk membuat tulisan tebal, Tag <i> digunakan untuk membuat tulisan miring . Tag <u> digunakan untuk member garis bawah tulisan.

<p>Ini adalah contoh paragraph dengan kata

<b>Tebal</b></p>

<p>Ini adalah contoh paragraph dengan <i>kata

Miring</i></p>

<p>Ini adalah contoh paragraph dengan kata <u>Garis

bawah</u></p>

HTML



d. Tag <br/> dan <hr/> Tag <br/> digunakan untuk membuat baris baru (new line) Tag <hr/> digunakan untuk mebuat garis

HASIL

<p>Ini adalah kalimat di atas <br/> Sedangkan ini yang

ada dibawahnya tag break</p>

<p>Break<br/> adalah tag yang digunakan untuk membuat

baris baru</p>

HTML

HASIL

<p>Informatika dan Teknik Komputer</p>

<hr/>

<p>adalah jurusan yang mempelajari bahasa pemrograman</p>

HTML


Soal LatWearnes

Inform

tihan Adobs Educati

matika da

be Dreamwon Center

an Teknik

weaver CS6r

k Kompute

6 dan HTM

er

L

HASIL

7



CHAPTER 2 MENGENAL ATTRIBUTE <TAG>

LINK ( ANCHOR ) LIST (NUMBER LIST , BULLET LIST, DEFINITION LIST) IMAGE IFRAME


1. Mengenal Atribbute Tag HTML HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag / start tag (<tag> bukan di </tag>). Cara mendefinisikan atribut dengan memberikan informasi name dan value dari suatu elemen, seperti name=”value”. Perhatikan gambar di bawah ini :

Dari Gambar di atas , tag <p> memiliki Attribute Name adalah lang dan Attribute Value adalah en‐us. Sekarang buatlah sebuah file html dengan nama Latih2.html dan praktekkan tag‐tag berikut ini : a. Tag <a>

Tag ini digunakan untuk membuat link di dalam html.

<a href=”http://www.google.com”> Google </a>

HTML

HASIL




Keterangan : Jadi Attribut yang di gunakan tag <a> adalah href . Attribut href adalah alamat (halaman) yang akan dituju . Sedangkan kata google sebelum </a> adalah judul tag <a>. Ketika anda klik Google maka otomatis akan menuju ke alamat www.google.com . Sekarang tambahkan atribut target=”_blank” dan title=”GOOGLE”. di tag <a> yang tadi anda buat . Simpan dan jalankan kembali, apa yang terjadi ?. Sekarang buatlah sebuah link yang digunakan untuk mengirim email :

Kemudian silahkan anda jalankan . Jadi kalau link biasa akan membuka ( halaman / file html ) lain , sedangkan untuk mailto , ketika anda klik secara default akan membuka aplikasi MS. OUTLOOK

<a href=”mailto:[email protected]”> Contact Us

</a>

HTML

HASIL

http://www.google.com/


<h1 id="top">Top Movies 2013</h1>

<a href="#witch_hunters">Hansel and Gretel: Witch

Hunters</a><br/>

<a href="#die_hard">A Good Day to Die Hard</a><br/>

<a href="#iron_man">Iron Man 3</a><br/>

<a href="#fast">Fast anad Furious 6</a><br/>

<h2 id="witch_hunters">Hansel and Gretel: Witch Hunters</h2>

<p>Film ini mengisahkan tentang dua bersaudara dari negeri

dongeng, yaitu Hansel dan Gretel yang bekerja dalam satu tim

yang melacak serta memburu keberadaan penyihir-penyihir di

dunia.</p>

<h2 id="die_hard">A Good Day to Die Hard</h2>

<p>Bruce Willis akan kembali berperan sebagai John Mc Clane.

Tentu saja dengan misi baru, yakni ditugaskan untuk meringkus

penjahat kelas kakap di daerah Moscow, Rusia. </p>

<h2 id="iron_man">Iron Man 3</h2>

<p>Iron Man akan tampil lebih spektakuler. Dalam cerita film

terbaik ini, Tony Stark akan pergi ke negeri Tirai Bambu yaitu

Cina, yang kemudian bertemu musuh utamanya yang paling sulit,

yakni Mandarin.</p>

<h2 id="fast">Fast anad Furious 6</h2>

<p>Alur cerita untuk film terbaik Fast and Furious 6 masih belum

diketahui dengan jelas. Tapi Letty yang diperankan oleh Michelle

Rodriguez, akan kembali hadir dalam film ini. Dia akan bergabung

kembali dengan Dom (Vin Diesel) dan Bryan (Paul Walker). </p>

<a href="#top">Kembali Ke atas</a>

HTML

Buatlah satu file html dan isi kode di atas . Kemudian simpan dengan nama topmovie.html. Kemudian jalankan di browser (kecilkan ukuran browser sehingga muncul vertical scrollbar). Contoh diatas adalah link yang dapat menuju ke bagian tertentu dalam sebuah halaman html. Contoh penulisannya adalah <a href=”#fast”> , jadi ketika di klik akan menuju ke bagian <h2 id="fast">Fast anad Furious 6</h2>.



b. Membuat list dengan tag <ul> atau <ol> Di dalam html kita bias memebuat sebuah daftar / list dengan menggunakan tag <ul> ( Unordered Lists / List tidak berurutan ) dan <ol> ( Ordered Lists / List yang berurutan). Jadi tag <ul> atau <ol> merupakan tag untuk mengawali list , sedangkan <li> adalah item / listnya. Silahkan anda ganti type pada Unordered List (<ul>)dengan disc,circle,square. Dan Ordered List (<ol>) dengan A, a , i , 01.

<h2>Unordered Lists</h2>

<ul type="disc">

<li>Kabapexim</li>

<li>Inforkom</li>|

<li>Kasima-PR</li>

<li>Degrakom</li>

</ul>

<h2>Ordered Lists</h2>

<ol type="1">

<li>Kabapexim</li>

<li>Inforkom</li>|

<li>Kasima-PR</li>

<li>Degrakom</li>

</ol>

HTML

HASIL


Soal LatWearnes

Inform

c. MJg

tihan Adobs Educati

matika da

MenampilkJika anda ingunakan ta

Gunakan a

<img src

<img src

be Dreamwon Center

an Teknik

kan gambangin menaag <img>.

atribut wid

c="images/

c="images/

weaver CS6r

k Kompute

ar dengan tmpilkan ga

dth dan he

/angsa.jpg

/angsa.jpg

6 dan HTM

er

tag <img>ambar ke d

Jadi bhtml beraddi sam

ight untuk

pg" />

pg" width=

L

dalam hala

bisa kita lihdi atas bahda di foldermping).

mengatur

=”300” hei

aman html

hat bahwa hwa url dar images (L

r ukuran ga

H

ight=”200

H

anda silah

src pada tari angsa.jpLihat gamb

ambar.

HTML

0” />

HTML

13

hkan

ag pg bar


Cobalah penggunaan Gambar pada posisi text :

<img src="images/doraemon.png" />

<p>Doraemon adalah kartun anak anak yang sangat terkenal

di jamannya . Sangat lucu penuh imajinasi dengan alat-

alat yang sering membantu nobita.</p>

<hr/>

<p><img src="images/doraemon.png" />Doraemon adalah

kartun anak anak yang sangat terkenal di ja mannya .

Sangat lucu penuh imajinasi dengan alat-alat yang sering

membantu nobita.</p>

<hr />

<p>Doraemon adalah kartun anak anak <img

src="images/doraemon.png" />yang sangat terkenal di ja

mannya . Sangat lucu penuh imajinasi dengan alat-alat

yang sering membantu nobita.</p>

HTML

HASIL



Contoh penggunaan attribute align di images. Kemudian silahkan coba anda ganti attribute align dengan middle,top, bottom. Perhatikan perubahaannya.

<img src="images/doraemon.png" width="100" height="100"

align="left" />

<p>Doraemon adalah kartun anak anak yang sangat terkenal

di jamannya . Sangat lucu penuh imajinasi dengan alat-

alat yang sering membantu nobita. Setiap hari selalu

bertengkar karena nobita selalu meminta alat-alat yang

tidak sesuai manfaatnya</p>

<br/><hr/>

<p><img src="images/doraemon.png" width="100"

height="100" align="right" />Doraemon adalah kartun anak

anak yang sangat terkenal di ja mannya . Sangat lucu

penuh imajinasi dengan alat-alat yang sering membantu

nobita.</p>

HTML

HASIL



Memanfaatkan gambar di dalam link <a>.

HTML

Contoh lain :

<a href="index.html"><img src="images/home.png" /></a>

<a href="about.html"><img src="images/about.png" /></a>

<a href="products.html"><img src="images/products.png" /></a>

<a href="news.html"><img src="images/news.png" /></a>

<a href="contact.html"><img src="images/contact.png" /></a>

HTML

HTML

HASIL

<a href="buy.html"><img src="images/buy.png" /></a>

<br/><br/>

<a href="mailto:[email protected]"><img

src="images/email.gif" /></a><br/><br/>

<a href="pendaftaran.html"><img src="images/reg.png" />

HTML



d. Tag Iframe Tag <iframe> digunakan untuk menampilkan halaman web lain ke dalam sebuah page tertentu. Sebagai contoh penggunaan <iframe> adalah chatbox, youtube, google map, dll.

Buatlah sebuah file html yang mana nanti anda isi dengan tag <iframe>.

<iframe src="http://wearneseducation.com/" width="700"

height="400"></iframe>

HTML

HASIL



Menampilkan video youtube di halaman html.

Embed Google Maps

HASIL

<iframe width="425"

height="350" frameborder="0"

scrolling="no" marginheight="0"

marginwidth="0"

src="https://maps.google.com/ma

ps?f=q&source=s_q&hl=en

&geocode=+&q=wearnesmad

iun&ie=UTF8&hq=wearnes+

madiun&hnear=&ll=-

7.627108,111.532747&spn=0.8

2079,1.344452&t=m&z=10&

amp;iwloc=A&cid=14390588403

963132410&output=embed">

</iframe>

HTML

<iframe width="560" height="315"

src=”//www.youtube.com/embed/xYF8rZ0UDpI" frameborder="0"

allowfullscreen></iframe>

HTML




MENGENAL FORM DAN TABLE

TABLE (Membuat Tampilan table dalam html ) FORM (Menggenal semua bagian‐bagian form )


Buatlah sebuah file html baru !

Di dalam html kita juga bias membuat table . Cobalah beberapa kode html di bawah ini .

HTML <table>

<tr>

<td>Nim</td>

<td>Nama</td>

<td>Nilai</td>

</tr>

<tr>

<td>123</td>

<td>Sutopo</td>

<td>80</td>

</tr>

<tr>

<td>124</td>

<td>Paijo</td>

<td>90</td>

</tr>

</table>

HASIL

Keterangan :<table> : Tag pembuka untuk membuat table <tr> : Tag untuk membuat baris<td> : Tag untuk membuat kolom



Kemudian mari kita coba tambahkan beberapa attribute (width dan border )

HTML <table border=”1” width=”500”>

<tr>

<td>Nim</td>

<td>Nama</td>

<td>Nilai</td>

</tr>

<tr>

<td>123</td>

<td>Sutopo</td>

<td>80</td>

</tr>

<tr>

<td>124</td>

<td>Paijo</td>

<td>90</td>

</tr>

</table>

HASIL

Coba gunakan beberapa attribute di bawah ini di table anda ! border : Attribute yang digunakan untuk lebar border width : Untuk mengatur panjangnya table (ex: 100,50%) height : Untuk mengatur tinggi table (ex: 100,50%) align : Untuk mengatur posisi table (left,right,center)

cellspacing : Mengatur jarak text dengan batas tepi kolom (cell)rowspacing : Mengatur jarak antar kolom (cell)



Menggunakan attribute di tag tr dan td :

HTML <table width="700" border="1">

<tr>

<td rowspan="2" width="10%">Nim</td>

<td rowspan="2" width="40%">Nama</td>

<td colspan="3">Nilai</td>

</tr>

<tr>

<td width="16.67%">Utama</td>

<td width="16.67%">Ulang</td>

<td width="16.67%">Perbaikan</td>

</tr>

<tr>

<td>123</td>

<td>Sutopo</td>

<td>70</td>

<td>0</td>

<td>80</td>

</tr>

<tr>

<td>124</td>

<td>Paijo</td>

<td>80</td>

<td>0</td>

<td>0</td>

</tr>

</table>

HASIL



Mengenal Form di HTML

Form HTML fungsinya untuk meng‐input atau memasukan data yang akan dikirim dan di proses ke server. Tag <form>...</form> ini paling penting untuk pembuatan web dinamis. Di dalam tag form terdapat satu atau beberapa element seperti "<input>" "<label>" "<select>" "<textarea>" dan lain‐lain. Di sini kita akan membuat beberapa element yang sering dipakai di dalam form.

Input Text Data berupa text

Password Data bentuk password

Nama Depan: <input type="text" name="nama_depan"> Nama Belakang: <input type="text" name="nama_belakang">

CONTOH

CONTOH

Password <input type="password" name="pass">

Checkbox Membuat sebuah pilihan yang bisa dipilih lebih dari satu .

CONTOH

Hobi <input type="checkbox" value="Music"> Music <input type="checkbox" value="Masak"> Masak <input type="checkbox" value="Shoping"> Shoping



Radio Button Membuat sebuah pilihan yang hanya dapat dipilih salah satu. CONTOH

Jenis Kelamin <input type="radio" value="L"> Laki-laki <input type="radio" value="P"> Perempuan

Submit Button Untuk mengirim form yang telah di isi oleh user ke server.

Reset Button untuk menghapus atau membuat form yang telah di isi user kembali ke nilai default. Ada beberapa type input . Namun tidak semua browser support.

CONTOH

<input type="submit" value="Submit">

CONTOH

<input type="reset" value="Reset">

color email date range

datetime search datetime-local tel

month time number url



Label Tag <label> berfungsi untuk mendefinisikan sebuah label untuk element <input>. Untuk attribut "for" dari tag <label> harus sama dengan attribut id element terkait.

CONTOH

<label for="user">Username</label>

<input type="text" name="user" id="user"><br/>

<label for="pass">Password</label>

<input type="text" name="pass" id="pass">

Select Tag <select> digunakan untuk membuat list drop down (combo box) , biasanya di dalam tag tersebut terdapat element <option> sebagai list yang bisa dipilih oleh user.

<select name="agama">

<option value="Islam">Islam</option>

<option value="Kristen">Kristen</option>

<option value="Katolik">Katolik</option>

<option value="Hindu">Hindu</option>

<option value="Budha">Budha</option>

<option value="Kong Hu Cu">Kong Hu Cu</option>

</select>

CONTOH



Textarea Tag <textarea> berfungsi untuk menyimpan atau menampung karakter. Ukuran text area dapat kita tentukan dengan mengubah attribute cols (jumlah kolom) dan rows (jumlah baris).

Membuat Form Login

<textarea cols="50" rows="5">

CONTOH

<form method="POST" action="">

<h2>Login</h2>

<label for="user">Username</label>

<input type="text" name="user" id="user">

<br/>

<label for="user">Password</label>

<input type="text" name="pass" id="pass">

<br/>

<input type="checkbox" value="rm">Remember Me

<br/>

<input type="submit" value="LOG IN">

<input type="reset" value="RESET">

</form>

CONTOH




MENGENAL STYLESHEET (CSS)

INTERNAL CSS INLINE CSS EXTERNAL CSS


Cascading Style Sheet ( CSS ) adalah merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu: 1. Internal Style Sheet 2. External Style Sheet 3. Inline Style Sheet Sekarang mari kita buat satu persatu .

1. Internal Style Sheet Cara embeding css dengan menulis langsung di dalam file html yang ingin kita atur tampilannya.

<html>

<head>

<title>Belajar CSS</title>

<style>

body { background:black; font-family:Tahoma, Geneva, sans-serif; }

p { color:white; }

h2 { color:green; }

p b { color: yellow; font-size:24px; }

p i { color: pink; font-size: 22px; font-weight:bold; }

</style>

</head>

<body>

<h2>Belajar CSS</h2>

<p>Belajar <b>HTML</b> dengan <i>CSS</i> sangat menyenangkan,

apalagi jika bermain memadiukan beberapa warna</p>

</body>

</html>

HTML

HASIL



2. External Style Sheet CSS yang dibuat dalam file terpisah dengan ekstensi file .css . Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut: Sekarang buatlah file css dengan nama style.css dan file html dengan nama index.html simpan jadi satu di folder yang sama.

<head>

<link rel="stylesheet" type="text/css" href="folder/filecss.css" />

</head>

HTML

body { background:#000; }

h1 { color:#FF0; margin: 0; padding: 0; font-family:Verdana, Geneva,

sans-serif; }

p { color:#F00; font-family:Arial, Helvetica, sans-serif; }

h3 { font-size: 16px;font-family: "Arial Black", Gadget, sans-serif;

color:#9F3; margin: 0; padding:0; }

ul { padding:0; list-style-type:armenian; }

li { padding-left:15px; color: #eee; font-weight:bold; }

CSS

<html>

<head>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<h1>Rainbow Tech</h1>

<p>Merupakan sebuah perusahaan yang bergerak di bidang pembuatan

software. Software yang ditangani berbasis desktop,web, dan mobile.

</p>

<h3>Software Yang Pernah dikerjakan</h3>

<ul>

<li>Software Perpustakaan</li>

<li>E-Commerce</li>

<li>Akademic Mobile App</li>

</ul>

</body>

</html>

HTML



3. Inline Style Sheet Penulisan script css langsung pada tag html dengan menambahkan attribute style di dalamnya. Contoh:

<p style=”color: red; font-size: 16px;”>Saya belajar dengan

inline css</p>

<a href=”http://google.com” style=”color:

green;”>www.google.com</a>

HTML

Penggunaan selector di css Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen‐element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.

1. Selector ID Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.

CSS

#p1 { color: #fff; background: #000; }

#nama { font-size: 12px; color: red; }

HTML

<p id=”p1”>Ini adalah paragraph pertama</p>

<div id=”nama”>Ini area nama anda </div>



2. Selector Class Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen‐elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .

.title { color: #fff; background: #000; }

.redbox { color: #fff; border: 1px solid red; background: red; }

CSS

HTML

<h2 class=”title”>Follow Us</h2>

<p class=”redbox”>Ini area merah</p>

Mengenal tag <div> Tag <div> adalah suatu element yang di gunakan untuk mengelompokan suatu element atau tag‐tag html agar menjadi suatu group.

.box { background: black; border: 2px solid red; width: 500px;

height: 200px; }

CSS

<div class=”box”> </div>

HTML



Contoh‐contoh penggunaan css

Merubah properti saat hover (disorot)

a { color: red; }

a:hover { color: black; font-size: 25px; }

.kotak { display: inline-block; background: black; border: 5px

solid red; width: 100px; height: 100px; margin-bottom: 5px; }

.kotak:hover { background: yellow; }

CSS

<a href="#">HOME</a>

<a href="#">ABOUT</a>

<a href="#">NEWS</a>

HTML

<div class="kotak"></div>





Menggunakan background gambar

<div class="gambar">

<h2>Kebun Anggur</h2>

<p>Kita berada dalam sebuah area anggur yang sangat luas.

Dengan warna ungu yang cantik menambah kesegaran kebun anggur

ini</p>

</div>

HTML

.gambar { background: url(anggur.png) no-repeat; background-

position: right bottom; background-color: #ccc; width: 500px;

height: 200px; border: 3px solid blue; }

CSS

Pada css di atas untuk menampilkan gambar menggunakan background: url(anggur.png) no-repeat; . Sedangkan no-repeat berfungsi untuk menampikan gambar sekali saja ( anda juga bias menggunakan repeat-x untuk mengulang gambar secara horizontal dan repeat-y untuk mengulang gambar secara horizontal ).Namun jika anda ingin menggunakan background secara full hilangkan property repeat . Properti background-position: right bottom; gambar tersebut berada diposisi kanan bawah.


Soal LatWearnes

Inform

Me

Dari digu

Jadi uli {

untuk

ul

wi

li

5p

<u

</

ul

ul

he

fo

ul

cu

<u

</

tihan Adobs Educati

matika da

emberi css

data contonnakan un

untuk memb{ backgroun

k ul li:ho

l { list-

idth: 100p

i { margi

px; }

ul>

<li>K

<li>I

<li>K

<li>D

/ul>

l { list-s

l li { bac

eight: 45p

ont-family

l li:hover

ursor: poi

ul>

<li>H

<li>A

<li>N

<li>P

<li>C

/ul>

be Dreamwon Center

an Teknik

s tag <ul>

oh diatas fntuk menga

buat menu snd: url(bg

over { back

style-ima

0px; }

n-bottom:

Kabapexim<

Inforkom</

Kasima-PR<

Degrakom</

style-typ

ckground:

px; line-

y: Arial;

r { backg

inter; }

Home</li>

About</li>

News</li>

Product</l

Contact</l

weaver CS6r

k Kompute

fungsi propanti bullet

ederhana digmenu.png);

kground: u

age: url(a

: 2px; bor

</li>

</li>

</li>

</li>

pe: none;

url(bgme

height: 4

; }

ground: ur

}

>

li>

li>

6 dan HTM

er

perti listdari tag <

atas meme; dan ketikaurl(bgmenu

arrow.jpg

rder-bott

}

enu.png);

45px; colo

rl(bgmenu

L

t-style-im

ul> .

rlukan gamba di sorot(ho-hover.png

g); font-f

tom: 1px s

display:

or: #fff;

-hover.pn

mage: url

bar untukover ) menggg);

family: "T

solid navy

: inline-b

; padding:

ng); color

(arrow.jp

k backgroundgunakan

Tahoma";

y; paddin

CSS

HTML

block;

: 0 15px;

r: yellow;

CSS

HTML

34

pg);

d ul

ng:

L

w;

L


Membuat CSS tag <table>

table { border: 1px solid #00ACE7; border-collapse: collapse; }

thead { background: #0078B2; color: yellow; }

td ,th { border: 1px solid #00ACE7; padding: 5px; }

CSS

HTML <table>

<thead>

<tr>

<th>Nim</th>

<th>Nama</th>

<th>Kelas</th>

<th>Nilai</th>

</tr>

</thead>

<tbody>

<tr>

<td>123</td>

<td>Paijo Idol</td>

<td>IK1</td>

<td>90</td>

</tr>

<tr>

<td>124</td>

<td>Joko Driyono</td>

<td>IK2</td>

<td>85</td>

</tr>

<tr>

<td>125</td>

<td>Siti

Similikiti</td>

<td>KS2</td>

<td>85</td>

</tr>

</tbody>

</table>




Membuat CSS pada form

h2 { margin: 0; padding: 0 5px 15px 5px; color: #00B0EA; font-family:

Arial; }

form { background: #333; width: 400px; border: 2px solid #000; padding:

10px; font-family: Tahoma; }

table { color: yellow; }

input,textarea { background: #111; border: 1px solid #555555; padding:

5px; color: #fff; }

input:hover,textarea:hover { border: 1px solid #ccc; }

input[type="submit"],input[type="reset"] { background:

url(bgbutton.gif); height: 30px; color: #fff; padding: 5px 10px; font-

weight: bold; }

CSS

<form action="" method="post">

<h2>Hubungi Kami</h2>

<table>

<tr>

<td><b>Nama</b></td>

<td>:</td>

<td><input type="text" name="nama"></td>

</tr>

<tr>

<td><b>Email</b></td>

<td>:</td>

<td><input type="text" name="email"></td>

</tr>

<tr>

<td valign="top"><b>Pesan</b></td>

<td valign="top">:</td>

<td><textarea name="pesan" cols="30" rows="5"></textarea></td>

</tr>

<tr>

<td></td>

<td></td>

<td>

<input type="submit" value="KIRIM">

<input type="reset" value="RESET">

</td>

</table>

</form>

HTML


BERKENALAN DENGAN CSS3

• Border Radius .box1 {

display: inline-block;

background: blue; border: 2px solid #000;

width: 120px; height: 120px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.box2 {


background: red; border: 2px solid #000;


-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

}

.box3 {


background: green; border: 2px solid #000;


-webkit-border-radius: 100%;

-moz-border-radius: 100%;

border-radius: 100%;

}

CSS

HTML <div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>



• Box Shadow

.box { display: inline-block; width: 120px; height: 120px; margin-

right: 20px; margin-bottom:20px ; background: blue; border: 3px solid

red; }

#A {box-shadow: 10px 10px;}

#B {box-shadow: 10px 10px 10px;}

#C {box-shadow: 10px 10px 10px 5px;}

#D {box-shadow: 10px 10px 10px 5px rgba(127,127,127,0.7);}

#E {box-shadow: 10px 10px 10px;border-radius:10px;}

#F {box-shadow: 10px 10px 10px rgba(127,127,127,0.7); border-

radius:10px; }

CSS

<div id="A" class="box"></div>

<div id="B" class="box"></div>

<div id="C" class="box"></div>

<div id="D" class="box"></div>

<div id="E" class="box"></div>

<div id="F" class="box"></div>

HTML



• Gradient Struktur penggunaan gradasi

Untuk lebih mudah silahkan generate css di http://www.colorzilla.com/gradient‐editor/

HTML <div class="gradasi"></div>

.gradasi { width: 128px; height: 128px;

/* FireFox 3.6+ */

background: -moz-linear-gradient(top, #007984 0%, #042528 100%);

/* Chrome,Safari4+ */

background: -webkit-gradient(linear, left top, left bottom, color-

stop(0%,#007984), color-stop(100%,#042528));

/* Chrome10+,Safari5.1+ */

background: -webkit-linear-gradient(top, #007984 0%,#042528 100%);

/* Opera 11.10+ */

background: -o-linear-gradient(top, #007984 0%,#042528 100%);

/* IE10+ */

background: -ms-linear-gradient(top, #007984 0%,#042528 100%);

/* W3C */

background: linear-gradient(to bottom, #007984 0%,#042528 100%);

/* IE6-8 */

filter: progid:DXImageTransform.Microsoft.gradient(

startColorstr='#007984', endColorstr='#042528',GradientType=0 ); }

CSS



• Transition transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

transition Sebuah properti singkat untuk menetapkan sifat transisi empat ke sebuah properti tunggal

transition‐property Menentukan nama properti CSS untuk transisi yang diterapkan ( background, width, height ,all )

transition‐duration Mendefinisikan lamanya transisi yang diperlukan. Default 0 ( 2s,0.5s )

transition‐timing‐function Menjelaskan bagaimana kecepatan selama transisi akan dihitung. Default "ease"

Transition‐delay Mendefinisikan ketika transisi akan mulai. default 0

.xbox {

background: blue; width: 100px; height: 100px;

transition: width 1s ease 0.2s;

/* Chrome , safari */

-webkit-transition: width 1s ease 0.2s;

/* Firefox */

-moz-transition: width 1s ease 0.2s;

/* Opera */

-o-transition: width 1s ease 0.2s;

}

.xbox:hover { width: 500px; }

CSS

HTML <div class="gradasi"></div>



.box {

position: relative;


border: 1px solid #111;

}

.fill {

background: #00A824;

width: 0; height: 30px;

transition: all 1s ease 0.2s;

-webkit-transition: all 1s ease 0.2s; /* Chrome , safari

-moz-transition: all 1s ease 0.2s; /* Firefox */

-o-transition: all 1s ease 0.2s; /* Opera */

}

.box:hover .fill { width: 500px; }

CSS

<div class="box">

<div class="fill"></div>

</div>

HTML

.img { width: 100px; height: 100px; margin: 15px;

transition: all 0.5s ease-in-out 0.2s;

-webkit-transition: all 0.5s ease-in-out 0.2s;

}

.img:hover { transform: rotate(45deg); }

<img src="image1.jpg" class="img">



HTML

CSS




PLUGIN JQUERY LIBRARY JQUERY

JQUERY


JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. Contoh penggunaan jquery :


http://jquery.com/


Membuat Validasi Login Sederhana dengan jQuery




LAYOUT PENGANTAR LAYOUT MEMBUAT WEB S TATIC

Soal LatWearnes

Inform

Dalam dmenerjemenjadmemilik

Setiap emenamnavigatSekaran

tihan Adobs Educati

matika da

dunia web emahkan hi element ki element‐

element wpung contion, sidebang kita mul

be Dreamwon Center

an Teknik

, sebagai phasil karya –element ‐element s

eb pastinytent yang iar, contentlai bagaima

weaver CS6r

k Kompute

programerseorang wHTML dansebagai be

ya akan mengin ditamt, footer dlana menci

6 dan HTM

er

r kita ditunwebdesignnn CSS. Seburikut:

emerlukan mpilkan. Sell. ptakan seb

L

ntut untuk ner yang muah dokum

sebuah boperti halny

buah layou

mampu masih berumen web um

ox yang maya bagian h

ut.

pa gambarmumnya

ampu header,

46

r


Setelah anda menyiapkan box (<div>) setiap bagian dari web, selanjutnya kita atur <div> tersebut menggunakan css.

Header

dari css diatas bahwa <div id=”header”> … </div> mempunyai tinggi 100px (height: 100px ) Navigation

dari css diatas bahwa <div id=”nav”> … </div> mempunyai tinggi 45px ( height: 45px ) Sidebar

Untuk sidebar disini menggunakan width: 30% yang mana bertujuan agar ukurannya menyesuaikan lebar dari browser. Kemudian agar dapat berdampingan dengan <div id=”content”>… </div> maka kita menambahkan property float . Sedangkan tinggi yang di atur 400px. Sebenarnya jika ingin tingginya menyesuaikan dengan isi content maka tidak perlu menambahkan height. Content

Sama halnya dengan sidebar, disini untuk bagian content menggunakan width: 70% yang mana lebar (width) tersebut merupakan sisa yang digunakan sidebar sebesar 30% , karena sebuah layout full max 100% . Footer

Dan bagian paling bawah dari layout adalah footer. Disini bagian footer menggunakan property clear : both yang berfungsi untuk menghilangkan pengaruh floating yang berada di element sebelumnya yaitu <div id=”content”> … </div>. Ada tiga jenis clear yaitu both ( semua floating), right (float: right), left (float: left).



MEMBUAT WEB STATIC

Disini kita akan membuat layout website untuk MY COMPANY. Disini kita memerlukan 5 jenis halaman (page) yaitu Homepage, About , News, Portfolio dan Contact. Untuk yang pertama kita buat Homepage (lihat gambar di halaman sebelumnya ) terlebih dahulu .

Buatlah new site baru dan buatlah sebuah file html dengan nama index.html . Kemudian buatlah sebuah file css dengan nama style.css . Kemudian ketik css ini :

Jika anda perhatikan * { box‐sizing : ….} . Disini berfungsi untuk membantu pengaturan layout tertutama bagian padding pada semua tag html. Sedangkan class .wrap { max‐width: 980px; margin: 0 auto; } berfungsi untuk mengatur lebar maximal dari content ( ukuran layout ). Dan .clearfix { clear: both; } untuk menghilangkan pengaruh float:right ataupun float:left .

CSS

Kemudian embed file style.css ke index.html anda.



Membuat bagian Header

Disini kita akan membuat div untuk header <div id=”header”> … </div> membagi dua kolom yang pertama div dengan class .logo dan div dengan class .h_right .

Kemudian tambahkan css untuk area header di file style.css



Membuat bagian menu

Tambahkan <div id=”menu”> … </div> di bawah <div id=”header”> … </div>.

Kemudian buatlah css untuk menu tersebut.

Element yang digunakan adalah tag <ul> … </ul> dengan class nav‐menu dimana list (<li>) ditampilkan dalam satu baris bukan ke bawah dengan property css display:inline‐block;



Membuat bagian slider

Tambahkan <div id=”slider”> … </div> di bawah dari <div id=”menu”> … </div>

Kemudian buat css untuk bagian slider

Disini kita masih menggunakan satu gambar terlebih dahulu . Nanti kita bisa mengcostum kembali dengan menambahkan plugin jquery (flexslider, cycle, nivoslider dll) , agar slider tersebut berjalan seperti slideshow. Konten yang digunakan bisa berupa banner atau yang lainnya



Membuat bagian service

Buatlah <div id=”service”> … </div> di bawah <div id=”slider”> … </div>

Tambahkan css untuk bagian service

Disini kita akan membuat 3 buah box service yaitu desktop, website, mobile. Tambahkan 2 box service dengan kode di bawah ini . Kemudian anda ganti judulnya menjadi Website, Mobile beserta gambarnya.



Membuat bagian main content homepage

Pertama kali tambahkan <div id=”main‐content”> … </div> :

Kemudian tambahkan css berikut :



Selanjutnya kita tambahkan about di dalam <div class=”main‐content”> … </div>

Kemudian tambahkan css untuk <div class=”about”> …… </div> dibawah

CSS class about :



Selanjutnya kita akan membuat box untuk widget di <div class=”sidebar”> … </div> . Kita tambahkan dua widget lastest news dan testimonial . Setiap widget akan di bungkus oleh <div class=”widget”> contentnya </div> .Kemudian tambahkan css untuk widget berikut di style.css (di bawah .sidebar { … } ) :

Buatlah widget untuk news di dalam <div class=”sidebar”> …. </div> .

Kemudian tambahkan css untuk widget news .



Buat widget lagi untuk testimonial .

Tambahkan css untuk testimonial .

Membuat bagian client list

Disini akan menampilkan client dari MY COMPANY. Buat <div id=”client”> … </div> di bawah <div id=”content”> …. </div> .

Kemudian tambahkan css :



Membuat bagian footer

Bagian footer adalah bagian paling akhir dari proses ini. Buatlah <div id=”footer”> … </div>. di bawah <div id=”client”> … </div> .

Kemudian css :

Pastikan anda melakukan step by step agar tidak terjadi kesalahan. Setiap selesai membuat bagian per bagian , silahkan preview dengan firefox ataupun browser yang lain.

Anda bisa mengembangkan lagi untuk masalah gambar dan warna.

Anda juga bisa menambahkan lebih dari 2 widget yang di contohkan . Dan pastikan setiap membuat widget gunakan struktur ini:




LAYOUT BOOTSTRAP RESPONSIVE WEB LAYOUT


Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat. Bootstrap sekarang sudah sampai v3. Untuk mendapatkan bootstrap silahkan masuk ke http://getbootstrap.com/getting‐started.

Setelah selesai download extract file bootstrap‐3.1.1‐dist.zip.

Gambar diatas meruapakan gambaran isi dari file bootstrap yang anda download tadi. Ada 3 folder yang dihasilkan yaitu css, js, fonts. Sedangkan file yang sering digunakan adalah bootstrap.css atau bootstrap.min.css dan bootstrap.js atau bootstrap.min.js.

Untuk contoh penggunaan component bootstrap bisa langsung masuk ke situs resmi http://getbootstrap.com.

Atau anda bisa menggunakan layout generator untuk bootstrap di http://www.layoutit.com


http://getbootstrap.com/getting-started

http://getbootstrap.com/


Sekarang kita akan membuat tampilan website MY COMPANY yang telah anda buat menjadi tampilan responsive.

Buatlah folder assets di directory web yang anda buat . Kemudian copykan semua folder (css, js dan fonts) yang telah anda extract dari file bootstrap‐3.1.1‐dist.zip.

Kemudian buka file index.html , embed file css bootstrap.css yang ada di folder assets/css ke index.html. Masukkan di bawah tag <title> … </title> . Dan tambahkan <meta name=”viewport” content=’width=device‐width, initial‐scale=1”> untuk mengatur ukuran web anda agar flexible menyesuaikan ukuran layar browser.



Dari bootstrap ini kita mengambil class dari grid system yang ada untuk mengatur lebar tiap bagian yang akan kita buat responsive. Di dalam Bootstrap v3 ini dipaparkan 4 macam class yang akan mendefinisikan Grid didalam HTML‐mu. Contoh class dalam Bootstrap 3

col‐xs‐* xs = extra small = terkecil

col‐sm‐* sm = small = kecil

col‐md‐* md = medium = sedang

col‐lg‐* lg = large = besar

Tanda * Adalah level grid ( 1‐12) . Contoh : col‐xs‐1 , col‐md‐6, col‐md‐8

Misalkan saya akan membagi bagian content menjadi dua kolom:



Ikuti langkah berikut : Header

Hapus property width dan float di css class .logo dan .h_right di style.css

Kemudian tambahkan col‐md‐4 di <div class=”logo”> … </div> .

Tambahkan juga col‐md‐8 di <div class=”h_right”> …. </div> .

Service

Hapus property width dan float di css class .serv‐item di style.css .



Tambahkan col‐xs‐12 col‐sm‐4 col‐md‐4 di <div class=”serv‐item”> … </div>

Main Content & Sidebar

Hapus property width dan float di css class .sidebar dan .main‐content di style.css



Kemudian tambahkan col‐md‐4 ke <div class=”sidebar”> … </div> dan col‐md‐8 ke <div class=”main‐content”> … </div> . Sidebar

main‐content

Kemudian coba jalankan di firefox . Kemudian coba tekan tombol CTRL +SHIFT + M . Untuk melihat ke tampilan design responsive. Kemudian tambahkan css berikut ke file style.css. Untuk menyesuaikan beberapa tampilan header dan footer . Disini kita akan menggunakan media query untuk menyesuaikan tampilan tersebut. Jadi ketika ukuran layar max‐width : 1000px (0‐1000) maka akan menerapkan css yang ada di dalamnya.




Mengatur menu Mungkin ketika kita lihat dalam tampilan responsive layout (320px) / (CTRL

+SHIFT +M) menu tampak tidak beraturan. Agar tampilan menu bisa responsive juga maka kitamemerlukan plugin jquery yaitu slicknav menu

icknav menu bisa di download di

ownload slicknav menu kemudian extract file SlickNav‐master.zip kemudian

emudian embed kedua file tersebut di index.html (<head> ….. </head>).

Slhttp://slicknav.com/

Dcopy dua file jquery.slicknav.js dan slicknav.css ke folder assests dan buatkan folder dengan nama slicknav .

K



Karena slicknav merupakan plugin jquery maka kita perlu library dari jquery agar slicknav dapat berjalan. Download jquery di http://jquery.com/download/

Kemudian simpan dengan nama jquery.js dan masukkan ke dalam folder assets/js . Embed file jquery.js ke index.html ( <head> … </head> ) .

Tambahkan <div id=”mobilemenu”></div> di bawah <ul class=”nav‐menu”> … </ul>.

Class pull‐right merupakan class untuk mengatur <div id=”mobilemenu”> … </div> agar float:right , class ini merupakan css dari bootstrap .



Tambahkan script berikut di atas tag </head>

Untuk menyesuaikan tampilan menu tambahkan css berikut di style.css

an max‐width:800px . Gunakan css berikut ini :

Jalankan kembali pada firefox kemudian CTRL + SHIFT +M.

kemudian jika ingin slicknav menu agar muncul pada tampil



Membuat Slider dengan nivo slider

Untuk mempercantik tampilan website anda kita akan menambahkan slider di

tudios.com/plugins/nivo‐slider/

Download nivoslider dan extract . Kemudian copy folder themes , file jquery.nivo.slider.js , nivo‐slider.css ke dalam folder assets dan buatkan folder dengan nama nivoslider .

bagian <div id=”slider”> … </div> dengan plugin jquery novislider . Download nivoslider di http://dev7s

Download slider nivo

Soal LatWearnes

Inform

Kemudislicknav

Ganti :

Dengan

Anda bisrc=”im

Kemudi

tihan Adobs Educati

matika da

ian embedv :

n

isa menammages/slide

ian agar sli

be Dreamwon Center

an Teknik

ke dalam

mbahkan lee1.jpg”> ).

ider anda b

weaver CS6r

k Kompute

file index.

bih banyak

berjalan ta

6 dan HTM

er

.html di ba

k lagi gamb

ambahkan

Effec

slicesliceslice, slidboxRboxRboxR

L

awah embe

bar (<img

kode berik

ct :

eDown , sleUpLeft , seUpDownLdeInRight ,Random , RainReverRainGrowR

ed css dan

kut :

iceDownLesliceUpDowLeft, fold , f, slideInLeboxRain ,

rse , boxRaReverse

jquery

eft , sliceUwn , fade , randft ,

ainGrow ,

70

Up ,

dom



LAYOUT

NEWS CONTACT

MELENGKAPI PAGE TAMBAHAN ABOUT PAGE PORTFOLIO



Membuat interior page ( About Page)

Pada dasarnya untuk page pendukung memiliki struktur yang sama dengan header homepage(index.html) . Sebagai contoh about page :

Copy tag html di index.html mulai dari <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> sampai <div id=”menu”> …… </div> dan <div id=”footer”> sampai </html> ke dalam file baru about.html .

CSS Default :



ABOUT PAGE (about.html)

HTML:

Tambahkan lebih banyak lagi paragraf



PORTFOLIO PAGE (portfolio.html)

HTML:

CSS :



NEWS PAGE (news.html)

HTML:

CSS :



CONTACT PAGE (contact.html)

HTML:

SS :C

Lampiran 1

Berikut data taq html

Tag Description

 Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation

<acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Not supported in HTML5. Use <object> instead. Defines an embedded applet

<area> Defines an area inside an image-map

<article>New Defines an article

<aside>New Defines content aside from the page content

<audio>New Defines sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

<bdi>New Isolates a part of text that might be formatted in a different direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead. Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button



<canvas>New Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead. Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

<command>New Defines a command button that a user can invoke

<datalist>New Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list

<del> Defines text that has been deleted from a document

<details>New Defines additional details that the user can view or hide

<dfn> Defines a definition term

<dialog>New Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead. Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed>New Defines a container for an external (non-HTML) application

<fieldset> Groups related elements in a form

<figcaption>New Defines a caption for a <figure> element

<figure>New Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text

http://www.w3schools.com/tags/tag_comment.asp

http://www.w3schools.com/tags/tag_doctype.asp

http://www.w3schools.com/tags/tag_a.asp

http://www.w3schools.com/tags/tag_acronym.asp

http://www.w3schools.com/tags/tag_address.asp

http://www.w3schools.com/tags/tag_applet.asp

http://www.w3schools.com/tags/tag_area.asp

http://www.w3schools.com/tags/tag_article.asp

http://www.w3schools.com/tags/tag_aside.asp

http://www.w3schools.com/tags/tag_audio.asp

http://www.w3schools.com/tags/tag_b.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_basefont.asp

http://www.w3schools.com/tags/tag_bdi.asp

http://www.w3schools.com/tags/tag_bdo.asp

http://www.w3schools.com/tags/tag_big.asp

http://www.w3schools.com/tags/tag_blockquote.asp

http://www.w3schools.com/tags/tag_body.asp

http://www.w3schools.com/tags/tag_br.asp



<footer>New Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5. Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5. Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Defines information about the document

<header>New Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<keygen>New Defines a key-pair generator field (for forms)

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a document and an external resource (most used to link to style sheets)

<map> Defines a client-side image-map

<mark>New Defines marked/highlighted text

<menu> Defines a list/menu of commands

<meta> Defines metadata about an HTML document

<meter>New Defines a scalar measurement within a known range (a gauge)

http://www.w3schools.com/tags/tag_canvas.asp

http://www.w3schools.com/tags/tag_caption.asp

http://www.w3schools.com/tags/tag_center.asp

http://www.w3schools.com/tags/tag_cite.asp

http://www.w3schools.com/tags/tag_colgroup.asp

http://www.w3schools.com/tags/tag_command.asp

http://www.w3schools.com/tags/tag_datalist.asp

http://www.w3schools.com/tags/tag_dd.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_details.asp

http://www.w3schools.com/tags/tag_dfn.asp

http://www.w3schools.com/tags/tag_dialog.asp

http://www.w3schools.com/tags/tag_dir.asp

http://www.w3schools.com/tags/tag_fieldset.asp

http://www.w3schools.com/tags/tag_figcaption.asp

http://www.w3schools.com/tags/tag_figure.asp

http://www.w3schools.com/tags/tag_font.asp



<nav>New Defines navigation links

<noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-side scripts

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<output>New Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress>New Represents the progress of a task

<q> Defines a short quotation

<rp>New Defines what to show in browsers that do not support ruby annotations

<rt>New Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby>New Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<script> Defines a client-side script

<section>New Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source>New Defines multiple media resources for media elements (<video> and <audio>)

<span> Defines a section in a document

http://www.w3schools.com/tags/tag_footer.asp

http://www.w3schools.com/tags/tag_form.asp

http://www.w3schools.com/tags/tag_hn.asp

http://www.w3schools.com/tags/tag_head.asp

http://www.w3schools.com/tags/tag_header.asp

http://www.w3schools.com/tags/tag_hr.asp

http://www.w3schools.com/tags/tag_html.asp

http://www.w3schools.com/tags/tag_i.asp

http://www.w3schools.com/tags/tag_iframe.asp

http://www.w3schools.com/tags/tag_img.asp

http://www.w3schools.com/tags/tag_input.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_label.asp

http://www.w3schools.com/tags/tag_legend.asp

http://www.w3schools.com/tags/tag_li.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_meter.asp



<strike> Not supported in HTML5. Use <del> instead. Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary>New Defines a visible heading for a <details> element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time>New Defines a date/time

<title> Defines a title for the document

<tr> Defines a row in a table

<track>New Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead. Defines teletype text

<u> Defines text that should be stylistically different from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video>New Defines a video or movie

<wbr>New Defines a possible line-break

http://www.w3schools.com/tags/tag_nav.asp

http://www.w3schools.com/tags/tag_noscript.asp

http://www.w3schools.com/tags/tag_rt.asp

http://www.w3schools.com/tags/tag_samp.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_section.asp

http://www.w3schools.com/tags/tag_select.asp

http://www.w3schools.com/tags/tag_small.asp

Wearne es Edu ucation Ce enter

Documents

Transcript of Wearne es Edu ucation Ce enter