Giáo trình Thiết kết web cơ bản (Ngành: Thiết kết và quản lý website-Trung cấp) - CĐ Kinh tế Kỹ thuật TP.HCM

Chia sẻ: Solua999 Solua999 | Ngày: | Loại File: PDF | Số trang:171

Thêm vào BST

Báo xấu

58
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình Thiết kế web cơ bản được biên soạn nhằm phục vụ cho việc học tập môn học Thiết kế web cơ bản đang được giảng dạy tại khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM. Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn học Thiết kế web cơ bản và dựa theo các tiêu chuẩn thiết kế web hiện hành.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kết web cơ bản (Ngành: Thiết kết và quản lý website-Trung cấp) - CĐ Kinh tế Kỹ thuật TP.HCM

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: TRUNG CẤP Thành phố Hồ Chí Minh, năm 2020
ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: TRUNG CẤP THÔNG TIN CHỦ NHIỆM ĐỀ TÀI Họ tên: Lê Thị Thu Thảo Học vị: Thạc sĩ Đơn vị: Khoa Công nghệ thông tin Email: lethithuthao@hotec.edu.vn TRƢỞNG KHOA TỔ TRƢỞNG CHỦ NHIỆM BỘ MÔN ĐỀ TÀI Lê Thị Thu Thảo HIỆU TRƢỞNG DUYỆT Thành phố Hồ Chí Minh, năm 2020
TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI GIỚI THIỆU Giáo trình “Thiết kế web cơ bản” được biên soạn nhằm phục vụ cho việc học tập môn học “Thiết kế web cơ bản” đang được giảng dạy tại khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM. Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn học “Thiết kế web cơ bản” và dựa theo các tiêu chuẩn thiết kế web hiện hành. Mục đích của giáo trình là cung cấp cho sinh viên các kiến thức cơ bản về ngôn ngữ HTML, CSS, JavaScript, sử dụng phần mềm DreamWeaver để áp dụng vào việc thiết kế web. Xin chân thành cảm ơn các ý kiến đóng góp từ các đồng nghiệp đã giúp tôi hoàn thành giáo trình này. TP.HCM, ngày……tháng 08 năm 2020 Lê Thị Thu Thảo
MỤC LỤC BÀI 1 - PHÁC THẢO WEBSITE ...................................................................................1 1.1. Các khái niệm ....................................................................................................1 1.1.1. Internet và Word Wide Web .......................................................................1 1.1.2. Web server, web browser và webpage ........................................................1 1.1.3. Search Engine ..............................................................................................2 1.1.4. Xuất bản web ...............................................................................................2 1.2. Lập kế hoạch thiết kế website ............................................................................3 1.3. Thiết kế bố cục trang web ..................................................................................4 1.4. Bài tập áp dụng ..................................................................................................5 BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML .............................................................6 2.1. Tạo trang web đầu tiên .......................................................................................6 2.1.1. Khái niệm HTML ........................................................................................6 2.1.2. Các thẻ của tập tin HTML ...........................................................................6 2.1.3. Tạo trang web ..............................................................................................7 2.1.4. Các thẻ định cấu trúc tài liệu HTML ........................................................10 2.2. Làm việc với văn bản trên trang web ...............................................................12 2.2.1. Thẻ .....................................................................................................12 2.2.2. Thẻ .............................................................................................12 2.2.3. Thẻ ......................................................................................................12 2.2.4. Thẻ ..................................................................................................13 2.2.5. Thẻ .....................................................................................................13 2.2.6. Thẻ ..................................................................................................13 2.2.7. Thẻ ..................................................................................................13 2.2.8. Thẻ ..................................................................................................14 2.2.9. Thẻ .....................................................................................................14 2.2.10. Thẻ đến ...............................................................................15 2.2.11. Thẻ ...............................................................................................16 2.2.12. Thẻ ................................................................................................ 16
2.3. Làm việc với danh sách trên trang web ...........................................................16 2.3.1. Danh sách không có thứ tự ........................................................................16 2.3.2. Danh sách có thứ tự ...................................................................................17 2.4. Làm việc với các đối tượng media trên trang web...........................................19 2.4.1. Thẻ .................................................................................................19 2.4.2. Thẻ ..............................................................................................20 2.4.3. Thẻ ..............................................................................................21 2.4.4. Thẻ .............................................................................................22 2.5. Làm việc với liên kết trên trang web ...............................................................23 2.5.1. Tạo liên kết đến tài liệu khác ....................................................................24 2.5.2. Tạo liên kết đến các phần trong cùng một tài liệu ....................................25 2.6. Làm việc với bảng biểu trên trang web ...........................................................26 2.6.1. Tạo bảng đơn giản .....................................................................................26 2.6.2. Tạo bảng có gộp ô .....................................................................................28 2.7. Làm việc với biểu mẫu trên trang web ............................................................29 2.7.1. Khái quát về Form .....................................................................................29 2.7.2. Thẻ ...............................................................................................30 2.7.3. Thẻ ...............................................................................................32 2.7.4. Thẻ ..............................................................................................36 2.7.5. Thẻ ..........................................................................................37 2.7.6. Thẻ ...............................................................................................39 2.7.7. Thẻ ...........................................................................................40 2.8. Tạo Bố cục trang ..............................................................................................42 2.8.1. Thẻ ............................................................................................43 2.8.2. Thẻ ..............................................................................................43 2.8.3. Thẻ ...............................................................................................43 2.8.4. Thẻ .................................................................................................43 2.8.5. Thẻ ............................................................................................44 2.8.6. Thẻ .............................................................................................44 2.8.7. Thẻ ...............................................................................................44
2.8.8. Thẻ ..................................................................................................44 2.8.9. Thẻ ................................................................................................ 45 2.9. Bài tập áp dụng ................................................................................................ 45 BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER.......................................47 3.1. Tạo và quản lý website ....................................................................................47 3.1.1. Tạo một website ........................................................................................47 3.1.2. Quản lý website .........................................................................................50 3.1.3. Đưa website lên internet ............................................................................51 3.1.4. Kiểm tra và sửa lỗi trang web ...................................................................51 3.2. Tạo và định dạng các đối tượng trên trang web ...............................................53 3.2.1. Môi trường làm việc của Dreamweaver ....................................................53 3.2.2. Các thao tác cơ bản ...................................................................................54 3.2.3. Làm việc với văn bản ................................................................................55 3.2.4. Làm việc với hình ảnh ...............................................................................57 3.2.5. Làm việc với multimedia ..........................................................................58 3.2.6. Liên kết trang ............................................................................................58 3.2.7. Làm việc với bảng .....................................................................................59 3.2.8. Làm việc với form .....................................................................................63 3.2.9. CSS ............................................................................................................68 3.3. Bài tập áp dụng ................................................................................................ 76 BÀI 4 - ĐỊNH DẠNG TRANG WEB VỚI CSS ..........................................................77 4.1. Tạo css cho trang web ......................................................................................77 4.1.1. Khái niệm ..................................................................................................77 4.1.2. Cú pháp CSS .............................................................................................77 4.1.3. Đơn vị đo trong CSS .................................................................................79 4.1.4. Phân loại CSS ............................................................................................80 4.1.5. Tạo và sử dụng Internal style sheet ...........................................................80 4.1.6. Tạo và sử dụng External style sheet ..........................................................82 4.1.7. Tạo và sử dụng Inline style .......................................................................83 4.1.8. Lớp (Class) ................................................................................................ 84
4.1.9. Định danh (ID) ..........................................................................................86 4.2. Định dạng văn bản bằng css.............................................................................87 4.2.1. Thuộc tính font ..........................................................................................87 4.2.2. Thuộc tính text ..........................................................................................90 4.3. Định dạng danh sách bằng css .........................................................................93 4.3.1. Thuộc tính list-style-type: .........................................................................93 4.3.2. Thuộc tính list-style-image: ......................................................................94 4.3.3. Thuộc tính list-style-position: ...................................................................94 4.4. Định dạng thành phần ......................................................................................95 4.4.1. Thuộc tính background .............................................................................96 4.4.2. Thuộc tính border ......................................................................................99 4.4.3. Thuộc tính box-shadow ...........................................................................102 4.4.4. Thuộc tính margin ...................................................................................102 4.4.5. Thuộc tính padding .................................................................................105 4.4.6. Thuộc tính height và width .....................................................................107 4.5. Định dạng hình ảnh bằng css .........................................................................110 4.6. Tạo bố cục trang web bằng mô hình hộp .......................................................113 4.7. Tạo thanh điều hướng cho trang web.............................................................120 4.7.1. Pseudo-classes cho liên kết .....................................................................120 4.7.2. Tạo thanh điều hướng dọc .......................................................................122 4.7.3. Tạo thanh điều hướng ngang ...................................................................123 4.8. Định dạng bảng biểu bằng css .......................................................................125 4.9. Định dạng biểu mẫu bằng css ........................................................................127 4.10. Bài tập áp dụng ...........................................................................................131 BÀI 5 - Ngôn ngữ JavaScript ......................................................................................132 5.1. Giới thiệu về JavaScript .................................................................................132 5.2. Nhúng JavaScript vào trang web ...................................................................132 5.2.1. Đặt mã lệnh JavaScript trực tiếp vào trang web .....................................133 5.2.2. Đặt mã lệnh JavaScript bên trong một tập tin .js ....................................134 5.3. Tạo tương tác cơ bản với trang web ..............................................................134
5.3.1. Hiển thị dữ liệu ra màn hình trong JavaScript ........................................134 5.3.2. Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript .............137 5.3.3. Sử dụng câu lệnh điều kiện trong JavaScript ..........................................138 5.3.4. Sử dụng câu lệnh lặp trong JavaScript ....................................................140 5.3.5. Sử dụng hàm, mảng trong JavaScript .....................................................142 5.3.6. Sử dụng các đối tượng cơ bản trong JavaScript ......................................144 5.3.7. DOM........................................................................................................147 5.4. Làm việc với web form ..................................................................................149 5.4.1. Xử lý sự kiện ...........................................................................................149 5.4.2. Kiểm tra tính hợp lệ của dữ liệu trong form bằng JavaScript .................152 5.5. Bài tập áp dụng ..............................................................................................153 TÀI LIỆU THAM KHẢO ...........................................................................................154 PHỤ LỤC ....................................................................................................................155 DANH MỤC HÌNH ....................................................................................................156 DANH MỤC BẢNG ...................................................................................................160
GIÁO TRÌNH MÔ ĐUN Tên mô đun: THIẾT KẾ WEB CƠ BẢN Mã mô đun: MĐ2101411 Vị trí, tính chất của mô đun: - Vị trí: là mô đun được bố trí ở học kỳ II (THCS), học kỳ I (THPT). - Tính chất: là mô đun tích hợp thuộc nhóm mô đun chuyên ngành. Mục tiêu của mô đun: Về kiến thức: - Trình bày được các bước lập kế hoạch thiết kế website. - Trình bày được cú pháp các thẻ lệnh HTML, cú pháp CSS. - Trình bày được các thuộc tính thường dùng trong CSS để định dạng trang web. - Trình bày được các đối tượng cơ bản trong JavaScript. Về kỹ năng: - Lập được kế hoạch thiết kế của một website. - Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web. - Tạo và quản lý được website bằng Dreamweaver. - Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang web. - Tạo và sử dụng được các kiểu CSS. - Vận dụng được CSS để định dạng các đối tượng văn bản, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web. - Tạo được bố cục trang web bằng mô hình hộp. - Tạo được thanh định hướng cho trang web. - Nhúng được đoạn mã JavaScript vào trang web. - Tạo được tương tác cơ bản với trang web bằng JavaScript. - Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web. Về năng lực tự chủ và trách nhiệm:
- Yêu thích định dạng web bằng ngôn ngữ css - Làm việc một cách tỉ mỉ và cẩn thận trong ngôn ngữ HTML - Rèn luyện khả năng tự học, tư duy sáng tạo - Phối hợp làm việc theo nhóm.
Bài 1 - Phác thảo website BÀI 1 - PHÁC THẢO WEBSITE Giới thiệu: Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản về internet và web. Bài học này cũng đồng thời giúp người học có cái nhìn tổng quan về quá trình thiết kế một website. Mục tiêu: - Trình bày được các bước lập kế hoạch thiết kế website - Lập được kế hoạch thiết kế của một website - Thiết kế được bố cục của trang web 1.1. CÁC KHÁI NIỆM 1.1.1. Internet và Word Wide Web - Internet: 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ạng máy tính được liên kết với nhau. - World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu văn bản, được truy cập trên internet thông qua trình duyệt web và được cung cấp bởi web server. 1.1.2. Web server, web browser và webpage - Web server đơn giản là một máy tính nối vào Internet và chạy các phần mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML. Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời. Thông qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu đến máy dịch vụ. - Web Browser: Web browser còn được gọi là trình duyệt web - là một phần mềm được dùng để xem, quản lý và truy cập vào các trang web. Mỗi trình duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị trên các trình duyệt khác nhau là không hoàn toàn giống nhau. Các trình duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera. - Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc những đoạn mã mà trình duyệt web có thể hiểu và thông dịch được lưu với phần mở rộng là .html hoặc .htm. KHOA CÔNG NGHỆ THÔNG TIN Trang 1
Bài 1 - Phác thảo website - Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1 chủ đề nào đó. - Home page: trang chủ của 1 website - Hyperlink: 1 liên kết chỉ đến trang web khác - URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên Internet. Có dạng: protocol://domain_name/path  Protocol: tên giao thức http, ftp, file,…  Domain name: tên miền - là tên giao dịch của công ty hay tổ chức trên Internet. Thường có dạng: yourcompany.com  Các tên miền cấp 1: .com Các tổ chức thương mại, doanh nghiệp (commercial) .edu Các tổ chức giáo dục (education) .int Các tổ chức Quốc tế (international organizations) .net mạng không thuộc các loại phân vùng khác (Network) - Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử dụng tương tác, cập nhật dữ liệu trên trang web. - Trang web động: trang web có khả năng tương tác với người sử dụng. Trang web có kết hợp HTML và mã lệnh. Mã được thực thi trực tiếp trên server, gửi kết quả là HTML về người sử dụng. 1.1.3. Search Engine - Là công cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung theo yêu cầu người dùng dựa vào các thông tin mà chúng có. - Một số công cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com, Yahoo.com, Altavista.com,… 1.1.4. Xuất bản web Xuất bản trên web (còn gọi là xuất bản trực tuyến) là quá trình xuất bản nội dung trên Internet. Nội dung xuất bản web bao gồm văn bản, video, hình ảnh, âm thanh,…và các hình thức truyền thông khác. Quy trình xuất bản web gồm: + Xây dựng website KHOA CÔNG NGHỆ THÔNG TIN Trang 2
Bài 1 - Phác thảo website + Tải website lên internet + Cập nhật các trang web và đăng các nội dung trực tuyến. 1.2. LẬP KẾ HOẠCH THIẾT KẾ WEBSITE Các bước lập kế hoạch thiết kế website: Bƣớc 1: Xác định mục đích của website - Xác định mục tiêu cơ bản của website: mục tiêu đề ra phải khái quát, ngắn gọn, rõ ràng. Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển. Đây chính là công cụ hữu hiệu để đánh giá sự thành công của một website. - Xác định đối tượng phục vụ: để có thể thiết kế cấu trúc website phù hợp với nhu cầu, mong muốn của người dùng thì cần phải xác định loại người dùng chính của website. Cần tìm hiểu về sự hiểu biết, trình độ, sở thích, kinh nghiệm duyệt web, lứa tuổi…của người dùng. Một hệ thống được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người dùng. - Xác định thể loại website: việc xác định thể loại website giúp định hướng cho nhà thiết kế. Các thể loại website thường gặp: giáo dục, huấn luyện (online trainning), tin tức, giải trí, diễn đàn, trao đổi thảo luận, mua bán, quản lý…. Bƣớc 2: Xác định sơ đồ của website (sitemap) - Việc xác định sơ đồ website giúp có cái nhìn tổng quát về thông tin của website và các mối liên kết giữa các trang trên website. - Sơ đồ website thường được phác thảo dưới dạng cấu trúc cây. Hình 1.1. Sơ đồ website KHOA CÔNG NGHỆ THÔNG TIN Trang 3
Bài 1 - Phác thảo website Bƣớc 3: Chuẩn bị nội dung website - Chuẩn bị nội dung cho từng trang: nội dung phải viết ngắn gọn, súc tích, sử dụng từ ngữ dễ hiểu, đúng chính tả. Nên đưa những thông tin mới, có ích cho người xem. - Hình ảnh đẹp, rõ, sắc nét. Phải lựa chọn hình ảnh phù hợp với nội dung. Bƣớc 4: Bố cục cho trang web - Lựa chọn bố cục phù hợp cho trang chủ và các trang con. Bƣớc 5: Lựa chọn màu sắc cho trang web - Màu sắc nên lựa chọn dựa theo nội dung trang web, nên sử dụng màu sắc tương phản để làm nổi bật nội dung cần thể hiện. Không nên sử dụng quá nhiều màu sắc. Bƣớc 6: Chi tiết hóa trang web - Phác thảo chi tiết cụ thể giao diện cho từng trang web 1.3. THIẾT KẾ BỐ CỤC TRANG WEB • Bố cục phổ biến của một trang web HEADER NAVIGATION SIDEBAR CONTENT FOOTER Hình 1.2. Bố cục thông thƣờng của một trang web - Header: là thành phần nằm ở vị trí đầu trên trang web, thường chứa tên công ty, logo, câu khẩu hiệu, hình ảnh tiêu biểu… - Navigation (điều hƣớng):là hệ thống menu liên kết giúp người dùng có thể duyệt toàn bộ các trang trong một Website. Tùy từng bố cục, có thể đặt menu này dạng ngang hoặc đứng. - Content: là phần hiển thị nội dung chính của trang web. - Sidebar: là phần hiển thị nội dung phụ của trang web như các menu phụ, các bài viết liên quan, quảng cáo,… Tùy theo bố cục mà một website có thể có một hoặc nhiều hơn một sidebar. KHOA CÔNG NGHỆ THÔNG TIN Trang 4
Bài 1 - Phác thảo website - Footer: là thành phần nằm ở vị trí cuối trên trang web và được hiển thị ở tất cả các trang trong website, thường chứa các thông tin về Website: bản quyền, điều khoản sử dụng, tác giả, địa chỉ liên hệ,… Ngoài ra, Footer còn được dùng như một menu liên kết cuối trang để tạo sự tiện lợi cho người dùng. Hình 1.3. Trang web có bố cục thông thƣờng 1.4. BÀI TẬP ÁP DỤNG 1. Phác thảo website giới thiệu Khoa Công nghệ thông tin 2. Phác thảo website bán hàng online KHOA CÔNG NGHỆ THÔNG TIN Trang 5
Bài 2 - Thiết kế trang web với HTML BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML Giới thiệu: Trong bài học này sẽ cung cấp cho người học kiến thức cơ bản về các thẻ lệnh HTML để tạo và định dạng các đối tượng trên một trang web. Mục tiêu: - Trình bày được cú pháp các thẻ lệnh HTML - Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu và biểu mẫu trên trang web. 2.1. TẠO TRANG WEB ĐẦU TIÊN 2.1.1. Khái niệm HTML - HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế để xây dựng các trang web. HTML tồn tại như là các tập tin văn bản có phần mở rộng là .htm hoặc .html được chứa trên các máy tính nối vào mạng Internet. Các file này chứa các thành phần định dạng để báo cho trình duyệt web biết cách để hiển thị một trang web. - Một trang web thông thường gồm có 2 thành phần chính: + Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...) + Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu hiển thị trên trình duyệt. 2.1.2. Các thẻ của tập tin HTML  Cấu trúc thẻ - Thẻ HTML là 1 tập các ký hiệu được định nghĩa trong HTML, mỗi thẻ html có ý nghĩa riêng. Các thẻ này dùng để điều khiển nội dung và hình thức trình bày tài liệu HTML. - Cấu trúc thẻ HTML thông thường gồm 2 phần: thẻ mở và thẻ đóng nội dung + Tên thẻ và thuộc tính thẻ không phân biệt chữ thường và hoa. Tuy nhiên theo khuyến nghị của W3C để tài liệu chặt chẽ hơn thì tên thẻ và thuộc tính nên viết bằng chữ thường. KHOA CÔNG NGHỆ THÔNG TIN Trang 6
Bài 2 - Thiết kế trang web với HTML + Mỗi thẻ có thể không có hoặc có nhiều thuộc tính, các thuộc tính viết cách nhau ít nhất một khoảng trắng. Thuộc tính được nhập ngay trước ngoặc đóng „>‟ của thẻ mở. Giá trị thuộc tính của thẻ đặt trong dấu nháy đơn hoặc nháy kép. + Trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng trong phần nội dung.  Phân loại thẻ - Thẻ chứa: gồm thẻ mở và thẻ đóng. Dữ liệu bị tác động nằm giữa thẻ mở và thẻ đóng. nội dung - Thẻ rỗng: chỉ gồm một thẻ mở, không có nội dung. Có thể có thuộc tính. - Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ đó đóng sau. nội dung Ví dụ: - Thẻ chứa chữ in đậm Mức chữ ở tiêu đề 3 - Thẻ rỗng - Thẻ lồng Thiết kế Web 2.1.3. Tạo trang web  Cấu trúc tài liệu HTML Cấu trúc cơ bản của tài liệu HTML thông thường gồm 3 phần: - : Phần khai báo chuẩn phiên bản HTML sử dụng. Với những phiên bản HTML khác nhau thì sẽ có DOCTYPE khác nhau: HTML5: - : Phần khai tất cả thông tin của tài liệu HTML như khai báo về meta, title, css, javascript. KHOA CÔNG NGHỆ THÔNG TIN Trang 7
Bài 2 - Thiết kế trang web với HTML - : Phần chứa nội dung của trang web, tất cả nội dung mà người dùng nhìn thấy sẽ được khai báo ở đây. Hình 2.1. Cấu trúc của tài liệu html * Lưu ý: - Một số ký tự đặc biệt trong HTML Hình 2.2. Các ký tự đặc biệt trong HTML - Phần chú thích trong trang HTML sẽ không được hiển thị trên trình duyệt. Cú pháp:  Tạo trang web Để tạo tài liệu html, chỉ cần sử dụng một chương trình soạn thảo văn bản để soạn thảo và sau đó lưu lại với tên tập tin có phần mở rộng .htm hoặc .html. Có nhiều chương trình soạn thảo tài liệu html từ đơn giản đến chuyên nghiệp như: Notepad, Notepad++, EditPlus, FrontPage, Dreamweaver,… Ví dụ 1: Tạo trang web bằng Notepad++ - Mở Notepad++ và nhập vào nội dung sau: KHOA CÔNG NGHỆ THÔNG TIN Trang 8
Bài 2 - Thiết kế trang web với HTML Hình 2.3. Trình soạn thảo Notepad++ - Lưu tập tin: chọn File  Save As + Save in: chọn thư mục lưu trữ + File name: nhập tên file (vidu1) + Save As Type: chọn Hyper Text Markup Language file  Save Hình 2.4. Hộp thoại Save As - Hiển thị trang web trên trình duyệt: + Chọn Run  chọn trình duyệt muốn hiển thị trang web Hình 2.5. Menu lệnh Run KHOA CÔNG NGHỆ THÔNG TIN Trang 9