Tutorial HTML (2)

27
 Daftar Isi Table of Contents Daftar Isi .................................................................................................................................................. 1 Lankah-langkah membuat Homepage ...................................................................................................... 3 Pendahuluan ........................................................................................................................................... 4 Apa itu HTML ....................................................................................................................................... 4 Apa itu Tag/Element ............................................................................................................................ 5 Atribut Tag ....................................................................................................................................... 6 Editor untuk membuat file HTML ......................................................................................................... 6 Memulai HTML ........................................................................................................................................ 7 Member Judul Halaman ........................................................................................................................... 7 Menangani Spasi dan Ganti Baris ........................................................................................................... 10 Warna Teks Global ................................................................................................................................. 11 Mengatur Latar Belakang ....................................................................................................................... 13 Menggunakan HEADER .......................................................................................................................... 14 Mengatur Paragraf ................................................................................................................................ 15 HTML Formatting ........................................................................................ Error! Bookmark not defined. HTML Styles ........................................................................................................................................... 21 HTML Links ................................................................................................. Error! Bookmark not defined. HTML Images ......................................................................................................................................... 27 HTML Tables .......................................................................................................................................... 27 HTML Lists ............................................................................................................................................. 27 HTML Forms .......................................................................................................................................... 27

Transcript of Tutorial HTML (2)

Page 1: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 1/27

Daftar Isi

Table of Contents

Daftar Isi .................................................................................................................................................. 1

Lankah-langkah membuat Homepage ........................ ................................ ...................... ........................ 3

Pendahuluan ........................................................................................................................................... 4

Apa itu HTML ....................................................................................................................................... 4

Apa itu Tag/Element ............................................................................................................................ 5

Atribut Tag ....................................................................................................................................... 6

Editor untuk membuat file HTML ......................................................................................................... 6

Memulai HTML ........................................................................................................................................ 7

Member Judul Halaman .............................. ............................ ....................... ............................... ........... 7

Menangani Spasi dan Ganti Baris ........................................................................................................... 10

Warna Teks Global ................................................................................................................................. 11

Mengatur Latar Belakang ........................... ............................. ...................... ................................ ......... 13

Menggunakan HEADER .......................................................................................................................... 14

Mengatur Paragraf ................................................................................................................................ 15

HTML Formatting ........................................................................................ Error! Bookmark not defined. 

HTML Styles ........................................................................................................................................... 21

HTML Links ................................................................................................. Error! Bookmark not defined. 

HTML Images ......................................................................................................................................... 27

HTML Tables .......................................................................................................................................... 27

HTML Lists ............................................................................................................................................. 27

HTML Forms .......................................................................................................................................... 27

Page 2: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 2/27

HTML Frames ........................................................................................................................................ 27

HTML Iframes ........................................................................................................................................ 27

HTML Colors .......................................................................................................................................... 27

HTML Colornames ................................................................................................................................. 27

HTML Colorvalues ........................... ......................... ................................ ...................... ........................ 27

HTML Quick List ..................................................................................................................................... 27

Page 3: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 3/27

 

Lankah-langkah membuat Homepage

Jika kamu ingin membuat homepage, sebaiknya kamu ikuti langkah-langkah berikut

1.  Membuat sketsa desain, yaitu membuat tapilan web yang kita inginkan. Umumnya para web

designer perancang web) akan membuat layout desain menggunakan beberapa software

2.  Membuat layout desain, yaitu membuat layout (rancangan) desain biasanya memakai software

Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks, atau Macromedia Freehand

3.  Membagi gambar menjadi potongan-potongan kecil. Setelah layout desain homepage selesai

dibuat sebaiknya file gambar tersebut dipecah menjadi potongan-potongan kecil. Hal ini

bertujuan untuk mempercepat waktu download atau membuka situs yang kita buat. Untukmemotong-motong gambar bisa menggunakan software Adobe Image Ready.

