BÀI GIẢNG THIẾT KẾ WEB TĨNH

CÁC KHÁI NIỆM CƠ BẢN... Dị h ụ này đưa ra cách truy uất các tài liệu ủa các máy phụ ụ dễ dàng thông qua các giao tiếp đồ họa.. Dùng để truy uất các tài liệu trên các Web Server.. Các web

BÀI GIẢNG

THIẾT KẾ WEB TĨNH

(“Ố BUỔI: LT- 12 TH

32 tiết LT – 32 tiết TH)

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

 Môn họ cung ấp các kỹ ă g ơ ả thiết kế web tĩ h và ử lý dữ liệu tại client

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

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

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

PHẦN : NGÔN NGỮ HTML

( HyperText Markup Language )

CHƯƠNG I GIỚI THIỆU VỀ WEB

 Internet : ạ g máy tính toàn ầu, các máy t u ề

thông ới nhau ằ g giao thứ chung là TCP/IP

(Transfer Control Protocol/Internet Protocol)

 Intranet : là ạ g ụ ộ không ối vào Internet,

t u ề thông ằ g giao thứ TCP/IP

 Mô hình Client-Server: mô hình khách- hủ Server

hứa tài nguyên dùng chung cho hiều máy Client

 Internet Server: là các Server cung ấp các dị h ụ

I te età We à“e e ,àMailà“e e ,àFTPà“e e …

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

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

ụ Internet cho khách hàng Mỗi ISP có hiều khách hàng và có thể có hiều loại dị h ụ Internet khác

nhau

 Internet Protocol : tiêu huẩ chi phối iệ hu ể tải thông tin giữa các máy tính trong ạ g

 World Wide Web (WWW): dị h ụ tra ứu thông tin

Internet Dị h ụ này đưa ra cách truy uất các tài liệu ủa các máy phụ ụ dễ dàng thông qua các

giao tiếp đồ họa Để sử dụ g dị h ụ này máy Client

ầ có ột hươ g trình gọi là Web Browser

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

 Web Browser : trình du ệt Web Dùng để truy uất

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

– Internet Explorer

– Fi efo ,àOpe a…

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

 Hosting provider: là công ty hoặ tổ hứ đưa các

trang ủa chúng ta lên ạ g

 Publish: Xuất ả trang web

 Web server là ột hươ g trình đ p ứ g yêu ầu truy uất tài nguyên

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

 We se e àl àdạ gàphầ à ề à iàt ê à à

se e àđểàphụ à ụà uả àl à à e siteà.àV àdụà:àapa he,àiisà.t hàhợpà àgiaoàdiệ àlậpàt hà

ằ gà ộtà g à gữà ụàthể

 We àl àứ gàdụ gà t ê à ạ gà lie t-server)

đượ à hiaàsẽàt ê à ạ gài te et

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

đế ột file ụ thể trong guồ tài nguyên ạ g

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

www.microsoft.com

– URL tuyệt đối – là địa hỉ Internet đầ đủ ủa ột

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

dẫ tu họ và tên file

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

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

có cùng đườ g dẫ ới tập tin hiệ hành, URL tươ g đối đơ giả bao gồ tên và phầ ở ộ g ủa tập tin

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

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

 Web là ột ứ g dụ g hạ trên ạ g Client-Server,

khách và hủ web liên lạ nhau ằ g giao thứ http (HyperText Transfer Protocol) Các web server cung

ấp thông tin đượ đị h dạ g theo ngôn gữ HTML

 Web Page: là ột file ă ả hứa hữ g tag

HTML hoặ hữ g đọa mã đặ iệt mà trình du ệt web có thể hiểu và thông dị h đượ , file đượ lưu

ới phầ ở ộ g là html hoặ htm

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

thông tin ủa ột tổ hứ hoặ ột hủ đề nào đ

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

 HTML (HyperText makup Language) gồ các đoạ mã

huẩ đượ quy ướ để thiết kế Web và đượ hiể thị ởi trình du ệt Web

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

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

– Mark up: là cách đị h dạ g ă ả để trình du ệt

hiểu và thông dị h đượ

– Language: tập hữ g quy luật để đị h dạ g ă ả

trên trang web

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

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

FrontPage hoặ Dreamweaver

