Tentang HTML

Tentang HTML• HTML adalah sebuah standar yang digunakan secara luas untuk

menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).

• Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

• Yang dimaksud dengan HyperText adalah beberapa teks yang ada dalam dokumen HTML memuat informasi yang menghubungkan ke lokasi yang berbeda, baik dalam satu struktur dokumen atau ke alamat lain di internet.

• Sedangkan Markup Language merupakan bagian spesifik pada dokumen yang mengindikasikan bagaimana suatu informasi akan ditampilkan pada web browser.

Editor HTML

Text editor Notepad Editor plus Ultra edit

WYSWYG Macromedia dreamweaver Microsoft frontpage Microsoft publisher

Struktur dokumen HTML

<Head> <Title>

Judul Homepage

</Title></Head>

Homepage

Kepala<head>

Tubuh<body>

<Body>Isi…TeksIsi…Tabel.Isi…Audio, Video, dll.

</Body>

HTML Ekstensi

• Untuk menyimpan file HTML ekstensi yang digunakan adalah .htm atau html.

• Ekstensi yang paling sering digunakan adalah .html

Tags HTML

• HTML tags digunakan untuk menandai element HTML

• HTML tags ditandai dua character <and>• HTML tags ditulis berpasangan seperti <b> dan </b>• Tags yang pertama adalah start tag dan tags kedua

adalah end tag• Teks diantara tag adalah content element• HTML tags tidak case sensitif , <b> sama dengan <B>

Cara penulisan tags yang benar

Overlaping Tags, penulisan yang kurang baik karena akan membingungkan browser untuk mengeksekusi kode html.

Nested Tags, penulisan yang baik karena kode html akan lebih mudah dieksekusi oleh browser.

Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai berikut:<tag1> <tag2><tag n> ...</tag n> </tag2> <tag1>

Basic HTML Tags

Tag Description<html> Defines an HTML document<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

9Peng . Komp & TI 2C

TAG TAG DASAR HTML• Tag dasar berarti elemen dasar.

Dokumen HTML secara mendasar akan terdiri atas teks informasi.

• HTMLMerupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML.

<html> di awal dokumen dan </html> di akhir dokumen.


TAG TAG DASAR HTML (cont.)

• HeadMerupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan

<head> di awal setelah <html>, dan </head> di akhir section head

• TitleMerupakan tag di dalam head yang harus dituliskan untuk memberikan judul/ informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.

<title> judul dokumen</title>


TAG TAG DASAR HTML (cont.)• Body

Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan.

<body> di awal, segera setelah tag </head></body> di akhir, diletakkan sebelum tag

</html>

• ParagrafInformasi yang disajikan dalam dokumen harus mengikuti kaidah kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf.Setiap paragraf harus dimulai dengan memberi tag <p>. diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. Setiap pergantian paragraf harus dimulai dengan <p> kembali.



Contoh Soal :



Hasil :



Contoh Soal :



Hasil :



• Line BreakKita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag <br> sebelum teks yang dimaksud dituliskan.



Contoh Soal :



Hasil :



• HeadingTeks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan teks tersebut, jika dianggap sebagai heading1-digunakan tag <h1>

• Sintaks elemen heading<hy> Teks yang menjadi heading </hy>,

dimana y adalah nomor heading





Contoh Soal :



• Mengatur letak HeadingTag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris –align. Aligment heading kiri-left tengah –center kanan-right



Contoh Soal :



Hasil :

Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri.



• Penggaris MendatarSebuah garis dapat dsisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf.

Tag<hr>disisipkan pada tempat garis akan disisipkan dokumen.



Contoh :



Hasil :Garis yang disisipkan dapat dalam bentuk penggaris karena lebar garis dapat diatur, ukuran garis dapat dalam bentuk point atau dalam bentuk relatif dalam window browser.



• KomentarDalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap program itu sendiri. Catatan/komentar dalam dokumen tidak ditampilkan dalam browser.Komentar disisipkan pada section body, diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari.



Contoh :



• Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag <!—sebagai awal, kemudian teks yang dikomentari, dan tag sebagai akhir tag.

• Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis miring sebelumnya.



Hasil :

32Peng. Komp & TI 2C

MENGENAI PENULISAN HTML• Browser HTML menginterpretasikan satu atau

beberapa space yang berdekatan sebagai sebuahspaceteks teks teks teksdianggap sebagai :teks teks teks teks

• Browser HTML menginterpretasikan Carriage Return(Enter) dan indentasi (Tab) sebagai sebuah space

• Ada beberapa karakter khusus yang dapat direpresentasikan dengan kode tertentu– spasi– < <– > >– & &– " "