4.  Membuat animasi. Pembuatan animasi diperlukan untuk mempercantik halaman website kita.

Macromedia Flash dan Ulead GIF animator bisa digunakan untuk keperluan ini

5.  Membuat HTML (HyperText Markup Language). Untuk membuat HTML kita dapat

menggunakan Program editor HTML seperti Notepad, editplus, Macromedia Dreamweaver,

Microsoft FrontPage, atau Allaire homesite.

6.  Programming dan Script. Saat ini untuk pemrograman web bisa menggunakan ASP, Borland

Delphy, CGI, PHP, Visual Basic, dll

7.  Upload. Setelah file menjadi html beserta gambar dan scriptnya, kita perlu meng-upload file ke

suatu tempat (hosting), agar semua orang di dunia dapat mengakses halaman Html yang dibuat.

Untuk mengupload bisa secara manual atau memakai bantuan software seperti WS-FTP, Cute

FTP, atau bullet FTP. Anda membutuhkan server untuk menyimpan file-file tersebut. Server ini

harus aktif dan terkoneksi dengan jaringa interner selama 24 jam agar halaman website anda

selalu dapat dilihat oleh semua orang di seluruh dunia..

Page 4: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 4/27

 

Pendahuluan

 Apa itu HTML 

HTML merupakan bahasa yang digunakan untuk membuat dokumen pada World Wide

Web (WWW). Dengan HTML kamu dapat membuat websitemu sendiri.

HTML adalah sebuah bahasa untuk mendesripsikan halaman web (web pages).

y  HTML singkatan dari Hyper TextMarkup Language

y  HTML bukanlah sebuah bahasa pemrograman (programming language), HTML adalah markup

language 

y  Markup language terdiri dari markup tags 

y  HTML menggunakan markup tags untuk mendefinisikan halaman web

Jadi intinya HTML merupakan bahasa yang digunakan untuk menulis halaman web. Biasanya

mempunyai ekstensi .htm ,html, atau xhtml(untuk HP). HTML tersusun atas tag-tag yang digunakan

untuk menentukan tampilan dari dokumen HTML yang diterjemahkan oleh browser seperti Mozilla

Firefox, Opera, Internet Explorer, dll. HTML tidak case sensitive artinya huruf besar kecil tidak

berpengaruh contoh tag <HTML> sama dengan <Html> atau <HTml> atau <HTMl> atau <html>. 

Tetapi walaupun demikian kami merekomendasikan untuk menulis tag HTML dalam bentuk

Lowercase (huruf kecil) semuanya. Karena dikemudian hari akan ada standarisasi HTML5 yang

diharuskan menggunakan lowercase semuanya. Selain itu meskipun tidak bersifat case sensitive,

namun link-link dan nama-nama referensinya bersifat case sensitive. Hal ini terutama terjadi pada

file-file yang disimpan di server-server berbasis UNIX atau LINUX. Jadi jika anda ingin membuat link

ke sebuah file bernama facebeok.html, sebaiknya anda TIDAK menggunakan tag <Ahref=Facebeok.html> melainkan harus <A href=facebeok.html>

Kerangka dasar dokumen HTML adalah

<HTML> 

<Head> 

Deskripsi Dokumen

</Head> 

<Body> 

Isi Dokumen

</Body> </HTML> 

Keterangan

1.  HTML. Setiap dokumen HTML biasanya diawalai dan ditutup dengan tag HTML, yang fungsinya

yaitu memberi tahu browser bahwa yang berada di dalam kedua tag tersebut adalah dokumen

HTML 

Page 5: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 5/27

2.  HEAD. Bagian header dari dokumen HTML , berada diantara tag Head. Di dalam bagian ini

biasanya dimuat tag TITTLE yang menampilkan judul halaman pada bagian title di browser. Head

  juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu

mengenai dokumen HTML 

3.  Body. Body digunakan untuk menampilkan text, linl, dan semua yang akan ditampilkan pada