III TAG HTML

 Cú pháp:

<tagName ListProperties> Object </tagName>

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

không có khoả g t ắ g

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

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

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

V CÁC TAG HTML CƠ BẢN

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

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

Cú pháp:

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

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

trong phầ BODY

Cú pháp

<Hn ALIGN= Dire tio >

Nội dung ủa Header

</Hn>

3 <P> : Dùng để gắt đoạ và ắt đầu đoạ ới

Cú pháp:

<P ALIGN = Dire tio >

Nội dung ủa đoạ

</P>

4 <BR>: Ngắt dòng tại ị trí ủa tag

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

Cú pháp:

<HRàálig = directtion àWidth=à Value à Size=value color=#rrggbb>

6 <FONT>: đị h dạ g font hữ

– Đị h dạ g Font hữ cho ả tài liệu thì đặt tag

<Font> trong phầ <Body>

– Đị h dạ g từ g phầ hoặ từ g từ thì đặt tại ị

trí uố đị h dạ g

Cú pháp:

<FONT Fa e= fo tNa e , fo tNa e ,

fo tNa e size= alue Color= rrggbb >

Nội du g hiể thị

</FONT>

7 <BODY > : Chứaà ộiàdu gà ủaàt a gà e

 Cú pháp:

<BODY>

Nộiàdu gà h hà ủaàt a gà e

</BODY>

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

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

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

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

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

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

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

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

Cú pháp:

<Img src = URL of I age alt= Te t idth= alue

height=value border=value>

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

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

Cú pháp:

<BgSound src = filenhac Loop= alue>

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

WEB

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

hạ ột cách tự độ g trên trang Web

13 Tag <I>: Đị h dạ g hữ nghiêng

Cú pháp:

<I> Nội dung chữ nghiêng</I>

14 Tag <U>: Gạ h chân ă ả

Cú pháp:

<U> Nội dung hữ gạ h chân</U>

15 Tag <BIG> và <SMALL>: Chỉ h ở hữ to hoặ

hỏ hơ ở hữ xung quanh

Cú pháp

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

<SMALL> Nội dung hữ hỏ </SMALL>

16 Tag <SUP> và <SUB> :Đưa hữ lên cao hoặ

uố g thấp so ới ă ả bình thườ g

Cú pháp:

<SUP> Nội dung hữ dưa lên cao </SUP>

<SUB> Nội dung hữ đưa uố g thấp </SUB>

18 <CODE>…</CODE>:

Dùng để hập ột dòng mã có đị h dạ g ký tự riêng Dòng mã này không đượ thự hiệ mà đượ hiể thị

A = A + 1

</CODE>

19 <EM>: Vă ả đượ hấ ạ h (giố g tag <I>)

ă g ủa phím tab)

Cú pháp:

<BLOCKQUOTE>

Nội dung khối ă ả hấ ạ h

</BLOCKQUOTE>

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

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

</PRE>

</BODY>

</HTML>

23 <DIV> <SPAN>: Chia ă ả thành các khối, có

Ví dụ:

<HTML>

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

<BODY>

<DIV align = center>

<FONT size = 4 color = hotpink face = Arial>

<“PáNà“TYLEà=à FONT-SIZE:25; Color:BLUE >

Creating Web Pages

</SPAN><font size=6 color=red > With HTML</font>

</BODY>

</HTML>

A = A + 1

</CODE>

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

– Cách load lại trang Web: Click iểu tượ g Refresh (F5) trên

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

– Chỉ h lại font hữ: Chọ Menu View->EnCoding

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

• Chọ menu Tool họ Internet Options->Chọ Tab

hư User defined,Vietnamese…

• Chọ trang web ặ đị h khi ở trình du ệt

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

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

Ví dụ

Khi ở IE thì tự độ g hiể thị trang Web Yahoo thì trong ô Address hập: http://yahoo.com , ếu họ Use Blank thì hiể

thị trang t ắ g

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

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

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

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

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

 Tab Advance(Hình 2): có thể họ các tùy họ khác hư: – Ngă hặ không cho tải hình uố g trang web

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

 Hiệu hỉ h trang Web: View source->hiệu hỉ h  họ File

 Save để lưu lại F5 để ập hật lại ội dung ừa hiệu

hỉ h