Scribd
Unggah
24 tayangan90 halaman

W1 2 HTML

HTML

Diunggah oleh

Nopal saifulloh
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
24 tayangan90 halaman

W1 2 HTML

HTML

Diunggah oleh

Nopal saifulloh
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 90

Pemrograman Dasar HTML

ISH3D4 – Sistem Informasi

Rahmat Fauzi, S.T., M.T


AGENDA
Week Topic Week Topic
1 Introduction HTML dan CSS 9 Model View Controller pada Framework
Laravel

2 HTML, CSS dan Java Script 10 Model View Controller pada Framework
Laravel

3 Server-Side berbasis web menggunakan 11 • POST dan GET


PHP • Pengenalan Cookies dan Session

4 Operator-operator pada PHP 12 • POST dan GET


• Pengenalan Cookies dan Session

5 Operator-operator pada PHP 13 TUBES

6 Percabangan dan Perulangan pada PHP 14 TUBES

7 mengintegrasikan halaman website dengan 15 UAS


database

8 Mid Term Exam 16 UAS


Home

Pokok Bahasan Capaian Bahasan


Saya Bee.. akan memba
ntu Anda mempelajari
modul ini.
Video Animasi Kuis / Latihan Link
Silahkan pilih materi ya
ng ingin Anda pelajari

Kesimpulan Pustaka
Pokok Bahasan 01 Pengenalan HTML

02 Persiapan Lingkungan
HTML

03 Heading HTML

04 Body HTML

Dasar HTML 05 Paragraph HTML

06 LIST HTML

07 Hyperlink HTML
Pokok Bahasan 08 Image HTML

09 Video dan Audio HTML

10 Tabel HTML

11 Form HTML

Dasar HTML
12

13

14
Capaian Pembelajaran
Home P02 Kemampuan menganalisis permasalahan, melakukan
identifikasi dan mendefinisikan kebutuhan komputasi
Yang bersesuaian dengan solusi

P03 Kemampuan untuk merancang, melakukan implementasi


dan mengevaluasi sistem berbasis komputer, proses,
komponen, atau program untuk memenuhi kebutuhan yang
diinginkan.

P07 Kemampuan untuk menganalisis dampak lokal dan


global dari komputasi pada individu, organisasi dan
masyarakat
Bab I
Pengenalan dan Definisi
HTML
Apa itu HTML ?
HTML atau HyperText Markup Language merupakan
Home P02 yang digunakan untuk membangun
Bahasa dasar
sebuah web dimana HTML menangani elemen-elemen
dasar pada pembangunan sebuah website.

Dasar P03
HTML

P09
Hierarki HTML
Home P02

Dasar P03
HTML

P09
Struktur Dasar HTML
Struktur HTML paling dasar adalah sebagai berikut :
Home P02

Dasar P03
HTML

P09
Dasar Sintaks HTML
Seperti yang sudah dijelaskan
sebelumnya struktur dasar HTML
antara lain berupa :
➢Deklarasi <! DOCTYPE html>
mendefinisikan dokumen
menjadi HTML5
➢Elemen <html> adalah elemen
dasar dari halaman HTML
➢Elemen <head> berisi informasi
meta tentang dokumen
➢Elemen <title> menentukan
judul untuk dokumen
➢Elemen <body> berisi konten
halaman yang terlihat
LETS CODE : Struktur Dasar HTML
1. Coba buka aplikasi Notepad.
2. Ketikan Sintaks Kode seperti di samping
Home3. Simpan P02
dengan nama “halaman1.html”
4. “Run” File di atas (halaman1.html) di sebuah
Aplikasi browser.

Hasilnya adalah :

Dasar P03
HTML

P09
LETS CODE : Struktur Dasar HTML
Struktur HTML paling dasar adalah sebagai berikut :
Home P02

Dasar P03
HTML

P09
Persiapan Lingkungan
HTML
Persiapan TOOLS
Home
1. Code
P02
Editor :
✓ Visual Studio Code ( rekomendasi )
Sublime Text,
Notepad++, etc
P03
Dasar 2. Aplikasi Browser
HTML
Google chrome / mozilla firefox / dll

P09
Silahkan Buka Code Editor nya
Home P02

Dasar P03
HTML

P09
Tag HTML

Tag dalam HTML


Home secara normal
P02 memiliki sepasang tag di mana tag pertama merupakan tag
pembuka dan yang kedua merupakan tag penutup. Konten yang ingin ditampilkan pada laman
web diletakkan di antara kedua tag tersebut.

P03
Design
Principles
Tag dalam HTML tidak semuanya berbentuk pasangan, ada beberapa tag yang hanya berdiri
sendiri seperti tag “<br/>” yang berguna untuk berpindah baris.
Element HTML

Homemerupakan
Elemen HTML P02 tag HTML yang telah memiliki konten atau isi di antara kedu
a tag pembuka dan penutupnya. Elemen HTML dapat berupa teks atau juga dapat
menyisipkan tag HTML lain pada elemen tersebut.
.

