Scribd
Unggah
41 tayangan30 halaman

Modul 1

Diunggah oleh

yenwi.yenwi1203
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 PDF, TXT atau baca online di Scribd
41 tayangan30 halaman

Modul 1

Diunggah oleh

yenwi.yenwi1203
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 30

Modul 1

HTML & CSS Fundamental

1
REQUIREMENT
1. Web Browser (Google Chrome/Chromium (Ms Edge, Opera) atau Firefox)
2. Source Code Editor (disarankan Visual Studio Code)

PENJELASAN
Website adalah kumpulan halaman web yang saling terhubung dan dapat diakses
melalui internet dengan menggunakan web browser. Setiap halaman di dalam
website biasanya terdiri dari informasi dalam bentuk teks, gambar, video, dan
media lainnya.

Berikut adalah beberapa jenis website yang umum ditemukan:

1. Website Statis

Deskripsi: Kontennya tetap dan jarang berubah. Setiap halaman adalah file
HTML yang terpisah.

Contoh: Profil perusahaan sederhana, halaman informasi produk.

2. Website Dinamis

Deskripsi: Kontennya dapat berubah secara dinamis berdasarkan interaksi


pengguna atau data dari server. Biasanya menggunakan bahasa
pemrograman seperti PHP, Python, atau JavaScript.

Contoh: Portal berita, situs jejaring sosial.

1
Berikut adalah parafrase dari penjelasan mengenai elemen-elemen dasar yang
membangun sebuah website:

1. HTML (HyperText Markup Language):


o HTML merupakan bahasa markup yang digunakan untuk
membangun kerangka dasar dan konten suatu situs web. Elemen-
elemen seperti <header>, <footer>, <div>, <p>, <h1> hingga
<h6>, <a>, dan <img> berfungsi untuk menampilkan teks, gambar,
tautan, serta berbagai elemen lainnya pada halaman web.
2. CSS (Cascading Style Sheets):
o CSS berfungsi untuk mengatur tampilan visual dari sebuah situs
web. Dengan menggunakan CSS, Anda dapat menentukan tata letak,
warna, jenis huruf, serta gaya elemen-elemen HTML, sehingga situs
web menjadi lebih menarik dan mudah diakses oleh pengguna.
3. JavaScript:
o JavaScript adalah bahasa pemrograman yang digunakan untuk
menambahkan interaksi pada sebuah situs web. Melalui JavaScript,
Anda dapat menciptakan efek dinamis seperti animasi, validasi
formulir, manipulasi DOM, dan pengelolaan event seperti klik atau
hover.
4. Framework/Library CSS:
o Framework seperti Bootstrap atau Tailwind CSS membantu
mempercepat proses pengembangan situs web dengan menyediakan
komponen-komponen siap pakai seperti tombol, formulir, sistem
grid, dan lainnya. Ini memudahkan pengembang dalam menciptakan
desain yang responsif dan konsisten.
5. Back-end (Pemrograman Server-Side):
o Bagian ini melibatkan bahasa pemrograman server seperti PHP,
Python (Django/Flask), Ruby (Ruby on Rails), Java (Spring

2
Boot), atau Node.js. Back-end bertanggung jawab untuk
pengelolaan data, logika bisnis, serta interaksi dengan basis data.
6. Database:
o Database digunakan untuk menyimpan data yang diperlukan oleh
situs web. Beberapa database yang sering digunakan adalah
MySQL, PostgreSQL, MongoDB, dan SQLite. Database
memungkinkan penyimpanan informasi pengguna, konten dinamis,
serta data lainnya.
7. Web Server:
o Web Server seperti Apache atau Nginx bertugas untuk menangani
permintaan HTTP dari klien (browser) dan mengirimkan halaman
web yang diminta. Web server ini juga berperan dalam mengelola
keamanan, caching, dan fungsi lainnya.
8. Domain dan Hosting:
o Domain adalah alamat unik yang digunakan untuk mengakses situs
web (misalnya, www.example.com), sedangkan hosting adalah
layanan yang menyediakan ruang untuk menyimpan file dan data
situs web di server yang terhubung dengan internet.
9. Kontrol Versi (Version Control):
o Sistem kontrol versi seperti Git digunakan untuk melacak perubahan
kode sumber, memfasilitasi kolaborasi antar pengembang, dan
membantu dalam pengelolaan proyek web secara lebih terorganisir.
10. SEO (Search Engine Optimization):
o SEO mencakup teknik-teknik yang memastikan situs web diindeks
dengan baik oleh mesin pencari seperti Google, sehingga
meningkatkan visibilitas dan peringkatnya dalam hasil pencarian.

3
Struktur Dasar HTML

Setiap halaman web HTML memiliki struktur dasar yang umum. Berikut adalah
komponen utamanya:

1. Deklarasi Doctype:

• Menyatakan jenis dokumen dan versi HTML yang digunakan. Untuk


HTML5, gunakan deklarasi ini di bagian atas dokumen.

2. Tag HTML Utama:

• Tag `<html>` adalah elemen utama yang membungkus seluruh konten