halaman web 

 Apa itu Tag/Element 

HTML markup tags biasa juga disebut sebagai Tag HTML. Tag HTML atau lebih singkat kitasebut tag, adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII sehingga

membentuk file HTML. Setiap tag memiliki fungsi sendiri-sendiri dan selalu dimulai dengantanda ³<´ dan ditutup dengan tanda ³>´, misalnya <B>, <Centre>, <i>, dan lain sebagainya.

Kebanyakan tag memiliki pasangan penutup yang harus digunakan untuk menutup tag

sebelumnya. Tag penutup tidak harus diletakan satu baris dengan tag pembuka, melainkan dapat

diletakan dimana saja dan selalu dimulai dengan tanda ³</´ dan ditutup dengan tanda ³>´,misalnya </B>, </centre>, </i>, dan lain sebagainya. Jadi secara singkat, tag adalah

y  tag HTML adalah sebuah keyword (kata kunci ) yang diapit oleh tanda kurung siku <> contoh

<b> 

y  tag HTML biasanya terdiri dari sepasang tag contoh <b> dan diakhiri oleh </b> ,

y  pada contoh diatas <b> adalah tag awal , sedangkan </b> adalah akhir dari tag

y  Start and end tags are also called opening tags and closing tags 

Browser seperti Mozilla Firefox, Opera, Internet Explorer, tidak akan menampilkan tag HTML, tag HTML

digunakan browser untuk menterjemaahkan isi dari halaman web kita

Pada contoh diatas maka browser akan menterjemahkan bahwa:

1.  Text diantara tag <html> dan </html> diterjemahkan oleh browser sebagai sebuah halaman

web bukan file XML, file word, excel, corel, ataupun file lainnya.

2.  Text diantara tag <body> dan </body> akan ditampilkan oleh browser di halaman web kita

3.  Text diantara <h1> dan </h1> ditampilkan sebagai header text

4.  Text diantara <p> dan </p> ditampilkan sebagai sebuah paragraph

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Page 6: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 6/27

 Atribut Tag

y  Atribut menyediakan informasi tambahan pada tag HTML. 

y  Sebuah tag bisa memiliki satu atribut atau lebih.

y  Atribut selalu ditempatkan pada tag awal bukan tag penutup

y  Atribut memiliki nama dan juga nilai, name=value

y  Contoh :

<h1> tag ini tanpa atribut

<h1 align=center> tag ini memiliki 1 atribut yaitu align yang nilainya center

<h1 size=7 color=red> tag ini memiliki 2 atribut yaitu size yang nilainya 7 dan juga atribut color

y  Atribut tag boleh juga ditulis tanpa tanda kutip, karena itu tiga contoh di bawah ini sama saja

y  Contoh:

<hr align=center width=80>

<hr align=center width=80>

<hr align=center width=80>

Akan tetapi sebaiknya anda membiasakan diri untuk menggunakan tanda petik agar terhindar dari

kemungkinan salah interpretasi dari sebagian browser yang ada.

Jika tag tidak memiliki atribut, maka browser akan menganggap atribut yang digunakan adalah atribut

default, yaitu yang dipasng pada tag <body> (akan dijelaskan pada materi selanjutnya). Jika memiliki

lebih dari satu atribut, maka setiap atribut yang digunakan harus dipisah dengan menggunakan tanda

spasi.

Editor untuk membuat file HTML 

Untuk membuat atau mengedit HTML kita dapat menggunakan Program editor HTML seperti

Notepad, editplus, Macromedia Dreamweaver, Microsoft FrontPage, atau Allaire homesite. File yang

telah dibuat atau diedit harus disimpan dalam bentuk HTM atau HTML. Tidak ada perbedaan diatara

ekstensi HTM maupun HTML semuanya terserah selera anda mau menggunakan HTML atau HTM.

Page 7: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 7/27

Memulai HTML 

