Bài giảng THIẾT KẾ WEB HTML –DREAM WEAVER

GIÁO TRÌNH THIẾT KẾ WEB HTML –DREAM WEAVER

Bài1: Giới thiệu tổng quan

 I Các thuật ngữ căn bản

 1/ Internet là gì:

 Là một tập hợp các máy tính được

nối với nhau qua giao thức TCP/IP

( Transmission Control Protocol/

Internet Protocol) qua đường truyền điện thoại, cáp quang Với mục đích trao đổi và chia sẽ thông tin.

 2/ World Wide Web (WWW)

 WWW là một dịch vụ triển khai trên Internet Người ta thường nói WWW

là dịch vụ trang tin toàn cầu Như

vậy, WWW chỉ là một phần của

Internet WWW bao gồm các trang thông tin có ký tự, hình ảnh, âm

thanh và các hiệu ứng mà bạn có thể xem bằng các trình duyệt web (Web browser)

 3/ Trình duyệt web ( web browser)

 là một phần mềm ứng dụng cho phép người sử dụng truy cập, xem và

tương tác với các văn bản, hình ảnh, video, nhạc và các thông tin khác

thường là ở trên một trang web của

hoặc mạng cục bộ Văn bản và hình ảnh trên một trang web có thể chứa

cùng website hoặc website khác

 Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các trang web một cách nhanh chóng và

dễ dàng thông qua các liên kết đó Trình duyệt web sử dụng định dạng

HTML để hiển thị, do vậy các trang

web có thể hiển thị khác nhau với

các trình duyệt khác nhau.

 Một vài trình duyệt thông dụng dành

 4/ Bộ giao thức TCP/IP ( Transmission Control Protocol/ Internet Protocol-

bộ giao thức liên mạng), là một bộ

hết các mạng máy tính thương mại