P03
Design
Principles
Atribut HTML
Home
Atribut HTML P02tambahan informasi dari sebuah tag HTML. Bentuk atribut
merupakan
untuk setiap tag HTML berbeda-beda sehingga kegunaan atribut juga berbeda seperti
menambahkan informasi warna elemen, ukuran lebar, ukuran panjang dan lain-lain.
.Namun, mayoritas atribut yang sering muncul untuk setiap tag HTML adalah atribut
“id” dan “class” karena kedua atribut ini berperan besar dalam pengembangan laman
P03
web dengan CSS dan JavaScript. Atribut HTML dideklarasikan di dalam tag pembuka
Design
pada setiap elemen HTML dengan format nama_atribut=”value”, setiap nilai atribut di
Principles
apit oleh petik dua.
Heading HTML
Heading HTML
Home P02
Heading pada HTML merupakan tag yang berguna
untuk menampilkan judul dari konten laman web
yang dibangun. Heading dalam sebuah laman web
. berperan penting untuk aplikasi mesin pencarian
karena sistem mesin pencarian bekerja dengan
P03
Design menggunakan Heading laman web kita sebagai
Principles index pencarian.
Contoh Tag pada Heading HTML

Home P02
JUDUL HALAMAN
<title></title>

.
CSS
<style></style> P03
Design
Principles
JAVASCRIPT
<script></script>

METADATA
<meta></meta>
Contoh Metadata
Home P02
<head>
<meta charset=“UTF-8”>
<meta name=“description” content=“kuliah web”>
<meta name=“keywords” content=“HTML,CSS,Js”>
<meta name=“author”
P03 content=“Rahmat Fauzi”>
Design
</head>
Principles
Body HTML
Heading HTML
Home P02

P03
Design
Principles
Contoh Tag di Body HTML
Home P02
Paragraph dan Heading
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<p>…..etc
Pendukung teks
<br>,<hr>,<em>,<strong>,…..
List
Design (bullet & numbering)
P03

<ul>,<ol>,<li>,<dl>,<dt>,<dd>
Principles
Gambar
<img>
Hyperlink
<a>
Contoh Tag di Body HTML
Home P02
Tabel
<table>,<thead>,<tbody>
Form
<form>,<input>,<select>,<button>,…..
JavaScript
<script> P03
Design
Object → Contohnya Flash
Principles
<object>
Grouping
<div>, <span>
Komentar
<! - - ini adalah komentar. - ->
Struktur Tag
Home P02
< Nama Tag Atribut = “nilai/value” >

Contoh :
< body bgcolor =P03“light blue” > → ket contoh memberi warna bac
Design
kground dengan light blue.
Principles

<body bgcolor=“light blue” id = “myid” class = “myclass” >


Contoh Atribut
• Daftar lengkap atribut di HTML
bisa dilihat di link berikut :
https://www.w3schools.com/tags/
Let’s Practice
Latihan Paragraph HTML
Latihan Paragraph
Home P02

P03
Design
Principles

Coba Save dan Compile di browser !


Fungsi Tag <br> sebagai Break

Home P02

P03
Design
Principles

Coba Save dan Compile di browser !


Fungsi Tag <b>,<i> dan <u>
Home P02

P03
Design
Principles

Coba Save dan Compile di browser !


Fungsi Tag <strong> dan <em>
Home P02

P03
Design
Principles

Coba Save dan Compile di browser !


Latihan Heading
Home P02

P03
Design
Principles

Coba Save dan Compile di browser !


Latihan Text Formatting dengan Tag berikut ini

Home P02

P03
Design
Principles

Coba Latihan, Compile di browser dan dikumpulkan sebagai tugas ke email !


Contoh Kasus Inspeksi Heading di detik.com

Home P02

P03
Design
Principles
Contoh Kasus Inspeksi Heading di detik.com

Home P02

P03
Design
Principles
Latihan LIST HTML
Latihan Ordered list <ol>
Rumus dasar Rumus dasar
<ol> <ol type = “ ”> </ol>
<li>item1</li>
<li>item2</li> ❖1
……..
❖A
……..
</ol>
❖a
❖I
❖i
Latihan Bullet Numbering

Coba Save dan Compile di browser !


Latihan Bullet Numbering

Coba Save dan Compile di browser !


Latihan Unordered list <ul>
Rumus dasar Rumus dasar
<ul> <ul type = “ ”> </ul>
<li>item1</li>
<li>item2</li> ❖disc
……..
❖circle
……..
</ul>
❖square
Latihan Unordered list <ul>
Latihan definition list <dl>

Coba Save dan Compile di browser !


HYPERLINK HTML
Hyperlink HTML
Rumus dasar
<a></a> → anchor

Agar halaman dalam suatu website dapat saling dihubungkan, dapat menggunakan suatu
penghubung/link di halaman tertentu dengan perintah <a href=”...”>....</a>.
Atribut yang digunakan dalam tag tersebut adalah :

▪Href : mendefinisikan address dari halaman yang dituju


