Bài giảng thiết kế trang Web trung cấp

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.04 MB, 43 trang )

Bài giảng thiết kế trang Web trung cấp
CHƯƠNG I CÁC KHÁI NIỆM VÀ THUẬT NGỮ VỀ WEB
1.1. Khái niệm về web
1.1.1. Trang Web và ngôn ngữ HTML
Trang Web trình bày dữ liệu trên trình duyệt có cấu trúc HTML. Cấu trúc này được
bắt đầu bằng thẻ <HTML> và kết thúc bằng thẻ </HTML>. Trang HTML có tên mở
rộng thường là .html ,.htm,.jhtml,.phtm nhưng mà tên mở rộng chuẩn trong HTML là
*.html
Hầu hết các thẻ HTML được khai báo giữa 2 thẻ <HTML></HTML>
Chú ý : Trong HTML các thẻ không phân biệt chữ hoa và chữ thường. Ví dụ
<HEAD> cũng như <head> và cũng giống như <HeAd>
Để học nhanh HTML bạn nên phân chia ra hai lại thẻ:
• Thẻ có thẻ đóng ví dụ thẻ<html> thẻ đóng là </html>, <body> thẻ đóng
</body>
• Thẻ không có thẻ đóng ví dụ như là <br> <hr>
Ví dụ: Mã nguồn tạo một trang web đơn giản
<html>
<head>
<title>Chào mừng đến trang Web</title>
</head>
<body>
<font color="red" size="10">Học thiết kế Web </font>
</body>
</html>
1.1.2. Website và dịch vụ lưu trữ web
a. Website là gì?:
Website là tập hợp của rất nhiều trang web - một loại siêu văn bản (tập tin dạng
HTML hoặc XHTML) trình bày thông tin trên mạng Internet- tại một địa chỉ nhất định
để người xem có thể truy cập vào xem. Trang web đầu tiên người xem truy cập từ tên
miền thường được gọi là trang chủ (homepage), người xem có thể xem các trang khác
thông qua các siêu liên kết (hyperlinks)

Đặc điểm tiện lợi của website: thông tin dễ dàng cập nhật, thay đổi, khách hàng có
thể xem thông tin ngay tức khắc, ở bất kỳ nơi nào, tiết kiệm chi phí in ấn, gửi bưu điện,
fax, thông tin không giới hạn (muốn đăng bao nhiêu thông tin cũng được, không giới
hạn số lượng thông tin, hình ảnh ) và không giới hạn phạm vi khu vực sử dụng (toàn
thế giới có thể truy cập).
Một website thông thường được chia làm 2 phần: giao diện người dùng (front-end)
và các chương trình được lập trình để website hoạt động (back-end). Giao diện người
dùng là định dạng trang web được trình bày trên màn hình của máy tính của người xem
(máy khách) được xem bằng các phần mềm trình duyệt web như Internet Explorer,
Nguyễn Thị Thu Hà Trang 1
Bài giảng thiết kế trang Web trung cấp
Firefox, Tuy nhiên ngày nay người xem có thể xem website từ các thiết bị điện tử
khác như điện thoại di động, PDA, Việc trình bày một website phải đảm bảo các yếu
tố về thẩm mỹ đẹp, ấn tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các chức năng
tiện lợi cho người xem. Đặc biệt ngày nay, website trở nên sống động với những hiệu
ứng đa dạng của hình ảnh và chữ kết hợp với âm thanh.
Phần Back-end là phần lập trình của website lưu trữ trên máy chủ (Server). Sự khác
nhau ở phần lập trình back-end của website làm phân ra 2 loại website: Website tĩnh và
website động.
- Website động (Dynamic website) là website có cơ sở dữ liệu, được cung cấp công
cụ quản lý website (Admin Tool) để có thể cập nhật thông tin thường xuyên, quản lý
các thành phần trên website. Loại website này thường được viết bằng các ngôn ngữ lập
trình như PHP, Asp.net, JSP, Perl, , quản trị Cơ sở dữ liệu bằng SQL hoặc MySQL,
- Website tĩnh do lập trình bằng ngôn ngữ HTML theo từng trang như brochure,
không có cơ sở dữ liệu và không có công cụ quản lý thông tin trên website.Bạn phải
biết kỹ thuật thiết kế trang web (thông thường bằng các phần mềm như FrontPage,
Dreamwaver, ) khi muốn thiết kế hoặc cập nhật thông tin của những trang web này.
b. Dịch vụ lưu trữ Web (Web Hosting)
Web Hosting là nơi lưu trữ tất cả các trang Web, các thông tin, tư liệu, hình ảnh của
Website trên một máy chủ Internet, Web Hosting đồng thời cũng là nơi diễn ra tất cả

các hoạt động giao dịch, trao đổi thông tin giữa Website với người sử dụng Internet và
hỗ trợ các phần mềm Internet hoạt động.
Nói một cách đơn giản, Web Hosting tương đương với trụ sở làm việc hay phòng
giao dịch của một doanh nghiệp trong đời thường. Khi bạn thuê một Web Hosting, điều
đó cũng giống như bạn thuê một phòng trong một cao ốc để làm văn phòng hay trụ sở
làm việc.
1.1.3. Ứng dụng Web trên mạng Internet
Ứng dụng Web đã trở thành một thức hiện hữu ở khắp mọi nơi trên thế giới, khi mà
máy tính trở thành công cụ tùy thân cho cả công việc và hoạt động vui chơi giải trí của
con người.
Nhớ những thập kỷ trước đây, Web trở thành con đường giá rẻ cho hàng triệu doanh
nghiệp thực hiện kênh thông tin liên lạc, trao đổi, giao dịch với khách hàng tương lai và
các đối tác hiện tại.
Ngày nay, các trang web đang trở thành một công cụ thương mại trung gian hiệu
quả, tạo ra cho bạn vô số cơ hội kinh doanh khác nhau. Không ai có thể phủ nhận rằng
nếu biết tận dụng tốt các cơ hội kinh doanh trực tuyến, doanh thu và lợi nhuận sẽ gia
tăng theo cấp số nhân. Rất nhiều công ty nhỏ đã thu lợi lớn từ các website của mình –
một công cụ tiếp thị hữu hiệu cho sản phẩm/dịch vụ của họ.
Trước tiên, chính mảng thông tin của các trang web sẽ tạo ra nhiều lợi nhuận nhất
cho bạn khi nó cung cấp một cổng tiếp cận ngay lập tức cho khách hàng hay cho các
đối tác tiềm năng. Trang web không chỉ đơn giản là nơi giới thiệu về công ty bạn, mà
chúng còn cung cấp một lượng thông tin khá lớn cho người truy cập, chưa kể chúng còn
có thể đảm bảo việc phân phối cho khách hàng những dịch vụ tiện dụng liên quan đến
nhiều sản phẩm mà phần lớn mọi người không muốn phải dạo cửa hàng để tìm mua như
Nguyễn Thị Thu Hà Trang 2
Bài giảng thiết kế trang Web trung cấp
xe cộ, máy móc, hàng tiêu dùng. Mặt khác, có một số sản phẩm mà khách hàng cần
phải thử hay chạm vào trước khi mua. Bạn không thể thử một bộ ghế sofa hay một thỏi
son trong các quầy hàng trực tuyến. Điều đó nói lên rằng nếu bạn có cả hai cửa hàng
ngoại tuyến và cửa hàng trực tuyến, các khách hàng có thể kiểm tra sản phẩm tại cửa