đang chạy trên đó Bộ giao thức này được đặt tên theo hai giao thức chính của nó là TCP ( Giao thức Điều khiển

Giao vận ) và IP ( Giao thức Liên

mạng )

 5/ Địa chỉ IP:

 Địa chỉ IP ( Internet Protocol -

đơn nhất mà những thiết bị điện

tử hiện nay đang sử dụng để nhận diện và liên lạc với nhau trên

 Một cách đơn giản hơn: IP là một

địa chỉ của một máy tính khi

tham gia vào mạng nhằm giúp

cho các máy tính có thể chuyển thông tin cho nhau một cách

chính xác, tránh thất lạc Có thể coi địa chỉ IP trong mạng máy

tính giống như địa chỉ nhà của

bạn để nhân viên bưu điện có thể đưa thư đúng cho bạn chứ không phải một người nào khác

 6/ DNS (Domain Name System):

 Là hệ thống phân giải tên miền thành địa chỉ IP và ngược lại.

 Mỗi Website có một tên (là tên miền hay đường dẫn URL:Universal

Resource Locator) và một địa chỉ IP Địa chỉ IP gồm 4 nhóm số cách nhau bằng dấu chấm Khi mở một trình

duyệt Web và nhập tên website, trình duyệt sẽ đến thẳng website mà

không cần phải thông qua việc nhập địa chỉ IP của trang web

 Quá trình "dịch" tên miền thành địa chỉ IP để cho trình duyệt hiểu

và truy cập được vào website là công việc của một DNS server

Các DNS trợ giúp qua lại với

nhau để dịch địa chỉ "IP" thành

"tên" và ngược lại Người sử dụng chỉ cần nhớ "tên", không cần

phải nhớ địa chỉ IP (địa chỉ IP là

những con số rất khó nhớ) [

 Các quy định sử dụng tên miền:

 aero - dành cho công nghiệp vận tải hàng không

 biz - dành cho công việc kinh doanh

 cat - dành cho ngôn ngữ/văn hóa Catalan

 com - dành cho các tổ chức thương mại, nhưng không có hạn chế

 coop - dành cho các tổ chức hợp tác

 edu - dành cho các cơ sở giáo dục

 gov - dành cho chính phủ và cơ quan đại diện tại Hoa Kỳ

 info - dành cho các trang thông tin, nhưng không

 mil - dành cho quân đội Hoa Kỳ

 mobi - dành cho các trang chuyên về thiết bị di động

 museum - dành cho các nhà bảo tàng

 name - dành cho dòng họ và cá nhân

 net - nguyên thủy dành cho hạ tầng mạng, nay không có hạn chế

 org - nguyên thủy dành cho những tổ chức không xác định được rõ thuộc về tên miền dùng chung nào khác, nay không có hạn chế

 pro - dành cho những tổ chức chuyên nghiệp

 tel - dành cho những dịch vụ liên quan đến mạng điện thoại và Internet (được thêm ngày 2 tháng 3, 2007)

 travel - dành cho những công ty du lịch, hàng

không, chủ khách sạng, cục du kháh, v.v

 7/ISP (Internet Service Provider)

ISP, nhà cung cấp dịch vụ Internet, là nơi bạn đăng ký thuê bao hoặc đăng

ký sử dụng nếu muốn có quyền truy xuất dịch vụ Internet ISP sẽ giúp bạn kết nối với Internet thông qua đường dây điện thoại hoặc đường dây thuê bao số tốc độ cao Ở Việt Nam, danh sách các ISP có thể kể đến như VDC, FPT, Vietel, Netnam

 8/ FTP (File Transfer Protocol)

 FTP, giao thức truyền tệp tin, là cách thức để truyền dữ liệu từ nơi này đến nơi khác với khối lượng lớn thông qua mạng Internet Giao thức này thường được sử dụng để tải về hoặc đưa lên Internet các tệp tin có dung lượng

lớn

 Bạn có thể không cần quan tâm cách thực hiện của FTP mà trong hầu hết các trường hợp, chỉ cần nhấn chuột

vào một liên kết cho phép tải về tệp tin trong trang web thì trình duyệt sẽ thực hiện các thao tác truyền FTP

cho bạn

 Điều bạn cần quan tâm là cần phải

tải về tệp tin có tên là gì hoặc mình

sẽ đặt tên mới cho tệp tin là gì và sẽ lưu trữ nó ở đâu trong máy của mình

về hoặc đưa lên các tệp tin của mình,

ví dụ chương trình Total Commander, WSFTP, CuteFTP, FlashFTP

 Index.htm Index.html, index.php

II Các khái niệm liên quan đến web

 Một website tiêu biểu còn

chứa siêu liên kết dẫn đến

những trang web còn lại trong phạm vi website và đến các

web site khác Website có thể chỉ có một trang do cá nhân

tạo thành, hoặc là sản phẩm của công ty và chứa vài trăm trang

 Một trang web có một địa chỉ internet không trùng lặp gọi là URL( Uniform

Resource Locator)

 2/ Hosting ( Nơi lưu trữ website)

 Quá trình thiết kế web đã hoàn

tất, ta cần đưa nó lên mạng, cần một nơi để cất giữ thông tin của WEBSITE để khi người xem gõ

trên internet (Host) là nhà, còn địa chỉ WEBSITE (domain

name) chính là địa chỉ nhà

Hai khái niệm domain và host luôn đi đôi với nhau thì người

ta mới tìm thấy nội

dung WEBSITE của ta trên

internet

 3/ Giao diện WEBSITE:

Chính là cái mà chúng ta

thấy nó ở trên trang web,

là khung được trang trí cho trang web Được thiết kế

bởi những designer với các khung, bảng, màu và

chữ,

 Các giao diện website thường có kích thước bề ngang chuẩn là

800 pixel hoặc 1024 pixel, nhưng cũng có một số website không

theo chuẩn này mà thiết kế tự

động giãn theo kích thước màn

hình Để có 1 giao diện website

đẹp, cần rất nhiều yếu tố cấu

thành, trong đó ý tưởng của

người chủ website là quan trọng nhất.

 4/ WEBSITE tĩnh và WEBSITE

động:

WEBSITE tĩnh: là dạng WEBSITE mà

nội dung của nó là cố định, để thay

đổi cần có kiến thức về web, người sử dụng không thể sửa chữa trực tiếp

trên internet

WEBSITE động: là dạng WEBSITE mà sau khi thiết kế, người sử dụng có thể thêm - xóa - sửa nội dung thông qua một phần mềm quản lý mà không cần

có nhiều kiến thức về thiết kế web.

 5/ Máy tìm kiếm là gì?

 Máy tìm kiếm là một hệ thống cho phép tìm kiếm các thông tin trên Internet theo yêu cầu của người

dùng Người dùng muốn tìm thông tin trên Internet chỉ cần truy xuất vào địa chỉ của máy tìm kiếm, gõ

từ khóa hoặc nội dung cần tìm và đợi máy tìm kiếm trả về kết quả Thông thường, màn hình làm việc mặc định của máy tìm kiếm chính

là trang chủ của website chứa

máy tìm kiếm đó

 Máy tìm kiếm có các chức năng lưu trữ

thông tin về các website trên Internet Nó chỉ bao gồm thông tin về các website được người dùng dẫn hướng cụ thể, hoặc các

website mà nó tự tìm thấy Chính vì vậy

mà các máy tìm kiếm này không bao gồm thông tin của tất cả các website trên

mạng Có nhiều máy tìm kiếm của nhiều hãng khác nhau và kết quả trả về là khác nhau kể cả khi người dùng sử dụng cùng một từ khóa

 Các máy tìm kiếm nổi tiếng trên thế giới

có thể kể đến www.google.com,

www.altavista.com, www.teoma.com

 6/ Internet cache là gì?

 Thông tin từ Internet về tới máy tính

sẽ được lưu trữ tại một vùng trong ổ cứng máy tính của bạn, sau đó mới hiển thị ra màn hình Vùng lưu trữ

này gọi là vùng nhớ đệm thông tin

trên Internet (Internet Cache) Do

vậy, nếu đã từng mở một trang web nào đó ra rồi thì khi bạn quay lại

website đó thì các thông tin sẽ được tải ngay từ vùng nhớ đệm này và chỉ cập nhật những phần thay đổi

7/ cấu trúc website ( sơ đồ web)

 Một website luôn luôn có sơ

đồ web Căn cứ theo sơ đồ

web mà ta biết được cần

thiết kế bao nhiêu trang web

để tạo thành website.

 Ví dụ:

Cấu trúc lưu trữ web.

D:\website/data images

amnhac

Bài2: NGÔN NGỮ HTML

(HYPERTEXT MARKUP LANGUAGE)

 1/ Giới thiệu: HTML là ngôn ngữ lập trình

cho phép mọi máy tính kết nối với web để truy nhập và xem trang web, định hướng

di chuyển qua chúng bằng siêu liên kết

Nơi lưu trữ Website ( gọi là máy phục vụ

web (web server)) Máy phục vụ là máy

tính cho phép các máy khách truy cập trên mạng truy cập vào website mà máy phục

vụ lưu trữ.

 Để truy cập web ta dùng các trình duyệt

web như:

 Internet Explorer, Mozila, Firefox, Green

Brown, Opera, Netscape…)

HTML là gì

 Ðể viết HTML cho trang Web, bạn hãy mở chương trình NotePad của Microsoft có đi kèm theo với Windows Ðó là một ASCII

Editor Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ Tên của file này bắt buộc phải có tận cùng là htm hoặc html

Ví dụ: start.htm Ðể thưởng thức thành

quả của mình, bạn hãy open file đó bằng một Browser.( double vào file hay mở

Internet explorer – Menu File – Open -

Browse, chọn nơi chứa trang web).

2/ Cấu trúc cơ bản trang html

 Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó ta cũng có thể viết nhỏ hoặc viết hoa <html> và </html>) Nhờ có cặp TAG này mà Browser biết được đó là HTML -

