pemrograman dasar htmlrahmatfauzi.com/wp-content/uploads/2019/12/w1-2-html.pdfatau video, diperlukan...

Pemrograman Dasar HTML

ISH3D4 – Sistem Informasi

Rahmat Fauzi, S.T., M.T

Week Topic Week Topic1 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 menggunakanPHP

11 • POST dan GET• 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 database

15 UAS

8 Mid Term Exam 16 UAS

AGENDA

Home

Capaian Bahasan

Kuis / Latihan

Pustaka

Saya Bee.. akan membantu Anda mempelajari

modul ini.

Silahkan pilih materi yang ingin Anda pelajari

Link

Pokok Bahasan

Video Animasi

Kesimpulan

Pokok BahasanPengenalan HTML01

Persiapan LingkunganHTML

02

Heading HTML03

Body HTML04

Paragraph HTML05

LIST HTML06

Hyperlink HTML07

Dasar HTML

Pokok BahasanImage HTML08

Video dan Audio HTML09

Tabel HTML10

Form HTML11

12

13

14

Dasar HTML

Home

Capaian Pembelajaran

Kemampuan menganalisis permasalahan, melakukan

identifikasi dan mendefinisikan kebutuhan komputasi

Yang bersesuaian dengan solusi

Kemampuan untuk merancang, melakukan implementasi

dan mengevaluasi sistem berbasis komputer, proses,

komponen, atau program untuk memenuhi kebutuhan yang

diinginkan.

Kemampuan untuk menganalisis dampak lokal dan

global dari komputasi pada individu, organisasi dan

masyarakat

P02

P03

P07

Bab IPengenalan dan Definisi

HTML

Home

Apa itu HTML ?

P02

P03

P09

Dasar

HTML

HTML atau HyperText Markup Language merupakan

Bahasa dasar yang digunakan untuk membangun

sebuah web dimana HTML menangani elemen-elemen

dasar pada pembangunan sebuah website.

Home

Hierarki HTML

P02

P03

P09

Dasar

HTML

Home

Struktur Dasar HTML

P02

P03

P09

Dasar

HTML

Struktur HTML paling dasar adalah sebagai berikut :

Dasar Sintaks HTMLSeperti yang sudah dijelaskansebelumnya struktur dasar HTML antara lain berupa :

➢Deklarasi <! DOCTYPE html> mendefinisikan dokumenmenjadi HTML5

➢Elemen <html> adalah elemendasar dari halaman HTML

➢Elemen <head> berisi informasimeta tentang dokumen

➢Elemen <title> menentukanjudul untuk dokumen

➢Elemen <body> berisi kontenhalaman yang terlihat

Home

LETS CODE : Struktur Dasar HTML

P02

P03

P09

Dasar

HTML

1. Coba buka aplikasi Notepad.

2. Ketikan Sintaks Kode seperti di samping

3. Simpan dengan nama “halaman1.html”

4. “Run” File di atas (halaman1.html) di sebuah

Aplikasi browser.

Hasilnya adalah :

Home

LETS CODE : Struktur Dasar HTML

P02

P03

P09

Dasar

HTML

Struktur HTML paling dasar adalah sebagai berikut :

Persiapan LingkunganHTML

Home P02

P03

P09

Dasar

HTML

1. Code Editor :

✓ Visual Studio Code ( rekomendasi )

Sublime Text,

Notepad++, etc

2. Aplikasi Browser

Google chrome / mozilla firefox / dll

Persiapan TOOLS

Home P02

P03

P09

Dasar

HTML

Silahkan Buka Code Editor nya

Home

Tag HTML

P02

P03Design

Principles

Tag dalam HTML secara normal 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.

Tag dalam HTML tidak semuanya berbentuk pasangan, ada beberapa tag yang hanya berdiri

sendiri seperti tag “<br/>” yang berguna untuk berpindah baris.

Home

Element HTML

P02

P03Design

Principles

.

Elemen HTML merupakan 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.

Home P02

P03Design

Principles

.

Atribut HTML merupakan tambahan informasi dari sebuah tag HTML. Bentuk atribut

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

web dengan CSS dan JavaScript. Atribut HTML dideklarasikan di dalam tag pembuka

pada setiap elemen HTML dengan format nama_atribut=”value”, setiap nilai atribut di

apit oleh petik dua.

Atribut HTML

Heading HTML

Home P02

P03Design

Principles

.

Heading HTML

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

