P4- Pengantar HTML

(CSS – Bag1)

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.
Membuat form
& frame
 Penggunaan Komentar
Format:
<! -- >
Fungsi:
 Memberi nama aplikasi
 Mendeskripsikan tujuan pengkodean tertentu di dalam
file
 Memberi nama pengarang
 Memberi tanggal pembuatan
 Memberi nomer versi
 Memberi informasi hak cipta
Outline :

1. Penjelasan jenis tag-tag HTML yang

digunakan untuk Membuat Tabel.
2. Penjelasan jenis tag-tag yang
digunakan untuk Membuat Form (Text
Box, Text Area, Radio Button, Check
Box, Combo Box, dll).
3. Penjelasan jenis tag-tag yang
digunakan untuk Membuat Frame.
PEMBAHASAN
4. Membuat Program sederhana
mengenai Form Isian Data Mahasiswa.
Tag-tag Membuat Tabel
Tabel merupakan sekumpulan baris dan kolom. Bentuk Umum
pendeklarasian table adalah sebagai berikut :
<Table>
………. tag untuk membuat baris,kolom, dll
……….
</Table>

Jenis-jenis tag HTML yang digunakan dalam pembuatan table,

yaitu :
• tag Table Row <TR> → Untuk pembuatan Baris
• tag Table Data <TD> → Untuk pembuatan Kolom
• tag Table Header <TH> → Untuk membuat judul Tabel
 Tag-tag Membuat Tabel
Untuk membuat tabel, HTML menyediakan tag <TABLE>. Dalam
tag<TABLE> terdapat banyak atribut, yaitu :
Atribut Fungsi
BORDER Menentukan ukuran border / garis tabel
WIDTH Menentukan lebar table
HEIGHT Menentukan tinggi table
BGCOLOR Menentukan background table
BACKGROUND Menentukan gambar yang digunakan untuk background
tabel
COLOR Untuk mengatur warna suatu sel dalam tabel
ALIGN Mengatur bentuk perataan horizontal
VALIGN Mengatur bentuk perataan vertical
ROWSPAN Menggabungkan beberapa baris
COLSPAN Menggabungkan beberapa kolom
CELLSPACING & Mengatur spasi antarsel & spasi dalam sel
CELLPADDING
 Membuat Tabel Sederhana
• Tag yang diperlukan:
- Membuat baris: <tr> (table row)
- Membuat kolom: <td> (table data)

Contoh:
<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
Menambahkan Judul Tabel
• Judul tabel: <caption>
• Judul baris/kolom: <th> (table header)
Contoh:
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>
</table>
 Contoh Pembuatan Tabel

 Membuat Tabel Sederhana

 Mengatur Lebar & Tinggi Tabel
Atribut: width dan height
Nilai:
 ukuran % (max 100%)
 ukuran pixel

Contoh:
<table border="1" width=“50%”>
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th>
<th>NPM</th>
<th>Nama</th></tr>
<tr><td width=“20”>1.</td>
<td width=“80” height=“50“>06.100.001</td>
<td width=“180” height=“50”>Amin A. Angkasa</td></tr>
<tr><td width=“20”>2.</td>
<td width=“80” height=“70”>06.100.002</td>
<td width=“180” height=“70”>Beni B. Bernardi</td></tr>
</table>
 Perataan dalam tabel
 horisontal: atribut align -> utk <caption>, <tr>, <td> dan <th>
 vertikal: atribut valign -> utk <tr>, <td> dan <th>

Contoh:
<table border="1" align="center">
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>
</table>
 Membuat warna pada tabel
 Atribut: bgcolor

Contoh:
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center"
width="20">1.</td>
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle"
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"
width="180" height="40">Beni B. Bernardi</td></tr>
</table>
 Penggabungan baris/kolom
• Menggabungkan bbrp kolom menjadi 1: atribut colspan
• Menggabungkan bbrp baris menjadi 1: atribut rowspan
 Script HTML:
<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">
<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80" height="40">06.100.001</td>
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80" height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
</table>
 Tag-tag Membuat Form
