Pertemuan 6 - Pemrograman Web

PEMROGRAMAN WEB
Total Jumlah Pertemuan: 14x (Sudah Termasuk UAS & UTS)

Topik Pertemuan 6 : Format-Format HTML
Dosen: Ade Clinton Sitepu, S.Si., M.Kom.
Terakreditasi: SK BAN PT No. 413/AK/BAN-PT/Ak-PNB/PT/IX/2019

Kampus Milenial Medan: Jln. Setia Budi No. 20 Simpang Pemda. Tanjung Sari - Medan
Kampus Milenial Serdang Bedagai: Jln. Lintas Tebing Tinggi – Sei Rampah, Depan Bank BRI Kampung Pon – Sei Bamban
Program Studi: Teknik Informatika S1 – Sistem Informasi S1 – Teknik Industri S1 – Teknologi Informasi S1 – Akuntansi D3
Web: http:///milenial.itbi.ac.id
Pertemuan 6
Format-Format HTML
Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Pendahuluan
■ Sebelumnya kita telah mempelajari tag-tag dasar HTML

■ Selanjutnya kita akan mempelajari lebih banyak tag-tag yang bertujuan untuk
memformat text, gambar, list dan tabel di dalam HTML.
■ Sesuai dengan peruntukkannya, tag-tag ini dirancang untuk membuat struktur (konten)
dari halaman web.
■ Web browser akan menampilkan beberapa tag dengan tampilan visual seperti huruf
tebal, huruf kecil, italic, dll. Tampilan visual yang sama bisa didapat menggunakan CSS.

Membuat Huruf Garis Bawah (underline) HTML (tag u
dan tag ins)
■ Penulisan text dengan garis bawah atau underline biasa digunakan untuk menandai kata
atau penekanan kata yang dianggap penting. Untuk membuat karakter dengan garis bawah di
dalam HTML, kita menggunakan tag <u> dan tag <ins>.
■ Berikut adalah contoh cara penulisan dan penggunaan tag <u> dan <ins> di dalam HTML:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Belajar Format Teks HTML</title> <title>Belajar HTML</title>
</head> </head>
<body> <body>
<h3>Saya sedang belajar HTML</h3> <h3>Saya sedang belajar HTML</h3>
<p><u>HTML</u> atau <u>Hypertext Markup Language</u> <p>HTML atau Hypertext Markup Language adalah dasar dari
adalah dasar dari semua halaman web di internet. semua halaman web di internet. Jika anda ingin mempelajari
Jika anda ingin mempelajari cara membuat website, cara membuat website, maka hal pertama yang harus dipelajari adalah
maka hal pertama yang harus dipelajari adalah HTML</p> PHP
</body> <ins>hal pertama yang harus dipelajari adalah HTML</ins></p>
</body>
</html>
</html>

Membuat Huruf Tercoret (Strikethrough) HTML (tag s
dan tag del)
■ Huruf / Text tercoret ini dikenal juga dengan istilah strikethrough.
■ Strikethrough biasanya digunakan untuk mengoreksi text atau bagian dari kalimat. Untuk membuat text
tercoret ini, kita menggunakan tag <s> dan tag <del>.
■ Berikut adalah contoh cara penulisan dan penggunaan ttag <s> dan tag <del> di dalam HTML:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Belajar HTML</title> <title>Belajar HTML</title>
</head> </head>
<body> <body>
<h3>Saya sedang belajar HTML</h3> <h3>Saya sedang belajar HTML</h3>
<p><s>JavaScript</s> HTML adalah dasar dari <p>HTML atau Hypertext Markup Language adalah dasar dari
semua halaman web di internet. Jika anda ingin mempelajari cara semua halaman web di internet.
membuat website, maka hal pertama yang harus dipelajari adalah Jika anda ingin mempelajari cara membuat website, maka
HTML</p> <del>hal pertama yang harus dipelajari adalah PHP</del>
</body> <ins>hal pertama yang harus dipelajari adalah HTML</ins></p>
</body>
</html>
</html>

Atribut align pada Paragraf (tag <p>)
■ Perataan paragraf dapat dilakukan dengan menambahkan atribut align pada tag <p>.
<!DOCTYPE html>
<html>
<head>
<title>Atribut Paragraf di HTML</title>
</head>
<body>
<p align="left">Ini adalah sebuah paragraf yang berisi beberapa
kalimat. Saya sedang belajar HTML. Saat ini belajar paragraf.</p>
<p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang
saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
<p align="center">Ini adalah sebuah paragraf yang berisi beberapa
<p align="justify">Ini adalah sebuah paragraf yang berisi beberapa
</body>
</html>
Atribut align merupakan atribut yang digunakan untuk pertaan teks pada paragraf. Namun, penggunaan tag ini sebaiknya diganti dengan CSS.
Karena atribut align dapat merubah tampilan dari web. Ini sebenarnya tugas dari CSS.

Atribut align pada Paragraf (tag <p>)
■ Contoh perataan menggunakan CSS pada tag <p>.

