2 Pengenalan HTML

MODUL KULIAH
PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH
Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester
Kelas PKKP
Dosen Jefri Rahmadian S.Kom
Pertemuan : 2 (Dua) Waktu : Sabtu, 1 Oktober 2011
Modul 2 (Dua)
Topik Pengenala HTML

Sub Topik Dasar-dasar Penulisan HTML
Materi  Dokumen HTML
 Elemen HTML
 Atribut HTML
 Heading HTML
Tujuan Mahasiswa memahami tentang HTML dan mengetahui
penulisan HTML sebagai dasar pembuatan web
Apa itu HTML?
HTML adalah bahasa untuk mendeskripsikan halaman web.
 HTML singkatan Hyper Text Markup Language
 HTML bukan bahasa pemrograman, ini adalah bahasa markup
 Sebuah bahasa markup adalah serangkaian tag markup
 HTML menggunakan tag markup untuk menjelaskan halaman web
Tag HTML
Tag markup HTML biasanya disebut tag HTML
 Tag HTML adalah kata kunci dikelilingi oleh tanda kurung siku seperti <html>
 Tag HTML biasanya datang dalam pasangan seperti <b> dan </ b>
 Tag pertama dalam pasangan adalah tag pembuka, tag kedua adalah tag akhir
 Mulai dan tag akhir juga disebut tag pembuka dan tag penutup
Dokumen HTML = Halaman Web

 dokumen HTML mendeskripsikan halaman web
 dokumen HTML berisi tag HTML dan teks biasa
 dokumen HTML juga disebut halaman web
Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk
membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak
menampilkan tag HTML, tapi menggunakan tag untuk menafsirkan isi halaman:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Penjelasan dari contoh diatasa adalah

 Teks antara <html> dan </ html> menggambarkan halaman web
 Teks antara <body> dan </ body> adalah isi halaman yang terlihat
 Teks antara <h1> dan </ h1> menampilkan sebagai Heading
 Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf
Mengedit HTML
HTML dapat ditulis dan diedit menggunakan berbagai editor seperti Dreamweaver dan
Visual Studio. Namun, bisa juga menggunakan editor teks biasa (seperti Notepad) untuk
mengedit HTML. Menggunakan editor teks biasa adalah cara terbaik untuk mempelajari
HTML.
Extension File HTM atau File HTML

Bila Anda menyimpan file HTML, Anda dapat menggunakan baik htm atau ekstensi file.
Html.. Tidak ada perbedaan, itu sepenuhnya terserah Anda.
Elemen HTML
Elemen HTML adalah segalanya dari tag awal sampai akhir tag:
Start tag * Kandungan unsur End tag *
<p> Ini adalah paragraf </ P>
<a href="default.htm"> Ini adalah sebuah link </ A>
<br />
* Tag awal adalah sering disebut tag pembuka . Tag akhir ini sering disebut tag penutup .
Elemen Sintax HTML

 Elemen HTML dimulai dengan start tag / opening tag
 Elemen HTML diakhiri dengan end tag / Closing tag
 Semua Isi elemen adalah antara tag awal dan tag akhir
Elemen HTML Bersarang

Kebanyakan HTML elemen dapat bersarang (dapat berisi elemen-elemen lain HTML).
dokumen HTML terdiri dari elemen HTML bersarang
Contoh dokumen HTML :
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
Contoh di atas mengandung 3 elemen HTML.
Penjelasan Contoh HTML
Unsur <p>:
<p> Ini adalah paragraf pertama saya.</p>

Elemen <p> mendefinisikan sebuah paragraf dalam dokumen HTML.
elemen ini memiliki <p> tag awal dan tag akhir </ p>.
Isi elemen: Ini adalah paragraf pertama saya.
Unsur <body>:
<body>
<p> Ini adalah paragraf pertama saya.</p>
</body>
Unsur <body> mendefinisikan tubuh dokumen HTML.

elemen ini memiliki <body> tag awal dan tag akhir </ body>.
Isi elemen adalah elemen lain HTML
Unsur <html>:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
Unsur <html> mendefinisikan dokumen HTML secara keseluruhan.
elemen ini memiliki <html> tag pembuka dan tag penutup </ html>.
Isi elemen elemen HTML lain (elemen body).
Jangan Lupakan Tag Akhir

Beberapa elemen HTML mungkin muncul dengan benar bahkan jika Anda lupa tag penutup:
<p>This is a paragraph
<p>This is a paragraph
Contoh di atas bekerja di hampir semua browser, karena tag penutup dianggap opsional.
Jangan bergantung pada ini. Banyak elemen HTML akan menghasilkan hasil yang tidak
diharapkan dan / atau kesalahan jika Anda lupa tag akhir.
Elemen HTML Kosong

elemen HTML dengan tanpa konten disebut elemen kosong.
<br> merupakan elemen kosong tanpa tag penutup (tag <br> mendefinisikan istirahat baris).
Tip HTML : Gunakan huruf kecil untuk Tag

tag HTML tidak case sensitif : <P> punya arti yang sama dengan <p>. Banyak situs web
menggunakan tag HTML huruf besar. Tag disarankan menggunakan huruf kecil karena
World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan
tuntutan tag huruf kecil dalam XHTML.
XHTML merupakan singkatan dari eXtensible Hyper Text Markup Language. World Wide
Web Consortium (W3C) adalah suatu konsorsium yang bekerja untuk mengembangkan
standar-standar untuk World Wide Web. Spesifikasi teknologi-teknologi utama yang dipakai
sebagai basis utama web, seperti URL (Uniform Resource Locator), HTTP (Hypertext
Transfer Protocol), dan HTML (HyperText Markup Language) dikembangkan dan diatur oleh
badan ini.
Atribut HTML
Elemen HTML dapat memiliki atribut
Atribut memberikan informasi tambahan tentang suatu elemen
Atribut selalu ditentukan dalam start tag
Atribut datang dalam pasangan nama / nilai seperti: name = "value"
Contoh Atribut :
Link HTML didefinisikan dengan tag <a>. Alamat link ditetapkan dalam atribut href :
Contoh penulisan :
<html>
<body>
<a href=" http://stti.i-tech.ac.id">

This is a link</a>
</body>
</html>
Selalu beri tanda kutip pada Nilai Atribut

Nilai Atribut harus selalu diapit tanda kutip. tanda kutip ganda yang paling umum, namun
tanda kutip single style juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu
sendiri berisi tanda kutip, perlu untuk menggunakan tanda kutip tunggal : name = 'John
"Shotgun" Nelson'
Referensi Atribut HTML

Daftar latribut untuk setiap elemen HTML :
Tag Deskripsi
 Mendefinisikan komentar