▪Target : mendefinisikan dimana konten/halaman tujuan akan ditampilkan
▪ _blank : membuka halaman pada tab baru
▪ _self : membuka halaman pada halaman itu sendiri (menggantikan halaman
sebelumnya)
_parent
_top
Latihan Hyperlink ( link external )

Coba Save dan Compile di browser !


Hyperlink ( link internal )

Coba Save dan Compile di browser !


Hyperlink ( link internal )

Coba Save dan Compile di browser !


Case::Bagaimana jika berbeda folder ?
Hyperlink ( link internal )
Hyperlink ( link internal )

Coba Save dan Compile di browser !


Hyperlink
( menuju bagian tertentu / page anchor)
Hyperlink
( menuju bagian tertentu / page anchor)

Coba klik Bagian 1,2,3 !

Coba Save dan Compile di browser !


Hyperlink ( self / blank)

Hasilnya ? Muncul di tab baru


Coba Save dan Compile di browser !
IMAGE HTML
Image HTML
Pada HTML, sebuah gambar didefinisikan dengan tag <img>. Atribut yang digunakan dalam
tag tersebut adalah :
• Src : merupakan sumber URL/direktori sumber dari gambar
• Alt : merupakan teks alternatif yang ditampilkan apabila gambar gagal dimuat dalam
halaman
• Width : merupakan satuan ukuran lebar dari gambar
• Height : merupakan satuan ukuran tinggi dari gambar
• Border : merupakan pengaturan garis tepi pada gambar.
Image HTML

Coba Save dan Compile di browser !


Image dan Hyperlink

• Coba buatkan Image yang ber-hyperlink dengan tab baru !


Jawaban Image dan Hyperlink
VIDEO DAN AUDIO HTML
AUDIO VIDEO HTML

Sebelum berkembangnya teknologi HTML5, untuk menyisipkan audio


atau video, diperlukan sebuah plugin seperti Flash Player namun
sekarang dengan HTML5 memiliki tag yang dapat menyisipkan audio
atau video ke dalam laman web. Untuk audio menggunakan tag
<audio> untuk tag pembuka dan <source> untuk memanggil url atau
alamat direktori file. Sedangkan untuk video menggunakan tag <video>.
AUDIO VIDEO HTML
TABEL HTML
TABEL HTML

Baris/Row
Kolom

Cell / TableData
(td)
TABEL HTML

Baris 1, Kolom 1 Baris 1, Kolom 2

Baris 2, Kolom 1 Baris 2, Kolom 2


TABEL HTML

RUMUS UMUM
<table>
<tr>

<td>…</td>
</tr>

</table>
TABEL HTML ( Komplek )
TABEL HTML Atribut

• RUMUS UMUM Atribut


<table> ✓ Border
<tr> ✓ Cellspasing Menggunakan CSS

<td>…</td> ✓ Cellpading
</tr> ✓ Colspan
✓ Rowspan
</table>
TABEL HTML

Coba ubah border =“4”


TABEL HTML COLSPAN, ROWSPAN
TABEL HTML COLSPAN, ROWSPAN
TABEL HTML COLSPAN, ROWSPAN
TABEL HTML COLSPAN
TABEL HTML ROWSPAN
Tugas di rumah ROWSPAN COLSPAN
FORM HTML
HTML FORM

HTML Form merupakan salah satu bagian yang berfungsi sebagai


input atau masukan dari pengguna yang kemudian akan diproses
atau diolah untuk dapat digunakan sesuai dengan kebutuhan.
Contohnya proses pengiriman data, browse, hapus, penyuntingan
data dan lain sebagainya. HTML Form ditandai dengan tag <form>
..... </form>.
HTML FORM (atribut)

Atribut pada HTML form adalah sebagai berikut :


Action : mendefinisikan tindakan yang akan dilakukan
saat form dikirimkan
Target : mendefinisikan target yang akan dituju dari atribut
action (_self,_blank)
Name : sebagai identifikasi nama form
Method : menentukan metode HTTP (GET atau POST)
yang akan digunakan saat mengirimkan data dari form
HTML FORM (element)

Element pada HTML form adalah sebagai berikut :


Input → Banyak Jenis. Misalkan Radio button,Checkbox,
dll
Textarea
Select
Button
Label
Bentuk Umum

<Input type=“…..”>
Text
Password
Radio
Checkbox
Submit
Reset
Latihan FORM HTML
Latihan FORM HTML
Referensi Tambahan Tag

www.w3school.com/tags/tag_form.asp
Tugas Bikin Form
Thank You
Any Question ?
Tugas di Rumah

Semua latihan di slide ini dikumpulkan ke email saya :


Dengan subjek : NamaKelas_NamaMahasiswa_TugasHTML

Lampirkan sintaks coding dan screenshoot hasilnya.


Daftar Referensi

1. Modul Praktikum WAD SI FRI


2. Modul Praktikum WAD Teknik Informatika FIF
3. Petanikode.com
4. Youtube.com/webprogrammingUNPAS

Anda mungkin juga menyukai