W182100012 –
PEMROGRAMAN
WEB
DASAR-DASAR HTML & FORMAT PADA
DOKUMEN HTML
Abstrak Sub-CPMK
Suatu proses kegiatan untuk Sub-CPMK 1
melakukan perencanaan, Mampu memahami peran manajemen
pengorganiasian, pengarahan proyek, prinsip-prinsip dan filosofi manajemen
dan pengendalian atas sumber proyek, serta faktor keberhasilan dan
daya organisasi yang dimiliki kegagalan proyek
perusahaan untuk mencapai
tujuan tertentu dalam waktu dan
sumber daya tertentu pula
03
TIM DOSEN
FASILKOM SISTEM INFORMASI
Pemrograman Web
HTML merupakan singkatan dari HyperText MarkUp Language. HTML dapat dibuat pada
sembarang editor, meski ada software-software khusus yang dimaksudkan untuk memudahkan pekerjaan.
Adapun editor-editor yang dimaksud adalah NotePad, WordPad, MS Word, Excel dan lain-lain.
Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya seperti pada MS Word.
Pemberian format pada suatu teks dalam sebuah dokumen akan bisa langsung terlihat hasilnya.
Contohnya, jika Anda ingin membuat sebuah dokumen pada MS Word dan memformatnya sehingga salah
satu kata/kalimat ingin diberikan format huruf tebal (Bold), miring (Italic), atau Garis bawah pada teks
(UnderLine), maka hasilnya segera dapat dilihat pada dokumen tersebut. Berbeda dengan dokumen
HTML, format-format yang diberikan pada suatu teks tidak bisa dilihat langsung hasilnya, tetapi harus
menggunakan program khusus, yaitu “Web Browser” atau “Browser”
Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya yaitu, dokumen HTML bisa
mengandung Link/hubungan kebagian lain dari sebuah dokumen atau dokumen lain dari situs Web, baik
dalam server Web yang dama ataupun ke Server Web lainnya. Ciri adanya unsur link ini pada sebuah
dokumen HTML, biasanya suatu teks ditandai dengan warna biru dan garis bawah. Apabila pointer mouse
diarahkan ke link tersebut, maka pointer mouse akan berubah menjadi gambar telapak tangan.
Berikut ini adalah penjelasan kode pada bentuk umum penulisan dokumen HTML :
❖ Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah
kode HTML sehingga browser akan menterjemahkan sebagai dokumen HTML.
❖ Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas kepala dan badan
❖ Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>. Pada Bagian ini, bisa
ditentukan judul dokumen HTML yang dituliskan dengan pasangan <TITLE> dan </TITLE>.
❖ Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah dapat dituliskan
teks-teks, penyisipan gambar, Link, atau pembuatan tabel.
Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada HTML :
1. Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar <……..>
2. Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan huruf kecil atau
kapital akan memberikan hasil yang sama. Meskipun demikian, sebaiknya penulisan tag
dituliskan dalam huruf kapital.
3. Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang berpasangan adalah selalu
mempunyai tag awal dan tag akhir. Tag awal ditandai dengan <…..> dan tag akhir diikuti dengan
tag slash-nya </…..>.
<HTML>………</HTML>
<BODY>………</BODY>
4. Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh tag. Contoh di
bawah ini akan menampilkan hasil yang sama pada browser :
5. File dokumen HTML harus disimpan sebagai file teks murni, dengan menggunakan ekstensi html
atau htm.
FILE : coba.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
Selamat Datang
</BODY>
</HTML>
FILE : heading.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<H2>Belajar HTML</H2>
<H3>Belajar HTML</H3>
<H4>Belajar HTML</H4>
<H5>Belajar HTML</H5>
<H6>Belajar HTML</H6>
</BODY>
</HTML>
Dimana :
- Left : Untuk mengatur teks rata kiri
- Center : Untuk mengatur teks rata tengah
- Right : Untuk mengatur teks rata kanan
FILE : athead.htm
<HTML>
<HEAD>
<TITLE> Membuat Atribut Judul </TITLE>
</HEAD>
<BODY>
FILE : hr.htm
<HTML>
2021 Pemrograman Web PusatBahan Ajar dan eLearning
6 Anita Ratnasari, S.Kom, M.Kom http://www.mercubuana.ac.id
<HEAD>
<TITLE> Membuat horozontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal
<HR>
</BODY>
</HTML>
Dimana :
- a = posisi garis (left, center, right)
- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi -
FILE : athr.htm
HTML>
<HEAD>
<TITLE> Membuat atribut horizontal rule </TITLE>
FILE : br.htm
<HTML>
<HEAD>
<TITLE>
Membuat baris baru </TITLE>
</HEAD>
<BODY>
Bunga Nusa Indah <BR>
Berwarna <BR> Merah
2021 Pemrograman Web PusatBahan Ajar dan eLearning
8 Anita Ratnasari, S.Kom, M.Kom http://www.mercubuana.ac.id
</BODY>
</HTML>
Dimana :
- x = ukuran font (1-7)
- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)
Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan 7 (default font adalah
3). Sedangkan untuk jenis huruf digunakan atribut FACE yang mempunyai nilai atau jenis huruf yang lazim
pada pengolah kata (Misalnya pada MS. WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan jenis
font ini harus sesuai dengan font yang sudah lazim digunakan.
Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada atribut tersebut.
Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut COLOR ini, yaitu yang pertama
dengan menggunakan nama warna itu sendiri, contohnya blue, red, dan green. Sedangkan yang kedua
adalah dengan menggunakan kode RGB suatu warna seperti, #000000 = Black, #0000FF.
Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan perbedaan dan
penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal
FILE : font.htm
<HTML>
<HEAD>
<TITLE> Format Teks </TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" FACE="Courir" COLOR="red">Bunga Nusa Indah </FONT><BR>
Berwarna <BR> Merah
</BODY>
</HTML>
FILE : warna.htm
<HTML>
<HEAD>
<TITLE> Pemberian Warna background</TITLE>
</HEAD>
<BODY BGCOLOR=”honeydew”>
<FONT SIZE="3" FACE="Courier” Color="magenta">Teks dengan warna magenta dan
menggunakan warna background honeydew </FONT><BR>
</BODY>
</HTML>