Scribd
Unggah
31 tayangan

HTML & CSS - Basic Concept and Syntax

Modul ini membahas dasar pemrograman website yaitu HTML dan CSS. Pelajaran dimulai dari pengenalan tag-tag dasar HTML sampai cara menambahkan styling menggunakan CSS."

Diunggah oleh

rizqi
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
31 tayangan

HTML & CSS - Basic Concept and Syntax

Modul ini membahas dasar pemrograman website yaitu HTML dan CSS. Pelajaran dimulai dari pengenalan tag-tag dasar HTML sampai cara menambahkan styling menggunakan CSS."

Diunggah oleh

rizqi
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/ 26

EST.

2024
Baca Coding
by Nanda

HTML & CSS


FUNDAMENTAL 2024

Halo, kali ini kita akan membahas tentang dasar pemrograman


yang wajib bagi seorang web developer ketahui yaitu HTML &
CSS. Modul ini akan mencakup kombinasi teori dan praktek. Kita
bakal mulai dari konsep dasar dan kemudian beralih ke contoh
praktis untuk membantu kamu membangun keterampilan
pemrograman secara bertahap.

[DEVICE MINIMAL INTEL/RYZEN 3 & RAM 8]


EST.2024
Baca Coding
by Nanda

SEBELUM KITA MASUK KE HTML & CSS


KALIAN SUDAH TAU WEBSITE ITU
APA?
Website itu adalah halaman web yang menyimpan
berbagai jenis informasi. Di zaman sekarang ini aku yakin
kalian pasti pernah gunain yang namanya website, yakann:v

Kenapa sih harus ada website? Sekarang era nya teknologi


bro & sist jadi semua informasi harus bisa diakses secara
digital makanya perlu adanya website. Menurut data
Similarweb, situs Google.com meraih 86,6 miliar kunjungan
per Januari 2024.

Manfaat punya website apa coba? Banyak banget, aku


ngga bisa sebutin semua tapi yang pertama kalian bisa jadi
seorang web developer pekerjaan yang sekarang lagi
banyak dicari perusahaan dan di Indonesia gaji rata-ratanya
ada di 8-15 juta/bulan. Selain itu kalian juga bisa masarin
bisnis kalian di internet melalui website itu.

Terus gimana cara buat website bang? Gampang pertama


lu harus paham terlebih dahulu fundamental atau dasar
pemrograman website, langsung aja kita mulai…

Oiyaa, pastikan kalian punya laptop/komputer ya buat


belajar:v
EST.2024
Baca Coding
by Nanda

KITA MULAI DARI HTML!

Apa sih itu HTML? Gampangnya HTML itu adalah sebuah


bahasa yang menggunakan markup atau penanda untuk
membuat halaman web. HTML itu ibaratnya pondasi, kalau
kalian sudah kokoh pondasinya aku yakin kedepannya pasti
bisa 😎

Penting untuk kamu ketahui versi HTML yang sekarang


adalah HTML5 dimana ini adalah versi yang masih
digunakan sampai sekarang.

Tools yang perlu kamu siapkan sebelum kita masuk ke


pengenalan tag-tag yang ada pada HTML itu ada beberapa
dan yang paling utama itu adalah laptop/pc dan internet
kalau ngga ada kedua itu gimana belajarnya coba hehe:)
EST.2024
Baca Coding
by Nanda

TOOLS BUAT MULAI NGODING

🧑: Text editor kan banyak kak, kita pakai yang mana?

Nah, kita akan gunakan text editor seribu umat yaitu visual
studio code. Mari kita install dulu deh text editor nya supaya
nanti bisa langsung ngoding. Langsung klik link ini untuk
download visual studio code lalu tinggal pilih aja deh OS
sesuai laptop/pc kalian.

Pertama sekali kalian perlu siapin text editor buat


meletakkan kode program kalian.

Cara instalasinya gampang tinggal di next-next aja kok


ngga ada cara khusus jadi aku yakin kalian pasti bisa lakuin
mandiri🔥
EST.2024
Baca Coding
by Nanda

