1. Trang chủ
  2. » Giáo án - Bài giảng

Bài Giảng Thiết Kế Web

94 1 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Bài Giảng Thiết Kế Web
Trường học Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành Công Nghệ Thông Tin
Thể loại Bài Giảng
Năm xuất bản 2024
Thành phố Hà Nội
Định dạng
Số trang 94
Dung lượng 1,8 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

CHƯƠNG 1 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU ACCESS CHƯƠNG 1 TỔNG QUAN VỀ INTERNET 1 1 GIỚI THIỆU Mạng Internet mang lại rất nhiều tiện ích hữu dụng cho người sử dụng, một trong các tiện ích phổ thông của Inter[.]

Trang 1

CHƯƠNG 1: TỔNG QUAN VỀ INTERNET

1.1 GIỚI THIỆU

Mạng Internet mang lại rất nhiều tiện ích hữu dụng cho người sử dụng, một trong các tiện ích

phổ thông của Internet là hệ thống thư điện tử (email), trò chuyện trực tuyến (chat), máy truy tìm dữ liệu (search engine), các dịch vụ thương mãi và chuyển ngân, và các dịch vụ về y tế

giáo dục như là chữa bệnh từ xa hoặc tổ chức các lớp học ảo Chúng cung cấp một khối lượngthông tin và dịch vụ khổng lồ trên Internet

Nguồn thông tin khổng lồ kèm theo các dịch vụ tương ứng chính là hệ thống các trang Web

liên kết với nhau và các tài liệu khác trong WWW (World Wide Web) Trái với một số cách sử

dụng thường ngày, Internet và WWW không đồng nghĩa Internet là một tập hợp các mạngmáy tính kết nối với nhau bằng dây đồng, cáp quang, v.v.; còn WWW, hay Web, là một tập

hợp các tài liệu liên kết với nhau bằng các siêu liên kết (hyperlink) và các địa chỉ URL, và nó

có thể được truy nhập bằng cách sử dụng Internet

1.2 MỘT SỐ KHÁI NIỆM

1.2.1 Internet là gì?

Internet là mạng toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết hàng triệu máy tínhtrên thế giới thông qua cơ sở hạ tầng viễn thông Internet bắt đầu như là một phương tiện đểcác nhà nghiên cứu và khoa học ở các cơ sở khác nhau và các nước khác nhau có thể chia sẻ

- WWW nằm ở lớp trên cùng của Internet, nó là thông tin đồ hoạ nằm tại các máy chủ (server)

mà mọi người truy cập đến

Internet là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm các mạngmáy tính được liên kết với nhau Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữliệu (packet switching) dựa trên một giao thức liên mạng đã được chuẩn hóa (giao thức IP)

Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các việnnghiên cứu và các trường đại học, của người dùng cá nhân, và các chính phủ trên toàn cầu

Trang 2

1.2.2 Các giao thức SMTP, FTP, HTTP, URL.

SMTP (Simple Mail Transfer Protocol)

SMTP là giao thức tin cậy chịu trách nhiệm phân phát Mail, nó chuyển Mail từ hệ thốngmạng này sang hệ thống mạng khác, chuyển Mail trong hệ thống mạng nội bộ Giao thứcSMTP được định nghĩa trong RFC 821, SMTP là một dịch vụ tin cậy, hướng kếtnối( connection-oriented) được cung cấp bởi giao thức TCP(Transmission Control Protocol ),

nó sử dụng số hiệu cổng (well-known port) 25

FTP (file transfer protocol)

FTP (giao thức truyền tệp) dùng để truyền tải tài liệu từ một máy vi tính này tới một cái khácqua mạng web toàn cầu, hoặc xuyên qua một mạng máy nào khác

HTTP (Hypertext Transfer Protocol)

HTTP (giao thức truyền tải siêu văn bản) là một giao thức viễn thông dùng để chuyển hoặctruyền tải thông tin trên mạng web toàn cầu

URL ( Uniform Resource Locator)

URL được dùng để tham chiếu tới tài nguyên trên Internet URL mang lại khả năng siêu liên kết cho các trang mạng Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL

1.2.3 Web browser, Web server.

Web Browser (Trình duyệt web)

Là phần mềm được sử dụng để truy cập vào những trang web, cho phép chúng ta xem nội

dung trang web là nội dung bằng chữ, những hình ảnh Khi trình duyệt được cài thêm những

hỗ trợ, chúng ta có thể xem, nghe, thưởng thức những nội dung Multimedia (đa phương tiện) như phim, nhạc, hoạt hình Flash, Sau đây gọi tắt trình duyệt web là trình duyệt)

Vì sao phải dùng trình duyệt để xem web?

Bản thân tự máy tính không thể kết nối vào giúp ta xem được mà phải thông qua một phần mềm, phần mềm này chính là trình duyệt Những trang web khi được thiết kế, lưu trữ trên mạng sẽ dưới dạng những trang HTML, nó là những tập tin bằng văn bản thô Người sử dụng không thể đọc trực tiếp nội dung của những file này Trình duyệt chính là công cụ đọc những file này, phiên dịch và hiển thị nó thành một bố cục gồm có chữ, hình ảnh, màu sắc đồ họa,

Trang 3

multimedia Như vậy, người truy cập web sẽ đọc được những nội dung này Trình duyệt liên

hệ với máy phục vụ web (web server) qua giao thức HTTP hoặc HTTPS

Một số loại trình duyệt web thông dụng

Trình duyệt Internet Explorer

Bạn có hay nghe người ta nhắc đến Internet Explorer? Hoặc gọi là IE (đọc là i-e ấy) Nó chính

là một trình duyệt nổi tiếng Trình duyệt này đã đi kèm với máy tính hệ điều hành Windows của bạn

Biểu tượng trình duyệt Internet Explorer 6.0 (IE 6.0)

Ưu điểm: trình duyệt này máy nào cũng có Nhiều trang web được thiết kế phục vụ cho người

dùng trình duyệt này nên việc hiển thị trang là đẹp nhất trong số các trình duyệt

Nhược điểm: tốc độ nạp trang không nhanh lắm, dễ bị những trang web độc hại, mã độc,

virus lợi dụng lỗ hổng của trình duyệt này chui vào máy gây mất an toàn cho người sử dụng

 Trình duyệt Firefox

Trình duyệt này chỉ mới xuất hiện những năm gần đây nhưng đã tạo được tiếng vang lớn Nó

có nhiều tính năng hay mà lại hoàn toàn miễn phí

Ưu điểm: Hỗ trợ tốt những chuẩn thiết kế web hiện đại: CSS, Ajax Tốc độ duyệt khá nhanh,

hơn IE Đồng thời Firefox cho phép người dùng cài thêm những công cụ bổ sung có sẵn miễn phí mà người dùng có thể download từ trang http://getfirefox.com , cũng là trang chủ của trình duyệt Firefox Khi duyệt web với Firefox sẽ an toàn hơn so với IE, người dùng hạn chế được lừa đảo theo hình thức phishing, mã độc hại, virus từ các trang web

Nhược điểm: Vì vẫn còn nhiều trang web được thiết kế sai theo hỗ trợ của trình duyệt IE vì

thế mà khi duyệt những trang này với Firefox sẽ hiển thị không được tốt, bị "bể trang" Ngoài

ra, phải cài thêm hỗ trợ dạng Extension / Plug-ins mới có thể xem được một số trang

multimedia (xem phim, nghe nhạc)