halaman web. Elemen HTML biasanya terdiri dari tag pembuka (opening
tag) dan tag penutup (closing tag), serta teks atau konten yang ditempatkan
di dalamnya. Contoh sederhana adalah tag `<html>` untuk pembuka dan
tag`</html>` untuk penutup .

3. Bagian Kepala (Head):

• Bagian `<head>` berisi informasi metadata tentang halaman, seperti judul


halaman dan link ke file CSS.

4
4. Bagian Tubuh (Body):

• Bagian `<body>` berisi semua konten yang akan ditampilkan di halaman


web, seperti teks, gambar, dan link.

5
Elemen-Elemen Dasar HTML

1. Heading (Judul):

• Tag `<h1>` hingga `<h6>` digunakan untuk membuat heading atau judul
dengan tingkat kepentingan yang berbeda. `<h1>` adalah heading terbesar
dan paling penting, sedangkan `<h6>` adalah yang terkecil.

2. Paragraf:

• Tag `<p>` digunakan untuk membuat paragraf teks.

3. Link:

• Tag `<a>` digunakan untuk membuat tautan atau link ke halaman lain atau
sumber eksternal. Atribut `href ` menentukan alamat tujuan link.

6
4. Gambar:

• Tag `<img>` digunakan untuk menyisipkan gambar. Atribut `src`


menentukan lokasi gambar, dan `alt` menyediakan teks alternatif jika
gambar tidak dapat ditampilkan.

5. Daftar:

• Daftar Tidak Berurutan: Tag `<ul>` digunakan untuk membuat daftar


dengan bullet points. Tag `<li>` digunakan untuk item dalam daftar

• Daftar Berurutan: Tag `<ol>` digunakan untuk membuat daftar dengan


nomor. Tag `<li>` juga digunakan untuk item dalam daftar.

7
6. Tabel:

• Tag `<table>` digunakan untuk membuat tabel. Tag `<tr>` untuk baris
tabel, `<th>` untuk header kolom, dan `<td>` untuk sel data didalamnya.

• Atribut colspan dan rowspan digunakan dalam tabel HTML untuk


menggabungkan beberapa kolom atau baris menjadi satu sel. Ini berguna
saat Anda ingin menampilkan data yang mencakup lebih dari satu kolom
atau baris.

8
9
Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML. Atribut ditulis


di dalam tag elemen dan memiliki format `nama="nilai"`. Contoh atribut yang
sering digunakan:

1. `href`: Digunakan dalam tag `<a>` untuk menentukan alamat link.

2. `src`: Digunakan dalam tag `<img>` untuk menentukan sumber gambar.

3. `alt`: Menyediakan teks alternatif untuk gambar jika gambar tidak dapat
ditampilkan.

10
Struktur HTML

11
CSS (Cascading Style Sheets)

Ada tiga cara utama untuk menerapkan CSS ke elemen HTML:

1. Inline CSS:

• CSS ditulis langsung di dalam atribut `style` pada elemen HTML. Cara ini
digunakan jika Anda hanya ingin mengatur gaya untuk satu elemen.

2. Internal CSS:

• CSS ditulis di dalam tag `<style>` di bagian `<head>` dari dokumen


HTML. Cara ini digunakan jika Anda ingin mengatur gaya untuk satu
halaman.

12
3. External CSS:

• CSS ditulis di file terpisah dengan ekstensi `.css` dan dihubungkan ke


dokumen HTML melalui tag `<link>` di bagian `<head>`. Cara ini
digunakan jika Anda ingin mengatur gaya untuk banyak halaman web.

Sintaks Dasar CSS

CSS terdiri dari selektor dan deklarasi. Deklarasi terdiri dari properti dan nilai.

13
Contoh:

• Selektor (`h1`) adalah elemen HTML yang akan diberi gaya.


• Deklarasi (`color: blue; font-size: 24px;`) adalah aturan yang mengatur
gaya elemen tersebut.
• Properti (`color` dan `font-size`) adalah aspek dari elemen yang akan
diubah.
• Nilai (`blue` dan `24px`) adalah spesifikasi untuk properti tersebut.

Penulisan Selektor Empat Nilai

• top: Margin untuk sisi atas.


• right: Margin untuk sisi kanan.
• bottom: Margin untuk sisi bawah.
• left: Margin untuk sisi kiri.

Penulisan Selektor Dua Nilai

14
• top-bottom: Margin atas dan bawah (nilai yang sama).

• right-left: Margin kanan dan kiri (nilai yang sama).

Penulisan Selektor Satu Nilai

• value: Margin untuk semua sisi elemen.

Selektor CSS

1. Selektor Elemen:

• Mengatur gaya untuk semua elemen dari jenis tertentu.

2. Selektor Kelas (Class):

• Mengatur gaya untuk elemen dengan atribut `class` tertentu. Class diawali
dengan tanda titik (`.`).

Penggunaan di HTML:

15
3. Selektor ID:

• Mengatur gaya untuk elemen dengan atribut `id` tertentu. ID diawali


dengan tanda pagar (`#`).

Penggunaan di HTML:

4. Selektor Atribut:

