Bài giảng ngôn ngữ thiết kế web it14 Đại học mở hà nội

Chương 1. CÁC KHÁI NIỆM CƠ BẢN Chương này sẽ cung cấp cho các bạn các kiến thức cơ bản về Internet, ứng dụng của Internet, World Wide Web và các khái niệm có liên quan như: siêu liên kết (HyperLink), siêu văn bản (HyperText), IP (Địa chỉ Internet), Domain name (tên miền), trình duyệt (browser), giao thức (protocol)… Sự phát triển của Internet đại diện cho một xu hướng phát triển kh ách quan, có tính cách mạng trong quá trình phát triển truyền thông. Internet cung cấp nhiều nguồn thông tin thông qua website. Ở chương này, bạn cũng sẽ được cung cấp các khái niệm cơ bản về website là gì? Làm thế nào để xây dựng và triển khai website. Thông qua những kiến thức cơ bản này, người học sẽ có cái nhìn tổng quan nhất về việc xây dựng website, từ việc phân tích, thiết kế đến thực thi một website.

Chương 1 CÁC KHÁI NIỆM CƠ BẢN

Chương này sẽ cung cấp cho các bạn các kiến thức cơ bản về Internet, ứng dụng của Internet, World Wide Web và các khái niệm có liên quan như: siêu liên kết (HyperLink), siêu văn bản (HyperText), IP (Địa chỉ Internet), Domain name (tên miền), trình duyệt (browser), giao thức (protocol)…

Sự phát triển của Internet đại diện cho một xu hướng phát triển kh ách quan, có tính cách mạng trong quá trình phát triển truyền thông Internet cung cấp nhiều nguồn thông tin thông qua website Ở chương này, bạn cũng sẽ được cung cấp các khái niệm cơ bản về website là gì? Làm thế nào để xây dựng và triển khai website Thông qua những kiến thức cơ bản này, người học sẽ có cái nhìn tổng quan nhất

về việc xây dựng website, từ việc phân tích, thiết kế đến thực thi một website

1.1 Một số khái niệm về Internet

Internet là gì? Ứng dụng của Internet vào các lĩnh vực trong đời sống như thế nào? Bạn sẽ có câu trả lời cho vấn đề này khi tìm hiểu về nguồn gốc của Internet

và các ứng dụng của nó

1.1.1 Nguồn gốc của Internet

INTERNET là một mạng của các mạng máy tính Internet kết nối hàng triệu máy tính với nhau trên toàn cầu, tạo thành một mạng lưới khổng lồ của các mạng Bất kỳ máy tính nào cũng có thể giao tiếp, chia sẻ thông tin với bất kỳ máy tính khác, miễn là chúng được kết nối với nhau qua Internet

Nguồn gốc của Internet là một tập hợp các máy tính được phát triển vào thập kỷ

70 Mạng này có tên APRANET, được đỡ đầu bởi bộ quốc phòng Mỹ (United States Department of Defense) Đến đầu thập kỷ 80, APRANET phát triển thành mạng Internet

Ngày nay mạng Internet đã phát triển rộng rãi trên phạm vi toàn thế giới với rất nhiều ứng dụng

1.1.2 Các lĩnh vực ứng dụng của Internet

Internet cho phép hàng triệu người liên lạc, chia sẻ thông tin với nhau Bạn có thể liên hệ bằng cách gửi và nhận thư điện tử ( E-mail) hoặc thiết lập liên kết với máy tính của người nào đó và gõ các thông điệp (chat) Bạn cũng có thể chia sẽ

thông tin bằng cách tham gia vào các nhóm thảo luận (diễn đàn)… Ta có thể kể tên một số ứng dụng cơ bản của Internet như sau:

- Kinh doanh qua mạng

- Giáo dục qua mạng

- Tuyển dụng qua mạng

- Ngân hàng trên mạng

- Tìm đường

- Tìm bạn và tham gia thảo luận qua mạng

- Gửi thư điện tử cho bạn bè và người thân

- Tham quan sở thú điện tử hay viện bảo tàng

- Tải xuống phần mềm thú vị nào đó và dùng thử

- Chia sẻ thông tin cá nhân qua mạng…

1.2 World Wide Web

1.2.1 Mạng diện rộng toàn cầu World Wide Web (WWW)

Khi bạn truy cập Internet, bạn cần gõ địa chỉ trang web cần truy cập, tên website thường có phần WWW, vậy WWW là gì?

WWW -World Wide Web- Mạng diện rộng toàn cầu Là một hệ thống lớn (large-scale), kho chứa trực tuyến thông tin mà người sử dụng có thể tìm kiếm bằng việc sử dụng một chương trình ứng dụng tương tác gọi là trình duyệt (browser)

World Wide Web hay đơn giản là Web, hoạt động dựa trên mạng máy tính bằng cách sử dụng giao thức Internet (Internet Protocol) để truyền dữ liệu, chia sẻ thông tin hoặc truy cập vào các trang web… Như vậy mạng diện rộng toàn cầu là một mạng dựa trên nền Internet của các máy chủ Web (web servers)

WWW hoạt động như thế nào?

- Khi kết nối với một máy chủ web, ta lấy được thông tin theo dạng trang

- Một trang hiển thị thông tin theo dạng văn bản, hình ảnh hoặc cả hai

- Các trang này thân thiện với người sử dụng (user-friendly) và cũng có thể chứa cả liên kết (tham chiếu) đến các trang khác chứa các thông tin sâu hơn về một trang cụ thể

- Các liên kết trên những trang này dẫn bạn đến những trang khác mà những trang này có thể nằm trên cùng hay khác máy chủ

1.2.2 Các khái niệm liên quan về WWW

Hypertext (Siêu văn bản): Là văn bản “có các nối kết” Văn bản đặc biệt này

chứa đựng địa chỉ của một máy tính khác như là một phần của WWW

Khi chúng ta nhấp chuột trên văn bản này, trình duyệt (cổng nối với Internet – a gateway to Internet) coi đó là một chỉ thị để lấy trang từ máy tính có địa chỉ tương ứng trong liên kết và hiển thị nó

Link (Liên kết): Một liên kết là một kết nối từ một trang web này với một trang

web khác sử dụng siêu văn bản (hypertext) Các trang web không nối kết với nhau kiểu vật lý mà chỉ chứa địa chỉ của trang cần hiển thị

Địa chỉ IP (Internet Protocol): Mỗi máy tính trên Internet có một địa chỉ duy

nhất của chính nó, dùng để phân biệt các máy tính trên Internet Địa chỉ này được chứa trong bản thân siêu liên kết (hyperlink) của một tài liệu Trình duyệt sử dụng

địa chỉ IP để kết nối với máy chủ qua mạng

Địa chỉ IP là một số 32 bit (4byte) được chia thành 4 nhóm (dạng phân nhóm - dotted format), mỗi nhóm gồm 8 bits (gọi là một octet), các nhóm này phân cách nhau bởi dấu chấm Tuy nhiên, để thuận tiện cho người sử dụng, các octet này được chuyển đổi sang giá trị thập phân, được miêu tả trong bảng sau:

diễn thập phân

Octect được biểu diễn ở

dạng số thập phân

Octet ở hệ cơ số 16 0xC0.0x00.0x02.0xEB Mỗi octet được chuyển

đổi sang dạng cơ số 16 Octect ở hệ cơ số 8 0300.0000.0002.0353 Mỗi octet được chuyển

đổi sang dạng cơ số 8 Hầu hết các định dạng trên được chấp nhận trong tất cả các trình duyệt

Ban đầu, một địa chỉ IP được chia thành hai phần: Network ID (xác lập bởi octet đầu tiên) và Host ID (xác định bởi ba octet còn lại) Tuy nhiên với cách chia này,

số lượng network bị giới hạn ở con số 256, quá ít so với nhu cầu thực tế

