Giáo Trình Thiết Kế Website Ngành Công Nghệ Thông Tin

Khám phá giáo trình thiết kế website cho ngành công nghệ thông tin cao đẳng, cung cấp kiến thức và kỹ năng cần thiết cho sinh viên.

• Tác giả: Ths. Đỗ Thá Xuân Thắm
• Trường học: Trường Cao đẳng Xây dựng số 1
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Giáo Trình Thiết Kế Website Ngành Công Nghệ Thông Tin
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2021
• Địa điểm: Hà Nội

Mục lục chi tiết

• 1. CHƯƠNG 1: NGÔN NGỮ HTML
• 1.1. Giới thiệu HTML
• 1.2. Cấu trúc một trang web và thẻ HTML
• 1.3. Cấu trúc của thẻ HTML
• 1.4. Đơn vị trong HTML và CSS
• 1.5. Các thẻ tiêu đề heading (h)
• 1.6. Thẻ văn bản
• 1.7. Thẻ pre trong HTML
• 1.8. Thẻ liên kết a và địa chỉ tương đối – tuyệt đối và các loại liên kết
• 1.9. Thẻ chèn hình ảnh IMG
• 1.10. Thẻ danh sách tuần tự (ol) và bất tuần tự (ul) trong HTML
• 1.11. Thẻ với bảng (table)
• 2. CHƯƠNG 2: GIỚI THIỆU CSS
• 2.1. Giới thiệu CSS
• 2.2. Các cách sử dụng CSS trong trang web
• 2.3. Định nghĩa bộ chọn HTML (HTML Selector)
• 2.4. Bộ chọn đánh dấu (ID Selector)
• 2.5. Bộ chọn cho liên kết
• 2.6. Một số thuộc tính CSS cơ bản
• 2.6.1. Thuộc tính cho văn bản (Text)
• 2.6.2. Thuộc tính border (đường viền)
• 2.6.3. Thuộc tính cho toàn khối văn bản
• 2.6.4. Định nghĩa thuộc tính khối
• 2.6.5. Thuộc tính danh sách
• 2.6.6. Thuộc tính hiệu ứng
• 2.6.7. Thuộc tính position và z-index trong CSS
• 2.6.8. Thuộc tính flexbox
• 2.7. Text-shadow: đổ bóng cho chữ
• 2.8. Tạo bố cục (layout) cho trang web
• 2.8.1. Mô hình khung (box model)
• 2.8.2. Một số lưu ý khi viết CSS
• 2.9. Bài tập chương 4
• 3. CHƯƠNG 3: JAVASCRIPT VÀ DOCUMENT OBJECT MODEL (DOM)
• 3.1. Giới thiệu JavaScript
• 3.2. Các cách sử dụng JavaScript trong trang web
• 3.3. Ngôn ngữ JavaScript
• 3.4. Lập trình hướng đối tượng trong JavaScript
• 3.5. Mô hình đối tượng văn bản (DOM)
• 3.5.1. Khái niệm DOM
• 3.5.2. Phân loại DOM
• 3.5.3. Lấy nội dung trong DOM
• 3.6. Các hàm thời hạn trong JavaScript
• 3.6.1. Hiện thị thông báo JavaScript
• 3.6.2. Time events trong JavaScript
• 3.7. Biểu thức chính quy (regular expression)
• 3.8. Bài tập chương 3
• 4. CHƯƠNG 4: BOOTSTRAP CSS
• 4.1. Giới thiệu Bootstrap CSS
• 4.2. Sử dụng Bootstrap CSS
• 4.3. Các thành phần của Bootstrap CSS

Tóm tắt

I. Tổng quan về Giáo Trình Thiết Kế Website Ngành Công Nghệ Thông Tin

Giáo trình thiết kế website ngành công nghệ thông tin cung cấp kiến thức cơ bản và nâng cao về việc xây dựng và phát triển website. Nội dung giáo trình bao gồm các ngôn ngữ lập trình như HTML, CSS, và JavaScript, cùng với các công cụ thiết kế hiện đại. Mục tiêu chính là giúp sinh viên nắm vững các nguyên tắc thiết kế và phát triển website hiệu quả.

1.1. Mục tiêu của giáo trình thiết kế website

Giáo trình nhằm trang bị cho sinh viên kiến thức và kỹ năng cần thiết để thiết kế và phát triển website. Sinh viên sẽ học cách sử dụng các công cụ và ngôn ngữ lập trình cơ bản để tạo ra các trang web tương tác và hấp dẫn.

1.2. Đối tượng học viên của giáo trình

Giáo trình này hướng đến sinh viên ngành công nghệ thông tin, những người muốn nâng cao kỹ năng thiết kế website. Nó cũng phù hợp cho những ai có nhu cầu tìm hiểu về thiết kế web để phục vụ cho công việc hoặc sở thích cá nhân.

II. Các thách thức trong thiết kế website ngành công nghệ thông tin

Thiết kế website không chỉ đơn thuần là việc tạo ra giao diện đẹp mắt mà còn phải đảm bảo tính khả dụng và hiệu suất. Các thách thức bao gồm việc tối ưu hóa tốc độ tải trang, đảm bảo tính tương thích trên nhiều thiết bị và trình duyệt, cũng như bảo mật thông tin người dùng.

2.1. Tối ưu hóa tốc độ tải trang