hàng ngoại tuyến của bạn và sau đó đặt hàng chúng trên các cửa hàng trực tuyến.
Chúng không chỉ cho phép người truy cập xem xét mọi thứ, mà còn cung cấp một
mạng phân phối giá rẻ để tìm đối tác; đồng thời thu thập thông tin quan trọng về thị
trường và nguồn nhân lực. Một lợi thế khác của trang web là mở ra những dịch vụ mới
có giá trị ngày càng gia tăng. Không ít công ty đã đem đến cho khách hàng những
nguồn thông tin riêng sau khi nhận ra sự cần thiết của biện pháp này và đổi lại họ thu về
những khoản lợi nhuận khổng lồ từ số lượng khách hàng ngày một gia tăng.
* Ví dụ DHL, hãng dịch vụ chuyển phát nhanh, đã để cho khách hàng tự theo
dõi những kiện hàng của mình ngay trên đường vận chuyển, nhờ đó hãng đã giảm
được giá chào hàng và xây dựng được sự tín nhiệm của khách hàng.
Theo số liệu của Trung tâm lnternet Việt Nam (VNNIC), hiện có xấp xỉ 14 triệu
người, chiếm 16,48% dân số Việt Nam thường xuyên tiếp cận với lnternet. Cùng với
sự ra đời của hàng trăm Website, báo điện tử, hoạt động xúc tiến thương mại điện tử
của các cơ quan chức năng và đặc biệt là sự kiện Việt Nam gia nhập môi trường
kinh doanh toàn cầu - WTO vào cuối năm 2006 là những tiền đề cực kỳ thuận lợi
để QC-TT Việt Nam có cơ hội phát triển.
Ngày nay, các nhà quảng cáo trên Net đang dần tạo được thói quen xem quảng cáo trên
Net của người tiêu dùng. Thói quen này bắt đầu với các chương trình quảng cáo trên
các trang tìm kiếm như Google (GOOG). Cách đây 5 năm, số tiền quảng cáo mà công
ty này nhận được chỉ là con số 0, nhưng đến nay, quảng cáo trực tuyến trên mạng đã
đem lại cho Google thu nhập 3,9 tỷ đôla. Theo số liệu của Công ty nghiên cứu Kagan
Research LLC, số tiền quảng cáo trên Internet nói chung đã lên tới 9,4 tỷ đôla vào năm
2004. Và với tốc độ tăng trưởng tiếp tục là 2 con số nên thời lượng và diện tích giành
cho quảng cáo trên các trang web lớn hơn nhiều so với trên tạp chí trong vòng 2 năm
gần đây. Quảng cáo trực tuyến là sự thành công phía sau của tất cả các ngành. Công ty
AOL (TWX) đã bỏ ra 435 triệu đôla cho chương trình quảng cáo trên Advertising.com
vào tháng 6. Vào trung tuần tháng 11, công ty Dow Jones & Co (DJ) đã đồng ý mua
CBS Marketwatch (MKTW) với giá 515 triệu đôla. Theo như ước tính trong năm tới,
công ty này sẽ sở hữu một khoản tiền gấp 30 lần số tiền này. Các nhà phân tích tin rằng
chủ sở hữu của trang Web wsj.com, Dow Jones, đang thấy được các khoản tiền khá lớn

từ quảng cáo. Đây là một thị trường tự do để thu hút khách hàng vì ngày càng có nhiều
người xem quảng cáo trên Internet. Phải nói rằng, quảng cáo trên Internet hiện này đang
trở thành cơn sốt
1.2. Một số thuật ngữ về web
1.2.1. World Wide Web - WWW: mạng lưới toàn cầu mà mọi người có thể truy
cập (đọc và viết) qua các máy tính nối mạng Internet.
1.2.2. Internet: Một hệ thống gồm các mạng máy tính được liên kết với nhau trên phạm
vi toàn thế giới, tạo điều kiện thuận lợi cho các dịch vụ truyền thông dữ liệu, như đăng
nhập từ xa, truyền các tệp tin, thư tín điện tử, và các nhóm thông tin.
1.2.3. Multimedia: đa phương tiện, đa môi trường, đa truyền thông. Một phương pháp
Nguyễn Thị Thu Hà Trang 3
Bài giảng thiết kế trang Web trung cấp
giới thiệu thông tin bằng máy tính, sử dụng nhiều phương tiện truyền thông tin như
văn bản, đồ hoạ và âm thanh, dùng với sự gây ấn tượng bằng tương tác.
1.2.4. Hypertext: văn bản của một tài liệu truy tìm không theo tuần tự. Người đọc tự
do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác định
sẵn do người sử dụng tự lập nên. Trong một môi trường ứng dụng hypertext thực sự,
bạn có thể trỏ vào ( highlight) bất kỳ từ nào của tài liệu và sẽ tức khắc nhảy đến các tài
liệu khác có văn bản liên quan đến nó. Cũng có những lệnh cho phép bạn tự tạo cho
riêng mình những dấu vết kết hợp qua suốt tài liệu. Các trình ứng dụng hypertext rất
hữu ích trong trường hợp phải làm với một số lượng văn bản lớn, như các bộ từ điển
bách khoa và các bộ sách nhiều tập.
1.2.5. URL(Uniform Resource Locator): địa chỉ tới một trạm Internet hay mạng nội
bộ, là 1 chuỗi cung cấp địa chỉ Internet của 1 Web site tài nguyên trên World Wide
Web, đi theo sau 1 nghi thức. URL thường dùng là http://, để chỉ định địa chỉ Web site
trên Internet. Những URL khác là gopher://, ftp://, mailto: /