Untuk sekarang, kita akan menggunakan program editor HTML yaitu notepad, silahkan buka program

notepad-nya. Jika anda telah telah selesai mengedit file HTMLnya kemudian save file tersebut dengan

cara menekan tombol save di program notepad anda. Kemudian pada file name silahkan tuliskan nama

file yang anda inginkan kemudian diakhiri dengan .html atau .htm , misal webku.html Pada save as type

pilih all file (*.*)  . Kemudian tekan tombol save. Maka 1 halaman website telah anda buat. Untuk

mencoba hasilnya cukup anda doubleclick pada file yang telah anda simpan tadi.

Memberi Judul Halaman

Ketika anda membuka sebuah homepage, browser anda akan menampilkan judul homepage

bersangkutan di tab browser. Untuk membuat judul halaman web seperti ini, gunakan tag <title>

</title> dan letakan diantara tag <head></head> seperti berikut ini:

<html>

<head>

<title>haloooo ini webku</title>

</head>

<body>

Home page pertamaku

</body>

</html>

Cobalah ketik baris-baris di atas dengan notepad dan simpan dengan nama file WebPertama.html 

Page 8: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 8/27

 

Gambar 1. Tampilan editor notepad 

Gambar 2 Tampilan Save file yang telah diedit pada editor notepad

Cobalah buka file yang telah anda simpan tadi.

Page 9: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 9/27

 

Gambar 3. Membuka file yang telah di save

Maka hasilnya adalah

Gambar 4. Tampilan di Browser

Page 10: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 10/27

Menangani Spasi dan Ganti Baris

Browser apapun yang anda gunakan, tidak mengenal kode spasi lebih dari satu spasi, tidak mengenal

ganti baris (ENTER/carriage return), dan tidak mengal kode tab. Ini berarti bahwa jika anda melakukan

1000 enter + 1000 Spasi akan percuman karena hasilnya akan sama dengan 1 spasi. Coba anda buat file

baru, simpan dengan nama latihan2.html 

<html>

<body>

Ini contoh latihan sebelum teks ini ada 15 kali spasi

Dan ini seharusnya baris ke dua

</body>

</html>

Maka hasil tampilan di browsernya adalah

Gambar 5. Contoh salahMenangani spasi dan baris

Untuk mengatasinya, anda harus menggunkan tag <br> sebagai ganti enter dan menggunakan kode

karakter khusus &nbsp; untuk menampilkan tanda spasi. Coba modifikasi file latihan2.html diatas

dengan cara klik kanan pada filenya kemudian pilih open with notepad.

<html>

<body>

Ini contoh latihan &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;sebelum teks ini ada 6 kali spasi<br> 

Dan ini seharusnya baris ke dua

</body>

</html>

Page 11: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 11/27

Maka tampilannya akan berubah menjadi

Gambar 6. Tampilan menangani Spasi dan baris setelah dikoreksi

Warna Teks Global

Warna teks yang akan ditampilkan oleh browser secara global ditentukan oleh salah satu atribut yang

ada pada tag <body>. Adapun atribut yang dapat dipasang pada tag <body> diantaranya adalah

y  text=warna digunakan untuk mewarnai tulisan

y  link=warna digunakan untuk warna link

y  vlink=warna digunakan untuk warna link yang pernah dikunjungi

y  alink=warna digunakan untuk warna link yang aktif  

y  background=filegambar digunakan untuk membuat latar belakang dari gambar

y  bgcolor=warna digunakan untuk membuat latar belakang dari warna 

warna diatas dapat berupa kodewarna atau kode nama warna. Jika menggunakan kode warna, format

yang digunakan adalah #rrggbb , masing-masing huruf rr, gg, dan bb mewakili kode angka r ed,

gr een,blue dari #00 sampa #ff heksa.

Sebagai contoh edit file WebPertama.html dengan cara klik kanan pada filenya kemudian pilih open

