Scribd
Unggah
23 tayangan47 halaman

Pengenalan HTML

Diunggah oleh

ysilentclimber
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 PPT, PDF, TXT atau baca online di Scribd
23 tayangan47 halaman

Pengenalan HTML

Diunggah oleh

ysilentclimber
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 PPT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 47

Pengenalan HTML

SUPRIATNA, KURMER 2024


Pengantar
 Aplikasi Web atau disebut WebApps
merupakan kategori perangkat lunak yang
berpusat pada jaringan komputer.

 Aplikasi-aplikasi Web saat ini lebih dari


sekedar kumpulan file Hypertext yang saling
terhubung untuk menunjukkan informasi-
informasi tertentu melalui grafis-grafis
terbatas namun terkait juga dengan
database dan aplikasi-aplikasi lainnya.

SEPA 7th ed.Roger S.Pressman


Hypertext Markup Language
(HTML)
 HTML merupakan bahasa markup standar untuk
membuat halaman web
 HTML mendeskripsikan struktur dari halaman
web menggunakan markup
 Elemen-elemen HTML adalah blok-blok yang
membangun halaman HTML
 Elemen-elemen HTML direpresentasikan melalui
tags
Hypertext Markup Language
(HTML) - Lanjut
 Web Browser tidak menampilkan tag HTML,
tetapi menggunakannya untuk me-render konten
halaman web
 Bahasa markup bukan bahasa pemrograman.
Oleh karena itu, penyebutan bahasa
pemrograman HTML adalah kurang tepat
 Editor yang dapat digunakan untuk membuat
halaman HTML antara lain:
 Notepad, Notepad++,Sublime,Dreamweaver,Atom,dll
Format Dasar HTML

<html>

<head>
<title>Untitled Document</title>
</head>

<body>

{ Tempat untuk coding }

</body>
</html>
Struktur Dokumen HTML (1)
 HTML
 Dokumen HTML harus diawali dengan tag
<html> dan diakhiri dengan </html>

 Digunakan untuk memberi tahu kepada web


browser bahwa yang berada dalam kedua tag
tersebut adalah dokumen HTML

 Tips:
 Setelah menulis tag pembuka <html>, tulis tag
penutupnya </html> untuk mencegah lupa.Gunakan
untuk setiap tag yg memiliki tag pembuka&penutup
Struktur Dokumen HTML (2)
 HEAD
 Bagian header dalam dokumen HTML
 Biasanya berisi judul halaman web

 Bentuk umum:
<HEAD>
<TITLE>Judul ini akan ditampilkan pada
bagian atas web browser
</TITLE>
</HEAD>
Struktur Dokumen HTML (3)
 BODY
 Bagian isi dari dokumen HTML

 Dapat disisipkan teks, gambar, video maupun link

 Isi yang ada di dalam body akan ditampilkan pada


halaman web
 Tag Body dapat pula ditambahkan atribut
BGCOLOR untuk pewarnaan background dan
warna tulisan dengan TEXT diisi nilai warna
<BODY BGCOLOR="yellow" TEXT="red">
Struktur Dokumen HTML (4)
Latihan 1

 Buatlah tulisan seperti di atas menggunakan


<h1>. Nama File tulisanpertamaku.html
Jawaban
Latihan 1
Buat tulisan pertama HTML dengan nama
tulisanpertamaku.html dengan skrip di bawah ini:

<html>
<head>
<title>Halaman Latihan 1</title>
</head>
<body>
<h1>Tulisan HTML Pertamaku</h1>
</body>
</html>
Menjalankan file HTML dengan
Notepad++

Pilih menu Run, selanjutnya pilih web browser dimana file HTML akan
ditampilkan dengan klik Launch in Firefox (jika menggunakan Firefox)
Hasil Tampilan
tulisanpertamaku.html
Hasil tag
<title>Halaman Latihan</title> pada tag <head>

