Scribd
Unggah
33 tayangan9 halaman

HTML Dan Css

HTML digunakan untuk mendefinisikan struktur dan konten dari sebuah dokumen web. HTML menggunakan berbagai elemen seperti <html>, <head>, <body>, <div>, <p>, <img> untuk membuat struktur halaman dan menyisipkan konten seperti teks, gambar, dan lainnya. CSS digunakan untuk mengatur tata letak, gaya, dan tampilan elemen HTML untuk menciptakan antarmuka pengguna yang menarik.

Diunggah oleh

Ahmad Aja
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 DOCX, PDF, TXT atau baca online di Scribd
33 tayangan9 halaman

HTML Dan Css

HTML digunakan untuk mendefinisikan struktur dan konten dari sebuah dokumen web. HTML menggunakan berbagai elemen seperti <html>, <head>, <body>, <div>, <p>, <img> untuk membuat struktur halaman dan menyisipkan konten seperti teks, gambar, dan lainnya. CSS digunakan untuk mengatur tata letak, gaya, dan tampilan elemen HTML untuk menciptakan antarmuka pengguna yang menarik.

Diunggah oleh

Ahmad Aja
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

HTML

PRESENTATOR 1 HTML
Beberapa bagian penginisialisasian yang di gunakan :
a. Deklarasi

<!DOCTYPE html> adalah sebuah deklarasi yang memberitahu web browser jenis dokumen
yang sedang diolah. Fungsinya adalah untuk mendefinisikan jenis dokumen sebagai dokumen
HTML (Hypertext Markup Language).

b. Tag Pembuka

<html lang="en"> adalah tag pembuka yang mendefinisikan awal dari sebuah dokumen
HTML. Di dalamnya, atribut lang digunakan untuk menentukan bahasa konten pada halaman
web.

c. Kepala

<head> adalah elemen yang mendefinisikan kepala dokumen HTML. Di dalamnya, terdapat
berbagai informasi dan pengaturan yang berlaku untuk halaman web, seperti metadata, tautan ke
file eksternal (CSS, JavaScript), dan judul halaman.
<meta charset="UTF-8"> Mendefinisikan pengaturan karakter untuk dokumen HTML.
Dalam hal ini, pengaturan karakter diatur sebagai UTF-8, yang merupakan standar pengkodean
karakter yang luas dan mendukung berbagai bahasa dan simbol.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengontrol


tampilan halaman web pada perangkat seluler dengan mengatur lebar viewport dan tingkat zoom
awal. Nilai width=device-width menyesuaikan lebar viewport dengan lebar perangkat,
sedangkan initial-scale=1.0 menetapkan tingkat zoom awal ke 1.0 (tidak ada zoom).

Elemen <link> digunakan untuk menautkan dokumen dengan sumber daya eksternal, seperti file
CSS atau ikon.

Dalam tag <link>, atribut rel digunakan untuk menentukan jenis hubungan antara dokumen saat
ini dan dokumen yang ditautkan,

sedangkan atribut href menentukan lokasi dari dokumen yang ditautkan

Elemen <title> digunakan untuk menentukan judul dari halaman web. Isi dari elemen <title>
akan ditampilkan di tab browser ketika halaman web dibuka.

d. Badan

Elemen <body> digunakan untuk menandai konten utama dari halaman web. Semua konten
yang ingin ditampilkan kepada pengguna, seperti teks, gambar, video, dan elemen interaktif,
diletakkan di dalam elemen <body>.
Elemen <nav> digunakan untuk menandai bagian dari halaman web yang berisi tautan navigasi
atau menu. Ini membantu pengguna untuk berpindah halaman atau menuju bagian tertentu dari
halaman web dengan lebih mudah.

PRESENTATOR 2 HTML

Elemen <div> digunakan dalam HTML untuk membuat sebuah bagian dari halaman web yang
terpisah dan dapat diatur dengan gaya CSS tertentu. Elemen ini sering digunakan sebagai wadah
atau kontainer untuk mengelompokkan dan mengatur elemen-elemen HTML lainnya, seperti
teks, gambar, atau elemen-elemen lainnya.

- Elemen <img> dalam HTML digunakan untuk menyisipkan gambar ke dalam halaman
web. Ini adalah elemen mandiri yang tidak memiliki tag penutup dan tidak memiliki
konten yang disematkan di dalamnya.
- atribut src untuk menentukan lokasi atau URL gambar yang ingin Anda sisipkan.
- Atribut class dalam HTML digunakan untuk memberikan satu atau lebih nama kelas
kepada elemen HTML tertentu. Kelas tersebut kemudian dapat digunakan untuk merujuk
elemen tersebut dalam CSS atau JavaScript, atau untuk menentukan perilaku tertentu,
gaya, atau fungsionalitas pada elemen tersebut.

