Html for xi grade

Web Programming With

HTML

Sri Mulyani

ICT For XI Grade

Contents

What is HTML

Basic Operation in HTML

Text Formatting

Table

Frame

Web Programming with HTML ICT For XI Grade

What is HTML

HTML = HyperText Markup Language
Is a set of special codes that you embed in text
to add formatting and linking information.
Based on Standard Generalized Markup
Language (SGML).
By convention, all HTML information begins
with an open angle bracket (<) and ends with
a closing angle bracket (>). It‟s call TAG.
For example, <html>. This tag tells an HTML
interpreter (browser) that the document is
written and marked up in standard HTML.


Struktur HTML

<HTML>
<HEAD>
……………..
</HEAD>
<BODY>
……………..
</BODY>
</HTML>


Aturan Penulisan dalam HTML

Penulisan tag harus diapit tanda „<„ dan
„>‟
Case insensitive (huruf besar ataupun
kecil tidak pengaruh)
Tag tunggal dan Tag berpasangan
Spasi / baris baru akan diabaikan oleh
browser
Dokumen html harus disimpan dalam
bentuk text murni dan berekstensi .html
atau .htm

Penjelasan Tag HTML

 Tag <html> merupakan tanda awal untuk
dokumen HTML.
 Tag </html> merupakan tanda akhir untuk
dokumen HTML.
 Tag <head>....</head> merupakan informasi
header untuk halaman HTML dan informasi ini tidak
akan ditampilkan pada browser
 Tag <body>.....</body> merupakan teks yang
akan ditampilkan pada browser
 Tag <title> ... </title>
Digunakan untuk memberikan keterangan / judul pada title
bar web browser. Letak penulisan tag <title> ... </title>
berada pada bagian <head> ... </head>


Contoh HTML

<html>
<head>
<title>Web Pertama</title>
</head>
<body>
Ini web pertamaku.
</body>
</html>

Tag <BR>

Tag <br>
Digunakan untuk membuat sebuah baris baru dan
tidak memiliki tag penutup. Penulisan isi web untuk
membuat baris baru dengan menggunakan enter,
baris baru tersebut akan diabaikan oleh browser.
<html>
<head>
</head>
<body>
Hyper Text
Markup Language<br>
Hyper Text <br>
Markup Language
</body>
</html>


Tag <HR>
Tag <hr>
Digunakan untuk menampilkan sebuah garis horisontal
sepanjang jendela browser dan tidak memiliki tag
penutup. Pada tag ini terdapat properti width untuk
mengatur panjang garis horisontal.
Contoh :
<html>
<head>
</head>
<body>
Garis pertama <br>
<hr>
Garis kedua <br>
<hr width=”100” >
</body>
</html>


Tag <body>

 Tag <body> … </body>
Digunakan untuk menampilkan teks pada
browser dan tag ini memiliki atribut sebagai
berikut :
TAG KETERANGAN
Untuk menentukan warna latar belakang
bgcolor
teks di browser
Untuk menentukan latar belakang teks di
background
browser berdasarkan file gambar
Untuk menentukan gambar latar belakang
bgproperties teks ikut tergulung atau tidak. Nilai atribut
ini adalah fixed
text Untukmenentukan warna dari teks


Contoh Tag Body

<html>
<head>
<title>Contoh atribut body</title>
<body background="Jellyfish.jpg" text="red">
<p>Test untuk atribut body</p>
</body>
</html>


Format Teks

 Teks dalam HTML tidak sesederhana yang
dibayangkan, banyak komponen yang
menyertainya agar teks ditampilkan sesuai
yang dikehendaki. HTML menyediakan
bermacam-macam elemen, diantaranya :
 PARAGRAF, untuk membuat suatu paragraf
 BLOCKQUOTE, untuk membuat suatu
kutipan teks
 DIVIDER, untuk mengelompokan teks
tertentu


Format PARAGRAF

 Suatu paragraf dalam dokumen HTML ditandai