Hasil tag
<h1>Ini adalah latihan pemrograman
web per</h1> pada tag <body>

 Jelaskan apa perbedaan menulis pada


<head></head> dan pada <body></body> ?
Tag HTML
 Instruksi atau perintah dalam HTML disebut tag
 Tidak case sensitive
 <element atribut=value>
ket : element = nama tag
atribut = atribut
value = nilai dari atribut
contoh : <font color=red>
FONT merupakan element,
COLOR merupakan atribut,
RED adalah nilai dari atribut.
ELEMEN DASAR HTML:
1. HEADING
 Heading biasa digunakan untuk membuat judul
pada halaman web
 Tag yang digunakan adalah <Hn> dengan nilai n
antara 1 sampai dengan 6
 Semakin besar nilai n maka semakin kecil huruf
yang tercetak.
 Default heading adalah rata kiri.
 Jika kita ingin membuat heading rata tengah maka
tambahkan atribut ALIGN dengan nilai “center” atau
“right” untuk rata kanan.
ELEMEN DASAR HTML:
HEADING – Latihan 2
 Buatlah file bernama heading.html dengan
menambahkan tag headling <h1> sampai
dengan <h6> dengan menyertakan atribut
ALIGN dengan value “center”,”right”,”left”
 Judul tulisan heading bebas
ELEMEN DASAR HTML:
HEADING – Contoh
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2 align="center">Heading 2</h2>
<h3 align="right">Heading 3</h3>
<h4 align=“left”>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
ELEMEN DASAR HTML:
2. PARAGRAF
 Untuk membuat paragraph pada halaman web
gunakan tag <p>….</p>.
 Sama seperti heading, kita dapat mengatur
paragraph dengan menambahkan atribut align
di dalam tag <p align=“left”>, <p
align=“center”><p align=“right”>. Untuk
membuat rata kiri kanan gunakan nilai “justify”
 Contoh
 <p align=“right”>Paragraf rata kanan </p>
ELEMEN DASAR HTML:
PARAGRAF – Contoh
<HTML>
<HEAD>
<TITLE>Contoh Penataan Paragraf</TITLE>
</HEAD>
<BODY>
<!-- Catatan kode untuk penataan paragraph-->
<P>paragraf rata kiri adalah default </P>
<P align="center">paragraf di tengah </P>
<P align="right">paragraf rata kanan </P>
<PRE> Akan tampil apa adanya </PRE>
</BODY>
</HTML>
ELEMEN DASAR HTML
3 GARIS HORIZONTAL
Untuk membuat garis horizontal dalam halaman web,
gunakanlah tag <HR>.

4 BARIS BARU
Untuk membuat baris baru gunakanlah tag <BR>

5 KOMENTAR
Komentar biasanya digunakan untuk memberikan
penjelasan atau keterangan tentang script yang kita
buat. Untuk membuat komentar pada HTML gunakanlah
tag <!—di sini komentar ditulis-->. Kalimat yang berada
dalam tag tsb tidak akan tampil pada web browser.
TEXT FORMATTING
MENGATUR TULISAN (1)
 Tag <font> mempunyai beberapa atribut yang dapat
digunakan untuk memberi warna tulisan, menentukan
ukuran huruf, mengatur perataan, dan jenis font

 Atribut COLOR digunakan untuk membuat tulisan