/
1.2.6. Dynamic HTML(DHTML-HTML động): là ngôn ngữ HTML mở rộng làm tăng
hiệu ứng trình bày văn bản và đối tượng khác. Trong FrontPage, bạn có thể sử dụng

thanh công cụ DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của
mà không cần lập trình.
1.2.7. ActiveX: 1 tập hợp các kỹ thuật cho phép các thành phần phần mềm tương tác
với một hành phần khác trong môi trường mạng, bất chấp ngôn ngữ của thành phần
được tạo ra. ActiveX được dùng làm chính yếu để phát triển nội dung tương tác của
World Wide Web, mặc dù nó có thể sử dụng trong các ứng dụng người- máy và các
chương trình khác.
1.2.8. Web browser(Trình duyệt web): Phần mền phiên dịch đánh dấu của các
file bằng HTML, định dạng chúng sang các trang Web, và thể hiện chúng cho
người dùng. Vài browser có thể cho phép người dùng gởi nhận e-mail, đọc
newsgroups, và thực hiện các file sound hoặc video đã được nhúng và trong tài liệu
Web
Nguyễn Thị Thu Hà Trang 4
Bài giảng thiết kế trang Web trung cấp
Chương II NGÔN NGỮ HTML
2.1. Giới thiệu ngôn ngữ HTML (Hypertext Markup Language):
Hiện nay có hai loại hệ thống xử lý văn bản trên máy tính. Hệ thống thứ nhất là các
hệ soạn thảo văn bản dùng trên môi trường đồ hoạ như Microsoft Word, Word Perfect
Mục đích chính của các hệ soạn thảo văn bản kiểu này là chú trọng vào hình thức của
văn bản. Vì vậy các chương trình đó tập trung vào xử lý kiểu dạng chữ, hình ảnh trong
văn bản và cách bố cục chúng. Loại hệ thống thứ hai không chú trọng tới hình thức thể
hiện văn bản mà nhấn mạnh cấu trúc văn bản đó. Các văn bản này có cấu trúc như một
ngôn ngữ lập trình đơn giản, bằng các mô tả ngôn ngữ bên trong nó để thể hiện các liên
kết giữa nhiều kiểu dữ liệu khác nhau. Bên cạnh đó cũng cho phép mô tả một số thuộc
tính trình bày văn bản như kiểu dạng chữ, canh lề
Ngôn ngữ HTML (Hypertext Markup Language) là một ngôn ngữ mô tả dữ liệu
thuộc hệ thống thứ hai. Nó là một dạng của ngôn ngữ mô tả tài liệu tổng quát SGML
(Standard Generalized Markup Language). SGML cho phép ta thiết lập mối liên hệ giữa
các thành phần khác nhau trong cùng một tài liệu hoặc giữa nhiều tài liệu thuộc các
dạng dữ liệu khác nhau. Nó cho phép một tài liệu có thể được dịch và hiển thị trên mọi

máy tính chạy các hệ điều hành khác nhau mà bố cục và nội dung không thay đổi. Các
máy tính, dù chạy trên môi trường Windows, Linux, Unix, Sun-OS, Dos, Mac-OS đều
có thể hiển thị được văn bản HTML mà không cần phải sửa đổi gì do một tập lệnh
chung thống nhất mà mỗi hệ điều hành đều có thể hiểu được.
Người ta sử dụng các mô tả ngôn ngữ của SGML để định nghĩa ra các ngôn ngữ
nhằm mô tả các dạng tài liệu khác nhau dựa vào một loại định nghĩa gọi là DTD
(Document Type Definition). Có rất nhiều loại ngôn ngữ được định nghĩa theo kiểu
DTD, trong đó HTML là ngôn ngữ phổ biến nhất và dùng trong dịch vụ World Wide
Web. Như vậy HTML tuân thủ các quy tắc mà ngôn ngữ theo dạng SGML phải có và
các thành phần của nó được định nghĩa bởi các DTD của SGML.
Giống như SGML, HTML là ngôn ngữ định dạng và đánh dấu các văn bản.
HTML sử dụng các thẻ (tag) để định dạng, sắp đặt thông tin trên văn bản. Ta có thể
phân các thẻ của HTML thành hai loại: loại thứ nhất dùng để thể hiện các chỉ dẫn về
định dạng văn bản như kiểu chữ, cỡ chữ, định lề loại thứ hai là loại mô tả về cấu trúc
của văn bản bao gồm việc định nghĩa các danh sách, các liên kết dữ liệu, các mô tả thể
hiện hình ảnh, văn bản, âm thanh.
Ta cũng có thể phân biệt các thể của HTML theo cấu tạo của nó: ta có các thẻ
chứa (Container) hoặc rỗng (Empty). Để tạo ra một văn bản HTML ta có thể dùng các
hệ soạn thảo đơn giản như Notepad của Winddows, hoặc bất kì một Editor nào của Dos
tạo file ASCII hoặc các phần mềm chuyên dụng như Micrrosoft FrontPage,
DreamWav để tạo các trang web.
2.2. Các thành phần của một văn bản HTML
2.2.1. Phần đầu cấu trúc HTML
Phần đầu văn bản cho biết tiêu đề của văn bản và thiết lập các quan hệ giữa văn
bản với hệ thống thư mục. Phần đầu văn bản được mở đầu bằng thẻ <HEAD> và kết
thúc bằng thẻ </HEAD>. Thông tin duy nhất trong phần đầu được trình duyệt web hiển
thị là tiêu đề của văn bản. Các thông tin trong phần này cón có thể được sử dụng bởi các
Nguyễn Thị Thu Hà Trang 5
<HEAD>
<TITLE>Tiêu đề của trang HTML<TITLE>

