cơ bản về HTML

BÀI 1: C

CuuDuongThanCong.com

B N V HTML

WEB1012 - Xây d ng trang Web
Bài 1
/>

M C TIÊU BÀI H C
 Nh ng khái ni m v website:
• Thành ph n c a trang web
• Tên mi n, a ch IP
• Client – server
 Công vi c thi t k website
 Nh ng ki n th c c b n v HTML

3
CuuDuongThanCong.com

/>

KHÁI NI M V WEBSITE

CuuDuongThanCong.com

/>

KHÁI NI M V WEBSITE

 T p h p các trang web (webpages)
 Ch a v n b n, i t ng
h a (âm thanh, hình nh, …)

c l u tr trên máy ch web (web server)
 Truy c p thông qua Internet và trình duy t web (ph n m m
client)
Cách th c hi n th trang web:
Máy ch
ch a web
Web Client
(trình duy t)

URL
HTML

Web
server
5

CuuDuongThanCong.com

/>

TÊN MI N,

A CH IP

c
 M i m t máy tính tham gia vào m ng máy tính u

gán m t a ch IP. Các máy tính khác nhau s có a ch
IP khác nhau
 Có 2 phiên b n a ch IP: 32 bit và 64 bit
 Tên mi n là tên t ng ng v i a ch IP
 Máy ch DNS là n i th c hi n nhi m v ánh x gi a tên
mi n và a ch IP
DNS
64.233.181.99
a ch IP

www.google.co
m
Tên mi n
6

CuuDuongThanCong.com

/>

CLIENT – SERVER – WEB HOST
 Client – Server là lo i ki n
trúc thông d ng cho nhi u
lo i ng d ng m ng, trong
ó:
• Server – máy ch : Là máy
tính chuyên cung c p
tài nguyên, d ch v cho
máy tính khác. M t máy ch
có th
c dùng cho m t

ho c nhi u m c ích khác nhau.
Ph i
c duy trì k t n i internet
24h/ ngày
• Client – máy tr m: Là máy tính khai thác các d ch v
cung c p b i máy ch . Vi c khai thác này th ng
hi n thông qua các ph n m m
CuuDuongThanCong.com

/>
c
c th c
7


THI T K WEBSITE

CuuDuongThanCong.com

/>

THI T K WEBSITE
Xác nh yêu
c u & phân tích
T ch c và phác
th o website

B o trì

Thi t k

Graphic

Tri n khai

Thi t k
HTML/ CSS/ Js

Ki m th
Vi t mã
l p trình
CuuDuongThanCong.com

9
/>

THI T K WEBSITE
 Xác nh yêu c u và phân tích:
• Là quá trình thu th p và phân tích chi ti t t t c các yêu
c u liên quan n website c n xây d ng
• M c tiêu là tr l i cho các câu h i sau:
• M c ích c a website là gì ?
•
i t ng s d ng website ?
• Website bao g m các n i dung gì, liên k t gi a các
n i dung ra sao ?
• Yêu c u v hình th c cho website là gì ?
• …
•
a ra sitemap (c u trúc website) cho toàn b website

10
CuuDuongThanCong.com

/>

THI T K WEBSITE
 Thi t k Graphic:
• Thi t k là quá trình xác nh rõ v m t n i dung và
hình th c cho website
• S n ph m c a quá trình thi t k Graphic:
• Thi t k d ng prototype (phác th o) giao di n cho
t ng trang web (mock-up)
• Thi t k m n giao di n t ng trang web (photoshop,
flash, firework, …)

11
CuuDuongThanCong.com

/>

THI T K WEBSITE
 Thi t k HTML/ CSS/ Js:
• ây là giai o n k t n i gi a giai o n thi t k và giai
o n vi t mã cho trang web
• S d ng mã HTML/ CSS/ Js …
chuy n giao di n
graphic c a web sang d ng chu n HTML
• Th c hi n úng chu n trong b n thi t k : kích th c
web, kho ng cách các thành ph n trên trang web, hình
nh, …

• Ch y trên trình duy t: không x y ra
hi n t ng xô l ch web

12
CuuDuongThanCong.com

/>

THI T K WEBSITE
 Vi t mã l p trình:
• S d ng các công c h tr và ngôn ng l p trình
t o ra website theo nh thi t k

13
CuuDuongThanCong.com

/>

THI T K WEBSITE
 Ki m th :
• Là quá trình ki m tra tính n ng, n i dung và giao di n
c a các trang Web d a trên các yêu c u ã
c phân
tích b c u tiên
• Vi c ki m th c n
c th c hi n trên nhi u trình duy t
web khác nhau, nhi u lo i m ng khác nhau
 Tri n khai và b o trì:
• Tri n khai là quá trình a website lên m t Web server
c th nào ó trên m ng

• B o trì là công vi c duy trì c p nh t n i dung/hình th c
c a trang web

14
CuuDuongThanCong.com

/>

THI T K WEBSITE
 Công c thi t k website:
• Là các ph n m m h tr vi c thi t k website (giao di n
hình nh, mã)
• Bao g m các tính n ng sau:
• So n th o HTML
• T o giao di n trang Web theo ki u WYSIWYG
• Ch y Website trên máy c c b
• Các công c thông d ng:
• Adobe Dreamweaver
• PHPEditor
• Microsoft FrontPage

15
CuuDuongThanCong.com

/>

C b nv

CuuDuongThanCong.com

/>

C

B N V HTML

 Là ngôn ng ánh d u siêu v n b n (HyperText Markup
Language)
 Là c s ho t ng c a web
 Trình duy t c và x lý mã HTML
b c c và nh d ng cho
các thành ph n (v n b n, hình nh, video, …) trên trang web
 Xây d ng trên các th d ng <>…</>:
• Th óng và th m
• Ví d : <html>…</html>

 T o và ch nh s a HTML b ng các công c so n th o v n b n:
• Notepad
• TextEdit

17
CuuDuongThanCong.com

/>

C

B N V HTML

 C u trúc th & thu c tính

• HTML s d ng th ho c t khóa ( t trong d u < và >)
• Th m kèm theo th óng: <body>…</body>
• Th óng:

Mã HTML

File BasicHTML.html trong
th m c dw01lessons

K t qu hi n th
18

CuuDuongThanCong.com

/>

C

B N V HTML

 C u trúc trang HTML:

Ph n mô t

Ph n n i dung

" /><html>
<head>
<title>tiêu

website</title>
</head>
<body>

</body>
</html>

My First Heading

My first paragraph.

• <!DOCTYPE html>: nh ngh a ki u tài li u, giúp trình duy t hi n
th web chính xác
• <html>…</html>: n i dung mô t trang web
• <body>…</body>: hi n th n i dung trang web
•

…

: th HTML, hi n th n i dung nh m t nhóm
•

…

: th HTML, hi n th n i dung nh m t o n v n b19n
CuuDuongThanCong.com

/>

C

B N V HTML

Vi t mã HTML trên trình
so n th o Notepad

Trang web hi n th trên
trình duy t firefox

20
CuuDuongThanCong.com

/>

C

B N V HTML

 Phân c p th trong HTML:
• Th HTML tuân theo th t phân c p th
• <html>các th khác n m d i</html>

CuuDuongThanCong.com

/>

NH NG THÀNH PH N C A HTML

CuuDuongThanCong.com

/>

NH NG THÀNH PH N C A HTML
 Nguyên t c chung khi làm vi c v i thành ph n HTML:
• S d ng nguyên t c th m , th óng
• N i dung hi n th n m gi a 2 th
• M t s thành ph n không có n i dung hi n th
• M t s thành ph n HTML b t bu c ph i có thu c tính
 Ví d :

T

N

Đ

<a href="default.htm">

N

T

dung
trên web
trang

</a>




23
CuuDuongThanCong.com

/>

NH NG THÀNH PH N C A HTML

 Thu c tính c a thành ph n HTML:
• Thu c tính cung c p thêm thông tin v m t y u t
• Thu c tính luôn luôn quy nh trong th b t u
• Thu c tính n trong tên / c p giá tr nh : name="value”

<a href="">This is a link</a>
 M t s thu c tính th

T

tính

ng g p c a thành ph n HTML:

Đ
Quy
quan

CSS)

id

C
quan

duy
CSS)

Style

Xác

các

title

Quy
tooltips)

class

hay

CuuDuongThanCong.com

tính cho thành
tính id cho thành
tính

(liên

CSS Inline cho thành

thông tin thêm cho thành
/>
(liên

(

THÀNH PH N LÀM VI C V I V N B N
 M t s thành ph n HTML làm vi c v i v n b n:
• HTML Headings
• HTML Paragraphs
• HTML Text Formatting
• HTML Links

25
CuuDuongThanCong.com

/>

THÀNH PH N LÀM VI C V I V N B N
 HTML Headings:
•
c s d ng
nh ngh a thành ph n tiêu
•
c nh ngh a t th

n

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

26
CuuDuongThanCong.com

/>