Trang 4

Trình duyệt Opera

Đây được xem là một trình duyệt "thế hệ mới" Trình duyệt này người dùng thông thường ít

sử dụng, nhưng dân hay đi lạo xạo, lục lọi trên mạng thì rất thích bởi giao diện không quá rườm rà, rối mắt, tính năng nhiều

Ưu điểm: Trình duyệtTrình duyệt này hỗ trợ tốt những chuẩn thiết kế web mới: CSS, Ajax,

bố cục dạng tableless (không dùng table để dàn dựng bố cục trang web) Trình duyệt này duyệt web tốc độ rất nhanh, nhanh nhất trong các loại trình duyệt liệt kê ở đây Một ưu điểm rất đáng kể: vô hiệu hóa hầu hết những trang web chứa virus, mã độc, với mục đích xấu, tấncông người dùng Dùng Opera là an toàn nhất trong các loại trình duyệt Khi download file tốc độ nhanh, nếu chẳng may mạng bị không ổn định, đứt nửa chừng thì có thể download tiếp tục phần còn lại sau đó (khi server cho tải file có khả năng hỗ trợ resume) Trình duyệt này chạy cả trên những máy cũ sì dùng Windows 98

Nhược điểm: Vì Opera hạn chế những đoạn script có khả năng gây hại máy người dùng nên

đôi lúc nó cũng loại bỏ khả năng của các trình soạn thảo văn bản trực tuyến dạng

WYSIWYG Một số ký tự tiếng Việt có dấu như ê, ư hiển thị hơi không được đẹp

 Trình duyệt Netscape

Đây là trình duyệt lâu đời nhất trong các trình duyệt Nó là kẻ đi đầu và đưa ra khái niệm trìnhduyệt có khả năng hiển thị trang tài liệu siêu văn bản HTML (tức trang web có các liên kêt, hình ảnh, đồ họa, multimedia)

Thời vàng son ngày xưa của trình duyệt này đã trôi qua, vị trí thống lĩnh của nó trên thế giới không còn nữa Tuy nhiên, nếu bạn là người dùng web, đây cũng là một trình duyệt đáng để bạn để mắt tới, cài đặt vào máy sử dụng vì về mặt thương mại nó thua các trình duyệt khác, nhưng về mặt công nghệ nó không hề thua kém bất kỳ một anh tài nào trong giới trình duyệt

Sau một thời gian trầm lắng Netscape đã trở lại với phiên bản 8.x kế thừa và phát huy khả năng một thời, bổ sung nhiều tính năng đáng giá khác

Trang 5

Ưu điểm: Netscape xử lý rất tốt những trang web có dùng JavaScript nhưng vẫn không làm

lây nhiễm virus cho máy tính như IE Hỗ trợ các tính năng mới như đọc tin Rss Một điểm đáng giá: Netcape cho phép ta chọn cách xử lý một trang web để hiển thị theo trường phái IE hoặc Firefox Vì vậy riêng mình đó bằng 2 trình duyệt kia cộng lại Download file tốc độ rất cao, rất ít khi "đứng đực" ra hoặc dừng nửa chừng nếu không bị đứt mạng

Nhược điểm: vì Netscape không thông dụng lắm nên người mới sử dụng sẽ hơi lúng túng với

nó do nó hơi rườm rà một chút so với các trình duyệt khác

Các bạn có thể cài thêm 2 trình duyệt nữa vào máy (ngoài cái IE có sẵn) để sử dụng khi cần Không nên cài tất cả để tránh nặng máy không cần thiết

 Trình duyệt Safari:

Đây là trình duyệt của hãng máy tính nổi tiếng Apple mà bạn từng nghe đến các sản phẩm đình đám của hãng này như máy tính MAC, điện thoại di động iPhone, máy nghe nhạc iPod

Nếu bạn dùng máy MAC thì đương nhiên có sẵn trình duyệt này để dùng, khỏi bàn cãi

Còn nếu bạn dùng Windows: trình duyệt này cũng đã có phiên bản cho Windows

Ưu điểm: tốc độ khá tốt, giao điện đẹp do thiết kế rất gọn gàng, vào những trang web của tín

đồ máy MAC sẽ hiển thị rất tốt

Nhược điểm: font chữ trên Windows đôi khi thể hiện chữ trong trình duyệt này như có vẻ bị

gẫy bể hay là chữ to như gà mái Các plugins / add-on không phong phú bằng Firefox

Web Server

Web Server là máy chủ có dung lượng lớn, tốc độ cao, được dùng để lưu trữ thông tin nhưmột ngân hàng dữ liệu, chứa những website đã được thiết kế cùng với những thông tin liênquan khác (các mã Script, các chương trình, và các file Multimedia)

Web Server có khả năng gửi đến máy khách những trang Web thông qua môi trường Internet(hoặc Intranet) qua giao thức HTTP - giao thức được thiết kế để gửi các file đến trình duyệtWeb (Web Browser), và các giao thức khác

Trang 6

Tất cả các Web Server đều có một địa chỉ IP (IP Address) hoặc cũng có thể có một DomainName Giả sử khi bạn đánh vào thanh Address trên trình duyệt của bạn một dònghttp://www.abc.com sau đó gõ phím Enter bạn sẽ gửi một yêu cầu đến một Server có DomainName là www.abc.com Server này sẽ tìm trang Web có tên là index.htm rồi gửi nó đến trìnhduyệt của bạn.

Bất kỳ một máy tính nào cũng có thể trở thành một Web Server bởi việc cài đặt lên nó mộtchương trình phần mềm Server Software và sau đó kết nối vào Internet

Khi máy tính của bạn kết nối đến một Web Server và gửi đến yêu cầu truy cập các thông tin

từ một trang Web nào đó, Web Server Software sẽ nhận yêu cầu và gửi lại cho bạn nhữngthông tin mà bạn mong muốn

Giống như những phần mềm khác mà bạn đã từng cài đặt trên máy tính của mình, Web ServerSoftware cũng chỉ là một ứng dụng phần mềm Nó được cài đặt, và chạy trên máy tính dùnglàm Web Server, nhờ có chương trình này mà người sử dụng có thể truy cập đến các thông tincủa trang Web từ một máy tính khác ở trên mạng (Internet, Intranet)

Web Server Software còn có thể được tích hợp với CSDL (Database), hay điều khiển việc kếtnối vào CSDL để có thể truy cập và kết xuất thông tin từ CSDL lên các trang Web và truyềntải chúng đến người dùng

Server phải hoạt động liên tục 24/24 giờ, 7 ngày một tuần và 365 ngày một năm, để phục vụcho việc cung cấp thông tin trực tuyến Vị trí đặt server đóng vai trò quan trọng trong chấtlượng và tốc độ lưu chuyển thông tin từ server và máy tính truy cập

1.2.4 Một số thuật ngữ thông dụng trong trang web.

Trang chủ (Home page):

Trang chủ (Home Page hoặc Index Page) là trang đầu tiên hiện lên màn hình sau khi ngườixem gõ địa chỉ URL của Website vào khung Address của trình duyệt hoặc được kết nối bằnghyperlink từ các website khác

Trang chủ được xem như mặt tiền của website, như là trang bìa của một quyển sách hoặccatalogue nên thông thường nó được thiết kế thật kỹ, chú trọng đồ họa, không mang nhiềuthông tin mà chủ yếu làm sao cho bắt mắt, hấp dẫn người xem Để phục vụ mục đích này, cácứng dụng đồ họa như Flash Macromedia, Animation GifJava Scripts được sử dụng và từ

