Scribd
Unggah
44 tayangan11 halaman

Materi HTML Lengkap

Dokumen tersebut memberikan panduan dasar tentang HTML (Hypertext Markup Language), mulai dari penjelasan tentang HTTP dan fungsi HTML sebagai markup language, struktur dasar dokumen HTML, elemen-elemen dasar seperti heading, paragraf, gambar, dan daftar, serta atribut-atribut yang dapat digunakan untuk mengatur tampilan dan format teks dalam dokumen HTML.

Diunggah oleh

Regita Marbun
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 DOC, PDF, TXT atau baca online di Scribd
44 tayangan11 halaman

Materi HTML Lengkap

Dokumen tersebut memberikan panduan dasar tentang HTML (Hypertext Markup Language), mulai dari penjelasan tentang HTTP dan fungsi HTML sebagai markup language, struktur dasar dokumen HTML, elemen-elemen dasar seperti heading, paragraf, gambar, dan daftar, serta atribut-atribut yang dapat digunakan untuk mengatur tampilan dan format teks dalam dokumen HTML.

Diunggah oleh

Regita Marbun
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 DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

Panduan Praktek Dasar H T M L

(Hypertext Markup Language)

Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk
mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-
dokumen web yang ditulis atau berformat HTML (hypertext markup language).
Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file teks
biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan
menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol
< dan >. Pasangan dari sebuah tag ditandai dengan tanda ‘/’. Misalnya pasangan dari
tag <contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan
biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi
misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut :
<contoh atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag
HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah
menjadi masalah.

Struktur Dasar Dokumen HTML


Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
<html>
<head>
<title>berisi judul yang muncul pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang ingin anda
Tampilkan pada dokumen anda ada pada bagian ini.
</body>
</html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit
oleh tag <head> ... </head> dan tag <body> ... </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan
tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ...
</title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser.
Tag lain misalnya <meta> dan tag-tag lainnya yang akan kita pelajari.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan
ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan
semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin
Anda sampaikan pada pengguna nantinya.

Pengaturan Properti Dokumen


Properti dokument diatur melalui atribut-atribut yang terdapat dalam elemen
<body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks,
warna link dan lain-lain.

Kode Warna
Dalam pengaturan warna menggunakan kode RGB yan mana ditampilkan dalam
nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari
kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama
berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode
warna :

Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Aquamarine #70DB93
Chocolate #5C3317
Violet #9F5F9F
Brass #B5A642
Copper #B87333
Pink #FF6EC7
Orange #FF7F00

Atribut Elemen BODY


BACKGROUND = URI (background image for document)
BGCOLOR = Color (background color for document, default white)
TEXT = Color (text color for document, default black)
LINK = Color (link color for document, default blue)
VLINK = Color (visited link color for document, default purple)
ALINK = Color (active link color for document, default red)
Elemen Heading <hx>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu
halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.
Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h7>.
Latihan 01 :
<html>
<head>
<title>latihan 01</title>
</head>
<body bgcolor=#003399 text=#ffff00>
<h1>TOKO BUKU SERBA MURAH</h1>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<h4>pensil, ballpoint, penggaris dll.</h4>
<h3>Buku-Buku Pelajaran</h3>
<h4>ilmu pasti, ilmu bumi, sejarah dll.</h4>
<h3>Alat Kantor</h3>
<h4>meja, kursi, file manager dll.</h4>
</body>
</html>

jalankan browser dan buka file diatas lalu amati apa yang terjadi, hurup pada <h1> dan
</h1> akan ditampilkan lebih besar dibandingkan <h2> dan </h2>.

Elemen Paragrap <p>


Tag paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam
halaman web anda. Dalam elemen paragrap terdapat atribut :
ALIGN=[ left | center | right ]
yang berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan
kiri, tengah atau kanan.

Elemen Break <br>


Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam
halaman web anda. Elemen break tidak memerlukan elemen penutup break.

Elemen Horisontal Rules <hr>


Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman
web anda. Elemen <hr> tidak memerlukan elemen penutup </hr>.
Atribut Elemen Horisontal Rules
ALIGN =[ left | center | right ] (horizontal alignment, default center)
SIZE =Pixels (line height, default 2)
WIDTH =Length (line width, pixel or percentage, default 100%)
NOSHADE (solid line)
Latihan 02 :
<html>
<head>
<title>latihan 02</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3>Buku-Buku Pelajaran</h3>
<p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>