dengan pasangan elemen <P>…</P>. Atribut
yang digunakan dalam paragraf ALIGN
mempunyai tiga nilai, yaitu :
 LEFT, untuk meratakan teks ke margin kiri
 RIGHT, untuk meratakan teks ke margin
kanan
 CENTER, untuk meratakan teks ke tengah
margin
 JUSTIFY, untuk meratakan teks ke kanan
dan kiri margin


Contoh Tag Paragraf

<HTML>
<HEAD>
<TITLE>ENTER, TAB DAN SPASI DALAM
HTML</TITLE>
</HEAD>
<BODY>
<P ALIGN=”LEFT”>Paragraf satu</P>
<P ALIGN=”CENTER”>Paragraf dua</P>
<P ALIGN=”RIGHT”>Paragraf tiga</P>
</BODY>
</HTML>


Blockquote

 Tag <BLOCKQUOTE> digunakan untuk menuliskan
suatu kutipan teks.
 Tag <BR> digunakan untuk membuat teks pada baris
berikutnya.
Contoh :
<html>
<head>
<title>membuat dokmen html</title>
</head>
<body bgcolor=lightgrey>
<p>baris pertama<br>baris kedua<br>baris ketiga<br>
<cite>membuat dokumen html</cite>
</body>
</html>


Heading dan HR
 Untuk menyatakan suatu heading, digunakan tag <Hx>
dimana x adalah nomor level heading dari 1 sampai 6.
pemakaian heading diawali dengan tag<Hx> dan diakhiri
dengan tag </Hx>
 Garis pemisah antara satu baris dengan baris lainnya,
digunakan elemen HR. Elemen ini akan membuat garis
horisontal sepanjang lebar jendela browser. Atribut yang
menyertai adalah :
 ALIGN, dapat diset dengan nilai LEFT, CENTER ,RIGHT dan
JUSTIFY
 WIDTH, untuk mengatur panjang garis horisontal yang dapat
ditentukan dengan nilai pixel atau persen.
 SIZE, untuk mengatur ketebalan garis horisontal mempunyai
nilai dalam satuan pixel.
 NOSHADE, menampilkan garis horisontal tanpa bayang-
bayang 3-D.
 COLOR, memberi warna pada garis horisontal.


Contoh Heading dan HR
<html>
<head>
<title>pemakaian tag HR</title>
</head>
<h1 align=center>Contoh Pemakaian Heading1</h1>
<br>
<h2 align=left>Program Penjurusan</h2>
<hr noshade>
XI IPA<br>
XI IPS<br>
XI Olim<br>
<hr width=50% size=6 align=left color=black>
</body></html>


Tag DIV
 Tag <DIV>…..</DIV> digunakan untuk membagi
dokumen HTML dalam hirarki yang terstruktur.
 Contoh :
<html>
<head><title>paragraf</title>
</head>
<div align=center>
<h1>header rata tengah</h1>
<img src="Jellyfish.jpg" width="15%"><br>
gambar berada diatas baris teks.<br>
<p align=right>baris teks ini rata kanan</p></div>
<div style="color:blue">
<h1>heading warna blue</h1>
<p>teks dalam paragraf berwarna blue</p>
</div></body></html>

Tag ADDRESS
 Tag ADDRESS digunakan untuk memberikan
informasi pembuat situs web, seperti nama, e-
mail, organisasi atau tanggal terakhir update
halaman web.
 Contoh :
<html><body>
<address>
<h5>Author:</h5>
Sri Mulyani<a
href="mailto:sri_mulyani15@yahoo.com"><br>
sri_mulyani15@yahoo.com</a><br>
</address>
</body></html>


Logical Formatting

Adalah jenis format yang menggolongkan teks
dari isi atau fungsi teks tersebut. Elemen yang
termasuk dalam kategori ini adalah :
 <EM>…</EM>
