HTML Penjelaasan

<!
DOCTYPE html>
<html>
<head>
<title>Tugas UTS Interfacing</title>
</head>
<body>
<h1>MAHASISWA STMIK BINA BANGSA</h1>

<p>Abdil Raharja_202152027</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>MAHASISWA STMIK BINA BANGSA</h1>

<p>Fitria Nurandini_202152010</p>
</body>
</html>
Tag yang ada pada dokumen HTML di atas adalah sebagai berikut:
1. `<!DOCTYPE html>`: Ini adalah deklarasi tipe dokumen (Document Type Declaration) yang
memberi tahu browser bahwa halaman ini ditulis dalam format HTML. Ini adalah bagian penting dari
setiap dokumen HTML yang valid dan harus menjadi bagian pertama dari setiap dokumen HTML.
2. `<html>`: Ini adalah elemen root dari dokumen HTML yang menunjukkan bahwa seluruh konten
halaman web berada di dalamnya.
3. `<head>`: Ini adalah elemen yang berisi informasi tentang dokumen, seperti judul halaman, tautan
ke file CSS, dan skrip JavaScript. Konten dalam elemen `<head>` tidak ditampilkan di halaman web itu
sendiri.
4. `<title>`: Ini adalah elemen yang menentukan judul halaman yang akan ditampilkan di tab browser
atau judul jendela. Konten di dalam elemen `<title>` adalah apa yang akan muncul di bilah judul
browser.
5. `<body>`: Ini adalah elemen yang berisi konten yang akan ditampilkan di halaman web. Semua
elemen yang ingin ditampilkan di halaman web, seperti teks, gambar, dan elemen lainnya,
ditempatkan di dalam elemen `<body>`.
6. `<h1>`: Ini adalah elemen heading level 1 yang digunakan untuk judul utama halaman. Biasanya
digunakan untuk judul utama atau judul seksi.
7. `<p>`: Ini adalah elemen untuk membuat paragraf teks di halaman web. Isi teks yang ada di dalam
elemen `<p>` akan ditampilkan sebagai paragraf.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>STMIK BINA BANGSA</h1>

<p>Sekolah Tinggi Manajemen Informatika dan Komputer</p>
</body>
</html>
sendiri.
browser.
elemen `<p>` akan ditampilkan sebagai paragraf.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>STMIK BINA BANGSA</h1>
<p>Alamat : Jln.Jend.A.H.Nasution No.105 Kendari
Email : info@stmikbinsa.ac.id
Website : http://www.stmikbinsa.ac.id
</p>
</body>
</html>
sendiri.
browser.
elemen `<p>` akan ditampilkan sebagai paragraf. Dalam contoh ini, terdapat teks yang mencakup
alamat, email, dan website.
<!DOCTYPE html>
<html>
<body>
<h1>Abdil Raharja_202152027</h1>
<p>Mahasiswa STMIK BINA BANGSA, Angkatan 2021, Jurusan Sistem Komputer,

Kelas SK A, Semester 5
</p>
</body>
</html>
memberi tahu browser bahwa halaman ini ditulis dalam format HTML. Ini harus menjadi bagian
pertama dari setiap dokumen HTML yang valid.
2. `<html>`: Ini adalah elemen root dari dokumen HTML yang menandakan dimulainya dokumen
HTML.
3. `<body>`: Ini adalah elemen yang berisi semua konten yang ingin ditampilkan di halaman web.
Semua elemen yang ingin ditampilkan, seperti teks, gambar, dan elemen lainnya, ditempatkan di
dalam elemen `<body>`.
4. `<h1>`: Ini adalah elemen heading level 1 yang digunakan untuk membuat judul utama di halaman
web. Dalam konteks ini, digunakan untuk menampilkan nama dan nomor mahasiswa.
elemen `<p>` akan ditampilkan sebagai paragraf. Dalam contoh ini, digunakan untuk menampilkan
informasi tentang mahasiswa, seperti keterangan mengenai institusi, tahun angkatan, jurusan, kelas,
dan semester.
<!DOCTYPE html>
<html>
<body>
<p>STMIK BINA BANGSA<br>merupakan singkatan dari

