Scribd
Unggah
37 tayangan6 halaman

Modul PW2

Modul ini membahas struktur dasar HTML dan elemen-elemennya, meliputi tag-tag utama seperti <html>, <head>, <body>, <h1-6>, <p>, <a>, <pre>, dan <div>. Modul ini juga menjelaskan atribut-atribut pada elemen dan contoh-contoh penggunaan tag-tag HTML.

Diunggah oleh

Mik Asa
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 PDF, TXT atau baca online di Scribd
37 tayangan6 halaman

Modul PW2

Modul ini membahas struktur dasar HTML dan elemen-elemennya, meliputi tag-tag utama seperti <html>, <head>, <body>, <h1-6>, <p>, <a>, <pre>, dan <div>. Modul ini juga menjelaskan atribut-atribut pada elemen dan contoh-contoh penggunaan tag-tag HTML.

Diunggah oleh

Mik Asa
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

1

MODUL PERKULIAHAN

W182100012 –
Pemrograman
Web
Struktur Dasar HTML

Abstrak Sub-CPMK (lihat di RPS)

Modul ini berisi tentang Mahasiswa mampu memahami dan


struktur dasar dari HTML menjelaskan Konsep HTML,
dan element-element HTML. mempraktekkan dan berlatih
menggunakan elemen-elemen HTML

Fakultas Program Studi Tatap Muka Disusun Oleh

Ilmu Komputer Sistem Informasi


02 Abdi Wahab S.Kom., MT
HTML Basic
Dasar HTML
HTML adalah bahasa markup yang menyediakan tag bagi Anda untuk mengatur informasi
untuk Web. Dengan menyisipkan tag HTML ke dalam halaman teks dan konten lainnya,
Anda menandai bagian halaman mana yang akan memberikan struktur pada dokumen.
Mengikuti struktur, agen pengguna seperti browser dapat melakukan rendering di layar
atau pemrosesan lainnya. Dengan demikian, browser memproses dan menyajikan
dokumen HTML berdasarkan struktur mark-up. Render yang tepat ditentukan oleh
browser dan mungkin berbeda untuk browser yang berbeda. Misalnya, browser visual
umum seperti Internet Explorer (IE) dan Netscape Navigator (NN) membuat halaman Web
di layar. Sebuah browser untuk tunanetra, di sisi lain, akan menyuarakan konten sesuai
dengan markup-nya.
Oleh karena itu, halaman Web dalam HTML berisi dua bagian: tag markup dan konten.
Tag HTML selalu diapit tanda kurung siku (< >). Dengan cara ini, mereka mudah
dibedakan dari konten halaman.
Anda disarankan untuk membuat halaman Web dengan XHTML 1.0, versi HTML saat ini.
Dokumen XHTML dalam bahasa Inggris 1 memiliki bentuk dasar berikut:
<html>
<head>
<title>My First Web</title>
</head>
<body>
<p>Hello, My Name is Budi</p>
<p>This is my first code in HTML</p>
</body>
</html>
Elemen kepala berisi elemen informasi untuk seluruh dokumen. Misalnya, elemen judul
(selalu diperlukan) menentukan judul halaman yang:
1. ditampilkan di bilah judul jendela browser
2. digunakan dalam membuat bookmark untuk halaman
Elemen body mengatur konten dokumen.

Elemen dan Entitas

2021 Nama Mata Kuliah dari Modul Biro Bahan Ajar E-learning dan MKCU
2 Nama Dosen Pengampu http://pbael.mercubuana.ac.id/
HTML menyediakan lebih dari 90 elemen berbeda. Umumnya, mereka termasuk dalam
kategori ini:
o Top-level elements: html, head, and body.
o Head elements: element yang berada dibagian atas (head), seperti title, style, link,
meta, base, dan script.
o Block level elements: element yang bersifat paragraph, seperti h1 – h6 (heading),
p, pre (pre-formatted text), div (designated block), ul, ol, dl (list), table, dan form.
Ketika ditampilkan akan muncul di baris baru.
o Inline elements: element yang satu baris, seperti a, br, img, em, strong, sub, sup,
code, var, span.
Ketika sebuah element diletakkan di dalam sebuah element, maka element yang berada
di paling luar adalah parent, yang di dalam adalah child.