• Mengatur gaya untuk elemen yang memiliki atribut tertentu.

Properti CSS yang Sering Digunakan

16
1. Warna (Color):

• color: Mengatur warna teks.

• background-color: Mengatur warna latar belakang.

2. Teks (Text):

• font-family: Mengatur jenis font.

• font-size: Mengatur ukuran teks.

• text-align: Mengatur perataan teks (kiri, kanan, tengah, atau justify).

17
3. Margin dan Padding:

• margin: Mengatur jarak luar elemen.

• padding: Mengatur jarak dalam elemen.

4. Border (Garis Tepi):

• border: Mengatur gaya, lebar, dan warna garis tepi.

5. Lebar dan Tinggi (Width and Height):

• width: Mengatur lebar elemen.

18
• height: Mengatur tinggi elemen.

CSS Box Model

Box Model merupakan pondasi dari CSS untuk menentukan bagaimana elemen-
elemen akan ditampilkan, batasan tertentu untuk menampilkan elemen dan
bagaimana elemen berinteraksi satu sama lain. Tiap elemen dalam halaman web
dianggap menjadi kotak persegi panjang yang memiliki area content, padding,
border dan margin.

CSS Positioning Model

Digunakan untuk mengontrol posisi elemen HTML di dalam halaman web.

Beberapa positioning yang paling sering digunakan antara lain:

1. Static (position: static;)

19
Posisi default untuk semua elemen HTML. Elemen HTML ditempatkan
sesuai dengan flow dokumen, artinya elemen-elemen akan muncul dalam
urutan normal mereka dalam HTML. Kita tidak bisa mengeset posisinya
secara dinamis.

2. Relative (position: relative;)


Dalam posisi relative, kita bisa menggunakan properti-posisi CSS seperti
top, bottom, left, dan right untuk menggeser elemen dari posisi
normalnya. Misalnya, kita dapat menggeser elemen sedikit ke atas atau ke
kanan dari posisinya yang normal.
3. Absolute (position: absolute;)
Dalam posisi absolute, elemen bebas ditempatkan di mana saja di dalam
elemen lain yang memiliki position “relative”. Sama seperti position
relative, kita bisa menggunakan properti CSS lain seperti top, bottom, left,
dan right untuk menggeser elemen dari posisi normalnya.
4. Fixed (position: fixed;)
Mirip seperti position absolute, elemen bebas ditempatkan di mana saja di
dalam halaman web. Ini berarti jika kita menambahkan property “top:
10px”, berarti elemen tersebut akan selalu berada 10 px dari atas halaman
web.

Inheritance

Dalam CSS juga berlaku inheritance, properties yang kita berlakukan pada
parents akan diberlakukan pula untuk semua child-nya. Misalnya kita
memberikan properties element body text berwarna hitam (color: black), maka
untuk semua elemen keturunan dari elemen Body akan memiliki text berwarna
hitam. Inheritance dapat mempersingkat penulisan ketika kita akan
memberlakukan style yang sama utuk semua keturunan dari sebuah elemen.

20
Floating

Dengan CSS Float, sebuah elemen dapat “dipaksa” untuk digeser merapat ke kiri

atau ke kanan sampai elemen tersebut menyentuh batas elemen yang merupakan
parent nya atau merapat pada floated box yang lain. Float membuat elemen
"melayang" di luar aliran elemen normal, sehingga elemen-elemen lain tidak
“memperhitungkannya”.

Clearfix

Properti clear dapat kita gunakan untuk mengembalikan alur susunan elemen
yang telah rusak akibat float. Properti clear dapat bernilai left, right, both, atau
none.

Contoh Penggunaan CSS

Berikut adalah contoh penggunaan CSS dalam halaman HTML sederhana:

File HTML (`index.html`):

21
File CSS (`styles.css`):

22
GUIDED

Note: Buat di folder yang sama


1. Tuliskan nama dan npm kalian.
2. Semua file dibuat di folder yang sama.
3. Gunakan foto anda.
4. Ubah link di image menjadi nama dari image yang anda pilih.
5. Penamaan folder GD1_X_YYYY
a. X untuk kelas
b. Y untuk 4 digit npm
6. Penamaan file GD1_X_YYYY-1/2/3

23
1. Membuat File HTML
Dalam Visual Studio Code, tekan CTRL + N untuk membuat file lalu pilih select
language lalu cari HTML (di bagian kanan bawah “Plain Text”).

24
1. Membuat File Pertama
Tuliskan Code berikut, yang berisi css di bagian style dan bagian body untuk isi
kontennya.

25
2. Membuat File Kedua
Sama seperti file sebelumnya tuliskan code berikut di file baru dengan penamaan
yang sudah diberikan.

26
3. Membuat File Ketiga
Sama seperti file sebelumnya tuliskan code berikut di file baru dengan penamaan
yang sudah diberikan.

27
28
Note Penting : Ubah berikut
Ubahlah isi dari href berikut sesuai dengan nama file kalian masing masing. Ini bertujuan
agar dapat mengakses folder kalian.

SEMANGAT MENJADI PROGRAMMER 😄

29

Anda mungkin juga menyukai