Scribd
Unggah
32 tayangan41 halaman

Workshop HTML & CSS - PKM 05TPLP005

Diunggah oleh

Fitriashofi
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 PPTX, PDF, TXT atau baca online di Scribd
32 tayangan41 halaman

Workshop HTML & CSS - PKM 05TPLP005

Diunggah oleh

Fitriashofi
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 PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 41

WORKSHOP

PENGENALAN HTML & CSS


PKM Universitas Pamulang
05TPLP005

<Dibuat Oleh Daffa Dhiya Ulhaq>


PEMATERI
HTML5 & CSS

Ahmad Muammar Rizky Imam


211011400381
Rifai 211011402135 211011400373
Saputra

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU


KOMPUTER
PENDAHULUAN

Text Editor
Untuk menulis kode html bisa
memakai text editor sederhana
HTML5 yang di semua computer Windows
ada, yaitu Notepad, atau bisa
Program-program
menggunakan yang tools lebih
yang dibutuhkan advance seperti Visual Studio
Code yang memiliki banyak fitur
untuk membantu ngoding

Web Browser
Web Browser seperti Chrome,
Edge, atau Firefox untuk
mejalankan file HTML.
INTRODUCTION
HTML adalah singkatan dari "Hypertext
Markup Language" (Bahasa Markup
Hiperteks). Ini adalah bahasa yang
digunakan untuk membuat dan
mendesain halaman web. HTML
digunakan untuk mengatur struktur dan
elemen-elemen dasar pada halaman web,
seperti teks, gambar, tautan, dan elemen-
elemen lainnya.
DEFINISI
HYPERTEXT MARKUP
LANGUAGE
HTML adalah bahasa dasar yang digunakan untuk
membangun hampir semua situs web di internet. Itu
berfungsi sebagai tulang punggung dari sebuah
halaman web, dan elemen-elemen HTML
menentukan tampilan dan perilaku dari halaman
tersebut. Dengan menggunakan tag dan atribut
HTML, Anda dapat mengatur teks, gambar, tautan,
tabel, formulir, dan banyak elemen lainnya untuk
membuat halaman web yang informatif dan
menarik.
PENGERTIAN TAG HTML

Tag HTML adalah perintah yang digunakan dalam dokumen HTML untuk menandai
atau menandakan elemen-elemen dalam halaman web. Mereka membantu browser web
memahami bagaimana seharusnya merender dan menampilkan konten. Tag HTML
biasanya terdiri dari sebuah tanda kurung sudut dan nama tag yang ditempatkan di
dalamnya, seperti <nama_tag>.

Elemen HTML adalah kombinasi tag HTML dan isi yang terletak di antara tag pembuka
dan tag penutup (jika ada). Mereka membentuk struktur konten dalam halaman web.
Misalnya, jika Anda memiliki tag pembuka <p> dan tag penutup </p> dengan teks di
dalamnya, Anda telah menciptakan elemen paragraf. Elemen-elemen ini memiliki
tampilan dan perilaku yang ditentukan oleh tag dan isi di dalamnya.
STRUKTUR TAG
HTML
1. Tag Pembuka (Opening Tag): Elemen awal dalam sebuah tag HTML
yang menandai awal dari elemen. Ini dimulai dengan tanda kurung
sudut (angle brackets) dan berisi nama elemen, seperti <p>.

2. Atribut: Atribut adalah opsional dan digunakan untuk memberikan


informasi tambahan tentang elemen tersebut. Atribut ditempatkan
dalam tag pembuka setelah nama elemen dan diapit oleh tanda
kutip. Contoh: <a href="https://www.example.com">.

3. Isi Tag (Element Content): Ini adalah teks atau elemen-elemen lain
yang berada di dalam elemen HTML dan berada di antara tag
pembuka dan tag penutup. Contoh: <p>Ini adalah teks dalam
paragraf.</p>.

4. Tag Penutup (Closing Tag): Ini adalah elemen yang menandai akhir
dari elemen yang dibuka sebelumnya. Tag penutup mirip dengan
tag pembuka, tetapi memiliki garis miring (/) sebelum nama
elemen. Contoh: </p>
HTML DOCUMENTS
Semua dokumen HTML diawali dengan
deklarasi tipe dokumen: <!DOCTYPE html>.

Dokumen HTML sendiri diawali dengan