PERSIAPAN SEBELUM NGODING

1. Buka VSCode kalian lalu pilih file -> open folder

Supaya enak belajarnya kita buat dulu folder yang nantinya


berisikan semua file percobaan kalian, caranya adalah…
2. Buat sebuah folder dengan nama belajar-web, saran aku
silahkan buat foldernya di dalam penyimpanan Data (D:)
EST.2024
Baca Coding
by Nanda

PERSIAPAN SEBELUM NGODING

3. Kalau udah kalian select folder nya lalu buat sebuah file
dengan nama index.html seperti ini…

4. Nah, sekarang kalian udah siap untuk mulai ngoding,


pertama kali kita bakal kenalan sama HTML Starter
Template dan untuk cara buatnya kalian cukup ketikan
html maka akan ada suggestion untuk pilih html: 5

Kalau udah nanti kodingannya akan bertambah jadi seperti


ini.
EST.2024
Baca Coding
by Nanda

PERSIAPAN SEBELUM NGODING

Keren! Ini udah jadi halaman HTML nya, lalu kita bakal
kenalan sama tag-tag yang ada.
EST.2024
Baca Coding
by Nanda

KENALAN SAMA TAG HTML

Tag HTML

Tag html ibarat akar dari dokumen HTML. Dia menampung


tag head, tag body, dan setiap elemen HTML lainnya. Intinya
semua tag-tag yang kamu pakai ketika membuat website
akan ada di dalam tag html ini.

Tag Head
Tag head digunakan untuk menampung metadata situs
web yang akan kita buat. Metadata itu mencakup tag judul,
tag link, skrip, stylesheet misalnya kita mau gunain link css
dari luar kita bakal tulisnya di dalam tag head itu.
EST.2024
Baca Coding
by Nanda

KENALAN SAMA TAG HTML

Tag Title
Tag title digunakan untuk menentukan judul situs web yang
akan kamu buat, ini juga sebagai penanda pengguna
website sedang ada di halaman apa.

Tag Body
Tag body menampung konten isi situs web, yang dapat
dilihat oleh pengguna. Intinya semua bagian yang akan
menjadi konten web kamu akan dimuat di dalam tag body.
EST.2024
Baca Coding
by Nanda

KENALAN SAMA TAG HTML

Tag h1

HTML memiliki elemen judul yang berbeda yaitu h1, h2, h3,
h4, h5 dan h6. Semakin besar maka judulnya akan semakin
kecil.
EST.2024
Baca Coding
by Nanda

PRAKTIKUM: MEMBUAT HALAMAN


SEDERHANA

1. Mari kita persiapkan dengan membuat sebuah file


dengan nama index.html pada visual studio code
seperti ini…

Biar makin paham, kita akan coba langsung praktek buat


halaman sederhana dulu.

(“TERUSLAH BELAJAR” Nanda 2024)

2. Lalu buat sebuah folder dengan nama assets untuk


nantinya bisa menampung gambar yang akan
digunakan
EST.2024
Baca Coding
by Nanda

PRAKTIKUM: MEMBUAT HALAMAN


SEDERHANA

3. Sebelum lanjut kita bakal install extension supaya kalian


bisa lihat hasil codingan kalian.

Buka menu extension lalu cari live server dan kemudian


install saja.
4. Jika sudah kita akan coba jalankan file index.html kita
dengan tampilan kosong, caranya adalah seperti ini…

Klik kanan pada file index.html lalu pilih open with live
server secara otomatis akan membuka web browser default
kamu dan foilaa halaman kamu sudah bisa di akses…
EST.2024
Baca Coding
by Nanda

PRAKTIKUM: MEMBUAT HALAMAN


SEDERHANA

Tampilan akan terlihat seperti berikut ini…

5. Mari buat kode program berikut di dalam index.html,


Pastikan kamu ketik yaa! Supaya terbiasa ngoding!
EST.2024
Baca Coding
by Nanda

PRAKTIKUM: MEMBUAT HALAMAN


SEDERHANA

Silahkan lihat kembali halaman index.html kamu di browse


