P2- Pengantar HTML
Presented by:
Ripto Mukti Wibowo, Ph.D.
[Link]@[Link]
Department of Information Systems
Universitas Katolik Indonesia Atma Jaya
Lecturer Agenda (Before UTs)
• 1. Basic Web Concepts
• 2. Page Structure (HTML Concepts)
• 3. Practice and practice using HTML
• 4. Basic CSS concepts and implementing CSS elements.
• 5. Basic concepts and implementing and practicing using JavaScript elements.
• 6. Explain basic PHP concepts, as well as implementing and practicing using PHP elements.
• 7. Web Era- Gen AI
Evaluasi Hasil Belajar:
Keberhasilan mahasiswa dalam perkuliahan
ini ditentukan oleh prestasi yang
bersangkutan dalam :
1. Kehadiran sebanyak 75% di kelas.
2. Partisipasi Kegiatan Kelas.
3. Tugas-Tugas Harian.
4. Praktikum.
5. Ujian Tengah Semester.
6. Ujian Akhir Semester.
P2-Objectives
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
• Memahami konstruksi dasar halaman web.
• Mengerti tentang WWW
• Mengerti tag-tag dasar HTML
• Membuat halaman web dengan HTML sederhana.
29
Editor for Web Programming
Offline
VSCODE
[Link]
Online
World Wide Web (WWW)
• Internet merupakan jaringan global yang menghubungkan suatu
network dengan network lainya di seluruh dunia.
• TCP/IP menjadi protocol penghubung antara jaringan-jaringan
yang beragam di seluruh dunia untuk dapat berkomunikasi.
• World Wide Web (WWW) merupakan bagian dari internet yang
paling cepat berkembang dan paling populer.
33
WWW - continued
• WWW bekerja merdasarkan pada tiga mekanisme berikut:
• Protocol standard aturan yang di gunakan untuk berkomunikasi pada
computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol
untuk WWW.
• Address WWW memiliki aturan penamaan alamat web yaitu: URL(Uniform
Resource Locator) yang di gunakan sebagai standard alamat internet.
• HTML digunakan untuk membuat document yang bisa di akses melalui
web.
• Contoh :
• [Link]
34
HyperText Markup Language (HTML)
• HTML → standard bahasa yang digunakan untuk menampilkan
document web.
• Mengontrol tampilan dari web page dan contentnya.
• Mempublikasikan document secara online sehingga bisa di akses.
• Membuat online form yang bisa di gunakan untuk menangani
pendaftaran, transaksi secara online.
• Menambahkan object-object seperti image, audio, video dan juga java
applet dalam document HTML.
• Versi terakhir saat ini adalah HTML5
• HTML5 diawali dengan <!DOCTYPE HTML>
35
Browser dan Editor
• Browser: Browser merupakan software yang di install di mesin client yang
berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web.
Browser yang sering di gunakan biasanya Internet Explorer, Netscape
Navigator, Opera, Mozilla dan masih banyak yang lainya.
• Editor: Program yang di gunakan untuk membuat document HTML, ada
banyak HTML editor yang bisa anda gunakan diantaranya: Notepad,
Microsoft FrontPage, Macromedia Dreamweaver, dan lain-lain.
36
File HTML
Pemberian nama file pada Home page
• File extention untuk file html : htm, html
• File : [Link] menjadi default dalam web site atau virtual directory dalam suatu
website
Tag-tag HTML
• Kalo pada bahasa pemrograman kita mengenal code, maka pada
HTML kita mengenal yang namanya tag.
• Contoh tag html adalah <head>, <title>, <body>, <html>, <img>,
dan lain-lain.
• Tag html tidak bersifat case sensitive → <body> sama dengan
<BODY>
38
Tag-tag HTML - continued
• Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Dimana:
• Element - nama tag
• Attribute - atribut dari tag
• Value - nilai dari atribut.
• Contoh:
<BODY BGCOLOR=lavender>
39
Struktur HTML document
• Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
40
Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Tubuh Isi…Teks
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
41
<html>
• Setiap document HTML harus di awali dan di tutup dengan tag
HTML → <html> …… </html>
• Tag <html> memberi tahu browser bahwa yang di dalam kedua
tag tersebut adalah document HTML.
42
<head>
• Bagian header dari document HTML di apit oleh tag <head></head>.
• Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan
judul dari halaman web.
<head>
<title>Judul </title>
</head>
43
<body>
• Tag <body> di gunakan untuk menampilkan text, image link
dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to my html </title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
44
Elemen dasar – Block Level
• Block level element: terdapat 6 tingkatan,
yaitu H1 sampai H6.
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
45
Elemen dasar – Paragraph (p)
• Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari mahasiswa UPJ
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
46
Elemen dasar – list item (li)
• Unordered list <ul>: List item tidak berurutan (bullet)
<body>
<P>Nama-nama buah</P>
<ul>
<li>Mangga</li>
<li>Duren</li>
<li>Sirsak</li>
</ul>
</body>
list item (li) - continued
• Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Prodi FBTI UAJ</P>
<ol start="1" type=“1">
<li>Sistem Informasi</li>
<li>TE</li>
<li>TM</li>
<li>Teknik Industri</li>
</ol>
<body>
48
list item (li) - continued
• Tipe-tipe pada list item - ordered list <ol> :
• “A” : A, B, C, …
• ”a” : a, b, c, …
• ”I” : I, II, III, …
• ”i” : i, ii, iii, …
• ”1” : 1, 2, 3, …
49
Elemen dasar – Horizontal Rules <hr>
• Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
dokumen html.
• Attribut dari <hr> adalah:
• Position: menetukan posisi dari <hr>, dengan nilai : center | right | left.
• Width: untuk menentukan panjang <hr>. Nilai default 100%.
• Size: untuk menentukan tebal dari <hr> dalam pixel.
• Noshad: Efek bayangan.
• Contoh:
<hr position=“center” width=90% size=3 noshad>
50
Pemformatan Page
• Break : memulai baris baru
tag : <br />
• Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
◼ Color : attribute dgn 3 kategori warna (RGB)
51 #RRGGBB, misal #FF0000 adalah Red
Pemformatan Page – Cont. 1
• Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan UPJ</P>
• Format Text :
A. Physical Format B. Logical Format
C. Preformatted Text : menampilkan text spt aslinya.
<pre> HTML sungguh menyenangkan.
52 Mudah bukan… </pre>
Pemformatan Page – Cont. 2
• Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to sif UPJ</title>
</head>
<body>
<B><P align="center">Prodi di UPJ</P></B>
FBTI UAJ memiliki 5 prodi , 5 diantaranya adalah : <br>
<font color="#9966FF" size="3" face="arial">
1. Sistem Informasi</font> <br>
2. Teknik Mesin<br>
3. Teknik Elektro<br>
4. Teknik Industri<br>
5. Teknologi Pangan<br>
6. Bioteknologi<br>
</body>
53 </html>
Marquee (Scrolling text)
<marquee>This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to
top</marquee>
<marquee direction="down" width="250" height="200"
behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
Terima Kasih