HTML
Mari kita
lanjutkan dengan eksplorasi HTML (HyperText Markup Language), teknologi utama
untuk pengembangan halaman web. Disajikan di sini adalah ikhtisar komprehensif
HTML, meliputi definisi, pemformatan, komponen kunci, dan ilustrasi praktis.
HTML (HyperText
Markup Language) berfungsi sebagai bahasa markup standar yang digunakan dalam
konstruksi dan styling halaman web. Dengan membangun kerangka dasar untuk
konten web, HTML meletakkan dasar untuk peningkatan lebih lanjut melalui CSS
(Cascading Style Sheets) dan augmentasi fungsionalitas melalui JavaScript.
Struktur Dasar
Dokumen HTML
Struktur dokumen
HTML terdiri dari elemen yang dilambangkan dengan tag, yang mengarahkan browser
pada presentasi konten.
|
<!DOCTYPE html> <html lang=”en”> <head> </head> <body> </body> </html> |
Elemen Dasar Pada HTML
Heading
Bagian Kepala pada
pemograman HTML dapat ditulis sebagai berikut:
|
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> |
Paragaf
Elemen yang
digunakan untuk menuliskan sebuah paragaf teks pada Website:
|
<p>Contoh Paragaf.</p> |
Link
Elemen yang
berfungsi untuk menambahkan sumber berupa website atau menuju halaman sendiri:
|
<a |
Gambar
Elemen untuk
menambahkan gambar pada sebuah website:
|
<img src=”image.jpg” |
Itulah merupakan
dasar dari HTML, untuk mempelajari lebih lanjut bisa dicek pada website
w3school.
CSS
CSS, yang dikenal sebagai Cascading Style Sheets, berfungsi sebagai alat
linguistik yang digunakan untuk tujuan penataan dan mengatur presentasi visual
halaman web. Melalui penerapan CSS, seseorang memperoleh kemampuan untuk
mengatur tata letak, skema warna, tipografi, dan serangkaian fitur estetika
lainnya yang berkaitan dengan komponen HTML. Pemeriksaan lebih lanjut akan
menyelidiki analisis komprehensif CSS, yang mencakup sintaks fundamental,
pemilih, atribut, dan contoh ilustratif. CSS berfungsi sebagai bahasa style
sheet yang digunakan dalam desain aspek visual file HTML. Melalui CSS,
pemisahan konten (HTML) dari penyajiannya (tampilan) menjadi dapat dicapai.
Fungsi Dari CSS
Menetapkan tata letak elemen dalam halaman web. Memodifikasi
karakteristik seperti warna teks, tipografi, dan ukuran. Menggabungkan gambar
latar belakang dan batas. Mengawasi pertimbangan spasial dalam kaitannya dengan
elemen (margin dan padding). CSS Sintaks Dasar.
CSS terdiri dari peraturan yang diterapkan pada elemen HTML, dengan
setiap peraturan terdiri dari pemilih dan pernyataan.
|
/* Contoh selektor { properti: nilai; properti: nilai; } |
Contoh mengatur warna dan ukuran font menggunakan CSS
|
/* Mengatur p { color: orange; font-size: 16px; } |
Selektor
CSS
Merupakan
cara untuk memilih mana yang menggunakan pengaturan css tersebut.
|
h1 { color: red; } |
ï‚· Selektor Kelas (Class):
- Menerapkan
gaya pada elemen yang memiliki atribut class tertentu. Dimulai dengan
tanda titik (.).
css
Copy
code
.highlight
{
background-color: yellow;
}
ï‚· Selektor ID:
- Menerapkan
gaya pada elemen dengan atribut id tertentu. Dimulai dengan tanda pagar
css
Copy
code
#header
{
font-size: 24px;
}
ï‚· Selektor Atribut:
- Menerapkan
gaya pada elemen yang memiliki atribut tertentu.
css
Copy
code
[type=”text”]
{
border: 1px solid #000;
}
ï‚· Selektor Gabungan:
- Menerapkan
gaya pada elemen-elemen berdasarkan kombinasi beberapa selektor.
css
Copy
code
h1,
h2, h3 {
font-family: Arial, sans-serif;
}