</HEAD>
<HTML>
<HEAD>
<TITLE>Tiêu đề của trang HTML<TITLE>
</HEAD>
<BODY>
Nội dung của trang HTML có thể là văn bản, hình ảnh, âm thanh
</BODY>
<HTML>
Bài giảng thiết kế trang Web trung cấp
ứng dụng hay dịch vụ thông tin khác. Việc tạo ra một trang văn bản HTML có phần đầu
tốt là việc nên làm.
2.2.2. Phần thân cấu trúc HTML
Phần thân văn bản, được bắt đầu bởi thẻ <BODY> và kết thúc bởi thẻ </BODY>,
là một phần chứa nội dung chính của văn bản. Phần thân của văn bản có thể chỉ đơn
thuần cung cấp cho người dùng các thông tin kết hợp với hình ảnh, âm thanh hoặc cũng
có thể có dạng một biểu mẫu (Form) để người dùng điền thông tin vào và thực hiện một
công việc nào đó từ trang web (tìm kiếm, tra cứu, đặt cấu hình, chạy một ứng dụng ).
Trong phần thân còn có thể có các liên kết (HyperLink) với các văn bản khác để người
sử dụng xem được những thông tin liên quan.
2.2.3. Cấu trúc tổng quát của HTML
Một tài liệu HTML có cấu trúc tổng quát như sau:
2.3. Các thẻ dùng trong HTML
2.3.1. Các thẻ định cấu trúc tài liệu
2.3.1.1.Thẻ <HTML> </HTML>
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có
sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp
thẻ này.
Cú pháp:
2.3.1.2.Thẻ <HEAD> </HEAD>

Thẻ này đánh dấu một đoạn văn bản là phần đầu đề của một tài liệu HTML. Nó
gần giống như phần HEADER trong các tài liệu văn bản khác.
Cú pháp:
Nguyễn Thị Thu Hà Trang 6
<HTML>
Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y
</HTML>
Bài giảng thiết kế trang Web trung cấp
2.3.1.3.Thẻ <TITLE> </TITLE>
Thẻ này để định nghĩa tiêu đề của một tài liệu HTML, nó thường hiện lên trên
phần tiêu đề (Title Bar) của cửa sổ trình duyệt khi mở tài liệu đó. Nếu tiêu đề dài quá
64 kí tự thì có thể nó hiển thị không đúng. Một tài liệu HTML chỉ có một tiêu đề, tiêu
đề thường ngắn gọn và mô tả nội dung của tài liệu.
Cú pháp:
2.3.1.4.Thẻ <BODY> </BODY>
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 đặt ở phần tham số của thẻ
Cú pháp:
Các thuộc tính của thẻ
Nguyễn Thị Thu Hà Trang 7
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ấp 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;
<TITLE>Tiêu đề của tài liệu</TITLE>
<BODY>
Phần nội dung của tài liệu
</BODY>
Bài giảng thiết kế trang Web trung cấp
Nguyễn Thị Thu Hà Trang 8
Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
<HTML>
<HEAD>
<TITLE>Sử dụng Heading<TITLE>
</HEAD>
<BODY>
<H1>Tiêu đề 1<H1>
<H2>Tiêu đè 2<H2>
<H3>Tiêu đề 3<H3>
</BODY>
</HTML>
Bài giảng thiết kế trang Web trung cấp
2.3.2. Các thẻ định dạng khối
2.3.2.1. Thẻ <P> </P>
Thẻ <P> </P> (Paragraph Break): thuộc loại thẻ chứa, dùng để định dạng văn bản

chứa ở trong nó thành một đoạn. Khi gặp thẻ này thì văn bản chứa trong thẻ này sẽ tạo
thành một đoạn riêng biệt; xuống dòng và tạo khoảng cách so với các đoạn khác.
2.3.2.2. Thẻ <BR>
Thẻ <BR> (Line Break): thẻ này dùng để ngắt dòng, nó thuộc loại thẻ rỗng, bởi vì
nó chỉ có tác động ngay tại vị trí văn bản mà nó đánh dấu. Khi trình duyệt Web gặp thẻ
này thì nó sẽ ngắt dòng và dữ liệu đi sau nó được đưa xuống dòng tiếp theo
2.3.2.3. Thẻ <HR>
Thẻ <HR> (Horizontal Ruler) dùng để chia các đoạn văn bản bằng một đường kẻ
ngang.
2.3.2.4. Các thẻ định dạng đề mục
Đây là thẻ từ <H1> đến <H6> nhằm định nghĩa 6 mức định cỡ chữ khác nhau. Văn
bản khi được dánh dấu bằng loại thẻ này sẽ có kích thước to hơn chữ bình thường và
đậm nét hơn. Do đó người ta thường dùng loại thẻ này để đánh dấu cho mở đầu của một
tiêu đề hay một chủ đề nào đó. Kích thước của đoạn văn bản được đánh dấu tăng dần từ
thẻ <H6> cho tới thẻ <H1>. Điều này cũng phù hợp với cách đặt cỡ chữ cho các tiêu đề
giảm dần từ mức tiêu đề 1 đến tiêu đề 3.
Kết quả thu được khi dùng trình duyệt Web sẽ là:
Nếu bạn có tài liệu:
2.3.3. Các thẻ định dạng danh sách
Nguyễn Thị Thu Hà Trang 9
Bài giảng thiết kế trang Web trung cấp
Có 2 kiểu đánh danh sách thường dùng
• Danh sách không có thứ tự (đánh bằng các dấu bullet) <UL>
Cú pháp:
Ví dụ:
HTML Kết quả
<B>Danh sách không có thứ tự:</B>
<ul>
<li> Item 1
<li> Item 2

