Scribd
Unggah
6 tayangan37 halaman

03 Pertemuan-03 HTML Dasarz

HTML, atau Hyper Text Markup Language, adalah bahasa markup yang digunakan untuk mendeskripsikan halaman web dengan menggunakan markup tags. Sejarah HTML dimulai dari tahun 1980 dengan pengembangan SGML, dan telah mengalami banyak versi hingga HTML 5 yang dirilis pada tahun 2008. HTML documents berisi HTML tags dan plain text yang diinterpretasikan oleh web browser untuk menampilkan konten di halaman web.

Diunggah oleh

hans4yete
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
6 tayangan37 halaman

03 Pertemuan-03 HTML Dasarz

HTML, atau Hyper Text Markup Language, adalah bahasa markup yang digunakan untuk mendeskripsikan halaman web dengan menggunakan markup tags. Sejarah HTML dimulai dari tahun 1980 dengan pengembangan SGML, dan telah mengalami banyak versi hingga HTML 5 yang dirilis pada tahun 2008. HTML documents berisi HTML tags dan plain text yang diinterpretasikan oleh web browser untuk menampilkan konten di halaman web.

Diunggah oleh

hans4yete
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/ 37

HTML

Dasar

Oleh:
Zaidir, ST., M.Cs
Apa itu HTML?
• HTML merupakan suatu bahasa yang
digunakan untuk mendeskripsikan web
pages.
• HTML singkatan dari Hyper Text
Markup Language.
• HTML bukanlah programming language,
tetapi merupakan suatu markup
language.
• Suatu markup language merupakan
serangkaian markup tags.
• HTML menggunakan markup tags
untuk mendeskripsikan web pages.
HTML Markup Tag
• HTML markup tags seringkali disebut
HTML tags
• HTML tags merupakan keywords yang
diapit dengan kurung lancip <tag>
• HTML tags biasanya berpasangan seperti
<b> pasangannya </b>, tapi ada yg tdk
mis. <br>
• Tag yang pertama dalam satu pasangan
menunjukkan start tag (opening tags),
tag yang kedua merupakan end tag
(closing tags).
• Penulisan tag boleh ditulis huruf
kapital/kecil
Sejarah HTML
• Tahun 1980 ketika IBM berniat membuat
bahasa kode untuk menggabungkan teks
dengan perintah pemformatan agar
mengenali elemen dokumen.
• Bahasa yang menggunakan tanda-tanda
ini dinamakan markup language,
sedangkan IBM memberinya nama
Generalized Markup Language (GML).
• 1986, ISO mengeluarkan standarisasi
bahasa markup berdasarkan GML dengan
nama Standard Generalized Markup
Language (SGML).
Sejarah HTML lanjutan..
• Bahasa SGML ini kemudian banyak digunakan di
dunia penerbitan dan percetakan.

• Subset dari SGML ini antara lain:


– XML (eXtensible Markup Language)
– SMIL (Synchronized Multimedia Integration Language)
– MathML (Mathematical Markup Language)
– CML (Chemical Markup Language)

• 1989, Caillau Tim bekerja sama dengan Barners Lee


Robert, ketika mereka bekerja di CERN, sebuah
Lembaga penelitian fisika energi tinggi di Jenewa,
mencoba mengembangkan SGML.
Sejarah HTML lanjutan..
• Dari merekalah lahir HTML atau hyper text
markup language, yang digunakan untuk
membuat halaman website.

• HTML dipopulerkan pertama kali oleh browser


Mosaic.

• Sejak tahun 1990, bahasa pemformatan ini


mengalami perkembangan yang sangat pesat.

• November 1995 IETF (Internet Engineering Task


Force) merilis versi HTML 2.0 yg merupakan
penyempurnaan dari HTML+ (1993), yang
menyusul kemudian versi 3.0 di tahun yg sama
Sejarah HTML lanjutan..

• 1996, World Wide Web Consortium (W3C)


turut mengembangkan HTML untuk
meluncurkan versi 3.2.

• Januari 1997 dirilis secara resmi versi HTML


3.2

• Sejak saat itu, HTML digunakan sebagai


