Scribd
Unggah
23 tayangan34 halaman

Pengenalan Kepada HTML & CSS

Dokumen ini memberikan pengenalan kepada HTML dan CSS, termasuk struktur dan penggunaan kedua bahasa tersebut dalam pembangunan laman web. Ia juga menjelaskan cara menggunakan platform Trinket.io untuk membuat dan mengedit projek HTML dan CSS. Selain itu, dokumen ini menyenaraikan tag asas dan tambahan yang digunakan dalam HTML serta elemen penggayaan dalam CSS.

Diunggah oleh

Raj Kumar
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
23 tayangan34 halaman

Pengenalan Kepada HTML & CSS

Dokumen ini memberikan pengenalan kepada HTML dan CSS, termasuk struktur dan penggunaan kedua bahasa tersebut dalam pembangunan laman web. Ia juga menjelaskan cara menggunakan platform Trinket.io untuk membuat dan mengedit projek HTML dan CSS. Selain itu, dokumen ini menyenaraikan tag asas dan tambahan yang digunakan dalam HTML serta elemen penggayaan dalam CSS.

Diunggah oleh

Raj Kumar
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/ 34

PENGENALAN

Pasaran

Trend

KEPADA
HTML & CSS
Maklum
LAMAN WEB SEKOLAH SAYA balas
Iklan
ISI KANDUNGAN
PENGENALAN TRINKET.IO

Pengenalan HTML & CSS Cara untuk mendaftar dan


Perbezaan laman web dengan membuat akaun anda
dan tanpa CSS sendiri di Trinket.io

INDEX.HTML STYLE.CSS

Pembelajaran tentang Pembelajaran tentang


index.html style.css

1
PENGENALAN

Hypertext Markup Language (HTML) adalah


bahasa standard yang digunakan untuk mencipta
laman web.
HTML menerangkan tentang struktur laman web.
Fail disimpan di dalam format .html.

Cascading Style Sheet (CSS) adalah bahasa yang


digunakan untuk menggayakan dokumen HTML.
CSS menerangkan cara elemen HTML harus
dipaparkan.
Fail disimpan di dalam format .css.
2
Contoh projek Contoh projek
TANPA CSS DENGAN CSS

3
HASIL PROJEK

4
TRINKET.IO

Google "Trinket.io" Tekan "Sign Up" dan pilih Pastikan paparan keluar Tekan "New Trinket"
"Sign in with Google" seperti ini dan pilih HTML

Paparan Trinket
untuk HTML
5
TRINKET.IO

1. Tekan "+" untuk menambah bahagian


"style.css".

1. Cari satu gambar berkaitan sekolah.


2. Tekan "Save image as..." dan letakkan di bahagian
dekstop.
3. Pastikan gambar disimpan dalam bentuk "JPEG"
2. Tekan bahagian "Untitled" dan tulis tajuk atau"PNG".
"My School" 4. Namakan gambar tersebut sebagai "image". 6
INDEX.HTML

Tag yang digunakan untuk memformat kandungan:


TAG ASAS
<!DOCTYPE...> , <html> , <head> , <title> , <body>

Tag yang dipautkan antara fail index.html dengan fail style.css:


TAG PAUTAN
<link rel=”stylesheet” type=”text/css” href=”style.css”>

Tag yang akan digunakan untuk menambah beberapa kandungan dan maklumat
TAG TAMBAHAN dalam laman web:
<header> , <id> , <class> , <nav> , <h1> , <ul> , <li> , <a href> , <p>, <aside> , <div>

Tag yang mentakrifkan pengaki untuk dokumen atau bahagian:


TAG FOOTER <footer>
7
TAG ASAS

<!DOCTYPE...>

Pengisytiharan itu membolehkan "browser" ditetapkan dengan maklumat


tentang dokumen jenis ini.
Pengisytiharan setiap dokumen HTML untuk projek ialah <!DOCTYPE html>.

8
TAG ASAS

<html> , <head> , <title> , <body>

Kod HTML sentiasa menggunakan "tag" dalam setiap proses pengekodan.