<html> dan diakhiri dengan </html>.

Bagian dokumen HTML yang terlihat berada


di antara <body> dan </body>.
EXERCISE

<!DOCTYPE html>
<html>

</html>
HTML HEAD
Tag <head> dalam HTML adalah bagian dari
halaman web yang digunakan untuk
menyimpan metadata dan informasi yang
tidak ditampilkan secara langsung kepada
pengguna, tetapi penting untuk mengatur
tampilan dan perilaku halaman. Beberapa
informasi yang umumnya Ditempatkan dalam
tag <head> mencakup judul halaman, tautan
ke berkas eksternal seperti CSS, karakter set,
dan meta-informasi yang digunakan oleh
mesin pencari.
EXERCISE

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
</head>
</html>
HTML BODY
Tag <body> dalam HTML adalah bagian dari
sebuah halaman web yang digunakan untuk
menampilkannya secara langsung kepada
pengguna. Semua konten yang ingin
ditampilkan pada halaman web, seperti teks,
gambar, tautan, dan elemen visual lainnya,
Ditempatkan di dalam tag <body>. Tag
<body> adalah bagian yang dilihat oleh
pengguna ketika mereka mengunjungi
halaman web.
EXERCISE

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
</head>
<body>

</body>
</html>
HTML HEADINGS
Tag <h> dalam HTML biasanya merujuk ke
tag <h1>, <h2>, <h3>, hingga <h6>. Ini
digunakan untuk membuat judul atau heading
dalam halaman web dengan tingkat
kepentingan yang berbeda. Angka di
belakang huruf "h" menunjukkan tingkat
kepentingan, di mana <h1> memiliki tingkat
kepentingan tertinggi dan <h6> memiliki
tingkat kepentingan terendah.
EXERCISE

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
</head>
<body>
<h1>Ini Judul h1</h1>
</body>
</html>
HTML
PARAGRAPHS
Tag <p> dalam HTML adalah singkatan dari
"paragraf". Ini digunakan untuk
mengelompokkan teks atau konten yang
membentuk sebuah paragraf. Tag <p>
diindikasikan awal dari paragraf dan biasanya
diakhiri dengan tag penutup </p>. Konten
yang berada di antara tag pembuka <p> dan
tag penutup </p> akan dianggap sebagai satu
paragraf oleh browser web, dan biasanya
akan ditampilkan dengan jarak antara
paragraf.
EXERCISE

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
</head>
<body>
<h1>Ini Judul h1</h1>
<p>Ini contoh paragraf</p>
</body>
</html>
HTML LIST(OL)
tag <ol> (Ordered List) adalah elemen HTML
yang digunakan untuk membuat daftar terurut
di mana setiap item dalam daftar memiliki
nomor atau urutan yang diberikan. Ini
berguna ketika Anda ingin menyusun daftar
dengan urutan yang berarti, seperti langkah-
langkah dalam suatu proses.
EXERCISE

<body>
<h1>Ini Judul h1</h1>
<p>Ini contoh paragraf</p>
<ol type="1">
<li>Makanan</li>
<li>Minuman</li>
<li>Hobi</li>
</ol>
</body>
HTML LIST (UL)
<ul> (Unordered List) adalah elemen HTML
yang digunakan untuk membuat daftar tak
terurut di mana setiap item dalam daftar tidak
memiliki nomor atau urutan yang diberikan.
Ini berguna ketika Anda ingin membuat
daftar yang berisi elemen-elemen tanpa
urutan tertentu.
EXERCISE

<body>
<h1>Ini Judul h1</h1>
<p>Ini contoh paragraf</p>
<ol type="1">
<li>Makanan</li>
<li>Minuman</li>
<li>Hobi</li>
</ol>
<ul>
<li>Pisang</li>
<li>Apel</li>
<li>Jeruk</li>
</ul>
</body>
HTML LINKS
Tag elemen <a> dalam HTML digunakan
untuk membuat tautan atau hyperlink ke
halaman web lain atau sumber lainnya,
seperti dokumen, gambar, atau email. Ini
memungkinkan pengguna untuk mengeklik
teks atau gambar tertentu dan diarahkan ke
halaman atau sumber eksternal yang terkait.
Elemen <a> mengharuskan atribut href yang
menunjukkan URL (alamat web) yang akan
dituju saat tautan tersebut diklik.
EXERCISE