đó chi phí cho việc thiết kế trang chủ thường đắt hơn các trang nội dung bên trong, do phảitốn nhiều công sức hơn

Trang chủ phải mang thông tin ban đầu về nội dung mà website chứa đựng bên trong đểngười xem biết chắc mình đang xem gì và cái gì chờ đợi họ nếu họ click vào các button dẫnvào nội dung bên trong Ít nhất trang chủ cũng phải tải được tên của website là gì, chủ nhâncủa nó là ai và bên trong chứa những nội dung gì Nhiều hơn nữa, home page cho biết kháchvào thăm có thể được cung cấp những gì thông qua website này

Trang 7

Một trang chủ được thiết kế đúng khi nó không vượt quá diện tích của màn hình: người xemkhông cần phải click vào thanh scroll bar để xem phần còn lại bị che khuất; tên của websitephải dễ nhận thấy với độ tương phản thích hợp; màu sắc phải hài hòa với nội dung củawebsite Một điều không kém quan trọng khách là dung lượng của nó phải thấp vừa đủ đểngười xem không phải bực mình vì chờ đợi quá lâu vì trình duyệt tốn nhiều thời gian đểdownload Một nghiên cứu gần đây cho biết, nếu trang chủ không mở hết ra trong thời gian 8giây thì 90% người xem sẽ tìm kiếm chọn lựa khác ở một website khác.

Một đặc điểm của Home Page là tất cả các trang nội dung bên trong đề phải có liên kết trở vềtrang chủ Trang chủ cũng là nơi đặt các công cụ thống kê (Hit Counter) và các công cụ đặcbiệt khác để tìm hiểu tình hình hoạt động của website

Website

Là tập các trang web liên quan đến một công ty, một tập đoàn, một tổ chức hay một cá nhânnào đó

Forum là gì?

Forum (Diễn đàn điện tử) là 1 Website nơi mọi người có thể trao đổi, thảo luận, bày bỏ ý kiến

về những vấn đề cùng quan tâm Các vấn đề thảo luận được lưu giữ dưới dạng các trang tin.Đây là hình thức thảo luận không trực tiếp, bạn có thể đưa bài thảo luận của mình lên Forumnhưng có khi ngay lập tức hoặc vài ngày, vài tuần, thậm chí vài tháng sau mới có người trả lờivấn đề của bạn

Bức tường lửa (Firewall) là gì?

Khi tổ chức một bữa tiệc, bạn phân công một người đứng ở cửa ra vào để kiểm tra xem ngườiđến tham dự có đúng trong danh sách khách mời hay không Những ai không có tên sẽ bị từchối Đó cũng chính là cách thức làm việc của bức tường lửa trên mạng

Bức tường lửa có thể là một thiết bị định hướng (Router, một thiết bị kết nối giữa hai haynhiều mạng và chuyển các thông tin giữa các mạng này) hay trên một máy chủ (Server) Côngviệc của chúng là ngăn chặn những người dùng không mong muốn truy cập vào mạng và chophép người dùng hợp lệ thực hiện việc truy xuất Ngoài ra, nó cũng có khả năng ngăn chặnngười bên trong công ty, ngân hàng giao tiếp với kẻ xấu bên ngoài; chẳng hạn việc nhânviên giao dịch với đối thủ cạnh tranh

Tóm lại: Bức tường lửa bao gồm phần cứng và/hoặc phần mềm nằm giữa hai mạng (chẳnghạn mạng Internet và mạng liên kết các Ngân hàng) Bức tường lửa này sẽ bảo vệ mạng liênkết giữa các Ngân hàng, cấm người dùng không mong muốn truy cập, cho phép người dùnghợp lệ truy cập, ngăn chặn những thông điệp không tốt (ảnh hưởng đến các hoạt động củacông ty) gửi đi ra bên ngoài mạng, chẳng hạn đến đối thủ cạnh tranh

Trang 8

1.3 CÁC DỊCH VỤ CƠ BẢN MẠNG INTERNET

1.3.1 Dịch vụ Web (WWW).

Với bất cứ ai trên thế giới truy nhập vào Internet, cụm 3 chữ tắt www giống như câu thần chú

“Vừng ơi, hãy mở ra” cho cánh cửa vào thế giới Web mênh mông Không thể nào biết chínhxác số lượng trang Web hiện nay

World Wide Web (www, Web rộng khắp thế giới, hay mạng toàn cầu), còn được gọi tắt

là Web, là một hệ thống các máy chủ Internet hỗ trợ các tài liệu được định dạng một cách đặcbiệt bằng một ngôn ngữ đánh dấu (markup) gọi là HTML (HyperText Markup Language,ngôn ngữ đánh dấu siêu văn bản), hỗ trợ các liên kết (link) tới các tài liệu khác, cũng như tớicác file đồ họa, âm thanh và video Nghĩa là, các trang Web có tính tương tác, không chỉ cóchữ mà còn chứa đựng cả âm thanh, hình ảnh, phim, Bạn có thể nhảy phóc từ tài liệu nàysang tài liệu khác chỉ bằng động tác click chuột lên các điểm nóng (hot spot) trên tài liệu đangmở

Xin lưu ý, không phải tất cả các máy chủ Internet đều là một thành phần của www cảđâu Và www không đồng nghĩa với Internet Đây là hai hệ thống khác nhau, nhưng có mốiquan hệ với nhau Sự khác biệt giữa www và Internet ra sao?

Internet là một hệ thống đồ sộ gồm các mạng, một cơ sở hạ tầng hoạt động mạng Nóinôm na, nó là mạng của các mạng Internet kết nối hàng triệu máy tính trên toàn cầu lại vớinhau, hình thành một hệ thống mà trong đó bất cứ máy tính nào cũng có thể liên lạc với bất cứmáy tính nào khác khi chúng đang cùng được kết nối vào Internet Thông tin lưu chuyển trênInternet vì thế thông qua rất nhiều ngôn ngữ, gọi là các giao thức (protocol)

Còn www là một cách truy xuất thông tin trên khắp môi trường Internet Web dùng giaothức HTTP (HyperText Transfer Protocol, giao thức truyền siêu văn bản), chỉ là một trong cácngôn ngữ được sử dụng trên Internet, để truyền dữ liệu Các dịch vụ Web, vốn sử dụng HTTP

để cho phép các ứng dụng trao đổi logic giao dịch, dùng Web để chia sẻ thông tin Nói tómlại, Web chỉ là một trong các cách thức để thông tin có thể được phổ biến trên Internet Bảnthân Internet cũng có khả năng giao dịch như dùng e-mail với giao thức SMTP, các nhómthông tin Usenet, tin nhắn tức thì và giao thức truyền tải file FTP

Có nhiều ứng dụng gọi là trình duyệt Web (Web browser), như Internet Explorer,Netscape, Opera, giúp bạn dễ dàng truy xuất các trang Web

Ngày nay, với nhiều tỷ trang Web và ngày càng sinh sôi nảy nở, Web đã trở thành một

vũ trụ thông tin có thể truy xuất qua mạng, một hiện thân của tri thức nhân loại, và một kho trithức của loài người

Cha đẻ của www chính là Tim Berners-Lee Ông là nhà sáng lập và hiện đứng đầu WorldWide Web Consortium (đại tổ hợp công ty W3C) tại Học viện Công nghệ MassachusettsInstitute of Technology ở Boston (Mỹ) W3C có nhiệm vụ phát triển các công nghệ có khảnăng hoạt động toàn cầu để phát huy hết tiềm năng của Web