maka tampilannya seperti ini…

Selamat! Kamu sudah berhasil membuat sebuah halaman


dengan menerapkan HTML. Penjelasan detail tentang tag
yang ada pada HTML kamu dapat cari di mdn by mozilla↗
dan channel youtube↗

Mari kita perindah website ini dengan masuk ke bagian


terpenting dalam web development yaitu CSS…
EST.2024
Baca Coding
by Nanda

KENALAN DENGAN CSS

Nah, kan udah kenalan sama pondasinya yaitu HTML


sekarang kita bakal ngebuat gimana pondasi yang ada kita
perbagus lagi tampilannya dengan CSS.

CSS (Cascading Style Sheets) adalah stylesheet


(serangkaian gaya) yang dapat digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, yaitu
HTML dan perlu diingat bahwa CSS bukan bahasa
pemrograman karena tidak terdapat logika berpikir
didalamnya.
EST.2024
Baca Coding
by Nanda

KENALAN DENGAN CSS

Kamu dapat melihat sebelum dan sesudah menggunakan


CSS dimana tampilannya akan lebih baik dengan
menggunakan CSS karena itu memang tugas dari CSS,
membuat tampilan menjadi indah.

SEBELUM SESUDAH
EST.2024
Baca Coding
by Nanda

CARA MENGGUNAKAN CSS

1. Inline CSS
Cara styling seperti ini adalah dengan langsung
menambahkan CSS langsung di dalam tag HTML nya
contohnya…

Kita bakal lihat bagaimana CSS bekerja, dalam konsep


dasarnya penggunaan CSS terbagi atas inline css, internal
css dan external css, supaya mengerti kita akan bahas satu
persatu.
Hasilnya bakal seperti ini…
EST.2024
Baca Coding
by Nanda

CARA MENGGUNAKAN CSS

2. Internal CSS
Cara styling seperti ini adalah dengan menambahkan CSS
dengan tag khusus yaitu tag <style>...</style> didalam file
HTML lebih tepatnya didalam tag head.

Hasilnya bakal seperti ini…


EST.2024
Baca Coding
by Nanda

CARA MENGGUNAKAN CSS

3. External CSS

Cara styling seperti ini adalah dengan membuat sebuah file


CSS tersendiri yang nantinya akan menjadi sumber utama
dari styling yang dilakukan pada halaman website kita

Tambahkan kode program berikut kedalam file cth1.html


seperti berikut…
EST.2024
Baca Coding
by Nanda

CARA MENGGUNAKAN CSS

Maka hasilnya akan menjadi seperti ini…

Kita akan membuat halaman HTML menjadi lebih bagus


dengan menggunakan internal CSS, yuk kita buat…
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

1. Siapkan sebuah file index.html dan folder assets serta


tambahkan file style.css didalamnya…

2. Membuat head, mari kita tambahkan kode berikut di


dalam file index.html
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

3. Lalu membuat body, mari ketikkan kode program ini


untuk membuat body dari halaman HTML kamu…
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

4. Tambahkan gambar monas didalam folder assets


seperti ini, download monas disini

5. Jika sudah jalankan menggunakan live server seperti


sebelumnya dan hasilnya akan terlihat seperti ini…
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

6. Luar biasa! Sekarang mari kita tambahkan styling


didalamnya supaya halaman nya terlihat lebih indah,
buka halaman style.css

7. Menambahkan text style pada tag body seperti ini…

Kita akan membuat seluruh font family yang ada pada


halaman website adalah sans-serif.
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

8. Styling pada title h1 dan h2 yaitu dengan warna


tertentu seperti ini

9. Jika dijalankan maka tampilan akan berubah menjadi


seperti ini…
EST.2024
Baca Coding
by Nanda

PRAKTEK HTML CSS

Praktikum sudah selesai, dan kedepannya saya akan buat


modul bootstrap dan akan membuat halaman landing
seperti ini untuk menambah portofolio teman-teman
semua…. stay tuned di @nandeesaptr

Anda mungkin juga menyukai