Elemen <h1> hingga <h6> digunakan untuk menandai tingkat judul atau heading dalam
dokumen HTML. Mereka memberikan struktur hierarkis ke dalam dokumen

Elemen <ul> digunakan untuk membuat daftar tak terurut (unordered list) dalam dokumen
HTML.
- Elemen <li> digunakan untuk menandai setiap item dalam daftar, sementara elemen
- <a> digunakan untuk membuat tautan (link) dalam dokumen HTML.
- Atribut href (Hypertext Reference) digunakan dalam elemen <a> (anchor) untuk
menentukan URL (Uniform Resource Locator) atau alamat tujuan tautan. Dalam contoh
ini, saat pengguna mengklik teks "Klik di sini", mereka akan diarahkan ke alamat URL
yang ditentukan dalam atribut href

Elemen <p> digunakan untuk menandai paragraf dalam dokumen HTML. Ini adalah salah satu
elemen paling umum digunakan untuk menampilkan teks.

Atribut id dalam HTML digunakan untuk memberikan identitas unik kepada suatu elemen.
Identitas yang diberikan haruslah unik di dalam satu halaman HTML. id sering digunakan untuk
merujuk ke elemen tertentu dalam kode CSS

Elemen <section> digunakan untuk mengelompokkan konten dalam sebuah dokumen HTML.
Biasanya, <section> digunakan untuk mengelompokkan konten yang memiliki tema atau topik
yang sama dalam dokumen.

Elemen <main> pada HTML digunakan untuk menandai konten utama dari sebuah halaman
web. Ini menunjukkan bagian dari dokumen yang merupakan konten utama atau inti dari
halaman tersebut. Penggunaan <main> membantu dalam membuat struktur yang lebih
terstruktur dan semantik dalam dokumen HTML.
CSS

PRESENTATOR 1 CSS

Pengaturan Konten pada CSS :

Pada bagian ‘:root’, terdapat definisi variabel CSS seperti --primary, --bg, --ly, --bl, dan --kn,
yang digunakan untuk menyimpan nilai-nilai warna yang akan digunakan di seluruh dokumen
CSS. Variabel ini memudahkan penggunaan kembali nilai warna yang sama di beberapa tempat
dalam kode CSS.

‘*’ dalam CSS merupakan selector universal, yang berarti itu akan memilih semua elemen di
dalam dokumen HTML.

font-family: Menentukan jenis font yang akan digunakan untuk teks di seluruh halaman.

Background-color : digunakan untuk mengatur warna latar belakang dari sebuah elemen
HTML, nilai yang dapat digunakan adalah seperti nama warna, kode warna, atau nilai RGB.

Color : Properti color digunakan untuk mengatur warna teks dari sebuah elemen HTML. Nilai
yang dapat digunakan adalah seperti nama warna, kode warna, atau nilai RGB.
Padding :
Padding adalah spasi internal di sekitar konten suatu elemen HTML di dalam kotak elemen
tersebut. Ini memungkinkan untuk mengatur jarak antara batas elemen dan kontennya. Properti
padding dapat diterapkan secara terpisah untuk setiap sisi kotak (atas, kanan, bawah, kiri), atau
secara bersamaan menggunakan shorthand.

Display :
Display merupakan salah satu properti CSS yang digunakan untuk mengatur bagaimana sebuah
elemen HTML ditampilkan dalam halaman web. Properti ini memiliki beberapa nilai yang
digunakan, di antaranya:
- block: Elemen akan ditampilkan sebagai blok (block-level element). Elemen ini akan
menempati satu baris penuh dan memulai baris baru setelahnya. Contoh elemen block
adalah <div>, <p>, dan <h1>.
- inline-block: Elemen akan ditampilkan sebagai inline-block (inline-level block element).
Elemen ini menempati satu baris penuh seperti elemen block, namun tidak memulai baris
baru. Contoh elemen inline-block adalah <input> dan <button>.
- flex: Elemen akan ditampilkan sebagai flexbox container, yang memungkinkan untuk
mengatur tata letak dan penempatan elemen-elemen anak secara fleksibel.
Align-items : adalah sebuah properti CSS yang digunakan untuk mengatur posisi vertikal dari
elemen-elemen dalam sebuah container yang memiliki display flex atau grid.
- center : Mengatur posisi elemen-elemen ke tengah container.

