tutorial html (2)
TRANSCRIPT
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
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
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..
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
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>
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.
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
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.
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
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 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 sebelum teks ini ada 6 kali spasi<br>
Dan ini seharusnya baris ke dua
</body>
</html>
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>
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
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>
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.
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>
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
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
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
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
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
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>
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>
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>
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:
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:
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.
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