Giáo trình Thiết kế web cung cấp cho người học những kiến thức như: Giới thiệu internet; các bước thiết kế website; HTML; css và javasript; đăng ký và quản lý website. Mời các bạn cùng tham khảo!
Trang 1ỦY BAN NHÂN DÂN TỈNH ĐỒNG THÁP
TRƯỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP
GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB
NGÀNH, NGHỀ: CÔNG NGHỆ THÔNG TIN
TRÌNH ĐỘ: CAO ĐẲNG
(Ban hành kèm theo Quyết định số /QĐ-CĐCĐ ngày tháng năm 20…
của Hiệu trưởng trường Cao đẳng Cộng đồng Đồng Tháp)
Trang 3LỜI NÓI ĐẦU
Các ứng dụng web đã và đang ảnh hưởng trực tiếp đến các hoạt động và thói quen sinh hoạt hàng ngày của mỗi người, từ sinh viên, người nội trợ cho đến giới văn phòng và doanh nhân
Lợi nhuận cao thu được từ việc kinh doanh các ứng dụng web đã thu hút các công ty phần mềm chuyển hướng sang lĩnh vực này Điều này mở ra nhiều cơ hội việc làm cho những ai thực sự quan tâm và yêu thích lĩnh vực thiết kế web
Bài giảng bao gồm các chương sau:
Chương 1: GIỚI THIỆU INTERNET
Chương 2: CÁC BƯỚC THIẾT KẾ WEBSITE
Chương 3: HTML
Chương 4: CSS VÀ JAVASRIPT
Chương 5: ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE
Cuối cùng, xin gửi lời cảm ơn chân thành nhất đến chúng ta bè, đồng nghiệp đã có những ý kiến đóng góp sâu sắc cho bài giảng này Mọi ý kiến đóng góp xin vui lòng gửi đến địa chỉ mail: pqcuong@dtcc.edu.vn Xin chân thành cảm ơn!
Đồng Tháp, ngày 09 tháng 04 năm 2015
Tác giả
Trang 4MỤC LỤC
LỜI NÓI ĐẦU i
MỤC LỤC ii
DANH MỤC CÁC HÌNH iv
Chương 1 1
GIỚI THIỆU INTERNET 1
1.1 Giới thiệu những khái niệm 1
1.1.1 Khái niệm về Internet 1
1.1.2 Khái niệm về World Wide Web 2
1.2 Thuật ngữ Internet 3
1.2.1 Webpage 3
1.2.2 Website 3
1.2.3 Homepage - Trang chủ 3
1.2.4 Website tĩnh 3
1.2.5 Website động 3
1.2.6 Tên miền 4
1.2.7 Máy chủ 4
1.2.8 URL 4
1.2.9 Trình duyệt web 4
CÂU HỎI ÔN TẬP CHƯƠNG 1 6
Chương 2 7
CÁC BƯỚC THIẾT KẾ WEBSITE 7
2.1 Mục đích của website cần thiết kế 7
2.2 Chiến lược thiết kế 8
2.3 Thiết kế giao diện 9
CÂU HỎI ÔN TẬP CHƯƠNG 2 15
Chương 3 16
HTML 16
Trang 53.1 Giới thiệu HTML 16
3.2 Trình soạn thảo HTML 19
3.3 Các thuộc tính trong HTML (HTML Attributes) 22
3.4 HTML Headings 25
3.5 HTML Paragraphs 26
3.6 Các thẻ định dạng 28
3.6.1 HTML Style 28
3.6.2 HTML Formatting 32
3.7 HTML Comments 37
3.8 HTML Links 38
3.9 HTML Images 41
3.10 HTML Tables 43
3.11 HTML Lists 45
3.12 Thẻ <div> 49
3.13 HTML Iframes 50
3.14 HTML Forms 51
CÂU HỎI ÔN TẬP CHƯƠNG 3 56
Chương 4 76
CSS VÀ JAVASCRIPT 76
4.1 Giới thiệu CSS 76
4.2 Một số đặc tính cơ bản của CSS 79
4.3 Giới thiệu ngôn ngữ JavaScript 90
CÂU HỎI ÔN TẬP CHƯƠNG 4 95
Chương 5 107
ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE 107
5.1 Đăng ký tên miền (domain) miễn phí 107
5.1.1 Tên miền tiếng việt 107
5.1.2 Tên miền miễn phí TK 108
Trang 65.1.3 Tên miền miễn phí uni.me 109
5.1.4 Tên miền VN.EE 110
5.2 Đăng ký host miễn phí 111
5.2.1 Đăng ký host miễn phí với freeservers 111
5.2.2 Đăng ký host miễn phí với Hostinger 114
CÂU HỎI ÔN TẬP CHƯƠNG 5 117
TÀI LIỆU THAM KHẢO 118
DANH MỤC CÁC HÌNH
Trang 7Hình 1 – Mô hình Internet 2
Hình 2 – Bố cục website 13
Hình 3 – Độ phân giải màn hình 14
Hình 4 – Soạn thảo HTML trong Notepad 20
Hình 5 – Đặt tên và chọn kiểu mã hóa cho tập tin HTML trong Notepad 21
Hình 6 – Kết quả hiển thị trên trình duyệt Google Chrome 22
Hình 7 – Tra cứu tên miền tiếng Việt 107
Hình 8 – Tên miền miễn phí TK 108
Hình 9 – Đăng ký tên miền TK 109
Hình 10 – Trang uni.me 109
Hình 11 – Đăng ký tài khoản tại uni.me 110
Hình 12 – Tên miền VN.EE 111
Hình 13 – Website freeservers 111
Hình 14 – Chọn gói cước miễn phí 112
Hình 15 – Đăng ký thông tin trên freeservers 113
Hình 16 – Freeserver cung cấp một số lựa chọn xây dựng website 113
Hình 17 – Đăng ký tài khoản tại Hostinger 114
Hình 18 – Gói hosting miễn phí 114
Hình 19 – Chọn gói hosting miễn phí của Hostinger 115
Hình 20 – Form đăng ký tên miền trên Hostinger 116
Trang 8Chương 1 GIỚI THIỆU INTERNET MỤC ĐÍCH
Cung cấp những kiến thức tổng quát về Internet, giúp sinh viên hiểu được các khái niệm và thuật ngữ về Internet
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chương 1
Để đạt được mục đích đề ra trong chương 1, sinh viên phải thực hiện tốt các yêu cầu sau đây:
Phải đọc trước nội dung Chương 1 trong quyển bài giảng này trước khi lên lớp
1.1 Giới thiệu những khái niệm
1.1.1 Khái niệm về Internet
Internet là một tập hợp của các máy tính được liên kết nối lại với nhau thông qua hệ thống dây cáp mạng và đường điện thoại trên toàn thế giới với mục đích trao đổi, chia
sẻ dữ liệu và thông tin Bất cứ nguời nào trên hệ thống cũng có thể tiếp cận và xem thông tin từ bất cứ một máy tính nào trên hệ thống này hay hệ thống khác
Trước đây mạng Internet được sử dụng chủ yếu ở các tổ chức chính phủ và trong các trường học Ngày nay mạng Internet đã được sử dụng bởi hàng tỷ người bao gồm cả cá nhân các doanh nghiệp lớn, nhỏ, các trường học và tất nhiên là nhà nước và các tổ chức chính phủ Phần chủ yếu nhất của mạng Internet là World Wide Web
Mạng Internet là của chung điều đó có nghĩa là không ai thực sự sở hữu nó với tư cách
cá nhân Mỗi phần nhỏ của mạng được quản lý bởi các tổ chức khác nhau nhưng không
ai không một thực thể nào cũng như không một trung tâm máy tính nào nắm quyền điều khiển mạng Mỗi phần của mạng được liên kết với nhau theo một cách thức nhằm tạo nên một mạng toàn cầu
Trang 9Internet là một mạng toàn cầu bao gồm nhiều mạng LAN (Local Area Network), MAN (Metropolitan Area Network) và WAN (Wide Area Network) trên thế giới kết nối với nhau Mỗi mạng thành viên này được kết nối vào Internet thông qua một router
Hình 1 – Mô hình Internet
1.1.2 Khái niệm về World Wide Web
Word Wide Web được gọi tắt là Web - là mạng lưới nguồn thông tin cho phép mọi người khai thác thông tin qua một số công cụ hoặc là chương trình hoạt động dưới các giao thức mạng World Wide Web là một trong số các dịch vụ của Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện và dễ dàng
Sở dĩ Web trở nên phổ biến vì Web cung cấp cho người sử dụng khả năng truy cập dễ dàng từ đó người sử dụng có thể khai thác các thông tin đa dạng trên Internet bao gồm phần, hình ảnh thậm chí cả âm thanh và video nghĩa là những gì mà chúng ta có thể cảm nhận được, vì thế Web đôi khi còn được gọi là đa phương tiện của mạng Internet Thông tin được biểu diễn bằng “website” mà chúng ta có thể nhìn thấy trên màn hình máy tính Mọi thông tin đều có thể hiển thị trên website đó, kể cả âm thanh, hình ảnh động, nhưng vấn đề lý thú nhất của Web nằm ở khía cạnh khác, đó là website mà chúng ta nhìn thấy trên màn hình máy tính có khả năng liên kết với những website khác, dẫn chúng ta đến những nguồn thông tin khác
Trang 10Khả năng này của Web có được là nhờ thông qua các “siêu liên kết” (hyperlink), siêu liên kết về bản chất là địa chỉ trỏ tới nguồn thông tin (website) nằm đâu đó trên Internet Bằng những siêu liên kết này, các website có thể liên kết với nhau thành một mạng chằng chịt, trang này trỏ tới trang khác, cho phép mọi người chu du trên biển cả thông tin
1.2 Thuật ngữ Internet
1.2.1 Webpage
Webpage là một website, tức một tập tin có đuôi htm hay html Đó là một tập tin viết
bằng mã code HTML chứa các siêu liên kết (hyperlink) đến các trang khác Trên website ngoài thành phần chữ nó còn có thể chứa các thành phần khác như hình ảnh, nhạc, video
1.2.2 Website
Website là tập hợp những website liên kết với nhau bằng các siêu liên kết Website được đưa vào mạng Internet để hoà cùng các website khác, mọi người trên khắp thế giới đều có thể truy cập được vào website để lấy thông tin
Trang 111.2.6 Tên miền
Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói cách khác, dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số được đánh địa chỉ bằng số Cách nhìn trừu tượng này cho phép bất kỳ tài nguyên nào (ở đây
là website) đều có thể được di chuyển đến một địa chỉ vật lý khác trong cấu trúc liên kết địa chỉ mạng, có thể là toàn cầu hoặc chỉ cục bộ trong một mạng intranet, mà trên thực tế là đang làm thay đổi địa chỉ IP Việc dịch từ tên miền sang địa chỉ IP (và ngược lại) do hệ thống DNS trên toàn cầu thực hiện
Với việc cho phép sử dụng địa chỉ dạng chữ cái không trùng nhau thay cho dãy số, tên miền cho phép người dùng Internet dễ tìm kiếm, liên lạc với các website và bất kỳ dịch
vụ liên lạc dựa trên IP nào khác Tính uyển chuyển của hệ thống tên miền cho phép nhiều địa chỉ IP có thể được gán vào một tên miền, hoặc nhiều tên miền đều cùng chỉ đến một địa chỉ IP Điều này có nghĩa là một máy chủ có thể có nhiều vai trò (như lưu trữ nhiều website độc lập) hoặc cùng một vai trò có thể được trải ra trên nhiều máy chủ
1.2.7 Máy chủ
Máy chủ, máy phục vụ hay hệ thống cuối là một máy tính được nối mạng, có IP tĩnh,
có năng lực xử lý cao và trên máy đó người ta cài đặt các phần mềm để phục vụ cho các máy tính khác (máy trạm) truy cập để yêu cầu cung cấp các dịch vụ và tài nguyên
1.2.8 URL
URL, viết tắt của Uniform Resource Locator, đượ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, còn được gọi là địa chỉ web hay là liên kết mạng (hay ngắn gọn là liên kết)
1.2.9 Trình duyệt web
Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và tương tác với các phần, hình ảnh, đoạn phim, nhạc, trò chơi và các thông tin khác ở trên một
Trang 12website của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ Phần và hình ảnh trên một website có thể chứa siêu liên kết tới các website khác của cùng một địa chỉ web hoặc địa chỉ web khác
Trình duyệt web cho phép người sử dụng truy cập các thông tin trên các website một cách nhanh chóng và dễ dàng thông qua các liên kết đó Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một website có thể hiển thị khác nhau trên các trình duyệt khác nhau
Trang 13CÂU HỎI ÔN TẬP CHƯƠNG 1
1 Trình bày khái niệm về Internet?
2 Trình bày khái niệm về World Wide Web (www)?
3 Phân biệt Webpage và Website?
4 Tên miền là gì?
5 Phân biệt website tĩnh và website động?
Trang 14Chương 2 CÁC BƯỚC THIẾT KẾ WEBSITE MỤC ĐÍCH
Giới thiệu các qui tắc và các bước thiết kế một website, giúp sinh viên hiểu được qui trình thiết kế một website như thế nào
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chương 2
Để đạt được mục đích đề ra trong chương 2, sinh viên phải thực hiện tốt các yêu cầu sau đây:
Xem trước đề cương chi tiết của Chương 2 để biết được mục đích, nội dung sẽ được trình bày trong chương này
2.1 Mục đích của website cần thiết kế
Việc xác định được mục đích trước khi tiến hành thiết kế một website đóng vai trò rất quan trọng đối với sự thành công của website đó Phần bên dưới sẽ trình bày các bước cho việc xác định mục đích của website cần thiết kế:
Bước 1: Nội dung website của chúng ta là gì?
Đây là câu hỏi mà chúng ta cần phải dành thời gian suy nghĩ để có thể có được câu trả lời rất rõ ràng Bố cục và chức năng của website sẽ dễ thực hiện hơn khi chúng ta hiểu tường tận về nội dung website của mình
Bước 2: Hãy chú trọng vào bố cục và tính thiết thực của website
Ở bước này chúng ta cần đặt ra những câu hỏi: Ý tưởng chính trên website của mình là gì? Định dạng phù hợp nào mà chúng ta muốn sử dụng cho nội dung website của mình? Chúng ta có thể tạo ra một website như thế nào để sẽ thu hút được người dùng theo mong đợi của mình?
Trang 152.2 Chiến lược thiết kế
Bất cứ điều gì chúng ta cố gắng để tiến hành thiết kế website thì mục tiêu chính vẫn là
có được lượng truy cập cao vào website mà mình xây dựng Khi thiết kế một website mới dù website đó lớn hay nhỏ thì điều quan trọng nhất là làm sao để mọi người luôn trở lại với website của mình Quan điểm của mỗi người về một website hiệu quả có sự khác nhau: Một số người có thể quan trọng về giao diện web trong khi những người khác lại quan tâm đến sự tiện ích nhiều hơn Những tiêu chí sau sẽ giúp của chúng ta
có được sự vượt trội trong rừng website hiện nay
Giao diện website
Không ai muốn nhìn một website có giao diện kém thu hút nhưng nếu nó quá sặc sỡ thì cũng không phải là hay Việc tìm thấy một sự hài hoà tốt giữa chúng là chìa khoá để có bản thiết kế website hiệu quả Các nhà thiết kế web chuyên nghiệp đã sử dụng tâm lý màu nhằm truyền tải những lời thông điệp khác nhau tới người dùng Một bản thiết kế đừng nên quá phức tạp hay khó hiểu và cũng nên phù hợp với loại hình website mà chúng ta muốn hướng đến
Ý tưởng chính trên website của mình
là gì?
Định dạng phù hợp nào mà chúng ta muốn sử dụng cho nội dung website của mình?
Chúng ta có thể tạo ra một website như thế nào để sẽ thu hút được người dùng theo mong đợi của mình?
Trang 16Tính tiện ích
Internet cung cấp vô vàn thông tin nên khó giành được sự chú ý của mọi người cũng như giữ họ trên website của chúng ta Một trong những điều khiến người truy cập hay rời bỏ nhất là tiện ích nghèo nàn Một website cần được đơn giản và dễ sử dụng Điều hướng nên dễ dàng truy cập tới được mọi trang trên website Khách truy cập sẽ không bao giờ phải kích chuột nhiều hơn 4 lần để vào một trang cụ thể Một quy tắc chung của hầu hết các chuyên gia thiết kế web là không nên để khách truy cập nhấp chuột quá
2 lần khi truy cập tới bất kỳ trang nào trên website Cấu trúc điều hướng phức tạp sẽ nhanh chóng làm mất khách truy cập và họ sẽ rời bỏ nếu họ không thể tìm thấy những điều mà họ đang tìm kiếm
2.3 Thiết kế giao diện
Trong mọi việc, bước đầu tiên bao giờ cũng là bước khó nhất Điều đó càng đúng với nếu chúng ta chưa có kinh nghiệm và không biết gì nhiều về những việc mà mình sẽ làm Phần này sẽ giúp chúng ta trả lời một một câu hỏi rất hay thường gặp ở những người mới bắt đầu làm thiết kế web là làm thế nào để lấy cảm hứng và ý tưởng của những website thiết kế đẹp mà chúng ta thích để tạo ra thiết kế riêng cho mình mà không rơi vào tình huống sao chép thiết kế của họ Vậy bước đầu tiên sẽ là gì? Bước đầu tiên tuy khó để nghĩ ra nhưng thường lại là bước dễ nhất và chẳng mấy ngạc nhiên một khi chúng ta đã biết về nó:
Bước 1: Tìm nguồn cảm hứng
Việc có được cảm hứng là một điều rất quan trọng trong những ngành nghệ thuật liên quan đến quá trình sáng tạo Trong âm nhạc, nguồn cảm hứng có thể là từ một cảm xúc chợt đến trong một buổi chiều Trong thơ văn nó có thể bắt nguồn từ một cảnh quang thiên nhiên Còn trong thiết kế, nguồn cảm hứng đến từ … những thiết kế khác Chính
vì vậy, không giống như trong thơ và nhạc việc tìm được nguồn cảm hứng thường đến
Trang 17một cách ngẫu nhiên và có phần may mắn, trong thiết kế, chúng ta có thể tự mình đi tìm nguồn cảm hứng:
Hãy chụp và lưu lại màn hình của các website mà chúng ta thích vào một thư mục trên máy tính Các trang gallery thường để hình ảnh thu nhỏ và thường không có mấy tác dụng trong việc giúp chúng ta thấy được cái đẹp của thiết kế Việc lưu lại hình ảnh ở độ phân giải thực không những sẽ đem lại cho chúng ta sự chi tiết mà còn giúp chúng ta xem lại những thiết kế này dễ dàng hơn về sau mà không cần phải mở trình duyệt ra
Ở bước này, chúng ta không cần phải nghĩ về thiết kế “tương lai” của mình mà hãy
cứ việc dạo quanh một vòng và thưởng thức những thiết kế của người khác Tuy nhiên, chúng ta cần xác định rõ website mà mình sẽ thiết kế là thuộc phân mục nào Có rất nhiều thiết kế đẹp, nhưng không phải thiết kế nào cũng phù hợp với mục đích của chúng ta Ví dụ như phong cách thiết kế của một website doanh nghiệp sẽ không phù hợp với một trang blog cá nhân Việc xác định rõ ngay từ đầu
sẽ giúp chúng ta bỏ qua rất nhanh những thiết kế không phù hợp (những gallery ở trên thường có đến hàng trăm thiết kế, việc ngồi xem hết từng cái là không thể)
Đừng ngồi quá lâu để xem cùng một lúc Hãy dành thời gian làm việc khác, để hôm sau xem tiếp Lý do là thường thì một khi xem quá lâu, càng về sau chúng ta
sẽ càng cảm thấy mệt mỏi và khi đó dường như mọi thiết kế đều trở nên có vẻ giống như nhau - mặc dù nếu chúng ta xem nó ngay từ lúc đầu thì chúng ta lại thấy
nó đẹp Vì vậy, sẽ là lý tưởng nếu mỗi ngày chúng ta chỉ xem vài ba thiết kế và đó
là lý do tại sao chúng ta nên có thói quen sưu tầm thiết kế đẹp mỗi ngày - để đến lúc cần thì đã có sẵn những thiết kế mà chúng ta thích Nếu chúng ta xác định mình
sẽ đi theo nghề thiết kế web, đó là một thói quen nên học
Vậy khi nào thì chúng ta nên dừng lại? Khi nào thì chúng ta biết rằng mình đã tìm được nguồn cảm hứng? Rất khó để trả lời được câu hỏi này Sẽ có những lúc mà chúng ta bắt gặp một website quá đẹp mà chúng ta chỉ muốn dừng lại và bắt tay ngay vào việc thiết
Trang 18kế một website tương tự Nhưng trừ khi chúng ta muốn sao chép nguyên si thiết kế của
họ (mà như vậy thì đã chẳng gọi là thiết kế), cảm hứng từ một thiết kế như vậy sẽ không đủ để giúp chúng ta có thể làm nên thiết kế của riêng mình - mặc dù chúng ta có thể chắc chắn là thiết kế đó sẽ đóng vai trò rất quan trọng ảnh hưởng đến thiết kế của chúng ta Vậy nên, lời khuyên của là hãy chỉ dừng lại khi:
Chúng ta đã có được ít nhất 10 - 20 thiết kế mà chúng ta cảm thấy đẹp và phù hợp với website của mình
Có ít nhất một trang thiết kế mà nó khiến chúng ta chỉ muốn sao chép nguyên si của nó về (dù rằng mục đích của chúng ta không phải là như vậy)
Khi đó, chúng ta có thể bắt đầu chuyển sang bước thứ 2:
Bước 2: Định hình ý tưởng
Sau khi đã chọn được khoảng 10-20 thiết kế trong bước 1 và bước đầu có cảm hứng để quyết định sẽ thiết kế cho riêng mình một website, chúng ta sẽ cần phải định hình ý tưởng cho website của mình Hãy ngồi duyệt lại những ảnh chụp website mà chúng ta
đã lưu vào máy trong bước 1, ghi chú xuống một mảnh giấy nhỏ những điểm mà chúng
ta thích về một thiết kế mà chúng ta nghĩ rằng mình muốn có trong thiết kế của mình
Điều rất quan trọng là chúng ta hãy để ý đến ý tưởng chứ không phải chi tiết của thiết
kế Điều đó có nghĩa là chúng ta nên ghi lại ý tưởng sử dụng mây làm hình ảnh ở đầu trang và cỏ ở cuối trang tạo cảm giác về không gian, nhưng chúng ta không nên sao chép hình ảnh mà họ sử dụng Những gì chúng ta cần để ý: cách sử dụng màu sắc, hình thức bố cục, cách sắp xếp nội dung, và thậm chí cách cách mà họ làm viền cho hình ảnh… những gì chúng ta không nên để ý: website đó sử dụng hình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết
Sau bước này, chúng ta sẽ có một ý tưởng tương đối rõ ràng (ít ra là không mơ hồ không xác định như trước) về website của mình Website sẽ có thiết kế đơn giản và
Trang 19sắc tạo cảm giác tươi trẻ hay sẽ chọn tông màu đơn lẻ mà sang trọng? Website sẽ có bố cục 3 cột hay 2 cột? Chúng ta thâm chí sẽ xác định được những câu hỏi tương đối chi tiết như liệu mình sẽ sử dụng hình ảnh vector hay sẽ sử dụng ảnh chụp để làm trang trí?
Bước 3: Xây dựng khung nội dung
Thế nào gọi là xây dựng khung nội dung? Đó là quá trình đi tìm câu trả lời cho câu hỏi
- nếu nhìn từ xa, bố cục website của chúng ta sẽ trông như thế nào? Thuật ngữ trong thiết kế thường gọi quá trình này là “prototyping” - tức xây dựng mô hình mẫu Một bức hình có thể thay vạn lời giải thích - đây là cái gọi là “khung nội dung”
Mục đích của việc thiết kế khung giao diện không phải là để tạo ra giao diện - chúng ta đơn giản là tạo một mô hình “thô” của giao diện Chúng ta không cần quan tâm về màu sắc Chúng ta cũng không cần quan tâm về những biểu tượng cụ thể được sử dụng là
gì Nói tóm lại, chúng ta không phải quan tâm về những chi tiết nhỏ của thiết kế mà chỉ cần tập trung vào bức tranh tổng thể của website (tưởng tượng nếu chúng ta đứng cách
xa màn hình 5 mét và nhìn website của mình sẽ như thế nào - chắc chắn chúng ta sẽ không thấy cụ thể nội dung mà chỉ thấy bố cục của nó) Có hai bước chính:
Xác định và phân loại nội dung sẽ xuất hiện Ví dụ như nếu đó là một trang blog thì thường sẽ có những đối tượng chính sau: Tiêu đề, danh sách các phân mục, cột nội dung bài viết, các liên kết chúng ta bè Tuỳ theo mục đích cụ thể, chúng ta có thể có thêm những đối tượng nội dung khác - ví dụ như những phản hồi gần đây nhất, cột ghi chép nhanh…
Sắp xếp những đối tượng nội dung này theo từng khối
Trang 20Hình 2 – Bố cục website
Một trong những quyết định quan trọng nhất mà chúng ta sẽ phải lựa chọn trong bước này chính là về bố cục trình bày thông tin - website sẽ được chia làm 1 cột, 2 cột hay 3 cột (phổ biến với các trang nội dung) Kinh nghiệm cho thấy rằng dường như tất cả các thiết kế website nội dung đều bắt đầu từ quyết định lựa chọn số cột để trình bày nội dung và nó sẽ ảnh hưởng rất nhiều đến những quyết định cụ thể sau đó Thông thường thì thông tin này sẽ được hình thành từ hai bước trước đó - nhưng nếu đã có sẵn ý tưởng từ trước về bố cục giao diện thì chúng ta vẫn có thể hoàn toàn thực hiện nó trước
Nếu chúng ta chỉ mới bắt đầu viết mà chọn cho mình một giao diện 3 cột sẽ khiến website của chúng ta trở nên trống trải Trong tình huống đó, có lẽ chúng ta nên thử tìm một thiết kế đơn giản 2 cột trong thời gian tích luỹ nội dung - và đến khi đã có tương đối nhiều những bài viết thì chúng ta có thể chuyển sang giao diện 3 cột Thực tế là nếu chúng ta thiết kế blog thì nên cực kỳ hạn chế việc sử dụng giao diện 3 cột ngay cả khi
đã có nhiều nội dung
Với độ phân giải của màn hình ở Việt Nam phần lớn chỉ giới hạn ở 1024 x 768, chúng
ta thường sẽ chỉ có tối đa là 950px bề rộng cho 3 cột Trong blog, cột nội dung chính
Trang 21thường sẽ chiếm ít nhất một nủa bề rộng - tức chúng ta sẽ chỉ còn khoảng 400px cho 2 cột nội dung còn lại sau khi đã trừ đi các khoảng cách canh lề dừa các cột và với 2 cạnh của cửa sổ trình duyệt Chúng ta có thể sẽ nhét được tiêu đề các danh mục và vài liên kết ngắn ở một trong 2 cột đó, nhưng chắc chắn phần còn lại sẽ không đủ để đưa các nội dung lớn
Hình 3 – Độ phân giải màn hình
Các trang chủ báo chí có thể sử dụng giao diện ba cột bởi họ chỉ cần đưa tiêu đề ngắn của các bản tin trong mỗi cột - nhưng điều đó không áp dụng được với những trang blog
Trang 22CÂU HỎI ÔN TẬP CHƯƠNG 2
1 Trình bày các bước để tìm ra mục đích của website cần thiết kế?
2 Trình bày các bước để xây dựng chiến lược thiết kế web?
3 Trình bày các bước thiết kế giao diện?
Trang 23Chương 3 HTML MỤC ĐÍCH
Cung cấp sinh viên kiến thức về các thẻ HTML căn bản trong thiết kế giao diện web
Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chương 3
Để đạt được mục đích đề ra trong chương 3, sinh viên phải thực hiện tốt các yêu cầu sau đây:
Phải đọc trước nội dung Chương 3 trong quyển bài giảng này trước khi lên lớp
3.1 Giới thiệu HTML
HTML là một ngôn ngữ đánh dấu cho việc mô tả các tài liệu web (web documents), cụ thể như sau:
HTML là viết tắt của Hyper Text Markup Language
Ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu
Tài liệu HTML được mô tả bằng các thẻ HTML
Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau
Ví dụ:
Trong đó:
Việc khai báo DOCTYPE định nghĩa kiểu tài liệu HTML
Trang 24 Các phần giữa <html> và </ html> mô tả một tài liệu HTML
Các phần giữa <head> và </ head> cung cấp thông tin về tài liệu
Các phần giữa <title> và </ title> cung cấp một tiêu đề cho tài liệu
Các phần giữa <body> và </ body> mô tả nội dung trang
Các phần giữa <h1> và </ h1> mô tả một đề mục
Các phần giữa <p> và </ p> mô tả một đoạn văn bản
Sử dụng cách này, trình duyệt web có thể hiển thị một tài liệu với một tiêu đề và đoạn văn
Thẻ HTML
Thẻ HTML là các từ khóa được bao quanh bởi dấu ngoặc nhọn như trình bày bên dưới:
<tagname> nội dung </ tagname>
Thẻ HTML thông thường đi theo cặp như <p> và </ p>
Thẻ đầu tiên trong một cặp là bắt đầu từ khóa, các từ khóa thứ hai là thẻ kết thúc
Các từ khóa kết thúc được viết như thế bắt đầu từ khóa, nhưng với một dấu gạch chéo trước tên thẻ
Lưu ý: Thẻ bắt đầu thường được gọi là thẻ mở Các từ khóa kết thúc thường được
gọi là thẻ đóng
Cấu trúc trang HTML
Dưới đây là cấu trúc trang HTML:
Trang 25Lưu ý: Chỉ có phần <body> (phần màu trắng phía trên) được hiển thị bởi trình
duyệt
Khai báo <DOCTYPE!>
Các <! DOCTYPE> khai giúp trình duyệt để hiển thị một trang web một cách chính xác Có nhiều loại tài liệu khác nhau trên web Để hiển thị một tài liệu một cách chính xác, trình duyệt phải biết cả hai loại và phiên bản Việc khai báo DOCTYPE không phân biệt chữ hoa hay chữ thường Tất cả các trường hợp sau đều được chấp nhận:
<! DOCTYPE html>
<! DOCTYPE HTML>
<! DOCTYPE html>
<! DOCTYPE html>
Trang 26Các cách khai báo <! DOCTYPE> trong các phiên bản HTML:
Thực hiện theo 4 bước dưới đây để tạo ra trang web đầu tiên với Notepad:
Bước 1: Mở Notepad
Trang 27 Để mở Notepad trong Windows 7 hoặc cũ hơn: Nhấn Start (dưới cùng bên trái trên màn hình của bạn) Nhấn vào All Programs Nhấn vào Accessories Nhấn vào Notepad
Để mở Notepad từ Windows 8 trở về sau: Mở màn hình Start (biểu tượng cửa
sổ ở phía dưới bên trái trên màn hình của bạn) Gõ Notepad
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Hình 4 – Soạn thảo HTML trong Notepad
Trang 28Hình 5 – Đặt tên và chọn kiểu mã hóa cho tập tin HTML trong Notepad
Chúng ta có thể sử dụng hoặc htm hoặc html như mở rộng tập tin Không có sự khác biệt
Bước 4: Xem trang HTML trên trình duyệt
Mở tập tin HTML được lưu trong trình duyệt Kết quả sẽ như hình bên dưới:
Trang 29Hình 6 – Kết quả hiển thị trên trình duyệt Google Chrome
Lưu ý: Để mở một tập tin trong một trình duyệt, nhấp đúp chuột vào tập tin, hoặc nhấp chuột phải và chọn Open
3.3 Các thuộc tính trong HTML (HTML Attributes)
Các thành phần HTML có thể có các thuộc tính Thuộc tính cung cấp thêm thông tin về một yếu tố, các thuộc tính được luôn đặt trong thẻ mở
Các thuộc tính ngôn ngữ (Lang attribute)
Thuộc tính ngôn ngữ được khai báo trong thẻ <html> Khai báo thuộc tính ngôn ngữ đóng vai trò quan trọng cho các ứng dụng truy cập và công cụ tìm kiếm
Ví dụ: Thuộc tính lang="en-US" được khai báo trong thẻ HTML bên dưới:
<!DOCTYPE html>
<html lang="en-US">
<body>
Trang 30<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
Các thuộc tính tiêu đề (title)
Thuộc tính này có tác dụng khi người dùng di chuyển chuột vào thành phần đã được định nghĩa thuộc tính tiêu đề thì tiêu đề sẽ xuất hiện như một tooltip
Ví dụ: Thẻ <p> bên dưới có một thuộc tính tiêu đề, với giá trị của thuộc tính là:
"Trường Cao đẳng Cộng đồng Đồng Tháp":
<p title=" Trường Cao đẳng Cộng đồng Đồng Tháp ">
Trường Cao đẳng Cộng đồng Đồng Tháp xin chào các bạn
Hình ảnh trong HTML được định nghĩa với thẻ <img> Các tên tập tin của nguồn (src),
và kích thước của hình ảnh (chiều rộng và chiều cao) đều được cung cấp như các thuộc tính
Trang 31<a href=http://www.w3schools.com>
Tuy nhiên, W3C khuyến cáo sử dụng dấu ngoặc kép trong HTML4 và XHTML Dưới đây là danh sách chữ cái của một số thuộc tính thường được sử dụng trong HTML:
alt Chỉ định một văn bản thay thế cho hình ảnh
disabled Chỉ định rằng một thành phần phải được vô hiệu hóa
Trang 32href Chỉ định URL (địa chỉ web) cho một liên kết
Trang 33<p>Đây là một đoạn văn bản</p>
<p> Đây là một đoạn văn bản khác</p>
Trang 34sẽ loại bỏ các khoảng trắng và dòng thêm đó khi trang đƣợc hiển thị Bất kỳ
số lƣợng khoảng trắng hay dòng thêm, đƣợc tính là chỉ có một khoảng trắng
contains a lot of lines
in the source code,
but the browser
ignores it
</p>
<p>
Trang 35This paragraph
contains a lot of spaces
in the source code,
but the browser
style="property:value"
Trong đó, property là các thuộc tính CSS, chúng ta sẽ nghiên cứu ở chương sau
HTML Text Color
Dùng để định nghĩa màu chữ cho các thành phần HTML:
Ví dụ bên dưới sẽ cho kết quả trên trình duyệt là: Trường Cao đẳng Cộng đồng (màu xanh da trời) và Đồng Tháp (màu đỏ)
Trang 36Thuộc tính font-family định nghĩa kiểu chữ đƣợc sử dụng cho một thành phần HTML
Ví dụ: Định nghĩa kiểu chữ Verdana và Courier thẻ <h1> và <p>: