Pertemuan 2. HTML Dasar

Pertemuan 2
Pemrograman Web dan

Basis Data
Program Studi Teknik Telekomunikasi

Jurusan Teknik Elektro
Politeknik Negeri Jakarta
Pertemuan 2
 Materi Perkuliahan :
HTML Dasar
 Tujuan Pembelajaran :
1. Mahasiswa memahami tentang sintaks dan tag dasar dari HTML.
2. Mahasiswa memahami kaidah serta aturan penulisan dalam HTML.
3. Mahasiswa dapat membuat dan mengimplementasikan tag HTML
dalam aplikasi program sederhana.
Cakupan Materi
Pengenalan HTML
1. Definisi HTML
2. Struktur HTML
3. Tag Dasar HTML
4. Kemampuan HTML
5. Cara Kerja HTML
HTML
Tag
(Hyper Text Markup Language) HTML
 Bahasa pemrograman web yang digunakan untuk menulis

dokumen serta membuat halaman situs dalam web.
 Kode HTML dibuat dengan menggunakan teks editor seperti
Notepad hingga Ms. Word atau dengan HTML editor.
Pengenalan Kode HTML
 Tag adalah kode yang digunakan untuk me-mark-up teks ASCII

menjadi file HTML.
 Tag dalam HTML diapit dengan tanda kurung siku <>.
 Penulisan tag HTML tidak case sensitive.
 Halaman HTML standar menggunakan tag <html>, <head>, <body>.
<html>
<HTML>
</html>
</HTML>
Format Dasar Susunan Tag HTML
Contoh Dasar Penggunaan HTML
Perintah HTML Tag : <body>
</body>
Atribut dan Fungsi :

 <body bgcolor=“....”> :: background halaman warna
 <body text=“....”> :: warna pada teks
 <body link=“....”> :: warna link
 <body vlink=“....”> :: warna link yang sudah dikunjungi
 <body alink=“....”> :: warna link yang aktif
 <body background=“D:\Logo.jpg”> :: background gambar halaman
Warna dalam HTML Black #000000
White #FFFFFF
Red #FF0000
Yellow #FFFF00
 Warna dalam HTML dapat Lime #00FF00
menggunakan tulisan bahasa
Aqua #00FFFF
inggris atau dengan
Blue #0000FF
menggunakan kode dalam
Fuchsia #FF00FF
format heksa #rrggbb.
Gray #808080
 HTML memiliki 16 kode warna Silver #C0C0C0
heksa. Maroon #800000
Olive #808000
Green #008000
Teal ##008080
Navy #000080
Purple #800080
Heading dalam HTML
 Sekumpulan kata yang menjadi judul atau sub judul dalam

dokumen HTML dengan ukuran berbeda.
 Tag HTML : <hx> dimana x adalah ukuran dari level 1 sampai 6.
<h1>....</h1>
Sampai
<h6>....</h6>
Paragraf dalam HTML
Tag, Atribut dan Fungsi :
 <b>....</b> :: menbuat teks dicetak tebal
 <i>....</i> :: membuat teks dicetak miring
 <u>....</u> :: membuat teks digaris bawah
 <strike>....</strike> :: membuat teks tercoret
 <strong>....</strong> :: membuat teks penting
 <em>....</em> :: membuat teks menekankan
 <mark>....</mark> :: membuat teks menandai
 <del>....</del> :: menghapus teks
 <ins>....</ins> :: memasukkan teks
 <sup>....</sup> :: membuat teks superscript/pangkat atas
 <sub>....</sub> :: membuat teks subscript/pangkat bawah
Tag : <big>
Paragraf dalam HTML </big>

<big> ....</big> :: membuat teks menjadi lebih besar
Tag : <small>
</small>

<small>....</small> :: membuat teks menjadi lebih kecil
Komentar HTML
 Komentar dalam HTML tidak tampil dalam browser.

 Komentar HTML disisipkan dalam tag body.
 Komentar berfungsi sebagai catatan dalam dokumen.
 Tag komentar menggunakan <!-- kalimat yang ingin dijadikan
sebagai komentar --!>
Tag : <a>
Perintah HTML </a>

<a href=“url_tujuan”> nama_link </a> :: membuat hyperlink/link
Tag : <font>
</font>

<font size=“2” color=“....” face=“....”> ........</font> :: mengatur font dengan
ukuran 2, warna ...., jenis huruf ....
Perintah HTML
Tag : <img>

 <img src=“nama_file.jpg” width=“lebar” height=“tinggi” border=“0”
alt=“kalimat” align=“kanankiritengah”>
 <img src=“D:\Documents\MyPictures\ContohGambar\Logo.jpg>
memasukkan gambar dengan lebar, tinggi dan border, dengan rata . . .

dan jika gambar tidak muncul akan keluar teks kalimat.
Perintah HTML

 <br> :: membuat tag untuk ganti baris dan tidak perlu ditutup
 <p align=“posisi rata”>....</p> :: membuat paragraf rata “posisi rata”