<! DOCTYPE> Mendefinisikan jenis dokumen
<a> Mendefinisikan anchor
<abbr> Mendefinisikan singkatan
<acronym> Mendefinisikan singkatan
<address> Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
<area /> Mendefinisikan area dalam peta-image
<b> Mendefinisikan teks tebal
<base /> Mendefinisikan sebuah alamat default atau target standar untuk
semua link pada halaman
<bdo> Mendefinisikan arah teks
<big> Mendefinisikan teks besar
<blockquote> Mendefinisikan sebuah kutipan panjang
<body> Mendefinisikan dokumen tubuh
<br /> Mendefinisikan sebuah line break single
<button> Mendefinisikan tombol push
<caption> Mendefinisikan sebuah judul tabel
<cite> Mendefinisikan kutipan
<code> Mendefinisikan kode teks komputer
<col /> Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam
tabel
<colgroup> Mendefinisikan kelompok kolom dalam tabel untuk pemformatan
<dd> Mendefinisikan deskripsi istilah dalam daftar definisi
<del> Mendefinisikan teks yang dihapus
<dfn> Mendefinisikan sebuah istilah definisi
<div> Mendefinisikan sebuah bagian dalam dokumen
<dl> Mendefinisikan sebuah daftar definisi
<dt> Mendefinisikan sebuah istilah (item) dalam daftar definisi
<em> Mendefinisikan teks menekankan
<fieldset> Mendefinisikan sebuah perbatasan sekitar elemen dalam bentuk
<form> Mendefinisikan HTML formulir untuk input pengguna
<FRAME /> Mendefinisikan jendela (bingkai) dalam frameset
<frameset> Mendefinisikan suatu set frame
<h1> untuk <h6> Mendefinisikan HTML pos
<head> Mendefinisikan informasi tentang dokumen
<hr /> Mendefinisikan garis horizontal
<html> Mendefinisikan HTML dokumen
<i> Mendefinisikan teks miring
<iframe> Mendefinisikan frame inline
<img /> Mendefinisikan gambar
<input /> Mendefinisikan input kontrol
<ins> Mendefinisikan teks yang disisipkan
<kbd> Mendefinisikan teks keyboard
<label> Mendefinisikan label untuk suatu elemen input
<legend> Mendefinisikan keterangan untuk elemen fieldset
<li> Mendefinisikan item daftar
<link /> Mendefinisikan hubungan antara dokumen dan sumber eksternal
<map> Mendefinisikan gambar-map
<meta /> Mendefinisikan metadata tentang dokumen HTML
<noframes> Mendefinisikan kandungan alternatif untuk pengguna yang tidak
mendukung frame
<noscript> Mendefinisikan kandungan alternatif untuk pengguna yang tidak
mendukung skrip-skrip sisi klien
<object> Mendefinisikan sebuah objek tertanam
<ol> Mendefinisikan ordered list
<optgroup> Mendefinisikan kelompok opsi terkait dalam daftar pilih
<option> Mendefinisikan pilihan dalam daftar pilih
<p> Mendefinisikan paragraf
<param /> Mendefinisikan parameter untuk objek
<pre> Mendefinisikan teks terformat
<q> Mendefinisikan kutipan pendek
<samp> Mendefinisikan sampel kode komputer
<script> Mendefinisikan sebuah script sisi klien
<select> Mendefinisikan daftar pilih (daftar drop-down)
<small> Mendefinisikan teks kecil
<span> Mendefinisikan sebuah bagian dalam dokumen
<strong> Mendefinisikan teks yang kuat
<style> Mendefinisikan gaya informasi untuk dokumen
<sub> Mendefinisikan teks subscript
<sup> Mendefinisikan teks superscripted
<table> Mendefinisikan tabel
<tbody> Group isi tubuh dalam tabel
<td> Mendefinisikan sebuah sel dalam tabel
<textarea> Mendefinisikan teks multi-line input kontrol
<tfoot> Groups isi footer dalam sebuah tabel
<th> Mendefinisikan sebuah sel header dalam sebuah tabel
<thead> Group isi header dalam sebuah tabel
<title> Mendefinisikan judul dokumen
<tr> Mendefinisikan sebuah baris dalam tabel
<tt> Mendefinisikan teks teletype
<ul> Mendefinisikan unordered list
<var> Mendefinisikan bagian variabel teks
HTML Heading
 Pentingnya Heading
Gunakan HTML judul untuk judul saja. Jangan gunakan judul untuk membuat teks Besar
atau Tebal .Mesin pencari menggunakan judul Anda ke indeks struktur dan isi dari halaman
web Anda. Karena pengguna dapat menelusuri halaman yang ada dengan judul tersebut,
adalah penting untuk menggunakan Heading untuk menunjukkan struktur dokumen.
Heading H1 digunakan sebagai judul utama, diikuti dengan judul H2, demikian seterusnya.
Heading atau pos HTML didefinisikan dengan tag <h1> sampai <h6>.
Contoh Penulisan :
<h1>This is a heading</h1>
Contoh Penggunaan
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
 HTML Lines