Bahasa standar internet yang dikendalikan
kenggunaannya oleh W3C.

• 18 Desember 1997 dirilis versi HTML 4.0

• 24 April 1998 dirilis versi HTML 4.01


Sejarah HTML lanjutan..

• 26 Januari 2000: XHTML 1.0 dirilis dari rumusan


HTML 4.01 dalam XML. XHTML adalah standar baru
untuk HTML yang bertujuan:
✓ memungkinkan sebuah dokumen web dapat dibaca oleh divais
baru seperti PDA, ponsel, dll
• 31 Mei 2001: XHTML 1.1 dilanjutkan dengan versi 1.2
yg direkomendasikan W3C
• 2002 – 2006 dirilis versi XHTML 2.0 dan minornya
• 22 Januari 2008: W3C merilis versi HTML 5. HTML 5
meningkatkan interoperabilitas (kemampuan aplikasi
dan sistem untuk secara aman dan otomatis bertukar
data tanpa memandang batas-batas geografis, politik,
atau organisasi), dan mengurangi biaya
pengembangan, dengan membuat aturan yang tepat
tentang bagaimana untuk menangani semua elemen
HTML, dan bagaimana memulihkan dari kesalahan.
• 2010: XHTML5 ?
HTML Document=web pages?

• HTML documents menjelaskan dari suatu web pages


• HTML documents berisi HTML tags dan plain text
• HTML documents juga disebut web pages
• Tujuan dari suatu web browser (mis. Internet Explorer, Firefox,
Chrome, Opera, dll) adalah untuk membaca HTML document dan
menampilkannya sebagai web pages.
• Browser tidak akan menampilkan HTML tags, melainkan
menggunakan tags untuk menginterpretasikan content dari page
• Contoh:
<html>
<body>
<h1>My first heading1</h1>
<p>My first paragraph</p>
</body>
</html>
Sintaks HTML
Awal Tag Konten Akhir Tag
<p> Ini paragraf </p>
<a href=“default.htm”> Ini adalah link </a>

• HTML element diawali dengan awal tag


• HTML element diakhiri dengan akhir tag
• Isi element adalah semua yang berada di antara awal tag dan akhir
tag
• Beberapa HTML element tidak memiliki konten/kosong
- <br/>, <img>, <frame>
• Beberapa HTML element tidak memiliki akhir tag
Sintaks HTML
Gambar

Baris baru/break <img src="gambar_kucing.jpg">

<p> <img src="gambar_kucing.jpg" width="200"


Hello, I am height="150">
<br />
trying to create a Bingkai
<br /> <html>
new line <head>
</p> <title>HORIZONTAL FRAME</title>
</head>
<frameset ROWS="80%,20%">
<frame SRC="contoh1.html">
<frame SRC="contoh2.html">
</frameset>
</html>
Sintaks HTML lanjutan…
Penulisan HTML
• Browser HTML menginterpretasikan satu atau
beberapa space yang berdekatan sebagai sebuah
space
teks teks teks teks
dianggap sebagai :
teks teks teks teks
• Browser HTML menginterpretasikan Carriage Return
(Enter) dan indentasi (Tab) sebagai sebuah space
• Ada beberapa karakter khusus yang dapat
direpresentasikan dengan kode tertentu :
– &nbsp; spasi
– &lt; <
– &gt; >
– &amp; &
– &quot; “
– &copy; (c)
– &plusmn; +/-
– &reg; ®
Skema Dasar HTML
Struktur Elemen HTML

• HEAD
➢ Sintaks: <head> <title>ini judul jendela</title></head>
➢ Berisi informasi yang ditujukan untuk browser
➢ Misal: judul jendela, definisi style, dll