Digunakan untuk memberikan penekanan pada suatu
kata atau kalimat. Elemen ini biasanya dinyatakan
dalam teks dengan bentuk miring.
 <STRONG>…</STRONG>
Menyatakan penekanan yang kuat pada suatu kata atau
kalimat, biasanya ditampilkan dalam teks tebal.
 <CITE>…</CITE>
Digunakan untuk menampilkan suatu citation dan
menampilkan teks dalam bentuk miring.


Logical Formatting
 <DFN>…</DFN>
Digunakan untuk menandai suatu istilah yang untuk
pertama kalinya muncul dalam suatu paragraf. Teks
ditampilkan dalam bentuk miring.
 <CODE>…</CODE>
Digunakan untuk menampilkan suatu contoh kode
program secara logikal dan biasanya ditampilkan
dalam font fixed pitch atau monospaced.
 <SAMP>…</SAMP>
Merupakan elemen sampel untuk menyatakan
sekumpulan karakter-karakter literal, biasanya
ditampilkan dalam font monospaced.


Logical Formatting
 <KBD>…</KBD>
Merupakan elemen keyboard yang menyatakan teks yang
diketikan ditampilkan dalam font monospaced. Elemen ini
sering digunakan dalam pembuatan buku manual/petunjuk.
 <VAR>…</VAR>
Untuk menyatakan suatu nama variabel, biasanya dinyatakan
dengan bentuk miring.
 <ABBR>…</ABBR>
Untuk menyatakan bentuk singkatan misalnya www, http, url
dan lainnya.
 <ACRONYM>…</ACRONYM>
Untuk menyatakan bentuk sebuah akronim, misalnya radar,
WAC.
 <!……..>
Teks dalam elemen ini dinyatakan sebagai komentar dan tidak
ditampilkan dalam browser.


Contoh Logical Formatting
<html>
<head>
<title>Paragraf</title>
</head>
<h1>Pemakaian elemen teks</h1>
<pre>
<h2>
<DFN> untuk menandai suatu <DFN>Definisi</DFN>
<EM> untuk menandai suatu <EM>Penekanan</EM>
<CITE> untuk menandai suatu <CITE>Citation</CITE>
<CODE> untuk menandai suatu <CODE>Kode Program</CODE>
<KBD> untuk menandai suatu <KBD>Keyboard</KBD>
<SAMP> untuk menandai suatu <SAMP>Contoh</SAMP>
<STRONG> untuk menandai suatu <STRONG>Penekanan</STRONG>
<VAR> untuk menandai suatu <VAR>Variabel</VAR>
<ABBR> untuk menandai suatu <ABBR>Singkatan : www</ABBR>
<ACRONYM> untuk menandai suatu <ACRONYM>Akronim :
SMAGA</ACRONYM>
</h2>
</pre></body>
</html>


Physical Formatting

 Adalah suatu jenis format yang diberikan pada
teks tanpa tergantung jenis dari elemen dasar
teks tersebut.
 Elemen yang termasuk kategori ini adalah :
 <B>…</B> Untuk menebalkan teks
 <I>…</I> Untuk membuat teks tampil miring
 <U>…</U> Untuk membuat teks tampil bergaris-
bawah
 <STRIKE>…</STRIKE> Untuk membuat efek coretan
pada teks
 <BLINK>…</BLINK> Untuk membuat teks tampil
berkedip, hanya ditampilkan pada Netscape


Physical Formatting

 <S>…</S> Berfungsi sama dengan elemen
<STRIKE>
 <TT>…</TT> Untuk menampilkan teks
dalam font typewriter
 <BIG>…</BIG> Untuk memperbesar teks
 <SMALL>…</SMALL> Untuk memperkecil
teks
 <SUB>…</SUB> Untuk membuat teks
subscript
 <SUP>…</SUP> Untuk membuat teks
superscript


