MODUL 2 HTML. (HyperText Mark-Up Language)

Praktikum Pemrograman Berbasis Web

MODUL 2

HTML (HyperText Mark-Up Language)

STIMIK

STMIK Pradnya Paramita 2017

Laboratorium

Komputer

PPKIA Pradnya Paramita Malang

[email protected]


Pertemuan 2 2.1 Tujuan :

1. Mahasiswa dapat memahami dan mengenai perintah – perintah HTML 2. Mahasiswa dapat membuat beberapa halaman website sederhana

2.2 Materi : 1. Tabel 2. List 3. Form 4. Semantic HTML 2.3 Teori 2.3.1 Semantic HTML

Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelas menggambarkan artinya untuk kedua belah pihak yaitu browser dan pengembang. Contoh elemen non-semantik:
dan <span> - tidak menceritakan apa-apa tentang isinya. Contoh elemen semantik:
, , dan <article> - Jelas mendefinisikan isinya. Banyak situs web berisi kode HTML seperti:

untuk menunjukkan navigasi, header, dan footer. HTML5 menawarkan unsur-unsur semantik baru untuk menentukan bagian-bagian yang berbeda dari suatu halaman web:  <article> = mendefinisikan sebuah artikel 
=Mendefinisikan konten selain dari konten halaman  <details> = Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan 
= Mendefinisikan sebuah caption untuk elemen

= Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll 
= Mendefinisikan untuk dokumen atau bagian footer 
= Menentukan untuk dokumen atau bagian header  <main> = Menentukan isi utama dokumen  <mark> = Mendefinisikan teks yang ditandai / disorot 
= Mendefinisikan link navigasi  <section> = Mendefinisikan sebuah bagian dalam sebuah dokumen  <summary> = Mendefinisikan sebuah judul terlihat untuk <details> elemen  = Mendefinisikan tanggal / waktu


[email protected]

Praktikum Pemrograman Berbasis Web Elemen <section> elemen mendefinisikan bagian dalam sebuah dokumen. Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak. Skrip Hasil <section>
WWF

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

elemen
menentukan independen, konten mandiri. Contoh di mana elemen <article> dapat digunakan: posting forum, blog post. Artikel koran Skrip Hasil <article>
What Does WWF Do?

WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.

elemen
menentukan header untuk dokumen atau bagian. Elemen
harus digunakan sebagai wadah untuk konten pengantar. Contoh berikut mendefinisikan header untuk sebuah artikel: Skrip Hasil <article>

What Does WWF Do?

WWF's mission:

WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.

elemen
menentukan footer untuk dokumen atau bagian. Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan, informasi kontak, dll Skrip Hasil

Posted by: Hege Refsnes

Contact information: [email protected].


[email protected]

Praktikum Pemrograman Berbasis Web elemen
mendefinisikan satu set link navigasi. Perhatikan bahwa tidak semua link dari dokumen harus di dalam elemen
. elemen
dimaksudkan hanya untuk blok utama link navigasi. Skrip Hasil
HTML | CSS | JavaScript | jQuery

elemen
mendefinisikan beberapa konten selain dari konten itu ditempatkan di (seperti sidebar).Samping konten harus terkait dengan konten sekitarnya. Skrip Hasil
My family and I visited The Epcot center this summer.

Epcot Center

The Epcot Center is a theme park in Disney World, Florida.

Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk gambar. elemen mendefinisikan gambar,
mendefinisikan judul.Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama dalam sebuah elemen
: Skrip Hasil

Fig.1 - The Pulpit Rock, Norway.

2.3.2 Tabel

Untuk menambahkan sebuah table yang baris dan kolomnya dapat anda sesuaikan kebutuhan table yang anda buat. Elemen table terdiri dari
, digunakan untuk membuat baris,
dan . Dimana fungsi masing – masing berbeda,
untuk membuat header, digunakan untuk membuat kolom. elemen adalah wadah data tabel. Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar, tabel lain, dll. Atribut elemen Tabel pada HTML 5 sebagai berikut : Tag

CSS border property CSS border-collapse CSS padding property CSS text-align CSS border-spacing


Definisi

elemen untuk mendefinisikan tabel elemen untuk menentukan baris tabel elemen untuk menentukan data tabel elemen untuk menentukan tabel pos elemen untuk mendefinisikan judul tabel Untuk menentukan jarak garis Untuk menjadikan satu garis Untuk menambah padding untuk sel Untuk menyelaraskan teks sel Untuk mengatur jarak antara selsel

