Bài giảng Thiết kế Web: Chương 1 - Từ Thị Xuân Hiền

Chương 1 của bài giảng Thiết kế Web giới thiệu tổng quan về Web. Chương này trình bày những nội dung sau: Các khái niệm cơ bản, giới thiệu khái quát về Web, tag HTML, cấu trúc cơ bản của trang Web, các tag HTML cơ bản,...và một số nội dung khác.

Trang 2

Gi i thi u môn h c ớ ệ ọ

 Môn h c cung c p các k năng c b n thi t ọ ấ ỹ ơ ả ế

k web tĩnh và x lý d li u t i client.ế ử ữ ệ ạ

Trang 5

GI I THI U V WEB Ớ Ệ Ề

Trang 6

 Internet : m ng máy tính toàn c u, các máy truy n : m ng máy tính toàn c u, các máy truy n ạạ ầầ ềềthông v i nhau b ng giao th c chung là TCP/IP ớ ằ ứ

thông v i nhau b ng giao th c chung là TCP/IP ớ ằ ứ

(Transfer Control Protocol/Internet Protocol)

 Intranet : là m ng c c b không n i vào Internet, : là m ng c c b không n i vào Internet, ạạ ụụ ộộ ốốtruy n thông b ng giao th c TCP/IP. ề ằ ứ

truy n thông b ng giao th c TCP/IP. ề ằ ứ

 Mô hình ClientServer: mô hình kháchch Server : mô hình kháchch Server ủủ

Trang 7

 Internet Service Provider (ISP): Nhà cung c p d ch Nhà cung c p d ch ấấ ịị

v Internet cho khách hàng. M i ISP có nhi u ụ ỗ ề

khách hàng và có th có nhi u lo i d ch v Internet ể ề ạ ị ụ

khác nhau

 Internet Protocol : tiêu chu n chi ph i vi c : tiêu chu n chi ph i vi c ẩẩ ốố ệệ

chuy n t i thông tin gi a các máy tính trong m ngể ả ữ ạ

 World Wide Web (WWW): d ch v tra c u thông d ch v tra c u thông ịị ụụ ứứ

tin Internet. D ch v này đ a ra cách truy xu t các ị ụ ư ấ

tài li u c a các máy ph c v d dàng thông qua ệ ủ ụ ụ ễ

các giao ti p đ h a. Đ s d ng d ch v này máy ế ồ ọ ể ử ụ ị ụ

Client c n có m t chầ ộ ương trình g i là Web ọ

Browser

I CÁC KHÁI NI M C B N CÁC KHÁI NI M C B N Ệ Ệ Ơ Ả Ơ Ả

Trang 9

 Web Browser : trình duy t Web. Dùng đ truy xu t trình duy t Web. Dùng đ truy xu t ệệ ểể ấấcác tài li u trên các Web Server. ệ

các tài li u trên các Web Server. ệ

– Internet Explorer

– Nestcape

 Home page: là trang web đ u tiên trong web site là trang web đ u tiên trong web siteầầ

 Hosting provider: là công ty ho c t ch c đ a các : là công ty ho c t ch c đ a các ặ ổặ ổ ứứ ưưtrang c a chúng ta lên m ngủ ạ

trang c a chúng ta lên m ngủ ạ

 Publish: Xu t b n trang web: Xu t b n trang webấ ảấ ả

 Web server là m t chlà m t chộộ ươương trình đáp ng yêu c u ng trình đáp ng yêu c u ứứ ầầtruy xu t tài nguyênấ

truy xu t tài nguyênấ

Trang 10

 Webserver là d ng ph n m m cài trên máy Webserver là d ng ph n m m cài trên máy ạạ ầầ ềềserver đ ph c v qu n lý các website . Ví ể ụ ụ ả

server đ ph c v qu n lý các website . Ví ể ụ ụ ả

d : apache, iis .tích h p các giao di n l p ụ ợ ệ ậ

trình b ng m t ngôn ng c th ằ ộ ữ ụ ể

 Web là ng d ng (trên m ng clientserver) Web là ng d ng (trên m ng clientserver) ứứ ụụ ạạ

được chia s trên m ng internetẽ ạ

Trang 11

 URL(Unioform resource locator): m t đ a ch ch m t đ a ch ch ộ ịộ ị ỉỉ ỉỉ

đ n m t file c th trong ngu n tài nguyên ế ộ ụ ể ồ

m ng. ạ

Ví d : 207.46.130.149 đ ụ ượ c bi u di n trong URL là ể ễ

www.microsoft.com

– URL tuy t đ i URL tuy t đ i ệ ố ệ ố – là đ a ch Internet đ y đ c a m t – là đ a ch Internet đ y đ c a m t ị ị ỉ ỉ ầ ầ ủ ủ ủ ủ ộ ộ