Trang 9

Hồi giữa tháng 4-2004, Ủy ban Giải thưởng Công nghệ Phần Lan đã nhất trí trao Giảithưởng Công nghệ Thiên niên kỷ (Millennium Technology Prize) đầu tiên của mình cho TimBerners-Lee, giám đốc W3C Đối tượng để nhận giải này là “các thành tựu công nghệ xuấtchúng trực tiếp giúp nâng cao chất lượng sống của con người, dựa trên các giá trị con người,

và cổ vũ cho sự phát triển kinh tế bền vững” Pekka Tarjanne, cựu Tổng thư ký Liên minhViễn thông Quốc tế (ITU) và Chủ tịch Ủy ban Tuyển chọn Giải thưởng Quốc tế (IASC) nhậnxét: “Web đã đề cao một cách đáng kể năng lực của nhiều người để đạt được thông tin phục

vụ cuộc sống của họ Web đang cổ vũ các dạng thức mới của các hệ thống xã hội, hỗ trợ sựminh bạch và dân chủ, và mở ra những con đường kỳ diệu cho việc quản lý thông tin và pháttriển doanh nghiệp.”

Berners-Lee sinh năm 1955 tại Luân Đôn (Anh) Ông tốt nghiệp Đại học Oxford ở Anh.Với vốn liếng kinh nghiệm về thiết kế hệ thống trong thông tin liên lạc thời gian thật và vềphát triển phần mềm xử lý văn bản, ông đã phát minh ra Web trong thời gian làm việc tạiCERN, phòng thí nghiệm vật lý hạt nhân lớn nhất thế giới ở Geneve (Thụy Sĩ) Hệ thống Web

là một dịch vụ khai thác sự nối mạng toàn cầu của Internet Web chính thức được giới thiệuvới công chúng vào năm 1991 Berners-Lee đã hình thành máy chủ đầu tiên, viết trình duyệtWeb đầu tiên, và phát minh ra các giao thức dùng cho hoạt động của Web: địa chỉ URL(Uniform Resource Locator, vị trí nguồn đồng nhất, địa chỉ toàn cầu của các tài liệu và cácnguồn dữ liệu khác trên Web), giao thức HTTP và bộ mã HTML

1.3.2 Thư điện tử (E-mail)

Email là thư điện tử Thay vì nội dung thư của bạn được viết lên giấy và chuyển đi qua đườngbưu điện thì email được lưu dưới dạng các tệp văn bản trong máy tính và được chuyển đi quađường Internet

Lợi ích của email

- Tốc độ cao: Vì email được chuyển qua đường Internet dưới dạng các tín hiệu điện nên tốc

độ di chuyển của email gần như là tức thời Với các bức thư tín bình thường, bạn có thể phải mất một vài ngày để thư có thể tới được địa chỉ cần thiết nhưng với email, sau cú click chuột vào nút gửi thư, người nhận đã có thể đọc được nội dung thư của bạn gửi cho họ

- Chi phí rẻ: Với các thư tín bình thường, bạn phải tốn một khoản chi phí khá lớn khi gửi các bức thư của mình đi Còn với email, bạn chỉ tốn một khoản phí rất nhỏ để kết nối internet cùng với chi phí cho dịch vụ email của bạn Bạn cũng có thể dùng dịch vụ email miễn phí Khi đó chi phí của bạn cho các bức thư hầu như không đáng kể

- Không có khoảng cách: Với email, người nhận cho dù ở xa bạn nửa vòng trái đất hay ngay cùng phòng làm việc với bạn, việc gửi và nhận thư cũng đều được thực hiện gần như ngay lậptức Và chi phí cho các bức thư đó cũng đều rẻ như nhau

1.3.3 Truyền và nhận File (FTP).

FTP là viết tắt của cụm từ File Transfer Protocol – là một giao thức truyền tệp tin trên mạngInternet Khi máy chủ hỗ trợ FTP, bạn có thể sử dụng các phần mềm FTP (FTP Client) để kết

Trang 10

nối với máy chủ và tải lên các tệp tin dữ liệu cũng như cập nhật website của mình một cách dễdàng.

1.3.4 Tán gẫu (Chat).

Chat là hình thức thảo luận trực tiếp trên Internet, bạn có thể thảo luận, trao đổi và nhận đượccâu trả lời hầu như ngay lập tức, cũng tương tự như khi bạn nói chuyện qua điện thoại vậy Đểgiới hạn chủ đề, thông thường người ta chia ra thành các Chatroom theo 1 chủ đề nào đó, ví

dụ theo khu vực, theo lứa tuổi,

1.4 KHAI THÁC CÁC TÀI NGUYÊN MẠNG

1.5 CÀI ĐẶT, CẤU HÌNH WEB SERVER

Sau khi đã hoàn thành việc cài đặt IIS, vào Control panel, Administrative tool, khởi độngInterner Services Manager:

1 Click chuột phải vào tên máy chủ (gốc của cây được đánh dấu bởi dấu hoa thị), chọn New,Website, cửa sổ Website Creation Wizard hiện ra, chọn Next

2 Đánh vào phần mô tả của Website của bạn và chọn Next (Ví dụ: dyndns)

Trang 11

3 Trong trường IP address chọn All Unssigned.

4 Trong trường port chọn port 80 hoặc port khác nếu bạn sử dụng port thay thế (hoặc nếu ISPcủa bạn khóa port 80)

5 Trong trường Header gõ vào tên miền (ví dụ: dyndns.vnnic.net.vn) và chọn Next

Trang 12

6 Chọn vào Browser và trỏ tới thư mục nơi lưu trữ các file của Website cho tên miền(domain) trên (ví dụ: C:\Document and Setting\Administrator\Mydocument\Website\Dyndns) Đảm bảo chắc chắn rằng hộp thoại “Allow anonymous access to website” đã đượcchọn nếu bạn muốn tất cả người dùng đều nhìn thấy website của bạn Chọn Next.

7 Có thể cấu hình thêm một số tuỳ chọn khác tuỳ theo yêu cầu của bạn:

Trang 13

8 Chọn Finish để kết thúc quá trình thiết lập Website.

Bạn có thể lặp lại các bước này để thiết lập các Website khác

Bây giờ tên Website đã xuất hiện trong danh sách server

Trang 14

- Để kiểm tra xem click chuột phải lên tên Website và chọn vào Browse hoặc bật cửa sổInternet Explore (IE) lên và đánh tên miền của bạn vào trường URL (ví dụ:dyndns.vnnic.net.vn).

Bạn có thể lặp lại chu trình trên để thiết lập nhiều Website mà bạn muốn bằng IIS

Cấu hình và sửa lỗi cho các Website:

Nếu bạn không nhìn thấy Website của mình hoặc chỉ nhìn thấy cửa sổ login bạn sẽ phải cấuhình lại cho chính xác quyền truy cập vào Website của mình hoặc file index mà bạn sẽ dùngcho Website của bạn

1 Click chuột phải vào tên Website nằm trong danh sách server mà bạn mới thiết lập và chọnProperty từ menu đó

Trang 15

2 Chọn vào tad Directory Security và chọn vào mục Edit “Anonymous Access …”.

3 Đảm bảo chắc chắn rằng Anonymous Access property được chọn và click chuột vào nútEdit