[email protected]

Praktikum Pemrograman Berbasis Web Tag

colspan rowspan id

Definisi

untuk membuat rentang sel banyak kolom untuk membuat rentang sel banyak baris untuk mendefinisikan identitas satu tabel

Contoh :

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

John Doe 80

Pada elemen Table HTML menggunakan property CSS : Skrip

5,

<style> table, th, td { border: 1px solid black; (1) border-collapse: collapse; (2) } th, td { padding: 15px; (3) } th { text-align: left; (4) } table { border-spacing: 15px;(5) }


Untuk

menambahkan

sebuah

border

hasil

[email protected]


Jika Anda ingin garis batas jadi dalam satu garis, tambahkan properti CSS border-collapse. Sel Padding menentukan ruang antara isi sel dan perbatasannya. Jika Anda tidak menentukan bantalan, selsel tabel akan ditampilkan tanpa padding. Untuk mengatur padding, menggunakan properti CSS padding. HTML Table –align kiri. Secara default, judul tabel yang ada adalah tebal dan berada di tengah. Untuk menyelaraskan tajuk tabel maka align berada di kiri, menggunakan properti text-align CSS. jarak Padding Border Spacing Border menentukan ruang antara sel-sel. Untuk mengatur jarak antar garis, menggunakan properti CSS border-spacing, jika garisnya Cuma satu maka jaraknya tidak terlihat. Untuk membuat merger atau merekatkan beberapa kolom kita membutuhkan atribut colspan dan rowspan untuk merekatkan beberapa baris. Skrip

Name Telephone

Bill Gates 55577854 55577855

Cell that spans two rows:

Name: Bill Gates

Telephone: 55577854

55577855

Hasil

Untuk menambahkan keterangan pada tabel kita menggunakan , tag harus ditulis setelah tag Skrip Hasil

tag


[email protected]

Monthly savings
Month Savings

January $100

February $50

Untuk menentukan gaya khusus untuk tabel menambahkan atribut id ke tabel, contoh: Skrip Hasil

khusus,

maka

perlu

<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 { width: 100%; background-color: #f1f1c1; }


Jill Smith 50

Eve Jackson 94

John Doe 80


[email protected]



Jill Smith 50

Eve Jackson 94

John Doe 80

table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; }

2.3 LITS List Item (LI) : digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Daftar dapat bersarang di dalam daftar. Daftar item dapat berisi elemen HTML lainnya Atribut/elemen Definisi untuk mendefinisikan daftar unordered (tidak
CSS list-style-type
type

Skrip

berurutan) untuk menentukan item daftar penanda untuk mendefinisikan daftar berurutan menentukan jenis penomoran untuk menentukan item daftar untuk mendefinisikan daftar deskripsi untuk mendefinisikan istilah deskriptif untuk menggambarkan istilah dalam daftar deskripsi

An Unordered HTML List

Coffee

Tea

Milk

An Ordered HTML List


Hasil

[email protected]

Coffee

Tea

Milk

Unordered (Tidak berurutan) List HTML Dan List unordered dimulai dengan tag
. Setiap item daftar dimulai dengan tag
. Daftar item akan ditandai dengan peluru (lingkaran hitam kecil) secara default. Unordered List mempunyai Pilihan penanda dengan menggunakan Properti CSS list-style-type. Skrip
Unordered List with Disc Bullets

Coffee

Tea

Milk

1. Disc = Menetapkan item daftar penanda dengan peluru (default) 2. Circle = Menetapkan item daftar penanda dengan lingkaran 3. Square = menetapkan item daftar penanda dengan persegi 4. None = tidak menggunakan penanda

Ordered List atau Daftar HTML yang berurutan.Daftar ini memerintahkan dengan tag
. Setiap item daftar dimulai dengan tag
. Daftar item akan ditandai dengan angka secara default: Skrip
Ordered List with Numbers
1. Type =”1” : Daftar item diberi nomor dengan angka (default)
2. Type = “A” : Daftar item diberi
Coffee
nomor dengan huruf capital
Tea
3. Type = “a” : Daftar item diberi
Milk
nomor dengan huruf kecil
4. Type = “I” : Daftar item diberi nomor dengan huruf romawi besar 5. Type = “i” : Daftar item diberi nomor dengan huruf romawi kecil HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. Tag
mendefinisikan daftar deskripsi, tag
mendefinisikan istilah (nama), dan Tag
menjelaskan setiap istilah: Skrip