Để vượt qua giới hạn này, việc phân lớp mạng đã được định nghĩa, tạo nên một tập hợp lớp mạng đầy đủ Theo đó, có 5 lớp mạng (A, B, C, D và E) được định nghĩa như sau:

- Lớp A sử dụng 8 bits cho phần network, 24 bits được sử dụng cho phần host

- Lớp B dùng 16 bits cho network, 16 bit dành cho host

- Lớp C dùng 24 bits được sử dụng để xác định phần network, do đó mỗi network của lớp C chỉ còn 8 bit để đánh địa chỉ host

- Lớp D được dùng cho địa chỉ multicast (đa loại)

Hiện nay có 2 phiên bản của địa chỉ IP được sử dụng rộng rãi là IPv4 và IPv6

IPv4-Giao thức Internet phiên bản 4: là phiên bản thứ tư trong quá trình phát

triển của các giao thức Internet(IP) Đây là phiên bản đầu tiên của IP được sử dụng rộng rãi IPv4 cùng với Ipv6 (giao thức Internet phiên bản 6) là nòng cốt của giao tiếp internet Hiện tại, IPv4 vẫn là giao thức được triển khai rộng rãi nhất trong bộ giao thức của lớp internet

Giao thức này được công bố bởi IETF trong phiên bản RFC 791 (tháng 9 năm 1981), thay thế cho phiên bản RFC 760 (công bố vào tháng giêng năm 1980) Giao thức này cũng được chuẩn hóa bởi bộ quốc phòng Mỹ trong phiên bản MIL-STD-

1777

IPv4 là giao thức hướng dữ liệu, được sử dụng cho hệ thống chuyển mạch gói Đây là giao thức truyền dữ liệu hoạt động dựa trên nguyên tắc tốt nhất có thể, trong

đó, nó không quan tâm đến thứ tự truyền gói tin cũng như không đảm bảo gói tin

sẽ đến đích hay việc gây ra tình trạng lặp gói tin ở đích đến Việc xử lý vấn đề này

dành cho lớp trên của giao thức TCP/IP Tuy nhiên, IPv4 có cơ chế đảm bảo tính toàn vẹn dữ liệu thông qua sử dụng những gói kiểm tra (checksum)

Trong giai đoạn Internet đang ngày càng phát triển, các địa chỉ IPv4 đang dần cạn kiệt, để giải quyết vấn đề này, các địa chỉ IPv6 đang được đưa vào sử dụng để tránh tình trạng quá tải đối với địa chỉ IPv4

IPv6- Giao thức Internet phiên bản 6, là một phiên bản của giao thức liên

mạng (IP) nhằm mục đích nâng cấp giao thức liên mạng phiên bản 4 (Ipv4) hiện đang truyền dẫn cho hầu hết lưu lượng truy cập Internet nhưng đã hết địa chỉ IPv6 cho phép tăng lên đến 2128

địa chỉ, trong khi trước đó địa chỉ của Ipv4 chỉ có 232(khoảng 4.3 tỷ) địa chỉ

IPv6 được thiết kế với hy vọng khắc phục những hạn chế vốn có của địa chỉ IPv4 như hạn chế về không gian địa chỉ, cấu trúc định tuyến và bảo mật đồng thời đem lại những đặc tính mới thỏa mãn các nhu cầu dịch vụ của thế hệ mạng mới như khả năng tự động cấu hình mà không cần hỗ trợ của máy chủ DHCP (Dynamic Host Configuration Protocol), cấu trúc định tuyến tốt hơn, hỗ trợ Multicast, hỗ trợ bảo mật và di động tốt hơn

Hiện IPv6 đang được chuẩn hóa từng bước và đưa vào sử dụng thực tế tuy nhiên quá trình chuyển đổi hệ thống mạng từ IPv4 sang IPv6 còn gặp nhiều vấn đề từ thiết bị không đồng bộ, các nhà cung cấp dịch vụ Internet, kiến thức người sử dụng

và quản lý mạng

Tên miền (Domain name): Việc nhớ các địa chỉ IP là rất khó, do đó người ta

tạo ra tên miền (domain), khi cần làm việc với các địa chỉ IP ta chỉ cần gõ vào tên miền tương ứng Nhiệm vụ của tên miền là chuyển tên miền thành địa chỉ IP Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bởi dấu chấm (.) Ví

dụ www.hou.edu.vn là tên miền máy chủ Web của viện Đại học Mở Hà Nội Thành

phần thứ nhất www là tên máy chủ World-Wide Web Thành phần thứ hai"hou" là tên miền mức 3 (third domain name level) , thành phần thứ ba "edu" thường gọi là tên miền mức hai (second domain name level), thành phần cuối cùng "vn" là tên miền mức cao nhất (top level domain name) Như vậy tên miền mức con sẽ được viết bên trái tên miền mức cao hơn

Tên miền mức cao nhất (Top- level Domain "TLD") bao gồm các mã quốc gia của các nước tham gia Internet được quy định bằng hai chữ cái theo tiêu chuẩn ISO

-3166 như Việt nam là VN, Anh quốc là UK v.v và một số lĩnh vực dùng chung (World Wide Generic Domains), trong đó có 5 lĩnh vực dùng chung phổ biến cho toàn cầu và 2 chỉ dùng ở Mỹ Cụ thể:

- Các lĩnh vực dùng chung là:

• COM : Thương mại ( Commercial)

• EDU : Giáo dục ( education )

• NET : Mạng lưới ( Network )

• INT : Các tổ chức quốc tế ( International Organisations)

• ORG : Các tổ chức khác ( other orgnizations )

• Một số lĩnh vực dùng chung khác: aero, coop, museum, biz, info, name và pro…

- 2 lĩnh vực dùng ở Mỹ

• MIL : Quân sự ( Military )

• GOV : Nhà nước ( Government ) Tên miền mức hai (Second Level): Đối với các quốc gia nói chung tên miền mức hai này do Tổ chức quản lý mạng của quốc gia đó định nghĩa Thông thường các tổ chức này vẫn định nghĩa tương tự như 7 lĩnh vực dùng chung nêu trên

Tất cả tên miền được gắn liền với một hệ DNS (Domain Name Server), hệ thống này giúp phân giải tên miền thành địa chỉ IP Nghĩa là khi bạn gõ tên miền, DNS

sẽ tìm kiếm tên miền này trong bảng tham chiếu xem số IP tương ứng là gì Nếu không tìm được, nó sẽ tìm ở một DNS khác Mỗi địa chỉ IP là duy nhất trong cùng một cấp mạng, cùng một IP có thể có nhiều tên miền Tuy nhiên tên miền là duy nhất và được cấp phát cho chủ thể nào đăng ký trước với nhà cung cấp dịch vụ Internet (ISP- Internet Service Provider)

Tên miền cấp cao nhất là tên miền bạn đăng ký trực tiếp với các nhà cung cấp

Ví dụ: www.fithou.edu.vn, www.vnn.vn, …

Tên miền thứ cấp là tên miền phụ thuộc vào tên miền cấp cao nhất, muốn có được tên miền này phải liên hệ với người quản lý tên miền cấp cao nhất

Ví dụ: ctms.fithou.edu.vn, www.home.vnn.vn

Hyperlinks (siêu liên kết): là những kết nối giữa các trang giúp bạn có thể đi

tới và lui giữa các trang Một hyperlink thường có thể được hiển thị dưới dạng text

hay graphic Khi ta click vào hyperlink, ta có thể di chuyển đến vị trí được kết nối Các trang được kết nối có thể ở trong cùng một hay nhiều tài liệu (document) hoặc trong các tập tin (files) trên mạng hay bất kỳ đâu trên Internet

Trong trường hợp phần văn bản của trang web quá dài, ta có thể chia văn bản ra thành nhiều phần và đặt siêu liên kết đến từng phần trong văn bản Kỹ thuật này được gọi là Bookmark

Bookmark: Một bookmark, cũng có thể xem như một mấu neo (anchor), là một