Physical Formatting
<html>
<head>
<title>Paragraf</title>
</head>
<h1>Pemakaian elemen teks</h1>
<pre>
Tag <B> ...</B> untuk <B>Menebalkan</B> Teks
Tag <I> ...</I> untuk <I>Memiringkan</I> Teks
Tag <U> ...</U> untuk <U>Menggaris bawah</U> Teks
Tag <S> ...</S> untuk <S>Memberi coretan</S> Teks
Tag <STRIKE> ...</STRIKE> untuk <STRIKE>Memberi coretan</STRIKE>
Teks
Tag <TT> ...</TT> untuk <TT>Font Typewriter</TT> Teks
Tag <Big> ...</Big> untuk <B>Memperbesar</BIG> Teks
Tag <SMALL> ...</SMALL> untuk <SMALL>Mengecilkan</SMALL> Teks
Tag <SUB> ...</SUB> Untuk subscript teks H<SUB> 2</SUB>0
Tag <SUP> ...</SUP> Untuk superscript teks E=mc<SUP>2</SUP>
</pre>
</body></html>


FLOATING OBJECT
 Gambar dan objek bisa ditampilkan sejajar
dengan teks atau menggantung diantara teks
 Contoh :
<html><head>
<title>Floating Objek</title>
</head>
<h3>Floating Objek</h3>
<IMG align="right" src="cita.jpg" width="20%">
SMA Negeri 3 Semarang merupakan salah satu rintisan
sekolah bertaraf internasional yang berlokasi di Jalan Pemuda
nomor 149 Semarang. Tahun ini SMA Negeri 3 Semarang atau
yang dikenal dengan SMAGA merayakan ulang tahunnya yang
ke-137.
<HR><BR>


Lanjutan Contoh Floating Object

<IMG align="left" src="sekolah.gif" width ="15%">
TIK adalah salah satu mata pelajaran yang mendukung
dalam pengembangan dan pembelajaran teknologi dan
komunikasi untuk kemanfaatan yang lebih baik. Kurikulum
yang digunakan
menggunakan KTSP yang sesuai dengan perkembangan
teknologi saat ini. Dan dengan memasukkan pendidikan
karakter bagi para siswa dan guru diharapkan mampu
membangun
generasi yang tetap berkarakter, memegang teguh nilai-
nilai budaya di tengah kemajuan zaman.
</body>
</html>


Tag Font face

 Digunakan untuk mengatur jenis font yang
dipakai untuk menampilkan teks pada
browser.
 Bentuk tag nya :
<font face=”tipe_font” size=”ukuran”
color=”warna”> … </font>
 Untuk ukuran font, nilainya antara 1 sampai 7
untuk ukuran normal.
 Tetapi dapat juga ditambahkan dengan tanda
+ atau - untuk mengatur besar dan kecil
ukuran huruf.


Contoh Font face
<html>
<head>
<title>Format Teks</title>
</head>
<body bgcolor=lightgreen text=brown>
<h1>Pemakaian Font</h1>
<h2> <font face="Times New Roman" size="+2">
Font Times New Roman</font><br>
<font face="Arial black" size="-2"> Font Arial
Black</font><br>
<font face="Aharoni"> Font Aharoni</font><br>
<font face="Arial Narrow" size="+3"> Font Arial
Narrow</font><br>
</h2> </body> </html>


Tag Pre
 Tag <pre> … </pre>
 Digunakan untuk menampilkan teks pada browser
seperti apa yang tertulis pada editor html.
 Contoh :
<html>
<head>
<title>Contoh tag pre</title> </head>
<body bgcolor="lightgreen" text="brown">
<pre>
ABCDEF
ABCDE
ABCD
ABC
AB
A
</pre></body>
</html>

List

 Informasi dapat disampaikan dengan mudah
jika ditampilkan dengan menggunakan daftar.
HTML menyediakan beberapa jenis daftar,
yaitu :
 Ordered List/Numbered List
 Unordered List/Bulleted List
 Menu List
 Directory List
 Definition List


Ordered List
 Adalah suatu daftar dimana item-item yang ada dalam