• BODY
➢ Sintaks: <body> ...... </body>
➢ Berisi konten yang ditampilkan di halaman web
Empat Jenis Elemen HTML
• Structural
➢ Tanda yang menentukan level atau tingkatan dari sebuah teks
➢ contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan "Golf“
sebagai teks tebal besar yang menunjukkan sebagai Heading 1
• Presentational
➢ Tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks
tersebut
➢ Contoh: <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah
mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks.
• Hypertext
➢ tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke
dokumen lain
➢ Contoh: <a href="http://www.wikipedia.org/">Wikipedia</a> akan menampilkan
Wikipedia sebagai sebuah hyperlink ke URL tertentu),
• Elemen widget
➢ yang membuat objek-objek lain
➢ Contoh: tombol (<button>), list (<li>), dan garis horizontal (<hr>)
Tag Dasar
• HTML:
➢ menandai awal dan akhir dokumen HTML
➢ Sintaks <html>dokumen</html>

• Head:
➢ menandai bagian header dokumen HTML
➢ Sintak: <head>header</head>

• Title:
➢ memberi judul pada dokumen HTML
➢ Sintaks: <title>judul dokumen</title>

• Body:
➢ menandai awal dan akhir isi dokumen
➢ Sintkas
❖ <body>isi dokumen</body>
❖ <body text="#xxxxxx" bgcolor="#xxxxxx“ background="filegambar"
link="#xxxxxx“ vlink="#xxxxxx">isi dokumen</body>
Tag Dasar lanjutan…
• Beberapa atribut dari Tag <body>

Atribut Keterangan
Background Menentukan gambar latar belakang dari
badan dokumen

Bgcolor Menentukan warna latar belakang dari badan


dokumen

Text Menentukan warna teks yang berada di


dalam badan dokumen

Link Menentukan warna teks hyperlink yag


berada dalam badan dokumen
Tag Paragraf

<p>paragraf</p>
Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu
baris kosong sebelum dan sesudahnya.
Tampilan di editor

Tampilan di browser
<p>
Ini adalah homepage pertama saya,karena
saya baru belajar tentang cara membuat Ini adalah homepage pertama saya,karena
homepage. saya baru belajar tentang cara membuat
</p> homepage.

<p>Homepage ini masih dalam tahap Homepage ini masih dalam tahap
pengembangan, oleh karena itu pengembangan, oleh karena itu tampilannya
tampilannya masih terlalu masih terlalu sederhana.
sederhana.</p><p>Saya akan berusaha
untuk terus memperbaiki homepage saya Saya berusaha untuk terus memperbaiki
ini, sehingga semakin lama semakin menarik homepage saya ini, sehingga semakin lama
untuk dilihat.</p> semakin menarik untuk dilihat.
Tag Paragraf

• Tag paragraph <p> <html>


memiliki atribut yaitu <head>
<title>
Align yang berguna Penggunaan Tag Paragraf
untuk menentukan apakah </title>
paragraph tersebut akan </head>
<body>
ditampilkan: <p align="left">
• Left (rata kiri) Tulisan rata kiri
• Right (rata kanan) </p>
• Center (rata tengah) <p align="center">
• Justify (rata kiri dan kanan) Tulisan rata tengah
</p>
<p align="right">
Tulisan rata kanan
</p>
<p align="justify">
Tulisan rata kiri dan kanan
</p>
</body>
</html>
Tag <h1>, <h2>, …. <h6)

• Tag <h1>, <h2>, <h3>,


<html>
<h4>, <h5>, <h6> termasuk <head>
ke dalam tag heading <title>
• Tag ini biasanya digunakan Latihan Tag Heading
untuk menentukan bagian </title>
</head>
bab, subbab, subsubbab <body>
dari teks dalam dokumen <h1> Contoh Heading 1 </h1>
HTML. <h2> Contoh Heading 2 </h2>
• Tag <h1> digunakan untuk <h3> Contoh Heading 3 </h3>
<h4> Contoh Heading 4 </h4>
menentukan heading 1 <h5> Contoh Heading 5 </h5>
yang berukuran paling <h6> Contoh Heading 6 </h6>
besar. </body>
• Tag <h6> digunakan untuk </html>
menentukan heading 6
yang berukuran paling
kecil.
Tag Memformat Teks

• THTML menyediakan beberapa tag yang dapat digunakan untuk


memformat teks dalam web yaitu:
Tag Keterangan
<small> Membuat teks menjadi relative lebih kecil daripada teks lainnya

<big> Membuat teks menjadi relative lebih besar daripada teks


lainnya
<i> Membuat teks tercetak miring
<b> Membuat teks tercetak tebal
<u> Membuat teks tercetak bargaris bawah
<strike> Membuat teks tercoret
<sup> Membuat teks menjadi superscript, contohnya pada angka 2
dalam teks X2
<sub> Membuat teks menjadi subscript, contohnya pada angka 2
dalam teks H2O
Tag Atribut 1 (Bold, Italic,
Underline)
<b>Kalimat yang dicetak tebal</b>
<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digarisbawahi</u>
Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau
digarisbawahi.
Tampilan di editor

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>,


<u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan
<b><i><u>kombinasi</u></i></b> di tengah huruf
normal<p>

Tampilan di browser

Kata dapat dicetak tebal, miring, garis bawah, tebal miring,


dan kombinasi di tengah huruf normal
Tag Tag Atribut 2
(Superscript, Subscript)
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya
untuk rumus matematika atau kimia.
Tampilan di editor

<p>(X<sub>1</sub> + X<sub>2</sub>) = X<sub>1</sub><sup>2</sup> +


X<sub>2</sub><sup>2</sup> + 2X<sub>1</sub>X<sub>2</sub></p>
<p>2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O

Tampilan di browser

(X1 + X2)2 = X12 + X22 + 2X1X2


2H2 + O2 = 2H2O
Tag Ganti Baris (Break Row)

<br>
Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan
(XML style) : <br/>
Tampilan di editor
Ganti baris
<p>Perkenalkan, <br/>
nama saya ZAIDIR, ini adalah<br/>
homepage pertama saya,<br/> Perkenalkan,
karena saya baru belajar tentang nama saya ZAIDIR, ini adalah
cara<br/> membuat homepage. homepage pertama saya, paragraf
</p> karena saya baru belajar tentang cara
membuat homepage.
<p>Homepage ini masih dalam
tahap pengembangan, oleh karena Homepage ini masih dalam tahap pengembangan,
itu tampilannya asih terlalu oleh karena itu tampilannya masih terlalu paragraf
sederhana.</p> sederhana.
Tag Font (face)
• Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna
tertentu.
• Tag : font Parameter : size, face, color

Jenis <font face=“nama font”>kalimat</font>


Nama font = Times New Roman, Arial,
Huruf Courier New, Verdana, dll.

<font face="Times New Roman">Homepage ini masih dalam tahap pengembangan</font><br/>


<font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br/>
<font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br/>
<font face="Verdana">Homepage ini masih dalam tahap pengembangan</font>

Homepage ini masih dalam tahap pengembangan


Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
Tag Font (size)
• Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna
tertentu.
• Tag : font Parameter : size, face, color

Ukuran <font size=“n”>kalimat</font>


<font size=“m”>kalimat</font>
Huruf n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)
m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)
Ukuran
<font size=“1">satu,</font>
<font size=“2">dua,</font>
<font size=“3">tiga,</font>
<font size=“4">empat,</font>
<font size=“5">lima,</font>
<font size=“6">enam,</font>
<font size=“7">tujuh</font>

Ukuran satu, dua, tiga, empat, lima, enam, tujuh


Tag Font (color)
• Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna
tertentu.
• Tag : font Parameter : size, face, color

Warna <font color=“#RRGGBB”>kalimat</font>


RR = 00 .. FF (intensitas warna merah dalam heksadesimal)
Huruf GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)
BB = 00 .. FF (intensitas warna biru dalam heksadesimal)

<b><font color=“#FF0000">Red</font><br/> Red


<font color=“#FF0000">Maroon</font><br/> Maroon
<font color=“#FF0000">Lime</font><br/> Lime
<font color=“#FF0000">Green</font><br/>
Green
<font color=“#FF0000">Blue</font><br/>
<font color=“#FF0000">Navy</font><br/>
Blue
<font color=“#FF0000">Yellow</font><br/> Navy
<font color=“#FF0000">Fuschia</font><br/> Yellow
<font color=“#FF0000">Aqua</font></b> Fuschia
Aqua
Tag Enumerasi
(List, Unnumbered List, Ordered List)