vị trí hoặc một văn bản trên một trang được đánh dấu như là một đích đến cho một liên kết

Nếu trang web của bạn quá dài và được phân chia thành nhiều phần, một bookmark cho phép bạn liên kết đến một phần của trang mà phần này nằm cách xa phần đầu trang bằng một liên kết thông thường

Trong một URL (địa chỉ định vị tài nguyên thống nhất), bookmark được đánh dấu phía trước bằng dấu thăng (#)

Địa chỉ định vị tài nguyên thống nhất- URL (Uniform Resource Location):

Địa chỉ dùng định vị tài nguyên thống nhất trên máy chủ

Về cơ bản, URL là con trỏ chỉ tới vị trí của một đối tượng tài nguyên như hình ảnh, tài liệu…

URL là địa chỉ duy nhất có cấu trúc chia làm 3 phần:

<giao thức>: <địa chỉ máy> <phần định vị>

Trình duyệt web(Web Browser):

Trình duyệt web là một phần mềm ứng dụng để tích hợp các file HTML được đưa lên Web

Trình duyệt web sẽ giao tiếp với Web server thông qua mạng máy tính bằng cách sử dụng giao thức http (HyperText Transfer Protocol) Cụ thể quá trình giao tiếp với web server sẽ được diễn ra như sau :

- Nối kết với web sever để yêu cầu tài liệu web hoặc dịch vụ (services)

- Web server sẽ đáp ứng yêu cầu đó trả lại dữ liệu cần thiết dưới dạng trang

- Trình duyệt nhận trang

- Đóng kết nối

- Hiển thị trang được viết bằng HTML cho người dùng

Một số trình duyệt thông dụng là Internet Explorer, FireFox, Opera, Chrome, Safari…

Web Server (máy phục vụ web):

Là máy tính mà trên đó cài đặt phần mềm phục vụ Web Đôi khi người ta cũng gọi các phần mềm đó là Web Server

Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy nhiên mỗi Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như:

- IIS (Internet Information Services) của Microsoft dành cho *.asp,

*.aspx ; (Tham khảo phần 1.3.4.3 về cách cài đặt IIS)

- Máy phục vụ -máy chủ (Server/Host): Máy phục vụ là một máy tính thực

sự thực hiện các yêu cầu của các máy tính khác Tên khác của nó đôi khi cũng được dùng là máy chủ (host) Máy chủ thường là máy tính mạnh với

bộ nhớ lớn và ổ cứng chứa hàng ngàn các tài liệu

Giao thức (Protocol): là bộ quy tắc và quy định cách thức giao tiếp trên mạng

máy tính

Bộ Giao thức Internet- TCP/IP, là giao thức điều khiển đường truyền/Giao thức Internet (Transmission Control Protocol/Internet Protocol) TCP/IP gồm gồm nhiều giao thức trong đó có 3 giao thức phổ biến : truyền tải siêu văn bản, truyền tải file và truyền tải thư tín điện tử

- Giao thức truyền tải siêu văn bản (HTTP- Hypertext Transfer

Protocol): là một bộ các quy tắc và quy định được sử dụng để gửi một

trang hay nhiều trang chứa siêu văn bản từ máy tính này đến máy tính khác Trình duyệt cho phép phía client gửi một yêu cầu dạng văn bản lên Web Server Web Server nhận được lệnh sẽ trả lại tài liệu tương ứng

- Giao thức chuyển tải tập tin (FTP- File Transfer Protocol): là một

phương thức của việc chuyển tải các tập tin (một tập tin là một tài liệu chứa đựng thông tin) từ máy tính này sang máy tính khác FTP được dùng trong việc chuyển các loại tập tin như tập tin EXE (tập tin thực thi) hay DOC (tập tin tài liệu) hoặc BMP (tập tin ảnh dạng bitmap)

- Giao thức truyền tải thư tín điện tử: Có 3 giao thức phổ biến

• Giao thức truyền tải thư tín điện tử đơn giản (Simple Mail

Transfer Protocol – SMTP) – là một chuẩn truyền tải thư điện tử

qua mạng Internet Giao thức hiện dùng được là ESMTP (extended SMTP - SMTP mở rộng) Giao thức này cho phép gửi thông điệp

và không cho phép ai lấy thông điệp về từ máy chủ ở xa

• POP3 (Post Office Protocol): Ngược với SMTP, giao thức POP3

chỉ được dùng để nhận thư về Khi sử dụng POP3, tất cả thư điện tử của bạn sẽ được download từ mail server về máy cục bộ Sau khi download mail xong bạn có thể ngắt kết nối để đọc offline

• IMAP (Internet Message Access Protocol): Là giao thức chuẩn

để truy cập thư điện tử từ server cục bộ của bạn IMAP là giao thức theo mô hình client/server trong đó các thư điện tử được Internet server nhận về và giữ lại cho bạn Điều này đòi hỏi chỉ phải truyền một lượng nhỏ dữ liệu, do đó nó làm việc tốt ngay cả khi bạn có một kết nối Internet chậm như modem dial-up Khi có yêu cầu đọc một thư điện tử cụ thể, nó mới được tải xuống từ server Bạn cũng

có thể tiến hành một số thao tác trên server như tạo/xóa thư mục, xóa thư

Port (số hiệu cổng): Ứng với mỗi loại dịch vụ, máy chủ quy định cổng làm việc

tương ứng Dưới đây là một số cổng thường dùng

- HTTP: cổng 80 (dùng cho việc gửi nhận các trang web )

- FTP : cổng 21 (Dùng trong việc chuyển các loại tập tin)

- Telnet: cổng 23 (telnet: trong các máy dựa vào hệ điều hành UNIX và được nối vào mạng Internet, đây là một chương trình cho phép người sử dụng tiến hành thâm nhập vào các máy tính ở xa thông qua các ghép nối TCP/IP)

- SMTP: cổng 25 (Dùng cho việc gửi thư tín)

- POP3: cổng 110 (Dùng cho việc nhận thư tín)

- IMAP: cổng 143 (Dùng cho việc truy cập thư điện tử từ server cục bộ)

Script: Là một tập lệnh dùng để báo cho chương trình biết cách thực hiện một

thủ tục quy định như đăng nhập vào hệ thống thư điện tử chẳng hạn Các khả năng của script được cài sẵn trong một số chương trình

Các script giống như các macro Tuy nhiên thuật ngữ macro dùng để chỉ các script mà ta có thể khởi đầu bằng cách ấn một tổ hợp phím tự quy định

Tất cả các trình duyệt mới hiện nay đều hỗ trợ script

1.3 Các khái niệm về Website

1.3.1 Giới thiệu về Website

Ví dụ: Trang chủ có tên là index.html Khi ta gõ URL=

http://www.myweb.com/ thì máy chủ web sẽ hiểu là hiển thị trang http://www.myweb.com/index.html

Trang con: là các trang chứa thông tin sâu hơn về các nội dung đưa ra trong

trang chủ

Để xây dựng một website, ta cần thực hiện các bước sau:

- Xác định yêu cầu và phân tích yêu cầu

1.3.2 Xác định yêu cầu và phân tích yêu cầu

Là quá trình thu thập và phân tích chi tiết tất cả các yêu cầu liên quan đến website cần xây dựng Mục tiêu của việc xác định và phân tích yêu cầu nhằm trả lời cho các vấn đề sau:

- Mục đích của Website là gì? Ở bước này ta cần xác định mục đích chính

của website, đưa ra một cách khái quát ngắn gọn mục tiêu của website từ

đó triển khai dần các mục tiêu chính

- Đối tượng độc giả của website là ai? Căn cứ vào sở thích, nhu cầu, tầm

hiểu biết của độc giả về nội dung trong website để dẫn dắt độc giả tiếp cận với nội dung thông tin website một cách dễ dàng nhất, đơn giản nhất

- Các chủ đề chính của website là gì? Dựa vào mục đích, yêu cầu và sở

thích của độc giả, bạn cần xác định nguồn tài nguyên thông tin cần cho website: nội dung, hình ảnh cần dùng cho website, đây sẽ là nguồn tin giúp duy trì hoạt động của website Từ đó thiết lập các chủ đề chính của website, chia nhỏ các chủ đề lớn thành các chủ đề con hoặc gộp các chủ

đề có liên quan thành một chủ đề lớn hơn

Việc xác định các chủ đề chính của website sẽ giúp ích cho việc quyết định xây dựng menu ngang hay menu dọc để phù hợp với bố cục cũng như nội dung của website

- Các khối thông tin chủ yếu mà website cung cấp là gì? Từ nguồn tài

nguyên và từ các chủ đề chính của website, bạn có thể xác định được các khối thông tin chủ yếu của website

1.3.3 Thiết kế Website

Nội dung là thuật ngữ chung được dùng để chỉ các thành phần có trong trang web Các trang web có thể chứa văn bản, hình ảnh, âm thanh, video clip, ảnh động, các file (ví dụ: file PDF)… mà bạn muốn cung cấp cho người duyệt web

Trong giai đoạn thiết kế, công việc cần làm đầu tiên chính là tổ chức và phác thảo website

Tổ chức website:

- Tổ chức về mặt cấu trúc: là công việc định nghĩa ra các trang web trong

website và mối liên hệ giữa chúng Ở bước này ta cần xác định các trang web cần có trong website, vị trí của các trang đó trong website và mối liên

hệ giữa các trang web Cụ thể là xác định trang chủ, và các trang con cấp

1 (các trang con chính), các trang con cấp 2, 3…, quan hệ giữa các trang web

Ví dụ:

- Tổ chức về mặt liên kết: xác định liên kết (link) giữa các trang web trong

website, cho phép người duyệt web có thể di chuyển lui tới giữa các trang web Có nhiều cách tổ chức liên kết giữa các website, dưới đây là một số cách thông dụng

• Liên kết theo đường thẳng (tuyến tính): Là loại liên kết phù hợp

cho các website hướng người dùng đi theo một thứ tự các bước nào

đó

Trang chủ

Trang con cấp 1 Trang con cấp 2

Trang con cấp 1

Trang con cấp 1 Trang con cấp 2

Trang con cấp 2

Hình 1 1 Sơ đồ tổ chức website

13

Ví dụ: Website xử lý đơn mua hàng, website hướng dẫn đăng ký

thông tin

• Liên kết dựa trên cơ sở dữ liệu: Là loại liên kết tạo ra ngay tại các

trang web chính, một số lượng lớn các liên kết phụ thuộc vào các phần tử trong cơ sở dữ liệu

Ví dụ: Trang web liệt kê các loại sản phẩm, và cần tạo liên kết tới

chi tiết của từng loại sản phẩm trong cơ sở dữ liệu

• Liên kết phân cấp : Là loại liên kết thông dụng nhất Dựa trên liên

kết này, người dùng sẽ đi theo từng cấp để tới được thông tin mình cần

Ví dụ: Website tin tức, website âm nhạc

Liên kết một chiều

Liên kết hai chiều

Hình 1 2 Liên kết theo đường thẳng

Trang chủ

Trang con chính Các trang con chi tiết ứng với từng loại sản phẩm trong

cơ sở dữ liệu

Hình 1 3 Liên kết dựa trên cơ sở dữ liệu

Trang

Các trang con chính

• Liên kết kết hợp giữa các loại trên: Trên thực tế, một website

thường cung cấp thông tin, danh mục sản phẩm, hay danh mục thông tin, bài tập,… và cung cấp các hướng dẫn về đăng ký, đăng nhập, mua hàng, … Vì vậy bạn có thể kết hợp tất cả các kiểu liên kết trên để tổ chức liên kết cho website

Phác thảo website (wireframe): Công việc phác thảo website chính là tạo ra

bản phác họa của mỗi một trang web trong website Kết quả của công việc là bản thiết kế màn hình, mô tả trực quan các khung xương của một trang web, mô tả cách bố trí trang web (layout) Sau đó phác thảo các thành phần chi tiết bao gồm cách sắp xếp nội dung của trang web, bao gồm cả các yếu tố giao diện và hệ thống điều hướng, và làm thế nào chúng làm việc cùng nhau

Ở giai đoạn bạn chưa cần tập trung vào phong cách đồ họa, màu sắc, hoặc các thành phần đồ họa mà chỉ tập trung chủ yếu vào nội dung và cách bố trí của chúng trên màn hình

Bạn có thể vẽ phác thảo website bằng tay bản vẽ bút chì hoặc phác thảo trên bảng trắng, hoặc có thể sử dụng phần mềm phác thảo nội dung như MockFlow, Pencil Project (miễn phí), Balsamiq Mockups… hoặc phần mềm Visio của bộ công

cụ Microsoft Office

Sau khi phác thảo website xong, ta tiến hành thực thi việc thiết kế website Ở đây bạn nên thiết kế theo kiến trúc 3 tầng (three layers), bao gồm:

- Thiết kế bố cục (layout) cho trang web: Dùng CSS để định kiểu, trang

trí, bố cục các thành phần trên trang web

- Nội dung trang web: Dùng ngôn ngữ đánh dấu siêu văn bản (HTML) để

trình bày nội dung trang web

- Tương tác với nội dung trên trang web: Dùng JavaScript để lập trình

tạo ra các hiệu ứng và xử lý sự kiện phía máy khách (client-side)

- Ngoài ra để website sinh động, thu hút người xem, ta có thể dùng Photoshop, Flash…và các phần mềm đồ họa khác để thiết kế giao diện, thiết kế ảnh động, banner động…

Hiện nay trên Internet có hàng tỷ website, làm sao để website của bạn nổi bật trong vô vàn website đó? Muốn vậy bạn cần có chiến lược thiết kế phù hợp Chiến lược thiết kế này phụ thuộc vào mục tiêu và đối tượng của website Ngoài ra bạn cần lưu ý cách chuyển tải thông tin phụ thuộc vào cấu trúc trình bày và thời gian truy nhập của độc giả

Vậy làm thế nào để có một website có chất lượng?

- Đối với các website cung cấp thông tin, bạn cần lưu ý đến bản in riêng cho trang web với những thông tin ngắn trong các trang được ghép lại thành một bản in dài Việc này giúp cho độc giả có thể in được các thông tin cần thiết

- Các liên kết thể hiện bằng danh sách dạng text rất thích hợp cho mục lục hay bản chỉ số vì tốc độ nạp xuống nhanh, đầy đủ thông tin

- Cần có hình ảnh đồ hoạ thiết kế đẹp minh hoạ đi kèm thông tin Tuy nhiên, hình ảnh đồ hoạ cần thu nhỏ kích thước, dung lượng phù hợp để thời gian tải xuống (download) nhanh

- Đối với các website có mục đích đáp ứng nhu cầu tham khảo, tra cứu, cần thiết kế sao cho độc giả dễ dàng đi thẳng vào vấn đề tìm được cái họ cần,

dễ dàng in ấn, lưu trữ lại thông tin…

- Cấu trúc menu cần tổ chức sao cho dễ dàng tìm kiếm mục chọn có liên quan trang con chứa nội dung mà độc giả cần

- Nếu có thể nên áp dụng phần mềm tìm kiếm cho phép tìm kiếm nhanh nhằm rút ngắn thời gian liên kết càng ngắn càng tốt

- Nhất quán một số quy ước trong tất cả các trang của website:

• Ai? Ai tạo ra website

• Cái gì? Tiêu đề của website là gì? Cần đặt ra tiêu đề xác thực với

nội dung của trang web

• Khi nào? Ghi rõ ngày tháng cập nhật thông tin cho các thông tin

bên trong website, giúp độc giả có thể theo dõi được dòng sự kiện diễn ra dựa vào ngày tháng

• Ở đâu? Cung cấp cho độc giả thông tin về tác giả, địa chỉ

website…, nhằm giúp cho độc giả dễ dàng tìm lại được địa chỉ website từ các bản in

- Phản hồi và đối thoại: Cần cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc tác giả để nhận được sử phản hồi từ độc giả

- Thiết kế tương thích cho nhiều trình duyệt khác nhau: HTML là ngôn ngữ trình bày nội dung nhưng kết quả hiển thị phụ thuộc vào trình duyệt Các trình duyệt khác nhau cho kết quả hiển thị trang web khác nhau, vì vậy cần lưu ý đến các định dạng mặc định của trình duyệt và kiểm tra website trên các trình duyệt khác nhau để có sự điều chỉnh hợp lý

Một điều cần lưu ý khác, việc thiết kế website không chỉ bao gồm việc thiết kế

giao diện mà còn là việc thiết kế thông tin và thiết kế các chức năng của website

Cụ thể:

- Cắt đoạn thông tin: Cần cắt thông tin thành những mẩu tin từ 1 đến 3

trang in để cung cấp cho độc giả ứng với mỗi liên kết

- Hệ thống phân cấp: phân cấp thông tin căn cứ vào tầm quan trọng của

thông tin, cho phép đi từ khái quát đến chi tiết

- Các mối quan hệ: Nhóm, phân loại thông tin, sắp xếp bằng hình ảnh…

cho phép độc giả dễ dàng tìm được cái họ cần

- Chức năng: Cần xây dựng hệ thống menu phù hợp, tránh tạo ra hệ thống

menu quá rộng hoặc quá sâu

- Sơ đồ website: Nên có sơ đồ tổ chức trang web với các trang web lớn để

dễ tìm kiếm thông tin

- Hệ thống điều hướng: Chú ý các liên kết đến các trang trước và trang

sau, tránh tình trạng trang cụt (vào mà không ra được, chỉ có thể bấm váo nút quay lại trên trình duyệt)

- Kích thước website: Chú ý kích thước website để phù hợp với các độ

phân giải và kích thước màn hình khác nhau

- Tốc độ: Để tăng tốc độ truy cập, các trang chính mà người sử dụng hay

vào, nên tăng text, giảm các dữ liệu dạng đa phương tiện (multimedia) 1.3.4 Triển khai Website

1.3.4.1 Web Server

Web Server là máy chủ web 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 trực tuyến (chứa mã lệnh, chương trình, các file Multimedia…) Trên Web Server có cài đặt phần mềm phục vụ web (Web Server Software), nhờ có chương trình này mà người sử dụng có thể truy cập đến các thông tin của trang Web từ một máy tính khác ở trên mạng (Internet, Intranet) Phần mềm này còn có thể được tích hợp với CSDL (Database), hay điều khiển việc kết nố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ền tải chúng đến người dùng

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ững thông tin mà bạn mong muốn

1.3.4.2 IIS

IIS là gì?

IIS là viết tắt của từ Internet Information Services (các dịch vụ cung cấp thông tin Internet), là các dịch vụ chạy trên nền hệ điều hành Windows nhằm cung cấp và phát tán các thông tin lên mạng

IIS bao gồm nhiều dịch vụ khác nhau như Web Server, FTP Server, được thể được sử dụng để xuất bản nội dung của các trang Web lên Internet/Intranet bằng việc sử dụng “Giao thức truyển tải siêu văn bản“ - Hypertext Transport Protocol (HTTP) IIS được đính kèm với các phiên bản của Windows

Chức năng của IIS

Nhiệm vụ của IIS là tiếp nhận yêu cầu của máy trạm và đáp ứng lại yêu cầu đó bằng cách gửi về máy trạm những thông tin mà máy trạm yêu cầu Bạn có thể sử dụng IIS để:

- Xuất bản một Website của bạn trên Internet

- Tạo các giao dịch thương mại điện tử trên Internet (hiện các catalog và nhận được các đơn đặt hàng từ nguời tiêu dùng)

- Chia sẻ file dữ liệu thông qua giao thức FTP

- Cho phép người ở xa có thể truy xuất cơ sở dữ liệu (database) của bạn (gọi là Database remote access- truy cập từ xa)…

IIS hoạt động như thế nào?

- IIS sử dụng các giao thức mạng phổ biến là HTTP (Hyper Text Transfer Protocol) và FPT (File Transfer Protocol) và một số giao thức khác như SMTP, POP3, để tiếp nhận yêu cầu và truyền tải thông tin trên mạng với các định dạng khác nhau

- Một trong những dịch vụ phổ biến nhất của IIS mà chúng ta đã đề cập ở trên là dịch vụ WWW (World Wide Web), nói tắt là dịch vụ Web Dịch

vụ Web sử dụng giao thức HTTP để tiếp nhận yêu cầu (Requests) của trình duyệt Web (Web browser) dưới dạng một địa chỉ URL (Uniform Resource Locator) của một trang Web và IIS phản hồi lại các yêu cầu bằng cách gửi về cho trình duyệt web (Web browser) nội dung của trang Web tương ứng

Như vậy, sau khi thiết kế xong Website nếu bạn muốn đưa Website lên mạng để mọi người có thể truy cập và xem chúng thì bạn phải nhờ đến một Web Server Trong phạm vi giáo trình, chúng ta sẽ cài đặt và sử dụng IIS để xuất bản Website của bạn lên Hosting

Bạn cần phải đăng ký hosting (miễn phí hoặc mất phí) 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

Sau khi đăng ký hosting, bạn sẽ có một tên miền (domain) cho website, bạn tiến hành upload website lên website Hosting sẽ lưu trữ website của bạn, và bạn có thể chia sẻ với người sử dụng website của bạn khi họ gõ vào thanh địa chỉ tên miền này

1.3.4.3 Cài đặt IIS trên máy tính

Bước 1: Cho đĩa cài Windows vào máy ( ví dụ minh họa cho Windows 7)

Bước 2: Control panel  Programs and Features Turn Windows features on

or off

Bước 3: Trong hộp thoại Windows Features, chọn Internet Information Services

và nhấn nút OK

Hình 1 5 Hộp thoại Windows Features

Sau khi cài đặt xong khởi động lại máy tính ta sẽ có một thư mục Interpub\wwwroot Lúc này bạn đã có một web server ảo, nghĩa là máy tính của bạn đóng vai trò là một web server có cài đặt phần mềm phục vụ web Nếu bạn không đăng ký hosting như đã hướng dẫn ở trên, bạn có thể “upload” website của bạn lên server ảo này và truy cập với tên miền http://localhost (xem phần triển khai website qua IIS)

Vào StartRun gõ http://localhost  OK Trình duyệt xuất hiện như hình bên dưới là bạn đã hoàn tất công việc cài đặt

Hình 1 6 Trang http://localhost

1.3.4.4 Tạo website cục bộ bằng Dreamweaver

Phần này sẽ minh họa các bước cài đặt Dreamweaver CS5 trên máy tính

Bước 1: Mua đĩa DVD có chứa phần mềm Dreamweaver CS5

Bước 2: Cho đĩa vào máy, tìm và chạy file set-up.exe Thực hiện theo các hướng dẫn trên màn hình cài đặt

Sau khi cài đặt xong phần mềm, bạn vào Start Programs Adobe Master Collection CS5  Adobe Dreamweaver CS5

Giao diện của Dreamweaver CS5 có dạng như sau:

Hình 1 7 Giao diện của Dreamweaver CS5

Bước 3: Tạo website cục bộ

- Trên màn hình khởi động, bạn chọn mục Dreamweaver Site…

Hình 1 8 Thiết lập website cục bộ

Hình 1 9 Thiết lập tên và vị trí lưu trữ cho website

Sau khi nhấp chuột vào nút Save, website xuất hiện trong Files panel như sau :

Hình 1 10 Files panel

Trong Files panel, bạn có thể tạo, đổi tên, xóa file hoặc thư mục theo cấu trúc đã

đề cập ở chương 1 Tiến hành nhập các thẻ và các đoạn văn bản, lưu lại dưới dạng

*.htm hoặc *.html; trang trí website bằng cách sử dụng các thuộc tính css Nạp lên trình duyệt xem kết quả Nếu muốn chỉnh sửa, bạn quay lại trình soạn thảo chỉnh sửa, lưu lại sau đó trở lại trình duyệt refresh (nhấn F5) để xem kết quả

Lưu ý: HTML dùng để xác định cách trình bày văn bản chứ không điều khiển

sự hiển thị văn bản Do đó kết quả hiện thị của trang web phụ thuộc vào trình duyệt

Sau khi bạn đã hoàn thiện website với các trang web có liên quan Bạn sẽ muốn thử nghiệm xem website chạy như thế nào trên server Ở phần tiếp theo, chúng ta

sẽ tìm hiểu việc cấu hình IIS để chạy website trên server ảo localhost

1.3.4.5 Triển khai website qua IIS

Để cấu hình IIS, bạn thực hiện các thao tác sau :

Bước 1 : Control panel Administrativer tools Internet Information Services (IIS) Manager

Website vừa tạo

Hình 1 11 Giao diện của Internet Information Services (IIS) Manager

Bước 2 : Tìm đến mục Default web site

Hình 1 12 Làm việc với Default web site

Bước 3: Nhấp chuột phải vào mục Default web site  Add vitural Directory…

Hình 1 13 Xác định tên bí danh và đường dẫn của website

Sau khi nhấp chuột vào nút OK, bạn sẽ nhìn thấy thư mục chứa website của bạn trên server cục bộ

Tên bí danh của website

Xác định vị trí lưu trữ của website cục bô

Hình 1 14 Thư mục chứa website trên server

Bước 4: Nhấp chuột vào mục Content View để xem các file và thư mục có trong website

Hình 1 15 Xem nội dung thư mục chứa toàn bộ website

Bước 5: Start Run gõ http://localhost/mysite/index.html và nhấn enter, Trình duyệt mặc định của máy tính sẽ hiển thị website của bạn

26

1.3.5 Xu hướng thiết kế web hiện nay:

- Căn giữa, bố cục layout bằng kỹ thuật no-table, nghĩa là dùng các thẻ div

- Thiết kế phẳng (Flat design)

- Menu kiểu Hamburger

- Chú trọng nội dung của website, làm sao để thời gian người lướt web tìm được thông tin là nhỏ nhất

- Yếu tố động ít hơn yếu tố tĩnh, không sử dụng nhiều hình ảnh hay popup xen lẫn làm rối mắt

- Hạn chế Banner quảng cáo chớp tắt

- Khung tìm kiếm lớn

- Thiết kế cho con người

- Sử dụng công nghệ web 2.0, JavaScript không chỉ để tạo ra ảnh động hay menu động mà còn để chuyển tải dữ liệu

- Ngôn ngữ web là ngôn ngữ XML

- Yêu cầu người thiết kế phải có sự sáng tạo nhiều hơn để có ý tưởng mới,

bố cục chi tiết, đơn giản mà không đơn điệu

- GIF như là thành phần thiết kế

- Những màu sắc mới, tối giản và ấn tượng

- Sử dụng ít màu sắc, không quá 4 màu, trong đó có 3 màu cùng gam màu, chỉ khác nhau về sắc độ

1.3.6 Một số nguyên tắc khi sử dụng màu sắc trong thiết kế website

Khi thiết kế website, màu sắc đóng

vai trò vô cùng quan trọng Nó quyết

định rất lớn đến bộ mặt của website,

cũng như cảm nhận của người xem

khi truy nhập vào website Để sử dụng

màu sắc hiệu quả trong thiết kế web,

các bạn cần phải hiểu rõ ý nghĩa màu

sắc đang được sử dụng cũng như cách

kết hợp các màu sắc với nhau Dưới đây là một số nguyên tắc và ý nghĩa của các màu cơ bản

Màu sắc được chia thành 3 nhóm:

Nhóm các gam màu nóng

- Màu đỏ- là một trong những màu thu hút sự chú ý và tác động mạnh nhất Màu đỏ tượng trưng cho lửa và sức mạnh, tình yêu và sự đam mê Tuy nhiên, màu hồng là phần nhẹ dịu hơn của màu đỏ lại là sự lãng mạn, êm đềm và dịu dàng

Trong thiết kế, màu đỏ được dùng như một điểm nhấn mạnh mẽ, nó sẽ lấn át các màu sắc khác nếu được sử dụng quá nhiều, đặc biệt là ở dạng tinh khiết nhất của

nó Đó là màu sắc tuyệt vời để thể hiện sức mạnh và niềm đam mê Tuy nhiên, màu

đỏ cũng có những biến thể khác, màu đỏ tươi thể hiện sinh lực, màu đỏ đậm miêu

tả tượng trưng cho sức mạnh và sự thanh lịch

- Màu cam – ấm áp và sôi nổi Nó được gắn liền với đất và mùa thu – đó là màu của sự thay đổi và chuyển động Màu cam mang nhiều nét tiêu biểu của màu đỏ, nhưng kém phần nồng nhiệt hơn Màu cam tượng trưng cho sức khỏe và kích thích sự ngon miệng Màu cam là màu sắc rất rực rỡ và tràn đầy năng lượng

Trong thiết kế, màu cam được sử dụng để lôi cuốn sự chú ý nhưng không áp đảo như màu đỏ, nó dùng để thể hiện sự thân thiện và sự thú vị

- Màu vàng – hình tượng của ánh nắng và sự ấm áp Về mặt tích cực màu vàng mang ý nghĩa về niềm hi vọng, ánh sáng và sinh lực, tuy nhiên ngoài những ý nghĩa đó thì màu vàng cũng thể hiện sự yếu đuối, bệnh tật hoặc nhút nhát

Trong thiết kế, màu vàng tươi tạo một cảm giác hạnh phúc và vui tươi Màu vàng là màu của giới trẻ và các em bé Màu vàng nhạt tạo cho chúng ta một cảm giác thanh bình hơn là màu vàng tươi Màu vàng sẫm và vàng hoe đôi khi có thể nhìn cổ xưa, được sử dụng trong thiết kế mang lại một cảm giác của sự vĩnh cửu

Nhóm các gam màu lạnh

- Xanh lá cây – tượng trưng cho sức khỏe, sự phát triển (thực vật) và sự giàu có (tiền bạc) Nó là biểu tượng của mùa xuân, sự tái sinh và khả năng sinh sản Ngoài ra nó cũng mang ý nghĩa về tính đố kỵ và sự thiếu kinh

nghiệm Xanh lá cây cũng có những thuộc tính êm dịu của xanh lam, những nét sinh khí của màu vàng

Trong thiết kế, xanh lá cây có thể tạo nên hiệu ứng cân bằng, hài hòa và ổn định

Nó thích hợp với các thiết kế thể hiện tính sang trọng, ổn định, đổi mới và tự nhiên Màu xanh tươi có sinh khí và sống động hơn, trong khi đó, xanh ô liu lại tượng trưng của thế giới tự nhiên Xanh đậm mang tính ổn định nhất, biểu tượng của sự sung túc

- Xanh dương – là một trong những màu êm dịu nhất và được gắn với trời

và biển Nó còn được xem như là một màu an toàn, biểu hiện về trí óc, sự bảo đảm và tín nhiệm Ngoài ra, màu xanh dương cũng biểu hiện sự kém ngon miệng, suy sụp và nỗi buồn Màu xanh lam là màu cơ bản trong tông màu này, các màu sắc khác sẽ được tạo ra bằng cách kết hợp màu lam với các màu ấm áp (màu vàng với lam và đỏ tạo ra màu tía) Xanh lục giữ một

số thuộc tính của màu vàng, màu tía có thuộc tính của màu đỏ

Trong thiết kế sử dụng tông màu mát mẻ này sẽ tạo nên một cảm giác về sự thanh bình hay tính chuyên nghiệp Ý nghĩa của xanh lam tùy thuộc vào sắc thái của màu Do đó, trong thiết kế, độ chính xác của sắc thái bạn chọn tác động rất lớn đến cảm nhận của người xem

Ví dụ:

o Màu lam nhạt thể hiện tính thư giản, yên tĩnh

o Màu lam tươi sáng biểu tượng của động lực và tươi mới

o Màu lam đậm thể hiện sức mạnh và độ tin cậy – rất thích hợp để thiết kế cho các trang web của doanh nghiệp hoặc các trang web đòi hỏi thể hiện những ý nghĩa này

- Màu tía – là sự phối hợp giữa màu xanh dương và đỏ, nó là một trong những màu hấp dẫn nhất, tượng trưng cho tính sáng tạo, thần thánh và sự huyền bí Màu tía đậm mang ý nghĩa về sự giàu có và giới hoàng tộc, nhưng màu tía đỏ thì lại là sự lãng mạn và luyến tiếc

Trong thiết kế, màu tía sẫm tạo một cảm giác về sự sang trọng, xa hoa Trong khi đó màu tía nhạt mềm mại hơn là thể hiện của mùa xuân và sự lãng mạn

Nhóm các gam màu trung tính

- Màu đen – tượng trưng cho sức mạnh, sự thanh lịch và tinh tế Ngoài ra

nó nó cũng thể hiện chết chóc, thảm họa, nỗi buồn và sự giận dữ

Màu đen là màu mạnh nhất trong các màu trung tính Trong thiết kế, màu đen được sử dụng để thể hiện tính thanh lịch Nó có thể mang các ý nghĩa khác nhau, như tính bảo thủ hoặc hiện đại, theo truyền thống hay phá cách, tùy thuộc vào màu sắc kết hợp với nó Màu đen thường được sử dụng cho Typography và các bộ phận chức năng khác để chuyển tải cảm giác tinh tế và bí ẩn trong thiết kế

- Màu trắng – thể hiện sự trong sạch, tinh khiết và sự duy linh Với văn hóa phương Tây màu trắng là biểu tượng của sự sống và hôn nhân, nhưng đối với nền văn hóa phương Đông thì màu trắng lại mang ý nghĩa về sự tang tóc

Trong thiết kế, màu trắng được dùng để tạo bối cảnh Nó truyền tải thông điệp

về sự trong sạch, giản dị và đức hạnh Màu trắng thường được sử dụng trong các thiết kế theo trường phái tối giản Nó là biểu tượng của mùa đông hay mùa hè tùy thuộc vào các motip và màu sắc bao quanh nó

- Màu xám – là sự phối hợp của màu trắng và màu đen Màu xám là một màu sắc trung tính có ý nghĩa về sự an toàn, tính chín chắn và tin cậy Ngoài ra màu xám cũng là dấu hiệu của nỗi buồn và ảm đạm

Trong thiết kế, Background (nền) màu xám khá phổ biến, làm tăng thêm tính hiện đại của các Typography Màu xám nhạt mang lại cảm giác nhẹ nhàng, yên tĩnh, mát mẻ cũng như hiện đại cho trang web

- Màu nâu – được phân loại là gam màu “đặc biệt” Bởi đôi khi nó có thể được sử dụng như một màu trung tính song có khi lại được dùng như một gam màu nóng Dù được dùng theo cách nào thì màu nâu vẫn tượng trưng cho sự tin cậy, ổn định, sức khỏe, quê hương và trái đất

Trong thiết kế, màu nâu là màu của Background (nền), các text (văn bản) có texture (hoa văn) bằng gỗ và đá, mang lại một cảm giác ấm áp và khỏe khoắn cho thiết kế Sắc độ của màu nâu đem lại những cảm giác khác biệt cho người xem

Ví dụ: màu nâu xám làm tăng thêm cảm giác về tính trách nhiệm và độ tin cậy; trong khi đó màu nâu cam lại tạo ra cảm giác chân thật, màu nâu đậm thể hiện tính kiên định…

Một số nguyên tắc khi sử dụng màu:

- Các màu sắc tương phản giúp đọc trang web dễ hơn: Bạn nên dùng chữ màu tối được viết trên nền sáng hoặc ngược lại Mặc dù cách dùng chữ màu sáng trên nền tối là dễ đọc, nhưng nên hạn chế dùng kỹ thuật này Bởi thực tế đã chứng minh rằng mắt sẽ bị mỏi hơn khi đọc lượng chữ lớn trên nền tối so với các cách tạo sự tương phản khác

- Sử dụng hạn chế màu sắc: Để gây ấn tượng, các nhà thiết kế thường chọn dùng nhiều màu trên bản thiết kế của mình Tuy nhiên, ấn tượng đó sẽ không còn nếu màu sắc xuất hiện mọi nơi trên trang web Vì vậy, bạn hãy dùng màu cho các tựa đề và các từ ngữ quan trọng nhất trong tựa đề để tạo được ấn tượng tối đa

- Không dùng các màu bổ sung: Các màu đối diện nhau trên bánh xe màu được gọi là các màu bổ sung Ví dụ, màu xanh đối diện với da cam trên bánh xe màu Do đó, khi đặt chúng cạnh nhau có thể gây nhức mắt người xem vì rất khó nhìn cả hai màu này cùng lúc Ngoài ra, những màu bổ sung có thể đối chọi nhau khi đứng cùng nhau

- Không dùng màu che khuất hơn 40% chữ: Bất kỳ màu nào tối hơn màu chữ 40% đều khiến khó đọc chữ hơn Tuy nhiên, bạn cũng có thể thay đổi quy tắc này bằng cách tính được độ tối của màu sẽ dùng

Ví dụ, màu xanh lục có thể tối hơn nên không làm nổi bật được chữ bằng màu xanh dương

Chương 2 GIỚI THIỆU TỔNG QUAN VỀ HTML

Chương 2 sẽ giới thiệu tổng quan về ngôn ngữ HTML là ngôn ngữ dùng để xây dựng website Trong chương này bạn sẽ được tìm hiểu các cú pháp viết thẻ trong HTML, các thẻ cơ bản trong HTML, cấu trúc một trang tài liệu HTML

Cũng trong chương này, các bạn sẽ được tìm hiểu về XHTML là ngôn ngữ đánh dấu siêu văn bản mở rộng, được phát triển để thay thế HTML

Sau khi học xong chương này, người học có thể xây dựng được các trang web đơn giản chứa các thông tin cần thiết như hình ảnh, âm thanh, video, văn bản, siêu liên kết…

2.1 Giới thiệu về HTML

Trang web khác với các văn bản khác được tạo ra bởi Word, NotePad… Trang Web được thiết kế để có thể hiển thị được trên các trình duyệt Các trình duyệt sẽ dịch và hiển thị nội dung trang Web của bạn do các trang web được định dạng bằng ngôn ngữ HTML (HyperText MarkupLanguage)

HTML là một ngôn ngữ đánh dấu siêu văn bản, được thiết kế ra để tạo nên các

trang web với các mẩu thông tin được trình bày trên World Wide Web

Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML

XHTML là viết tắt của cụm từ “eXtensible HyperText Markup Language”, là

ngôn ngữ đánh dấu siêu văn bản mở rộng

XHTML là bộ thẻ mở rộng của HTML theo kiểu XML (eXtensible Markup

Languag- là ngôn ngữ đánh dấu mở rộng, với cấu trúc tự do, gồm các thẻ do người

Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web

2.2 Thực hành tạo trang web

2.2.1 Các công cụ thiết kế trang web

Như đã đề cập ở trên, để hoàn thiện việc thiết kế một website, bạn cần thực hiện việc phác thảo nội dung, sau đó bạn tiến hành thiết kế giao diện đồ họa bằng cách

sử dụng các phần mềm đồ họa Dựa vào giao diện đó, bạn tiến hành bố cục layout bằng HTML và CSS Sau khi thực hiện xong việc bố cục layout, bạn cần tiến hành kiểm thử trên các trình duyệt Vậy các công cụ cơ bản cần có để thiết kế trang web gồm:

- Công cụ phác thảo nội dung web: Visio, MockFlow, Pencil Project

(miễn phí), Balsamiq Mockups…

- Công cụ đồ họa hỗ trợ việc thiết kế giao diện: Photoshop, Flash…

- Trình soạn thảo web : Notepad, Frontpage hoặc Dreamweaver…

- Trình duyệt: Internet Explorer, fireFox, Chrome… phiên bản mới nhất

Để thống nhất trong việc trình bày, giáo trình sẽ minh họa ví dụ trên Dreamweaver CS5 và sử dụng trình duyệt Firefox

2.2.2 Thiết lập cấu trúc thư mục cho Website

Trước khi bắt tay vào xây dựng một website, việc cần làm đầu tiên là tạo ra các thư mục cục bộ trên máy tính để chứa toàn bộ website Những thư mục này là bản sao 1-1 với các thư mục trên WebServer Vì vậy việc tổ chức thư mục cục bộ sẽ giúp việc tải dữ liệu lên (upload) server thuận tiện và dễ theo dõi vì bạn chỉ cần dùng một phần mềm FTP client để chuyển toàn bộ thư mục cục bộ này lên thư mục gốc của website trên webserver

Thư mục cục bộ này thường có cấu trúc như hình 1.1

- Thư mục MyWeb là thư mục gốc

- Thư mục Images chứa tất cả các hình ảnh liên quan đến nội dung trong

- File index.html phải nằm trong thư mục gốc và nằm ngoài tất cả các thư

<! Tiêu đề chứa thông tin mở rộng của tài liệu, không hiển thị trên web >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

- Cặp thẻ <html> và </html> cho biết đây là tài liệu HTML

- Cặp thẻ <head> và </head> chứa tất cả các định nghĩa mô tả về trang HTML

MyWeb

Images Scripts Styles Index.html Hình 2 1 Sơ đồ cấu trúc thư mục của website

- Cặp thẻ <body> và </body> chứa tất cả các thẻ dùng để trình bày nội dung của website

Cấu trúc trang web trên tuân theo cú pháp của HTML, tuy nhiên như đã đề cập ở phần 2.1, hiện nay các nhà phát triển đã thay thế HTML bằng XHTML, do đó khi

ta tạo ra một tài liệu HTML mới trong Dreamweaver, nội dung sau được tạo ra:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<! Tiêu đề chứa thông tin mở rộng của tài liệu, không hiển thị trên web >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 Transitional: Các thẻ đánh dấu trong trang là sự kết hợp giữa

HTML và XHTML Tuy nhiên thẻ <frame> không được chấp nhận

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Lưu ý: Hiện nay các trình duyệt mới không còn hỗ trợ Frameset

- Phần <html xmlns="http://www.w3.org/1999/xhtml"> dùng để khai báo

khai báo không gian tên chứa thông tin về nguồn gốc của DTD

• Ví dụ: xmlns=http://www.w3.org/1999/xhtml cho biết DTD là của

- Các phần tử phải được lồng nhau đúng cách

• Trong HTML một số phần tử có thể được lồng vào nhau không đúng cách như thế này:

<b><u>Đoạn văn bản in đậm và gạch chân </b></u>

• Trong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách như thế này:

<b><u>Đoạn văn bản in đậm và gạch chân </b></u>

- Tên gọi của thẻ đều phải viết thường

XHTML kế thừa cú pháp của XML và mỗi trang XHTML đều là các ứng dụng XML cho nên XHTML có phân biệt chữ hoa chữ thường, điều này không có ở HTML Với HTML thì các thẻ như <br> và <BR> là hiểu là giống nhau nhưng một khi bạn đã xác định trang web của bạn là XHTML thì trình duyệt sẽ dịch hai thẻ này là khác nhau

• HTML chấp nhận cách viết dưới đây:

<BODY>

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

- Tất cả các phần tử XHTML phải được đóng lại, kể cả phần tử rỗng

• HTML chấp nhận cách viết sau đây:

<p>Phần 1 của đoạn văn bản 1

<br> Phần 2 của đoạn văn bản 1

<p>Đoạn văn bản 2

• XHTML yêu cầu phải viết như sau:

<p>Phần 1 của đoạn văn bản 1

<br/> Phần 2 của đoạn văn bản 1</p>

<p>Đoạn văn bản 2</p>

Lưu ý: Để làm cho trang XHTML tương thích với các trình duyệt hiện nay thì

nên đặt một khoảng trắng thêm vào trước kí tự /,

Ví dụ : <br />, và <hr />

- Các giá trị của thuộc tính phải được đặt trong dấu nháy kép

• HTML chấp nhận cách viết sau đây:

<p align=justify>

• XHTML yêu cầu phải viết như sau:

<p align=”justify”>

- Việc tối giản thuộc tính trong XHTML bị nghiêm cấm

• HTML chấp nhận cách viết sau đây:

<dl compact>

<input checked>

<input readonly>

- Thẻ có chứa thông tin: có dạng thẻ mở <tên_thẻ>, thẻ đóng </tên_thẻ>

<tên_thẻ> Nội dung thẻ </tên_thẻ>

- Thẻ rỗng: Thẻ không chứa nội dung, thẻ vừa đóng vai trò là thẻ mở và thẻ đóng

Thẻ <head> dùng để định nghĩa các mô tả về trang HTML Các thông tin này sẽ không hiển thị dưới dạng nội dung của trang web Thẻ <head> có thể chứa các thành phần: <base>, <title>, <meta>

- Thẻ <base>: được dùng để khai báo địa chỉ cơ bản cho file HTML Khi

dùng thẻ base ta cần có thuộc tính href để chỉ định địa chỉ cơ bản cho các mối nối liên kết

Ví dụ :

<base href="http:// hou.edu.vn">

Ở ví dụ trên, ta xem địa chỉ cơ bản của các mối nối liên kết đều chỉ đến địa chỉ

"http://fithou.edu.vn"

Ngoài ra còn có một thẻ mở rộng <base target=”frame_name”> dùng để chỉ định frame mặc nhiên mà các đối tượng liên kết được nạp vào

- Thẻ <title> </title>: Dùng để mô tả tiêu đề của trang web, tiêu đề của

trang thường được hiển thị như là tiêu đề của cửa sổ hiển thị trang web Thông tin này cũng có thể được dùng bởi một số máy tìm kiếm để xây dựng chỉ mục cho các trang web Vì vậy thẻ tiêu đề rất quan trọng, bạn nên đặt tiêu đề cho trang web sao cho tiêu đề này chứa các từ khóa mà người dùng có thể sử dụng để tìm kiếm Điều này tạo ra cơ hội cho website của bạn được người dùng biết đến và nhấn chuột vào liên kết để vào thăm website

Ví dụ:

<title> Cổng thông tin điện tử của khoa CNTT</title>

- Thẻ meta: Là một thành phần quan trọng trong file HTML, được dùng để

khai báo các thông tin khác về tài liệu (kiểu nội dung, tìm kiếm, xóa

cache, chuyển trang, tên tác giả…) Thẻ này có các thuộc tính cơ bản sau:

<meta http-equiv=“ ” content=“ ” name=“ ”/>

Trong đó:

- Thuộc tính http-equiv: cung cấp tiêu đề HTTP cho các thông tin hoặc giá

trị của thuộc tính content Thuộc tính http-equiv dùng để thay thế thuộc tính name trong 1 số trường