Kapita Selekta: Ronaldo Syahputra, S.Kom, M.Kom Ronaldo - Syahputra@upiyptk - Ac.id

KAPITA SELEKTA
RONALDO SYAHPUTRA, S.KOM, M.KOM

ronaldo_syahputra@upiyptk.ac.id
Silabus
Materi : Web Programing
 Pengenalan HTML
 Pengenalan CSS
 Pengenalan PHP
 PHP dan MySQL
 Membangun sebuah Web dengan PHP dan MySQL
Pengenalan HTML
Sejarah HTML
 HTML adalah singkatan dari (HyperText Markup Language).
 Dirancang oleh oleh Tim Berners-Lee pada tahun 1989.
 Tim Berners-Lee mempublikasikan dokumen yang berjudul: HTML Tags,
pada tahun 1991
 Bersama Dave Ragget tahun 1993 lahir HTML versi 1.0
 Pada Juli 1994, HTML 2.0 resmi menjadi standar HTML pertama.
 Pada Januari 1997, standar HTML 3.2 resmi dirilis.
 Pada Desember 1998, standar HTML 4.0 resmi di rilis.
 pada tanggal 28 October 2014, standar HTML5 resmi dirilis.
Tim Berners-Lee
Perangkat yang Dibutuhkan
Web Browser
Web browser adalah program yang akan
menerjemahkan kode-kode HTML dan
menampilkannya menjadi halaman website.
Contoh : Chrome, Firefox, Safari, UC Browser,
Opera, Samsung Internet, Android,
Internet Explorer
Browser Market Share in Indonesia
Perangkat yang Dibutuhkan
Text Editor
Text editor adalah aplikasi yang berfungsi untuk
membuat dan mengedit file text. Salah satu contoh
text editor adalah aplikasi Notepad bawaan Windows.
Namun Notepad ini kurang cocok digunakan untuk
pemrograman.
Contoh : Notepad++, Atom, Komodo Edit, Sublime, dll.
Struktur Dasar HTML
Tag, Atribut, dan Element
 Tag di dalam HTML berfungsi untuk memberi tahu web
browser apa dan bagaimana sebuah teks harus ditampilkan.
<head>, <body>atau <p>, tanda-tanda ini dikenal dengan
sebutan HTML tag
 Atribut adalah informasi tambahan yang ditulis pada tag
pembuka.
<p align="center">Ini adalah paragraf pertama</p>
align adalah nama atribut
center adalah nilai atribut
Struktur Dasar HTML
Tag, Atribut, dan Element
 Element adalah satu bagian utuh yang terdiri dari tag,
atribut, dan seluruh teks yang berada di antara tag pembuka
dan penutup.
<body><p>Ini Adalah Paragrah Pertama</p></body>
<body>
<p>Ini Adalah Paragrah Pertama</p>
</body>
Struktur Dasar HTML
Contoh Penulisan Tag, Atribut, dan Element
Struktur Dasar HTML
Struktur Dasar HTML
<html>
<head>
……informasi tentang dokumen HTML
</head>
<body>
……informasi yang ditampilakan dalam
browser web
</body>
</html>
Struktur Dasar HTML
Aturan Dasar Penulisan HTML
 Case Sensitivity
<HEAD> = <head>
 Self Closing Tag
<br> <meta> <img>
 Tag berpasangan
<b>Huruf Bold</b>
 Whitespace
Adalah istilah yang merujuk kepada karakter ‘spasi’ yang tidak
tampil di layar.
 Komentar
Komentar dibuat menggunakan tag pembuka: 
Head Element
 Meta Elemen
Berfungsi memberikan informasi kepada Web Browser dan Mesin
Pencari mengenai halaman HTML yang sedang ditampilkan.
 Link Element
Digunakan untuk membuat ‘hubungan’ antara halaman HTML
dengan file lain
 Style Element
Digunakan untuk menginput kode style ke dalam halaman HTML.
 Title Element
berfungsi untuk menampilkan judul halaman di bagian ‘bingkai
atas’ web browser.
Text Formating Element
 Paragraf Element
Digunakan untuk membuat sebuah paragraf.
<p>Ini adalah sebuah paragraf</p>
 Anchor Element
Digunakan untuk membuat link ke halaman lain, atau link ke file
gambar, pdf atau file lainnya.
<a>Halaman Beranda</a>
<a href=“beranda.html”>Halaman Beranda</a>
 Heading Element
Digunakan untuk membuat judul (heading) di dalam halaman HTML.
<h1>Ini adalah judul paragraf</h1>
 Emphasis, Stong, Bold, dan Italic Element

Digunakan untuk menghasilkan efek tebal dan miring dari text.
<i>teks miring</i> <em>teks miring</em>