Sekolah Tinggi Manajemen Informatika dan Komputer
STMIK BINA BANGSA Merupakan Kampus
yang memiliki program studi Sistem Komputer dan Sistem Informasi.
</p>
</body>
</html>
1. `<!DOCTYPE html>`: Deklarasi tipe dokumen HTML yang memberitahu browser bahwa halaman ini
ditulis dalam format HTML.
2. `<html>`: Elemen root dari dokumen HTML yang menandakan dimulainya dokumen HTML.
3. `<body>`: Elemen yang berisi semua konten yang ingin ditampilkan di halaman web.
4. `<p>`: Elemen untuk membuat paragraf teks di halaman web. Isi teks yang ada di dalam elemen
`<p>` akan ditampilkan sebagai paragraf.
5. `<br>`: Elemen untuk membuat jeda baris (line break) di dalam teks. Ini digunakan untuk
memisahkan teks ke dalam beberapa baris baru. Dalam konteks ini, digunakan untuk memisahkan
kalimat-kalimat yang berbeda di dalam satu paragraf.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>

<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
Dalam dokumen HTML yang Anda berikan, terdapat beberapa tag dan atribut yang perlu dijelaskan:
4. `<h2>`: Elemen heading level 2 yang digunakan untuk membuat judul sub-seksi di halaman web.
Dalam contoh ini, digunakan untuk menunjukkan judul sub-seksi "The style Attribute".
5. `<p>`: Elemen untuk membuat paragraf teks di halaman web. Isi teks yang ada di dalam elemen
`<p>` akan ditampilkan sebagai paragraf.
6. `style="color:red;"`: Atribut style yang digunakan untuk menambahkan gaya atau style khusus
pada suatu elemen. Dalam contoh ini, atribut style digunakan untuk mengatur warna teks pada
paragraf menjadi merah.
Jadi, dalam contoh tersebut, terdapat penggunaan tag `<h2>`, `<p>`, dan atribut `style` pada tag
`<p>`.
<!DOCTYPE html>
<html>
<body>
<h1>STMIK BINA BANGSA </h1>

</body>
</html>
Dalam dokumen HTML yang Anda berikan, terdapat penggunaan tag-heading dari level 1 hingga level
6:
web. Biasanya digunakan untuk judul utama atau judul halaman.
2. `<h2>`: Ini adalah elemen heading level 2 yang digunakan untuk membuat judul sub-seksi di
halaman web. Biasanya digunakan untuk judul bagian besar dari konten.
3. `<h3>`: Ini adalah elemen heading level 3 yang digunakan untuk membuat judul sub-sub-seksi di
halaman web. Digunakan untuk judul bagian yang lebih kecil dari konten.
4. `<h4>`: Ini adalah elemen heading level 4 yang digunakan untuk membuat judul sub-sub-sub-seksi
di halaman web.
5. `<h5>`: Ini adalah elemen heading level 5 yang digunakan untuk membuat judul sub-sub-sub-sub-
seksi di halaman web.
6. `<h6>`: Ini adalah elemen heading level 6 yang digunakan untuk membuat judul sub-sub-sub-sub-
sub-seksi di halaman web.
Penggunaan heading level yang berbeda mengindikasikan tingkat hierarki dari judul-judul tersebut.
Semakin tinggi nomor heading, semakin kecil ukuran font yang diberikan secara default oleh browser.
Oleh karena itu, `<h1>` biasanya digunakan untuk judul utama, sedangkan `<h6>` digunakan untuk
sub-sub-sub-sub-sub-judul yang sangat kecil.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph 1.</p>

</body>
</html>
Dokumen HTML yang Anda berikan memiliki struktur sederhana yang terdiri dari beberapa elemen:
memberi tahu browser bahwa halaman ini ditulis dalam format HTML.
4. `<p>`: Ini adalah elemen untuk membuat paragraf teks di halaman web. Setiap elemen `<p>`
digunakan untuk menampilkan satu paragraf teks. Dalam contoh ini, terdapat tiga elemen `<p>`,
masing-masing menampilkan satu paragraf teks.
Jadi, dokumen HTML ini terdiri dari beberapa paragraf teks yang disusun secara berurutan di dalam
elemen `<body>`.
<!DOCTYPE html>
<html>
<body>
<body style="background-color:powderblue;">
<h1 style="background-color:skyblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan tag dan atribut style untuk
memberikan gaya atau tampilan khusus pada elemen-elemen tertentu. Berikut penjelasan tag dan
atribut yang ada:
4. `style="background-color:powderblue;"`: Atribut style yang digunakan untuk menentukan gaya