Form digunakan untuk menerima masukan / input dari user dan
memproses hasil inputan. User menerima informasi melalui sejumlah
elemen yang disebut Kontrol. Kontrol ini bisa berupa textbox, checkbox,
radio button, list menu dan lainya.

Standar Penulisan FORM, yaitu :

<form method = “post/get” action=”...”>
-------------------------------------------------
</form>
Beberapa atribut yang terdapat dalam FORM, yaitu :

Atribut Fungsi
METHOD Metode pengiriman data ke file tujuan, 2 yaitu POST dan GET
ACTION Aksi yang akan dilakukan jika user menekan tombol submit.
NAME Memberikan nama tiap input.
VALUE Memberikan nilai suatu input.
TYPE Tipe form yang akan kita gunakan
 Tag-tag Membuat Form
❖ TEXTBOX
Textbox merupakan salah satu jenis control untuk memasukan data. HTML
menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak
input.
CONTOH :

OUTPUT :
 Tag-tag Membuat Form
❖ CHECKBOX
Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan
checkbox user dapat memilih salah satu, lebih dari satu pilihan atau tidak
sama sekali memilih. Atribut Checked memberi tanda bahwa pilihan tersebut
sedang diaktifkan.
CONTOH :

OUTPUT :
 Tag-tag Membuat Form
❖ RADIO BUTTON
Pada type Radio, maka user memilih salah satu pilihan yang tersedia,
sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan.

CONTOH :

OUTPUT :
 Tag-tag Membuat Form
❖ TEXT AREA
Text Area untuk menginput data string ataupun angka yang terdiri
atas banyak baris.

CONTOH :

OUTPUT :
Tag-tag Membuat Form
❖ COMBO BOX
digunakan untuk menampilkan daftar data berupa menu list
yang berisi pilihan.

CONTOH :

OUTPUT :
Pembuatan Frame
FRAME
Frame HTML dapat digunakan untuk membuat tampilan HTML yang
terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian
merupakan satu halaman HTML, sehingga tampilan halaman HTML
yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan
bagian lain tetap sehingga dapat menghemat bandwith internet dan
mempercepat proses download secara keseluruhan.

Bentuk Umum :
<html>
<head></head>
<FRAMESET>
</FRAMESET>
</html>
FRAME
• Fungsi:
Menampilkan beberapa dokumen HTML secara sekaligus dalam satu
jendela web browser.
• Standar penulisan:
<frameset [cols=“%,%”] [rows=“%,%”]> . . . </frameset>