document để trình duyệt Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những

gì viết giữa cặp TAG <body> và </body> Trong

một document html, chú thích được dùng như sau:

<! Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này >

Sau đây là các trúc các thẻ sử dụng trong

html:

Nh vËy mét tµi liÖu HTML c¬

< BODY C¸c tham sè nÕu cã>

Néi dung cña tµi liÖu

</ BODY >

</ HTML >

Tr×nh duyÖt sÏ xem c¸c tµi liÖu kh«ng sö dông thÎ

<HTML> nh nh÷ng tÖp tin v¨n b¶n b×nh th êng

Thẻ HEAD đ ợc dùng để xác định

phần mở đầu cho tài liệu.< HEAD > Phần mở đầu ( HEADER) của tài liệu đ ợc đặt ở đây

TITLE

 Cặp thẻ này chỉ có thể sử dụng

trong phần mở đầu của tài liệu, tức

là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ < HEAD >.

 Cú pháp: <TITLE>Tiêu đề của

tài liệu</TITLE>

 Thẻ này đ ợc sử dụng để xác định

phần nội dung chính của tài liệu -

phần thân (body) của tài liệu Trong phần thân có thể chứa các thông tin

định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu Những thông tin này đ ợc

 Các thuộc tính đ ợc sử dụng trong thẻ BODY Sau

đây là các thuộc tính chính:

+ BACKGROUND=Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh Nếu kích

th ớc ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ đ ợc lát kín bằng nhiều ảnh.

BGCOLOR=Đặt mầu nền cho trang khi hiển thị Nếu cả hai tham số BACKGROUND và BGCOLOR cùng

có giá trị thì trình duyệt sẽ hiển thị mầu nền tr ớc, sau đó mới tải ảnh lên phía trên.

TEXT=Xác định màu chữ của văn bản, kể cả các đề mục.

ALINK=,VLINK=,LINK=Xác định màu sắc cho các siêu liên kết trong văn bản T ơng ứng, alink (active

link) là liên kết đang đ ợc kích hoạt - tức là khi đã đ

