Modul 1

MODUL 1
HTML
Tujuan:
Mampu menjelaskan pengertian HTML,Struktur Dasar, Tag Tag HTML, dan mampu
membuat aplikasi dengan menggunakan tag HTML
Tugas Pendahuluan
1. Apakah yang anda ketahui tentang World Wide Web WWW! "
#. Sebutkan tiga komponen pokok yang menjadi tulang punggung keberadaan sebuah $eb
dan jelaskan masing%masing komponen tersebut"
&. Apa yang anda ketahui tentang '(L 'ni)orm (esour*e Lo*ator!"
+. Apa yang anda ketahui tentang HTT, dan sebutkan ma*amma*am proto*ol $eb"
-. Dalam struktur HTML dokumen terdapat tiga tag penting yaitu HTML, H.AD dan
/0D1. Apa yang dimaksud dari tiga tag tersebut dan bagaimana *ara penggunaannya"
1. Teori
1.1. Pengertian HTML
HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah )ile
te2t murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai
$eb page. 3ile%)ile HTML ini berisi instruksi%instruksi yang kemudian diterjemahkan
oleh bro$ser yang ada dikomputer *lient user! sehingga isi in)ormasinya dapat
ditampilkan se*ara 4isual dikomputer pengguna user!. HTML dikenal sebagai standar
bahasa yang digunakan untuk menampilkan dokumen $eb. 1ang bisa dilakukan dengan
HTML yaitu 5
1. Mengontrol tampilan dari $eb page dan *ontentnya
#. Mempublikasikan dokumen se*ara online sehingga bisa diakses dari seluruh dunia.
&. Membuat online )orm yang bisa digunakan untuk menangani penda)taran, transaksi
se*ara online.
+. Menambahkan obyek%obyek seperti image, audio, 4ideo dan juga ja4a applet dalam
dokumen HTML.
1.2. Struktur Dasar HTML
.lemen yang dibutuhkan untuk membuat suatu dokumen HTML, dinyatakan dengan tag%
tag sebagai berikut5
1.2.1. HTML
Setiap dokumen HTML selalu dia$ali dan ditutup dengan tag HTML.
1.2.2. HEAD
/agian head biasanya berisikan tag T6TL., meta tag dan semua s*ript ja4a atau yang lain
yang akan dieksekusi di bro$ser. Dibagian inilah kita memberikan bookmark untuk
keperluan pen*arian sear*hing! dengan key$ord.
1.2.3. BODY
/agian body digunakan untuk emnampilkan te2t, image link dan semua yang akan
ditampilkan pada $eb page. Semua umum dokumen $eb dibagi menjadi dua se*tion
bagian!, yaitu se*tion head dan se*tion body. Sehingga setiap dokumen html harus
mempunyai pola dasar sebagai berikut5
1.3. Tag Tag HTML
1. Warna latar belakang
Menggunakan $arna
<body bgcolor=#nnnnnn> . . . <body>
#. Menggunakan gambar
<body bac!ground="na#a$%&le$ga#bar'> . . . <body>
3. Heading
'ntuk judul atau sub judul dalam dokumen HTML
<h1 (al&gn='le%)'*'cen)er'*'r&gh)'+> . . . <h1>
<h, (al&gn='le%)'*'cen)er'*'r&gh)'+> . . . <h,>
<h- (al&gn='le%)'*'cen)er'*'r&gh)'+> . . . <h->
+. ,aragraph
'ntuk mengatur perataannya kiri, tengah, kanan!5
<. (al&gn='le%)'*'cen)er'*'r&gh)'+> . . . <.>
5. preformatted text
'ntuk menampilkan teks sama seperti yang diketikkan dalam dokumen <.re> . . .
<.re>
6. blockquote
'ntuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML5
< blockquote> . . . < blockquote>
6. !reak
'ntuk menulis teks pada baris berikutnya5 
". #ont
'kuran )ont
<%on) s&/e="n'> . . . <%on)>
7enis )ont
<%on) s&/e="n' %ace="jen&s$%on)'> . . . <%on)>
Warna )ont
<%on) s&/e="n' %ace="jen&s$%on)' color="0arna'> . . . <%on)>
$. 'ntuk format dokumen
Bold:
 . . .
Emphasized:
 . . . 
Italic:
 . . . 
Superscript:
 . . .
Subscripted:
 . . . 
Struck trough:
<del> . . . </del>
8ambar
'ntukMemuat gambar ke dalam halaman Web
<&#g src='U1L'*'na#e' he&gh)='n' 0&d)h='n'
al&gn=')o.'*'cen)er'*'bo))o#'+ >
%. 'ntuk &ypertext link
3ormat5
<a hre%='address' > . . . <a>
Link ke dokumen lain
<a hre%='na#a$do!u#en' > . . . <a>
Link ke bagian tertentu dalamdokumen yang sama
<a hre%='#)arge)' > . . . <a>
<a hre%=')arge)' > . . . <a>
Link ke alamat '(L atau WebSite
<a hre%='ala#a)$U1L' > . . . <a>
Link ke alamat .mail
<a hre%='#a&l)o:ala#a)$e#a&l' > . . . <a>
Link 3ile yang akan dido$nload
<a hre%='na#a$%&le' > . . . <a>
19. Dan masih banyak lagi:.
2. Praktikum
;etikkan koding koding diba$ah ini dan lihat hasilnya.
Tag break <b=
Tag ,aragra) <p=
Tag paragraph <p= dengan menyertakan tag Align <AL68>=
Tag /8?0L0( dan tag /A?;8(0'>D
Tag Heading <H=
Tag blo*k@uote <@=
Tag membuat hiperlink <a hre)=
Tag gambar <img=
3. Tugas
/uatlah halaman $eb sebagai homepage pribadi, yang berisi tentang data pribadi
misalkan nama, >(,, alamat rumah, tempat A tanggal lahir, ri$ayat pendidikan,
email, hobby, karya%karya penelitianB program yang pernah dibuat, pengalaman kerja,
kesan pertama masuk 'ni4ersitas Trunojoyo, *ita*ita, pengalaman sukaduka, bahasa
program yang dikuasai, programprogram komputer so)t$are! yang pernah di*oba,
system operasi yang dikuasai dan lain%lain. 8unakan semua tag%tag yang telah
dipelajari diatas kalau perlu *ari re)erensi yang lebih lengkap lagi.

Modul 1

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

Modul 1

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 1

Anda mungkin juga menyukai