"Tag" terdiri daripada Pembuka dan Penutup seperti <html> dan </html>.

9
TAG PAUTAN

Tag pautan digunakan untuk menyambungkan dokumen dengan sumber luaran.


Ia terdiri dengan pelbagai ciri seperti rel, type, href, media, sizes, dan lain-lain.
10
TAG TAMBAHAN

<header> , <id> , <class> , <nav> , <h1> , <ul> , <li> , <a href> , <p>, <aside> , <div>

<header> Pengenalan kepada isi kandungan.

<id> Untuk mengenali identiti sebagai


elemen HTML.
Untuk membezakan bahagian
<div> kandungan dalam HTML.

Untuk elemen memenuhi


<class> arahan yang sama berulang kali.

<h1> Saiz tajuk heading.

<nav> Navigasi program.


<ul> Senarai tidak teratur.
Melambangkan nilai senarai
<li> kandungan.
Mengumpul maklumat
<a href> daripada sumber lain.
11
TAG TAMBAHAN

tag <h1>

tag <ul>

12
TAG TAMBAHAN

<aside>
Untuk meletakkan maklumat
kandungan "Halaman Web" di
sebelah.

<p>
Untuk membuat
perenggan.

13
TAG TAMBAHAN

tag <aside>

Untuk menentukan
kandungan sampingan laman
web

14
IMAGE TAG

<img src>

Untuk meletakkan gambar


daripada lokasi yang
menyimpan gambar

15
TAG FOOTER

<footer>
Untuk menentukan bahagian
bawah laman web.
16
TAG FOOTER

tag <footer>
17
STYLE.CSS
Digunakan untuk mereka bentuk landskap laman web atau halaman web.

<body> <class> <id>

color , font , line-height , width , overflow color


margin

padding , display ,
text decoration
Pengekodan untuk class
diperlukan dengan
menggunakan "." background image

Pengekodan untuk id
diperlukan dengan float & box-sizing
menggunakan "#"

18
<body>

color , font , line height , margin

Gunakan fail baharu untuk


mengekod bahagian "css".

color
Carian "HTML color codes" boleh
digunakan sebagai tag kod warna.

Untuk menentukan jenis


font font.

line-height Jarak antara baseline.

margin Untuk mencipta ruang antara


19 elemen border.
<body>

20
<class>

width , overflow

Untuk menentukan panjang


width & lebar sesuatu elemen.

Untuk menentukan saiz keluasan


overflow ruang sesuatu elemen.

21
<class>

22
<id>

color

TIGA cara berbeza untuk


menulis kod warna

1) Nama warna
Contoh: coral, black, pink

2) Kod hashtag
Contoh: #fff, #6c5a49, #f4f4f4

3) Kod koordinat (R,G,B)


Contoh: rgb (243, 236, 236)
23
<id>

24
<id>

padding , display , text decoration

padding Untuk membina ruang dan


jurang bagi sesuatu elemen.

display Untuk mereka bentuk


ciri menjadi sistematik.

Untuk menjadikan teks


text-decoration kelihatan menarik

25
<id>

26
<id>

background image

background-position
Mengatur kedudukan
latar belakang

background-size
Menunjukkan saiz latar
belakang

Untuk menentukan
min-height ketinggian minimum elemen

Untuk menyusun teks dalam


text-align setiap elemen secara sistematik
27
<id>

28
<id>

float & box-sizing

float Untuk meletakkan elemen

Membenarkan pelapik dan jidar


box-sizing dimasukkan ke dalam elemen

29
<id>

30
TAG ASAS

Terbitankan laman web

31
Selesaikan cabaran ini!
Tema: Permainan
Bina satu laman web berdasarkan tema di atas
Tukar title, header, paragraph dan background image
berdasarkan tema anda.
Tukar warna title dan latar belakang laman web anda.
Masukkan satu video YouTube dalam laman web anda.

Apakah yang boleh anda lakukan


untuk menjadikan projek laman web
anda lebih menarik?
HTML & CSS

Sumber tambahan:

TAMAT w3schools.com

Anda mungkin juga menyukai