trang ho c file, bao g m giao th c, v trí m ng, đ ặ ồ ứ ị ạ ườ ng

d n tu ch n và tên file. ẫ ỳ ọ

Ví d , http:// ụ

Ví d , http:// ụ www.microsoft.com/ms.htm.

– URL t URL t ươ ươ ng đ i ng đ i ố ố mô t ng n g n đ a ch t p tin k t mô t ng n g n đ a ch t p tin k t ả ả ắ ắ ọ ọ ị ị ỉ ậ ỉ ậ ế ế

n i có cùng đ ố ườ ng d n v i t p tin hi n hành, URL ẫ ớ ậ ệ

t ươ ng đ i đ n gi n bao g m tên và ph n m r ng ố ơ ả ồ ầ ở ộ

c a t p tin ủ ậ

Trang 12

II GI I THI U KHÁI QUÁT V WEBGI I THI U KHÁI QUÁT V WEBỚ Ớ Ệ Ệ Ề Ề

 Web là m t ng d ng ch y trên m ng Client là m t ng d ng ch y trên m ng Clientộ ứộ ứ ụụ ạạ ạạ

Server, khách và ch web liên l c nhau b ng giao ủ ạ ằ

th c http (HyperText Transfer Protocol). Các web ứ

server cung c p thông tin đấ ược đ nh d ng theo ị ạ

ngôn ng HTMLữ

 Web Page: là m t file văn b n ch a nh ng tag là m t file văn b n ch a nh ng tag ộộ ảả ứứ ữữ

HTML ho c nh ng đ an mã đ c bi t mà trình ặ ữ ọ ặ ệ

duy t web có th hi u và thông d ch đệ ể ể ị ược, file

đượ ưc l u v i ph n m r ng là .html ho c htm. ớ ầ ở ộ ặ

 Website: M t t p h p nhi u web page, th hi n : M t t p h p nhi u web page, th hi n ộ ậộ ậ ợợ ềề ể ệể ệ

thông tin c a m t t ch c ho c m t ch đ nào đóủ ộ ổ ứ ặ ộ ủ ề

Trang 13

II GI I THI U KHÁI QUÁT V WEBGI I THI U KHÁI QUÁT V WEBỚ Ớ Ệ Ệ Ề Ề

 HTML (HyperText makup Language) g m các đo n mã g m các đo n mã ồ ồ ạ ạ chu n đ ẩ ượ c quy ướ c đ thi t k Web và đ ể ế ế ượ c hi n th ể ị

chu n đ ẩ ượ c quy ướ c đ thi t k Web và đ ể ế ế ượ c hi n th ể ị

b i trình duy t Web ở ệ

– Hypertext (Hypertext link) là m t t hay m t c m là m t t hay m t c m ộ ừ ộ ừ ộ ụ ộ ụ

t đ c bi t dùng đ t o liên k t gi a các trang web ừ ặ ệ ể ạ ế ữ

t đ c bi t dùng đ t o liên k t gi a các trang web ừ ặ ệ ể ạ ế ữ – Mark up: là cách đ nh d ng văn b n đ trình duy t : là cách đ nh d ng văn b n đ trình duy t ị ị ạ ạ ả ả ể ể ệ ệ

 Trình so n so n ạ ạ th o th o ả ả trang web : Có th so n th o web trên Có th so n th o web trên ể ạ ể ạ ả ả

b t k trình so n th o văn b n nào: Notepad, ấ ỳ ạ ả ả

FrontPage ho c Dreamweaver ặ

Trang 14

– Object :đ i t :đ i tố ượố ượng hi n th trên trang Webng hi n th trên trang Webểể ịị

– ListPropeties: danh sách thu c tính c a Tag: danh sách thu c tính c a Tagộộ ủủ

Trang 16

IV C U TRÚC C B N C A TRANG WEBC U TRÚC C B N C A TRANG WEBẤ Ấ Ơ Ả Ơ Ả Ủ Ủ

Trang 17

<TITLE> N i dung tiêu đ </TITLE>ộ ề

1 <Hn>: T o header, g m 6 c p header, đT o header, g m 6 c p header, đạạ ồồ ấấ ượược đ t c đ t ặặ

Trang 18

3 : Dùng đ ng t đo n và b t đ u đo n m iDùng đ ng t đo n và b t đ u đo n m iểể ắắ ạạ ắ ầắ ầ ạạ ớớ

4 : Ng t dòng t i v trí c a tag.Ng t dòng t i v trí c a tag.ắắ ạ ịạ ị ủủ

5 <HR>: Kẻ ườẻ ườ đ đ ng ngang trangng ngang trang

Cú pháp:

<HR Align=”directtion” Width= “Value”

Size=value color=#rrggbb>

Trang 19

