WEB DESIGN (HTML)

IIN KARMILA PUTRI, S.Si, M.Si

PROGRAM STUDI INFORMATIKA
UNIVERSITAS COKROAMINOTO
Konsep Dasar Web
Secara teknis web terdiri dari 2 bagian, yaitu Web Server
dan Web Browser:

1.Web Server, yaitu Suatu komputer dan software yang

menyimpan serta mendistribusikan data ke komputer
client melalui internet yang meminta informasi tersebut,
Software webserver ini diantaranya: Apache, MySQL, dan
PHP. Sebut saja dengan hostingan, atau kalau di
komputer lokal juga bisa dengan menggunakan program
PHPTriad, Apache2Triad, Xampp, dll.

2. Web Browser, yaitu Software/program yang beroperasi

untuk melakukan proses permintaan dari server dan
menampilkannya di mata client, sehingga informasi
tersebut dapat diakses, contohnya adalah: IE, Mozila
Firefox, Opera, Clock, Google Chrome,dll.
Browser dan Editor
Browser merupakan software yang di instal
pada mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi
halaman web. Browser yang sering
digunakan biasanya Internet Explorer,
Chrome, Mozilla Firefox, Netscape Navigator
dan masih banyak yang lainya. Selain itu
untuk menuliskan tag-tag atau fungsi yang
ada pada HTML biasanya kita menggunakan
program pembuat document HTML, ada
banyak HTML editor yang bisa anda gunakan
diantaranya: Ms FrontPage, Dreamweaver,
Notepad, Notepad ++.
Arsitektur Web
Arsitektur Website adalah suatu pendekatan
terhadap desain dan perencanaan situs yang,
seperti arsitektur itu sendiri, melibatkan
teknis, kriteria estetis dan fungsional. Seperti
dalam arsitektur tradisional, fokusnya adalah
benar pada pengguna dan kebutuhan
pengguna. Hal ini memerlukan perhatian
khusus pada konten web, rencana bisnis,
kegunaan, desain interaksi, informasi dan
desain arsitektur web. Untuk optimasi mesin
pencari yang efektif perlu memiliki apresiasi
tentang bagaimana sebuah situs Web terkait
dengan World Wide Web.
Bagian Arsitektur Web
 Hypertext Transfer Protocol (HTTP)
 WWW (World Wide Web)
 URL( universal resource locator)
 XML (Extensible Markup Language)
 Javascript
AJAX
Pengenalan HTML
Hypertext Markup Language (HTML) adalah
bahasa yang digunakan untuk menulis halaman web.
HTML merupakan dasar dari segala bahasa
pemrograman web yang akan muncul kemudian
Adapun yang bisa anda lakukan dengan HTML yaitu :
 Mengontrol tampilan dari web page dan
contentnya.
 Mempublikasikan dokumen secara online sehingga
bisa di akses dari seluruh dunia.
 Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi
 Menambahkan object-object seperti image, audio,
video dan juga java applet dalam document HTML.
Perkembangan HTML
 HTML 1.0
Merupakan awal mula atau cikal bakal dari HTML.
Pada versi ini masih sangat sederhana serta
banyak terdapat kelemahan. Kemampuan hanya
terbatas pada pembuatan heading, paragraph,
hypertext, list dan format teks (cetak tebal dan
miring)
 HTML 2.0

Pada versi ini telah ditambahkan kemampuan

form/formulir, sehingga dapat membuat halaman
web lebih interaktif. Hal ini memungkinkan
pengunjung web untuk mengisikan nama, email
ataupun komentar dan sebagainya pada web.
Perkembangan HTML
 HTML 3.0
Sejak diluncurkan, pada usia versi ini tidak bertahan lama
karena kemudian disempurnakan dengan versi 3.2
 HTML 3.2
Versi ini memperkenalkan teknik peletakan teks pada
sekeliling gambar, latar belakang (background) gambar,
css (cascading style sheet), tabel, frame, dan sebagainya.
Juga versi ini sudah mulai mendukung JavaScript,
VBScript dan sebagainya.
 HTML 4.0