Tốc độ tải trang là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng. Các kỹ thuật như nén hình ảnh, sử dụng CDN và tối ưu mã nguồn sẽ được áp dụng để cải thiện tốc độ tải trang.

2.2. Đảm bảo tính tương thích

Website cần phải hoạt động tốt trên nhiều trình duyệt và thiết bị khác nhau. Việc kiểm tra và điều chỉnh mã nguồn để đảm bảo tính tương thích là rất cần thiết.

III. Phương pháp thiết kế website hiệu quả

Để thiết kế website hiệu quả, cần áp dụng các phương pháp và công cụ hiện đại. Việc sử dụng các framework như Bootstrap hay các hệ quản trị nội dung như WordPress sẽ giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

3.1. Sử dụng framework trong thiết kế website

Framework như Bootstrap cung cấp các thành phần giao diện sẵn có, giúp việc thiết kế trở nên nhanh chóng và dễ dàng hơn. Nó cũng hỗ trợ tính năng responsive, giúp website hiển thị tốt trên mọi thiết bị.

3.2. Lập trình với JavaScript

JavaScript là ngôn ngữ lập trình quan trọng trong thiết kế web, cho phép tạo ra các tính năng tương tác. Việc nắm vững JavaScript sẽ giúp sinh viên phát triển các ứng dụng web phong phú và hấp dẫn.

IV. Ứng dụng thực tiễn của giáo trình thiết kế website

Giáo trình thiết kế website không chỉ dừng lại ở lý thuyết mà còn có nhiều ứng dụng thực tiễn. Sinh viên sẽ có cơ hội thực hành qua các dự án thực tế, từ đó nâng cao kỹ năng và kinh nghiệm làm việc.

4.1. Dự án thực tế trong giáo trình

Sinh viên sẽ tham gia vào các dự án thực tế, từ việc thiết kế giao diện đến phát triển chức năng cho website. Điều này giúp sinh viên áp dụng kiến thức đã học vào thực tiễn.

4.2. Kết quả nghiên cứu từ sinh viên

Nhiều sinh viên đã áp dụng kiến thức từ giáo trình để phát triển các sản phẩm web thành công, góp phần vào sự phát triển của ngành công nghệ thông tin.

V. Kết luận và tương lai của giáo trình thiết kế website

Giáo trình thiết kế website ngành công nghệ thông tin sẽ tiếp tục được cập nhật để phù hợp với xu hướng công nghệ mới. Tương lai của ngành này hứa hẹn sẽ có nhiều cơ hội phát triển cho những ai có kiến thức và kỹ năng vững vàng.

5.1. Xu hướng công nghệ trong thiết kế website

Các công nghệ mới như trí tuệ nhân tạo và học máy đang dần được áp dụng trong thiết kế website, mở ra nhiều cơ hội mới cho ngành công nghệ thông tin.

5.2. Cơ hội nghề nghiệp cho sinh viên

Với sự phát triển không ngừng của công nghệ, nhu cầu về nhân lực trong lĩnh vực thiết kế website ngày càng tăng. Sinh viên có thể tìm thấy nhiều cơ hội việc làm hấp dẫn trong ngành này.

Nội dung chính

TỔNG QUAN HỌC THUẬT VÀ NỘI DUNG GIÁO TRÌNH THIẾT KẾ WEBSITE

Tổng quan về giáo trình

Giáo trình Thiết kế Website là tài liệu học tập chính thức dành cho trình độ Cao đẳng và Trung cấp ngành Công nghệ thông tin ứng dụng phần mềm. Giáo trình được biên soạn bởi tập thể giảng viên Bộ môn Tin cơ sở thuộc Trường Cao đẳng Xây dựng số 1 (Bộ Xây dựng), do ThS. Đỗ Thị Xuân Thắm làm chủ biên. Tài liệu được ban hành kèm theo Quyết định số 368ĐT/QĐ-CĐXD1 ngày 10 tháng 8 năm 2021 của Hiệu trưởng Trường Cao đẳng Xây dựng số 1.

Trong chương trình đào tạo, môn học mang mã số MH20 và là học phần chuyên ngành bắt buộc. Thời lượng môn học được quy định tổng cộng 105 giờ, bao gồm:

• 45 giờ lý thuyết;
• 56 giờ thực hành, thí nghiệm, thảo luận và bài tập;
• 4 giờ kiểm tra định kỳ.

Mục tiêu học tập của giáo trình được xác định rõ trên ba phương diện:

• Về kiến thức: Cung cấp hệ thống lý thuyết về cấu trúc trang web, các công nghệ nền tảng (HTML, CSS, JavaScript, DOM, Bootstrap) và quy trình thiết kế, vận hành website cơ bản, bao gồm định hướng ứng dụng mã nguồn mở.
• Về kỹ năng: Người học hình thành năng lực soạn thảo mã nguồn, sử dụng công cụ lập trình (Visual Studio Code), xây dựng hoàn chỉnh giao diện web tĩnh, tạo biểu mẫu tương tác và áp dụng các framework hiện đại để tối ưu hóa bố cục.
• Về năng lực tự chủ và trách nhiệm: Rèn luyện tác phong làm việc công nghiệp, tính kiên trì, độ chính xác trong lập trình và khả năng tổ chức mã nguồn có hệ thống.

