Scribd
Unggah
9 tayangan

Modul HTML(Autosaved)

Diunggah oleh

1premiumsebulan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
9 tayangan

Modul HTML(Autosaved)

Diunggah oleh

1premiumsebulan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

MODUL

WEB PROGRAMMING DASAR HTML

Institut Teknologi Bisnis dan Bahasa


DIAN CIPTA CENDIKIA
2023
[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia
Kata Pengantar

Segala Puji dan Syukur selalu penyusun panjatkan kehadirat Allah SWT karena atas Doa serta limpahan
Rahmat dan Hidayah-NYA penyusun dapat menyelesaikan modul ini.

Melalui modul ini, penyusun berusaha mengenalkan dasar‐dasar dari HTML, PHP dan MySQL untuk
membangun suatu situs web. Buku ini sebagian besar menyajikan berbagai contoh program yang disusun
secara terstruktur dari tingkat dasar, menengah, sampai yang kompleks.
Dengan adanya contoh‐contoh program tersebut, diharapkan pembaca dapat mempraktekkannya secara
langsung dan dapat menyimpulkan sendiri maksud dari setiap perintah dalam program dengan cara melihat
hasil yang ditampilkan di layar browser di akhir buku ini, disajikan contoh yang lebih nyata, yaitu aplikasi situs
berita sederhana yang dapat dikembangkan lebih lanjut.

Akhirnya penyusun berharap agar modul ini bermanfaat bagi anda yang sedang mempelajari, khususnya
dalam hal pemrograman web dan internet. Saran dan kritik untuk perbaikan buku ini sangat penyusun
harapkan.

Penyusun menyadari bahwa modul ini masih jauh dari sempurna dan akan terus diperbaiki. Akhir kata
“Jangan pernah lelah untuk belajar” , kritik dan masukan mengenai modul ini dapat disampaikan melalui
website dan dapat mendownload beberapa contoh script yang mungkin berguna bagi pengembangan
website anda.

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


HTML (HYPERTEXT MARKUP LANGUAGE)
Tujuan :
1. Memahami tentang konsep WWW
2. Memahami tentang struktur dokumen HTML
3. Memahami tentang dasar-dasar HTML
4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta.

A. World Wide Web


Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di
seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh
dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling
populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
• Protocol
standard aturan yang di gunakan untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
• Address
WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet.
• HTML
digunakan untuk membuat document yang bisa di akses melalui web.

B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document
web, yang bisa anda lakukan dengan HTML yaitu:
• Mengontrol tampilan dari web page dan contentnya.
• Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
• Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
• Menambahkan object-object seperti image, audi, video dan juga java applet dalam document
HTML.

C. Browser dan Editor


• Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya
Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
• Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa
anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


DASAR-DASAR HTML

Struktur HTML Document


Document HTML bisa di bagi menjadi tiga bagian utama:

• HTML
Setiap document HTML harus di awali dan di tutup 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.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu
mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada
tag META.
• TITLE
Title sendiri berfungsi untuk pemberian judul pada sebuah halaman website
• BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.

Berikut adalah struktur HTML :

<html>
<head>
<title> ……. Judul……. </title>
</head>
<body>
…………….Isi body……………..
</body>
</html>

Script yang pertama

Untuk penulisan script baik itu HTML,CSS,PHP dan lain-lain anda dapat menggunakan text editor seperti
Notepad,FrontPage, Dreamwaver, dan sejenisnya.

Dicontohkan kita akan menggunakan Notepad sebagai Text editor untuk penulisan Syntak HTML, silakan
ketikan script HTML seperti dibwah ini :

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


Jika sudah, silakan simpan script tersebut pada directory D, dalam folder web dan beri nama
intro.html

Kemudian buka Browser anda, lalu pilih menu File – Open File (Ctrl+O) dan cari file intro.html lalu klik
Open. Maka hasilnya seperti berikut ini.

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


BAB 1 Format Halaman dan Paragraf

1.1. Heading
Yaitu tanda yang menentukan level atau tingkatan dari sebuah text
Contoh:
<h1>ITBA Dian Cipta Cendikia</h1>
Akan Memberi Tampilan sbb:
ITBA Dian Cipta Cendikia
Untuk Tingkatan Level dari Structural, silahkan ketik coding berikut ini, simpan dengan heading.html

1.2. Presentational
Yaitu tanda yang menentukan tampilan dari sebuah textContoh, Silahkan ketik coding berikut ini
simpan dengan nama presentational.html Catt : <br> digunakan untuk pindah baris / enter 1x

Attribut Description
<b> Bold (Huruf Tebal)
<i> Italic (Huruf Miring)
<u> Underline (Garis Bawah)
<sup> Pangkat
<sub> Index bawah
<s> Mencoret text

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1.3. Hypertext, yaitu tanda yang menunjukan (link) ke bagian dokumen lain.
Contoh:
<a href=http://www.dcc.ac.id> Website DCC </a>

Silahkan ketik coding berikut ini, simpan dengan nama hypertext.html

Catt : jika text Webiste DCC diklik, maka secara otomatis akan membuka halaman website ITBA DCC

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1.4. Pindah Baris dan Paragraf
Tag <br> berfungsi sebagai ganti baris pada halaman HTML , <br> akan memberikan effect ganti
baris sebanyak satu baris, sedangkan <P> berfungsi sebagai ganti paragraf.

<P>
Kalimat ................... <br>
Kalimat ................... <br>
</P>

Silahkan ketik koding berikut ini, simpan dengan nama paragraf.html

1.5. Elemen Widget, yaitu tanda yang membuat objek-objek lain, seperti list dan garis

Ada dua macam list yang bisa anda tambahkan ke document HTML:

1. Unordered List (Bullet) :


2. Ordered List (Numbering)

Unordered List (Bullet)


Tag Attribute Value Description
<UL> TYPE SQUARE Bullet Kotak
DISC Bullet Titik
CIRCLE Bullet Lingkaran
Ordered List (Numbering)
Tag Attribute Value Description
<OL> TYPE Ii Upper Roman Lower Roman
Aa Upercase Lowercase
<OL> START n Begin Number

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


a. Bullet & Numbering
Contoh, simpan dengan nama bullet.html

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1.6. Horizontal Rule
Tag <hr> digunkan untuk menciptakan garis horizontal , sebagai pembatas judul dengan isi, simpan
dengan nama horizontal.html

<html>
<head>
<title> Belajar Horizontal </title>
</head>
<body>
<h1>DASAR HTML</h1>
<hr >
Selamat Pagi, Mari belajar HTML, ini
adalah contoh penggunaan tag hr untuk
membuat garis
</body>
</html>

1.7. Ukuran Font


Tag <Font>…..</Font> dengan Tag ini anda dapat mengubah-ubah ukuran Font dan jenisnya
Contoh, simpan dengan nama font.html

<font size='1'> Ini ukuran Fontnya=1 </font> <br>


<font size='4' face="Calibri" color="red"> Ini ukuran Fontnya=4 dan berwarna merah</font>

Attribut Description
Color Menentukan warna Font
Size Menentukan ukuran huruf dari 1 – 7
Face Menentukan jenis huruf

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1.8 . Effect
Ada beberapa efek animasi sederhana yang bias anda gunakan diantranaya adalah marquee.
Marquee sendiri akan menghasilkan efek tulisan berjalan. Ketik koding berikut ini, simpan dengan
nama marquee.html

<marquee> SELAMAT DATANG DI SITUS ITBA DCC </marquee>

Marquee Properties
Attribute Value Description
Behavior alternate Teks bergerak ke kanan/kekiri
scroll Teks bergerak terus menerus
slide Teks bergerak sekali
Attribute Value Description
Direction Left Kiri
Top Atas
Down Bawah
Right Kanan

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1.9. Menyisipkan Image
Tag <img> digunakan untuk menyisipkan image ke dalam HTML
Contoh, simpan dengan nama image.html

Catt : jangan lupa gambar logo.png di copy ke dalam folder web terlebih dahulu.

Script Keterengan

<img src="logo.png"> Dengan script ini maka gambar akan ditampilkan


dalam ukuran aslinya

<img src="logo.png" width="300" Anda dapat menentukan panjang dan lebar


height="300"> gambar dengan attribute width dan height

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


1. 10. Alignement
Menentukan Posisi perataan dalam object HTML baik Text, Gambar dan lain-lain.

<font size="4" align="center"> ITBA DCC</font>

<div align="center"><img src="logo.png"></div>

Value Description
Left Rata Kiri
Right Rata Kanan
Center Rata Tengah
Justify Rata Kanan Kiri

Ketik koding berikut ini simpan dengan nama align.html

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


BAB 2 Menggunakan Table dan Pengaturanya

2.1. Mengenal Table


Tabel merupakan salah satu komponen utama dalam pembuatan website, Tabel sendiri merupakan
kerangka untuk meletakan content – content isi sebuah web. Dalam pembuatan sebuah website kita
tidak bias lepas dari komponen yang satu ini selain untuk meletakan content table sendiri berfungsi utuk
merapihkan halam website agar terlihat lebih proposional.

2.2. Membuat Tabel

Sebelum membuat sebuah Tabel ada baiknya kita mengenal komponen apa saja yang ada pada table

<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<TR> membuat baris dalam tabel
<TH> membuat judul kolom
<TD> membuat sebuah sel data

Berikut contoh table, simpan dengan nama table.html

<table border="1" >


<tr >
<td >No</td>
<td >Nama Dosen</td>
<td >Alamat</td>
<td >Mata Kuliah</td>
</tr>
</table>

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


Atau anda ingin menengahkan, mengatur lebar table, cukup tambahkan syantak dibawah ini :

<table border="1" align="center">


<tr align="center">
<td width="40">No</td>
<td width="200">Nama Dosen</td>
<td width="140">Alamat</td>
<td width="170">Mata Kuliah</td>
</tr>
</table>

Colspan
Berfungsi untuk menggabungkan kolom pada tabel

<table border="1" align="center">


<tr align="center">
<td colspan="4">DAFTAR NAMA DOSEN</td>
</tr>
<tr align="center">
<td width="40">No</td>
<td width="200">Nama Dosen</td>
<td width="140">Alamat</td>
<td width="170">Mata Kuliah</td>
</tr>
</table>

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


2.3.Background

Berfungsi untuk pemberian dasar latar Background dapat berupa gambar maupun warna, cukup sisipkan
tag berikut ini pada tag body. Jangan lupa file gambar di copy terlebih dahulu dalam folder web anda.

<Html> <Html>
<Head> <Head>
<Title> Belajar Background Gambar </Title> <Title> Belajar Background Warna </Title>
</Head> </Head>
<body background="seminar.jpg"> <body bgcolor="red">
<center>Background Gambar</center> <center>Background Warna</center>
</body> </body>
</Html> </Html>

back_gambar.html back_warna.html

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


ELEMEN FORM
Kegunaan Form Yaitu mengirimkan data dari user ke server dan selanjutnya server akan melakukan
proses sesuai dengan program yang dibuat terhadap data tersebut. Beberapa atribut-atribut dalam form
diantaranya:

TYPE CONTOH SCRIPT TAMPILAN

TEXT <input type="text" name="nama">

Radiobutton <input type="radio" name="jns_kelamin">


CheckBox <input type="checkbox" name="hobi">

Textarea <Textarea name="textarea">Isi</textarea>

Submit <input type="submit" name="submit"


value="kirim">
List Menu <select name="ps">
<option>MI</option>
<option>KA</option>
<option>ABA</option>
</select>
File Field <input type="file" name="file">

Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda.

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia


Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.

Attribute Description

ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script
untuk memproses form.
Syntax:
ACCEPT="Internet Media Type"

METHOD Menentukan bagaimana data akan di kirim ke server. GET – data akan di
kirim
dengan menggunakan query string pada URL.
POST – data akan di kirim ke server sebagai block data ke script.
Syntax:
METHOD="POST|GET"
ACTION Menentukan lokasi dari script yang akan memproses data dari form
Syntax:
ACTION="URL"

Ketik coding berikut ini, simpan dengan nama form.html

[ Web Programming Dasar HTML ] ITBA Dian Cipta Cendikia

Anda mungkin juga menyukai