6 : đ nh d ng font ch đ nh d ng font ch ị ị ạ ạ ữ ữ

– Đ nh d ng Font ch cho c tài li u thì đ t tag Đ nh d ng Font ch cho c tài li u thì đ t tag ịị ạạ ữữ ảả ệệ ặặ

trong ph n <Body>ầ

trong ph n <Body>ầ– Đ nh d ng t ng ph n ho c t ng t thì đ t t i Đ nh d ng t ng ph n ho c t ng t thì đ t t i ịị ạạ ừừ ầầ ặ ừặ ừ ừừ ặ ạặ ạ

Trang 20

7 <BODY > : Ch a n i dung c a trang webCh a n i dung c a trang webứứ ộộ ủủ

 Các thu c tính c a <Body>Các thu c tính c a <Body>ộ ộ ủ ủ

– BgColor: thi t l p màu n n c a trangBgColor: thi t l p màu n n c a trangế ậế ậ ềề ủủ

– Text: thi t l p màu chText: thi t l p màu chế ậế ậ ữữ

– Link: màu c a siêu liên k tLink: màu c a siêu liên k tủủ ếế

– Vlink: màu c a siêu liên k t đã xem quaVlink: màu c a siêu liên k t đã xem quaủủ ếế

– Background: load m t hình làm n n cho trang Background: load m t hình làm n n cho trang ộộ ềề– LeftMargin: Canh l trái LeftMargin: Canh l trái ềề

– TopMargin: Canh l trên c a trangTopMargin: Canh l trên c a trangềề ủủ

Trang 22

8 <IMG> : C hèn m t hình nh vào trang Web hèn m t hình nh vào trang Web ộ ộ ả ả

Cú pháp :

<Img src=”URL of Image” alt=”Text” width=value

height=value border=value>

9 <BgSound> : Chèn m t âm thanh vào trangWeb. Âm : Chèn m t âm thanh vào trangWeb. Âm ộ ộ

thanh này s đ ẽ ượ c phát m i khi ng ỗ ườ ử ụ i s d ng m trang ở

Trang 24

10 <Marquee></Marquee> : Đi u khi n đ i Đi u khi n đ i ềề ểể ốố

tượng ch y m t cách t đ ng trên trang Webạ ộ ự ộ

Trang 25

13 Tag : Đ nh d ng ch nghiêngĐ nh d ng ch nghiêngịị ạạ ữữ

Cú pháp:

N i dung ch nghiêng N i dung ch nghiêng ộ ộ ữ ữ

13 Tag : G ch chân văn b nG ch chân văn b nạạ ảả

Cú pháp:

N i dung ch g ch chânN i dung ch g ch chânộộ ữ ạữ ạ

13 Tag <BIG> và : Ch nh c ch to Ch nh c ch to ỉỉ ởở ữữ

ho c nh h n c ch xung quanhặ ỏ ơ ở ữ

Cú pháp

N i dung ch nhN i dung ch nhộộ ữữ ỏỏ

Trang 26

16 Tag và :Đ a ch lên cao ho c Đ a ch lên cao ho c ưư ữữ ặặ

xu ng th p so v i văn b n bình thố ấ ớ ả ường

Cú pháp:

N i dung ch d a lên caoN i dung ch d a lên caoộộ ữ ưữ ư

N i dung ch đ a xu ng th pN i dung ch đ a xu ng th pộộ ữ ưữ ư ốố ấấ

17 <STRIKE>: G ch ngang văn b nG ch ngang văn b nạạ ảả

Trang 27

18 <CODE>…</CODE>:

Dùng đ nh p m t dòng mã có đ nh d ng ký t riêng. ể ậ ộ ị ạ ự

Dòng mã này không đ ượ c th c hi n mà đ ự ệ ượ c hi n th ể ị

d ướ ạ i d ng văn b n bình th ả ườ ng

A = A + 1

</CODE>

Trang 28

