Scribd
Unggah
11 tayangan8 halaman

Hypertext Markup Language

Diunggah oleh

diangultom734
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
11 tayangan8 halaman

Hypertext Markup Language

Diunggah oleh

diangultom734
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

Hypertext Markup Language (HTML)

Dasar-Dasar HTML
Data atau konten di halaman web tersimpan di web server. Data atau konten tersebut berisi
teks, gambar, audio, ataupun video. Agar dokumen-dokumen tersebut dapat tampil di halaman
web browser pengguna, maka diperlukan sebuah protokol, yaitu HTTP. HTTP (Hypertext Transfer
Protocol) merupakan protokol yang digunakan untuk mentransfer data dari web server ke web
browser. Protokol ini akan mentransfer dokumen-dokumen web yang ditulis atau berformat
HTML (Hypertext Markup Language). Dikatakan markup language, karena HTML berfungsi untuk
“memperindah” file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan
dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Saat ini, sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh
HTML sebelumnya.

Beberapa fitur yang tersedia pada versi HTML5, antara lain sebagai berikut:

1. Header : untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama
perusahaan.
2. Canvas : memungkinkan pembuatan gambar dalam kanvas. Dengan adanya canvas, maka
gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri menggunakan
program.
3. Audio : memungkinkan penyajian player untuk memutar suara.
4. Video : memungkinkan player untuk memainkan video.
5. Footer : merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini dapat digunakan
untuk menempatkan informasi di bagian bawah halaman web.

Pada prinsipnya, fitur pada HTML dapat dikelompokkan ke dalam :

1. Struktur halaman;
2. Presentasi visual;
3. Peranti penyaji gambar;
4. Pendukung media; dan
5. Peningkatan koneksi dengan JavaScript.

Secara sederhana, HTML terdiri dari dua bagian, yaitu "head" dan "body". Struktur HTML diapit
oleh tag awal <HTML> dan tag akhir </HTML> atau tag awal <html> dan tag akhir </html>
yang saling berpasangan atau terhubung. Dalam penulisan tag HTML tidaklah case sensitive
artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah. Perhatikan struktur
dokumen HTML berikut! Untuk membuatnya Anda dapat menggunakan editor Visual Studio Code.
Untuk melihat tampilan halaman web yang dibuat, simpan file tersebut dengan format .html.
Setelah itu, buka file tersebut melalui browser komputer Anda. Hasil dari kode HTML tersebut
sebagai berikut.

Elemen-elemen dasar HTML untuk membuat halaman web, sebagai berikut:

1. HTML <!DOCTYPE>
Deklarasi <!DOCTYPE> bukan merupakan tag HTML, melainkan sebuah instruksi yang
diberikan agar web browser mengenal versi HTML yang akan digunakan. Versi HTML5
menggunakan deklarasi <!DOCTYPE html>. Deklarasi <!DOCTYPE> pada awal dokumen
HTML, merupakan hal yang penting dilakukan.

2. Elemen Head
Elemen head sebenarnya tidak harus ada pada dokumen HTML, namun pemakaian head
yang benar akan meningkatkan fungsional suatu dokumen HTML. Isi bagian head, kecuali
elemen <title> tidak akan terlihat oleh pengakses web browser tersebut. Elemen-elemen
pada bagian head akan mengerjakan tugas-tugas sebagai berikut:
a. Menyediakan judul dokumen.
b. Penghubung antar dokumen satu dengan dokumen yang lainnya.
c. Memberitahu browser untuk membuat form pencarian.
d. Menyediakan metode untuk mengirim pesan ke tipe browser.

Elemen yang terdapat pada bagian head, antara lain sebagai berikut:
a. <title>
Tag <title> digunakan untuk memberi judul dokumen. Penggunaannya sebagai
berikut: <title> Judul </title>

Contoh: <title> Belajar pemrograman web </title>

b. <base>
Tag <base> digunakan untuk menentukan basis URL sebuah dokumen.
Penggunaannya sebagai berikut: <base href="url"