<body>
<h1>Ini Judul h1</h1>
<p>Ini contoh paragraf</p>
<ol type="1">
<li>Makanan</li>
<li>Minuman</li>
<li>Hobi</li>
</ol>
<ul>
<li>Pisang</li>
<li>Apel</li>
<li>Jeruk</li>
</ul>
<a href="https://unpam.ac.id/">
Contoh tautan atau link</a>
</body>
HTML IMAGES
Tag elemen <img> dalam HTML digunakan
untuk menyisipkan atau menampilkan
gambar pada halaman web. Ini
memungkinkan untuk menampilkan grafis,
ilustrasi, atau foto pada halaman web Anda.
Tag <img> membutuhkan atribut src yang
mengacu pada sumber gambar (URL atau
path) dan opsionalnya atribut alt yang
memberikan deskripsi alternatif untuk
gambar tersebut, kemudian width dan height
untuk mengatur ukuran gambar.
EXERCISE
<body>
<h1>Ini Judul h1</h1>
<p>Ini contoh paragraf</p>
<ol type="1">
<li>Makanan</li>
<li>Minuman</li>
<li>Hobi</li>
</ol>
<ul>
<li>Pisang</li>
<li>Apel</li>
<li>Jeruk</li>
</ul>
<a href="https://unpam.ac.id/">
Contoh tautan atau link</a>
<img src="banner.png" alt="Contoh
gambar" width="480">
</body>
CSS INTRODUCTION
CSS (Cascading Style Sheets) adalah
bahasa pemrograman yang digunakan
untuk mengontrol tampilan dan gaya
elemen-elemen dalam dokumen HTML.
CSS memungkinkan Anda untuk
memisahkan struktur konten (HTML)
dari tampilan dan gaya (CSS) dalam
halaman web. Ini mempermudah
pemeliharaan dan perubahan desain,
karena perubahan dalam CSS akan
diterapkan ke seluruh halaman web
tanpa perlu mengubah struktur HTML.
PENYISIPAN CSS

EXTERNAL INTERNAL INLINE


CSS eksternal digunakan Internal CSS digunakan Inline CSS digunakan
dengan membuat berkas dengan menempatkan dengan menambahkan
CSS terpisah dengan aturan CSS di dalam elemen aturan CSS secara langsung
ekstensi ".css". Dalam <style> di dalam elemen ke elemen HTML
berkas HTML, Anda <head> berkas HTML. Ini menggunakan atribut style.
menghubungkan berkas memungkinkan Anda untuk Ini mengatur gaya hanya
CSS eksternal ini dengan menerapkan gaya khusus untuk elemen yang
menggunakan tag <link> pada halaman tertentu. ditargetkan.
dalam elemen <head>.
CONTOH PEYISIPAN CSS EXTERNAL

Gambar disamping merupakan


contoh cara penyisipan CSS
secara EXTERNAL, yaitu file
HTML dan CSS terpisah lalu
di hubungkan dengan tag
<link> pada file HTML
CONTOH PEYISIPAN CSS INTERNAL

Gambar disamping merupakan


contoh cara penyisipan CSS
secara INTERNAL, yaitu file
CSS tergabung pada file
HTML
CONTOH PEYISIPAN CSS INLINE

Gambar disamping merupakan


contoh cara penyisipan CSS
secara INLINE, yaitu CSS
digabungkan kedalam tag
HTML langsung tanpa harus
membuat block <style>
DIAGRAM STRUKTUR CSS

Selector Property Value Declaration


Cara memilih Atribut yang Nilai yang akan Bagian yang
elemen HTML akan diubah, diberikan mendefinisikan
yang akan misalnya, kepada properti, bagaimana elemen
diubah warna teks atau misalnya, warna terpilih akan
tampilannya. ukuran font. merah atau ditampilkan.
ukuran font
16px.
CSS FONT

color font-style font-size


Mengatur warna teks yang Mengatur gaya font, seperti Mengatur ukuran font
dipilih, dapat dipilih "normal" (default), "italic", dalam berbagai unit, seperti
menggunakan nilai RGB, atau "oblique". piksel, em, atau persen.
HEX, atau HSL.
CSS BACKGROUND