atau tampilan latar belakang (background-color) halaman. Dalam contoh ini, warna latar belakang
diatur menjadi powder blue.
web.
6. `style="background-color:skyblue;"`: Atribut style yang digunakan untuk menentukan gaya atau

tampilan khusus pada elemen tertentu. Dalam hal ini, warna latar belakang judul utama diatur
menjadi sky blue.
7. `<p>`: Ini adalah elemen untuk membuat paragraf teks di halaman web.
8. `style="background-color:tomato;"`: Atribut style yang digunakan untuk menentukan gaya atau

tampilan khusus pada elemen tertentu. Dalam contoh ini, warna latar belakang paragraf pertama
diatur menjadi tomato (merah).
9. `style="color:red;"`: Atribut style yang digunakan untuk menentukan warna teks. Dalam contoh ini,
teks paragraf yang memiliki atribut ini diatur menjadi merah.
10. `style="color:blue;"`: Atribut style yang digunakan untuk menentukan warna teks. Dalam contoh
ini, teks paragraf yang memiliki atribut ini diatur menjadi biru.
11. `style="font-size:50px;"`: Atribut style yang digunakan untuk menentukan ukuran font teks.
Dalam contoh ini, ukuran font pada paragraf yang memiliki atribut ini diatur menjadi 50 piksel.
Jadi, dokumen HTML ini menunjukkan penggunaan atribut style untuk menyesuaikan gaya atau
tampilan elemen-elemen di dalamnya.
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p><strong>This text is important</strong></p>
<p><em>This text is emphasized</em></p>
<p><marked>This text is marked</marked></p>
<p><small>This text is smaller</small></p>
<p><del>This text is deleted</del></p>
<p><ins>This text is inserted</ins></p>
<p><sub>This text is subscript</sub></p>
<p><sup>This text is superscript</sup></p>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan berbagai elemen tag untuk
memberikan efek gaya tertentu pada teks. Berikut adalah penjelasan tag yang ada:
1. `<p>`: Ini adalah elemen untuk membuat paragraf teks di halaman web. Setiap elemen `<p>`
digunakan untuk menampilkan satu paragraf teks.
2. `<b>`: Ini adalah elemen untuk membuat teks tebal (bold). Teks yang dibungkus dalam elemen
`<b>` akan ditampilkan dengan gaya tebal.
3. `<i>`: Ini adalah elemen untuk membuat teks miring (italic). Teks yang dibungkus dalam elemen
`<i>` akan ditampilkan dengan gaya miring.
4. `<strong>`: Ini adalah elemen untuk menandai teks sebagai penting. Meskipun secara visual sering
kali ditampilkan dengan gaya tebal, penggunaan yang sebenarnya dari elemen `<strong>` adalah
untuk menekankan pentingnya teks tersebut secara semantik.
5. `<em>`: Ini adalah elemen untuk menekankan teks. Meskipun secara visual sering kali ditampilkan
dengan gaya miring, penggunaan yang sebenarnya dari elemen `<em>` adalah untuk menekankan
makna atau kepentingan teks tersebut secara semantik.
6. `<marked>`: Ini adalah elemen untuk menandai teks. Teks yang dibungkus dalam elemen
`<marked>` biasanya ditampilkan dengan latar belakang kuning atau warna yang menonjol lainnya,
tergantung pada browser.
7. `<small>`: Ini adalah elemen untuk membuat teks menjadi lebih kecil dari ukuran teks biasa.
8. `<del>`: Ini adalah elemen untuk menandai teks yang dihapus atau dihapus dari dokumen.
9. `<ins>`: Ini adalah elemen untuk menandai teks yang ditambahkan atau dimasukkan ke dalam
dokumen.
10. `<sub>`: Ini adalah elemen untuk menampilkan teks sebagai subskrip, artinya teks tersebut
ditampilkan lebih kecil dan sedikit lebih rendah dari teks di sekitarnya.
11. `<sup>`: Ini adalah elemen untuk menampilkan teks sebagai superskrip, artinya teks tersebut
ditampilkan lebih kecil dan sedikit lebih tinggi dari teks di sekitarnya.
Jadi, dokumen HTML ini menunjukkan berbagai cara untuk memberikan efek gaya tertentu pada teks
menggunakan elemen tag HTML yang berbeda.
<!DOCTYPE html>
<html>
<body>
<p>Quotes untuk Hari Ini:</p>
<blockquote cite="https://www.brilio.net/wow/
40-kata-kata-keren-quotes-cocok-dijadikan-caption-medsosmu-
191127s.html">
<q>Belajarlah Rendah Hati, Rendahkan Hatimu Serendah rendahnya hingga tak ada
seorangpun
yang bisa merendahkanmu</q>
</blockquote>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan beberapa tag yang berkaitan dengan
kutipan (quotes). Berikut adalah penjelasan tag yang ada:
1. `<p>`: Ini adalah elemen untuk membuat paragraf teks di halaman web. Pada contoh ini, elemen
`<p>` digunakan untuk menampilkan teks "Quotes untuk Hari Ini:".
2. `<blockquote>`: Ini adalah elemen untuk membuat blok kutipan panjang dalam dokumen HTML.
Elemen ini mengapit teks yang ingin dikutip. Pada contoh ini, elemen `<blockquote>` digunakan
untuk menampilkan sebuah kutipan.
3. `cite="https://www.brilio.net/wow/40-kata-kata-keren-quotes-cocok-dijadikan-caption-
medsosmu-191127s.html"`: Ini adalah atribut cite yang digunakan untuk memberikan sumber atau
referensi dari kutipan yang disajikan. Nilai atribut ini adalah URL dari sumber kutipan yang
digunakan.
4. `<q>`: Ini adalah elemen untuk menandai sebuah kutipan pendek dalam dokumen HTML. Elemen
ini digunakan di dalam elemen `<blockquote>` untuk menandai teks yang sebenarnya adalah kutipan.
Dalam contoh ini, elemen `<q>` digunakan untuk menandai kutipan yang sebenarnya.
Jadi, dokumen HTML ini menunjukkan penggunaan tag untuk menampilkan sebuah kutipan dengan
menyediakan informasi sumber kutipan melalui atribut cite pada elemen `<blockquote>`.
<!DOCTYPE html>
<html>
<body>