daftar memiliki nomor secara urut. Ordered List dimulai
dengan tag awal <OL> dan diakhiri dengan tag </OL>,
dan diantara kedua tag tersebut terdapat tag <LI> yang
menyatakan list item.
 Contoh :
<html>
<head>
<title>Contoh ordered list</title>
</head>
<ol type="1" start="4">
<li>Ubuntu
<li>SuSE
<li>Fedora Core
<li>Mandriva
</ol> </body></html>

Order List
Mengatur Atribut Order List

ATRIBUT FUNGSI
COMPACT Untuk menyatakan bahwa item dalam daftar pendek,
sehingga browser menampilkan dalam bentuk yang
lebih padat
TYPE = A Membuat daftar berurut dengan huruf besar ( A,B,C,..)
TYPE = a Membuat daftar berurut dengan huruf kecil (a,b,c,…)
TYPE = I Membuat daftar berurut dengan huruf romawi besar
(I,II,III,…)
TYPE = i Membuat daftar berurut dengan huruf romawi kecil
(i,ii,iii,…)
TYPE = 1 Default nilai daftar berurut (1,2,3,…)
START = n Menentukan nilai awal dari item dalam daftar, n =
adalah nilai awal


Contoh Order List
<html><head>
<title>Nested Ordered List</title>
</head><body bgcolor="lightgreen" text="brown">
<OL>
<LH><EM>Computer System and
Telecommunication</EM><BR><BR>
<LI>Hardware
<OL TYPE = A>
<LI>Input Device
<LI>CPU
<LI>Storage Device
<LI>Output Device
</OL>
<LI>Software
<OL TYPE = a>
<LI>Application
<LI>Language Programming
<LI>Utility


Contoh Order List
</OL>
<LI>Brainware
<OL TYPE = I>
<LI>Programmer
<LI>Administrator
<LI>User
</OL>
<LI>Network
<OL TYPE = i>
<LI>Wire
<LI>Wireless =
<OL START = 1>
<LI>Satelit
<LI>Mobile
</OL>
</OL></OL></body></html>

Unorder List
 Adalah daftar dimana urutan item tidak
diutamakan. Item-item tampil dalam
sembarang urutan. Setiap item dalam
Unordered List biasanya ditandai dengan
bulatan, kotak atau lingkaran.
 Penggunaan Unordered List diawali dengan tag
<UL> dan diakhiri dengan tag </UL>, dan
didalamnya ditandai dengan tag <LI>.
 Tambahan atribut pada tag <UL> :

ATRIBUT FUNGSI
TYPE = circle Membuat tanda lingkaran O untuk item
TYPE = square Membuat tanda kotak □ untuk item
TYPE = disc Membuat tanda cakram ● untuk item


Contoh Unorder List
<html><head>
<title>Nested Ordered List</title>
</head><body bgcolor="lightgreen" text="brown">
<UL>
<LH><EM>Computer System and
Telecommunication</EM><BR><BR>
<LI>Hardware
<OL TYPE = square>
<LI>Input Device
<LI>CPU
<LI>Storage Device
<LI>Output Device
</UL>
<LI>Software
<UL TYPE = circle>
<LI>Application
<LI>Language Programming
<LI>Utility
</UL>


Contoh Unorder List

<LI>Brainware
<UL TYPE = disc>
<LI>Programmer
<LI>Administrator
<LI>User
</UL>
<LI>Network
<UL TYPE = square>
<LI>Wire
<LI>Wireless =
<UL START = 1>
<LI>Satelit
<LI>Mobile
</UL>
</UL></UL></body>
</html>


Menu List

 Adalah suatu daftar item yang pendek yang tidak