Cấu trúc tài liệu được thiết kế theo hướng thực hành lũy tiến, kết hợp giữa lý thuyết cú pháp và các ví dụ mẫu có mã nguồn đối chiếu trực tiếp. Điểm đặc sắc của giáo trình nằm ở việc tích hợp cụ thể các tiêu chuẩn ngữ nghĩa HTML5, các bộ chọn và thuộc tính CSS nâng cao (Flexbox, Text-shadow), cùng hệ thống bài tập thực hành bám sát từng thành phần giao diện thực tế.

---

Nội dung kiến thức cốt lõi

[Chương 1: Ngôn ngữ HTML] ➔ [Chương 2: Giới thiệu CSS] ➔ [Chương 3: JavaScript & DOM] ➔ [Chương 4: Bootstrap CSS]
 (Cấu trúc & Ngữ nghĩa)      (Định dạng & Bố cục)       (Tương tác & Xử lý logic)     (Framework & Responsive)

Các chương và chủ đề chính

Giáo trình được chia thành 4 chương chuyên đề theo tiến trình xây dựng giao diện web:

1. Chương 1: Ngôn ngữ HTML

   • Khái niệm về ngôn ngữ đánh dấu siêu văn bản (HTML) và nguyên lý biên dịch của trình duyệt.
   • Hướng dẫn cài đặt và thiết lập môi trường phát triển trên Visual Studio Code (thay đổi giao diện, cỡ chữ, phím tắt khởi tạo cấu trúc).
   • Cấu trúc tài liệu HTML (<html>, <head>, <title>, <body>) và mô hình phân khu trang web chuẩn (header, global navigation, page body, content, sidebar, footer).
   • Phân loại thẻ HTML theo đặc tính hiển thị: nhóm thẻ khối (block-level: <h1>-<h6>, <p>, <div>, <ul>, <ol>, <nav>, <header>, <article>, <aside>, <footer>), nhóm thẻ nội dòng (inline: <a>, <img>,
, <span>, <strong>, <b>, <i>, <u>, <del>) và nhóm thẻ không hiển thị (none: <meta>, <link>, <script>).
   • Hệ thống thẻ định dạng văn bản nâng cao: thẻ giữ nguyên định dạng <pre>, chỉ số trên/dưới (<sup>, <sub>), thẻ nhúng hình ảnh <img> với thuộc tính alt phục vụ tối ưu hóa công cụ tìm kiếm (SEO).
   • Thao tác xây dựng bảng (<table>, <tr>, <td>, <th>, rowspan, colspan) và biểu mẫu tương tác (<form> với các phương thức GET/POST, các loại thẻ <input type="text|password|email|number|checkbox|radio|file|submit|reset">, <select>, <textarea>, <label>).
   • Giới thiệu nhóm thẻ ngữ nghĩa HTML5: <article>, <aside>, <audio>, <canvas>, <figure>, <main>, <section>.

