BAB 2 Struktur HTML & Tag-Tag
Dasar
Praktikum 1
q Bukalah notepad atau program
text editor yang lain.
Ketikkan script berikut :
<html>
<head>
<title>Contoh</title>
</head>
<body>
SEDANG
BELAJAR PEMROGRAMAN WEB </body>
</html>
q Simpan
(File|Save As), dengan nama PRAKTIKUM1. html, pada kolom Save As Type, pilihlan
All Files(*.*).
q Buka web browser anda
(internet explorer)
q Bukalah dokumen yang anda
buat tadi. (File|Open)
q Klik browse: arahkan ke file
PRAKTIKUM1.html, klik OK
Lihatlah hasilnya :
SEDANG BELAJAR PEMROGRAMAN WEB
Praktikum 2
Pada
praktikum 2 kali ini kita akan belajar menambahkan warna background, dan
pemformatan tampilan teks.
q Buka kembali file web.html
pada program teks editor anda (notepad).
Ubah perintah berikut <BODY
bgcolor=”#0000ff” text="#ff0000" >
<html>
<head>
<title>Contoh2</title>
</head>
<body
bgcolor=”#0000ff” text=”#ff0000” > SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>
Praktikum 3
(Paragraf)
Tag
yang digunakan <p>… di tutup dengan tanda </p>
Digunakan untuk membuat paragraf
Atribut: - align
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
q Simpan dengan nama paragraf.html.
<html>
<head>
<title>Paragraf</title>
</head> <body> <p>SELAMAT DATANG</p> <p>Di Dunia
HTML</p>
<p>Elemen paragraf ditandai
dengan tag P
dan
setiap paragraf baru di tampilkan pada baris baru</p>
<p
align=”left”> rata kiri</p> <p align=”right”>rata
kanan</p>
<p align=”center”> rata
tengah</p>
<p
align=”justiyf”> rata kiri kanan</p> </body>
</html>
Hasilnya :
Di Dunia HTML
Elemen paragraf di tandai dengan tag p dan setiap paragraf baru di tampilkan pada baris baru
rata kiri
rata kanan
rata tengah
rata kiri kanan
Praktikum 4
(Line Break)
Tag <BR> digunakan
untuk pindah baris
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
q Simpan dengan nama Line Break.html.
<html> <head>
<title>Paragraf</title>
<head> <body>
<p>Elemen Paragraf
<BR> ditandai dengan tag p <BR> dan setiap paragraph baru
<BR> di tampilkan pada baris baru</P>
</body>
</html>
Hasilnya :
Elemen paragraf
ditandai dengan tagdan setiap paragraf baru
di tampilkan pada baris baru
Praktikum 5
(Heading)
Heading biasanya digunakan
untuk judul topik dan tag yang digunakan adalah
< H1> . . . <H6>
Makin
besar angka dibelakang H, maka huruf yang akan ditampilkan semakin kecil
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
Simpan dengan nama Heading.html.
<html>
<head> <title>Heading</title> </head> <body>
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading
3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
<html>
Hasilnya
:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Praktikum 6
(Membuat Garis)
Tag <HR> disisipkan pada tempat garis
akan ditampilkan
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
Simpan
dengan nama Garis.html.
<html><bodycolor=”silver”>
Garis Lebar 80%, rata kiri<hr
width="80%" align="left">
Garis Lebar 80%, rata kanan<hr
width="80%" align="right">
Garis normal rata tengah<hr
align="center">
Garis ukuran "10", rata tengah, lebar
"70%"<hr size="10" align="center"
width="70%">
Garis lebar "65%", rata Kiri, ukuran
"15" noshade <hr width="65%" align="left"
size="15" noshade>
<p><hr>
<i>Copyright ©
nama anda</i>
</body>
</html>
Hasilnya :
Garis Lebar 80%, Rata kiri
Garis Lebar 80%, Rata Kanan
Garis normal rata tengah
Garis ukuran "10", rata tengah, Lebar "70%"
Garis Lebar "65%", rata kiri, ukuran "15" noshade
copyright © Wayan Suka Arsana Putra
BAB 3 Formating
Teks HTML
Praktikum 1
(Format Font)
Teks
dokumen HTML dapat diformat secara khusus u/ menunjukkan perbedaan dan
penekanan terhadap isi dan maksud dokumen.
Tag awal
|
Kegunaan
|
<b>
|
Mendefinisikan teks yang
ditebalkan.
|
<big>
|
Mendefinisikan teks yang
besar ukurannya.
|
<em>
|
Mendefinisikan teks yang
ditekankan
|
<I> dan
<cite>
|
Mendefinisikan teks yang
dimiringkan – Italic
|
<small>
|
Mendefinisikan teks yang
kecil ukurannya
|
<strong>
|
Mendefinisikan teks yang
ditebalkan.
|
<sub>
|
Mendefinisikan teks yang
dijadikan subscript.
|
<sup>
|
Mendefinisikan teks yang
dijadikan superscript.
|
<u>
|
Mendefinisikan teks yang
digaris bawahi – Underline
|
<s>
|
Mendefinisikan teks yang di
coret – strikethrough
|
<pre>
|
Menampilkan apa yang ada di
editor teks
|
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
q Simpan dengan nama Format_Font.html.
<HTML>
<HEAD>
<TITLE>
Formatting Font </TITLE> </HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<s>ini
di coret</s> <BR>
X<sup>3</sup>
+ 2X<sup>2</sup> - 5 <BR>
H<sub>2</sub>O
</BODY></HTML>
Hasilnya :
Bold
Underline
italic
Strong
Emphasis
Citation
ini Coret
X3 + 2X2 - 5
H2O
Underline
italic
Strong
Emphasis
Citation
X3 + 2X2 - 5
H2O
Praktikum 2
(Karakter-karakter khusus)
Perintah-perintah yang
digunakan:
Hasil
|
Entitas
|
Keterangan
|
©
|
©
|
Copyright
|
®
|
®
|
Registered
|
™
|
™
|
Trademark
|
space
|
|
Non breaking space
|
&
|
&
|
Ampersand
|
«
|
«
|
Anggle quotation mark
(left)
|
»
|
»
|
Anggle quotation mark
(right)
|
£
|
£
|
Poundsterling
|
€
|
€
|
Euro
|
¥
|
¥
|
Yen
|
<
|
<
|
Lebih kecil
|
>
|
>
|
Lebih besar
|
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
q Simpan dengan nama Karakter_Khusus.html.
<HTML>
<HEAD>
<TITLE>
karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright ©
<br>
Trademark ™
<br>
Registered ®
<br>
Poundsterling
£ <br>
Yen ¥
<br>
Euro €<br>
</BODY>
</HTML>
Hasilnya :
Copyright ©
Trademark ™
Registered ®
Poundsterling £
Yen ¥
Euro €
Trademark ™
Registered ®
Poundsterling £
Yen ¥
Euro €
Praktikum 3
(Indentasi)
Disamping mengatur perataan, kita pun
bisa mengatur posisi baris-baris paragraf dari margin (tepi halaman). Tag-tag
indentasi paragraph yaitu <DD>, <BLOCKQUOTE>, <DL>,<DT>.
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
Simpan
dengan nama Indentasi.html.
<html>
<head>
<title>Ceritaku Ceritamu</title>
</head>
<body>
<DD>Engkau
datang membawa sejarah_ dari kota kecil menuju kota besar_ Indonesia rindu
pemimpin sepertimu_
semoga
ada tempat bagimu untuk dipilih_</DD> <BLOCKQUOTE>Memimpin negeri
ini bukanlah surga_ meyambung warisan panasnya neraka_
Tak
semudah balikkan punggung tangganmu_ mesti seirama
beresolusi_</BLOCKQUOTE> <DL>
<DT>kami
gantung harapan kami_ di bahu pemimpin kami</DT> </DL>
</body>
</html>
Hasilnya :
Memimpin negeri ini bukanlah surga_ meyambung warisan panasnya neraka_ Tak semudah balikkan punggung tangganmu_ mesti seirama beresolusi_
- kami gantung harapan kami_ di bahu pemimpin kami
BAB 4 List
dan Link
Praktikum 1
(List)
List
merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar
sesuatu.
Jenis-jenis list dalam HMTL :
q List dengan nomor (OL : Ordered List)
Nomor
item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst
sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type
yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut
type pada tag <ol>
Contoh
untuk list dengan angka romawi : <ol type=”I”>
Type
|
Arti
|
I
|
Romawi Besar
|
i
|
Romawi Kecil
|
A
|
Abjad Huruf Besar
|
a
Abjad
Huruf Kecil
Abjad
Huruf Kecil
q List tanpa nomor (UL: Unordered List)
Jenis
bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag
<ul>
Contoh <ul
type=”box”> : bila
ingin bullet berbentuk kotak.
Type
|
Arti
|
Disc
|
Bulatan
Penuh
|
Circle
|
Bulatan Kosong
|
Square
|
Segi empat penuh
|
Praktikum 1a
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
Simpan dengan nama List_OL.html.
<HTML>
<BODY>
<B>SISTEM
KOMPUTER</B> <OL TYPE="I">
<B><LI>BRAIN
WARE</B> <B><LI>HARDWARE</B>
<OLT type=”A”>
<LI>Input Device
<LI>Output
Device <LI>CPU <LI>Storage Device </OL>
<B><LI>SOFTWARE</B>
<OL Type="a"> <LI>Sistem
Operasi
<OL Type="i"> <LI>Windows
<LI>Linux </OL>
<LI>Aplikasi <OL >
<LI>MS.
Word <LI>CorelDraw </OL></OL></OL>
</BODY>
</HTML>
Hasilnya :
SISTEM KOMPUTER
- BRAIN WARE HARDWARE
- Input Device
- Output Device
- CPU
- Storage Device
- SOFTWARE
- Sistem Operasi
- Windows
- Linux
- Aplikasi
- MS. Word
- CorelDraw
Praktikum 1b
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini :
q Simpan dengan nama List_UL.html.
<HTML>
<BODY>
<B>SISTEM
KOMPUTER</B> <UL TYPE="Disc">
<B><LI>HARDWARE</B>
<UL
Type="Circle" > <LI>Input Device <LI>Output Device
<LI>CPU
<LI>Storage
Device </UL>
<B><LI>SOFTWARE</B>
<UL Type="square">
<LI><U>Sistem Operasi </U>
<LI><U>Aplikasi</U>
</UL></UL>
</BODY>
</HTML>
Hasilnya :
- HARDWARE
- Input device
- output device
- Cpu
- Storage Device
- Software
- Sistem operasi
- Aplikasi
Praktikum 2
(Link)
HTML menggunakan tag
<a> tag Anchor untuk membuat link Sintaknya:
<a href=“Source”> Teks
Tampilan</a>
Jenis
Link:
-
Link
Relatif
-
Link
Absolut
-
Link
dalam satu dokumen
Link Relatif
Link
dalam page ke page yang lain dalam satu komputer Contoh:
·
<a href=“Jaring2.html”>Berikut</a>
·
<a href=“/jaringan/Jaring2.html”> Berikut</a>
Link Absolut
Membuat link web page ke web
site lain di Internet.
Contoh:
Link ke Bagian lain dalam
Dokumen
Link
jenis ini dibuat apabila dokumen html cukup panjang Link ini berpasangan dengan
tag
·
<A HREF="#yang_baru">Yang Baru Hari Ini</A>
·
<A
NAME="yang_baru"></A>
B><U>Yang
Baru Hari Ini:</U></B>
Pratikum 2a
q Terlebih
dahulu, butkan folder untuk latihan dokumen HTML berikut ini dengan nama Link
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini, Simpan dengan nama
Latihan1.html
<html>
<head>
<title>Latihan1</title>
</head>
<body
bgcolor="red"> <p>Latihan Satu</p> <body>
</html>
Hasilnya :
Latihan satu
q Buatlah
sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Latihan2.html.
<html>
<head>
<title>Latihan2</title>
</head>
<body
bgcolor="blue"> <p>Latihan Dua</p> <body>
</html>
Hasilnya :
Latihan dua
q Buatlah
sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Latihan3.html.
<html>
<head>
<title>Latihan3</title>
</head>
<body
bgcolor="yellow"> <p>Latihan Tiga</p> <body>
</html>
Hasilnya:
Latihan tiga
q Kemudian buatlah sebuah
dokumen HTML untuk tulisan berikut ini,
q Simpan dengan nama Link_Menu.html
<html>
<head>
<title>Latihan Link</title>
</head>
<body link="red"> Selamat Belajar :
<UL Type="A">
<LI> <a
href="Latihan1.html">Latihan 1</a></LI> <LI>
<a href="Latihan2.html">Latihan 2</a></LI>
<LI> <a href="Latihan3.html">Latihan
3</a></LI>
</UL>
<body>
</html>
Hasilnya :
Selamat belajar :
latihan 1 latihan 2 latihan 3
Pratikum 2b
q Buatlah sebuah dokumen HTML
untuk tulisan berikut ini, Simpan dengan nama
Jenis_Link.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP"> <BR>
<H1>Link secara relatif, lihat contoh di bawah
ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini
</A> jika mau ke halaman berikutnya
</P>
<H1>Link secara absolut, lihat contoh di bawah
ini:</H1>
<P>
Klik <A
HREF="http://www.facebook.com">facebook</A> menuju ke
facebook
</P>
<P>
<H1>Membuat
window baru untuk link:</H1> Open <A
HREF="http://www.mangosoft.com" TARGET="_blank"> my home
page</A>
with new window.
</P><H1>Membuat
link tanpa garis bawah:</H1><P> <A
HREF="http://www.mangosoft.com" style="
text-decoration:none">Klik
This Link </A> , Looks it's not use underline.
</P></P>
<H1>Membuat
link pada suatu pesan mail:</H1> <BR> kirim email ke <a
href="mailto:yantzuke@gmail.com"> yantzuke@gmail.com</a>
</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A
HREF="#TOP"> kembali ke atas</A>
</BODY>
</HTML>
Hasilnya :
link secara relatif, lihat contoh dibawah ini:
Klik disini jika mau ke halaman berikutnya
Link Secara absolut, lihat contoh dibawah ini:
Klik facebook menuju ke facebook
Membuat window baru untuk link:
Open my home page with new wondow.
Membuat link tanpa garis bawah:
klik this link , looks it's not use underline.Membuat link pada suatu pesan mail:
kirim email ke yantzuke@gmail.com
sumber: syafriadi82@gmail.com
Tidak ada komentar:
Posting Komentar