HTML Tingkat Dasar

HTML TINGKAT DASAR
BY : WIDIARTI R.M,S.T,M.Kom
HTML
( HIPERTEXT MARCKURP LANGUAGE )
HTML ( Hipertext Marckurp Language )
merupakan kode perintah yang memiliki
tag tag tertentu yang dirangkai atau
disusun berdasarkan fungsinya sehingga
menghasilakan informasi.
Informasi yang dibuat didalam lembaran

web terdiri dari objeck objeck data yang
digabungkan dalam kode kode HTML.
1. Standart Penulisan HTML
< html > menyatakan format data

< head > bagian kepala atau awal dari
penulisan
< title > halaman utama
< /title > menyatakan judul dan pemisahan
dihalaman web
< /head > menyatakan penutup bagian kepala
atau atas.
< body > isi informasi yang akan disajikan.
< /body > penutup script body
< /html > penutup scrip atau program html
Contoh Program :
<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body> Hello World !........
</body>
</html>
Ketikkan pada Notepad
Simpan dilocaldisck c:/apache2triad/htdocs/kemudian

buat folder dengan nama sebagai contoh :
www.web1.com/ kemudian simpan dengan nama file :
latihan.html
Jalankan pada browser internet ( mozilla ) dengan
mengetikkan : localhost/www.web1.com/latihan.html
Hasil tampilan terlihat pada gambar di
bawah ini :
2. Heading
Heading adalah : sekumpulan kata yang

menjadi judul atau sub judul dalam suatu
dokumen HTML.
Heading berbeda dengan tag < title >
yang tidak bisa muncul dalam halaman
web.
HTML menyediakan enam tingkatan
heading. Heading level 1 biasanya untuk
judul utama.
Contoh program :
< html >
< head >
< title > Heading < /title >
< /head >
< body >
< H1 > Heading Level 1 < /H1 >
< /body >
< /html >
3. Paragraf
Untuk membuat paragraf digunakan tag .
Setelah tag Anda bisa menulis isi paragraf
dan dan paragraf tersebut harus diakhiri dengan
tag penutup .
Anda bisa mengatur posisi paragraf dengan

menggunakan atribut ALIGN. Atribut ALIGN
diikuti dengan posisi yang diinginkan. Left untuk
meratakan paragraf di kiri, center untuk
meratakan paragraf di posisi tengah horizontal
dan right untuk meratakan paragraf di kanan.
Contoh program :
<html>
<head>
<title>Paragraf </title>
</head>
<body>

Beberapa tahun yang lalu, seorang
hartawan meninggal dunia sedangkan ia
tidak memiliki ahli waris. Kepada
pengacaranya, ia meninggalkan dua buah
surat yang disegel. Yang sebuah berisi
permintaan agar jenazahnya dikuburkan
pada jam empat dini hari. Surat kedua
belum diketahui isinya karena
disampulnya tertulis pesan agar dibuka
seusai pemakaman jenazah.

Sesuai dengan wasiat, jenazah itu
dikebumikan pada pukul empat dini hari.
Karena tidak lazimnya waktu pemakaman
pada jam tersebut, yang ikut mengantar
jenazahnya hanya empat orang
kawannya yang paling setia.

Seusai pemakaman, surat wasiat yang kedua
dibuka. Betapa terkejutnya pengacara
ketika membaca isinya, ialah wasiat bahwa
seluruh harta warisan ( yang bernilai lebih dari
800.000 pound) dibagi rata kepada orang-orang
yang mengantarkan jenazahnya ke
pemakaman. Dengan demikian, yang berhak
memperoleh harta yang banyak itu hanya empat
orang, sebagai imbalan bagi kesetiaan mereka.
Sumber Humor, kisah dan pepatah.

</body>
</html>
4. Blockquote
Perintah tag <BLOCKQUOTE> digunakan

untuk menulis kutipan teks. Dengan
perintah < BLOCKQUOTE> browser akan
menampilkan teks menjorok kedalam
(mengindentasi teks) atau menampilkan
teks dalam bentuk huruf miring.
Contoh Program :
<html>
<head>
<title>BLOCKQUOTE </title>
</head>
<body><h3> Sesuatu yang tidak perlu
dicoba </h3>
<blockquote>
Sesuatu yang kelihatan
mengasyikan tapi sebenarnya
lebih banyak menambah masalah pada
remaja adalah narkoba, seks, alkohol
dan merokok. Jangan sekali-kali
mencoba jika tidak ingin membuat
masalah baru.
</blockquote>
</body>
</html>
5. Preformatted Text
Preformatted text (PRE) digunakan untuk

menampilkan teks sama seperti yang anda
ketikkan dalam dokumen HTML. Browser
akan menampilkan teks tersebut dalam
font monospaced, yaitu seperti terlihat
dalam teks yang ditampilkan oleh aplikasi
berbasiskan teks ( misalnya telnet ).
Contoh Program :
<html>
<head>
<title> Preformatted Teks </title>
</head>
<body>
<pre>
www.arc.itb.ac.id
Tulisan diatas menggunakan spasi dan ini
adalah baris baru
daftar situs menarik di itb
-------------------------------
Radiokampus.ee.itb.ac.id
www.arc.itb.ac.id
</pre>
</body>
</html>
6. BR
Tag line break ( BR ) digunakan untuk