ợc kích chuột lên; vlink (visited link) chỉ liên kết đã từng đ ợc kích hoạt;

cac ban hieu y toi chu

</body>

</html>

4/ Các thẻ định dạng khối

 Thẻ P

Thẻ < P > đ ợc sử dụng để định dạng một đoạn văn bản Tự động thêm dòng trắng tr ớc và sau đoạn văn.

Cú pháp:

< P >Nội dung đoạn văn bản</ P >

H1/H2/H3/H4/H5/H6

duyệt khác là font chữ 20 point Đề

mục cấp 1 là cao nhất và giảm dần

đến cấp 6 Thông th ờng văn bản ở đề mục cấp 5 hay cấp 6 th ờng có kích th ớc nhỏ hơn văn bản thông th ờng

 D ới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

 vÝ du3:

<html>

<body bgcolor="#000080">

<center>

<font face="Verdana, Tahoma, Arial" color="#ffffff">

<h1>Tieu de trang web h1</h1><br>

<h2>Welcome to my Homepage! h2</h2><br>

<h3>Tieu de trang web h3</h3><br>

<h4>Tieu de trang web h4</h4><br>

<h5>Tieu de trang web h5</h5><br>

<h6>Tieu de trang web h6</h6><br>

</font>

</center>

</body>

</html>

 Thẻ xuống dòng BR

 Thẻ này không có thẻ kết thúc t ơng ứng (</ BR >), nó có tác dụng

chuyển sang dòng mới L u ý, nội

dung văn bản trong tài liệu HTML sẽ

đ ợc trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau,

các ký tự tab, ký tự xuống dòng

đều đ ợc coi nh một khoảng trắng

Để xuống dòng trong tài liệu, bạn

phải sử dụng thẻ < BR >

 Thẻ PRE

Để giới hạn đoạn văn bản đã đ ợc định dạng sẵn bạn có thể sử dụng thẻ < PRE > Văn bản ở giữa hai thẻ này sẽ đ ợc thể hiện

giống hệt nh khi chúng đ ợc đánh vào, ví

dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ < PRE > sẽ có ý nghĩa

chuyển sang dòng mới (trình duyệt sẽ

không coi chúng nh dấu cách)

Cú pháp:

<PRE>Văn bản đã đ ợc định

dạng</PRE>

<LI> Môc thø nhÊt

<LI> Môc thø hai

Với nhiều trình duyệt, danh sách phân cấp

và danh sách thực đơn giống danh sách không đánh số, có thể dùng lẫn với nhau Với thẻ OL ta có cú pháp sau:

=i Các mục đ ợc sắp xếp theo thứ tự i, ii, iii

=I Các mục đ ợc sắp xếp theo thứ tự I, II, III Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách

Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu

đầu dòng (bullet) đứng tr ớc mỗi mục trong danh sách Thuộc tính này có thể nhận các giá trị :

disc (chấm tròn đậm); circle (vòng tròn);

 <LI> TIN HOC CAN BAN

 <LI> TIN HOC VAN PHONG

 <LI> THIET KE WEB

 </UL>

 </font>

 </body>

 </html>

 <LI> TIN HOC CAN BAN

 <LI> TIN HOC VAN PHONG

 <LI> THIET KE WEB

 </OL>

 </font>

 </body>

 </html>

 Bài tập: thiết kế trang web có nội dung sau và đặt tên là

chuongtrinh.html

Trung tâm tin học ABC

Chương trình đào tạo chứng chỉ A-B quốc gia.

-Mọi chi tiết xin liên hệ :

Địa chỉ : 71 Cộng hoà, F4, Q.Tân Bình

Có lớp : Sang – Chieu – Toi

 VÝ dô 4.1/ lång 2 danh s¸ch

<U> </U> In chữ gạch chân

<DFN> Đánh dấu đoạn văn bản giữa hai thẻ này là

định nghĩa của một từ Chúng th ờng đ ợc

in nghiêng hoặc thể hiện qua một kiểu

</BIG> In chữ lớn hơn bình th ờng bằng cách tăng kích th ớc font hiện thời lên một Việc sử

dụng các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ tăng dần Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích th ớc đối với mỗi font chữ, v ợt quá giới hạn này, các thẻ

<BIG> sẽ không có ý nghĩa.

</SMALL>

In chữ nhỏ hơn bình th ờng bằng cách giảm kích th ớc font hiện thời đi một Việc

sử dụng các thẻ <SMALL>lồng nhau tạo ra hiệu ứng chữ giảm dần Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích th ớc

đối với mỗi font chữ, v ợt quá giới hạn này, các thẻ <SMALL> sẽ không có ý nghĩa.