Pemrograman Web #1 - HTML - Catatan Informatika

STRUKTUR DASAR HTML

HTML (HyperText Markup Language ) merupakan bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen HTML adalah adanya tag. Contoh penulisan script html dapat di lihat di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

TAG-TAG DALAM HTML

DOCTYPE ATAU DTD

Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. Contoh:

<!DOCTYPE html>

TAG HTML

Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

<html>
    ... kode head, body dll, ada disini
</html>

TAG HEAD

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser. Tag <title> dalam contoh kita sebelumnya digunakan untuk menampilkan title dari sebuah halaman web. Title ini biasanya ditampilkan pada bagian paling atas web browser.

<head>
    ... kode title dll, ada disini
</head>

TAG BODY

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan <body>. Sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini.

<body>
    ... kode yang ada disini akan muncul di dalam browser
</body>

TAG PARAGRAF

Tag paragraph <p> berfungsi layaknya pengaturan antar paragraph dalam halaman web anda. Dalam elemen paragraph memiliki atribut yang dapat digunakan untuk pengaturan peraatan penulisan yakni align: [left | center | right]. Untuk valuenya cukup dipilih salah satu dari ketiga opsi tersebut. Contoh penggunaan tag paragraph:

<p align="center"> Hello world </p>

TAG HEADING

Tag heading <hx> digunakan untuk mengatur format heading (judul dan sub judul) dalam
paragraph. X merupakan value yang dapat anda pilih. Yakni berkisar dari 1-6. Contoh
penulisannya: <h1> ini heading 1</h1>
Tag heading juga memiliki atribut align: [left | center | right]. Contoh :

<h1 align="left">My first Heading</h1>

TAG LINE BREAK

Tag line break <br/> berfungsi untuk memberikan baris baru dalam halaman web anda. Tag line break tidak perlu tag penutup.

TAG HR

Tag <hr/> digunakan untuk mendefinisikan garis horizontal dokumen. Tag hr tidak memiliki tag penutup. Atribut yang dapat digunakan dalam tag hr antara lain sebagai berikut:

Attribute	Fungsi	Value
size	Menentukan ketebalan garis	Angka(dalam pixel)
width	Menentukan lebar garis	Angka(pixel); prosentase
color	Menentukan warna garis	Nama warna; warna hexadesimal
noshade	Menghilangkan efek tiga dimensi garis

Contoh :

<hr size="5px" width="100%">

TAG IMAGE

Tag image <img> digunakan untuk menampilkan gambar. Tag image tidak memerlukan tag penutup. Contoh penggunaan:

<img src="koala.jpg" alt="koala" width="304px" height="228px">

TAG HIPERLINK

Tag hyperlink <a> digunakan untuk menautkan halaman yang satu dengan halaman yang lain.
Contoh :

<a href="https://ArtTerror23.blogspot.com" title="">Link ke ArtTerror23</a>

KOMENTAR

Dalam suatu dokumen ada sebagian teks yang berfungsi sebagai catatan atau komentar bagi dokumen itu sendiri. Catatan/komentar ini tidak ingin ditampilkan ke dalam browser. Contoh komentar dapat di tuliskan dengan tag sebagai berikut (Teks yang berwarna biru tidak akan ditampilkan dalam browser.):

<!-- Write your comments here -->

PREFORMATTED TEXT

Tag Preformatted text <pre> digunakan untuk menampilkan teks yang sama seperti teks yang anda ketikkan dalam dokumen html. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti yang terlihat dalam teks yang ditampilkan oleh aplikasi yang berbasiskan teks.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1 align="left">My first Heading</h1>
    <hr size="5px" width="100%">
    <a href="https://ArtTerror23.blogspot.com" title="">Link ke ArtTerror23</a>
</body>
</html>

TAG QUOTATION

Suatu kutipan teks lazim ada dalam dokumen, ada dua macam kutipan:

Kutipan pendek – tag <q>
Kutipan panjang – tag <blockquote>

Tag <q> tidak melakukan sesuatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai kutipan,adapun pemberian format text dapat dilakukan dengan style sheet.
Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai blok tersendiri. Dengan tag tersebut bowser akan menampilkan teks menjorok ke dalam (mengidentasi teks).
Contoh :

<q{1: cite="Contoh"}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q>

TAG FORMAT TEXT

Tag	Fungsi
<i>...</i>	Menuliskan teks yang dicetak miring
<b>...</b>	Menuliskan teks yang dicetak tebal
<u>...</u>	Menuliskan teks yang digarisbawahi
<sub>...</sub>	Menuliskan teks yang posisinya lebih ke bawah
<sup>...</sup>	Menuliskan teks yang posisinya lebih ke atas
<del>...</del>	Menuliskan teks yang hendak di hapus (diberi coretan)
<mark>...</mark>	Memberikan highlight pada teks

TAG TABLE

Tag	Fungsi
<table>...</table>	Mendefiniskan sebuah tabel
<th>...</th>	Mendefinisikan header tabel
<tr>...</tr>	Mendefinisikan baris dalam tabel
<td>...</td>	Mendefinisikan kolom dalam tabel
<thead>...</thead>	Mendefinisikan head tabel
<tbody>..</tbody>	Mendefinisikan badan tabel
<tfoot>...</tfoot>	Mendefinisikan footer tabel

Atribut yang dapat digunakan dalam tabel:

Attribute	Fungsi	Value
colspan	Menggabungkan kolom	Angka
rowspan	Menggabungkan baris	Angka
bgcolor	Memberikan warna background	Nama warna; warna hexadesimal

Pemrograman Web #1 - HTML