Di dalam sebuah pemograman web ada yang di sebut dengan
HTML atau tag command setiap dokumen di awali dengan <HTML> dan di akhiri dengan </HTML>
HEAD (HEADER) merupakan tanda pengenal di dalam bagian ini biasanya di muat tag TITLE yang menampilkan judul pada halaman browser.
TITLE seperti yang sudah di jelaskan di atas TITLE adalah judul contoh <HTML> olahraga</HTML>
BODY merupakan tag yang menampilkan body contoh : menampilkan text, image,color, background dan semua yang di tampilkan di dalam web.
Catatan : semua elemen tag di awali dengan <....> dan di akhiri </....>
Contoh praktikum dengan menggunkan notepad++ :
Body
Document body digunakan untuk menampilkan text,image link dan semua yang akan di tampilkan pada web page.
Document body digunakan untuk menampilkan text,image link dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>welcome to
html</title>
<body
bgcolor="pink">
</head>
<p>document html yang
pertama</p>
</body>
</html>
|
<TITLE > welcome to html</HTML> adalah sebuah judul yang di tampilkan pada browser.
kata <P> nya itu sendiri itu merupakan sebuah paragraf.
Seperti yang kita lihat :
<P> document html yang pertama</p> .
<P> document html yang pertama</p> .
Heading
HEADING adalah block level elemen yang berfungsi untuk membuat judul dan heading itu ada beberapa ukuran dari H1 sampai H6.
<html>
<head>
<title>heading
element</title>
<h1>heading
one</h1>
<h2>heading
two</h2>
<h3>heading
three</h3>
<h4>heading
four</h5>
<h5>heading
five</h5>
<h6>heading six</6>
</body>
</html>
|
Contoh hasil : H1 H2 H3 H4 H5 H6
Breakline
BREAKLINE berfungsi sebagai paragraf baru atau memulai baris baru di dalam sebuah dokumen .
<html>
<head>
<title>break line</title>
</head>
<body>
<h3>buliding dynamic web aplication</h3>
<P></html>
if you're building a dynamic web aplication
,<br>
start by setting up an application server and
<br>
</p>
</body>
Contoh hasil:
if you're building a dynamic web aplication
start by setting up an application server and
Karakter
<html>
<head><title>latihan
karakter khusus</title>
</head>
<body>
"
<BR>
&
<BR>
<
<BR>
>
<BR>
©
<BR>
®
<BR>
&plismn;
<BR>
Æ
<BR>
æ
<BR>
É
<BR>
é
<BR>
</body>
</html>
Contoh hasil:
"
&
<
>
©
®
& plismn;
Æ
æ
É
&
<
>
©
®
& plismn;
Æ
æ
É
Tag formatting text
<html>
<head><title>latihan
tag untuk memformat text</TITLE>
</head>
<body>
text normal<BR>
<SMALL>tag
small</SMALL>
<br>
<i>text
miring</i>
<br>
<big>tag
big</big>
<br>
<b>text
tebal</b>
<br>
<u>text bergaris
bawah</u>
<br>
contoh superscript :
x<sup>2</sup>
<br>
contoh subscript :
h<sub>2</sub>o
<br>
<strike> ini tex yang
tercoret</strike>
<br>
<font size=5
face=verdana>
contoh menggunakan tag font
</font>
</body>
</html>
Screenshot di atas adalah latihan untuk mempormat text seperti yang kita lihat : ada text yang tercetak normal, besar ,miring dan lain sebagainya.
Contoh hasil : normal besar miring
Unordered list
UNORDERED LIST (bullet) berfungsi untuk mengurutkan daftar menggunakan simbol-simbol atau karakter tertentu .
<html>
<head>
<title>unordered list</title>
</head>
<body>
<p>shedule for html course</p>
<ul>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</ul>
</body>
</html>
contoh hasil:
nama mahasiwa
- ridwan
- nina sulasih
- arga
- ridwan fahreja
tag
|
atribute
|
value
|
descriftion
|
<UL>
|
TYPE
|
SQUARE
DISC
CIRCLE
|
Bullet kotak
Bullet titik
Bullet lingkaran
|
Ordered list
ORDERED LIST merupakan daftar yang memliki kalimat/item yang terurut atau karakter yang berurutan yang menggunakan no atau huruf angka romawi
<html>
<head>
<title>ordered list</title>
</head>
<body>
<p>shedule for html course</p>
<ol start="1" type="l">
<li>sunday</li>
<ol type="a">
<li>introduction to html</li>
<li>creating list</li>
</ol>
<li>monday</li>
<ol type="A">
<li>creating table</li>
<li>preparing image</li>
</ol>
<li>tuesday</li>
<ol type="l">
<li>creating list</li>
<li>preparing website</li>
</ol>
<li>wednesday</li>
</ol>
</body>
</html>
shedule for html course
- sunday
- introduction to html
- creating list
- monday
- creating table
- preparing image
- tuesday
- creating list
- preparing website
- wednesday
Tabel type ordered list:
Tag
|
Attribut
|
Value
|
Description
|
<OL>
|
TYPE
|
I
i
A
A
|
Upper roman
Lower roman
Upercase
LOwercase
|
<OL>
|
START
|
N
|
Begin number
|
Font
FONT (huruf) berfungsi untuk menentukan format sebuah tampilan font document seperti : ukuran ,color,text maupun paragraf.
<html>
<head>
<title>formating font</title>
</head>
<font color="#9966ff"
size="5">
setting up web server
</font>
</p>
<font face ="courier new courier
,mono">
to run web application,you need a web server .
a web server is sofware that servers file in reponse
to requests from web browsers.
a web server is sometimes called an http server .
common web servers include iis,netcape enterprise
sever, iplanet web server, and apache http server.
</font>
<body>
</body>
</html>
Seperti contoh di atas :
<font color="yellow" size="5"> yang artinya font pada baris kelima adalah berwarna yellow /kuning
tabel attribut font:
Attribut
|
Desscription
|
Color
|
Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000-#ffffff)
|
Size
|
Untuk menentukan ukuran font 1-7
|
Face
|
Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dana akan di baca mulai dari yang paling kiri.
|
color
merupakan attribut yang bisa anda tambahkan pada beberapa element seperti body,font,link, dan yang lainnya .color di bagi dalam tiga kategori warna primer yaitu red,greenh dan blue .masing-masing color di definsikan dalam dua digit hexadecimal number .
tabel color:
hexadecimal
|
color
|
#FF0000
|
Red
|
#00FF00
|
Green
|
#0000FF
|
Blue
|
#000000
|
Black
|
#FFFFFF
|
White
|
Alignment
Align attribute di gunakan untuk menentukan perataan obejct dalam dokument HTML baik berupa text,object,image,paragraph,division dan lain-lain.
tabel value Alignment:
Value
|
Description
|
left
|
Rata kiri
|
right
|
Rata kanan
|
center
|
Rata tengah
|
justify
|
Rata kanan kiri
|
Format text
Physical formatting
tabel physical formatting:
Tag
|
Descriftion
| |
<B>...</B>
|
Bold text
| |
<I>...</I>
|
Italic text
| |
<U...</U>
|
Undeline text
| |
<BIG>...</BIG>
|
Untik ukuran yang lebih besar dari normal
| |
<SMALL>...
</SMALL>
|
Untuk ukuran yang lebih kecil dari normal
| |
<STRIKE>...
</STRIKE>
|
Untuk memberi garis di tengah text
| |
<SUP>...</SUP>
|
Superscript text
| |
<SUB>...</SUB>
|
Subscript text
| |
<CENTER>...
</CENTER>
|
Center document
|
Logical formatting
tabel logical formatting:
Tag
|
Description
|
<EM>...</EM>
|
Text miring /<I>
|
<STRONG>...
</STRONG>
|
Text tebal/ <B>
|
<DEL>...</DEL
|
Mencoret text / <STRIKE>
|
<INS>...</INS>
|
Underline text / <U>
|
Definition list
DEFINITION LIST adalah tag istilah yang nantinya akan di definisikan
<dl>
<dt>html
<dd>hypertext markup langguage is not langguage
programming</dd>
</dt>
<dt>http
<dd>hypertext transfer protocol is tpc/ip
protocol</dd>
</dt>
<dt>internet
<dd>a network of network</dd>
</dt>
<dt>tpc/ip
<dd>internet protocol</dd>
</dt>
</dl>
</body>
</html>