<p>This is a paragraph.</p>

</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan komentar HTML. Berikut adalah
penjelasan tag yang ada:
1. `<!DOCTYPE html>`: Deklarasi tipe dokumen HTML yang memberi tahu browser bahwa halaman
ini ditulis dalam format HTML.
4. ``: Ini adalah sintaks komentar HTML. Komentar HTML digunakan untuk
menambahkan catatan atau keterangan di dalam kode HTML yang tidak akan ditampilkan oleh
browser. Komentar tersebut hanya akan dilihat oleh pengembang saat memeriksa atau mengedit
kode HTML. Dalam contoh ini, komentar digunakan untuk memberikan keterangan tentang teks yang
berada di bawahnya.
6. ``: Ini adalah sintaks komentar HTML yang
kedua. Komentar ini juga tidak akan ditampilkan oleh browser saat halaman web ditampilkan kepada
pengguna. Komentar ini memberikan informasi tambahan kepada pengembang tentang
fungsionalitas atau struktur dari elemen yang berada di atasnya.
Jadi, komentar HTML digunakan untuk memberikan keterangan atau catatan di dalam kode HTML
yang tidak ditampilkan oleh browser ketika halaman web ditampilkan kepada pengguna. Komentar
ini berguna bagi pengembang untuk menjelaskan atau mengingatkan tentang bagian-bagian tertentu
dari kode HTML.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">STMIK BINA BANGSA Merupakan Singkatan dari
<q>Sekolah Tinggi Manajemen Informatika dan Komputer</q>
</p>
<h3 style="color:Tomato;">STMIK BINA BANGSA</h3>
<p style="color:DodgerBlue;">STMIK BINA BANGSA Merupakan Singkatan dari
<q>Sekolah Tinggi Manajemen Informatika dan Komputer</q></p>
<p style="color:MediumSeaGreen;">Sistem Komputer dan Sistem Informasi</p>
<h1 style="border: 2px solid Tomato;">STMIK BINA BANGSA</h1>
<h1 style="border: 2px solid DodgerBlue;">STMIK BINA BANGSA</h1>
<h1 style="border: 2px solid Violet;">STMIK BINA BANGSA</h1>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan berbagai atribut gaya (style) yang
diterapkan pada elemen-elemen HTML. Berikut adalah penjelasan tag yang ada beserta atribut gaya
yang digunakan:
web.
2. `style="background-color:Tomato;"`: Atribut style yang digunakan untuk mengatur latar belakang