A Description List

Hasil

Coffee

- black hot drink

Milk

- white cold drink

List atau daftar juga bisa bersarang, Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll Skrip Hasil


[email protected]

A Nested List

Coffee

Tea

Black tea

Green tea

Milk

Daftar HTML bisa ditata dalam berbagai cara dengan CSS.Salah satu cara

yang populer adalah gaya daftar horizontal, untuk membuat menu: Skrip <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { }

Hasil

float: left;

li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; }

Home

News

Contact

About


[email protected]

Praktikum Pemrograman Berbasis Web 2.4. HTML Forms Pada saat membuat form anda bisa meletakkan kontrol - kontrol pada form untuk memperbolehkan inputan dari user. Semua kontrol biasanya di letakkan di antara tag tapi anda juga bisa meletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrol gunakan tag . 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 Pada dasarnya tag
dan digunakan bersama – sama untuk meminta masukan dari user kemudian dikirimkan ke server. Tag menyediakan kerangkanya. Tag menyediakan elemennya. Standar penulisan form adalah sebagai berikut: ...
Attribute Method memiliki dua nilai, yaitu POST dan GET. Method GET berfungsi untuk mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL(Uniform Resource Locator) yang ditunjuk. Method POST berfungsi untuk mengirimkan datanya secara terpisah. Jika data masukkan terlalu banyak, disarankan menggunakan method POST. Attribut ACTION berisi URL dari program / dokumen yang berisi scripting yang dipanggil oleh form tersebut. Atribut

Keterangan

Name

nama untuk form yang berlaku

Method

GET = data yang dikirim melalui URL address POST = data yang dikirimkan bersama HTTP header

Action

URL / File yang digunaka untuk menangkap dan mengolah nilai

2.4.1 Elemen Input Bentuk elemen yang paling penting adalah elemen . elemen dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut. Macam – macam elemen input: mendefinisikan satu baris kolom input teks. mendefinisikan sebuah kolom password dengan karakter yang ditampilkan lingkaran atau bintang. mendefinisikan tombol untuk mengirimkan data formulir ke bentuk-handler. Bentuk-handler biasanya halaman server dengan script untuk memproses input data. mendefinisikan sebuah tombol reset yang akan mengatur ulang semua nilai bentuk ke nilai standar.


[email protected]