19 : Văn b n đ: Văn b n đảả ượược nh n m nh (gi ng tag c nh n m nh (gi ng tag ấấ ạạ ốố

)

Cú pháp:

Văn b n đả ược nh n m nhấ ạ

20 : Đ nh d ng ch đ m (gi ng ): Đ nh d ng ch đ m (gi ng )ịị ạạ ữ ậữ ậ ốố

Cú pháp:

Văn b n đả ược nh n m nhấ ạ

21 <BLOCKQUOTE>:

Dùng phân cách m t kh i văn b n đ nh n ộ ố ả ể ấ

m nh, đo n văn b n này đạ ạ ả ược tách thành m t ộ

paragraph riêng, thêm kho ng tr ng trên và dả ắ ưới

đo n đ ng th i th t vào so v i l trái (tạ ồ ờ ụ ớ ề ương

đương ch c năng c a phím tab)ứ ủ

Trang 29

22 <PRE>: Gi nguyên các đ nh d ng nh : ng t <PRE>: Gi nguyên các đ nh d ng nh : ng t ữữ ịị ạạ ưư ắắ

dòng, kho ng cách, thích h p v i vi c t o ả ợ ớ ệ ạ

b ngả

Cú pháp:

<PRE>

N i dung văn b n c n đ nh d ng tr ộ ả ầ ị ạ ứơ c v i t t c ớ ấ ả

đ nh d ng kho ng cách, xu ng dòng và ng t hàng ị ạ ả ố ắ

</PRE>

Trang 30

Tr ườ ng Đ i H c Công Nghi p TP.HCM ạ ọ ệ

Trang 31

23 <DIV> : Chia văn b n thành các kh i, Chia văn b n thành các kh i, ảả ốố

N i dung c a kh i b t đ u t m t dòng m iộ ủ ố ắ ầ ừ ộ ớ

</DIV>

Trang 32

Tr ườ ng Đ i H c Công Nghi p TP.HCM ạ ọ ệ

Trang 33

N i dung c a kh i trong 1 dòng ộ ủ ố

With HTML

</BODY>

</HTML>

Trang 34

</CODE>

Trang 36

VI.CÁC THAO TÁC TRONG C A S TRÌNH DUY T CÁC THAO TÁC TRONG C A S TRÌNH DUY TỬ Ử Ổ Ổ Ệ Ệ

– Cách load l i trang Web: Click bi u tCách load l i trang Web: Click bi u tạạ ể ượể ượng Refresh (F5) ng Refresh (F5)

– Ch nh size ch hi n th trên trang: Ch n Menu View>Text Ch nh size ch hi n th trên trang: Ch n Menu View>Text ỉỉ ữ ểữ ể ịị ọọ

size

– Ch nh l i font ch : Ch n Menu View>EnCodingCh nh l i font ch : Ch n Menu View>EnCodingỉỉ ạạ ữữ ọọ

– N u trang Web không hi n th đN u trang Web không hi n th đếế ểể ị ượị ược Font ti ng Vi t: c Font ti ng Vi t: ếế ệệ

• Ch n menu Tool ch n Internet Options>Ch n Tab Ch n menu Tool ch n Internet Options>Ch n Tab ọọ ọọ ọọ

Fonts  ch n Font ti ng Vi t ch n Font ti ng Vi t ọ ọ ế ế ệ ệ

• Ch n trang web m c đ nh khi m trình duy t Ch n trang web m c đ nh khi m trình duy t ọọ ặặ ịị ởở ệệ

Trang 39

 Tab General(Hình 1): thi t l p các tùy ch n cho trình thi t l p các tùy ch n cho trình ế ậ ế ậ ọ ọ

Khi m IE thì t đ ng hi n th trang Web Yahoo thì trong ô ở ự ộ ể ị

Address nh p: ậ

Address nh p: ậ http://yahoo.com , n u ch n Use Blank thì hi n , n u ch n Use Blank thì hi n ế ế ọ ọ ể ể

th trang tr ng ị ắ

 History: l u l i các trang web đã duy t qua t i máy Client l u l i các trang web đã duy t qua t i máy Client ư ạ ư ạ ệ ệ ạ ạ

và thông tin đăng nh p c a user hi n hành…N u kh ng ậ ủ ệ ế ộ

mu n l u l i: Ch n Delete Cookies và Delete Files ố ư ạ ọ

 Days to keep pages in history: thi t l p kho ng th i gian : thi t l p kho ng th i gian ế ậ ế ậ ả ả ờ ờ

l u tr trang trong đ i t ư ữ ố ượ ng History

Trang 40

 Tab Advance(Hình 2): có th ch n các tùy ch n khác nh : 2): có th ch n các tùy ch n khác nh : ể ể ọ ọ ọ ọ ư ư

– Ngăn ch n không cho t i hình xu ng trang webNgăn ch n không cho t i hình xu ng trang webặặ ảả ốố

– Màu liên k t, cách th hi n liên k t trên trangMàu liên k t, cách th hi n liên k t trên trangếế ể ệể ệ ếế

 Hi u ch nh trang Web: View source>hi u ch nh Hi u ch nh trang Web: View source>hi u ch nh ệ ệ ỉ ỉ ệ ệ ỉ ỉ  ch n ch n ọ ọ

File  Save đ l u l i Save đ l u l i ể ư ạ ể ư ạ  F5 đ c p nh t l i n i dung v a F5 đ c p nh t l i n i dung v a ể ậ ể ậ ậ ạ ộ ậ ạ ộ ừ ừ

hi u ch nh ệ ỉ

Định dạng
Số trang	40
Dung lượng	0,9 MB