Contoh: <base href="https://www.alamaturi.com/direktori">

c. <link>
Tag <link> digunakan untuk menunjukkan relasi antar dokumen HTML. Tag ini
mempunyai beberapa atribut seperti ditunjukkan pada tabel berikut.

Atribut Fungsi
href Menunjuk pada URL dokumen lain
rel Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain, yang
berisi informasi tentang personel yang memberi kontribusi terhadap
dokumen tersebut
sizes Mendefinisikan ukuran dari sumber yang dilakukan link, hanya untuk
rel="icon"
type Menentukan tipe dan parameter dari relasi

Penggunaan tag <link> sebagai berikut: <link [{revirely}="teks"]


href="url">

d. <meta>
Tag <meta> digunakan untuk mendefinisikan informasi-informasi di luar HTML.
Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang
belum didukung oleh HTML. Tag <meta> mempunyai atribut-atribut sebagai berikut:

Atribut Fungsi
http-equiv Mendefinisikan properti dari elemen
name Menyediakan deskripsi tambahan dari elemen
charset Mendefinisikan karakter encoding untuk dokumen HTML
content Menyediakan nilai respons dari properti

Contoh :

e. <style>
Tag <style> digunakan untuk menyisipkan kode style atau CSS ke dalam
dokumen HTML
f. <script>
Tag <script> digunakan untuk menulis script, atau lebih tepatnya untuk
menyisipkan script (seperti JavaScript) pada sisi client.

3. Elemen Body
Elemen body difungsikan untuk mendefiniskan konten atau isi web beserta format yang
akan ditampilkan di halaman web.

4. Elemen Komentar
Komentar merupakan bagian dari kode HTML yang tidak terlihat/ diabaikan oleh browser.
Fungsi komentar dalam kode HTML adalah sebagai keterangan dan dokumentasi. Dengan
adanya komentar, maka dapat melihat keterangan dari kode program HTML sehingga pada
proses pemeliharaan website akan lebih mudah. Sebuah komentar diawali dengan tanda <!--
dan diakhiri dengan tanda -->. Berikut contohnya:

5. Memberi Identitas
Ada sebagian orang yang merancang suatu halaman web dengan mencantumkan
namanya pada dokumen web tersebut atau mungkin mencantumkan hak cipta terhadap
dokumen. Untuk mencantumkan informasi-informasi tersebut, digunakan entitas &copy;
atau &reg;. Pada umumnya informasi tersebut diletakkan pada bagian paling akhir suatu
dokumen. Contoh:

6. Memformat Dokumen HTML


Suatu website akan menarik perhatian pengunjung apabila informasi ditampilkan dengan
baik dan rapi. Kerapian pengaturan konten website merupakan salah satu hal penting yang
harus diperhatikan karena dengan pengaturan konten yang baik, pengguna dapat lebih mudah
memahami isi/ konten suatu website. Informasi yang ditampilkan pada sebuah dokumen
HTML harus mengikuti kaidah- kaidah penulisan yang benar, di antaranya pengaturan teks dan
paragraf. Dalam pemrograman HTML terdapat beberapa tag yang digunakan untuk
memformat dokumen. Tag-tag tersebut yaitu sebagai berikut:

a. Tag HTML Dasar


1) Tag paragraf <p>...</p>, berfungsi untuk membuat paragraf. Jika tanpa tag
penutup, maka hasilnya seperti menggunakan dua kali <br>. Di dalam tag <p> bisa
disertakan atribut align yang berguna untuk mengatur peletakan teks di dalam
masing-masing baris. Terdapat beberapa jenis nilai yang dapat diisikan pada atribut
align, yaitu sebagai berikut:
a) right, mengatur teks rata kanan terhadap halaman.
b) left, mengatur teks rata kiri terhadap halaman.
c) center, mengatur teks rata tengah terhadap halaman (menempatkan teks berada di
tengah- tengah layar pada baris yang bersangkutan)
d) justify, mengatur teks räta kiri dan rata kanan.