menggunakan Heading laman web kita sebagai

index pencarian.

Home P02

P03Design

Principles

.

Contoh Tag pada Heading HTML

JUDUL HALAMAN

<title></title>

CSS

<style></style>

JAVASCRIPT

<script></script>

METADATA

<meta></meta>

Home P02

P03Design

Principles

Contoh Metadata

<head>

<meta charset=“UTF-8”>

<meta name=“description” content=“kuliah web”>

<meta name=“keywords” content=“HTML,CSS,Js”>

<meta name=“author” content=“Rahmat Fauzi”>

</head>

Body HTML

Home P02

P03Design

Principles

Heading HTML

Home P02

P03Design

Principles

Contoh Tag di Body HTML

Paragraph dan Heading<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<p>…..etc

Pendukung teks<br>,<hr>,<em>,<strong>,…..

List (bullet & numbering)

<ul>,<ol>,<li>,<dl>,<dt>,<dd>

Gambar<img>

Hyperlink<a>

Home P02

P03Design

Principles

Contoh Tag di Body HTML

Tabel<table>,<thead>,<tbody>

Form<form>,<input>,<select>,<button>,…..

JavaScript<script>

Object → Contohnya Flash<object>

Grouping<div>, <span>

Komentar<! - - ini adalah komentar. - ->

Home P02

P03Design

Principles

Struktur Tag

< Nama Tag Atribut = “nilai/value” >

Contoh :

< body bgcolor = “light blue” > → ket contoh memberi warna bac

kground dengan light blue.

<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/

https://www.w3schools.com/tags/

Let’s Practice

Latihan Paragraph HTML

Home P02

P03Design

Principles

Latihan Paragraph

Coba Save dan Compile di browser !

Home P02

P03Design

Principles

Fungsi Tag <br> sebagai Break


Home P02

P03Design

Principles

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


Home P02

P03Design

Principles

Fungsi Tag <strong> dan <em>


Home P02

P03Design

Principles

Latihan Heading


Home P02

P03Design

Principles

Latihan Text Formatting dengan Tag berikut ini

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

Home P02

P03Design

Principles

Contoh Kasus Inspeksi Heading di detik.com

Latihan LIST HTML

Latihan Ordered list <ol>

Rumus dasar

<ol>

<li>item1</li>

<li>item2</li>

……..

……..

</ol>

Rumus dasar

<ol type = “ ”> </ol>

❖1

❖A

❖a

❖I

❖ i

Latihan Bullet Numbering


Latihan Unordered list <ul>

Rumus dasar

<ul>

<li>item1</li>

<li>item2</li>

……..

……..

</ul>

Rumus dasar

<ul type = “ ”> </ul>

❖disc

❖circle

❖square

Latihan Unordered list <ul>

Latihan definition list <dl>


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 )


Hyperlink ( link internal )


Case::Bagaimana jika berbeda folder ?

Hyperlink ( menuju bagian tertentu / page anchor)

Hyperlink ( menuju bagian tertentu / page anchor)

Coba klik Bagian 1,2,3 !


Hyperlink ( self / blank)

Coba Save dan Compile di browser !Hasilnya ? Muncul di tab baru

IMAGE HTML

Image HTML

Pada HTML, sebuah gambar didefinisikan dengan tag <img>. Atribut yang digunakan dalamtag tersebut adalah :

• Src : merupakan sumber URL/direktori sumber dari gambar

• Alt : merupakan teks alternatif yang ditampilkan apabila gambar gagal dimuat dalamhalaman

• Width : merupakan satuan ukuran lebar dari gambar

• Height : merupakan satuan ukuran tinggi dari gambar

• Border : merupakan pengaturan garis tepi pada gambar.

Image HTML


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

Cell / TableData

(td)

Baris/RowKo

lom

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

<table>

<tr>

<td>…</td>

</tr>

</table>

Atribut

✓ Border

✓ Cellspasing

✓ Cellpading

✓ Colspan

✓ Rowspan

Menggunakan CSS

TABEL HTML

Coba ubah border =“4”

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 sebagaiinput atau masukan dari pengguna yang kemudian akan diprosesatau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingandata 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

Referensi Tambahan Tag

www.w3school.com/tags/tag_form.asp

Tugas Bikin Form

Thank YouAny 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

pemrograman dasar htmlrahmatfauzi.com/wp-content/uploads/2019/12/w1-2-html.pdfatau video, diperlukan...

Documents