Background-color Background-image
Mengatur warna latar Menentukan gambar latar
belakang elemen, bisa juga belakang. Kita dapat
menggunakan kode RGB, menyertakan URL gambar
HEX dll. yang akan digunakan
sebagai latar belakang.
Pengertian Border CSS

Dalam CSS, "border" merujuk pada garis atau tepi yang mengelilingi elemen HTML. Border digunakan untuk
memberikan elemen tampilan yang terdefinisi dan terpisah dari elemen-elemen lain di halaman web. Border
dapat digunakan untuk menggambarkan elemen, mengelompokkan elemen, atau memberikan efek estetis.

Border biasanya memiliki tiga sifat utama yang bisa dikendalikan:

1. border-width: Mengontrol ketebalan dari border. Ini dapat diukur dalam piksel atau unit lainnya seperti "px,“
"em," atau "rem."

2. border-style: Mengontrol gaya dari border, seperti "solid" (garis lurus), "dotted" (titik-titik), "dashed"
(garis putus- putus), "double" (garis ganda), dan banyak lagi.

3. border-color: Mengatur warna dari border, yang bisa diwakili dalam format seperti kode warna (#RRGGBB) atau
menggunakan nama warna seperti "red" atau "blue."
CSS BORDERS

Border-style Border-width Border-color


Mengatur gaya border, Mengatur lebar border Untuk mengatur warna dari
seperti "solid" (garis lurus), dalam piksel atau unit border (garis tepi) sebuah
"dotted" (titik-titik), lainnya. elemen HTML, seperti
"dashed" (garis putus- sebuah div, teks, atau
putus), "double" (garis gambar..
ganda), dsb.
Pengertian Margin CSS

Margin dalam CSS adalah jarak di sekitar elemen HTML yang memengaruhi tata letak halaman. Margin dapat
diatur untuk mengendalikan jarak elemen dengan elemen lainnya. Ada empat jenis margin: atas, bawah, kiri, dan
kanan. Anda dapat mengatur margin dengan properti seperti margin-top, margin-bottom, margin-left, dan margin-
right. Margin memengaruhi tata letak dan tampilan elemen serta tata letak halaman web secara keseluruhan,

Margin memiliki pengaruh terhadap tata letak (layout) elemen-elemen di dalam dokumen HTML dan dapat
digunakan untuk mengendalikan seberapa dekat atau jauh elemen-elemen tersebut dengan elemen lainnya.
Margin biasanya didefinisikan dalam satuan ukuran seperti piksel (px), sentimeter (cm), persentase (%), dan
lainnya.
CSS MARGIN

margin
Mengatur margin pada sisi tertentu dari elemen, seperti atas, kanan,
bawah, atau kiri. Atau bisa juga Mengatur margin pada semua sisi
elemen dalam satu deklarasi yaitu: margin: 10px;
Pengertian Padding CSS

Padding dalam CSS adalah jarak di sekitar konten dalam elemen HTML. Ini mempengaruhi seberapa dekat atau
jauh konten tersebut dari batas elemen itu. Terdapat empat jenis padding: atas, bawah, kiri, dan kanan. Padding
mengatur jarak konten dari batas elemen. Anda dapat mengatur padding dengan properti seperti padding-top,
padding-bottom, padding-left, dan padding-right. Padding adalah elemen penting dalam mengendalikan tata
letak halaman web dan membentuk tampilan elemen-elemen pada halaman tersebut.

Padding memengaruhi tata letak elemen dan membantu menciptakan ruang di dalam elemen untuk mengatur
tampilan konten. Padding sering digunakan bersama dengan margin untuk mengendalikan jarak antara elemen
dan elemen lain dalam tata letak halaman web Anda.
CSS PADDING

padding
Padding dalam CSS merujuk pada ruang internal di sekitar
konten elemen HTML yang memisahkan konten dari border
elemen tersebut. Padding-top, padding-right, padding-bottom,
padding-left Mengatur padding pada sisi tertentu dari elemen,
seperti atas, kanan, bawah, atau kiri. Atau bisa juga mengatur
semua sisi menggunakan deklarasi padding: 10px;
“Jika bisa keluar di dalam, kenapa tidak di
dalam.”

—AHMAD RIFA’I, 05TPLP005, ABSEN 3


Terima Kasih!

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU


KOMPUTER

Anda mungkin juga menyukai