Tag <hr /> menciptakan garis horizontal dalam sebuah halaman HTML. Unsur hr dapat
digunakan untuk konten terpisah:
Contoh Penulisan :
<p>This is a paragraph</p>
<hr />
<hr />
Contoh Penggunaan :
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<hr />
<hr />
</body>
</html>
HTML Paragraf
paragraf HTML didefinisikan dengan tag <p>.
Contoh Penulisan :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Contoh Penggunaan
<html>
<body>
</body>
</html>
HTML Line Breaks
Gunakan tag <br/> jika ingin mebuat baris kosong (baris baru) tanpa perlu memulai sebuah
paragraf baru
Contoh Penulisan
<p>This is<br />a para<br />graph with line breaks</p>
Contoh Penggunaan
<html>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>
HTML Output
Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau
baris ekstra dalam kode HTML Anda. Browser akan menghapus spasi ekstra dan garis
ekstra saat halaman ditampilkan. Setiap jumlah baris dihitung sebagai satu baris, dan
sejumlah ruang dihitung sebagai satu spasi.
Contoh :
<html>
<body>
<p>
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.

</p>
<p>Note that your browser ignores the layout!</p>
</body>
</html>
Memformat Teks HTML

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti tebal atau
teks miring. Tag ini disebut format HTML tag
Contoh Penulisan :
<html>
<body>
<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Tag Deskripsi
<b> Mendefinisikan teks tebal
<big> Mendefinisikan teks besar
<em> Mendefinisikan teks penekanan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks yang kuat
<sub> Mendefinisikan teks subscript
<sup> Mendefinisikan teks superscripted
<ins> Mendefinisikan teks yang disisipkan
<del> Mendefinisikan teks yang dihapus
HTML Link
Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk
mengklik sendiri agar bisa menuju dari satu halaman ke halaman yang lain.
link pada HTML didefinisikan dengan tag <a>.
HTML Hyperlink (Link)

Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik
untuk melompat ke dokumen baru atau bagian baru di dalam dokumen saat ini. Bila Anda
memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil.
Link yang ditentukan dalam HTML menggunakan tag <a>.
Tag <a> dapat digunakan dalam dua cara:
1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama
Contoh Penulisan :
<a href=" http://stti.i-tech.ac.id/">Kunjungi Link Ini</a>
Contoh Penggunaan
<html>
<body>
<a href=" http://stti.i-tech.ac.id/">

Kunjungi Link Ini</a>
</body>
</html>

2 Pengenalan HTML

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

2 Pengenalan HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Pertemuan : 2 (Dua) Waktu : Sabtu, 1 Oktober 2011

Topik Pengenala HTML

Dokumen HTML = Halaman Web

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Penjelasan dari contoh diatasa adalah

Extension File HTM atau File HTML

Elemen Sintax HTML

Elemen HTML Bersarang

Contoh di atas mengandung 3 elemen HTML.

Penjelasan Contoh HTML

<p> Ini adalah paragraf pertama saya.</p>

Unsur <body> mendefinisikan tubuh dokumen HTML.

Jangan Lupakan Tag Akhir

Elemen HTML Kosong

Tip HTML : Gunakan huruf kecil untuk Tag

<a href=" http://stti.i-tech.ac.id">

Selalu beri tanda kutip pada Nilai Atribut

Referensi Atribut HTML

<h1>This is heading 1</h1>

HTML Line Breaks

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<p>Note that your browser ignores the layout!</p>

Memformat Teks HTML

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

HTML Hyperlink (Link)

<a href=" http://stti.i-tech.ac.id/">Kunjungi Link Ini</a>

<a href=" http://stti.i-tech.ac.id/">

Anda mungkin juga menyukai