<li> Item 3
</ul>
Danh sách không có thứ tự:
• Item 1
• Item 2
• Item 3
• Danh sách có thứ tự (đánh bằng số) <OL>
Cú pháp:
Trong đó:
TYPE =1 :Các mục được sắp xếp theo thứ tự 1, 2, 3
=a : Các mục được sắp xếp theo thứ tự a, b, c
=A : Các mục được sắp xếp theo thứ tự A, B, C
=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
Ví dụ:
HTML Kết quả
<B>Danh sách có thứ tự:</B>
<ol>
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
Danh sách có thứ tự:
1. Item 1
2. Item 2
3. Item 3
2.3.4. Các thẻ định dạng in ký tự
Nguyễn Thị Thu Hà Trang 10
<UL TYPE= circle/square>
<LI> Môc thø nhÊt

<LI> Môc thø hai
</UL>
<OL TYPE=1/a/A/i/I>
<LI> Môc thø nhÊt
<LI> Môc thø hai
</OL>
Bài giảng thiết kế trang Web trung cấp
2.3.4.1. Thẻ chú thích:
Thẻ chú thích rất quan trọng trong soạn thảo mã nguồn HTML . Giúp người đọc
mã nguồn có thể hiểu được trang HTML đang thể hiện mục đích gì. Tuy nhiên khi chạy
trình duyệt thì sẽ bỏ qua phần văn bản nằm trong thẻ chú thích.
Cấu trúc: <!- - …………………. - ->
Ví dụ:
HTML Kết quả
Chuc ban vui ve
<! Không hiển thị trên trình duyệt >
Chuc ban vui ve
2.3.4.2. Thẻ <B>, <STRONG>: Hiển thị văn bản in đậm
Ví dụ:
HTML Kết quả
<b> Chuc ban vui ve </b>
<strong>Hoc tap tot</strong>
Chuc ban vui ve
Hoc tap tot
2.3.4.3. Thẻ <I>, <EM>: Hiển thị văn bản in nghiêng
Ví dụ:
HTML Kết quả
<i> Chuc ban vui ve</i>
<em>Hoc tap tot</em>
Chuc ban vui ve

Hoc tap tot
2.3.4.4. Thẻ <U>: Hiển thị văn bản gạch dưới
Ví dụ:
HTML Kết quả
<u> Chuc ban vui ve </u> Chuc ban vui ve
2.3.4.5. Thẻ <BLOCKQUOTE>….</BLOCKQUOTE>: Khối trích dẫn được
dùng trong trường hợp sử dụng các trích dẫn mở rộng. Toàn khối trích dẫn sẽ
căn thụt lề cả hai phía và tạo thành một khối riêng so với các đoạn khác trong
trang HTML.
2.3.4.6. Thẻ <SUP>….</SUP>: tạo chỉ số trên trong văn bản
Ví dụ:
HTML Kết quả
X<sup>2</sup> X
2
Nguyễn Thị Thu Hà Trang 11
Bài giảng thiết kế trang Web trung cấp
2.3.4.7. Thẻ <SUB>……</SUB>: Tạo chỉ số dưới trong văn bản
Ví dụ:
HTML Kết quả
H<sub>2</sub>O H
2
O
2.3.4.8. Thẻ <FONT>…….</FONT>: Chọn kiểu chữ hiển thị cho văn bản.
Cấu trúc:<FONT FACE= font-name COLOR= color SIZE= n> ….</FONT>
Trong đó:
+ Thuộc tính FACE: chọn tên font chữ
+ Thuộc tính SIZE= : xác định cỡ chữ. Kích thước có thể là tuyệt đối (nhận giá
trị từ 1 đến 7) hoặc tương đối (+2,-4 ) so với font chữ hiện tại.
+ Thuộc tính COLOR=: màu sắc đoạn văn bản nằm giữa hai thẻ.
Ví dụ:

HTML Kết quả
<font size=+3 color=red> Chao cac
ban</font>
<font size=+4 color=#FF66FF>Chuc hoc
tot</font>
Chao cac ban
Chuc hoc tot
2.3.4.9. Chèn các ký tự đặc biệt
Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt. Bởi các ký hiệu được dùng
để chỉ các thẻ mà bạn không thể sử dụng chúng như trong HTML. Để có thể dùng
được bạn dùng dấu phối hợp:
HTML Kết quả
< &lt
> &gt
& &amp
“ "
khoảng trắng  
2.3.4.10. Thẻ qui định màu chữ, màu nền, hình nền, màu mối liên kết
Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây
(Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng
hexa (hệ đếm cơ số 16) có định dạng như sau:
#RRGGBB
trong đó:
RR - là giá trị màu Đỏ.
GG - là giá trị màu Xanh lá cây.
BB - là giá trị màu Xanh nước biển.
Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có
thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16
màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.
Nguyễn Thị Thu Hà Trang 12

Bài giảng thiết kế trang Web trung cấp
Sau đây là một số giá trị màu cơ bản:
Màu sắc Giá trị Tên tiếng Anh
Đỏ
Đỏ sẫm
Xanh lá cây
Xanh nhạt
Xanh nước biển
Vàng
Vàng nhạt
Trắng
Đen
Xám
Nâu
Tím
Tím nhạt
Hồng
Da cam
Màu đồng phục hải
quân
#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080

#A52A2A
#FF00FF
#EE82EE
#FFC0CB
#FFA500
#000080
#4169E1
#7FFFD4
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
NAVY
ROYALBLUE
AQUAMARINE
Cấu trúc:
<BODY
LINK = color
ALINK = color

VLINK = color
BACKGROUND = url
BGCOLOR = color
TEXT = color
SCROLL = Yes/No
TOPMARGIN = pixels
RIGHTMARGIN = pixels
LEFTMARGIN = pixels
>
phần nội dung của tài liệu được đặt ở đây
</BODY>
Sau đây là ý nghĩa các tham số của thẻ BODY:
Các tham số ý nghĩa
Nguyễn Thị Thu Hà Trang 13
Bài giảng thiết kế trang Web trung cấp
LINK Chỉ định màu của văn bản siêu liên kết
ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn
VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở
BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền
BGCOLOR Chỉ định màu nền
TEXT Chỉ định màu của văn bản trong tài liệu
SCROLL YES/NO - Xác định có hay không thanh cuộn
TOPMARGIN Lề trên
RIGHTMARGIN Lề phải
LEFTMARGIN Lề trái
2.3.4.11. Thẻ <MARQUEE>: tạo chuỗi ký tự chuyển động
Cấu trúc: <MARQUEE>…………….</MARQUEE>
Các thuộc tính của thẻ
Thuộc tính Ý nghĩa
Behavior=type (scroll, slide, alternate) Kiểu chuyển động của chuỗi ký tự

Direction=left/right/up/down Định hướng chuỗi ký tự bắt đầu chuyển động
Loop=N hoặc Infinite
N là số lần chuyển động ngang qua màn hình
của chuỗi ký tự. Nếu bằng infinite thì chuyển
ký tự sẽ xuất hiện liên tục.
Scrollamount=N
Xác định khoảng trống tính bằng pixel, giữa
mỗi lần cuốn của chuỗi ký tự
2.3.4.12. Thẻ tạo liên kết
Cấu trúc: <a href="">………</a>
Trong đó thuộc tính href sẽ sử dụng khác nhau khi bạn sử dụng:
o Liên kết nội bộ trang: bạn sử dụng cách đặt bookmark trên trang href=”#tên
bookmark”
o Liên kết các trang khác nhau href=”/thư mục/tên tập tin”
o Liên kết từ xa: href=”http://…” Ví dụ: http:// www.yahoo.com
2.3.5. Các thẻ âm thanh, hình ảnh
2.3.5.1.Thẻ <IMG>: dùng để chèn hình ảnh vào trang HTML
Cấu trúc: <img src=đường dẫn lưu file hình>
Ví dụ:
HTML Kết quả
Nguyễn Thị Thu Hà Trang 14
Bài giảng thiết kế trang Web trung cấp
<img src="image.gif">
2.3.5.2.Thẻ <IMG DYNSRC>: dùng để chèn phim vào trang HTML
Ví dụ:
HTML Kết quả
<img dynsrc="clock.avi">
2.3.5.3.Thẻ <BGSOUND>, <EMBED>: chèn âm thanh nền của trang HTML
Ví dụ:
HTML Kết quả

<bgsound src="Giacmocothat.wma"
loop="infinite">
hoặc <embed src="Giacmocothat.wma"
autostart="true" loop="true">
2.3.6. Các thẻ định dạng bảng biểu
Bảng được cấu thành từ nhiều hàng, cột. Bảng trong trang HTML dùng trình bày
rất tiện lợi. Bạn có thể đưa văn bản, hình ảnh, danh sách hơn thế nữa bạn còn có thể
cho các bảng lồng vào nhau.
Cấu trúc tạo bảng:
Thẻ Ý nghĩa
<table> Khởi tạo bảng
<tr> Tạo dòng trong bảng
<td> Tạo cột trong bảng
<th> Tạo dòng tiêu đề trong bảng
Nguyễn Thị Thu Hà Trang 15
Bài giảng thiết kế trang Web trung cấp
Các thuộc tính trong thẻ
Thuộc tính Ý nghĩa
Border=n
Định dạng đường viền cho bảng với n là giá
trị
Width=n% Định dạng chiều rộng của bảng bằng n%
Cellpadding=n Khoảng cách giữa các văn bản và ô
Cellspacing=n
Khoảng cách giữa các biên trong và ngoài
của ô
Colspan=n Chia cột thành n cột
Rowspan Chia dòng thành n dòng
Align=(left, right, center,
justify)

Định dạng lề theo chiều ngang văn bản
Valign=(top, bottom, midle) Định dạng lề theo chiều dọc văn bản
Ví dụ:
HTML Kết quả
<table border=1>
<tr>
<td>Row 1 col 1</td>
<td align=center colspan=2> Row 1 col 2-3
</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td valign=top rowspan=2> Row 2 col 2
</td>
<td>Row 2 col 3</td>
</tr>
<tr>
<td>Row 3 col 1</td>
<td>Row 3 col 3</td>
</tr>
</table>
Row 1 col
1
Row 1 col 2-3
Row 2 col
1
Row 2
col 2
Row 2 col
3

Row 3 col
1
Row 3 col
3
2.3.7. Thẻ tạo khung
Nguyễn Thị Thu Hà Trang 16
Bài giảng thiết kế trang Web trung cấp
 Cấu trúc của Frame
<html>
<frameset>
</frameset>
</html>
 Thẻ tạo giao diện Frame: có nhiều cách tạo giao diện khung
• Tạo khung có dạng hàng
Cấu trúc:
<html>
<frameset rows="a,b,*">
<frame name ="tên khung" src="tên tập tin">
</frameset>
</html>
Trong đó:
 a là chiều cao của khung đầu tiên. Giá trị này có thể là tỷ lệ phần trăm
hoặc tính bằng pixel.
 b là chiều cao của khung tiếp theo
 * là chiều cao còn lại
Ví dụ:
HTML Kết quả
<frameset rows="30%,50%,*">
<frame name ="tren" src="tren.htm">
<frame name ="duoi" src="duoi.htm">

<frame name ="con_lai"
src="conlai.htm">
</frameset>
• Tạo khung có dạng cột
Cấu trúc:
<html>
<frameset cols="a,b">
<frame name ="tên khung" src="tên tập tin">
</frameset>
</html>
Trong đó: a,b là chiều rộng của cột tương ứng. Giá trị có thể là tỷ lệ %, pixel,
hoặc biến (*).
Nguyễn Thị Thu Hà Trang 17
Bài giảng thiết kế trang Web trung cấp
Ví dụ:
HTML Kết quả
<frameset cols="30%,70%">
<frame name ="ben trai" src="trai.htm">
<frame name ="ben phai" src="phai.htm">
</frameset>
• Tạo khung hàng và cột kết hợp
Ví dụ:
HTML Kết quả
<frameset rows="60,*,40">
<frame name ="tren" src="khung1.html">
<frameset cols="200,*">
<frame name ="ben trai" src="khung2.html">
<frame name ="ben phai"
src="khung3.html">
</frameset>

<frame name ="duoi" src="khung1.html">
</frameset>
 Thuộc tính của thẻ Frame
Thuộc tính Ý nghĩa
Scrolling=yes/no Hiện/ẩn thanh cuốn cho khung
Noresize
Ngăn không cho người dùng thay đổi kích
thước của khung khi duyệt trang
Chương III THIẾT KẾ WEB BẰNG MS-FRONTPAGE
3.1. Tổng quan về FrontPage
3.1.1. Giới thiệu về FrontPage
Nguyễn Thị Thu Hà Trang 18
Bài giảng thiết kế trang Web trung cấp
Microsoft FrontPage là một bộ công cụ để quản lý và tổ chức World Wide Web
mà không cần các kiến thức về lập trình. FontPage có tất cả mọi thứ cần thiết để thiết kế
và xây dựng một World Wide Web site đơn giản một cách nhanh chóng và dễ dàng.
Microsoft FrontPage là công cụ tạo Web hoàn chỉnh nhất, tích hợp bên trong nó
các bộ công cụ giúp người sử dụng thuận lợi khi làm việc với các trang HTML và quản
trị Website.
Với FrontPage 98, chúng ta có bộ chương trình để làm việc bao gồm FrontPage
Explorer dùng để quản lý Website và FrontPage Editor dùng để soạn thảo trang HTML;
bên cạnh đó còn có thể có thêm một số phần mềm khác đi kèm theo, chẳng hạn như
Theme Designer để quản lý các theme.
Kể từ FrontPage 2000 trở lên thì không còn có sự tách biệt giữa FrontPage
Explorer và FrontPage Editor, chúng được hoà trộn vào nhau và được thể hiện dưới các
chức năng hiển thị khác nhau của FrontPage.
3.1.2. Khởi động và thoát khỏi FrontPage
• Khởi động Microsoft FrontPage
Vào Start → chọn Programs → chọn Microsoft Office → chọn Microsoft Office
ForntPage 2003.

• Thoát khỏi Microsoft FrontPage
Vào menu File → chọn Exit hoặc nhấn nút Close góc bên phải màn hình hoặc nhấn
tổ hợp phím Alt + F4
3.1.3. Cửa sổ làm việc FrontPage
3.2. Làm việc với trang Web trong ForntPage
3.2.1. Tạo một trang Web
Vào menu File  chọn New  chọn Blank Page trên thanh đa nhiệm hoặc
nhấn tổ hợp phím Ctrl + N
Nguyễn Thị Thu Hà Trang 19
Bài giảng thiết kế trang Web trung cấp
3.2.2. Tạo website với FrontPage
Bước 1: Vào menu File → chọn New, khung tác vụ New hiển thị bên phải màn hình
Bước 2: Kích vào mục More Web site template, xuất hiện hộp thoại
Bước 3: Chọn thẻ General, chọn mẫu site cần tạo
Bước 4: Trong mục Specify the location of the new Web site chọn đường dẫn lưu
Web site bằng cách nhập trực tiếp hoặc nhấn vào nút Browse…
Bước 5: Nhấn nút OK hoàn tất việc tạo Web site
3.2.3. Đưa một trang Web vào Website
Bước 1: Trong hộp thoại Folder List chọn biểu tượng New Page hoặc kích chuột
phải chọn New → chọn Blank Page, trên hộp thoại sẽ chèn vào một trang mới
Bước 2: Nhập tên cần đặt cho trang vừa mới tạo, sau đó nhấn Enter
3.2.4. Soạn thảo nội dung trên trang Web
Sau khi một trang mới đã được mở, sẵn sàng cho bạn đưa dữ liệu và hình ảnh trang
trí vào, trong phần góc dưới bên trái của cửa sổ Frontpage có ba bảng (tab) chọn lựa
gồm Design, Split, Code, Preview.
Sử dụng soạn thảo font Unicode trong ForntPage:
− Vào menu File  chọn Properties  chọn Language  chọn Save the
document as  chọn Unicode (UTF-8).
− Hay chọn chế độ hiển thị Code và thay thế dòng <meta http-equiv=”Content-
Type” content=”text/ html; charset=windows-1252"> (ở giữa hai thẻ <head>

và </head>) thành <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8"> rồi chuyển trở lại chế độ Design soạn thảo.
Nguyễn Thị Thu Hà Trang 20
Bài giảng thiết kế trang Web trung cấp
Chú ý: Nếu dùng font tiếng Việt khác như ABC, VNI, Bách Khoa, bạn phải thay
bằng dòng <meta http-equiv=”Content-Type” content=”text/html; charset=x-user-
defined”>.
3.2.5. Lưu trang web
− Vào File  Save
3.3.Định dạng văn bản trong FrontPage
3.3.1. Định dạng ký tự
Bước 1: Vào menu Format  chọn Font…  chọn thẻ Font
Bước 2: Chọn font chữ mục Font, chọn kiểu font tại mục Font style, chọn kích cỡ
tại mục Size, màu chữ tại mục Color, chọn các hiệu ứng khác trong phần Effects
Bước 3: Nhấn OK
3.3.2. Định dạng đoạn văn bản (Paragraph)
• Tạo một dòng mới mà không có khoảng trắng với dòng trên đó: Nhấn Shift +
Enter.
• Tạo một đoạn mới
+ Để tạo một đoạn mới với cùng kiểu với đoạn hiện tại, đặt điểm chèn tới cuối
đoạn trên và nhấn Enter.
+ Để chia nhỏ đoạn hiện tại, đặt điểm chèn tại vị trí muốn chia trong đoạn và
nhấn Enter.
Nguyễn Thị Thu Hà Trang 21
Bài giảng thiết kế trang Web trung cấp
• Đặt văn bản thụt vào hoặc thụt ra so với lề của đoạn hiện thời
Bước 1: Chọn văn bản muốn thực hiện thụt lề
Bước 2: Nhấn nút Decrease Indent (thụt ra), nút Increase Indent (thụt
vào)
3.3.3. Tạo danh sách trong FrontPage