menulis teks pada baris berikutnya.
Tag membuat baris tanpa

memberi baris kosong.
Contoh Program :
<html>
<head>
<title> Line Break </title>
</head>
<body>
 Banyak cara yang dapat
digunakan untuk melakukan instalasi
FreeBSD. Namun ada tiga cara yang
paling sering dilakukan, yaitu :
 Instalasi melalui FTP
 Instalasi melalui CDROM
 Instalasi melalui partisi
DOS 
</body>
</html>
7. Font
Untuk mengatur huruf dokumen HTML

digunakan tag .
Tag memiliki beberapa atribut

untuk mengatur ukuran huruf , jenis huruf
yang digunakan dan warna huruf.
7.1. Ukuran Font
Atribut size digunakan untuk mengatur

ukuran font.
Nilai font dimulai dengan nilai 1 untuk

ukuran huruf terkecil dan nilai 7 untuk
ukuran paling besar.
Contoh Program :
<html>
<head>
<title> Ukuran Font </title>
</head>
<body>
 Ukuran Font 1 
</body>
</html>
7.2. Jenis Font
Atribut FACE digunakan untuk mengatur

jenis huruf yang diinginkan. Atribut FACE
harus diisi dengan string jenis font seperti
Arial, Times New Roman, Verdana, dan
sebagainya.
Contoh Program :
<html>
<head>
<title> Ukuran Font </title>
</head>
<body>

 Arial, contoh AC Milan 
 Verdana, contoh Persebaya

 Tahoma, contoh Indonesia

</body>
</html>
7.3. Warna Font
Atribut color digunakan untuk mengatur

warna font yang diinginkan.
Untuk memberi nilai pada atribut color ada
dua cara yaitu :
1. Cara pertama dengan menyebutkan nama

warna seperti red, green, dan blue.
2. Sedangkan cara kedua adalah dengan
menggunakan nilai RGB ( Red Green Blue )
dari suatu warna, misalnya FF0000 untuk
red, 00FF00 untuk green dan 0000FF untuk
blue.
Contoh Program :
<html>
<head>
<title> Warna Font </title>
</head>
<body>

 PSM Makassar
 PSM Makassar kan 
 Ini baru Persebaya
</body>
</html>
8. Link
Perintah anchor (A) digunakan untuk

membuat suatu link. Untuk membuat link
ke dokumen HTML lain digunakan perintah
<A HREF = nama_dokumen> Teks pada
browser </A>
Anda juga bisa membuat link dalam
sebuah dokumen HTML. Untuk itu perlu
disediakan nama anchor lokasi tujuan dari
link tersebut. Nama anchor dibuat dengan
menambahkan atribut NAME pada tag
<A> Misalnya <A NAME = abbiati>
</A>. Cara melakukan link kebagian
tersebut adalah <A HREF
=#nama_anchor>teks pada browser
</A>
Contoh Program :
<html>
<head>
<title> Link </title>
</head>
<body>
<a name=lengkap> Pemain-pemain AC
Milan menurut abjad </a>
<blockquote>
 Abbiati, <a href =contoh1.html>info
lengkap </a>
Ayala
Ambrosini
Albertini
Boban

<a href=contoh1.html> kalo mau tahu lagi
klik disini </a>
</blockquote>
<a name=abbiati>Abbiati</a>
<blockquote>
Kiper ketiga timnas italia runner Up Euro 2000
 Kiper utama U-21 juara Piala Eropa U-21
 Kiper utama AC Milan juara Seri A 1998-
1999
</blockquote>
<a href=link.html>kembali keatas</a>
</body>
</html>
Contoh Program :
<html>
<head>
<title>Link Tujuan </title>
</head>
<body>
 Maaf, hanya sedikit 
 Chamot
 Dida
 Shevchenko
 <a href=link.html>kembali</a>
</body>
</html>
TERIMA
KASIH
!.....

HTML Tingkat Dasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Tingkat Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML TINGKAT DASAR

Informasi yang dibuat didalam lembaran

< html > menyatakan format data

Simpan dilocaldisck c:/apache2triad/htdocs/kemudian

Heading adalah : sekumpulan kata yang

Anda bisa mengatur posisi paragraf dengan

Perintah tag <BLOCKQUOTE> digunakan

Preformatted text (PRE) digunakan untuk

Tag line break ( BR ) digunakan untuk

Tag < BR > membuat baris tanpa

Untuk mengatur huruf dokumen HTML

Tag <FONT> memiliki beberapa atribut

Atribut size digunakan untuk mengatur

Nilai font dimulai dengan nilai 1 untuk

Atribut FACE digunakan untuk mengatur

Atribut color digunakan untuk mengatur

1. Cara pertama dengan menyebutkan nama

Perintah anchor (A) digunakan untuk

Anda mungkin juga menyukai