menjadi berwarna. Nilai dari atribut ini adalah warna font
atau hexadecimal (#000000 - #ffffff).

 CONTOH :
 <FONT COLOR=RED> atau <FONT
COLOR=”#FF0000”>
MENGATUR TULISAN (2)
 Atribut FACE digunakan untuk menentukan jenis font yang
Anda inginkan.
 Nilai dari atribut ini antara lain “Arial”,”Helvetica”,”Sans-
serif”,”Times New Roman”, dll. Jika atribut FACE tidak ada
maka web browser akan menampilkan jenis font default yang
ada di komputer pengguna.
 Contoh:
 <FONT FACE=”TIMES NEW ROMAN”> atau <FONT
FACE=ARIAL>

 Atribut SIZE digunakan untuk mengatur besarnya font. Nilai


dari atribut ini adalah bilangan antara 1 s/d 7.
 Contoh:
 <FONT SIZE=1>
TAG LAIN UNTUK DEKORASI TEKS

TAG FUNGSI
<B>…</B> Mencetak Tebal Teks

<I>…</I> Mencetak Miring Teks

<U>…</U> Menggaris Bawahi Teks

<BIG>…</BIG> Membesarkan Teks


<SMALL>…</SMALL> Mengecilkan Teks

<STRIKE>…</STRIKE> Memberi Coretan Pada Teks

<TT>…<TT> Menampilkan Teks Seperti Mesin Ketik

<SUB>…</SUB> Membuat Teks Subscript (sedikit ke bawah)


<SUP>…</SUP> Membuat Teks Superscript (Sedikit ke atas)
<CENTER>…</CENTER> Membuat teks Rata Tengah
PREFORMATTED TEXT
 Beberapa tag yang disebutkan di atas adalah
tag-tag yang digunakan untuk memformat
tampilan teks.
 Sekarang bagaimana caranya bila kita ingin
menampilkan teks sesuai dengan yang kita
tuliskan? Ternyata hal tsb dapat kita lakukan
dengan menggunakan Performatted Text.
Tag yang digunakan adalah
<PRE>…</PRE>.
MENGATUR TULISAN -
CONTOH
<HTML>
<HEAD>
<TITLE>Contoh Pengaturan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE="2">Font Arial ukuran 2
</FONT><BR><HR>
<FONT FACE="Verdana" COLOR="red">Font Verdana warna
merah</FONT><BR><HR>
<FONT FACE="Impact” SIZE="5" COLOR="blue">Font Impact
ukuran 5 warna biru</FONT>
</BODY>
</HTML>
Hasil Tampilan font.html

Kuis
Cetak miring (italic) pada kata ‘Font’
Cetak tabal (bold) pada kata ‘warna’

Garisbawahi (underline) pada kata ‘ukuran’

Buat kombinasi miring,tebal,garis bawah pada nilai jenis font


LIST PADA HTML
LIST HTML
List merupakan bentuk yang umum yang biasa
digunakan untuk menguraikan daftar sesuatu.
Jenis-jenis list dalam HTML
1.Unordered List (Bulleted List)

2.Ordered List (Numbering List)


List HTML: Bulleted List

 Unordered List (Bulleted List) adalah suatu


daftar yang tidak memperhatikan urutan
dari item-item pada daftar tsb.
 Untuk membuat Bulleted List kita gunakan
tag <UL>…</UL> dan tag <LI>…</LI> yang
menyatakan daftar item.
List HTML: Bulleted List
 Tag <UL> untuk membuat bullet (unordered
list)
 Memiliki atribut TYPE untuk menentukan
jenis bullets.
 TYPE dapat bernilai
 SQUARE

• DISC
o CIRCLE
Contoh Penggunaan
Bulleted List
Bulleted List
<UL TYPE=“SQUARE”>
<LI>item pertama</LI>
<LI>item kedua</LI>
<UL TYPE=“DISC”>
<LI>sub item pertama</LI>
<LI>sub item kedua</LI>
<UL TYPE=“CIRCLE”>
<LI>sub sub item pertama</LI>
<LI>sub sub item kedua</LI>
<LI>sub sub item ketiga</LI>
</UL>
<LI>sub item ketiga</LI>
</UL>
<LI>item ketiga</LI>
</UL>
List HTML: Ordered List
 Ordered List (Numbering List) adalah suatu
daftar yang diawali dengan nomor yang
berurutan.
 Untuk membuat Numbered List gunakanlah
tag <OL>…</OL> dan tag <LI>…</LI> yang
menyatakan daftar item.
List HTML: Ordered List
 Tag <OL> untuk numbering (ordered list)
 Memiliki atribut TYPE untuk menentukan
jenis numbering.
 TYPE dapat bernilai “1”, “A”, “a”, “I”, “i“
Latihan 3 Ordered List
 Buatlah daftar
item
menggunakan
Order List
(OL) seperti
pada tampilan
di samping!
Jawaban Latihan Ordered List
<OL TYPE=“1”>
<LI>item pertama</LI>
<LI>item kedua</LI>
<OL TYPE=“A”>
<LI>sub item pertama</LI>
<LI>sub item kedua</LI>
< OL TYPE=“I”>
<LI>sub sub item pertama</LI>
<LI>sub sub item kedua</LI>
<LI>sub sub item ketiga</LI>
</ OL >
<LI>sub item ketiga</LI>
</ OL >
<LI>item ketiga</LI>
</ OL >
MENGGUNAKAN
IMAGE
Menyisipkan Gambar
 Untuk menyisipkan gambar pada sebuah
halaman web gunakan tag <IMG SRC =
“NAMA FILE GAMBAR”>
 Memiliki atribut ALT yang digunakan sebagai
tampilan gambar apabila gambar tidak dapat
ditampilkan.
 Contoh: <IMG SRC=“gambar.jpg”
alt=“gedung H udinus” >
Mengatur Ukuran Gambar
 Untuk pengaturan ukuran tampilan dari sebuah
gambar, pergunakan atribut WIDTH dan
HEIGHT.
 Nilai dari atribut Width dan Height dapat diisi
dengan angka (menyetakan pixel) atau persen.

 Contoh:
 <IMG SRC = “gambar.jpg” WIDTH=100%
HEIGHT=50>
Membuat Bingkai Gambar
 Untuk membuat bingkai, pergunakan atribut
BORDER dengan value nilai angka.
 Semakin besar nilai angka, maka border
akan semakin tebal

 Contoh:
 <IMG SRC = “gambar.jpg” BORDER=3>
Gambar Sebagai Background
 Apabila akan menggunakan sebuah gambar
sebagai background dari halaman web, maka
tambahkan atribut BACKGROUND pada tag
BODY

 Contoh :
 <BODY BACKGROUND=“gambar.jpg”>
Tugas
 Buatlah halaman web yang berisi:
 Pengalaman anda selama mengikuti matrikulasi
menggunakan tag <p> minimal 2 paragraph.
 Sertakan judul pengalaman sesuai tulisan anda
menggunakan tag <h1>.
 Tambahkan daftar materi praktek DasKom secara terurut
dengan no 1 adalah paling favorit dst.
 Tambahkan daftar dosen matrikulasi anda secara tidak
terurut (square,circle,disc pilih salah satu)
 Sertakan foto matrikulasi anda pada bagian paling bawah
 Simpan dengan nama artikel.html dan tunjukkan hasil
pekerjaan pada pertemuan selanjutnya
Format Isi Tugas
Simpan dengan nama artikel.html
<judul pengalaman>
<uraian pengalaman min 2 paragraf>
Daftar Materi Praktek Paling Favorit
1.Merakit PC Secara Virtual (Cisco)
2.Penulisan Ilmiah
3.Mailing List
4.Fungsi-fungsi Excel
5.Menampilkan Grafik Dengan Excel
6.Teknik Presentasi
7.Pengenalan HTML
Daftar Dosen Matrikulasi:
oAbc
oDef
Foto Kegiatan Matrikulasi
<foto kegiatan>
Contoh Tugas
Referensi

 Roger S. Pressman, Software Engineering: A


Practitioner’s Approach Sevent Edition, McG
raw-Hill, 2009
 https://www.w3schools.com/htmL/, diakses
tanggal 19 Juli 2018
TERIMA KASIH

Materi Selanjutnya:
Menggunakan link untuk membuka halaman lain, menampilkan
tabel, dan mendesain suatu formulir (form)

Anda mungkin juga menyukai