Bài giảng môn thiết kế web pot

– Internet Explorer – Nestcape  Home page: là trang web đầu tiên trong web site  Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên mạng  Publish: Xuất bản trang

Trang 1

BÀI GI NG Ả

MÔN: THI T K WEB Ế Ế

Trang 3

 Internet : 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

(Transfer Control Protocol/Internet Protocol)

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

 Mô hình Client-Server: mô hình khách-chủ Server chứa tài nguyên dùng chung cho nhiều máy Client

 Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server…)

Trang 4

 Internet Service Provider (ISP): 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

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

Trang 6

 Web Browser : trình duyệt Web Dùng để truy xuất 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

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

 Publish: Xuất bản trang web

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

Trang 7

 URL(Uniform resource locator): 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à

– URL tương đối - 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 8

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

 Web 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

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

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

Trang 9

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

 HTML (HyperText markup Language) gồm các đoạn mã 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

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 hiểu và thông dịch được.

– Language: tập những quy luật để định dạng văn bản trên trang web.

 Trình soạn thảo trang web : 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 10

III TAG HTML

 Cú pháp:

<tagName ListProperties> Object </tagName>

– TagName : tên tag HTML, liền với dấu “< “,

không có khoảng trắng

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

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

Trang 12

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

<HTML>

<HEAD>

N i dung thông tin c a trang web ộ ủ

</HEAD>

<BODY>

N i dung hi n th trên trình duy t ộ ể ị ệ

</BODY>

</HTML>

Trang 13

V CÁC TAG HTML CƠ BẢN

1. <Title> : Hiển thị nội dung tiêu đề của trang web

trên thanh tiêu đề của trình duyệt

Cú pháp:

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

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

Trang 14

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

Cú pháp:

Nội dung của đoạn

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

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

Cú pháp:

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

Size=value color=#rrggbb>

Trang 15

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

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

trong phần <Body>

– Định dạng từng phần hoặc từng từ thì đặt tại vị

trí muốn định dạng

Cú pháp:

<FONT Face=”fontName1, fontName2,

fontName3” size=”value” Color=”rrggbb”>

Nội dung hiển thị

Trang 16

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

 Cú pháp:

<BODY>

Nội dung chính của trang web

</BODY>

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

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

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

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

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

– Background: load một hình làm nền cho trang

– LeftMargin: Canh lề trái

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

Trang 17

Welcome to HTML

</BODY>

</HTML>

Trang 18

8 <IMG> : Chè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

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

Cú pháp:

<BgSound src=”filenhac” Loop=value>

10 <EMBED>: Cho phép đưa âm thanh trực tiếp vào trang

WEB

Trang 19

Cú pháp:

<EMBED SRC="URL" width=value height=value >

Ví dụ:

autostart="true" loop="true" hidden="false">

</embed>

Trang 20

10. <Marquee></Marquee> : Điều khiển đối tượng

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

Cú pháp:

<Marquee direction=up >Object</Marquee>

11. <! Ghi chú >: không hiển thị trong trang

Trang 21

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

Cú pháp:

 Nội dung chữ nghiêng

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

Cú pháp:

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

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

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

Cú pháp

<BIG> Nội dung chữ to </BIG>

 Nội dung chữ nhỏ 

Trang 22

16. Tag và :Đư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 cao

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

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

Cú pháp:

<STRIKE>

Nội dung văn bản bị gạch ngang

</STRIKE>

Trang 23

A = A + 1

</CODE>

Trang 24

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

Trang 25

Cú pháp:

Nội dung khối văn bản nhấn mạnh

</BLOCKQUOTE>

22. <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

Trang 27

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

Trang 28

Ví dụ:

<HTML>

<HEAD><TITLE> Learning HTML</TITLE></HEAD>

<BODY>

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

Trang 30

A = A + 1

</CODE>

Trang 32

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

thanh công cụ.

size

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

như User defined,Vietnamese….

Trang 35

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

– Use Current: chọn trang hiện tại để load lên mỗi lần khởi động IE – Use Default: địa chỉ trang Web mặc định mỗi khi mở trình duyệt

Ví dụ

Khi mở IE thì tự động hiển thị trang Web Yahoo thì trong ô Address nhập: http://yahoo.com , 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

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

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