Perhatikan contoh berikut!

Pada contoh dokumen HTML di atas menggunakan HTML versi 5, dengan judul taman
yaitu Membuat Paragraf. Kemudian pada isi halaman (body) terdapat teks dengan tipe
paragraf. Setiap paragraf dideklarasikan dengan align left, right, center, dan justify.
Berikut merupakan hasil dari dokumen HTML tersebut.

2) Tag break <br> berfungsi untuk membuat baris baru dan spasi lebih dari satu akan
diabaikan
3) Tag no line break: <nobr>, bila tag <nobr> digunakan, maka teks yang panjang
tidak akan secara otomatis berpindah ke baris di bawahnya.

4) Tag heading <hn>...<hn>, digunakan untuk mengatur ukuran teks yang dijadikan
sebagai judul dalam body dokumen HTML. Menyediakan enam buah tag. Tanda "n"
mempunyai nilai antara 1-6 atau antara <h1> sampai <h6>; dengan <h1>
merupakan ukuran teks terbesar dan <h6> merupakan ukuran teks terkecil. Tag-tag
judul ini adalah sebagai berikut.

Berikut merupakan hasil dari dokumen HTML tersebut.

5) Tag horizontal line: <hr>, digunakan untuk mempercantik halaman, di mana sering
kali pembuat dokumen web menambahkan garis horizontal. Garis ini sebenarnya dapat
dibuat dengan mudah, yakni dengan menyertakan tag <hr>. Contoh :
b. Tag untuk Pemformatan Teks Dasar
Tag Keterangan
<b>Teks</b> atau Teks ditampilkan dalam keadaan tebal (bold).
<strong>Teks</strong
>
<i>Teks</i> Teks ditampilkan dalam keadaan miring (italic).
<u>Teks</u> Teks ditampilkan dengan diberi garis bawah (underline).
<sub>Teks</sub> Teks ditampilkan sebagai subskrip (diletakkan di
bawah huruf)
<sup>Teks</sup> Teks ditampilkan sebagai superskrip (diletakkan di
atas huruf)
<big>Teks</big> Teks ditampilkan dengan ukuran lebih besar dari
ukuran normal.
<small>Teks</small> Teks ditampilkan dengan ukuran lebih kecil dari
ukuran normal.
<del>Teks</del> Teks ditampilkan dalam keadaan di coret

c. Tag untuk Tampilan, “Hasil Output Komputer‟


Tag Keterangan
<code>Teks</code> Menyatakan bahwa teks adalah kode atau program
komputer. Umumnya teks ditampilkan dengan font
monospace
<kbd>Teks</kbd> Menyatakan bahwa teks adalah masukan dari keyboard.
Teks seperti ini umumnya ditampilkan dengan font
monospace.
<samp>Teks</samp> Menyatakan bahwa teks adalah suatu konstanta sederetan
karakter. Biasanya ditampilkan dengan font monospace.
<tt>Teks</tt> Menyatakan bahwa teks model teletype.
<pre>Teks </pre> Menyatakan bahwa teks preformatted
<var>Teks</var> Menyatakan bahwa teks adalah variabel, ekspresi
matematika, atau program komputer. Teks akan disajikan
dalam bentuk miring

d. Tag untuk Citation, Quotation, dan Definisi


Tag Keterangan
<cite>Teks </cite> Menyatakan teks adalah kutipan.
<abbr>Teks</abbr> Menyatakan bahwa teks adalah suatu kependekan
<acronym>Teks</acronym> Menyatakan bahwa teks adalah suatu singkatan
<address>Teks</address> Menyatakan bahwa teks adalah suatu elemen alamat
<bdo>Teks</bdo> Menyatakan arah teks
<blockquote>Teks Menyatakan quotation panjang
</blockquote>
<q>Teks </q> Menyatakan quotation pendek
<dfn>Teks</dfn> Menyatakan bahwa teks adalah suatu istilah

e. Contoh tag untuk Entitas karakter

Anda mungkin juga menyukai