Atribut di HTML
Setiap elemen di dalam HTML memiliki atribut inti sebagai berikut:
o id: identifikasi element di page yang unik. Tiap element id harus berbeda.
o style: memberikan style untuk masing-masing element.
o class: untuk menentukan style class di element.
o class: untuk menentukan style class di element.

Komentar di dalam HTML


Komentar di halaman HTML diberikan sebagai <!-- contoh komentar -->. Elemen teks dan
HTML di dalam tag komentar diabaikan oleh browser. Pastikan untuk tidak memasukkan
dua tanda hubung (--) berturut-turut di dalam komentar.

HTML Heading
HTML heading didefinisikan dengan tag <h1> hingga <h6>.
<h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang
paling tidak penting:
Contoh:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraph
Paragraf HTML didefinisikan dengan tag <p>:

2021 Nama Mata Kuliah dari Modul Biro Bahan Ajar E-learning dan MKCU
3 Nama Dosen Pengampu http://pbael.mercubuana.ac.id/
Contoh:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
Tautan (link) HTML didefinisikan dengan tag <a>:
Contoh:
<a href="https://www.google.com">This is a link</a>

Tujuan tautan ditentukan dalam atribut href.

HTML <pre> Element


Elemen HTML <pre> mendefinisikan teks yang telah diformat sebelumnya.
Teks di dalam elemen <pre> ditampilkan dalam font dengan lebar tetap (biasanya
Courier), dan mempertahankan spasi dan jeda baris:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>

HTML List
HTML list memungkinkan pengembang web untuk mengelompokkan satu set item terkait
dalam list.

List HTML tidak berurut


Daftar tidak berurutan dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.
Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

2021 Nama Mata Kuliah dari Modul Biro Bahan Ajar E-learning dan MKCU
4 Nama Dosen Pengampu http://pbael.mercubuana.ac.id/
List HTML berurut
List HTML yang akan diurutkan dimulai dengan tag <ol>. Setiap item daftar dimulai
dengan tag <li>.
Contohnya:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Div Tag


DIV pada HTML merupakan tag yang mendeskripsikan suatu bagian atau divisi yang
sifatnya fleksibel, artinya penggunaan tag DIV bisa dgunakan sesuai dengan kebutuhan.
Tag <div> mendefinisikan divisi atau bagian dalam dokumen HTML.
Elemen <div> sering digunakan sebagai wadah untuk elemen HTML lainnya.
Contoh:
<div>Hello World</div>

HTML span Tag


Tag <span> adalah wadah sebaris yang digunakan untuk menandai bagian dari teks, atau
bagian dari dokumen.
Tag <span> mudah ditata oleh CSS atau dimanipulasi dengan JavaScript menggunakan
atribut class atau id.
Tag <span> sangat mirip dengan elemen <div>, tetapi <div> adalah elemen level blok dan
<span> adalah elemen sebaris.
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Daftar Pustaka
Wang, Paul,. Katila, Sanda. 2003 An Introduction to Web Design+Programming.
Brooks/Cole Book.
Thomas A. Powel. 2010. HTML & CSS: The Complete Reference, Fifth Edition. The
McGraw-Hill: United States.

2021 Nama Mata Kuliah dari Modul Biro Bahan Ajar E-learning dan MKCU
5 Nama Dosen Pengampu http://pbael.mercubuana.ac.id/
Ducket, Jon. 2004. Beginning Web Programming with HTML, XHTML, and CSS. Wiley
Publishing: Canada.

2021 Nama Mata Kuliah dari Modul Biro Bahan Ajar E-learning dan MKCU
6 Nama Dosen Pengampu http://pbael.mercubuana.ac.id/

Anda mungkin juga menyukai