• Atribut-atribut:
Atribut Fungsi
frameset cols Membuat frame vertikal dengan lebar kolom tertentu
frameset rows Membuat frame horisontal dengan tinggi baris tertentu
frame src Memasukkan dokumen HTML ke dalam frame
scrolling=["yes"|"no"] Menentukan fitur scrolling
noresize Membuat frame tidak dapat diubah ukurannya
name Memberi nama untuk frame
frameborder=["0"|"1“] Menentukan batas antara frame
Nama dan Target Frame
• Frame dapat diberi nama dan diatur targetnya dengan
menggunakan tag base target.
• Contoh:
Frame menu dapat digunakan sebagai link untuk mengakses
halaman di frame content.

Script HTML: Potongan kode file [Link]:

<html> <html>
<head></head> <head>
<frameset rows=“15%,*"> <base target="content">
<frame name=“judul" src=“[Link]"> </head>
<frameset cols="30%,*"> ...
<frame name="menu" </html>
src="[Link]">
<name="content" src="[Link]">
</frameset>
</html>
Frame Vertikal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Vertikal
</title>
</head>
<frameset cols="25%,*">
<frame name="kiri"
src="[Link]" scrolling=“yes">
<frame name="kanan“
src="[Link]">
</frameset>
</html>
Frame Horisontal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Horisontal </title>
</head>
<frameset rows="40%,*">
<frame name="atas" src="[Link]“
scrolling="no">
<frame name="bawah“
src="[Link]">
</frameset>
</html>
Gabungan Frame Vertikal-
Horisontal
Contoh: Tampilan:
<html>
<head>
<title>
Membuat Frame Vertikal-Horisontal </title>
</head>
<frameset rows="20%,*">
<frame name="atas" src="[Link]“
scrolling="no">
<frameset cols="40%,*">
<frame name="kiri"
src="[Link]">
<frame name="kanan"
src="[Link]">
</frameset>
</frameset>
</html>
P5- Pengantar HTML
(CSS – Bag2)

Presented by:
Ripto Mukti Wibowo, Ph.D.
[Link]@[Link]

Department of Information Systems

Universitas Katolik Indonesia Atma Jaya
 Objective
Setelah mengikuti perkuliahan ini mahasiswa diharapkan mampu :
• Menjelaskan Cascading Style Sheet
• Menggunakan CSS dalam html
• Memahami dan manipulasi element, atribut, tag html
• Memahami penggunaan Id, Class selector pada CSS
 CSS
• Cascading Style Sheets (CSS) adalah merupakan aturan untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam.
• CSS bukan merupakan bahasa pemograman. Dengan CSS kita dapat
dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs
kita sekaligus memformat ulang situs kita.
• Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda
• CSS dapat dituliskan pada bagian <body>, <head> suatu dokumen HTML
atau diletakkan di sebuah file eksternal.

• Menggunakan tag:
<style> ...... </style>
 Penggunaan CSS
• Dapat digunakan secara internal, eksternal maupun inline
(langsung ditulis dalam tag HTML).

• CSS eksternal menggunakan ekstensi *.css

• Dianjurkan untuk menggunakan CSS eksternal.

 CSS dapat mengendalikan
• Ukuran gambar
• Warna bagian tubuh pada teks,
• Warna tabel,
• Ukuran border,
• Warna border,
• Warna hyperlink,
• Warna mouse over,
• Spasi antar paragraf,
• Spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya.
 Elemen, Tag, dan Atribut
• Elemen & Tag
Elemen HTML merupakan komponen yang menetapkan peran sebuah
objek dalam dokumen, termasuk struktur dan konten dari objek
tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang
telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen
populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.

• Setiap Elemen ditulis dalam bentuk tag <elemen> dan ditutup dengan
</elemen>
Contoh elemen :
<a> </a>
Elemen, Tag, dan Atribut
Atribut Value Keterangan

• Atribut download Filename Html5 only

Atribut merupakan informasi tambahan yang href url Link

halaman
dapat kita berikan untuk sebuah elemen. Setiap
html lain
elemen memiliki atribut yang berbeda-beda,
meskipun terdapat beberapa atribut standar target _blank Spesifik
yang dapat digunakan oleh semua elemen. _parent lokasi
_self
_top
framename
Atribut standar yang dimiliki oleh semua elemen
sendiri merupakan atribut yang umumnya dapat
diimplementasikan oleh semua elemen, misalnya
atribut “id” untuk identifikasi elemen, atau
“class” untuk klasifikasi elemen.
Contoh elemen a dengan attribut href :

<a href=“[Link] link si uaj</a>

Struktur HTML
<!DOCTYPE html> • Elemen DOCTYPE
Digunakan untuk memberikan
<html lang="en"> informasi kepada browser mengenai
versi HTML yang digunakan oleh
<head> dokumen. Pada
<title>...</title> listing~ref{code:struktur-html}, versi
HTML yang digunakan adalah
</head> HTML5.
<body> • Elemen HTML

... Elemen ini mengandung

keseluruhan dokumen HTML, yang
</body> berarti tag pembuka elemen HTML
</html> merupakan tanda awal dokumen
HTML, dan tag penutup adalah
tanda akhir dokumen.
Struktur HTML • Elemen head
Elemen head pada dokumen
digunakan untuk menguraikan
berbagai meta data (informasi yang
<!DOCTYPE html> berkaitan dengan dokumen), judul
dokumen, dan tautan dokumen ke
<html lang="en"> berkas-berkas eksternal. Berbagai
<head> data yang ada di dalam elemen
head tidak akan nampak pada
<title>...</title> halaman web hasil tampilan
</head> browser.
• Elemen title
<body> Memberikan judul dokumen.
• Elemen body
... Elemen ini merupakan
</body> penampung dari isi konten dokumen
yang akan ditampilkan kepada
</html> pengguna.
Format CSS
• Sebuah style sheet terdiri dari beberapa aturan (rules).
• Masing-masing aturan terdiri dari satu atau lebih selektor
(selector) dan sebuah blok deklarasi (declaration block).
• Sebuah blok deklarasi terdiri dari beberapa deklarasi yang
dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri
dari property, titik dua (:) dan nilai (value).
Value
• Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-
beda, tergantung dengan jenis property-nya.
• Utk warna : #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program
pengolah grafis seperti Photoshop).
• Ukuran : dalam format nilai px atau nilai em.