Perubahan-perubahan yang ada hampir mencakup semua
tag-tag HTML sebelumnya. Selain itu juga ditambahkan
tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM,
TBODY, THEAD dan sebagainya yang semuanya didukung
bluefish.
Penamaan Dokumen

Pilih suatu nama, sembarang nama,

kemudian tambahkan sebuah ekstensi
“.html” (tanda petik ganda tidak usah
dituliskan karena digunakan sebagai
penjelas saja).

Contoh:
Latihan.html
Definisi Elemen
Untuk menandai berbagai elemen dalam
suatu dokumen HTML, kita
menggunakan tag. Tag HTML terdiri atas
sebuah kurung sudut kiri (<, tanda lebih
kecil), sebuah nama tag, dan sebuah
kurung sudut kanan (>, tanda lebih
besar). Tag umumnya berpasangan, tag
pembuka dan tag penutup. Tag penutup
selalu diawali dengan tanda “/”.
Contoh:
<b>....</b>
Definisi Tag
Ada beberapa elemen yang tidak
mengharuskan tagnya dituliskan
secara berpasangan, elemen tersebut
di antaranya adalah:
 paragraf dengan tag <p>
 ganti baris-line break dengan tag
<br>
 garis datar-horizontal rule dengan tag
<hr>
 list item dengan tag <li>
Struktur Desain HTML
Dalam struktur dasar HTML, dokumen html dapat dibagi
menjadi 3 bagian yaitu:

 HTML
Setiap document HTML harus diawali dan ditutup dengan tag
HTML. <HTML>...</HTML>

 HEAD
Bagian header dari document HTML di apit oleh tag
<HEAD>...</HEAD> di dalam bagian ini biasanya dimuat
tag TITLE yang menampilkan judul dari halaman pada
titlenya browser.

 BODY
Document body di gunakan untuk menampilkan text, image
link dan semua yang akan ditampilkan pada web page.
Struktur Desain HTML
Di dalam tag ini bisa diletakkan berbagai teks maupun attribute /
aksesori lainnya seperti warna latar belakang, warna teks,
warna link, warna visited link, warna active link dan lain-lain
yang akan ditampilkan pada web page.
Contoh Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN
& TOPMARGIN.
Perhatikan contoh dasar struktur penulisan HTML :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
BELAJAR HTML
</BODY>
</HTML>
(untuk menyimpan file, gunakan extensi .html)
Atribut Tag
Tag dapat mempunyai atribut. Atribut
menyatakan sesuatu tentang tag tersebut.
Atribut digunakan untuk mengubah default
pemformatan dokumen dengan tag yang
bersangkutan.
 Tag berikut tidak mempunyai atribut :

<body>
<table>
 Tag berikut mempunyai atribut :

<body bgcolor=“red”>
<table border=“1”>
Kelebihan HTML
Adapun beberapa kelebihan yang dimiliki
oleh HTML, antara lain:
 Merupakan bahasa pengkodean yang
bersifat lintas platform (cross-platform).
Dimana HTML dapat digunakan pada
berbagai jenis mesin komputer yang
berbeda, bahkan pada berbagai sistem
operasi yang berbeda pula.
 Dapat disisipi gambar, baik gambar statis
maupun dinamis (animasi) termasuk
gambar yang dapat dijadikan hyperlink.
Kelebihan HTML
 Dapat disisipi bahasa
pemrograman side-server seperti
PHP (PHP : HyperText Processor),
ASP (Active Server Page), Perl
dan sebagainya
 Cukup menggunakan browser
untuk menjalankannya karena
memang bukan bahasa
pemrograman.
Kekurangan HTML
 Hanya mampu menghasilkan
halaman web yang statis
 Memiliki tag-tag yang cukup banyak
sehingga cukup membingungkan,
terutama bagi pengguna yang masih
awam
 Tidak mampu menghasilkan halaman
yang interaktif dalam hal ini adalah
kemampuan untuk berinteraksi antara
client dengan server
Sekian

Wassalam....