Materi Web

DASAR WEB
By : Muhammad Ilham Syafii

MUHAMMAD ILHAM SYAFII
• Jepara, 30 Maret 2000

• MI Islamiyah Ibtidaiyah Bumiharjo (2011)
• MTs Miftahulhuda Watuaji (2014)
• SMK Wikrama 1 Jepara (2017)
• Masih Kuliah di UNISNU Jepara
MUHAMMAD ILHAM SYAFII
• Prakerin Tugusoft Yogyakarta (2016)
• Freelance Programmer (2017 – Sekarang)

• IT Programmer SMK Wikrama 1 Jepara 2017 - Sekarang
Apa itu website ?
Website adalah sebuah kumpulan
dari halaman web yang saling
berhubungan dan dapat diakses
melalui halaman depan (home page)
menggunakan sebuah browser.
Contoh Website dan Aplikasi berbasis
Web
Contoh Website dan Aplikasi berbasis
Web
Bagaimana caranya membuat website
maupun aplikasi berbasis web ?
BAHASA PEMROGRAMAN
HTML CSS PHP
HTML (Hyper Text Markup Language) adalah sebuah
bahasa markup yang digunakan untuk membuat sebuah
halaman web. Didalam dunia pemrograman berbasis web
(Web Programming) menjadi pondasi dasarpada halaman
website. File html di simpan dengan extensi .html (dot
html) dan dapat dieksekusi mengguanakan web browser
(google chrome, Mozilla Firefox, Opera, Safari dll).
Hal hal yang perlu dipersiapkan sebelum membuat

sebuah web yaitu :
1. Web Browser
2. Text Editor
Text Editor adalah aplikasi yang digunakan untuk menuliskan
sintaks atau kode – kode program berikut beberapa text editor :
• Sublime Text
• Notepad
• Notepad ++
• Atom
Tag, Element, dan Atribut HTML
Tag HTML
 Tag HTML
Tag merupakan kode yang digunakan untuk

untuk memperkenalkan pada web browser,
untuk apa text HTML yang ditulis
Jenis – Jenis Tag yang sering digunakan
Jenis – Jenis Tag yang sering digunakan
Element HTML
Element merupakan isi atau objek yang

berada diantara tag pembuka dan tag
penutup dan tag itu sendiri contoh :
Atribut HTML
Atribut merupakan informasi tambahan yang

digunakan didalam tag pembuka
<p> adalah tag p
align adalah nama atribut
Center adalah nilai dari atribut

Pengenalan atribut hml adalah element dari p
Struktur Dasar HTML
Struktur Dasar HTML
latihan_struktur.html
<!DOCTYPE html> menandakan html 5
<html></html> menandakan bahwa ini dokumen html

<head></head> kepala/wadah untuk element head
diantaranya terdapat <title>, <style>,
<meta>,<script>
Komentar dalam HTML
Komentar dalam HTML
Untuk membuat komentar diawali dengan tanda <!–- dan diakhiri dengan
tanda -->
latihan_komentar.html
Heading HTML
Heading HTML
Heading digunakan untuk membuat judul,

terdiri dari 6 level mulai dari <h1> s/d <h6>
contoh :
latihan_heading.html
Berikut hasil tampilan dari kode diatas
Paragraf HTML
Paragraf HTML
Paragraf digunakan untuk membuat text

dalam bentuk paragraf
contoh :
latihan_paragraf.html
Physical Format HTML
Physical Format HTML
Physical format adalah format terhadap fisik

suatu font contoh :
latihan_format_karakter.html
Mengatur Font dalam HTML
Font pada HTML
Tag font digunakan untuk mengatur jenis,

ukuran, dan warna font. Contoh :
latihan_font.html
List dalam HTML
Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List,

artinya list ditampilkan secara urut
Pada Ordered List “<ol>” secara default akan
diurutkan dengan angka. Apabila ingin
mengurutkan dengan huruf/romawi, tinggal
menambahkan atribut type pada tag <ol>
Unerdered List “<ul>”
Tag <ul> adalah kependekan dari Unerdered

List, merupakan pengurutan / list tidak
berurut , menggunakan symbol atau bullet
Contoh <ol> dan <ul> :
latihan_List.html
Membuat Hyperlink
Hyperlink
Dalam HTML link dapat digunakan untuk