with notepad. Untuk menampilkan seluruh teks berwarna merah, anda dapat menggunakan kode

berikut:

<html>

<head>

<title>haloooo ini webku</title>

</head>

Page 12: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 12/27

<body text=µ#ff0000µ>

Home page pertamaku

</body>

</html>

Jika menggunakan kode nama warna, kode yang dapat digunakan adalah nama-nama warna dalam

bahasa Inggris, Sebagai contoh, kode di atas dapat diganti dengan baris-baris berikut dengan hasil yang

sama

<html>

<head>

<title>haloooo ini webku</title>

</head>

<body text=µredµ>

Home page pertamaku

</body>

</html>

Jika tag <body> tidak memakai atribut, maka browser akan menggunakan warna teks hitam dan latar

belakang putih dengan link berwarna biru sebagai default atribunya. Berikut ini adalah beberapa warna

lainnya (catatan : masih banyak warna lain yang tidak saya tulis Karena keterbatasan halaman, silahkan

cari sendiri)

Black = #000000

White = #ffffff

Red = #ff0000

Yellow = #ffff00

Blue = #0000ff

Aqua = #00ffff

Lime = #00ff00

Fuchsia = #ff00ff

Gray = #808080

Silver = #c0c0c0

Maroon = #800000

Olive = #808000

Green = #008000

Teal = #008080

Navy = #000080

Purple = #800080

Page 13: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 13/27

Mengatur Latar Belakang

Latar belakang web dapat kita tampilkan dengan menambahkan atribut/element bgcolor dan atau

background pada tab <body>, bgcolor digunakan untuk membuat latar belakang dengan warna,

sedangkan background digunakan untuk membuat latar belakang dari gambar.

Buka kembali WebPertama.html tambahkan script berikut

<body text=µredµ bgcolor=µblackµ>

Anda juga dapat menggunakan kedua atribut bersama-sama sebagai cadangan jika atribut background

yang menggunakan gambar sebagai latar belakang gagal me-load gambar dari server, maka masih adalatarbelakang warna yang bisa ditampilkan. Contoh:

<html>

<head>

<title>haloooo ini webku</title>

</head>

<body text=µredµ bgcolor=µblackµ background=µfotonarsis.jpgµ>

Home page pertamaku

</body>

</html>

Perhatikan juga bahwa contoh diatas menggunakan file gambar fotonarsis.jpg yang berada di loasi file

WebPertama.html berada. Jika file gambarnya berada di lokasi lain, anda harus menulisnya dengan

lokasi yang benar, misalkan jika gambarnya terdapat di folder D:\gambar\fotonarsis.jpg 

<html>

<head>

<title>haloooo ini webku</title>

</head>

Page 14: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 14/27

<body text=µredµ bgcolor=µblackµ background=µD:\gambar\fotonarsis.jpgµ>

Home page pertamaku

</body>

</html>

Dan jika file gambaarnya berada pada alamat server (situs web) orang lain, maka anda harus

menggunakan alamat server tersebut, misalkan

<html>

<head>

<title>haloooo ini webku</title>

</head>

<body text=µredµ bgcolor=µblackµ background=µhttp://okipriyadi.com/images/fotolagibayi.jpgµ>

Home page pertamaku

</body>

</html>

Menggunakan HEADER

Header adalah huruf-huruf atau teks berukuran khusus yang dapat digunakan untuk member judul

suatu bab atau subbab dalam dokumen. Ada enam level ukuran header yang dapat digunakan sesuai

kebutuhan. Header level 1 adalah header dengan ukuran paling besar. Sedankan header level 6 adalah

header dengan ukuran huruf paling kecil.

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document

structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 

headings, and so on.

Page 15: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 15/27

 

Coba ubah WebPertama.html menjadi seperti berikut:

<html>

<head>

<title>haloooo ini webku</title>

</head>

<body text=µredµ bgcolor=µblackµ background=µfotonarsis.jpgµ>

