Tải bản đầy đủ

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
https://fb.com/tailieudientucntt


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


https://fb.com/tailieudientucntt


KHÁI NI M V WEBSITE

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt

c
c th c
7


THI T K WEBSITE

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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
https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


C b nv

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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 : …

 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

https://fb.com/tailieudientucntt


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: …
• Th óng:

Mã HTML

File BasicHTML.html trong
th m c dw01lessons

K t qu hi n th
18

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


C

B N V HTML

 C u trúc trang HTML:

Ph n mô t

Ph n n i dung

"http://www.w3.org/TR/html4/loose.dtd">


tiêu<br />website






My First Heading


My first paragraph.



• : nh ngh a ki u tài li u, giúp trình duy t hi n
th web chính xác
• …: n i dung mô t trang web
• …: 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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


C

B N V HTML

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

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


NH NG THÀNH PH N C A HTML

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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



Đ



N

T

dung
trên web
trang







23
CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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”

This is a link
 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
https://fb.com/tailieudientucntt

(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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×