Contoh value :

p{
color: #FFFF00;
font-size: 50px;
}

P{
color : green;
font-size :200%;
}
 Selector
Adalah nama yang diberikan untuk setiap style berbeda yang dibuat.
Di dalam style didefinisikan bagaimana setiap selector akan bekerja
(font, color dan lain-lain.). Kemudian di dalam bagian body halaman
web, selector tersebut dipanggil untuk mengaktifkan style yang telah
didefinisikan.

Jenis-jenis Selector:
• Selector HTML
• Selector Class
• Selector ID

41
 Element Selector
• Selektor Elemen dibuat berdasarkan nama elemen tag html, dapat ditulis secara kelompok,
dipisahkan dengan tanda koma. (GROUPING)
contoh: 1. element selector pada elemen h -> Header

Semua elemen header akan ditampilkan dalam teks berwarna hijau

Contoh lain : 2. element selector pada elemen html : p (paragraph)

p{
text-align: center;
color: red;
}

Posisi Paragraph akan ditengah dan berwarna merah

Id Selector <!DOCTYPE html>
<html>
<head>
• Pendefinisian style untuk elemen <style>
#hijau {
HTML dapat dilakukan dengan text-align: center;
selector id. Selektor ID didefinisikan color: green; }
sebagai #. #merah{
Text-align:left;
Contoh: color:red; }
</style>
Aturan style berikut akan </head>
menyesuaikan elemen yang <body>
<h1 id=“merah”> Topik hari ini id selector </h1>
mempunyai sebuah atribut id <p id=“hijau">Tulisan Warna hijau!</p>
dengan nilai “hijau”.
<!– komentar html tidak diproses : tulisan berikut
tanpa style -->

#hijau {color: green} <p>Tulisan paragrap ini tanpa style atau tanpa
terpengaruh style </p>
<p id=“hijau”>Tulisan Warna
Hijau</p> </body>
</html>
Class Selector
• Mendefinisikan style yang berbeda untuk type
elemen HTML yang sama (Class Selector)
• Digunakan untuk mendefinisikan style yang dapat
dipakai tanpa melakukan redefinisi tag HTML.
• Syntax: ClassSelector {Properti:Nilai;}