atau dengan <center>....</center>
 <marquee>....</marquee> :: membuat teks berjalan
 <hr width=“....”> atau <hr align=“posisi” size=“5” width=“50%” :: garis
dengan lebar .... Dan tidak perlu ditutup
Tabel
 Perintah yang digunakan untuk membuat tabel :

1. <table border=“1”>....</table> :: perintah utama dalam
pembuatan tabel, tabel dengan ketebalan 1px.
2. <tr>....</tr> :: tag untuk membuat baris
3. <td>....</td> :: tag untuk membuat kolom
4. colspan :: merge/melebarkan kolom
5. rowspan :: merge/melebarkan baris
Atribut Tabel dan Fungsi
 <table border=“....”>....</table> :: ketebalan tabel
 <table align=“....”>....</table> :: pengaturan tabel rata kanan, kiri
atau tengah
 <table width=“....”>....</table> :: lebar tabel, dapat piksel (px) atau
persen (%)
 <table valign=“....”>....</table> :: perataan secara vertikal dalam satu
kolom/cell (top, middle, buttom)
 <table bordercolor=“....”>....</table> :: warna border
 <table bgcolor=“....”>....</table> :: warna background tabel, baris, cell
 &nbsp :: cell dalam tabel kosong
List Item
 Tag HTML yang digunakan untuk mebuat proses pengurutan

secara otomatis.
 List item dalam HTML
Unordered
Ordered List
List
<li> teks </li>

Ordered List
 Tag HTML untuk membuat angkat atau huruf berurut.
<ol type=“....”> list enteries </ol>
Unordered List
 Tag HTML untuk membuat list tidak urut dengan menggunakan
simbol.
<ul type=“....”> list enteries </ol> Disc (•)
Cicle (o)
Square ()
Latihan
Latihan
Buat tampilan seperti berikut !!

Audio, Background Audio dan Video
<audio src=“nama_audio" loop controls></audio>
<audio controls>
<source src=“namaaudio.mp3/wav/ogg” type=“audio/tipeaudio”>
</audio>
<embed src=“nama_audio” autostart=“true/false” loop=“true/false”

hidden=“true/false” width=“...” height =“...”>
<video controls>
<source src=“namavideo.mp4" type="video/tipevideo“ loop autoplay
controls muted>
</video>
Form
Form digunakan sebagai formulir yang digunakan

untuk pertnyataan.
Form bekerja melibatkan server web, script CGI (PHP)
dan database (MySQL).
Cara Kerja Form
Tag Form
Tag HTML yang digunakan untuk membuat form dihalaman

web.
Form digunakan untuk menerima masukan dari pengguna.
<form> <form name=“nama_form”
<input type ....> method”post/get” action=“url”>
</form> ... Isi form ... </form>
<form action=“url” method=“get|post” enctype=“ ”>

... Elemen yang ditambahkan di form ...
</form>
Tag Form
Mendefinisikan
Form
Membuat Isian
Form
Mendefinisikan Form
Menggunakan tag <form>.

Atribut yang digunakan method, untuk menentukan
jenis pengiriman data dari form ke file pengolah
datanya.
Get
Post
Method Form
Post : Data yang dikirim berjumlah banyak, akan disimpan dalam

database dan bersifat sensitif.
Get : Data yang digunakan sedikit, tidak sensitif dan hanya untuk
mengambil data dari database serta tidak mengubah isi database.
Membuat
Isian Form Type <input>
1. Text (Name, Value, Size, Maxlength)
2. Password
Tag untuk isian 3. Checkbox
form : 4. Radio
<input> 5. Submit
<select> 6. Reset
<textarea> 7. File
8. Image
9. Button
10. Hidden
11. Select
12. Textarea
Jenis Isian Form
Jenis Isian Form Tag
Text <input>
Password <input>
Hidden <input>
File <input>
Radio <input>
Checbox <input>
Textarea <textarea>
Kotak pilihan <select>
Submit <input>
Resert <input>
Input Text
Textarea Input
Textarea digunakan untuk memasukkan teks terdiri

dari beberapa baris. <textarea>
</textarea>
Input digunakan untuk memasukkan teks hanya satu
baris.
<input type=“text”>
Atribut type
 Color  Time
 Datetime-local  Datetime
 Number  Month
 Tel  Search
 Week  URL
 Date  Password
 Email  Text
 Range  File
Radio Button
Radio button digunakan untuk menyatakan pilihan.
<input type=“radio” name=“nama_penyimpanan“

value=“nama_pilihan“> nama_pilihan
Checkbox
Radio button user memilih satu pilihan, pada input type

checked box dapat memilih satu. Lebih atau tidak
memilih sama sekali.
<input type=“checkbox”
name=“nama_penyimpanan“ value=“nama_pilihan“>
nama_pilihan
Dropdown List
Menggabungkan elemen select dan option.