2. Chương 2: Giới thiệu CSS (Cascading Style Sheets)

   • Khái niệm, vai trò tách biệt phần hiển thị khỏi cấu trúc dữ liệu.
   • Ba phương thức nhúng CSS: Trực tiếp trên thẻ (Inline style), nội tuyến (Internal style qua thẻ <style>) và ngoại tuyến (External style qua tệp .css độc lập liên kết bằng thẻ <link>).
   • Các cơ chế bộ chọn (Selectors): Bộ chọn thẻ HTML, bộ chọn lớp (.class), bộ chọn định danh (#id) và bộ chọn trạng thái cho liên kết.
   • Hệ thống thuộc tính CSS cơ bản: Định dạng văn bản (color, font-size, font-family, font-weight, text-align, line-height, text-transform), thiết lập nền (background-color, background-image, background-repeat, background-attachment, background-position, background-size).
   • Các thuộc tính định vị và bố cục nâng cao: Mô hình hộp (Box Model), đường viền (border), hiệu ứng đổ bóng (text-shadow), định vị (position, z-index) và mô hình dàn trang linh hoạt (flexbox).

3. Chương 3: JavaScript và Document Object Model (DOM)

   • Cú pháp cơ bản của ngôn ngữ JavaScript và các phương thức nhúng mã kịch bản vào tài liệu HTML.
   • Khái niệm lập trình hướng đối tượng cơ bản trong JavaScript.
   • Mô hình đối tượng tài liệu (DOM): Phân loại DOM, phương thức truy xuất và thay đổi nội dung các phần tử HTML.
   • Hệ thống hộp thoại tương tác, xử lý sự kiện thời gian (Time events) và kiểm tra dữ liệu bằng biểu thức chính quy (Regular Expression).

4. Chương 4: Bootstrap CSS

   • Giới thiệu framework CSS Bootstrap và quy trình tích hợp vào dự án.
   • Cách sử dụng hệ thống lưới (Grid system) và các thành phần giao diện chuẩn hóa (Components) của Bootstrap để tăng tốc độ phát triển website.

Progression logic (logic lũy tiến) của giáo trình đi từ việc xây dựng bộ khung dữ liệu tĩnh (HTML), hoàn thiện thẩm mỹ và bố cục (CSS), bổ sung tính năng xử lý logic và tương tác phía máy khách (JavaScript/DOM), đến chuẩn hóa và tối ưu giao diện bằng thư viện tiền chế (Bootstrap).

---

Kiến thức nền tảng được xây dựng

Giáo trình thiết lập các khối lý thuyết cơ sở:

Khối kiến thức	Nội dung lý thuyết cốt lõi
Cấu trúc tài liệu web	Nguyên lý hoạt động của ngôn ngữ đánh dấu, phân cấp cây DOM, quy chuẩn đóng/mở thẻ và phạm vi áp dụng thuộc tính.
Hệ thống đo lường	- Đơn vị tuyệt đối: px (pixel), pt (point, 1 inch = 72pt). - Đơn vị tương đối: % (percentages tham chiếu theo phần tử mẹ), em (co giãn theo font-size của phần tử mẹ), rem (tham chiếu trực tiếp theo font-size của phần tử gốc <html>).
Mô hình hiển thị và bố cục	Mô hình hộp (Box Model), cơ chế dòng chảy phần tử (Block vs. Inline), cơ chế xếp chồng hiển thị (z-index) và cơ chế dàn hàng flexbox.
Giao thức tương tác người dùng	Cơ chế truyền tải dữ liệu biểu mẫu (Form data submission), phương thức mã hóa dữ liệu (enctype) và phương thức gửi dữ liệu (GET, POST).

---

Kỹ năng phát triển

• Kỹ năng kỹ thuật (Technical skills): Viết mã HTML/CSS đúng quy chuẩn cú pháp; tổ chức cấu trúc tệp tin dự án; sử dụng công cụ Visual Studio Code; viết biểu thức chính quy kiểm tra định dạng dữ liệu đầu vào; thao tác trực tiếp trên các đối tượng DOM; tích hợp và tùy biến lớp trong Bootstrap.
• Kỹ năng phân tích (Analytical skills): Phân tích thiết kế giao diện thành các khối cấu trúc chuẩn (header, nav, section, article, aside, footer); xác định mối quan hệ cha - con giữa các phần tử để áp dụng kế thừa CSS; lựa chọn bộ chọn (tag, class, id) tối ưu; gỡ lỗi hiển thị thông qua thẻ <pre> và công cụ xem mã nguồn trình duyệt (View Source / Inspect).
• Kỹ năng thực hành (Practical competencies): Thiết kế hoàn chỉnh các thành phần giao diện thực tế như hệ thống thanh điều hướng (Menu đa cấp), bảng dữ liệu hợp nhất dòng/cột (rowspan, colspan), các loại biểu mẫu thu thập thông tin (form đăng nhập, form góp ý, phiếu thăm dò trực tuyến có phân ô radio/checkbox).

---

Phương pháp giảng dạy và học tập

Giáo trình triển khai phương pháp sư phạm chú trọng thực hành (Practice-oriented Approach), lấy tỷ trọng giờ thực hành và bài tập làm nòng cốt (56 giờ thực hành trên tổng số 105 giờ đào tạo).

[Lý thuyết cú pháp] ➔ [Mã nguồn mẫu] ➔ [Bài tập định hướng] ➔ [Bài tập tự giải]

Bài tập và cấu trúc thực hành

Hệ thống bài tập được phân loại từ mức độ căn bản đến tổng hợp:

• Nhóm bài tập định dạng văn bản: Soạn thảo trang giới thiệu đầu tiên (Welcome.html), trang thơ định dạng đa thẻ (Cohaimo.html, Thơ chúc Xuân), bài tập xử lý công thức và chỉ số trên/dưới (ChisoTrenduoi.htm).
• Nhóm bài tập cấu trúc danh sách và Menu: Xây dựng danh sách liên kết đào tạo bằng <ul>, <ol>, thiết lập thanh điều hướng website (Bài 1 ul html.html, Bài 4: Dựng menu).
• Nhóm bài tập biểu mẫu và bảng: Thiết kế giao diện đăng nhập diễn đàn (Dangnhap.html), phiếu thu thập ý kiến (gopy.html), bảng thăm dò sở thích kết hợp thẻ <table> với các ô nhập liệu text, password, radio, checkbox, textarea (Thamdoykien.html).
• Nhóm bài tập layout: Xây dựng trang hoàn chỉnh kết hợp đầy đủ các thẻ ngữ nghĩa HTML5 (<header>, <nav>, <section>, <article>, <aside>, <footer>).

Phương pháp đánh giá và tự học

• Đánh giá kết quả: Bao gồm kiểm tra quá trình thực hành trên máy (4 giờ kiểm tra định kỳ) và đánh giá độ chính xác của các bài tập nộp theo mẫu giao diện yêu cầu.
• Hướng dẫn tự học: Giáo trình hướng dẫn chi tiết quy trình từng bước khi làm việc với tệp mã nguồn:
  1. Mở tệp mới và lưu dưới định dạng đuôi .html hoặc .css.
  2. Sử dụng tổ hợp phím tắt trên Visual Studio Code (ví dụ: nhấn Shift + 1 rồi nhấn Tab để sinh khung trang chuẩn).
  3. Soạn thảo phần nội dung trong cặp thẻ <body>...</body>.
  4. Lưu tệp (Ctrl + S) và khởi chạy trực tiếp trên các trình duyệt web.
  5. Sử dụng tính năng xem nguồn trang (Ctrl + U) hoặc phím tắt ghi chú (Ctrl + /) để kiểm tra và gỡ lỗi.

---

Điểm nổi bật và cập nhật

Giáo trình Thiết kế Website của Trường Cao đẳng Xây dựng số 1 cập nhật nhiều điểm mới so với các tài liệu giảng dạy truyền thống:

+-----------------------------------------------------------------------+
| CÁC ĐIỂM CẬP NHẬT TRỌNG TÂM CỦA GIÁO TRÌNH                             |
+-----------------------------------------------------------------------+
| 1. Chuẩn hóa ngữ nghĩa HTML5: article, aside, audio, canvas, figure... |
| 2. CSS nâng cao: Flexbox, Text-shadow, Background-size, Position      |
| 3. Tích hợp chuẩn SEO cơ bản: Phân bổ thẻ H1-H6, tối ưu thuộc tính ALT|
| 4. Bổ sung Framework & Thư viện: Bootstrap CSS, JavaScript DOM, Regex |
+-----------------------------------------------------------------------+

1. Chuẩn hóa công nghệ HTML5: Bổ sung hệ thống thẻ ngữ nghĩa hiện đại thay thế cho việc lạm dụng thẻ <div> truyền thống, giúp cấu trúc trang web rõ ràng, dễ bảo trì và tối ưu hóa cho các công cụ tìm kiếm.
2. Kỹ thuật dàn trang CSS hiện đại: Cập nhật các thuộc tính định vị và bố cục chuyên sâu như flexbox, position kết hợp z-index, hiệu ứng đổ bóng văn bản (text-shadow), và các thuộc tính điều chỉnh kích thước hình nền (background-size: auto|value, background-position).
3. Gắn liền với tiêu chuẩn tối ưu hóa tìm kiếm (SEO): Hướng dẫn cụ thể quy tắc phân bổ thẻ tiêu đề (mỗi trang chỉ nên có duy nhất 01 thẻ <h1> chứa từ khóa chính, phân cấp giảm dần từ <h2> đến <h6>), ưu tiên sử dụng thẻ <strong> thay vì <b> để tăng trọng số từ khóa, và bắt buộc khai báo thuộc tính alt cho thẻ hình ảnh <img>.
4. Mở rộng kiến thức sang Framework và Kịch bản tương tác: Không dừng lại ở HTML/CSS thuần, giáo trình mở rộng sang Chương 3 (JavaScript & DOM) và Chương 4 (Bootstrap CSS), đáp ứng nhu cầu xây dựng giao diện tương tác và tương thích thiết bị.

---

Đối tượng sử dụng giáo trình

Giáo trình được biên soạn phục vụ các nhóm đối tượng cụ thể:

• Học sinh, sinh viên: Sinh viên theo học hệ Cao đẳng và Trung cấp ngành Công nghệ thông tin ứng dụng phần mềm, Công nghệ thông tin hoặc các ngành kỹ thuật liên quan có học phần thiết kế web cơ sở.
• Điều kiện tiên quyết (Prerequisites): Người học cần có kiến thức tin học văn phòng cơ bản, hiểu biết về hệ điều hành máy tính, thao tác quản lý tệp tin/thư mục và khả năng sử dụng các trình duyệt web thông dụng.
• Giảng viên chuyên ngành: Sử dụng làm tài liệu giảng dạy chuẩn theo đề cương chi tiết học phần MH20, làm căn cứ xây dựng giáo án lý thuyết, bài giảng thực hành và ngân hàng đề thi kiểm tra kỹ năng lập trình web.
• Người tự học và tham khảo: Phù hợp cho lập trình viên mới bắt đầu tiếp cận mảng phát triển giao diện người dùng (Front-end Web Development), cần tài liệu chỉ dẫn cú pháp kèm mã nguồn mẫu chi tiết.

---

Câu hỏi thường gặp (FAQ)

1. Giáo trình này phù hợp với đối tượng nào?

Giáo trình được thiết kế chuẩn hóa cho học sinh, sinh viên trình độ Cao đẳng và Trung cấp chuyên ngành Công nghệ thông tin ứng dụng phần mềm, đồng thời phù hợp cho bất kỳ người học nào bắt đầu tiếp cận lập trình web tĩnh.

2. Người học cần chuẩn bị kiến thức nền tảng gì trước khi học?

Người học chỉ cần nắm vững kỹ năng sử dụng máy tính cơ bản, thao tác quản lý tệp/thư mục và sử dụng trình duyệt web. Không bắt buộc phải có kiến thức lập trình chuyên sâu từ trước.

3. Giáo trình có điểm gì khác biệt so với các tài liệu khác?

Giáo trình cân đối tỷ lượng thực hành cao (56/105 giờ), tích hợp hệ thống bài tập mẫu có mã nguồn đối chiếu rõ ràng, hướng dẫn thao tác trực tiếp trên công cụ Visual Studio Code và tích hợp các chuẩn công nghệ như HTML5, CSS Flexbox, JavaScript DOM cùng Bootstrap CSS.

4. Phương pháp tự học giáo trình như thế nào để đạt hiệu quả cao?

Người học nên cài đặt Visual Studio Code theo hướng dẫn ở Chương 1, tự tay gõ lại toàn bộ các đoạn mã nguồn mẫu, lưu tệp đúng định dạng .html/.css, kiểm tra hiển thị trên trình duyệt và tự hoàn thành toàn bộ các bài tập tổng hợp từ Bài 1 đến Bài 8 ở cuối mỗi chương.

5. Giáo trình có kèm theo tài liệu và bài tập thực hành bổ trợ không?

Có. Giáo trình đi kèm hệ thống ví dụ mã nguồn đầy đủ, bài tập thực hành theo từng thẻ/thuộc tính, 9 bài tập tình huống biểu mẫu và bảng, 8 bài tập tổng hợp xây dựng trang web hoàn chỉnh, cùng định hướng tích hợp mã nguồn mở WordPress theo đề cương môn học.

---

Kết luận

Giáo trình Thiết kế Website (Mã môn học: MH20) của Trường Cao đẳng Xây dựng số 1 là tài liệu học thuật hoàn chỉnh, cung cấp toàn diện kiến thức nền tảng và kỹ năng thực hành xây dựng giao diện web tĩnh.

Lộ trình đào tạo được thiết kế rõ ràng qua 4 giai đoạn:

1. Giai đoạn 1: Xây dựng khung xương và ngữ nghĩa tài liệu với ngôn ngữ HTML/HTML5.
2. Giai đoạn 2: Tạo kiểu, thiết lập màu sắc và tổ chức bố cục linh hoạt với CSS/Flexbox.
3. Giai đoạn 3: Xử lý tương tác, kiểm tra dữ liệu và thao tác giao diện động với JavaScript & DOM.
4. Giai đoạn 4: Chuẩn hóa giao diện người dùng và tối ưu tốc độ phát triển thông qua Bootstrap CSS.

Tài liệu là cơ sở học tập và tham khảo giá trị cho người học ngành Công nghệ thông tin, hỗ trợ đắc lực cho quá trình hình thành kỹ năng nghề nghiệp trong lĩnh vực phát triển web.

Trích đoạn nội dung tài liệu

BÞ XÂY DĂNG TR¯âNG CAO ĐÀNG XÂY DĂNG SÞ 1 GIÁO TRÌNH MÔN HàC: THI¾T K¾ WEBSITE NGÀNH: CÔNG NGHÞ THÔNG TIN ĀNG DĀNG PHÄN MÀM TRÌNH Đà: CAO ĐÀNG Ban hành kèm theo Quyết định số: 368ĐT/QĐ-CĐXD1 ngày 10 tháng 8 năm 2021 của Hiệu trưởng Trường Cao đẳng Xây dựng số 1 Hà Nßi, năm 2021 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 NÓI ĐÄU Giáo trình THIÀT KÀ WEBSITE đ°ÿc biên so¿n nh¿m phāc vā cho giÁng d¿y và hãc tÁp cho trình đá Trung cÃp ngành Công nghÉ Thông tin āng dāng phÅn mÃm ç tr°ång Cao đÁng Xây dąng sá 1. THIÀT KÀ WEBSITE là môn hãc chuyên ngành nh¿m cung cÃp các kiÁn thāc và công nghÉ thông tin, kỹ nng thiÁt kÁ, xây dąng mát giao diÉn trang web c¢ bÁn.

Giáo trình THIÀT KÀ WEBSITE do bá môn Tin c¢ sç gßm: THS.Đß Thá Xuân Thắm làm chÿ biên đã và đang giÁng d¿y trąc tiÁp trong bá môn cùng tham gia biên so¿n. Giáo trình này đ°ÿc viÁt theo đà c°¢ng môn hãc thiÁt kÁ web, tuân thÿ theo các quy tắc tháng nhÃt. Ngoài ra giáo trình còn bá sung thêm mát sá kiÁn thāc mà trong các giáo trình tr°ãc ch°a đà cÁp tãi. Nội dung gồm 4 chương sau: Ch°¢ng 1.

Ngôn ngă HTML Ch°¢ng 2. Giãi thiêu CSS Ch°¢ng 3. JavaScript và Document Object Model (DOM) Ch°¢ng 4. Bootstrap CSS Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường.

Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khó tránh khỏi những thiếu sót. Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp. Trân trọng cảm ơn! Hà Nái, ngày&&tháng&&nm&&& Tham gia biên so¿n 1. Đß Thá Xuân Thắm - Chÿ biên MĀC LĀC Ch°¢ng 1: NGÔN NGĂ HTML.

Giãi thiÉu HTML. Giãi thiÉu HTML. Các công cā t¿o trang web. CÃu trúc cÿa mát trang web .2 CÃu trúc mát trang web và thÁ HTML .1 CÃu trúc chung mát trang HTML .2 CÃu trúc c¢ bÁn cÿa mát trang Web .3 CÃu trúc cÿa thÁ HTML .4 Đ¢n vá trong HTML và CSS .1 Các thÁ tiêu đà heading (h) .3 ThÁ pre trong HTML .4 ThÁ liên kÁt a và đáa chß t°¢ng đái – tuyÉt đái và các lo¿i liên kÁt .5 ThÁ chèn hình Ánh IMG .6 ThÁ danh sách tuÅn tą (ol) và bÃt tuÅn tą (ul) trong HTML .9 ThÁ div, span và phân lo¿i các kiÅu thÁ trong html .16 Bài 4: Sÿ dāng form lo¿i thẻ Radio button.

GIâI THIÈU CSS. Giãi thiÉu CSS. Các cách sā dāng CSS trong trang web .1 Đánh nghĩa bá chãn HTML (HTML Seclector) .3 Bá chãn đánh danh (ID Seclector) .4 Bá chãn cho liên kÁt. Mát sá thuác tính CSS c¢ bÁn .1 Thuác Tính Cho Vn BÁn Text .2 Thuác tính border (đ°ång viÃn) .3 Thuác tính cho toàn khái vn bÁn .4 Đánh nghĩa thuác tính khái .5 Thuác tính danh sách .6 Thuác tính hiÉu āng .7 Thuác tính position và z-index trong css .8 Thuác tính flexbox.3 Text-shadow: đá bóng cho chă.

T¿o bá cāc (layout) cho trang web. Mô hình khung (box model). Mát sá l°u ý khi viÁt CSS .61 Bài tÁp ch°¢ng 4. JavaScript và Document Object Model (DOM).

Giãi thiÉu JavaScript .2 Các cách sā dāng JavaScript trong trang web.3 Ngôn ngă JavaScript .4 LÁp trình h°ãng đái t°ÿng trong JavaScript. Mô hình đái t°ÿng vn bÁn (DOM) .1 Khái niÉm Dom .2 Phân lo¿i Dom .4 LÃy nái dung trong Dom. Các háp tho¿i hÉ tháng trong JavaScript .1 HiÅn thá thông báoJavascript .5 Time events trong javascript. BiÅu thāc chính qui (regular expression) .76 Bài tÁp ch°¢ng 3 .1 Giãi thiÉu Bootstrap CSS .2 Sā dāng Bootstrap CSS .3 Các thành phÅn cÿa bootstrap CSS .88 CH¯¡NG TRÌNH MÔN HàC Tên môn hác: THI¾T K¾ WEBSITE Mã môn hác: MH20 Thãi gian thăc hißn môn hác: 105 giå; (Lý thuyÁt: 45 giå; Thąc hành, thí nghiÉm, thÁo luÁn, bài tÁp: 56 giå; KiÅm tra: 4 giå) I.

Vß trí, tính chÃt cÿa môn hác: - Vá trí: Môn ThiÁt kÁ và triÅn khai Website vãi mã ngußn mç là môn hãc bắt buác thuác nhóm các mô đun, môn hãc đào t¿o ngành Công nghÉ thông tin. - Tính chÃt: Môn ThiÁt kÁ và triÅn khai Website vãi mã ngußn mç đ°ÿc sā dāng ráng rãi trong các lĩnh vąc cÿa ngành Công nghÉ thông tin. Môn hãc cũng góp phÅn nâng cao chÃt l°ÿng đào t¿o nghà và phát triÅn ngußn nhân ląc trong giai đo¿n mãi. Māc tiêu môn hác: - Và kiÁn thāc: Nắm đ°ÿc mát cách có hÉ tháng các kiÁn thāc c¢ bÁn và thiÁt kÁ và vÁn hành Website; nắm đ°ÿc quy trình thiÁt kÁ Website b¿ng mã ngußn mç WordPress.

- Và kỹ nng: Ng°åi hãc thiÁt kÁ đ°ÿc Website vãi mã ngußn mç WordPress; tìm kiÁm và sā dāng nhăng công cā có sẵn hß trÿ cho viÉc thiÁt kÁ Website. - Và nng ląc tą chÿ và trách nhiÉm: Rèn luyÉn lòng yêu nghÃ, t° thÁ tác phong công nghiÉp, tính kiên trì, sáng t¿o trong công viÉc. Nßi dung môn hác: CH¯¡NG 1: NGÔN NGĀ HTML Māc tiêu:  PhÅn mÃm h°ãng d¿n viÁt code  Trình bày đ°ÿc cú pháp cÿa HTML  CÃu trúc các thÁ HTML  Thao tác vãi các thÁ c¢ bÁn trong HTML  Thao tác thÁ form, thÁ liên kÁt, thÁ chèn hình Ánh,.  Xây dąng đ°ÿc cÃu trúc chung cÿa mát trang web  BiÁt cách tá chāc và t¿o các file html Nßi dung ch°¢ng: 1.

Giái thißu HTML 1. Giới thiệu HTML HTML (Hyper Text Markup Language) là ngôn ngă đánh dÃu, thÅ hiÉn b¿ng các tag (gãi là thÁ), nhăng thÁ này giúp cho trình duyÉt đãc đ°ÿc nái dung, có thÅ là text, image, hay video, form,& và sau đó trình duyÉt s¿ hiÅn thá nái dung cho ng°åi dùng xem. HTML có khoÁng h¢n 80 thÁ, mßi thÁ có mát nhiÉm vā riêng, tuy nhiên s¿ có nhăng thÁ sā dāng th°ång xuyên và mát sá thÁ ít khi sā dāng. Tài liÉu HTML t¿o thành mã ngußn mç cÿa trang Web.

Khi đ°ÿc xem trên trình so¿n thÁo , tài liÉu là mát chußi các thÁ các phÅn tā, mà chúng xác đánh trang Web hiÅn thá nh° thÁ nào. Trình duyÉt đãc các file tÿ đuôi .htm và hiÅn thá trang web theo các lÉnh trong đó. HTML không phÁi là ngôn ngă lÁp trình, html là ngôn ngă đánh dÃu (markup language), ngôn ngă đánh dÃu là mát nhóm các thÁ đánh dÃu tag. HTML dùng các thÁ đÅ mô tÁ trang web.

T¿i sao phÁi sÿ dāng HTML khi xây dăng trang Web. HTML là ngôn ngă duy nhÃt trình duyÉt có thÅ hiÅu và biên dách đ°ÿc. Biên dách có nghĩa là gì? Biên dách là chuyÅn mã ngußn thành nhăng mã ngußn mà chúng ta có thÅ nhìn thÃy. TÃt cÁ các trình duyÉt chß có thÅ hiÅu đ°ÿc HTML cho nên dù website xây dąng b¿ng công nghÉ gì đi năa thì đÅu ra v¿n là HTML đÅ đÁm bÁo trình duyÉt có thÅ đãc đ°ÿc.

T¿i sao sā dāng các thÁ HTML? Trình duyÉt có khÁ nng biên dách ngôn ngă HTML. Dù có chãn ngôn ngă nào thì cũng phÁi đ°a và HTML. CÃu trúc mát trang web Ctrl + U hoặc chuát phÁi xem ngußn s¿ thÃy mã ngußn trang. Các công cā t¿o trang web Công cā so¿n thao HTML tát phÁi có trình kiÅm tra chính tÁ, sá dòng, tą đáng hoàn thành, xem tr°ãc trang và công cā so¿n thÁo vn bÁn và hình Ánh.

Có nhiÃu công cā so¿n thÁo: phÅn mÃm NotePad ++, subline text, Visual Studio Code, 1 & Trong bài giÁng này sā dāng công cā Visual Studio Code. TÁi công cā t¿i trang https://code. Thay đái màu nÃn Visual Stadio code: File/ Preference/ Color Theme/ Chãn Light (Visual Stadio). Đái font chă Visual Stadio code: File/ Preference/ Settings/ Chán Font size: 16 CÁC B¯àC KHI CH¾Y FILE CODE B°ác 1: Mở file mái: Ân ctrl + N/ L°u file: tên file.html (luôn luôn có đuôi là .html)/ Trong màn hình so¿n thÁo Visual Stadio code: Giă phím Shift + 1 đÅ ra dÃu chÃm than ! (sā dāng phÅn viÁt code là subline text 3 thì gõ <html rßi Ãn phím Enter.

 Ân phím tab trên bàn phím s¿ hiÅn thá ra cÃu trúc cÿa trang web Trong phÅn head sāa nái dung ç thÁ <title>Tên trang web</title> B°ãc 2: Gõ nái dung các thÁ trong phÅn: chú ý các thÁ chß cÅn gõ tên thÁ rßi Ãn Enter s¿ tą đáng ra thÁ đóng cÿa nó. Giăa hai thÁ bao giå cũng là nái dung cÅn hiÅn thá cÿa thÁ. <body> </body> B°ác 3: Gõ xong nái dung code/ l°u file: ctrl + S/ B°ác 4: Vào file đã l°u/NhÃp phÁi chuát chãn mát trình duyÉt web 2 Muán gõ chú thích: Gõ nái dung/ bôi đen dòng vn bÁn muán làm ghi chú/ Ãn phím ctrl + / 1. Cấu trúc của một trang web Mßt tài lißu HTML gßm ba phÅn c¢ bÁn:  PhÅn HTML: Mãi tài liÉu HTML phÁi bắt đÅu b¿ng thÁ mç HTML <HTML> và kÁt thúc b¿ng thÁ đóng HTML </HTML>.

 PhÅn tiêu đÁ: PhÅn tiêu đà bắt đÅu b¿ng thÁ <head> và kÁt thúc bçi thÁ </head>. PhÅn này chāa tiêu đà mà đ°ÿc hiÅn thá truên thanh điÃu h°ãng cÿa trang web. Tiêu đà n¿m trong thÁ <title> và kÁt thúc b¿ng thÁ </title>. Liên kÁt vãi file css.

 PhÅn thân: phÅn này n¿m sau tiêu đÅ. PhÅn thân bắt dÅu b¿ng thÁ <body> và kÁt thúc b¿ng thÁ <body>. PhÅn thân gßm nái dung trang web, hình Ánh các liên kÁt muán hiÅn thá trong trang web. Liên kÁt đÁn file Javascript.

CÃu trúc c¢ bÁn <html> <head> <title> Tiêu đà trang </title> <!-- ThÁ liên kÁt đÁn file css -- > </head> <body> <!-- Chāa tÃt cÁ các thÁ HTML đÅ hiÅn thá nái dung trang web lên trình duyÉt. ThÁ liên kÁt đÁn file Javascript -- > </body> </html> 1.2 Cấu trúc một trang web và thẻ HTML 3 1.1 Cấu trúc chung một trang HTML Mßi trang web đÃu có cách thÅ hiÅn cÃu trúc khác nhau, có trang 1 cát, có trang 2 và có trang có chāa nhiÃu cát. D°ãi đâu là cÃu trúc c¢ bÁn cÿa mát trang web.  PhÅn đÅu: Header, có thÅ chwuas logo, câu slogan, các liên kÁt, các banner liên kÁt, các button, đo¿n flash, hoặc các form ngắn nh° form tìm kiÁm,&  PhÅn liên k¿t toàn cāc: global navigation, dùng đÅ chwuas các liên kÁt đÁn nhăng trang quan trãng trong toàn bá trang, trong phÅn này có thÅ chāa thêm các liên kÁt con (sub navigation).

 PhÅn thân cÿa trang: page body, phÅn này chāa nái dung chính (content) và phÅn nái dung phā (sidebar).