berbagai keperluan diantaranya
menghubungkan antar halaman,
menghubunkan ke halaman website lain,
bagian lain dalam satu halaman ataupun
menghubungakan ke email:
Sintaks :
Contoh :
latihan_List.html
Menampilkan Gambar Pada
Dokumen HTML
Menampilkan Gambar
Untuk menampikan gambar biasanya

mengguanakan tag <img> , berikut contoh :
Tabel dalam HTML
Membuat Tabel
HTML Menyediakan tag – tag untuk membuat tabel,

yaitu
• Tag <table> : Mendefinisikan sebuah tabel
• Tag <tr> : Mendefinisikan baris tabel
• Tag <th> : Mendefinisikan judul kolom
• Tag <td> : Mendefinisikan isi tiap kolom
• Tag <thead> : Mengelompokkan bagian
kepala(header) sebuah tabel
Membuat Tabel
Tag <tbody> : Mengelompokkan bagian isi

(body) dari sebuah tabel
Tag <caption> : Mendefinisikan judul /
keterangan tabel
Contoh :
latihan_tabel.html
Menggabungkan Kolom dan Baris pada
HTML
Untuk menggabungkan kolom dalam tabel html
yaitu dengan menggunakan atribut “colspan”
contoh :
latihan_colspan.html
Menggabungkan Kolom dan Baris pada
HTML
Untuk menggabungkan baris dalam tabel html
yaitu dengan menggunakan atribut “rowspan”
contoh :
latihan_rowspan.html
Form dalam HTML
Form
Form digunakan untuk input data/entri data. Di

dalam html terdapat beberapa control form yg
dapat digunakan, seperti control text box, list box,
password box, text area box, radio button, check
box, reset button, submit button, hidden field, file
select.
Control Text Box
Untuk membuat control text box dalam html

kita cukup menambahkan tag <input> yg
diletakkan diantara tag <form>...</form>
Agar lebih rapih kita gunakan tag tabel
contoh:
latihan_textbox.html
Control Text Area
Untuk membuat control text area dalam html

kita cukup menambahkan tag <textarea> yg
contoh:
latihan_textarea.html
Control List Box
Untuk membuat control list box dalam html

kita cukup menambahkan tag <select> yg
contoh:
latihan_lstbox.html
Control Radio Button
Untuk membuat control list box dalam html

kita cukup menambahkan tag
<input>dengan type “radio” contoh :
latihan_radiobutton.html
Control Check Box
Untuk membuat control check box dalam

html kita cukup menambahkan tag <input>
dengan type “checkbox” contoh :
Control Password
Untuk membuat control check box dalam

html kita cukup menambahkan tag <input>
dengan type “password” contoh :
Latihan Buat Form HTML
Latihan_formbiodata.html

Materi Web

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

Materi Web

Diunggah oleh

Hak Cipta:

Format Tersedia

DASAR WEB

By : Muhammad Ilham Syafii

• Jepara, 30 Maret 2000

• Prakerin Tugusoft Yogyakarta (2016)

• Freelance Programmer (2017 – Sekarang)

Hal hal yang perlu dipersiapkan sebelum membuat

Tag merupakan kode yang digunakan untuk

Element merupakan isi atau objek yang

Atribut merupakan informasi tambahan yang

<p> adalah tag p

align adalah nama atribut

Center adalah nilai dari atribut

<!DOCTYPE html> menandakan html 5

<html></html> menandakan bahwa ini dokumen html

Heading digunakan untuk membuat judul,

Paragraf digunakan untuk membuat text

Physical format adalah format terhadap fisik

Tag font digunakan untuk mengatur jenis,

Tag <ol> adalah kependekan dari Ordered List,

Tag <ul> adalah kependekan dari Unerdered

Dalam HTML link dapat digunakan untuk

Untuk menampikan gambar biasanya

HTML Menyediakan tag – tag untuk membuat tabel,

Tag <tbody> : Mengelompokkan bagian isi

Form digunakan untuk input data/entri data. Di

Untuk membuat control text box dalam html

Untuk membuat control text area dalam html

Untuk membuat control list box dalam html

Untuk membuat control list box dalam html

Untuk membuat control check box dalam

Untuk membuat control check box dalam

Anda mungkin juga menyukai