4 Xem xét xem tài khoản của người sử dụng có được quyền truy cập vào máy tính hay thưmục Website của bạn không

Để chắc chắn bạn có vấn đề về quyền truy nhập, hãy thử sử dụng tài khoản Administrator ởđây

Sau khi đã giải quyết vấn đề về quyền truy nhập nhưng bạn vẫn nhận được thông báo

“Directory Listing Denied”, chắc chắn bạn đã trỏ Website của bạn tới file index không phùhợp với file index được phép hoặc đã đăng ký cho Website của bạn

1 Click chuột phải vào tên Website nằm trong danh sách server của bạn mà bạn mới thiết lập

và chọn Property từ menu đó

2 Click vào Document tab

Trang 16

3 Click Add và đánh vào tên file index của bạn rồi ấn OK (ví dụ: Website dyndns ở trên cófile index dạng index.htm).

4 Ấn tiếp OK để kết thúc

Bây giờ thử mở Browse và gõ vào trường URL tên miền của bạn, nếu cấu hình chính xácWebsite sẽ chạy

Lặp lại chu trình trên để cấu hình cho tất cả các Website sử dụng IIS

CHƯƠNG 2: THIẾT KẾ TRANG WEB

2.1.1 Thẻ (tag) HTML là gì.

Khi trình duyệt Web đọc một file HTML, nó sẽ tìm trong file đó các tag hay những đoạn mãđặc biệt để biết cách hiển thị file HTML đó

Trang 17

Ví dụ: Khi trong file HTML có đoạn

<h3> Cấu trúc của file HTML </h3>

thì sẽ hiển thị đoạn "Cấu trúc của file HTML" lên trên màn hình với mức độ tiêu đề thức 3 (sẽnói kỹ ở phần sau)

Các tag HTML báo cho trình duyệt biết cách khi nào thì in đậm một dòng văn bản, innghiêng, biến dòng văn bản thành một siêu liên kết tới các trang Web khác, hiển thị ảnh Trong ví dụ trên ta thấy sau tag <h3> và đoạn văn bản là tag </h3> Trong tag </h3> ta thấy

có dấu / , dấu / nằm trong 1 tag báo hiệu cho trình duyệt biết là hiệu ứng của tag đó đã kếtthúc

Như vậy việc sử dụng một tag HTML như sau:

<tên tag> vùng văn bản chịu tác động </tên tag>

Chú ý: Trình duyệt không quan tâm tên tag là chữ hoa hay chữ thường nên việc viết <h3> và

<H3> là như nhau

2.1.2 Cấu trúc của một file HTML.

File HTML bao giờ cũng bắt đầu bằng thẻ <html> và kết thúc bằng thẻ </html> Cặp thẻ nàybáo cho trình duyệt Web biết rằng nó đang đọc một file có chứa các mã HTML, còn thẻ

</html> có tác dụng như kết thúc file HTML

Bên trong cặp thẻ <html> </html> là các cặp thẻ <head> </head> và <body> </body>

là phần thân, tại đây bạn có thể nhập vào các đoạn văn bản cùng các thẻ khác quy định vềđịnh dạng của trang

Ngoài ra để ghi chú thích, tiện cho việc xem tag HTML hoặc cập nhật một trang Web, ta cầnđặt chú thích vào giữa <! và >

Tóm lại cấu trúc cơ bản của một file HTML là

<html>

<head>

Trang 18

<title> Tên trang </title>

2.1.3 Tạo file HTML đầu tiên.

Sau khi đã đọc phần trên, bạn đã biết thế nào là thẻ HTML và cấu trúc chung của một fileHTML Sau đây chúng ta sẽ cùng tạo ra file HTML đầu tiên

1 Mở Notepad của Windows hay bất kỳ một trình soạn thảo văn bản nào có thể tạo ra nhữngvăn bản trơn (plain text) Nếu bạn dùng Microsoft Word thì phải lưu trữ ở dạng ASCII

2 Bạn hãy nhập những dòng văn bản sau

3 Lưu file với phần mở rộng là htm Ví dụ Bai1.htm

Lưu ý: Bạn nên tạo một Folder riêng để chứa các tập tin mà bạn sẽ tạo ra trong suốt thời gian

học HTML

4 Khởi động IE hoặc Nescape Chọn File / Open Sử dụng hộp thoại để mở file HTML bạnvừa tạo

Trang 19

5 Bạn sẽ nhìn thấy trên tranh tiêu đề của trình duyệt là dòng chữ "Chân trời tri thức - Internettoday" và trong trang dưới là "Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức củatạp chí Công nghệ Thông tin Internet Today Trong phần này bạn sẽ được học những kiếnthức cơ bản về HTML, công cụ để tạo ra các trang Web Sau khi đã học xong về HTML bạn

có thể tạo ra những trang Web đầy ấn tượng với văn bản, hình ảnh, âm thanh " mà bạn đãviết trong phần body

2.2 MỘT SỐ TAG CƠ BẢN TRONG HTML

2.2.1 Định dạng văn bản

Định dạng nội dung hiển thị

Khi trình bày một trang Web, có lúc cần nhấn mạnh, hay để tạo sự khác biệt, bạn cần phảihiển thị văn bản ở các dạng đậm, nghiêng, gạch chân HTML có các tag định dạng kiểu chữ

để giúp bạn

HTML Kết quả

<u>Ðây là tag gạch chân</u> Ðây là tag gạch chân

<i>Ðây là tag nghiêng </i> Ðây là tag nghiêng

<tt>Ðây là tag chữ đánh máy</tt> Ðây là tag chữ đánh máy

<b>Ðây là tag đậm </b> Ðây là tag đậm

<em>Ðây là tag </em> Ðây là tag Strong

<strong>Ðây là tag strong</strong> Ðây là tag Strong

<strike>Ðây là tag strong</strike> Ðây là tag strikeline

Bạn có thể kết hợp các tag này với nhau, miễn là chúng được lồng vào nhau một cách chínhxác Ví dụ:

<b> <i> </i> </b>

Tag in nghiêng phải nằm trong tag in đậm

Hơn nữa bạn có thể áp dụng các tag với tiêu đề

<h2> <i> </i> <h2>

Trang 20

Ví dụ:

áp dụng vào file HTML của bạn

1 Tạo một file HTML mới

2 Thêm các tag định dạng kiểu chữ Lúc này file HTML của bạn trong phần body có dạngnhư sau

<h3><b><i>Chú ý khi tạo file HTML</i></b></h3>

Nếu bạn dùng các chương trình soạn thảo văn bản<b><u> khác NotePad của Windows

</u></b>thì bạn phải nhớ lưu kết quả ở dạng văn bản trơn (ASCII)

3 Lưu công việc của bạn

4 Dùng trình duyệt mở và so sánh với ví dụ mẫu

Trang 21

Thêm các tiêu đề vào trang Web của bạn.

1 Mở lại file HTML mà bạn đã tạo ra ở bài học trước bằng trình soạn thảo văn bản mà bạn đãdùng để tạo ra nó

2 Thêm đoạn sau vào file HTML Bạn cần lưu ý đoạn thêm vào phải nằm giữa <body> và

</body>

<h1>Gới thiệu chung</h1>

vào trước đoạn "Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức của tạp chí Côngnghệ Thông tin Internet Today Trong phần này bạn sẽ được học những kiến thức cơ bản vềHTML, công cụ để tạo ra các trang Web Sau khi đã học xong về HTML bạn có thể tạo ranhững trang Web đầy ấn tượng với văn bản, hình ảnh, âm thanh

