HTML dan CSS -

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>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Selamat Datang di Halaman Saya</h1>

<p>Ini adalah paragraf pertama di halaman saya.</p>

</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
href=”https://tekhnopedia.my.id”>Ini adalah link</a>

Gambar

Elemen untuk
menambahkan gambar pada sebuah website:

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
Penulisan Komentar pada CSS, dengan menggunakan komentar tidak akan
ditampilkan ke dalam output*/

selektor {

properti: nilai;

}

Contoh mengatur warna dan ukuran font menggunakan CSS

/* Mengatur
warna teks untuk semua paragraf */

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;

}

Leave a Comment Cancel Reply