<h1>Selamat dating di Web site Pertamaku</h1>

<h6>Pada Web Site ini kamu diajak untuk belajar HTML</h6>

Home page pertamaku

</body>

</html>

Mengatur Paragraf 

Setiap document biasanya terdiri dari 1 paragraf atau lebih. Masing-masing paragraph dipisahkan oleh

spasi kosong (enter). Secara umum kita bisa menggunakan tag <br>  untuk mrmbuat spasi kosong

(enter), tetapi ini tidak praktis. Ada tag khusus yang dapat digunakan untuk memisahkan paragraph

yaitu tag <p>.

Contoh:

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>Paragraph elements are defined by the p tag.</p>

</body>

Page 16: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 16/27

</html>

Mengatur Perataan

Tag <p> sebenarnya memiliki atribut yang bisa kita gunakan untuk mengatur perataan teks (alignment).

Sintaks penggunaannya adalah

<p align=µmode perataanµ>

Dimana mode perataan dapat berupa

y  ´leftµ

y  ´rightµ

y  ´centerµ

y   ́justifyµ

contoh

<html>

<body>

<h1 align="center">This is heading 1</h1>

<p align=µrightµ>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The

heading above is aligned to the center of this page.</p>

</body>

</html>

Hasilnya adalah

Page 17: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 17/27

Memilih Font 

MemilihWarna Font 

Mengatur Ukuran Font 

Kdfkls

Mengatur Font Default 

Format Teks

Tag  Description 

<b>  Defines bold text 

<big> Defines big text 

<em> Defines emphasized text

<i> Defines italic text 

<small> Defines small text 

<strong>  Defines strong text 

<sub>  Defines subscripted text 

<sup>  Defines superscripted text 

<ins> Defines inserted text 

<del> Defines deleted text 

Page 18: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 18/27

<s>   Deprecated. Use <del> instead 

<strike> Deprecated. Use <del> instead 

<u>  Deprecated. Use styles instead 

"Computer Output " Tags

Tag  Description 

<code>  Defines computer code text 

<kbd>  Defines keyboard text

<samp> Defines sample computer code 

<tt>  Defines teletype text 

<var> Defines a variable 

<pre>  Defines preformatted text 

<listing>  Deprecated. Use <pre> instead

<plaintext>  Deprecated. Use <pre> instead 

<xmp>  Deprecated. Use <pre> instead 

Citations, Quotations, and Definition Tags

Tag  Description 

<abbr>  Defines an abbreviation 

<acronym>  Defines an acronym 

<address> Defines an address element 

<bdo>  Defines the text direction 

<blockquote>  Defines a long quotation 

Page 19: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 19/27

<q>  Defines a short quotation 

<cite>  Defines a citation 

<dfn>  Defines a definition term 

<html>

<body>

<b>This text is bold</b><br>

<strong>This text is s trong</strong><br>

<big>This text is big</big><br>

<em>This text is emphasized</em><br>

<i>This text is italic</i><br>

<small>This text is small</small><br>

This text contains<sub>subscript</sub><br>

This text contains<sup>superscript</sup>

</body>

</html>

Hasilnya adalah

Page 20: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 20/27

 

Contoh lainnya:

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Hasilnya adalah

Page 21: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 21/27

 

HTML Styles 

Styling HTMLwith CSS

CSS was introduced with HTML 4, to provide a common way to style HTML elements.

CSS styling can be added to HTML in the following ways

y  in separate style sheet files (CSS files)

y  in the style element in the HTML head section

y  in the style attribute in single HTML elements.

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Contoh:

<html>

<body s tyle="background-color:yellow">

<h2 style="background-color:red">This is a heading</h2>

Page 22: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 22/27

<p style="background-color:green">This is a paragraph.</p>

</body>

</html> 

The style attribute makes the "old" bgcolor attribute obsolete.

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in anelement:

Contoh

<html>