disertai dengan nomor ataupun penanda item. Menu List
menggunakan tag awal <MENU> dan tag akhir
</MENU>, didalamnya menggunakan tag <LI>.
Browser secara otomatis akan mengidentifikasi setiap
item yang ada dalam menu list. Menu List biasanya
digunakan untuk menampilkan item-item yang
mempunyai link ke page lain. Untuk membuat link ini
digunakan tag <A> yang akan membuat link ke
halaman lain. Penggunaan tag <A> adalah <A HREF
“page.html”> link ke halaman page.html </A>.
 Contoh :


List
<html>
<head>
<title>Menu List</title>
</head>
<MENU>
<H1>Daftar Latihan HTML </H1><BR>
<LI><A HREF="body.html">Fungsi Dasar Body</A>
<LI><A HREF="paragraf.htm">Pengaturan Paragraf</A>
<LI><A HREF="hr.htm">Pemberian Garis Bawah</A>
<LI><A HREF="div.htm">Pembagian Tampilan</A>
<LI><A HREF="address.htm">Contoh Identifikasi </A>
<LI><A HREF="logicalformat.htm">Contoh Format Logika</A>
<LI><A HREF="fisikformat.htm">Contoh Format Fisik</A>
<LI><A HREF="objek.htm">Contoh Penampilan Objek</A>
<LI><A HREF="font2.htm">Contoh Penggunaan font</A>
</MENU>
</body>
</html>


Directory List

 Adalah daftar item yang kurang dari 24
karakter (seperti file direktori UNIX atau DOS
yang menggunakan parameter / w). Direktori
List menggunakan tag awal <DIR> dan tag
akhir </DIR>. Penggunaan tag <LI> juga
diperlukan.
 Contoh :


Contoh Directory List
<html>
<head>
<title>Directory List</title>
</head>
<DIR>
<H1>Warna Pelangi : </H1><BR>
<LI>Merah
<LI>Jingga
<LI>Kuning
<LI>Hijau
<LI>Biru
<LI>Nila
<LI>Ungu
</DIR>
</body>
</html>


Definision List
 Adalah suatu jenis daftar khusus yang berbeda
jauh dengan daftar-daftar sebelumnya.
Definition List digunakan untuk mendefinisikan
atau menjelaskan istilah-istilah yang disebut
juga Glossary List (daftar istilah).
 Definition List dinyatakan dengan tag awal
<DL> dan tag akhir <M/DL>. Dalam tag
tersebut ada dua bagian, yaitu:
 Istilah yang akan didefinisikan, dinyatakan
dengan tag tunggal <DT> atau Definition Term
 Definisi dari istilah tersebut dinyatakan dengan
tag tunggal <DD> atau Definition Data


Tag Definition List
 Tag <dl> … </dl> / Definition List
 Adalah tag yang memiliki keterangan untuk
tiap itemnya. Untuk tiap item pada definition
list menggunakan tag <dt> sedangkan untuk
keterangan dari tiap item menggunakan tag
<dd>
 Contoh:
<html>
<head>
<title>Definition ist</title>
</head>
<H3>Istilah dalam Internet </H3>

Contoh Definition List
<DL>
<DT>Hacker
<DD>Hacker adalah orang yang mempelajari,
mencoba masuk menerobos jaringan sistem komputer
dengan tujuan untuk keuntungan atau karena menjawab
tantangan.
<DT>Download
<DD>Download merupakan kegiatan mengambil atau
mengunduh file dari jaringan internet ke unit
penyimpanan lokal komputer kita misalnya mengambil
gambar dari jarringan internet ke harddisk lokal.
<DT>Surfing
<DD>Surfing adalah kegiatan menjelajahi dunia
internet.
</DL>
</body>
</html>

Tag IMG

Tag ini digunakan untuk menampilkan gambar
pada browser sehingga dapat menambah
keindahan dari halaman web. Tag <img>
memiliki atribut seperti berikut ini :
ATRIBUT KETERANGAN

Align Menetukan posisi gambar (left,right,center)
Width Menentukan ukuran lebar dari gambar
Height Menentukan ukuran tinggi dari gambar

Alt Menampilkan teks jika gambar tidak muncul
/ tampil
Src Menunjukkan file gambar


