MAKALAH HTML
Kata Pengantar
Puji
syukur saya panjatkan kepada tuhan yang maha ESA, karena berkat karunianyalah
saya dapat menyelesaikan makalah ini. Makalah
ini berisi mengenai Tentang HTML.
Ucapan
terimakasih kami sampaikan kepada dosen mata kuliah internet yang telah
memberikan kesempatan kepada kami untuk menyusun makalah ini. Dan kepada semua
pihak yang telah membantu dalam proses pembuatan makalah ini.
Kami sadar makalah ini jauhdari
kesempurnaan. Untuk itu saran dan kritik yang bersifat membangun sangat saya
harapkan, untuk kesempurnaan penyusunan makalah selanjutnya.
BAB 1
PENDAHULUAN
A. Latar Belakang
Web merupakan media untuk menanpilkan
halaman. Web terbagi menjadi dua yaitu web statis dan web dinamis. Web statis
adalah media untuk menampilkan halaman statis atau tetap, tetapi yang mengatur
nya adalah web browser. Contoh teknologi yang berkaitan dengan web statis
adalah Client Side seperti HTML, Java script.
Dibuat nya makalah ini adalah untuk
mempermudah dalam pembelajaran, maksudnya walaupun kita tidak begitu mengerti
terhadap pembahasan tetapi kita sudah mengenal dan mngetahui nya. Hal ini telah
memudahkan bagi pelajar yang mempelajari tentang bab ini karena sudah
dikelompokkan sesuai dengan bahasannya. Tetapi disamping itu kita haru rajin
berlatih terus mencoba membuat web, baik yang statis ataupun dinamis.
Berdasarkan kenyataan diatas penyusun tertarik untuk membuat makalah yang
berjudul HTML.
BAB II
PEMBAHASAN
2.1 Dasar-Dasar HTML
Mendesain HTML berarti melakukan suatu
tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML
hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag
penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan
perintah-perintah tertentu agar HTML kita dapat di akses oleh browser.
Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan
implementasi dari HTML adalah refleksi dari orang yang membuatnya.
Mendesain HTML dapat dilakukan dengan
dua cara:
1. Menggunakan HTML Editor.
2. Dengan cara menuliskan sendiri secara
manual satu persatu tag-tag HTML ke dalam dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara
di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program
yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke Webinternet iDengan kemampuannya menggabungkan
kemudahan dan kecanggihan teknologi ike Internet dalam dokumen HTML maka cara
ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih
mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual
satu persatu tag-tag HTML. Hal ini sangat sulit dikarenakan akan memakan tenaga
dan waktu ekstra untuk melakukannya, ditambah lagi kita harus melakukan
cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara
kedua adalah dasar dari segala bentuk HTML yang akan kita pelajari, karena
dengan cara itulah kita akan lebih paham mengenai cara kerja dan berbagai
perintah yang biasa dipakai pada bahasa HTML.
2.2 Struktur Dasar HTML
1. Struktur dasar
HTML
HTML
merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang
telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan
baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah
elemen, tag dan attribute didalam perintahnya.
Secara
umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan
body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya
dapat anda lihat sebuah pola dasar HTML dibawah ini :
<html>
<head>
“Informasi Tentang Dokumen HTML”
“Informasi Tentang Dokumen HTML”
</head>
<body>
“Informasi yang akan ditampilkan dalam web Browser”
“Informasi yang akan ditampilkan dalam web Browser”
</body>
</html>
Dari
pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka
<html> sampai tag penutup </html>, sedangkan isi dari dokumen html
tersebut adalah dua buah elemen atau section yaitu
•
“HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head
</head>,
Pada
elemen ini biasanya berisikan
-
Title, merupakan judul dokumen
-
Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web
Dalam
Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content,
Name, URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun
beberapa value yang dapat kita isikan antara lain abstract, author, copyright,
description, distribution, expires, keywords, revist, refresh maupun language
-
Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi
browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain
pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web
tersebut, untuk elemen keduanya adalah
-
“BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body>
pada elemen ini berisikan informasi dan pengaturannya yang akan ditampilkan
dalam browser.
Di
dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita
pelajari, adapun contoh atributh dan kegunaannya sebagai berikut,
•
<DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table
definisi
•
<STRONG>, Untuk menandai bagian text ataupun kata dari penting dari
sebuah kalimat, paragraph ataupun dokumen
•
<VAR>, untuk menampilkan nama variable
•
<CITE>, Menandai kutipan
•
<CODE>, Menampilakan sebuah kode pemrograman
•
<EM>, Penekanan sebuah kalimat
•
<SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen
•
<KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user
melalui keyboard
•
<B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat
•
<I>, Italic membuat tampilan miring
•
<U>, Underline membuat tampilan garis bawah
•
<TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik
•
<STRIKE>, membuat garis tengah pada sebuah kalimat
•
<BIG>, memperbesar ukuran huruf
•
<SMALL>, memperkecil ukuran huruf
•
<SUP>, menampilkan superscript
•
<SUB>, menampilkan subscript
•
<FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan
paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf
tersebut seperti color. Size, style dan lainnya
•
<P>, Paragrah untuk membuat sebuah paragraph
•
<BR>, Line break berfungsi untuk mengganti baris
•
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan
sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan
dan ukuran huruf
•
<PRE> Preformatted Text berfungsi menampilkan text apa adanya
•
<CENTER> membuat sebuah text berada di posisi tengah
•
<LEFT> membuat sebuah text berada di posisi kiri
•
<RIGHT> membuat sebuah text berada di posisi kanan
•
<Basefont size=”pixel”>mengubah ukuran sebuah huruf
•
<HR> Horizontal rule berfungsi untuk membuat garis bawah
•
<OL>, membuat penomoran pada daftar
•
<UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)
•
<LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk
memisah baris daftar yang akan di beri penomoron ataupun tanda bullet
•
<TABLE>, membuat sebuah table
•
<TR>, Membuat row atau baris didalam table <TH>, membuat judul
kolom di table <TD> membuat isi pada kolom table, ketiga tag ini diisikan
pada atribut table
•
Rowspan, Colspan merupakan pengaturan merge cell pada atribut table
•
<FORM> untuk membuat form
•
<A HREF=”url link”>Hypertext</A> Hyper Link
•
<IMG SRC=”url img”> insert image
Inilah
beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut
diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus
ditutup dengan tag penutup atributh tersebut </…..>, untuk lebih jelasnya
dilain waktu saya akan mencoba bahas satu persatu atributh tersebut dan akan
saya lengkapi dengan syntax dan contohnya kompleksnya.
Secara sederhana HTMLH terdiri dari dua bagian yaitu
Header dan Body. Struktur HTMLHdiapit oleh tag awal <HTML>
dan tag akhir </HTML>. Standar penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
<BODY>
Isi dokumen
</BODY>
</HTML>
</HTML>
Keterangan:
·
Tag
<TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok
kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda,
maka judul inilah yang akan disimpan.
Untuk melihat hasilnya, silakan jalankan
browser favorit Anda, seperti contoh di bawah ini digunakan microsoft internet exflorer. Mm
Referensi Tag HTMLH
1. Heading
Heading adalah sekumpulan kata yang
menjadi judul atau subjudul 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:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading
Level 1</H1>
</BODY>
</HTML>
2. Paragraf
Untuk membuat paragraf digunakan tag
<P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf
tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi
paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang
diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata
kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P
ALIGN=”right”>
<P
ALIGN=”center”>
<P
ALIGN=”left”>
</P>
</BODY>
</HTML>
3.
Blockquote
Perintah
tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah
ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau
menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu
yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
</BLOCKQUOTE>
</BODY>
</HTML>
4.
Preformatted Text
Preformatted Text (PRE) digunakan untuk
menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan
teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang
tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted
Text</TITLE>
</HEAD>
<BODY>
<PRE>
</PRE>
</BODY>
</HTML>
5.
Begin Row (BR)
Tag
ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat
baris baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin
Row</TITLE>
</HEAD>
<BODY>
<P>Banyak
cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga
cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi
melalui FTP
<BR>Instalasi
melalui CDROM
<BR>Instalasi
melalui partisi DOS
</BODY>
</HTML>HTML
6.
Ukuran Font
Untuk mengatur huruf dokumen digunakan
tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk
mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran
font</TITLE>
</HEAD>
<BODY>
<FONT
SIZE=1>Ukuran font 1</FONT>
<FONT
SIZE=2>Ukuran font 2</FONT>
<FONT
SIZE=3>Ukuran font 3</FONT>
<FONT
SIZE=4>Ukuran font 4</FONT>
<FONT
SIZE=5>Ukuran font 5</FONT>
<FONT
SIZE=6>Ukuran font 6</FONT>
<FONT
SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
7.
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:
<HTML>
<HEAD>
<TITLE>Jenis
Font</TITLE>
</HEAD>
<BODY>
<FONT
SIZE=5>
<FONT
FACE = “Arial”>Arial, contoh AC Milan <P>
<FONT
FACE = “Verdana”>Verdana , contoh Persebaya <P>
<FONT
FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>
</BODY>
</HTML>
8.
Warna Font
Atribut
COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi
nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama
warna seperti Red, Blue, Yellow, White, dll. 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:
<HTML>
<HEAD>
<TITLE>Warna
Font</TITLE>
</HEAD>
<BODY>
<FONT
SIZE=5>
<FONT
COLOR = “red”>PSM Makassar<P>
<FONT
COLOR = “#FF0000″>tetap PSM Makassar kan?<P>
<FONT
COLOR = “#00FF00″>Ini baru Persebaya<P>
</BODY>
</HTML>
9.
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 dipersiapkan nama anchor lokasi tujuan dari link
tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag
<A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke
bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada
browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A
NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati
,<A HREF=”#abbiati”>info lengkap</A>
<P>Ayala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A
HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>
</BLOCKQUOTE>
<P><A
NAME=”abbiati”>Abbiati</A>
<BLOCKQUOTE>
<P>Kiper
ketiga timnas Italia runner up Euro 2000
<BR>Kiper
utama U-21 juara Piala Eropa U-21
<BR>Kiper
utama AC Milan juara Seri-A 1998-1999
</BLOCKQUOTE>
<P><A
HREF=”#lengkap”>kembali ke atas</A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Link
tujuan</TITLE>
</HEAD>
<BODY>
<P
ALIGN=”center”> Maaf, hanya sedikit
<BR>Chamot
<BR>Dida
<BR>Shevchenko
<BR><A
HREF=”contohlink.html”>kembali</A>
</BODY>
</HTML>
2.5
Membuat Kode Dasar HTML Table
Untuk Belajar HTML Table dan
membuat website sendiri, maka kita harus membuat persiapan lebih dulu. Pertama
kita buka notepad. Kemudian ketik di notepad ini Kode HTML seperti
dibawah ini:
<table>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Kemudian
sisipkan kalimat Belajar HTML Table diantara <title> dan </title>
sehingga kode html nya sekarang menjadi:
<table>
<head>
<title>Belajar
HTML Table</title>
</head>
<body>
</body>
</html>
a.
Menambah heading dan paragraf
Bila
anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang
ada untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam
tingkatan heading. H1 adalah yang paling penting, H2 lebih sedikit kurang
penting, seterusnya hingga H6, yang paling tidak penting.
Berikut
adalah cara menambah sebuah heading yang penting:
<h1>Sebuah
heading yang penting</h1>
<h2>Sebuah
heading yang sedikit kurang penting</h2>
Setiap
paragraf yang anda tulis harus diawali dengan tag <p>. Tag
</p> merupakan opsi, tidak seperti end tag untuk elemen seperti heading.
Sebagai contoh:
<p>Ini
adalah paragraf pertama.</p>
<p>Ini
adalah paragraf kedua.</p>
b.
Menambahkan perhatian pada halaman dengan gambar – gambar
<img
c.
Menambahkan link ke halaman lain.
Apa
yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu
halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah
klik dapat membawa anda langsung ke seberang dunia!
Link
didefinisikan dengan tag <a>. Mari membuat sebuah link pada file
“peter.html” di folder/direktori yang sama dengan file HTML yang sedang anda
edit::
Ini
adalah link ke <a href=”peter.html”>halamannya Peter</a>.
Teks
antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah
hal yang umum bagi keterangan tersebut untuk diberi garis bawah berwarna biru.
Bila
file yang anda link adalah direktori asal (parent directory), anda perlu
menambahkan “../” sebelumnya, sebagai contoh:
<a
href=”../mary.html”>halamannya Mary</a>
Bila
file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari
subdirektori tersebut diikuti sebuah ”/” setelahnya, sebagai contoh:
<a
href=”friends/sue.html”>halamannya Sue</a>
Penggunaan
relative path memungkinkan anda melink sebuah file dengan pergi naik atau turun
direktori sesuai kebutuhan, sebagai contoh”:
<a
href=”../college/friends/john.html”>halamannya John</a>
Di
mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain
bernama ”college”, dan kemudian sebuah subdirektori dengan nama “friends”
untuk sebuah file dengan nama “john.html”.
Untuk
melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat
lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink
ke www.w3.org anda perlu menuliskan:
d. Tiga jenis daftar
HTML
mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet
(bulletted list), atau sering disebut unordered list. Yang
menggunakan tag <ul> dan <li>, sebagai contoh:
<ul>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ul>
Catatan
bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi
tag </li> merupakan opsi dan dapat di hiraukan. Jenis daftar kedua
adalah daftar dengan nomor, yang sering juga disebut ordered list.
Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ol>
Seperti
juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>,
tetapi tag penutup </li> merupakan opsi dan dapat di hiraukan.
Yang
ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda
untuk membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan
sebuah tag <dl> dan diakhiri dengan </dl> Tiap hal diawali dengan
sebuah tag <dt> dan tiap penjelasannya diawali dengan sebuah tag
<dd>. Sebagai contoh:
<dl>
<dt>hal pertama</dt>
<dd>penjelasannya</dd>
<dt>hal kedua</dt>
<dd>penjelasannya</dd>
<dt>hal ketiga</dt>
<dd>penjelasannya</dd>
</dl>
Tag
penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu
dicatat bahwa daftar ini bisa saling disisipkan, satu diantari yang lain.
Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>
list item kedua
<ul>
<li>list pertama yang disisipkan</li>
<li>list kedua yang disisipkan</li>
</ul>
</li>
<li>list item ketiga</li>
</ol>
Anda
juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih
panjang..
e.
HTML memiliki sebuah head dan body
Bila
saya menggunakan fitur view source dari web browser saya (lihat menu View atau
File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya
dimulai dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian
diawali dengan sebuah tag <html> dikuti dengan tag <head> dan
diakhiri dengan </html>. Tag <html> … </html> berfungsi
sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> …
</head> mengandung judul, dan informasi style dan script, sementara
<body> … </body> mengandung markup dari isi yang terlihat.
BAB III
PENUTUP
A.
Simpulan
Dalam pembuatan website, dikenal dua
komponen penting yaitu www dan HTML. Dimana www merupakan suatu protokol
standar dari internet, sedangkan HTML merupakan script atau program standar
yang dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan
menggunakan media web editor notepad.
Di
dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian
tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini
dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap
baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai
dengan apa yang akan kita buat.
DAFTAR
PUSTAKA