Elemen Pemformatan Karakter <font>


Font pada halaman HTML dapat diformat sesuai dengan desain yang anda
tentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font
SIZE = Number (font size adjustment, default 3)
COLOR = Color (font color adjustment, default black)
FACE = Number (font face adjustment, default Times New Roman)

Elemen Ragam Karakter


<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah

latihan 03 :
<html>
<head>
<title>latihan 03</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font>
</h1>
<hr width=360 align=center>
<h2>Toko kami menyediakan</h2>
<h3><font color=red>Alat Tulis</font></h3>
<p align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3><font color=red>Buku-Buku Pelajaran</font></h3>
<p align=right>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3><font color=red>Alat Kantor</font></h3>
<p align=left>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Elemen List
Propertis <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list).
Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list
<ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen List
Ordered list
TYPE = [ 1 | a | A | i | I ] (numbering style, default 1)
Unordered list
TYPE = [ disc | square | circle ] (bullet style, default circle)
Latihan 04 :
<html>
<head>
<title>latihan 04</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
Toko kami menyediakan
<h2>Alat Tulis</h2>
<ol>
<li>pensil
<li>ballpoint
<li>penggaris
<li>dll.
</ol>
<h2>Buku-Buku Pelajaran</h2>
<ol type=A>
<li>ilmu pasti
<ul>
<li>Fisika
<li>kimiya
<li>biyologi
</ul>
<li>ilmu bumi
<li>sejarah
<li>dll.
</ol>
<h2>Alat Kantor</h2>
<ol type=i>
<li>meja
<li>kursi
<ul type=square>
<li>kusi lipat
<li>kursi plastik
<li>kursi-kursian
</ul>
<li>file manager
<li>dll.
</ol>
</body>
</html>

Elemen Image <img>


Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa
JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
<IMG SRC=namafilegambar>
Atribut Elemen Image
SRC = URI (location of image)
ALT = Text (alternate text)
WIDTH = Length (image width)
HEIGHT = Length (image height)
ALIGN = [ top | middle | bottom | left | right ] (image alignment)
BORDER = Length (link border width)

Latihan: Menggunakan Tag Gambar


Buka contoh sebelumnya dan tambahkan tag berikut ini:
<html>
<head>
<title>latihan 05</title>
</head>
<body>
<img src= logo.gif>
…
…
</body>
</html>
Elemen Link/Anchor <a>
Elemen link berfungsi sebagai penghubung antara suatu halaman dengan
halaman lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul
yang lain. <a href = URL_tujuan>hypertext</A>

Latihan: Menggunakan Link


Link berfungsi untuk melompat ke halaman lain pada web atau ke URL lain
(internet). hal ini dinamakan hypertext.
…..
….
<ol>
<li><A HREF=../motor/sity>nginjhen</A>
<li><A HREF=togar.html>togar</A>
<li><A HREF=http://www.honda.com>supra cup</A>
</ol>
….
….

Pada contoh diatas apabila anda mengklik supra cup maka akan di link ke
www.honda.com. dan apa bila anda mengklik togar maka akan di link ke halaman
togar.html
Link satu halaman
Untuk membuat link pada satu halaman, digunakan kombinasi tag <A
NAME=tujuan1>... </A> dengan tag <A HREF=#tujuan1> ... </A>. Contohnya jika
Anda memiliki bagian dokumen sebagai berikut:
…
…
<H2><A NAME=bab2>BAB 2 Penjualan</A></H2>
…
…
maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag
sebagai berikut:
<A HREF=#bab2> BAB 2 Penjualan </A>

Elemen Tabel <table>


Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML,
digunakan tag <table> ... </ table >. Elemen tabel berisi properti <tr> ... </tr> untuk
menentukan baris (table row) yang di dalamnya terdapat properti <td> ... </td> untuk
menampilkan data pada setiap set tabel (table data).

Struktur lengkap dari elemen tabel adalah sebagai berikut:


<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baria 1 kolom 2</td>
</tr>
<tr>
<td>data baris 2 kolom 1</td>
<td>data haris 2 kolom 2</td>
</tr>
<tr>
<td>data baris 3 kolom l</td>
<td>data baris 3 kolom 2</td>
</tr>
</table>