Contoh IMG

<html>
<head>
<title>Contoh gambar</title>
</head>
<body>
<img src="sekolah.gif" alt="visualisasi
sekolah" width="30%">
</body>
</html>


TABLE
 Ada kalanya dalam pembuatan web, informasi yang
ditampilkan dalam bentuk tabel. Dan dengan
menggunakan tabel, penyajian informasi akan jauh lebih
mengena dan mudah.
 Tag untuk membuat tabel terdiri dari :
 <table> … </table>
Merupakan tag pembuka / utama pendefinisian tabel
 <tr> … </tr>
Merupakan tag pembuat baris
 <td> … </td>
Merupakan tag pembuat kolom
 <th> … </th>
Merupakan tag pembuat judul kolom
 <caption> … </caption>
Merupakan tag pembuat judul tabel


Atribut Tag Table
Tag <table> memiliki atribut :
ATRIBUT KETERANGAN
Align Meratakan tabel secara mendatar, nilai dari atribut ini :
Left, Right, Center. Secara default, perataan dari tabel
adalah Left
Bgcolor Memberikan warna background pada tabel
Background Memberikan gambar latar belakan pada tabel
Border Menunjukan lebarnya batas dalam satuan pixel
Bordercolor Menentukan warna bingkai dari tabel
Cellpadding Menentukan luas yang tak terlihat diantara isi sel dan
aktual dinding sel dalam satuan pixel

Cellspacing Menentukan luas yang aktual diantara dua sel dalam
satuan pixel

Width Menentukan lebar keseluruhan tabel dalam satuan pixel
Heigth Menentukan tinggi keseluruhan tabel dalam satuan pixel


TR

Tag TR mempunyai atribut:
ATRIBUT KETERANGAN
Align Meratakan isi baris / row secara
mendatar, nilai dari atribut ini : Left,
Right, Center. Secara default,
perataan dari tabel adalah Left
Bgcolor Memberikan warna background dari
baris
Valign Meratakan secara vertikal isi dari
baris, nilai dari atribut ini : Top,
Middle, Bottom.


TD
Tag TD mempunyai atribut:
ATRIBUT KETERANGAN
Align Meratakan isi sel secara mendatar, nilai dari atribut ini :
Left, Center, Right. Nilai default dari atribut ini adalah Left

Valign Meratakan isi sel secara vertikal, nilai dari atribut ini : Top,
Middle, Bottom. Nilai default dari atribut ini adalah Middle

Bgcolor Memberikan warna background pada sel
Background Memberikan gambar latar belakan pada sel
Colspan Menentukan jumlah kolom yang digabung
Rowspan Menentukan jumlah baris yang digabung
Nowrap Menentukan teks agar tetap satu baris
Border Menentukan tebal bingkai sel
Bordercolor Menentukan warna bingkai sel
Width Menentukan lebar sel dalam satuan pixel
Heigth Menentukan tinggi sel dalam satuan pixel


Contoh Table
<html>
<head><title>Tag Tabel</title></head>
<body>
<table align="center" border="1">
<caption>Contoh Tabel</caption>
<tr>
<th align="right">Judul 1</th>
<th align="left">Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>


Contoh Table
<td width="300" height="50" align="center">isi 1</td>
<td width="300" height="50" align="right">isi 2</td>
<td width="300" height="50">isi 3</td>
</tr>
<tr>
<td width="300" height="50" valign="top">isi 4</td>
<td width="300" height="50" valign="bottom">isi
5</td>
<td width="300" height="50" >isi 6</td> </tr>
<tr>
<td>isi 7</td>
<td colspan="2">isi 8</td>
</tr>
<tr>


Contoh Table
<td rowspan="2">isi 9</td>
<td>isi 10</td>
<td>isi 11</td>
</tr>
<tr>
<td>isi 12</td>
<td>isi 13</td>
</tr>
</table>
</body>
</html>