<body>

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>

</html> 

The style attribute makes the old <font> tag obsolete.

HTML Style Example - Text Alignment 

The text-align property specifies the horizontal alignment of text in an element:

Contoh:

<html>

<body>

<h1 style="text-align:center">This is a heading</h1>

<p>The heading above is aligned to the center of this page.</p>

</body>

</html> 

Page 23: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 23/27

 

Deprecated Tags and Attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be

supported in future versions of HTML and XHTML.

The message is clear: Avoid using deprecated tags and attributes!

These tags and attributes should be avoided:

Tags  Description 

<center>  Deprecated. Defines centered content 

<font> and <basefont>  Deprecated. Defines HTML fonts 

<s> and <strike>  Deprecated. Defines strikethrough text 

<u>  Deprecated. Defines underlined text 

Attributes  Description 

Align  Deprecated. Defines the alignment of text 

Bgcolor  Deprecated. Defines the background color 

Color  Deprecated. Defines the text color 

Menggunakan Link 

Untuk melompat / menghubungkan satu halaman ke halaman yang lainnya kita menggunakan tag <A>.

Semua teks maupun gambar yang diapit oleh tag ini apabila kita klik akan membawa kita ke halaman lain

yang diarahkan oleh attribute href dalam tag ini. Format penulisannya adalah

<a href = ´lokasi yang ditu juµ> Teks/gambar yg ingin ditampilkan di browser </a>

Contoh:

<html>

Page 24: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 24/27

<body>

<p><a href="lastpage.htm">This text</a> is a link to a page on this Web site.</p>

<p><a href="http://www.facebook.com">This text</a> is a link to a page on the World Wide Web.</p>

</body>

</html>

Hasilnya

Apabila mouse diarahkan pada this is text yang baris pertama maka jika mouse di klik akan membawa

kita pada halaman lastpage.htm, Sedangkan jika yang diklik adalah this is text yang baris kedua, maka

browser akan membawa kita ke halaman facebook.com.

Contoh penggunaan image sebagai link

<html>

<body>

<p>You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65"

height="38"></a></p>

</body>

</html>

Hasilnya:

Page 25: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 25/27

 

Apabila mouse diarahkan pada gambar next maka jika mouse di klik akan membawa kita pada

halaman lastpage.htm,

Mengatur Warna Link 

Teks yang dijadikan link secara otomatis akan diberi garis bawah dan secara default akan diberi warna

biru, saat diklik akan berwarna ungu, dan setelah diklik akan berwarna ungu juga. Untuk mengganti

warna default ini , tambahakan atribuk link, alink, dan vlink di tag <Body>. Sebagai contoh, untuk

mengganti warna link menjadi merah, saat diklik warna biru, dan setelah diklik menjadi warna hijau

<body link=red alink=blue vlink=green>

The Target Attribute

With the target attribute, you can definewhere the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/"target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create

links that can jump directly into a specific section on a page, instead of letting the user scrollaround to find what he/she is looking for.

Below is the syntax of a named anchor:

Page 26: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 26/27

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you

care to use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of aUR L, like this:

<a href="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like

this:

<a href="#tips">Jump to the Useful Tips Section</a>

Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this:

href="http://www.w3schools.com/html", you will generate two HTTP requests to the server,

 because the server will add a slash to the address and create a new request like this:href="http://www.w3schools.com/html/"

 Named anchors are often used to create "table of contents" at the beginning of a large document.

Each chapter within the document is given a named anchor, and links to each of these anchorsare put at the top of the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the

document. No error occurs.

Page 27: Tutorial HTML (2)

5/13/2018 Tutorial HTML (2) - slidepdf.com

http://slidepdf.com/reader/full/tutorial-html-2 27/27

 

HTML Images

HTML Tables

HTML Lists

HTML Forms

HTML Frames

HTML Iframes

HTML Colors

HTML Colornames

HTML Colorvalues

HTML Quick List