elemen. Dalam contoh ini, warna latar belakang elemen `<h1>` diatur menjadi tomato.
3. `style="color:Tomato;"`: Atribut style yang digunakan untuk mengatur warna teks elemen. Dalam
contoh ini, warna teks elemen `<h3>` diatur menjadi tomato.
4. `style="border: 2px solid Tomato;"`: Atribut style yang digunakan untuk mengatur border atau
garis tepi elemen. Dalam contoh ini, garis tepi elemen `<h1>` diatur menjadi 2 piksel tebal, solid
(garis lurus), dan berwarna tomato.
5. `<q>`: Ini adalah elemen untuk menandai sebuah kutipan pendek dalam dokumen HTML.
7. `<h3>`: Ini adalah elemen heading level 3 yang digunakan untuk membuat judul sub-sub-seksi di
halaman web.
8. `style="color:DodgerBlue;"`: Atribut style yang digunakan untuk mengatur warna teks elemen.
Dalam contoh ini, warna teks elemen `<p>` diatur menjadi dodger blue.
9. `style="color:MediumSeaGreen;"`: Atribut style yang digunakan untuk mengatur warna teks

elemen. Dalam contoh ini, warna teks elemen `<p>` diatur menjadi medium sea green.
Jadi, dokumen HTML ini menunjukkan penggunaan berbagai atribut gaya untuk menyesuaikan
tampilan dan gaya dari elemen-elemen HTML yang berbeda.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Dokumen HTML yang Anda berikan mengandung penggunaan elemen `<style>` di dalam bagian
`<head>`. Berikut adalah penjelasan tag yang ada:
1. `<style>`: Ini adalah elemen yang digunakan untuk menentukan gaya atau style untuk elemen-
elemen di dalam dokumen HTML. Elemen ini biasanya diletakkan di dalam bagian `<head>`
dokumen. Dalam contoh ini, elemen `<style>` digunakan untuk menentukan gaya untuk elemen
`<h1>` dan `<p>`.
2. `h1 {...}`: Ini adalah aturan gaya CSS yang menargetkan elemen heading level 1 (`<h1>`). Dalam
contoh ini, aturan gaya ini menentukan bahwa teks pada elemen `<h1>` akan memiliki warna biru,
menggunakan font family Verdana, dan memiliki ukuran font 300%.
3. `p {...}`: Ini adalah aturan gaya CSS yang menargetkan elemen paragraf (`<p>`). Dalam contoh ini,
aturan gaya ini menentukan bahwa teks pada elemen `<p>` akan memiliki warna merah,
menggunakan font family Courier, dan memiliki ukuran font 160%.
Jadi, menggunakan elemen `<style>` dalam dokumen HTML memungkinkan Anda untuk menentukan
gaya atau style untuk elemen-elemen tertentu di dalam halaman web, yang akan memengaruhi
tampilan dan presentasi teks dan elemen lainnya. Dalam contoh ini, gaya didefinisikan secara internal
(inline) dalam dokumen HTML, tetapi Anda juga bisa menggunakan gaya eksternal dengan
menyimpan aturan gaya CSS dalam file terpisah dan merujukkannya dalam dokumen HTML
menggunakan elemen `<link>` dalam bagian `<head>`.
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan tag `<a>` untuk membuat tautan (link)
ke halaman web lain, baik menggunakan URL absolut maupun URL relatif. Berikut adalah penjelasan
tag yang ada:
1. `<a>`: Ini adalah elemen anchor (tautan) yang digunakan untuk membuat tautan ke halaman web
lain atau ke lokasi lain di dalam halaman web yang sama.
- `href="https://www.w3.org/"`: Ini adalah atribut href yang digunakan untuk menentukan alamat
URL yang dituju ketika tautan diklik. Dalam contoh ini, tautan "W3C" akan membuka halaman web
dari situs W3C (World Wide Web Consortium) ketika diklik.
- `href="https://www.google.com/"`: Ini adalah atribut href yang digunakan untuk menentukan
alamat URL yang dituju ketika tautan diklik. Dalam contoh ini, tautan "Google" akan membuka
halaman web dari situs Google ketika diklik.
- `href="html_images.asp"`: Ini adalah atribut href yang digunakan untuk menentukan alamat URL
yang dituju ketika tautan diklik. Dalam contoh ini, karena URL tidak dimulai dengan "http://" atau
"https://", itu dianggap sebagai URL relatif dan akan dicari di lokasi yang relatif terhadap halaman
web saat ini. Jadi, tautan ini akan membuka halaman "html_images.asp" di direktori yang sama
dengan halaman web saat ini.
- `href="/css/default.asp"`: Ini adalah atribut href yang digunakan untuk menentukan alamat URL
yang dituju ketika tautan diklik. Dalam contoh ini, tautan ini menggunakan URL relatif yang dimulai
dengan "/" yang menunjukkan root direktori situs web. Jadi, tautan ini akan membuka halaman
"default.asp" di dalam direktori "css" di root direktori situs web.
Jadi, tag `<a>` digunakan untuk membuat tautan (link) ke halaman web lain, dan dapat menggunakan
URL absolut (dimulai dengan "http://" atau "https://") atau URL relatif (yang relatif terhadap lokasi
halaman web saat ini).
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan tag `<img>` untuk menampilkan
gambar di halaman web. Berikut adalah penjelasan tag yang ada:
1. `<img>`: Ini adalah elemen untuk menampilkan gambar di halaman web.
- `src="img_chania.jpg"`: Ini adalah atribut src yang digunakan untuk menentukan lokasi atau path
file gambar yang akan ditampilkan. Dalam contoh ini, gambar yang akan ditampilkan adalah
"img_chania.jpg" yang berada di direktori yang sama dengan halaman web saat ini.
- `alt="Flowers in Chania"`: Ini adalah atribut alt yang digunakan untuk memberikan teks alternatif
(alternate text) untuk gambar. Teks ini akan ditampilkan jika gambar tidak dapat dimuat atau untuk
membantu aksesibilitas bagi pengguna dengan keterbatasan penglihatan. Dalam contoh ini, teks
alternatif yang diberikan adalah "Flowers in Chania".
- `width="460" height="345"`: Ini adalah atribut-atribut width dan height yang digunakan untuk
menentukan lebar (width) dan tinggi (height) gambar dalam piksel. Dalam contoh ini, gambar akan
ditampilkan dengan lebar 460 piksel dan tinggi 345 piksel.
Jadi, tag `<img>` digunakan untuk menampilkan gambar di halaman web dengan menggunakan
atribut src untuk menentukan lokasi gambar, atribut alt untuk teks alternatif, serta atribut width dan
height untuk mengatur ukuran gambar.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan tag `<link>` untuk menautkan (link)
dokumen HTML dengan favicon (ikon situs web). Berikut adalah penjelasan tag yang ada:
1. `<link>`: Ini adalah elemen yang digunakan untuk menautkan dokumen HTML dengan dokumen
luar, seperti file CSS, dokumen lainnya, atau dengan favicon.
- `rel="icon"`: Ini adalah atribut rel yang digunakan untuk menentukan hubungan (relationship)
antara dokumen HTML dan file yang ditautkan. Dalam hal ini, atribut rel digunakan untuk
menandakan bahwa tautan tersebut adalah untuk ikon situs web (favicon).
- `type="image/x-icon"`: Ini adalah atribut type yang digunakan untuk menentukan tipe MIME
(Multipurpose Internet Mail Extensions) dari file yang ditautkan. Dalam contoh ini, tipe MIME yang
diberikan adalah "image/x-icon", yang menandakan bahwa file yang ditautkan adalah gambar
dengan format ikon.
- `href="/images/favicon.ico"`: Ini adalah atribut href yang digunakan untuk menentukan lokasi
atau path dari file yang akan ditautkan. Dalam contoh ini, ikon situs web (favicon) diambil dari
direktori "/images" dengan nama file "favicon.ico".
Jadi, tag `<link>` digunakan untuk menautkan dokumen HTML dengan file eksternal, seperti favicon,
dan dapat digunakan untuk menambahkan ikon situs web di tab browser atau di bookmark situs.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
Dokumen HTML yang Anda berikan adalah kerangka dasar dari halaman web yang sederhana.
Berikut adalah penjelasan tag yang ada:
memberitahu browser bahwa halaman ini ditulis dalam format HTML.
2. `<html>`: Ini adalah elemen root dari dokumen HTML yang menandakan dimulainya dokumen
HTML.
3. `<head>`: Ini adalah elemen yang berisi informasi tentang dokumen HTML, seperti judul halaman,
metadata, dan referensi ke file eksternal, seperti CSS atau JavaScript.
- `<title>`: Ini adalah elemen yang digunakan untuk menentukan judul halaman web yang akan
ditampilkan di title bar atau tab browser pengguna.
4. `<body>`: Ini adalah elemen yang berisi semua konten yang ingin ditampilkan di halaman web.
- Konten di dalam elemen `<body>` adalah konten yang akan ditampilkan di halaman web tersebut.
Dalam contoh ini, teks "The content of the document......" akan ditampilkan di halaman web.
Jadi, dokumen HTML tersebut adalah kerangka dasar dari halaman web yang sederhana, yang terdiri
dari elemen-elemen dasar seperti `<html>`, `<head>`, `<title>`, dan `<body>`.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Dokumen HTML yang Anda berikan menunjukkan penggunaan tag-tag HTML untuk membuat tabel
dan gaya CSS untuk memformat tabel tersebut. Berikut adalah penjelasan tag-tag yang digunakan:
1. `<table>`: Ini adalah elemen utama untuk membuat tabel di HTML. Isi tabel didefinisikan di antara
tag pembuka `<table>` dan tag penutup `</table>`.
2. `<tr>`: Ini adalah elemen untuk membuat baris (row) dalam tabel. Setiap baris tabel didefinisikan
di antara tag pembuka `<tr>` dan tag penutup `</tr>`.
3. `<th>`: Ini adalah elemen untuk membuat sel header (header cell) dalam tabel. Sel header
didefinisikan di antara tag pembuka `<th>` dan tag penutup `</th>`. Isinya akan secara default
ditampilkan dalam teks tebal dan tengah.
4. `<td>`: Ini adalah elemen untuk membuat sel data (data cell) dalam tabel. Sel data didefinisikan di
antara tag pembuka `<td>` dan tag penutup `</td>`.
5. `<style>`: Ini adalah elemen yang digunakan untuk menuliskan aturan gaya CSS di dalam dokumen
HTML. Dalam contoh ini, aturan gaya CSS digunakan untuk memformat tampilan tabel.
- `table {...}`: Ini adalah aturan gaya CSS yang menargetkan semua tabel dalam dokumen HTML.
Aturan ini mengatur font family, mengatur batas-batas antar sel, dan mengatur lebar tabel menjadi
100%.
- `td, th {...}`: Ini adalah aturan gaya CSS yang menargetkan semua sel data (`<td>`) dan sel header
(`<th>`) dalam tabel. Aturan ini mengatur batas-batas antar sel, penataan teks menjadi rata kiri, dan
memberikan jarak (padding) 8 piksel di dalam sel.
- `tr:nth-child(even) {...}`: Ini adalah aturan gaya CSS yang menargetkan setiap baris genap dalam
tabel. Aturan ini memberikan latar belakang berwarna abu-abu untuk baris genap, sehingga
membuatnya lebih mudah dibedakan dari baris ganjil.
Jadi, dokumen HTML tersebut menggunakan tag-tag HTML untuk membuat tabel, dan menggunakan
gaya CSS untuk memformat tampilan tabel menjadi lebih rapi dan mudah dibaca.

