Postingan Populer

Minggu, 18 Oktober 2020

Belajar HTML

 

TUGAS PRAKTEK 3

34.ZULVAN FALINDAN XII MM 2

 

Apa Itu HTML?

HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.HTML juga memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.

 

Ketika bekerja dengan HTML, Anda menggunakan struktur kode yang sederhana (tag dan attribute) untuk mark up halaman website. pengertian HTML sebagai bahasa mark up sangatlah mudah untuk dipahami bahkan bagi webmaster pemula di bidang web development sekalipun.

 

Struktur Dasar HTML

Dokumen HTML harus memiliki struktur dasar yang terdiri dari 4 bagian utama yaitu: tag DOCTYPE, tag html, tag head, dan tag body. Keempat bagian tersebut adalah syarat minimal yang menjadi standar pada struktur global dokumen HTML dari W3C.

Contoh penulisan struktur dasar HTML :


DOCTYPE atau DTD

DOCTYPE yang merupakan singkatan dari Document Type Declaration dan juga dikenal sebagai DTD adalah deklarasi dokumen yang digunakan untuk menginfokan tipe dokumen dan versi HTML yang digunakan kepada aplikasi web browser. Penulisan DOCTYPE harus berada pada awal dokumen.

Sesuai pada contoh diatas, penulisan DTD atau DOCTYPE ini berada diawal yaitu sebelum tag <html>. Pada versi HTML sebelumnya, penulisan DTD ini lebih panjang dengan menyebutkan URL dan mode halaman yang digunakan namun hal tersebut tidak berlaku untuk HTML5. Pada HTML5 penulisan lebih disederhanakan menjadi <!DOCTYPE html>.

 

Tag <html>

Tag html digunakan untuk menginformasikan pada aplikasi web browser bahwa tipe dokomen tersebut adalah HTML. Tag html juga menjadi wadah untuk semua elemen HTML. Jadi, semua elemen harus berada di dalam tag tersebut kecuali DOCTYPE karena DOCTYPE bukan termasuk elemen melainkan deklarasi dokumen.

Tag html merupakan tag yang membutuhkan penutup tag. Jadi kita harus menutup tag tersebut di akhir dokumen seperti contoh diatas <html> pada baris ke 2 dan diakhiri dengan </html> pada baris ke 9 (akhir dokumen).

Tag <head>

Tag head merupakan tag yang berisi informasi tentang halaman yang tidak ditampilkan di halaman web browser. Misalnya: source css, js atau lainnya yang berasal dari luar, informasi meta, title, dan lainnya. Namun, khusus untuk tag <title> akan ditampilkan di title bar pada web browser. Tag <title> adalah tag yang berada di dalam head HTML yang berfungsi untuk menampilkan judul halaman web pada title bar web browser.


Untuk penulisan tag head juga membutuhkan penutup tag. Contoh pada kode di atas, tag <head> dibuka pada baris ke 3 dan ditutup dengan tag penutup </head> pada baris ke 5.

Tag <body>

Tag body merupakan tag yang berisi elemen-elemen yang ditampilkan di halaman web. Misalnya teks yang berupa paragraph <p>, heading <h1> hingga <h6>, menampilkan gambar <img />, membuat tabel <table>, dan lainnya. Di dalam tag body inilah konten visual dari halaman web ditempatkan.

Penulisan tag body juga perlu penutup tag. Pada contoh di atas, tag <body> dimulai pada baris ke 6 dan ditutup </body> pada baris ke 8.

 

Tag HTML Untuk Pemformatan Teks dan Paragraf

 

Basic

<!DOCTYPE>

Tag untuk menentukan tipe dokumen

<html>

Tag untuk membuat sebuah dokumen HTML

<title>

Tag untuk membuat judul dari sebuah halaman

<body>

Tag untuk membuat tubuh dari sebuah halaman

<h1> to <h6>

Tag untuk membuat heading

<p>

Tag untuk membuat paragraf

<br>

Memasukan satu baris putus

<hr>

Tag untuk membuat perubahan dasar kata didalam isi

<!--...-->

Tag untuk membuat komentar

Formatting

<acronym>

Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)

<abbr>

Tag untuk membuat sebuah singkatan

<address>

Tag untuk membuat kontak alamat

<b>

Tag untuk membuat huruf bercetak tebal

<bdi>

Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)

<bdo>

Mengganti arah teks

<big>

Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)

<blockquote>

Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain

<center>

Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)

<cite>

Tag untuk membuat judul karya

<code>

Tag untuk membuat potongan kode komputer di antara text

<del>

Tag untuk membuat teks yang telah dihapus dari dokumen

<dfn>

Tag untuk membuat sebuah istilah definisi

<em>

Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)

<font>

Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)

<i>

Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood

<ins>

Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen

<kbd>

Tag untuk membuat input keyboard

<mark>

Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)

<meter>

Tag untuk membuat pengukuran skalar

<pre>

Tag untuk membuat teks terformat

<progress>

Memperlihatkan kemajuan tugas (tag baru HTML5)

<q>

Tag untuk membuat kutipan pendek

<rp>

Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)

<rt>

Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)

<ruby>

Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)

<s>

Tag untuk membuat teks yang tidak lagi benar

<samp>

Tag untuk membuat contoh keluaran dari program komputer

<small>

Tag untuk membuat teks kecil

<strike>

Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)

<strong>

Tag untuk membuat teks penting

<sub>

Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)

<sup>

Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)

<time>

Tag untuk membuat tanggal / waktu (tag baru HTML5)

<tt>

Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)

<u>

Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya

<var>

Tag untuk membuat sebuah variabel

<wbr>

Tag untuk membuat kemungkinan garis-putus

 

 

DAFTAR PUSTAKA

https://itkoding.com/struktur-dasar-html/

https://www.hostinger.co.id/tutorial/apa-itu-html/

https://gilacoding.com/read/tag-tag-pada-html-beserta-fungsinya 

Belajar CSS (Pemula)

  Apa itu CSS? CSS (Cascade Style Sheet) meruapakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah. De...