Praktikum Pemrograman Berbasis Web mendefinisikan tombol radio. Tombol radio hanya bisa di[ilih HANYA SATU dari sejumlah pilihan mendefinisikan sebuah kotak yang bisa dicentang. Pengguna bisa tidak memilih atau memilih lebih dari satu. Skrip
First name:

Last name:

User password:

Hasil

Male
Female
Other

I have a bike
I have a car

Elemen <Select> mendefinisikan daftar drop-down.

Hasil

elemen mendefinisikan field input multi-line (text area). Atribut rows menentukan jumlah terlihat baris dalam area teks. Atribut cols menentukan lebar terlihat dari area teks. Skrip Hasil<br /> <br /> STMIK Pradnya Paramita 2017<br /> <br /> suvi.rahma@gmail.com<br /> <br /> Praktikum Pemrograman Berbasis Web <form > <textarea name="message" rows="10" cols="30"> The cat was playing in the garden.

elemen

Pada HTML 5 tabel terdapat beberapa element baru yaitu : elemen menentukan daftar pilihan yang telah ditentukan untuk elemen . Pengguna akan melihat daftar drop-down pilihan pradidefinisikan sebagai mereka input data. Daftar atribut dari elemen , harus mengacu pada atribut id dari elemen . Skrip Hasil

Tujuan dari elemen adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna. elemen menentukan bidang key generator-pair dalam formulir.Ketika formulir dikirimkan, dua tombol dihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan. Skrip

Username:

Encryption:

Hasil

elemen merupakan hasil perhitungan (seperti yang dilakukan oleh script). melakukan perhitungan dan menampilkan hasil dalam elemen .

0


[email protected]

Praktikum Pemrograman Berbasis Web 100 + =

Elemen Inputan baru di HTML 5, jenis inputan baru yang tidak didukung oleh browser web yang lebih lama, akan tetapi cara kerjanya seperti . Berikut elemen inputan yang baru di HTML 5 : digunakan untuk field input yang harus berisi warna. digunakan untuk field input yang harus berisi tanggal. Tergantung pada dukungan browser, tanggal pemetik dapat muncul di bidang masukan menentukan field input tanggal dan waktu, dengan tidak ada zona waktu. digunakan untuk field input yang harus berisi alamat email. Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan. Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email. memungkinkan pengguna untuk memilih bulan dan tahun. mendefinisikan sebuah field input numerik. Anda juga dapat mengatur pembatasan apa nomor yang diterima. Contoh berikut menampilkan field input numerik, di mana Anda dapat memasukkan nilai dari 1 sampai 5: mendefinisikan kontrol untuk memasukkan nomor yang nilainya sebenarnya tidak penting (seperti kontrol slider). Kisaran default adalah 0 sampai 100. Namun, Anda dapat mengatur pembatasan nomor apa yang diterima dengan min, max, dan value. digunakan untuk bidang pencarian (kolom pencarian berperilaku seperti kolom teks biasa). digunakan untuk field input yang harus berisi nomor telepon. memungkinkan pengguna untuk memilih waktu (tidak ada zona waktu) digunakan untuk field input yang harus berisi alamat URL.Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika disampaikan.Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan url. memungkinkan pengguna untuk memilih satu minggu dan tahun. Skrip
Select your favorite color:


Hasil

[email protected]

Praktikum Pemrograman Berbasis Web Skrip
Birthday:

Hasil

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Birthday (date and time):

E-mail:

Birthday (month and year):

Quantity (between 1 and 5):

Aturan masukan/ Inputan pada HTML5. Berikut adalah daftar dari beberapa aturan masukan umum: Atribut Deskripsi Menentukan bahwa sebuah field input harus dinonaktifkan disabled Menentukan nilai maksimum untuk sebuah field input max maxlength Min pattern readonly Required Size Step Value

Menentukan jumlah maksimum karakter untuk sebuah field input Menentukan nilai minimum untuk sebuah field input untuk Menentukan ekspresi reguler dan memeriksa nilai terhadap masukan Menentukan bahwa sebuah field input hanya bisa dibaca saja (tidak dapat diubah) Menentukan bahwa sebuah field input diperlukan (harus diisi) Menentukan lebar (dalam karakter) dari sebuah field input Menentukan interval nomor hukum untuk sebuah field input Menentukan nilai default untuk field input


[email protected]

Praktikum Pemrograman Berbasis Web 3.4 LATIHAN PRAKTIKUM 3.4.1 PENGGUNAAN TABEL 1. Membuat garis tabel menjadi satu garis. <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }

First Name Last Name Points

Jill Smith 50

Eve Jackson 94

2. Membuat meja lebar 300 piksel <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }


[email protected]



Jill Smith 50

Eve Jackson 94

3. Menambahkan keterangan dengan huruf "Nama" ke Tabel <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }
Names

Jill Smith 50

Eve Jackson 94

4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah. <style>


[email protected]

Praktikum Pemrograman Berbasis Web table, th, td { border: 5px solid red; } th, td { padding: 5px; text-align: left; }


Jill Smith 50

Eve Jackson 94

5.

menyelaraskan teks dalam tabel disebelah kiri

<style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left; }


[email protected]



Jill Smith 50

Eve Jackson 94

6. Menambahkan warna latar belakang hitam dengan teks putih untuk semua baris tabel. <style> table, th, td { border: 1px solid black; text-align: left; } tr { background-color : black; color : white; }


Jill Smith 50

Eve Jackson 94

2. Penggabungan sel dengan tag dan a. Atribut ROWSPAN ditempatkan pada tag


[email protected]

Praktikum Pemrograman Berbasis Web b. Atribut COLSPAN bisa ditempatkan pada tag atau

3. Pengaturan jarak dalam tabel : CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai tabel. CELLPADDING mengatur jarak teks terhadap tepi kiri.

3.4.2 PENGGUNAAN FORM 1. Input data dengan input

File info.htm yang dituju oleh web diatas.


[email protected]


2. Penggunaan tipe checkbox

3. Penggunaan tombol radio dan komentar

4. Pemilihan dengan select


[email protected]

Praktikum Pemrograman Berbasis Web 3.5 TUGAS 1.Buatlah seperti tampilan dibawah ini

Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany 2.Buatlah Tabel


[email protected]

Copyright © 2024 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

MODUL 2 HTML. (HyperText Mark-Up Language)

Recommend Documents

Cell that spans two rows:

An Unordered HTML List

An Ordered HTML List

Unordered List with Disc Bullets

Ordered List with Numbers

A Description List

A Nested List