Atribut Elemen Tabel


WIDTH = Length (table width, pixels or percentage)
HEIGHT = Length (table height, pixels or percentage)
BORDER = Pixels (border width)
CELLSPACING = Length (spacing between cells)
CELLPADDING= Length (spacing within cells)
ALIGN = [ left | center | right ] (table alignment)
BGCOLOR = Color (table background color)
Atribut Table Row
ALIGN = [ left | center | right ] (horizontal alignment of cells in group)
VALIGN = [ top | middle | bottom ] (vertical alignment of cells in group)
BGCOLOR = Color (row background color)
Atribut Table Data
ROWSPAN = Number (rows spanned by the cell)
COLSPAN = Number (columns spanned by the cell)
ALIGN = [ left | center | right ] (horizontal alignment)
VALIGN = [ top | middle | bottom ] (vertical alignment)
WIDTH = Pixels (cell width, pixels or percentage)
HEIGHT = Pixels (cell height, pixels or percentage)
BGCOLOR = Color (cell background color)

latihan 05 :
<html>
<head>
<title>latihan 05</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris i kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Elemen Form <form>
Form HTML merupakan tag yang paling penting khususnya dalam membuat
aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox,
check box, radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form> ... </form>. Di
dalam tag ini kita akan mendefinisikan elemen-elemen form seperti yang telah
disebutkan di atas. Selain tag elemen form kita juga dapat menuliskan sembarang teks,
tag, image.
Atribut Elemen Form
ACTION = URI (form handler)
METHOD = [ get | post ] (HTTP method for submitting form)

Properti Masukan Pada Elemen Form <input>, <textarea>, <select>


1. Text Box <input type=”text”>
Digunakan untuk memasukkan input berupa text.
SIZE = size of the textbox in character, default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the application
VALUE = will display its content as the default value

2. Password <input type=”password”>


Digunakan untuk memasukkan password.
SIZE = size of the textbox in character, default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the application

3. Hidden <input type=”hidden”>


Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk
dilihat oleh browser.
NAME = name of variable to be sent to the application
VALUE = will display its content as the default value

4. Check Box <input type=”checkbox”>


Check box digunakan untuk dapat memilih lebih dari satu pilihan.
NAME = name of variable to be sent to the application
VALUE = usually set to a value
CHECKED (check radio button or checkbox)

5. Radio Button <input type=”radio”>


Radio button digunakan untuk dapat memilih hanya salah satu pilihan.
NAME = name of variable to be sent to the application
VALUE = usually set to a value
CHECKED (check radio button or checkbox)

6. Push Button <input type=”button”>


Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk
menghasilkan suatu aksi.
NAME = name of variable to be sent to the application
VALUE = text label on the button

7. Submit <input type=”submit”>


Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen
FORM.
NAME = name of variable to be sent to the application
VALUE = text label on the button

8. Image Submit Button <input type=”image” src=”url”>


Digunakan untuk menggantikan tombol standar submit dengan image.
NAME = name of variable to be sent to the application

9. Reset <input type=”reset”>


Digunakan untuk mereset semua masukan dalam form.
VALUE = text label on the button

10. Text Area <textarea> … </textarea>


Elemen untuk memasukkan teks secara leluasa seperti notepad.
NAME = name of variable to be sent to the application
ROWS = number of rows
COLS = number of columns

11. Select <select> … </select>


Daftar isi dalam properti select mengunakan tag <option>
SIZE = set the number of visible choices
NAME = name of variable to be sent to the application

Contoh Buat Form HTML


<html>
<head><title>latihan form</title></head>
<body>
<form action=# method=get>
Nama : <input type=text name=nama><p>
Alamat :<input type=text name=alamat>
<p>Telepon :<input type=text name=telepon>
<p>Email :<input type=text name=email>
<p>
<select name=pekerjaan>
<option value=mahasiswa>mahasiswa
<option value=pelajar>pelajar
<option value=peg_negeri>peg_negeri
<option value=presiden>presiden
<option value=menteri>menteri
</select>
<p>Anggota :
<input type=radio name=anggota value=ya check>ya
<input type=radio name=anggota value=bukan>bukan
<p>
<input type=submit value="kirim data" name=submit>
<input type=reset value="ulangi" name=reset>
</form>
</body>
<html>

Anda mungkin juga menyukai