3 Lưu công việc bạn vừa làm

4 Dùng trình duyệt Web để mở file HTML bạn vừa tạo và so sánh với ví dụ mẫu, nếu bạnthấy khác bạn có thể phải xem lại những gì mình đã tạo trong file HTML

5 Chia văn bản thành nhiều đoạn

Trang 22

Trước hết bạn lại mở file HTML mà bạn đã tạo từ các bài học trước bằng trình soạn thảo vănbản, thay vì để văn bản như cũ, bây giờ ở cuối mỗi dòng bạn có thể gõ Enter vài lần, khi đóđoạn văn bản của bạn trông có vẻ như sau :

Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức của tạp chí Công nghệ Thông tinInternet Today Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ

để tạo ra các trang Web Sau khi đã học xong về HTML bạn có thể tạo ra những trang Webđầy ấn tượng với văn bản, hình ảnh, âm thanh

Lưu công việc bạn vừa làm và mở nó trên trình duyệt của bạn Khi đó bạn sẽ trông thấy kếtquả trên trình duyệt như sau :

Bạn cảm thấy có điều gì không đúng phải không? Bởi vì HTML bỏ qua dấu hiệu xuống dòngkhi bạn gõ Enter và bỏ qua các dòng trống nên bạn thấy đoạn văn bản mà bạn vừa nhập dù cóEnter để xuống dòng nhưng vẫn liền với nhau

Ðể chia đoạn HTML dùng tag <p>

Cũng lưu ý rằng tag <hx> gắn liền với sự chia đoạn nên bạn không cần phải đặt <p> trước

<hx>

Chèn các dấu chia đoạn vào file HTML của bạn.

1 Dựng trình soạn thảo văn bản để mở tile HTML mà bạn đã tạo từ trước

2 Chúng ta thêm đoạn mới vào văn bản, sau đoạn đầu

Tạp chí Internet Today là một tạp chí điện tử chuyên về Công nghệ thông tin Chúng tôi sẽgiúp các bạn tìm hiểu và khám phá những bí ẩn của HTML để bạn có thể tự tạo ra các trangWeb cho riêng mình

3 Ðưa con trỏ soạn thảo đến cuối đoạn đầu, thêm tag <p> Lúc này đoạn văn bản trông giốngnhư sau

Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức của tạp chí Công nghệ Thông tinInternet Today Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ

để tạo ra các trang Web Sau khi đã học xong về HTML bạn có thể tạo ra những trang Webđầy ấn tượng với văn bản, hình ảnh, âm thanh

Trang 23

Tạp chí Internet Today là một tạp chí điện tử chuyên về Công nghệ thông tin Chúng tôi sẽgiúp các bạn tìm hiểu và khám phá những bí ẩn của HTML để bạn có thể tự tạo ra các trangWeb cho riêng mình

4 Lưu lại công việc của bạn

5 Dùng trình duyệt mở lại file HTML của bạn và so sánh với ví dụ mẫu

c Phân đoạn:

Như bạn thấy, các đoạn văn bản đã được tách nhau do tác dụng của tag <p>

<hr> Chèn một đường thẳng vào trang Web của bạn, tag này thường dùng để chia những phầnchính của trang Web

<br> Ðẩy văn bản xuống một dòng mới, tag này khác tag <p> ở chỗ nó không chèn thêm vàotrang của bạn một dòng trống như tag <p> Bạn có thể sử dụng tag này khi tạo một danh sách,viết các dòng của một bài thơ

Ví dụ : Nếu trong file HTML có đoạn sau giữa tag<body> và </body>

Trang 24

Giữ nguyên đúng định dạng khi soạn thảo

Phần này trình bày về cách hiển thị các đoạn văn trong đó có cả các khoảng trắng và dấuxuống dòng

Như bạn đã biết trong các phần trước, trình duyệt bỏ qua các dòng trắng, dấu hiệu xuống dòngkhi ta soạn thảo Tuy nhiên bạn vẫn có thể hiển thị được văn bản như lúc bạn nhập vào bằngcách sử dụng tag <pre>

Sẽ được hiển thị như sau:

Thêm một kiểu trình bày cho trang Web của bạn

Ðể làm cho một khối văn bản nổi hơn, ví dụ một đoạn trích dẫn, một lời khuyên và làm chotrang Web của bạn trình bày được đẹp hơn, chúng ta sử dụng tag <blockquote> Ðoạn văn bản

Trang 25

nằm trong cặp tag <blockquote> và </bockquote> sẽ được trình bày thụt vào so với phần thânvăn bản.

Ví dụ để nhìn thấy đoạn văn bản như sau:

Bạn phải viết như sau:

Khi cần trình bày một đoạn văn bản lùi sâu vào bên trong so với toàn bộ văn bản để đoạn vănbản được nổi bật hơn, ví dụ bạn cần hiển thị một chú ý, khi đó bạn hãy dùng tag

Sử dụng các ký tự đặc biệt

Ðôi khi trong trang Web của bạn có các ký tự đặc biệt, chẳng hạn như ký tự không phải làtiếng Anh, một dấu nhấn HTML quy định việc hiển thị các ký tự đó như sau

&XXXX;

Trang 26

trong đó XXXX là tên mã cho các ký tự đặc biệt đó Bạn có thể xem Danh sách các ký tự đặcbiệt này để biết thêm chi tiết.

Ví dụ nếu trong phần body có đoạn như sau:

<h2 align=center>&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml; </h2> Thì kết quả trên trình duyệt là:

Trong trang Web của bạn nhiều lúc phải hiển thị các ký tự như dấu lớn hơn (>) hoặc dấu nhỏhơn (<), dấu và (&) , mà các ký tự này trùng với ký hiệu của một tag Ðể hiển thị các ký tựnày, HTML cung cấp cho ta các ký hiệu thay thế như sau:

&lt; thay cho <

&gt; thay cho >

&amp; thay cho &

Ví dụ: Ðể hiển thị 700 > 400 ta viết như sau:

700 &gt; 400

Qua các bài học trước bạn đã biết rằng trình duyệt Web bỏ qua tất cả các khoảng trắng trongfile HTML Tuy nhiên để trình bày trang Web cho đẹp, bạn muốn chèn khoảng trắng vàotrong trang Web, ví dụ bạn muốn một khoảng trắng sau dấu chấm câu hay sau dấu phảy, chènkhoảng trắng vào đầu mỗi đoạn văn bản Muốn chèn khoảng trắng ta dùng ký hiệu

&nbsp;

Ngoài các ký hiệu đã mô tả ở trên, HTML còn cung cấp thêm cho chúng ta một số ký hiệu đặcbiệt nữa, đó là:

&copy; thay cho â

&reg; thay cho đ

Ví dụ

Trang 27

Thực hành

1.Tạo một file HTML sau đó thêm phần sau vào trong phần body

HTML có thể hiển thị được các ký tự đặc biệt như:

<ul>

<li>Các kýtựlatin:&gt;&gt;&gt;&AElig;&ntilde;&THORN;&oacute;&szlig;&yuml;

<li>Các dấu lớn hơn, nhỏ hơn, dấu và : &gt;&nbsp;&lt;&nbsp;&amp;

<li>Các dấu Copyright và Trademark : &copy;&nbsp;&reg

</ul>