contoh:
Terdapat dua type paragraph dalam suatu
dokumen: satuparagraf rata kanan, dan paragraf
yang lain rata tengah.
 Contoh Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: red; /* bisa diganti dengan format RGB : #ff0000 */
}
[Link] {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Ini judul meskipun center tapi tidak terkena style </h1>
<p class="center"> Paragraph ini akan berwarna merah dan rata tengah </p>
<p class="center large">Paragraph ini akan berwarna merah dan tulisannya besar </p>
</body>
</html>
Contoh Class Selector
<html>
<head>
<title>Selector Class</title>
<style type="text/css">
.highlight {font-family:arial; font-size:15px; color:red}
</style>
</head>
<body>
Tulisan tanpa Class
<b> Tulisan Dengan Tebal tanpa css</b>
<b class=" highlight "> Tulisan ini tebal karena pengaruh selector class highlight
</b><br>
<i> tulisan ini dicetak miring tanpa css </i>
<i class=“highlight"> Tulisan ini dicetak miring karena css selector class highlight</i>
</body>
</html>
SPAN dan DIV
• Dua tag yang sering dikombinasikan dengan selector
class adalah <SPAN> dan <DIV>
• Tag <SPAN> adalah "inline-tag" dalam HTML, berarti
tidak ada pergantian baris (line break) yang disisipkan
sebelum atau setelah penulisannya.
• Tag <DIV> adalah "block tag" dalam HTML, berarti
pergantian baris secara otomatis disisipkan untuk
memberikan jarak antara blok yang dibuat dengan teks
atau blok lain sebelum dan sesudahnya (seperti tag
<P> atau <TABLE>).
• Tag <DIV> sering digunakan untuk implementasi layer
karena layer merupakan blokblok informasi terpisah.
Tag <DIV> merupakan pilihan yang tepat saat membuat
layer pada halaman web.
 Pengelompokan Selector
Untuk beberapa style yang sebagian properti-nya memiliki nilai
yang sama, misalnya jenis font yang sama; mendefinisikan font
tidak perlu dilakukan satu demi satu untuk setiap selector.
Pendefinisian dapat dikelompokkan, dengan cara melewatkan font
ke semua selector dalam satu kali
Pengelompokan Selector
Sebelum pengelompokan:
.headlines
{
font-family:arial;
color:black;
background:yellow;
font-size:14pt; Setelah pengelompokan:
} .headlines, .sublines, .infotext
.sublines {
{ font-family:arial;
font-family:arial; color:black;
color:black; background:yellow;
background:yellow; }
font-size:12pt; .headlines {font-size:14pt;}
} .sublines {font-size:12pt;}
.infotext .infotext {font-size: 10pt;}
{
font-family:arial;
color:black;
background:yellow;
font-size:10pt;
}
 Penggunaan DIV
• DIV : Div adalah elemen HTML yang berfungsi sebagai wadah untuk
menampung beberapa elemen HTML menjadi satu bagian.
Penggunaan div berfungsi untuk memudahkan pengembang atau
developer mengatur style CSS atau pemberian atribut lainnya seperti
Class, ID, Title, dan lain sebagainya.
• Class
• Class adalah atribut HTML yang digunakan sebagai penanda elemen di
HTML. Selain itu, class sering digunakan untuk manipulasi style CSS
atau javasript.
• ID
• Id adalah singkatan dari identifier atau identity, yaitu atribut yang mirip
seperti class, tetapi memiliki perilaku berbeda.
Beda Div, Class, ID
 Hover
• Hover adalah salah satu element css. Hover ini
berguna untuk membuat efek saat mouse
mengenai suatu element HTML.
<!DOCTYPE html> <body>
<html>
<head> <a
href="[Link]
<style> Informasi UPJ</a>
a:hover { <a href="[Link]
background-color: yellow; UPJ </a>
}
</style> <p><b>Note:</b> The :hover
selector style links on mouse-
</head> over.</p>

</body>
</html>
 hover ul li ul li {
background: #555;
<!DOCTYPE html> display: block;
}
<html>
ul li ul li a {display:block !important;}
<head> ul li ul li:hover {background: #666;}
<style> </style>
</head>
div {background-color: green;}
div a { <body>
text-decoration: none;
<div>
color: white;
<a href="#">Useless Link</a>
font-size: 20px; <ul>
padding: 15px; <li>
<a href="#">Dropdown Link</a>
display:inline-block;
<ul>
} <li><a href="#">Link 1</a></li>
ul { <li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
display: inline;
</ul>
margin: 0; </li>
padding: 0; </ul>
} </div>

ul li {display: inline-block;}
</body>
ul li:hover {background: #555;} </html>
Contoh Penggunaan Atribut HTML

Anda bisa menambahkan lebih banyak elemen ke dalam

setiap div dan mengaturnya style CSS. Misalnya:

• Header: Menambahkan logo, tombol pencarian, menu atau

informasi kontak.
• Content: Tambahkan gambar, tabel, formulir atau konten
lainnya.
• Footer: Tambahkan link ke kebijakan privasi, syarat
penggunaan, atau media sosial.
Berikut adalah contoh layout html dengan menggunakan ketiga atribut
tersebut.
 CSSInternal
CSS Internal : berada pada file html
CSS Eksternal
Contoh CSS External <div class="content">
<!DOCTYPE html>
<p>Ini adalah konten utama halaman.</p>
<html> <p>Anda bisa menambahkan konten di sini.</p>
<head> </div>
<title>Contoh Penggunaan Div, Class, dan ID</title>
<link rel="stylesheet" href="[Link]">
<div class="footer">
</head> <p>&copy; 2024 Contoh Website</p>
<body> </div>
<div class="header">
</body>
<h1 id="judul">Selamat Datang</h1>
</html>
<nav>
<ul> <div class="content">
<li><a href="#">Home</a></li> <p>Ini adalah konten utama halaman.</p>
<p>Anda bisa menambahkan konten di sini.</p>
<li><a href="#">About</a></li>
</div>
<li><a href="#">Contact</a></li>
</ul> <div class="footer">
</nav>
<p>&copy; 2024 Contoh Website</p>
</div>
</div> </body>
</html>
2. Buatlah File : [Link]
.header { nav ul {
background-color: #f0f0f0; list-style: none; /* Menghilangkan bullet point pada list */
margin: 0;
padding: 20px; padding: 0;
text-align: center; } display: flex; /* Mengubah display menjadi flex untuk tata letak
horizontal */
justify-content: center; /* Menempatkan item-item secara
#judul { horizontal di tengah */
}
color: red;
text-align: center; nav li {
background-color: black; margin: 0 10px; /* Memberikan margin kiri dan kanan pada setiap
item */
} }
.footer { nav a {
text-decoration: none;
background-color: #f0f0f0;
color: #333;
padding: 20px; padding: 10px 15px;
text-align: center; } border-radius: 5px;
transition: background-color 0.3s ease;
}
.content {
nav a:hover {
padding: 20px; background-color: #f0f0f0;
} }
Contoh:
 Background
Latar belakang (Background) Contoh :
Efek pada CSS meliputi : H1{background-color:#FF00FF}
• background-color
• background-image body
• background-repeat {
• background-attachment background-image:url('img_tree.png');
• background-position background-repeat:no-repeat;
background-position:right top;
}

Contoh lain :
body {background:#ffffff url('img_tree.png') no-repeat right top;}
Padding Contoh :
[Link] {
Border: 1px solid red;
• Memberikan jarak dari margin
Background-color: green:
Properti:
padding-top : 50px;
- padding-top
padding-left: 40px;
- padding-right
- padding-bottom
padding-bottom: 50px;
- padding-left
padding-right: 80px;
}
Value :
• Angka dengan satuan px, pt, cm <!-- body html -->
• % persentase lebar dari element <body>
• Inherit – turunan dari parent (OOP) <p class=“latar”> hallo semua ini
test margin </p>

</body>
 Border
• Border merupakan properti css untuk membatasi suatu tag html , antara lain:
• Border-style:value
Jenis border diisi dengan value (pilih satu jenis) : dotted,dashed,solid,double ,groove ,ridge
,inset ,outset, none
Untuk border 3d bisa di-isi value groove, ridge, inset , outset
Jika hanya untuk spesifik area atas , kiri,kanan, atau bawah saja bisa ditulis : border-top-style,
border-left-style, border-right-style, border-left-style
• border-width:value
lebar dari border , di-isi dengan angka px,pt,cm,em atau bisa diisi dengan thin,thick,
medium
• border-color:value
Warna border diisi dengan tulisan warna seperti : red,green,blue,dsb,dengan
hex:#ff0000 (2digit red,2digit green,2 digit blue), dengan format rgb : rgb(255,0,0)
Box
Untuk membuat box dengan sudut melengkung menggunakan properties: border-
radius
#areaku
{ width:600px;
background: #DDD;
color: #222; border: 2px solid blue;
padding: 10px;
Border-radius: 20px; /*Kode pembuat lengkungan sudut*/
overflow-x:auto}/* untuk membuat resposinve jika ukurannya mengecil */ }

Untuk mengaksesnya kita bisa menggunakan tag <div> ,tag ini tanpa arti,
biasanya tag ini lebih untuk membuat box

<div id=“areaku”> Ini merupakan contoh membuat box </div>

Table Struktur table :
<table>
<tr> <th> … </th> </tr> tr : row,th : header
<tr> <td> … </td> </tr> tr : row, td : detail
</table>
colspan=“2” : menggabung 2 kolom
rowspan =“2” : menggabung 2 baris
Css :

• Border-collapse : untuk menghilangkan double garis pada table;

table {
border-collapse: collapse;
}

table, td {
border: 1px solid black;
}
• warna baris berbeda antara baris satu dengan baris ke dua
tr:nth-child(even) {background-color: #f2f2f2}
• header : warna : hijau, text : center, latar: hijau, tulisan: putih
th { border:1px ; padding: 15px; text-align: center; background-color:green; color : green}

• Highlight pada baris table

tr:hover {background-color: #f5f5f5}
<!doctype html> <h4>Cell that spans two rows:</h4>
<html> <table border="1">
<header> <tr>
</header>
<th>First Name:</th>
<body>
<h1> Contoh table tanpa <td>Bill Gates</td>
css </h1> </tr>
<h4>Cell that spans two
columns:</h4> <tr>
<table border="1"> <th rowspan="2">Telephone:</th>
<tr> <td>555 77 854</td>
<th>Name</th>
</tr>
<th
colspan="2">Telephone</t <tr>
h> <td>555 77 855</td>
</tr>
</tr>
<tr>
<td>Bill Gates</td> </table>
<td>555 77 854</td>
<td>555 77 855</td> </body>
</tr>
</html>
</table>
<!doctype html>
<html>
<header>
<title> Table dengan CSS </title>
<style>
table {border-collapse: collapse; border: 1px solid black;}
tr td{ border: 1px solid black;}
tr:nth-child(even) {background-color: #f2f2f2}
tr:hover {background-color: red}
th {border:1px ; padding: 15px; text-align: center; background-color:green; color : white}
</style>
</header>
<body>
<h1> Contoh table dengan css </h1>
<h4>Cell that spans two columns:</h4>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone dan HP</th>
</tr>
<tr>
<td>Adi Sumarta</td>
<td>0217542451</td>
<td>085178141231</td>
</tr>
<tr>
<td>Alya </td>
<td>02127511234</td>
<td>08517237234</td>
</tr>
<tr>
<td>Rangga </td>
<td>0217521234</td>
<td>08551237234</td>
</tr>
</table>
</body>
PENULISAN PADA TAG DENGAN ATRIBUT
STYLE
PENULISAN PADA HEAD
PENULISAN DENGAN CLASS
PENULISAN DENGAN ID
Website layout menggunakan html5
• <header> - header dari document atau
section
• <nav> - untuk tempat container atau
navigasi (menu)
• <section> - Tempat untuk bagian
dokument
• <article> - tempat artikel
• <aside> - biasanya tempat backlink
diletakan di sisi kiri/kanan
• <footer> - footer untuk document atau
section
• <details> - tambahan details jika ada
• <summary> - judul dari <details>
element
 Multimedia (music & video) html5
Pada html5 bisa memutar musik dengan menggunakan tag <audio>,
dan video dengan tag <video)
Properti pada <audio>
• Src- sumber audio (jenis mp3 dan ogg)
• type : jenis file di-isi dengan: “audio/ogg” atau “audio/mp3”
• autoplay – audio akan memulai music secara otomatis
• controls - akan memunculkan button untuk memainkan audio
• loop - lagu atau musik akan dimainkan kembali jika telah selesai
• preload – ada 3 parameter : this one has three parameters: auto,
which plays once it has loaded, metadata, which only displays the data
associated with the audio file, and none, which means it will not
preload
 Sumber :
• [Link]
Terima Kasih