Sintaks: <li>item</li>
• Untuk menandai suatu item daftar (enumerasi), diawali dengan simbol • (bullet)
• Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.
• Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol>
</ol>
Ada beberapa sektor potensial:
<li>Pariwisata</li>
<li>Seni</li> Ada beberapa sektor potensial:
<li>Budaya</li><br /> • Pariwisata
Sektor tersebut merupakan … • Seni
<p>Fasilitas penginapan di Indonesia: • Budaya
<ol> Sektor tersebut merupakan …
<li>Losmen</li><br />
Losmen merupakan tempat penginapan Fasilitas penginapan di Indonesia:
yang berskala kecil 1. Losmen
<li>Hotel</li> Losmen merupakan tempat penginapan
<ul> yang berskala kecil
<li>Hotel melati</li> 2. Hotel
<li>Hotel berbintang</li> o Hotel melati
</ul> o Hotel berbintang
</ol>
Perkembangan dalam … Perkembangan dalam …
Tag Garis Mendatar
(Horizontal Line)

<hr>
membentuk garis pemisah mendatar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<hr />

Perkenalkan, nama saya Zaidir, Perkenakan, nama saya Zaidir, Ini adalah
Ini adalah homepage pertama
homepage pertama saya, karena saya
saya, karena saya baru belajar
tentang cara membuat baru belajar tentang cara membuat
homepage.<hr /> homepage.
Homepage ini masih dalam tahap
pengembangan,oleh karena itu Homepage ini masih dalam tahap
tampilannya masih terlalu pengembangan,oleh karena itu
sederhana. tampilannya masih terlalu sederhana.
Tag Gambar (Image)
<img src="NamaFileGambar"> NamaFileGambar = file gambar yang
mempunyai ekstensi .GIF, .JPG, atau .PNG.
Untuk menampilkan sebuah file gambar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<img src="NamaFileGambar" />
<img src="pasfotoku.jpg" align="left"
/>Perkenalkan, nama saya Zaidir, Ini adalah
homepage pertama saya, karena saya
baru belajar tentang cara membuat
homepage.Homepage ini masih dalam tahap
pengembangan,oleh karena itu tampilannya
masih terlalu <img src="logoku.png"
alt="Logo" /> sederhana. Saya akan
berusaha untuk terus memperbaiki
homepage
saya ini, sehingga semakin lama semakin
menarik untuk dilihat.
Tag Link (Anchor) : teks
<a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda membentuk link ke
URL/file/bagian dokumen lain.
Tag Tabel

Tag Keterangan
<table>……….</table> Mendefinisikan sebuah
table
<th>……….</th> Mendefinisikan sel header
table
<thead……….</thead> Mendefinsikan header table
tanpa dapat di-scroll
<caption>……….</caption> Judul table
<tr>……….</tr> Mendefinsikan baris table
<td>……….</td> Mendefiniskan kolom table
Contoh Penerapan Tag Tabel

<html>
<body>
<table border="1">
<caption>Contoh Tabel di HTML</caption>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>
Atribut Tabel

Atribut Keterangan
Align={left|center|right} Letak table secara horizontal
Valign={top|middle|bottom} Letak table secara vertical
Colspan Meleburkan sejumlah kolom
Rowspan Meleburkan sejumlah baris
Nowrp Mematikan warping dalam sebuah sel
Border Ketebalan table
Bordercolor Warna border
Bordercolorlight Warna border pada bagian atas dan kiri
Bordercolordark Warna border pada bagian bawah dan kanan
Cellpadding Spasi antar data dalam table
Cellspacing Spasi antar sel dalam table
Background Diisi nama image yang digunakan sebagai latar belakang
bgcolor Diisi warna yang digunakan sebagai latar belakang
Penerapan Atribut Tabel
<html>
<body>
<table border="1" cellpadding="10" align="center">
<caption>Contoh Tabel di HTML</caption>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td bgcolor="yellow">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr bgcolor="#00ff80">
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>

Anda mungkin juga menyukai