2.Lưu công việc của bạn và so sánh với ví dụ mẫu:

Chú ý: Ðể hiển thị đúng các dấu Copyright và Trademark nếu bạn dùng font Tiếng Việt thì

bạn phải đổi các dấu sang font Tiếng Anh

Một số ký tự đặc biệt

Bảng sau đây sẽ đưa ra các ký tự trên môi trường Windows Các bạn hãy lưu ý từ các ký tự

&#192 đến &#255 ta có 2 cách thể hiện: giả sử ký tự ễ có thể gõ vào &#212; hoặc &Ocirc; Bạn nhớ là phải có dấu chấm phẩy Các ký tự đăc biệt được thể hiện là màu đỏ

Trang 28

Bảng các ký tự đặc biệt

&#212; &Ocirc; ễ

&#126; ~ &#169; â &#213; &Otilde; ế

&#129; &#172; ơ &#216; &Oslash; ỉ

&#130; ‚ &#173; ư &#217; &Ugrave; ?/font>

&#131; ƒ &#174; đ &#218; &Uacute; ?/font>

&#132; „ &#175; ? &#219; &Ucirc; ?/font>

&#134; † &#177; ? &#221; &Yacute; í

&#135; ‡ &#178; ? &#222; &THORN; ị

&#137; ‰ &#180; ? &#224; &agrave; ?/font>

&#138; Š &#181; à &#225; &aacute; ỏ

&#140; Œ &#183; ã &#227; &atilde; ó

&#144; &#187; ằ &#231; &ccedil; ỗ

&#145; ‘ &#188; ẳ &#232; &egrave; ố

&#146; ’ &#189; ẵ &#233; &eacute; ộ

&#149; • &#192; &Agrave; ?/font> &#236; &igrave; ỡ

&#150; – &#193; &Aacute; ?/font> &#237; &iacute; ớ

&#151; — &#194; &Acirc; ?/font> &#238; &icirc; ợ

&#152; ˜ &#195; &Atilde; ?/font> &#239; &iuml; ù

&#153; ™ &#196; &Auml; ?/font> &#240; &eth; ?/font>

&#154; š &#197; &Aring; ?/font> &#241; &ntilde; ủ

&#155; › &#198; &Aelig; ặ &#242; &ograve; ũ

&#156; œ &#199; &Ccedil; ầ &#243; &oacute; ú

&#157; &#200; &Egrave; ẩ &#244; &ocirc; ụ

&#158; ž &#201; &Eacute; ẫ &#245; &otilde; ừ

&#159; Ÿ &#202; &Ecirc; ấ &#246; &ouml; ử

&#161; ? &#204; &Igrave; è &#248; &oslash; ứ

&#162; Â &#205; &Iacute; Í &#249; &ugrave; ự

Trang 29

&#163; ? &#206; &Icirc; ẻ &#250; &uacute; ỳ

&#164; Ô &#207; &Iuml; ẽ &#251; &ucirc; ỷ

&#165; Ơ &#208; &ETH; é &#252; &uuml; ỹ

&#166; Ư &#209; &Ntilde; ẹ &#253; &yacute; ý

&#167; Ð &#210; &Ograve; ề &#254; &thorn; ỵ

&#168; ă &#211; &Oacute; ể &#255; &yuml; ?/font>

2.2.2 Tạo danh sách

Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn Chẳng hạn để tạo racác bảng chỉ mục, nội dung của một dãy các tài liệu hay các chương HTML có hai kiểu danhsách, danh sách có thứ tự (ordered) và danh sách không có thứ tự (unorder)

Ví dụ khi trong phần body của file HTML của bạn có đoạn như sau:

<h3>Các bộ môn trong khoa Công nghệ Thông tin trường Ðại học Bách khoa Hà nội</h3>

<ul>

<li>Bộ môn Khoa học máy tính

<li>Bộ môn Kỹ thuật máy tính

<li>Trung tâm máy tính

<li>Phòng thí nghiệm Liên mạng

</ul>

Thì trên trình duyệt danh sách được hiển thị như sau :

Trang 30

Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số, thường bắt đầu từ

"1" Ðể tạo ra danh sách có thứ tự ta dùng các tag sau:

Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay tag <ul> bằng tag <ol>

Ví dụ : Nếu trong phần body của file HTML có đoạn

<h3>Các bước chuẩn bị để học HTML</h3>

<ol>

<li>Chương trình soạn thảo văn bản trơn (như NotePad của Windows)

<li>Trình duyệt Web(như Internet Explorer hoặc Nescape Navigator)

<li>Bộ sách về HTML của tạp chí Internet Today

</ol>

Trang 31

Danh sách định nghĩa (definition lists)

Danh sách định nghĩa không có các chỉ mục đầu dòng Sau khi kết thúc tag <dt>, nó tự độngxuống dòng, viết thụt vào hệt như các định nghĩa trong sách giáo khoa vậy

Trang 33

Thực hành

Ðưa danh sách vào trang Web của bạn

1 Mở một file HTML mới, trong phần body bạn tạo một danh sách bằng các tag HTML nhưsau :

Trang 34

Bình tĩnh đi bạn ạ, Sau khi học bài này, bạn sẽ có thể đưa hình ảnh vào trang Web của mình

và bạn sẽ cảm thấy trang Web của mình cũng thật hấp dẫn

Ðể đặt một hình ảnh vào trong trang Web của mình bạn dùng tag sau

<img src = "Tên ảnh">

Trong đó "Tên ảnh" là tên của một file ảnh ở cùng folder với file HTML của bạn

Ví dụ : Ðể chèn một ảnh có tên là anh1.jpg ta làm như sau

<img src = "anh1.jpg">

Trang 35

tag <img > còn có thể có thêm các thuộc tính để hiển thị văn bản so với hình ảnh Thuộc tínhalign với các giá trị khác nhau sẽ cho ta các hiệu ứng như sau.

1 align = top

2 align = middle

3 align = bottom

Ví dụ

Trang 36

Ngoài ra thuộc tính này còn có một số giá trị khác như: TextTop, AbsMiddle, AbsBottom và Baseline Các bạn hãy tìm hiểu thêm qua bài thực hành.

Thực hành

Trước khi đưa hình ảnh vào trong trang Web của bạn mời bạn download một số hình ảnh đểlàm ví dụ

1 Tạo một file HTML mới và sử dụng các tag để thêm ảnh vào trong trang Web

2.Thử thêm các thuộc tính align = vào trong tag img và so sánh với kết quả của bài học

Thêm một số thuộc tính của tag <img >

Thuộc tính alt = " "

Khi trang Web của bạn được xem bằng trình duyệt mà người sử dụng tắt việc trình bày hìnhảnh để tiết kiệm thời gian download, thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnhmột chuỗi văn bản mô tả nó

Ví dụ

<img src = " /Pictures/Dowload.jpg" align = top alt = "Download Software">

Cụm từ Download Software đã thay thế cho hình ảnh

Thuộc tính chiều cao và chiều rộng.

Ðể cho trang Web của bạn được nạp nhanh hơn, bạn nên đưa kích thước của ảnh (tính bằngpixel) vào tag <img> Cách sử dụng các thuộc tính này là:

<img src = "" width = x, height = y>

x,y là chiều rộng và chiều cao của ảnh

Thuộc tính tạo vùng quanh ảnh.

Thuộc tính này làm cho khoảng cách giữa bức ảnh và các đoạn văn bản được thông thoáng, dễnhìn và đẹp mắt hơn Hai thuộc tính có tên là HSPACE và VSPACE:

<img src = "" hspace = x, vspace = y>

x là khoảng cách vùng trống ở hai mặt trái và phải của bức ảnh

Trang 37

y là khoảng cách vùng trống trên đỉnh và đáy của bức ảnh.

Bạn sẽ được học kỹ hơn ở bài học lần sau

Ðối với các thuộc tính này, nếu không đưa thêm vào tà img thì trình duyệt tự động tính chúngtrước khi hiển thị

2.2.4 Định dạng liên kết

Ðiều thực sự làm cho Web nổi trội là khả năng tạo ra các mối liên kết đến các thông tin liênquan Những thông tin này có thể nằm trong chính trang Web hay nằm ở các trang Web khácbao gồm hình ảnh, âm thanh, đoạn phim

Liên kết tới một file cục bộ.

Bây giờ bạn bắt đầu tạo một liên kết từ trang Web của bạn đến một trang Web thứ hai Liênkết này được gọi là cục bộ bởi vì trang Web thứ hai cũng cùng nằm trên một máy với trangWeb đầu

Ðể đơn giản trước hết bạn tạo một file HTML thứ hai và đặt nó cùng folder với trang mà bạn

đã tạo ở các bài trước

Muốn tạo một siêu liên kết ta dùng

<a href = "filename.htm"> Văn bản đại diện cho mối liên kết </a>

Bất cứ đoạn văn bản nào nằm giữa

<a href = " " > và </a> đều là một siêu văn bản liên kết tới các trang Web khác và nó đượcgạch dưới

Thực hành

1.Tạo một trang Web khác giả sử là vidu.htm và lưu vào cùng Folder với trang Web của bạn.2.Trong trang Web mà bạn cần tạo siêu liên kết tới bạn thêm tag tạo siêu liên kết như sau :

<a href = "vidu.htm">Xem ví dụ 1</a>

3.Lưu lại công việc của bạn và mở trên trình duyệt Khi đó bạn sẽ thấy đoạn văn bản Xem ví

dụ được tạo thành siêu liên kết, nó được đổi thành màu xanh và khi bạn đưa chuột vào vùngvăn bản này thì chuột bị đổi thành hình bàn tay và nếu bạn bấm chuột thì sẽ được đưa tớitrang có tên là vidu.htm

Trang 38

Bạn cũng có thể liên kết tới một hình ảnh bằng cách thay tên filename.htm bằng một file ảnh.

Ví dụ:

<a href = "logo.gif"> Text </a>

Tới đây chắc bạn lại có thắc mắc, muốn liên kết tới thư mục khác hoặc thư mục cao hơn thìlàm thế nào? Ðể thực hiện điều đó mời bạn xem tiếp phần sau đây

Giả sử cấu trúc folder của bạn có dạng

| My Web

| | Pictures

| | | i-today.gif

| | Trang web của bạn ở vị trí này

Và bạn muốn liên kết tới I-today.gif, khi đó trang tag <a href > bạn sửa lại như sau

<a href = "Pictures/i-today.gif"> </a>

Còn trong trường hợp file bạn cần tạo liên kết có cấu trúc folder cao hơn

| | Trang web của bạn ở vị trí này

và bạn cần liên kết tới ảnh ở trong Folder Pictures1 có cấp cao hơn thư mục chứa trang Webcủa bạn, khi đó bạn cần sửa lại tag như sau:

<a href = " /pictures1/ "> </a>

mỗi lần xuất hiện " /" báo cáo cho trình duyệt tìm kiếm ở một folder có cấp cao hơn

Thực hành

Trang 39

Bây giờ bạn hãy áp dụng các cách liên kết tới file ở Folder cùng cấp và cấp cao hơn Khi thạocác cách liên kết, khi xây dựng trang Web bạn có thể để tất cả các ảnh trong cùng một Folder

và liên kết tới, điều này làm cho việc thay đổi, cập nhật trang Web được thuận tiện hơn

Thêm một chút về vấn đề siêu liên kết

Ðể cho trang Web của bạn có vẻ chuyên nghiệp hơn, bây giờ bạn hãy đổi tên thành index.htm.Ðiều này được lý giải như sau:

Ví dụ khi bạn vào trang I-today bạn sẽ gõ vào dòng địa chỉ của trình duyệt

http: //www.vnn.vn/i-today/

Thực ra khi đó trình duyệt sẽ đọc file

http: //www.vnn.vn/ i-today/ index.htm

Liên kết đến các trang Web khác trên Internet

Ðể liên kết tới một trang Web khác trên Internet ta dùng tag sau:

<a href = "URL"> Text </a>

Trong đó URL (Uniform Resource Locator) cho biết địa chỉ mà bạn muốn liên kết tới

<li><a href = "http://www.hut.edu.vn">Trường Ðại học Bách khoa Hà nội</a>

<li><a href = "http://www.vnn.vn/i-today">Tạp chí Công nghệ Thông tin Internet Today</a>

<li><a href="mailto:hung_nd@vol.vnn.vn">Gửi thư cho Trần Việt Hùng</a>

</ul>

2 Lưu công việc của bạn, sau đó mở trình duyệt và so sánh với ví dụ Bạn có thể kiêm tra cácsiêu liên kết bằng cách di chuột vào vùng văn bản siêu liên kết và xem thông báo ở thanhtrạng thái của trình duyệt, thanh trạng thái sẽ hiển thị URL mà bạn sẽ liên kết tới

Trang 40

Liên kết tới các phần trong cùng một trang

HTML không những cho bạn tạo liên kết đến các trang Web khác nằm ở cùng máy tính vớitrang Web của bạn hoặc trên Internet, mà còn cho phép bạn liên kết đến các phần trong cùngmột trang Ðể liên kết đến các phần của một trang trước hết bạn phải đặt tên cho phần cần liênkết tới Thủ tục này được thực hiện bởi tag

<a name=""> </a>

Trong đó name là một tên do bạn đặt ra

Sau đó nếu bạn cần liên kết tới phần đã đặt tên bạn chỉ cần dùng

<a href = "#name"> Text to link </a>

Tương tự khi liên kết tới các tài liệu khác ta có thể dùng

<a href = "vol1.htm#name> Text </a>

<a href = "URL#name> Text </a>

Ví dụ :Click vào đây để về đầu trang

Tạo các siêu liên kết bằng hình ảnh

Như bạn vẫn thường thấy trong các trang Web, các siêu liên kết không chỉ là các đoạn vănbản mà còn cả bằng hình ảnh nữa, điều này càng làm cho Web trở nên hấp dẫn Phần này giớithiệu cho bạn cách tạo các siêu liên kết bằng hình ảnh:

Việc đầu tiên là bạn chọn 1 ảnh nằm cùng thư mục /folder với trang Web của bạn, giả sử đó làgraph.jpg Khi đó bạn sử dụng các Tag như sau

<a href = "file.htm"> <img ser = "graph.jpg"></a>

Bạn lưu ý là tag <img > nằm giữa tag <a href > và </a>

Khi một ảnh được dùng làm siêu liên kết, sẽ có một hộp màu có màu của các siêu liên kết baoquanh ảnh

Lưu ý: Việc đưa một hình ảnh lớn vào trong trang Web làm cho người đọc phải mất thời gian

chờ tải vì vậy bạn nên sử dụng một số mẹo sau:

Ngày đăng: 18/08/2023, 19:55

w