Elemen select membungkus semua elemen option yang
ada untuk membentuk sebuah dropdown.
Elemen option merupakan nilai dari dropdown yang
diinginkan.
<select name=“nama_dropdownlist” >

<option value=“nama_pilihan”>nama_pilihan</option>
...
</select>
Button
Submit
Digunakan untuk memanggil url yang didefinisikan di
atribut action.
<input type=“submit” name=“submit”

value=“Nama_Tampilan”
Button
Reset
Mengembalikan form ke kondisi awal (mengosongkan
nilai semua elemen yang ada pada form)
<input type=“reset” name=“reset”

value=“Nama_Tampilan”
Label
Atribut for dalam elemen label sama dengan atribut id

pada elemen masukan.
<label for=“nama_tampil”>nama_tampil</label>
<input type=“text” name=“nama_tampil” id=“nama_tampil”>
Fieldset
Menggabungkan beberapa elemen masukkan form

dalam satu group yang saling terhubung.
<fieldset>
</fieldset>
Legend
Memberikan judul pada fieldset
<fieldset>
<legend>nama_group</legend>
</fieldset>
Frame
 Tag HTML digunakan untuk menampilkan halaman HTML
dalam beberapa bagian.
• Border : menentukan tebal garis border

• Cols :menentukan lebar kolom (px/%/*) ,dan
untuk mentukan jumlah kolom yaitu memakai
tanda koma ( , )
• Rows : menentukan panjang baris (px/%/*)
, dan untuk mentukan jumlah baris yaitu
memakai tanda koma ( , )
Tag frame memiliki atribut diantaranya :
• Name : untuk menentukan nama frame atau
untuk target link
• Scr:berfungsi untuk menujukkan/lokasi sumber
file.
Atribut Frame
Atribut Fungsi
Frameset cols Membuat frame vertikal dengan lebar
kolom tertentu
Frameset rows Membuat frame horizontal dengan tinggi
baris tertentu
Frame scr Memasukkan dokumen HTML ke dalam
frame
Noframe Memasukkan body text untuk browser
yang tidak menampilkan frame
Target Menampilkan dokumen HTML ke frame
yang dituju
Langkah Membuat Frame
Indexcoba.html
Headercoba.html
Kiricoba.html
Kanancoba.html
Footercoba.html
Indexcoba.html
Headercoba.html
Kiricoba.html
Kanancoba.html
Footercoba.html
Tugas
 Buat website sederhana menggunakan sintaks html dengan tag yang

sudah diajarkan di kelas
 Kumpulkan by email secara kolektif oleh Ketua Kelas
 Dengan ketentuan :
1. Nama File HTML : Nama.HTML
2. Nama folder dan Subjek email : Kelas_TugasHTML
 Dikumpulkan sampai dengan hari Minggu, tanggal 30 September 2018,
jam 16.00 (TT-5D) dan 19.00 (TT-5B).
 Kirim ke : ayuwahyu04@gmail.com

Pertemuan 2. HTML Dasar

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 2. HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 2

Pemrograman Web dan

Program Studi Teknik Telekomunikasi

 Bahasa pemrograman web yang digunakan untuk menulis

 Tag adalah kode yang digunakan untuk me-mark-up teks ASCII

Atribut dan Fungsi :

 Sekumpulan kata yang menjadi judul atau sub judul dalam

Atribut dan Fungsi :

Atribut dan Fungsi :

 Komentar dalam HTML tidak tampil dalam browser.

Atribut dan Fungsi :

Atribut dan Fungsi :

Atribut dan Fungsi :

memasukkan gambar dengan lebar, tinggi dan border, dengan rata . . .

Tag, Atribut dan Fungsi :

 Perintah yang digunakan untuk membuat tabel :

 Tag HTML yang digunakan untuk mebuat proses pengurutan

<li> teks </li>

<ol type=“....”> list enteries </ol>

Buat tampilan seperti berikut !!

<embed src=“nama_audio” autostart=“true/false” loop=“true/false”

Form digunakan sebagai formulir yang digunakan

Tag HTML yang digunakan untuk membuat form dihalaman

<form action=“url” method=“get|post” enctype=“ ”>

Menggunakan tag <form>.

Post : Data yang dikirim berjumlah banyak, akan disimpan dalam

Textarea digunakan untuk memasukkan teks terdiri

Radio button digunakan untuk menyatakan pilihan.

<input type=“radio” name=“nama_penyimpanan“

Radio button user memilih satu pilihan, pada input type

Menggabungkan elemen select dan option.

<select name=“nama_dropdownlist” >

<input type=“submit” name=“submit”

<input type=“reset” name=“reset”

Atribut for dalam elemen label sama dengan atribut id

Menggabungkan beberapa elemen masukkan form

Memberikan judul pada fieldset

• Border : menentukan tebal garis border

 Buat website sederhana menggunakan sintaks html dengan tag yang

Anda mungkin juga menyukai