Bước 1: Chọn các dòng văn bản muốn thêm dấu Bullet hoặc Number
Bước 2: Vào menu Format  chọn Bullets and Numbering
Bước 3: Chọn thẻ Plain Bullets nếu đánh danh sách theo kiểu bullet, chọn thẻ
Numbers nếu đánh danh sách theo số thứ tự
3.3.4. Tạo màu nền văn bản
Vào Format  chọn Background hoặc kích chuột phải lên nền chọn Page
properties  chọn thẻ Background
− Background picture: Chọn check box này để sử dụng một ảnh nền. ảnh sẽ trải
theo dạng lát gạch trên nền trang. Gõ tên của đường dẫn đến file ảnh hoặc kích
nút Browse để tìm file này.
− Watermark: Chọn để hiển thị ảnh như một “watermark”.
Nguyễn Thị Thu Hà Trang 22
Bài giảng thiết kế trang Web trung cấp
− Background: Đặc tả màu nền của trang bằng cách chọn màu từ danh sách. Để
chọn một màu chưa xuất hiện trên danh sách, kích Custom và chọn một màu tại
hộp hội thoại Color.
− Text: Đặc tả màu của text trên trang bằng cách chọn màu từ danh sách.
− Hyperlink: Đặc tả màu của siêu liên kết trên trang.
− Visited Hyperlink: Đặc tả màu liên kết đã được tham chiếu đến.
− Active Hyperlink: Đặc tả màu của siêu liên kết đang kích hoạt.
− Get Background and Colors From Page: Chọn nền và màu từ một trang khác
bằng cách gõ đường dẫn đến trang tại đây hoặc kích nút Browse để tìm trang.
3.4. Siêu liên kết trong FrontPage
3.4.1. Liên kết trong trang (Bookmark)
• Tạo Bookmark trên trang web
Bước 1: Chọn vị trí cần đặt Bookmark
Bước 2: Vào menu Insert  chọn Bookmark…, xuất hiện hộp thoại
Bước 3 : Gõ tên cần đặt cho Bookmark trong mục Bookmark name
Bước 4: Nhấn OK
• Xoá Bookmark

