Scribd
Unggah
4 tayangan14 halaman

Membuat Header HTML & CSS di VS Code

Dokumen ini menjelaskan tentang HTML dan CSS, serta cara membuat header pada halaman web menggunakan kedua bahasa tersebut. Terdapat langkah-langkah untuk memulai proyek di Visual Studio Code, termasuk pembuatan file HTML dan CSS. Selain itu, dijelaskan juga cara menampilkan hasil di browser menggunakan ekstensi 'Live Server'.

Diunggah oleh

patriciacute495
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
4 tayangan14 halaman

Membuat Header HTML & CSS di VS Code

Dokumen ini menjelaskan tentang HTML dan CSS, serta cara membuat header pada halaman web menggunakan kedua bahasa tersebut. Terdapat langkah-langkah untuk memulai proyek di Visual Studio Code, termasuk pembuatan file HTML dan CSS. Selain itu, dijelaskan juga cara menampilkan hasil di browser menggunakan ekstensi 'Live Server'.

Diunggah oleh

patriciacute495
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

Google Slide to

Code: Membuat
Header dengan
HTML & CSS
Oleh: Giri Sejati Nugraha
Mengenal HTML dan CSS
1. HTML (HyperText Markup Language)
Pengertian: Fungsi:
bahasa markup untuk menyusun Membuat kerangka dasar halaman web.
struktur halaman web. Menyusun elemen seperti teks, gambar,
HTML bukan bahasa pemrograman, tapi link, tabel, form.
digunakan untuk menandai konten Menghubungkan antar halaman web
dengan tag. melalui hyperlink.

2. CSS (Cascading Style Sheets)


Pengertian: Fungsi:
Aturan untuk mengatur tampilan visual Mengatur warna, font, ukuran teks,
halaman web. margin, padding.
CSS bekerja berdampingan dengan Mengatur tata letak (layout) halaman.
HTML: HTML = struktur, CSS = Membuat halaman lebih menarik,
gaya/tampilan. interaktif, dan responsif.
Macam-Macam Tag HTML
Macam-Macam CSS

Komponen Utama CSS


Apa Itu Header?

Header adalah bagian atas halaman web.


Biasanya berisi judul website, logo, dan
menu navigasi.
Fungsinya: memberi identitas dan
memudahkan pengunjung berpindah
halaman.
Sama seperti di Google Slide, header adalah
judul besar di atas yang memberi tahu isi
utama.
Beberapa Contoh Teks Editor Offline & Online

Visual Studio Code


Sublime Text
(VS Code)

CodePen W3Schools Tryit Editor


Visual Studio Code (VS Code)

Mendukung banyak
Populer digunakan
bahasa
oleh web developer.
pemrograman.

Banyak tema &


Gratis & ringan
plugin menarik
Langkah-langkah Membuat Project
di Visual Studio Code
[Link] Visual Studio Code
[Link] Folder Project: Buat folder baru, misal:
“MembuatHeader”.
[Link] Folder di VS Code: Buka VS Code → File →
Open Folder → pilih folder “MembuatHeader”.
[Link] File HTML: Klik kanan → New File → beri
nama [Link].
[Link] File CSS: Klik kanan → New File → beri nama
[Link].
Membuat Header Dengan HTML & CSS
1. Gunakan Shortcut Emmet: Ketik tanda seru ! di dalam file
HTML lalu Tekan Tab atau Enter. (Tujuannya: Mempermudah
dan mempercepat pembuatan struktur dasar HTML).
Membuat Header Dengan HTML & CSS
2. Membuat Header pada HTML
File [Link]
Membuat Header Dengan HTML & CSS
3. Menambahkan Kode CSS

Menambahkan Link ke CSS menggunakan CSS External

File [Link]
Cara Menampilkan Hasil Di Browser
1. Install Extensions: “Live Server”

2. Klik Kanan pada file [Link], lalu pilih “Open With Live Server”

3. Hasil akan muncul di Browser


Referensi
[Link]
[Link]
[Link]
[Link]
Terima
Kasih

Anda mungkin juga menyukai