Link

 Untuk menghubungkan sebuah halaman web dengan
halaman yang lain, dimana tag ini merupakan
kemampuan yang demikian besar dari web, digunakan
tag <a> atau anchor. Bentuk dari tag <a> ini adalah :
 <a href=”url”> … </a>
 Atribut href digunakan untuk menghubungkan sebuah
halaman web ke halaman yang lain. Atau sebagai link
antar dokumen web
 <a name=”bookmark”> … </a>
 Atribut name digunakan untuk menghubungkan bagian
halaman web ke bagian lainnya yang masih berada
dalam 1 halaman web.
 Contoh :


Contoh Link
<html>
<head><title>contoh link / anchor</title></head>
<body>
<h3>Contoh Link dan Name</h3>
<a href="paragraf.htm">Contoh tag
paragraf</a>
<br>
<h4>Bab 1</h4>
Ini bab 1, isinya pengantar<br>
latar belakang masalah, perumusan
masalah<br>
batasan masalah, sistematika penulisan<br>
<a href="#bab4">ke bab 4</a>


Contoh Link
<h4>Bab 2</h4>
Ini bab 2, isinya dasar-dasar<br>
teori yang digunakan untuk meneliti<br>
<h4>Bab 3</h3>
Ini bab 3, isinya pengantar obyek<br>
penelitian jika konsentrasi pembuatan adalah<br>
perancangan sistem<br> Jika konsentrasi
pembuatan<br>
adalah pembuatan software, isinya adalah<br>
analisa kebutuhan user<br>
<a name=bab4><h4>Bab 4</h4></a>
Ini bab 4, isinya adalah perancangan sistem baru<br>
</body>
</html>


Frame

 Frame merupakan fasilitas tambahan untuk
html yang memungkinkan dalam satu browser
menampilkan beberapa halaman web
sekaligus. Tag untuk membuat frame terdiri
dari :
 <frameset> … </frameset>
 Merupakan tag awal pembentukan frame
 <frame> … </frame>
 Merupakan tag untuk mengisi frame


Frameset

Tag <frameset> memiliki atribut :
ATRIBUT KETERANGAN
Cols Untuk membagi bidang menjadi beberapa
kolom, satuannya dapat berupa persen (%),
pixel dan *
Rows Untuk membagi bidang menjadi beberapa
baris, satuannya dapat berupa persen (%),
pixel dan *
Border Untuk menentukan tebal batas antar frame
Bordercol Untuk menentukan warna pembatas antar
or frame
Framebor Untuk mengatur muncul atau tidaknya
der pembatas antar frame dengan nilai atribut :
yes atau no

Frame
Tag Frame mempunyai atribut:
ATRIBUT KETERANGAN
Name Untuk memberikan nama frame
Src Merupakan url yang akan digunakan untuk
menampilkan halaman web / gambar pada frame
Marginwidth Menentukan lebar margin pada frame
Marginheigth Menentukan tinggi margin pada frame
Scrolling Menentukan ada atau tidaknya scroll bar pada frame,
nilai atributnya : yes
Bordercolor Menentukan warna pada border frame
Noresize Berfungsi agar border pada frame tidak dapat
berubah-ubah
Framespacing Menetukan jarak antar sel frame

Frameborder Menentukan muncul atau tidaknya pembatas antar
frame dengan nilai atribut yes atau no.


Contoh Frame

<frameset cols="40%,60%">
<frame src="cth15.htm" name="kiri">
<frame src="cth14.htm" name="kanan"
</frameset>


Latihan Praktik

Buatlah halaman web personal yang
menampilkan tentang bio data diri dengan
komposisi sebagai berikut:
1. Halaman utama berupa perkenalan
2. Halaman kedua berisi hoby dan kegiatan
sehari-hari
3. Halaman ketiga berisi kontak dan informasi


Html for xi grade

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (6)

Similaire à Html for xi grade

Similaire à Html for xi grade (20)

Html for xi grade