Bước 1: Đặt trỏ text lên bất kì chỗ nào trong text chứa bookmark.
Bước 2: Vào menu Edit chọn Go to Bookmark hoặc nhấn tổ hợp Ctrl +G
Bước 3: Chọn tên Bookmark cần xoá  nhấn nút Clear
Bước 4: Nhấn nút OK
Nguyễn Thị Thu Hà Trang 23
Bài giảng thiết kế trang Web trung cấp
• Tạo liên kết
Bước 1: Chọn văn bản và hình cần tạo liên kết
Bước 2:Vào menu Insert  chọn Hyperlink hoặc kích nút Create or Edit
Hyperlink , xuất hiện hộp thoại:
Bước 3: Chọn nút Bookmark… để chèn chọn tên bookmark
Bước 4: Nhấn OK
3.4.2. Liên kết đến các trang trong website hiện hành
Tương tự như các bước thực hiện liên kết trong trang mở hộp thoại Insert
Hyperlink, chọn trang cần liên kết đến
3.4.3. Liên kết đến các địa chỉ Web
Tương tự như các bước thực hiện liên kết trong trang mở hộp thoại Insert
Hyperlink, tại mục Address nhập địa chỉ Web cần liên kết đến
3.4.4. Liên kết đến đến hộp thư điện tử (E-mail)
Tương tự như các bước thực hiện liên kết trong trang mở hộp thoại Insert
Hyperlink, chọn mục E-mail Address.
3.5. Hình ảnh trong Frontpage
3.5.1. Các loại ảnh được hỗ trợ trong HTML
Các ảnh trên các trang Web phải có định dạng hoặc là Graphics Interchange
Format (GIF) hoặc là Joint Photographic Expert Group format (JPEG).
FrontPage cho phép import các ảnh theo các định dạng sau: GIF, JPEG (standard
and progressive), BMP (Windows and OS/2), TIFF, TGA, RAS, EPS, PCX, và WMF.
Khi đó, FrontPage chuyển đổi các ảnh được imported thành ảnh GIF (cho các ảnh chứa
tới 256 màu) hoặc ảnh JPEG (cho các ảnh chứa trên 256 màu) khi trang được lưu trữ
trong FrontPage web hiện thời.

3.5.2. Chèn hình ảnh
Nguyễn Thị Thu Hà Trang 24
Bài giảng thiết kế trang Web trung cấp
• Chèn hình Clip Art
Bước 1: Chọn trang muốn chèn hình Clip Art
Bước 2: Vào menu Insert → chọn Picture → chọn Clip Art, trên thanh tác vụ Clip
Art hiển thị. Trong hộp Search nhập từ hoặc cụm từ mô tả hình bạn muốn chọn, sau
đó nhấn nút Go
Bước 3: Chọn hình Clip Art cần chèn vào trang
• Chèn hình từ một file
Bước 1: Chọn trang muốn chèn ảnh.
Bước 2: Chọn menu Insert → chọn Picture → chọn From File, xuất hiện hộp hội
thoại Picture
Bước 3: Trong hộp Look In chọn thư mục chứa ảnh cần chèn. Chọn loại file từ hộp
Files of Type.
Bước 4: Chọn ảnh muốn chèn và kích OK
3.5.3. Hiệu chỉnh ảnh
− Xoá hình: Nhấn chuột vào hình cần xoá, sau đó nhấn phím Delete
− Xoá chọn hình: nhấn chuột vào bất kỳ vị trí nào trên trang ngoại trừ trên hình
− Thay đổi kích cỡ ảnh: Nhấn vào hình để chọn hình, xung quanh hình xuất hiện
các núm hình vuông nhỏ. Nhấn giữ chuột trên các núm vuông ở các góc và rê đi
để thay đổi kích thước của hình.
Nguyễn Thị Thu Hà Trang 25

Bài giảng thiết kế trang Web trung cấp

Tài liệu liên quan

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