<!DOCTYPE html>
<html>
<head>
<title>Atribut Paragraf di HTML</title>
</head>
<body>
<p style="text-align: left">Ini adalah sebuah paragraf yang berisi beberapa
<p style="text-align: right">Paragraf adalah kumpulan dari beberapa kalimat yang
saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
<p style="text-align: center">Ini adalah sebuah paragraf yang berisi beberapa
<p style="text-align: justify">Ini adalah sebuah paragraf yang berisi beberapa
</body>
</html>

Tag <hr> untuk Membuat Garis
■ Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.
■ Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal
(horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau
paragraf. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
Saya sedang belajar HTML. Saat ini Sedang,
Belajar tentang paragraf.</p>
<hr />
<p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
</body>
</html>

Mengubah Jenis Font
■ Kita bisa mengganti font dengan style CSS.

■ Kita bisa gunakan properti font-family lalu diberikan nilai dengan nama font yang
akan digunakan. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1>Font untuk Paragraf</h1>
<p style="font-family: Arial;">Ini adalah contoh paragraf yang

menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan
font Arial. Arial adalah salah satu font yang umum digunakan pada
Windows.</p>
<p style="font-family: 'Times New Roman'">Ini adalah paragraf yang

menggunakan font Times New Roman. Font ini juga umum digunakan dalam
penulisan teks. Perhatikan penulisan Times New Roman pada style CSS,
ia diapit dengan tanda petik karena mengandung lebih dari satu kata.</p>
</body>
</html>
Daftar Font Lainnya: https://www.tutorialbrain.com/css_tutorial/css_font_family_list/

Atribut type pada Ordered List (tag <ol>)
■ Ordered List pertemuan sebelumnya diurutkan berdasarkan angka dari 1, 2, 3, sampai

5. Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka
romawi seperti I, II, III?
■ Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag <ol>
dan berikut ini nilai yang bisa diberikan:
■ a untuk alfabet a, b, c, dan seterusnya;
■ A untuk alfabet A, B, C, dan seterusnya;
■ i untuk angka romawi i, ii, iii, dan seterusnya;
■ I untuk angka romawi I, II, III, dan seterusnya

Atribut type pada Ordered List (tag <ol>)
■ Contoh:
<!DOCTYPE html> <h3>List dengan type romawi kapital</h3>
<html> Lanjut <ol type='I'>
<li>Tutorial List di HTML</li>
<head> <li>Tutorial Link di HTML</li>
<title>Ordered List dengan Atribut Type</title> <li>Tutorial Tabel di HTML</li>
</head> </ol>
</body>
<body> </html>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
</ol>

Atribut type pada Unordered List (tag <ul>)
■ Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil/disc
(•). Kita juga bisa menggantinya dengan atribut type.
■ Berikut ini nilai yang bisa diberikan untuk atribut type:
■ square untuk simbol persegi (◼);
■ disc (default) untuk simbol lingkaran disc (•);
■ none tidak memakai simbol;
■ circle untuk simbol lingkaran (○);

Atribut type pada Unordered List (tag <ul>)
■ Contoh:
<!DOCTYPE html> <h1>Pelajari juga:</h1>
<html> Lanjut <ul type="disc">
<head> <li>JSON</li>
<title>Membuat Unordered List</title> <li>XML</li>
</head> <li>Markdown</li>
</ul>
<body> </body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1> </html>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>

Atribut style pada tag <img/>
■ Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah
elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek
tertentu.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Style Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="https://s.id/1mIIm" style="width: 160px;border: 3px solid red;" />
<img src="https://s.id/1mIIm" style="width: 160px;border-radius: 10px;" />
<img src="https://s.id/1mIIm" style="width: 100px;height: 100px;border-radius: 100%;" />
</p>
</body>
</html>
❏ Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah.
❏ Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan pada pojok gambar.
❏ Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan lingkaran.

Sekian dan Terima Kasih

Pertemuan 6 - Pemrograman Web

Diunggah oleh

Informasi Dokumen

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

Pertemuan 6 - Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB

Total Jumlah Pertemuan: 14x (Sudah Termasuk UAS & UTS)

Terakreditasi: SK BAN PT No. 413/AK/BAN-PT/Ak-PNB/PT/IX/2019

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

■ Sebelumnya kita telah mempelajari tag-tag dasar HTML

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

■ Contoh perataan menggunakan CSS pada tag <p>.

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

■ Kita bisa mengganti font dengan style CSS.

<p style="font-family: Arial;">Ini adalah contoh paragraf yang

<p style="font-family: 'Times New Roman'">Ini adalah paragraf yang

Daftar Font Lainnya: https://www.tutorialbrain.com/css_tutorial/css_font_family_list/

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

■ Ordered List pertemuan sebelumnya diurutkan berdasarkan angka dari 1, 2, 3, sampai

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Ade Clinton Sitepu, S.Si., M.Kom | ITBI Kampus Milenial

Anda mungkin juga menyukai