HTML Penjelaasan

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Penjelaasan

Diunggah oleh

Hak Cipta:

Format Tersedia

<!

<h1>MAHASISWA STMIK BINA BANGSA</h1>

<h1>MAHASISWA STMIK BINA BANGSA</h1>

<h1>STMIK BINA BANGSA</h1>

<p>Mahasiswa STMIK BINA BANGSA, Angkatan 2021, Jurusan Sistem Komputer,

<p>STMIK BINA BANGSA<br>merupakan singkatan dari

<h2>The style Attribute</h2>

<p style="color:red;">This is a red paragraph.</p>

<h1>STMIK BINA BANGSA </h1>

<p>This is a paragraph 1.</p>

<h1 style="background-color:skyblue;">This is a heading</h1>

4. `style="background-color:powderblue;"`: Atribut style yang digunakan untuk menentukan gaya

6. `style="background-color:skyblue;"`: Atribut style yang digunakan untuk menentukan gaya atau

8. `style="background-color:tomato;"`: Atribut style yang digunakan untuk menentukan gaya atau

<p><b>This text is bold</b></p>

<p>Quotes untuk Hari Ini:</p>

2. `style="background-color:Tomato;"`: Atribut style yang digunakan untuk mengatur latar belakang

9. `style="color:MediumSeaGreen;"`: Atribut style yang digunakan untuk mengatur warna teks

1. `<img>`: Ini adalah elemen untuk menampilkan gambar di halaman web.

Anda mungkin juga menyukai