Posisition : merupakan properti CSS yang digunakan untuk mengatur posisi elemen dalam
halaman web. Properti ini memiliki beberapa nilai, di antaranya:
- relative : Elemen akan diposisikan relatif terhadap posisinya yang seharusnya, dan dapat
digeser menggunakan properti top, right, bottom, dan left.
- absolute : Elemen akan diposisikan relatif terhadap elemen terdekat yang memiliki
properti position bukan static. Jika tidak ada elemen yang sesuai, elemen akan
diposisikan relatif terhadap elemen <html>. Elemen ini tidak mempengaruhi posisi
elemen lain.
- fixed : Elemen akan diposisikan relatif terhadap viewport, dan akan tetap berada pada
posisi yang sama saat halaman digulir. Elemen ini tidak mempengaruhi posisi elemen
lain.
-
z-index :
z-index adalah properti CSS yang digunakan untuk mengontrol tumpukan elemen dalam
halaman web. Properti ini mengatur urutan tumpukan elemen-elemen yang tampil di atas atau di
bawah elemen lainnya dalam halaman. Nilai z-index semakin tinggi, semakin tinggi pula elemen
tersebut akan ditempatkan dalam tumpukan.

PRESENTATOR 2 CSS

Atribut width dan height merupakan dua properti CSS yang digunakan untuk mengatur lebar dan
tinggi elemen dalam halaman web, secara berurutan. Nilai yang dapat diberikan pada properti
width dan height bisa berupa nilai lengkap seperti px, %, rem, em.

Margin adalah jarak antara tepi luar suatu elemen HTML dengan elemen lain di sekitarnya.
Margin adalah spasi di luar kotak elemen HTML, di antara elemen tersebut dan elemen lain di
sekitarnya. Properti CSS margin digunakan untuk mengatur ukuran margin dari suatu elemen,
yang mempengaruhi tata letak elemen tersebut di halaman web. Properti margin juga dapat
diterapkan secara terpisah untuk setiap sisi kotak (atas, kanan, bawah, kiri), atau secara
bersamaan menggunakan shorthand.

border adalah properti CSS yang digunakan untuk menambahkan garis di sekitar batas sebuah
elemen HTML. Properti ini memiliki tiga nilai utama yang harus diatur: width (lebar garis), style
(gaya garis), dan color (warna garis). Lebar garis dapat ditentukan dalam satuan seperti px, em,
atau %, sedangkan gaya garis dapat berupa solid, dashed, dotted, dan lainnya.
border-radius : properti untuk menetukan lengkungan sudut border.

cursor adalah properti CSS yang digunakan untuk mengubah bentuk kursor saat di atas sebuah
elemen HTML. Properti ini dapat mengubah kursor menjadi berbagai bentuk, seperti tanda
panah, tangan, atau kursor yang menunjukkan bahwa suatu elemen adalah tautan (link).
Beberapa nilai umum dari properti cursor adalah pointer, text, default, help, wait, dan not-
allowed. Nilai pointer digunakan untuk menunjukkan bahwa elemen tersebut adalah tautan yang
dapat diklik, sementara nilai not-allowed digunakan untuk menunjukkan bahwa elemen tersebut
tidak dapat diakses atau diinteraksi.

content adalah properti CSS yang digunakan untuk menambahkan konten tambahan ke dalam
elemen HTML yang memiliki properti ::before atau ::after. Properti ini digunakan dengan
pseudo-element untuk menambahkan konten yang tidak terdapat dalam HTML asli, misalnya,
untuk menambahkan ikon atau simbol sebelum atau sesudah teks dalam suatu elemen.

flex-wrap adalah properti CSS yang digunakan untuk mengatur apakah elemen-elemen dalam
flex container akan terus berada dalam satu baris atau akan dibungkus (wrap) ke baris baru jika
tidak cukup ruang. Nilai properti ini dapat berupa nowrap, wrap, atau wrap-reverse.

flex-direction digunakan untuk mengatur arah tata letak elemen arah urutan dalam flex
container.

justify-content adalah properti CSS yang digunakan untuk mengatur cara elemen-elemen dalam
sebuah flex container didistribusikan atau diletakkan sepanjang sumbu utama (main axis).

box-sizing :
box-sizing adalah properti CSS yang mengontrol bagaimana browser menghitung ukuran total
elemen HTML. Ini mempengaruhi cara lebar, tinggi, padding, dan border diperlakukan dalam
pengukuran elemen. Ada tiga nilai untuk box-sizing:
- content-box: Ini adalah nilai default di mana ukuran total hanya mencakup konten,
tanpa padding dan border.
- padding-box: Total ukuran mencakup konten dan padding, tetapi tidak termasuk
border.
- border-box: Total ukuran mencakup konten, padding, dan border

outline adalah properti CSS yang digunakan untuk menetapkan garis luar (outline) untuk sebuah
elemen HTML. Outline berbeda dengan border karena outline tidak memengaruhi tata letak
elemen atau aliran dokumen, dan biasanya terlihat seperti garis tipis yang mengelilingi tepi
elemen.

Anda mungkin juga menyukai