<b>teks miring</b> <strong>teks tebal</strong>
 Undeline dan Strikethrough Element
Digunakan untuk membuat efek garis bawah dan efek teks tercoret.
<s>efek tercoret</s> <del>efek tercoret</del>

<u>efek garis bawah</u> <ins>efek garis bawah </ins>
List Element
 Ordered List
Digunakan untuk membuat list yang berurutan.
Untuk menggunakan ordered list kita menggunakan tag <ol>,
sedangkan untuk membuat isi list kita menggunakan tag <li>
Ada 5 Atribut Type pada Ordered List

• type="a", menggunakan huruf kecil sebagai penanda list.
• type="A", menggunakan huruf besar sebagai penanda list.
• type="i", menggunakan angka romawi kecil sebagai penanda list.
• type="I", menggunakan angka romawi besar sebagai penanda list.
• type="1", menggunakan angka desimal sebagai penanda list,
ini adalah pilihan default jika atribut type tidak ditulis.
List Element
 Unordered List
Digunakan untuk membuat list yang tidak memerlukan urutan.
Untuk menggunakan unordered list kita menggunakan tag <ul>,
sedangkan untuk membuat isi list kita menggunakan tak <li>
Ada 3 Atribut Type pada Unordered List

• type="disc", menggunakan bulatan hitam sebagai penanda list, ini
adalah pilihan default jika atribut type tidak ditulis.
• type="circle", menggunakan bulatan hitam (dengan isi lingkaran
putih) sebagai penanda list.
• type="square", menggunakan kotak hitam sebagai penanda list.
Image Element
 Image Element
Digunakan untuk menambahkan gambar ke dalam halaman web.
Tag yang digunakan adalah tag <img> dan menambahkan atribut src
yang merupakan singkatan dari source
<img src=“kapitaselekta.jpg”>
.
Table Element
Untuk membuat tabel, setidaknya diperlukan 3 jenis element,
yaitu :
▪ <table> sebagai penanda table
▪ <tr> sebagai penanda baris
▪ <td> sebagai penanda kolom
Ketiga tag ini hanyalah syarat minimal. HTML masih menyediakan
beragam tag yang bias digunakan untuk membuat tabel.
Table Element
 Tabel Sederhana
<table>
<tr>
<td>Kolom 1 Baris 1</td>
<td>Kolom 2 Baris 1</td> Hasilnya :
</tr>
Kolom 1 Baris 1 Kolom 2 Baris 1
<tr>
<td>Kolom 1 Baris 2</td> Kolom 1 Baris 2 Kolom 2 Baris 2
<td>Kolom 2 Baris 2</td>

</tr>
</table>
Table Element
 Tabel Kompleks
Form Element
Form merupakan salah satu aspek terpenting di dalam sebuah
website. Hampir setiap web memiliki form sebagai sarana interaksi
dengan pengujung. Apakah itu digunakan untuk register,login, polling,
atau untuk pencarian (search box).
 Form Element
<form>
Seluruh objek form berada disini
</form>
 Input Element
<input type=“text”>
Form Element
Beberapa atribut type yang sering digunakan :
▪ Atribut text : input berupa text
▪ Atribut submit : input berupa tombol
▪ Atribut reset : input berupa tombol reset
▪ Atribut password : input berupa password (*****)
▪ Atribut checkbox : input berupa kotak pilihan dengan centang
▪ Atribut radio : input berupa lingkaran pilihan
▪ Atribut file : input berupa file untuk diupload
▪ Atribut image : input berupa gambar
▪ Atribut hidden : input berupa data yang tersembunyi
▪ Atribut button : input berupa tombol

Kapita Selekta: Ronaldo Syahputra, S.Kom, M.Kom Ronaldo - Syahputra@upiyptk - Ac.id

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Kapita Selekta: Ronaldo Syahputra, S.Kom, M.Kom Ronaldo - Syahputra@upiyptk - Ac.id

Diunggah oleh

Hak Cipta:

Format Tersedia

KAPITA SELEKTA

RONALDO SYAHPUTRA, S.KOM, M.KOM

<body><p>Ini Adalah Paragrah Pertama</p></body>

<p>Ini adalah sebuah paragraf</p>

<h1>Ini adalah judul paragraf</h1>

 Emphasis, Stong, Bold, dan Italic Element

<i>teks miring</i> <em>teks miring</em>

<s>efek tercoret</s> <del>efek tercoret</del>

Ada 5 Atribut Type pada Ordered List

Ada 3 Atribut Type pada Unordered List

<td>Kolom 2 Baris 2</td>

Anda mungkin juga menyukai