TAG DASAR• HTML: menandai awal dan akhir dokumen

HTML<html>dokumen</html>

• Head: menandai bagian header dokumen HTML<head>header</head>

• Title: memberi judul pada dokumen HTML<title>judul dokumen</title>

• Body: menandai awal dan akhir isi dokumen<body>isi dokumen</body><body text="#xxxxxx" bgcolor="#xxxxxx"background="filegambar" link="#xxxxxx"vlink="#xxxxxx">isi dokumen</body>


TAG JUDUL (HEADING)<hn>Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu

paragraf


TAG ENUMERASI (LIST)<li>item</li>Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet)Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>


TAG ENUMERASI – LIST (cont.)


TAG GAMBAR• <img src="NamaFileGambar">

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.

• Untuk menampilkan sebuah file gambar.

• Bentuk penulisan lain yang dianjurkan (XML style) :<img src="NamaFileGambar" />


TAG GAMBAR (cont.)


TAG TABLE - DATA<table> definisi tabel </table>Menampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom kolom.Tag untuk penanda baris adalah <tr> definisi baris </tr>Tag untuk penanda kolom adalah <td>data</td>


TAG TABLE – DATA (cont.)


TAG TABLE - LAYOUT• Untuk menata letak (layout) isi

dokumen (walaupun hakikatnya bukan untuk keperluan ini)


TAG TABLE – LAYOUT (cont.)


TAG LINK<a href="Link">Kata yang di-click</a><a name="#Acuan">Kata yang

dituju</a>Link = Alamat URL atau nama file

dan/atau acuan yang ditujuAcuan = Kata sembarang sebagai

penandamembentuk link ke URL/file/bagian

dokumen lain.


TAG LINK (cont.)

HTML-LINK-LIST

• LINK HTMLKelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser Web akan menyorot (“highlight”) teks atau gambar yang diidentifikasi sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink atau link).

• TAG ANCHOR• Tag <A> digunakan untuk membuat suatu link

kepada dokumen lain dalam web dengan• menambah atribut “href” sebagai definisi

lokasi link. Contoh :• <A HREF=”http://www.microsoft.com”> clik

here to show it</A>

Ada tiga jenis link yaitu : Link relatif, Link absolute, Link dalam dokumen yang sama.- Link Relatif

Digunakan jika membuat suatu link pada page anda ke page lain pada komputer yang sama.Bila dua page berada pada direktori sama, anda dapat menuliskan nama file html sepertiberikut :<A HREF = “page_2.html”> Next </A>

- Link AbsolutDigunaka apabila anda membuat link ke page web lain yang berada pada web site lain diinternet. Contoh:<A HREF = “http://www.mangosoft.com”>Click here if you want to see my home page</A>

- Link ke bagian lain dalam dokumenLink ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumen akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke bagian-bagian tersebut.

Memberi nama suatu bagian dalam dokumen,Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut,Sisipkan nama bagian tersebut dengan: <A NAME= “nama bagian”>Membuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan cara yang sama seperti link absolut atau relatif, namun nama dokumen dalam link diganti dengan nama bagian dokumen dengan ditambah tanda # yang ditulis sebelum nama bagian tersebut. Contoh:<A HREF= “#nama bagian”> Bagian tentang link</A>

Contoh Link<HTML><HEAD></HEAD><BODY><A NAME="TOP"><A HREF="#LINK RELATIF">Link relatif</A><BR><A HREF="#LINK ABSOLUT">Link Absolut</A><BR><A HREF="#LINK WITH NEW WINDOW">Link with New Window</A><BR><A HREF="#NO UNDERLINE">Link without underline</A><BR></A><BR><A NAME="LINK RELATIF"><H1>Link secara relatif, lihat contoh di bawah ini:</H1><P><A HREF="page_2.html">Klik di sini </A>jika mau ke halaman berikutnya.</P></A><A NAME="LINK ABSOLUT"><H1>Link secara absolut, lihat contoh di bawah ini:</H1><P>Klik <A HREF="http://www.mangosoft.com">my home page</A> if you want tosee my personality.</P></A>

Contoh Link (lanjutan)<A NAME="LINK WITH NEW WINDOW"><H1>Membuat window baru untuk link:</H1><P>Open <A HREF="http://www.mangosoft.com" target="_blank"> my home page</A>with new window.</P></A><A NAME="NO UNDERLINE"><H1>Membuat link tanpa garis bawah:</H1><P><A HREF="http://www.mangosoft.com" style=" text-decoration:none">KlikThis Link </A> ,Looks it's not use underline.</P></A><HR><A HREF="#TOP"> kembali ke atas</A><HR></BODY></HTML>

Tentang HTML

Documents