Trang 36

 Tab Advance(Hì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 web

– Mà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chọn File

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

chỉnh

Trang 37

SIÊU LIÊN K T-HÌNH NH Ế Ả

CH ƯƠ NG II

Trang 38

I SIÊU LIÊN K T SIÊU LIÊN K T Ế Ế

1. GI I THI U SIÊU LIÊN K T GI I THI U SIÊU LIÊN K T Ớ Ớ Ệ Ệ Ế Ế

Siêu liên k t cho phép ng ế ườ i truy c p có th duy t t ậ ể ệ ừ

trang web này đ n trang web khác M t liên k t g m 3 ế ộ ế ồ

ph n: ầ

 Ngu n Ngu n ồ ồ : ch a n i dung hi n th khi ng: ch a n i dung hi n th khi ngứ ộứ ộ ểể ịị ườười dùng truy c p i dùng truy c p ậậ

đ n, có th là m t trang web khác, m t đo n film, m t ế ể ộ ộ ạ ộ

hình nh ho c m t h p tho i đ g i mail… ả ặ ộ ộ ạ ể ữ

 Nhãn: có th là dòng văn b n ho c hình nh đ ng : có th là dòng văn b n ho c hình nh đ ng ể ể ả ả ặ ặ ả ả ể ể ườ ườ i i

dùng click vào khi mu n truy c p đ n liên k t, n u ố ậ ế ế ế

nhãn là văn b n thì th ả ườ ng đ ượ ạ c g ch d ướ i

 Đích đ n đ n ế ế (target): xác đ nh v trí đ ngu n hi n th (target): xác đ nh v trí đ ngu n hi n th ịị ịị ểể ồồ ểể ịị

Trang 39

2. CÁC LO I LIÊN K T CÁC LO I LIÊN K T Ạ Ạ Ế Ế

 Internal Hyperlink:(Liên k t trong) là các liên k t v i các :(Liên k t trong) là các liên k t v i các ế ế ế ớ ế ớ

ph n trong cùng m t tài li u ho c liên k t các trang ầ ộ ệ ặ ế

trong cùng m t web site ộ

 External Hyperlink (Liên k t ngoài) là các liên k t v i các (Liên k t ngoài) là các liên k t v i các ế ế ế ớ ế ớ

trang trên web site khác.

3. T O SIÊU LIÊN K T T O SIÊU LIÊN K T Ạ Ạ Ế Ế

 Cú pháp:

<A HREF=”URL”> Nhãn </A>

URL: Đ a ch c a trang liên k t ị ỉ ủ ế

Nhãn: Có th là dòng text ho c hình nh ho c m t button ể ặ ả ặ ộ

Trang 40

 Dùng URL t URL t ươ ươ ng đ i ng đ i ố ố đ liên k t đ n các trang trong cùng đ liên k t đ n các trang trong cùng ểể ế ếế ế

Trang 41

 Dùng URL tuy t đ i URL tuy t đ i ệ ố ệ ố đ liên k t đ n các trang trong đ liên k t đ n các trang trong ểể ế ếế ế

<A href="http://www.yahoo.com">Trang Yahoo</A>

</body>

</html>

Trang 42

4 LIÊN K T Đ N CÁC PH N TRONG CÙNG 1 TRANG LIÊN K T Đ N CÁC PH N TRONG CÙNG 1 TRANG Ế Ế Ế Ế Ầ Ầ

N u n i dung c a trang quá dài thì nên t o các ế ộ ủ ạ

Bookmark đ khi xem, ngể ười dùng click vào

bookmark đ nh y đ n m t ph n c th nào đó ể ả ế ộ ầ ụ ể

bookmark đ nh y đ n m t ph n c th nào đó ể ả ế ộ ầ ụ ểtrên chính trang đó: g m 2 bồ ước

trên chính trang đó: g m 2 bồ ước

 T o BookMark T o BookMark ạ ạ :

<A name=”tên Bookmark”> Tiêu đ </A> N i dung ph n ề ộ ầ

văn b n ả

 T o liên k t đ n Bookmark T o liên k t đ n Bookmark ạ ạ ế ế ế ế :

<A Href =”#tên Bookmark”>Nhãn c a liên k t</A> ủ ế

Trang 43

Ví dụ

<HTML>

<HEAD><TITLE> Using htm links</TITLE> </HEAD>

<BODY>

<A HREF = '#Internet'>Internet</A>

<A HREF ='#HTML'>Introduction to HTML</A>

<A name = 'Internet'>Internet</A>

<A name = 'HTML'>Introduction to HTML</A>

</BODY>

</HTML>

Trang 44

5 LIÊN K T V I BOOKMARK C A TRANG KHÁC LIÊN K T V I BOOKMARK C A TRANG KHÁC Ế Ế Ớ Ớ Ủ Ủ

<A HREF = “C:\Lienket.html#Internet”>Internet</A>

<A HREF = “C:\Lienket.html#HTML”>Introduction to

HTML</A>

</BODY>

</HTML>

Trang 45

6. LIÊN K T Đ N H P TH LIÊN K T Đ N H P TH Ế Ế Ế Ế Ộ Ộ Ư Ư

Cú pháp:

<A href=”mailto:đ a ch Email”>Nhãn</A> ị ỉ

Trang 46

II HÌNH NH TRÊN TRANG HÌNH NH TRÊN TRANG Ả Ả

WEB

1. Các lo i nh : Các lo i nh : ạ ả ạ ả

 Ả Ả nh Gif nh Gif (Graphics Interchange Format): đ (Graphics Interchange Format): đượ ử ụượ ử ục s d ng c s d ng

ph bi n nh t trong các tài li u HTML, d chuy n t i, ổ ế ấ ệ ễ ể ả

ngay c các k t n i s d ng MODEM t c đ ch m, ả ế ố ử ụ ố ộ ậ

h tr 256 màu GIF Các file GIF đ ổ ợ ượ c đ nh d ng ị ạ

không ph thu c ph n n n ụ ộ ầ ề

 Ả Ả nh JPEG nh JPEG (Joint PhotoGraphic Expert Group) có ph n (Joint PhotoGraphic Expert Group) có ph n ầầ

m r ng JPG, là lo i nh nén m t thông tin, nghĩa là ở ộ ạ ả ấ

nh sau khi b nén không gi ng nh nh g c Tuy

ả nh sau khi b nén không gi ng nh nh g c Tuy ị ố ư ả ố

nhiên, trong quá trình phát l i thì nh cũng rõ g n nh ạ ả ầ ư

nh g c JPEG h tr h n 16 tri u màu và th ng

ả nh g c JPEG h tr h n 16 tri u màu và th ố ỗ ợ ơ ệ ườ ng

đ ượ ử ụ c s d ng cho các nh có màu th c ả ự

 Ả Ả nh PNG nh PNG (Portable Network Graphics) nén không m t (Portable Network Graphics) nén không m t ấấ

d li u ữ ệ

Trang 47

WEB

2. Chèn hình nh Chèn hình nh ả ả

Cú pháp:

<IMG Src=URL >

URL: th th ườ ườ ng s d ng đ a ch t ng s d ng đ a ch t ử ụ ử ụ ị ị ỉ ươ ỉ ươ ng đ i ng đ i ố ố

– N u hình ch a trong th m c N u hình ch a trong th m c ế ế ứ ứ ư ụ ư ụ image và t p tin và t p tin ậậ

Trang 48

Trang 49

WEB

3. Các thu c tính c a nh: Các thu c tính c a nh: ộ ộ ủ ả ủ ả

Ví dụ :hình n m bên trái văn b n :hình n m bên trái văn b n ằ ằ ả ả

Trang 50

WEB

Canh l khi dàn văn b n xung quanh m t nh s tác đ ng ề ả ộ ả ẽ ộ

đ n t t c các văn b n sau đó n u không chèn vào m t dòng ế ấ ả ả ế ộ

k đ c bi t Thu c tính CLEAR trong tag BR làm cho văn ẽ ặ ệ ộ

b n không b t đ u n u l c th không b xóa đi (nghĩa là ả ắ ầ ế ề ụ ể ị

Trang 51

WEB

N u không mu n văn b n dàn xung quanh l trái c a ế ố ả ề ủ

nh thì ta có th thêm kho ng tr ng xung quanh nh

ả nh thì ta có th thêm kho ng tr ng xung quanh nh ể ả ắ ả

 Cú pháp:

<IMG SRC=URL HSPACE=n VSPACE=m>

– HSPACE=n: Kho ng tr ng đ Kho ng tr ng đ ả ả ắ ắ ượ ượ c tính b ng pixel s thêm vào c c tính b ng pixel s thêm vào c ằ ằ ẽ ẽ ả ả

– VSPACE=m: Kho ng tr ng đ Kho ng tr ng đ ả ả ắ ắ ượ ượ c tính b ng pixel s thêm vào c c tính b ng pixel s thêm vào c ằ ằ ẽ ẽ ả ả

Trang 52

<IMG SRC=URL ALIGN= “Direction”>Văn b n mu n ả ố

canh l so v i nh ề ớ ả

– Direction: g m các giá tr : top, bottom, middle, texttop Direction: g m các giá tr : top, bottom, middle, texttop ồ ồ ị ị

Định dạng
Số trang	57
Dung lượng	789,5 KB