Dasar-Dasar HTML
A. DASAR 2 HTML
Beberapa hal yang akan menjadi tujuan Materi kita
ini antara lain :
§
Memberikan
konsep pemrograman web berbasis HTML (Hyper Text Mark-up
Language), sebagai bahasa dasar Pemrograman Web untuk membangun
sebuah Web Page.
§
Web page pada
dasarnya adalah sebuah file, berupa file hypertext, yang memungkinkan untuk
melakukan aktifitas link page, loading image dan sebagainya.
§
Membangun
sebuah web pages berbasis Tabel
§
Membuat Link
page dan link File
1. PENGERTIAN HTML
HTML
§
Hyper
Text Markup Language (HTML) adalah bahasa yang
digunakan dalam menulis sebuah halaman web.
§
HTML
merupakan pengembangan dari standar format dokumen teks yang disebut dengan
SGML (Standard Generalized Markup Language).
§ HTML pertama kali diperkenalkan oleh Tim Barness Lee yang berkerja di CERN dan
dipopulerkan pertama kali dengan menggunakan browser Mosaic
§ Sejak tahun 1990, HTML terus berkembang.
Perkembangan
HTML
§
Tahun
1990, HTML mulai diperknalkan, sebagai versi 1.0
§
Tahun
1993, HTML diperbaiki dengan penambahan beberapa fitur, dengan menambahkan
kemampuan dan fasilitas yang lebih baik, namun tetap tidak merubah cara kerja
dari HTML.
§
Tahun
1995, HTML berubah menjadi versi 2.0, yang secara resmi dikeluarkan pada bulan
Nopember 1995 oleh IETF (Internet Engineering Task
Force).
§
Diakhir
tahun 1995, HTML diperbaiki kembali menjadi versi 3.0
§
Tahun
1996, revisi kembali dilakukan, sebagai usaha dariW3C HTML Working Group,
menghasilkan HMTL versi 3.2 dan secara resmi diterbitkan pada Januari 1997
§
HTML versi
4.0 dikeluarkan tanggal 18 Desember 1997
§ HTML versi 4.01 dikeluarkan tanggal 24 April 1998
KEBUTUHAN
MINIMAL
§ EDITOR TEKS
§ WEB BROWSER
§ SERVER (XAMPP, WAMP,
APSERV DLL)
2. Struktur HTML
Struktur file HTML diawali dengan tag <html> dan ditutup dengan tag </html>.
Di dalam tag ini terdapat 2 bagian besar,
yaitu yang diapit oleh tag :
§ <head>...</head>
§ <body>...</body>
Contoh
1 :
<html>
<head>
<!-- Ini Baris Komentar, tidak
diproses-->
<title>::. AMIK JTC-SMG</title>
</head>
<body>
Berisi tentang text,gambar,atau apapun yang ingin ditampilkan pada halaman web.
</body>
</html>
Menyimpan file HTML
§
Menulis script HTML
menggunakan notepad
§
Menyimpan file HTML
ê Pastikan file script HTML ber-extensi *.html
Memanggil file HTML
melalui web browser
§
Memanggil file HTML tanpa
Local Server
ê Buka web browser
ê Panggil file HTML melalui
FILE | OPEN | BROWSE
|doble klik file-nya |OPEN
§
Memanggil file HTML dengan
Local Server (Xampp)
ê Mengapa Webserver local?
Menunjukkan
hasil sebenarnya sama seperti ketika file diakses melalui fasilitas internet
on-line
ê Proses Instalasi Xampp
ê Penempatan file dalam server Xampp
Tempatkan
file dalam direktori/folder htdocs
ê Menyimpan dengan nama index.html
File
default yang dipanggil secara langsung melalui web browser :
index.html dan index.php
ê Memanggil file html dengan local web server
//localhost/nama
folder tekan enter
META TAG
META Tag adalah tag-tag HTML
yang memberikan informasi keterangan isi dari suatu halaman web yang akan
ditampilkan oleh pengunjung. Search engine mengenalinya dan digunakan oleh
pemilik situs web dan administrator untuk menentukan positioning dan keterangan
pada hasil pencarian search engine. Banyak search engine dewasa ini bekerja
dengan membaca META Tag sebagai bagian dari formula index.
Penggunaan Meta Tag
Untuk meningkat trafic web site
Arti dari beberapa perintah META
author : Atribut
yang menyatakan tentang pembuat atau programer file tersebut.
<meta name="author"
content="Masbianto">
description : Atribut
yang digunakan untuk menerangkan isi dari suatu halaman web atau keterangan
mengenai maksud dan tujuan situs itu sendiri bisa juga sebagai penjelasan dari
suatu produk dan sebagainya.
<meta
name="description" content="Uji coba pembuatan file HTML
yang sederhana">
keywords : Atribut
yang digunakan sebagai kata kunci untuk pencarian kata pada file tersebut,
masing-masing kata kunci dipisahkan dengan tanda koma.
meta
name="keywords" content="Latihan, HTML, berjalan, baik, atau ,
tidak">
Contoh
2 :
<html>
<head>
<!-- Ini Baris Komentar, tidak diproses-->
<title>::. AMIK
JTC-SMG</title>
<meta name="author"
content="Masbianto">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,berjalan,baik,atau,tidak">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,berjalan,baik,atau,tidak">
</head>
<body>
Berisi tentang text,gambar,atau apapun yang ingin ditampilkan pada halaman web.
</body>
</html>
3. PROPERTI HALAMAN WEB
Properti halaman web seperti warna latar
belakang halaman, warna teks, warna link, dll diatur melalui atribut-atribut
yang terdapat dalam elemen <body> . Atribut elemen body :
background :
lokasi dan nama file (latar belakang image dokumen)
<body background="lokasigambar">
<body background="gambar/bg_glob.png">
bgcolor : warna latar belakang, (default putih)
<body bgcolor="kodewarna">
<body
bgcolor="#CCFFFF">
text : warna teks, default hitam
link :
warna link dokumen, default biru
vlink :
warna visited link dokumen, default ungu
alink :
warna active link dokumen, default merah
<body text="#0000FF"
link="#0000FF"
vlink="#FF00FF" alink="#FF0000">
Contoh
kode warna :
DAFTAR WARNA -
WARNA DAN KODE NYA
|
|||||||
#000000
|
#333300
|
#003366
|
#333399
|
||||
#800000
|
#808000
|
#008080
|
#666699
|
||||
#FF0000
|
#99CC00
|
#33CCCC
|
#800080
|
||||
#FF00FF
|
#FFFF00
|
#00FFFF
|
#993366
|
||||
#FF99CC
|
#FFFF99
|
#CCFFFF
|
#CC99FF
|
||||
#993300
|
#003300
|
#000080
|
#333333
|
||||
#FF6600
|
#008000
|
#0000FF
|
#808080
|
||||
#FF9900
|
#339966
|
#3366FF
|
#969696
|
||||
#FFCC00
|
#00FF00
|
#00CCFF
|
#C0C0C0
|
||||
#FFCC99
|
#CCFFCC
|
#99CCFF
|
#FFFFFF
|
||||
Contoh
3 :
<html>
<head>
<!-- Ini Baris Komentar, tidak diproses-->
<title>::. AMIK
JTC-SMG</title>
<meta name="author"
content="Masbianto">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,berjalan,baik,atau,tidak">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,berjalan,baik,atau,tidak">
</head>
<body bgcolor=”#0000FF” text="#0000FF" link="#0000FF"
vlink="#FF00FF" alink="#FF0000">
Berisi tentang text,gambar,atau apapun yang ingin ditampilkan pada halaman web.
</body>
</html>
4.
PERINTAH PENGATURAN FONT
a. Heading
Heading digunakan untuk mengatur header teks dokumen
yang akan tampil pada halaman web
<Hn> ….. </Hn>
Contoh
4 :
<html>
<head>
<title> latihan heading</title>
</head>
<body>
<h1> contoh heading1 </h1>
<h2> contoh heading2 </h2>
<h3> contoh heading3 </h3>
<h4> contoh heading4 </h4>
<h5> contoh heading5 </h5>
<h6> contoh heading6 </h6>
</body>
</html>
b. Font /jenis font (Font Face)
<font face = “arial”> jenis huruf arial</font>
<font face = “verdana”> jenis huruf verdana</font>
<font face = “tahoma”> jenis huruf tahoma</font>
c. Warna (Font Color>
<font color = “#FF0000”> warna merah</font>
<font color = “#0000FF”> warna biru</font>
<font color = “#FFFF00”> warna kuning</font>
d. Ukuran Font (Font Size)
-
Font Size,
merupakan atribut yang digunakan dalam Tag Font, untuk mengatur ukuran huruf.
-
Ukuran font dimulai
dari ukuran 1 sebagai ukuran terkecil dan 7sebagai ukuran terbesar.
<font size =1>ukuran font 1</font>
e. Atribut font (Tebal, Miring, Garis Bawah)
<b>Kalimat ini akan dicetak Bold
</b>
<i>Kalimat ini akan dicetak Italic </i>
<u>Kalimat ini akan dicetak Bergaris bawah </u>
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
f. Efek Font
<s>Kalimat ini akan tercoret tengah</s>
<tt>Kalimat ini memiliki efek teletype</tt>
<sup>Kalimat ini memiliki efek superscript</sup>
<sub>Kalimat ini memiliki efek subscript</sub>
