Giáo trình thiết kế web nghề tin học văn phòng trung cấp trường cao đẳng cơ điện xây dựng việt xô

Giáo trình thiết kế web cho nghề tin học văn phòng trung cấp tại trường cao đẳng cơ điện xây dựng Việt Xô, cung cấp kiến thức và kỹ năng cần thiết.

• Trường học: Trường Cao Đẳng Cơ Điện Xây Dựng Việt Xô
• Chuyên ngành: Tin Học Văn Phòng
• Đề tài: Giáo Trình Thiết Kế Web
• Loại tài liệu: Giáo Trình
• Năm xuất bản: 2018
• Địa điểm: Tam Điệp

Mục lục chi tiết

• LỜI NÓI ĐẦU
• 1. BÀI 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
• 1.1. Internet và dịch vụ Internet
• 1.2. Lợi ích của Internet
• 1.3. Dịch vụ Internet
• 1.4. Giới thiệu về WWW
• 1.5. Quy trình xây dựng Website
• 1.6. Web page, Website
• 1.7. Trình duyệt Web
• 1.8. Khái niệm trình duyệt Web
• 1.9. Các trình duyệt Web
• 1.10. Một số thao tác cơ bản với trình duyệt Web
• 2. BÀI 2: GIAO DIỆN WEB
• 2.1. Các loại giao diện Website
• 2.2. Bố cục giao diện Web
• 2.3. Xây dựng giao diện Web theo yêu cầu
• 3. BÀI 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
• 3.1. Giới thiệu HTML
• 3.2. Các thẻ cơ bản trong HTML
• 3.3. Thẻ định dạng văn bản
• 3.4. Thẻ căn chỉnh nội dung
• 3.5. Giới thiệu CSS
• 3.6. Các lệnh cơ bản trong CSS
• 3.7. Định dạng chữ
• 3.8. Các lệnh CSS khác
• 4. BÀI 4: MÃ NGUỒN MỞ
• 4.1. Giới thiệu mã nguồn mở
• 4.2. Khái niệm mã nguồn mở
• 4.3. Quản trị nội dung Website Wordpress
• 4.4. Làm việc với AdminCP
• 4.5. Cài đặt Plugin cho WordPress
• 4.6. Cài đặt Themes cho WordPress
• 4.7. Chỉnh giao diện bằng CSS trong Theme
• 4.8. Tuỳ chỉnh header và background
• 4.9. Hướng dẫn viết bài mới Wordpress
• 4.10. Cách tạo menu trong Wordpress
• 4.11. Hướng dẫn tạo trang mới (Add new pages)
• 4.12. Hướng dẫn Widget Wordpress
• 4.13. Tối ưu hoá tìm kiếm (SEO)
• 4.14. 21 website để tìm theme miễn phí
• 5. BÀI 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE
• 5.1. Đăng ký tên miền, hosting
• 5.2. Tên miền – domain
• 5.3. Đăng ký dịch vụ
• 5.4. Cài đặt Website lên Server
• 5.5. Xác nhận thông tin server
• 5.6. Đưa mã nguồn lên server
• 5.7. Phát triển Website
• 5.8. Kiểm tra và thử nghiệm nội dung
• 5.9. Phát triển nội dung
• 5.10. Bảo mật Website
• 5.11. Hiểm họa đối với Website

Tóm tắt

I. Tổng quan về giáo trình thiết kế web cho nghề tin học văn phòng

Giáo trình thiết kế web cho nghề tin học văn phòng là một tài liệu quan trọng, cung cấp kiến thức và kỹ năng cần thiết cho sinh viên trong lĩnh vực này. Nội dung giáo trình được xây dựng dựa trên các mô đun học tập, bao gồm lý thuyết và thực hành. Mục tiêu chính của giáo trình là giúp sinh viên nắm vững các nguyên tắc cơ bản trong việc thiết kế và phát triển website, từ đó có thể áp dụng vào thực tế công việc.

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

Mục tiêu của giáo trình là cung cấp cho sinh viên kiến thức về cấu trúc website, quy trình xây dựng và phát triển website, cũng như các vấn đề liên quan đến an toàn và bảo mật website. Sinh viên sẽ học cách tạo website bằng các ngôn ngữ lập trình như HTML, CSS, và JavaScript.

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

Giáo trình này được thiết kế cho sinh viên ngành tin học văn phòng, những người muốn nâng cao kỹ năng thiết kế web. Nó cũng phù hợp cho những ai đang làm việc trong lĩnh vực công nghệ thông tin và cần cập nhật kiến thức mới.

II. Những thách thức trong việc thiết kế web cho nghề tin học văn phòng

Thiết kế web không chỉ đơn thuần là việc tạo ra một trang web đẹp mắt mà còn phải đảm bảo tính năng và hiệu suất. Một số thách thức lớn bao gồm việc lựa chọn công nghệ phù hợp, tối ưu hóa trải nghiệm người dùng, và đảm bảo an toàn thông tin. Những vấn đề này cần được giải quyết để tạo ra một sản phẩm chất lượng.

2.1. Lựa chọn công nghệ phù hợp

Việc lựa chọn công nghệ để phát triển website là rất quan trọng. Các công nghệ như HTML, CSS, và JavaScript là những công cụ cơ bản, nhưng cần phải biết cách kết hợp chúng một cách hiệu quả để tạo ra một website hoàn chỉnh.

2.2. Tối ưu hóa trải nghiệm người dùng

Trải nghiệm người dùng là yếu tố quyết định sự thành công của một website. Cần phải thiết kế giao diện thân thiện, dễ sử dụng và đảm bảo tốc độ tải trang nhanh chóng để giữ chân người dùng.

III. Phương pháp thiết kế web hiệu quả cho nghề tin học văn phòng

Để thiết kế web 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 phần mềm thiết kế như Photoshop, cùng với các ngôn ngữ lập trình web, sẽ giúp tạo ra những sản phẩm chất lượng cao. Ngoài ra, việc nắm vững các nguyên tắc SEO cũng rất quan trọng để website có thể tiếp cận được nhiều người dùng hơn.

3.1. Sử dụng phần mềm thiết kế

Phần mềm thiết kế như Photoshop giúp tạo ra các giao diện đẹp mắt và chuyên nghiệp. Việc sử dụng thành thạo các công cụ này sẽ giúp sinh viên có thể tạo ra những sản phẩm ấn tượng.

3.2. Nắm vững nguyên tắc SEO

Tối ưu hóa công cụ tìm kiếm (SEO) là một phần không thể thiếu trong thiết kế web. Việc áp dụng các kỹ thuật SEO sẽ giúp website dễ dàng được tìm thấy trên các công cụ tìm kiếm, từ đó tăng lượng truy cập.

IV. Ứng dụng thực tiễn của giáo trình thiết kế web trong nghề tin học văn phòng

Giáo trình thiết kế web không chỉ mang lại kiến thức lý thuyết mà còn giúp sinh viên áp dụng vào thực tiễn. Các bài tập thực hành trong giáo trình giúp sinh viên có cơ hội trải nghiệm thực tế, từ đó nâng cao kỹ năng và tự tin hơn trong công việc.

4.1. Thực hành thiết kế website

Sinh viên sẽ được thực hành thiết kế website từ những bước cơ bản nhất, từ việc lên ý tưởng, thiết kế giao diện đến việc lập trình và triển khai website trên môi trường thực tế.

4.2. Phát triển kỹ năng làm việc nhóm

Trong quá trình thực hành, sinh viên sẽ có cơ hội làm việc nhóm, từ đó phát triển kỹ năng giao tiếp và hợp tác, những kỹ năng quan trọng trong môi trường làm việc hiện đại.

V. Kết luận và tương lai của giáo trình thiết kế web cho nghề tin học văn phòng

Giáo trình thiết kế web cho nghề tin học văn phòng là một tài liệu quý giá, giúp sinh viên trang bị kiến thức và kỹ năng cần thiết. Tương lai của giáo trình sẽ tiếp tục được cập nhật và cải tiến để đáp ứng nhu cầu ngày càng cao của thị trường lao động.

5.1. Cập nhật nội dung giáo trình

Giáo trình sẽ được cập nhật thường xuyên để phản ánh những thay đổi trong công nghệ và nhu cầu của thị trường. Điều này giúp sinh viên luôn được trang bị kiến thức mới nhất.

5.2. Tăng cường hợp tác với doanh nghiệp

Việc hợp tác với các doanh nghiệp trong ngành công nghệ thông tin sẽ giúp giáo trình trở nên thực tiễn hơn, đồng thời tạo cơ hội cho sinh viên thực tập và làm việc sau khi tốt nghiệp.

Nội dung chính

TỔNG QUAN HỌC THUẬT VÀ MÔ TẢ GIÁO TRÌNH: THIẾT KẾ WEB (MĐ 23)

---

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

Giáo trình môn học Thiết kế Web (Mã mô đun: MĐ 23) do Khoa Công nghệ thông tin và Ngoại ngữ thuộc Trường Cao đẳng Cơ điện Xây dựng Việt Xô biên soạn (nghiệm thu và ban hành tại Tam Điệp, năm 2018). Môn học được kết cấu trong chương trình đào tạo nghề Tin học văn phòng ở trình độ Trung cấp, đồng thời tham chiếu các tiêu chuẩn phân tích nghề thuộc Chương trình khung quốc gia nghề Quản trị mạng máy tính.

Trong cấu trúc chương trình đào tạo, mô đun Thiết kế Web được bố trí giảng dạy sau khi sinh viên đã hoàn thành các môn học chung và các môn học cơ sở chuyên ngành. Về mặt tính chất, đây là mô đun chuyên môn nghề bắt buộc nhằm trang bị năng lực xây dựng, vận hành và quản trị trang web.

Mục tiêu đào tạo của giáo trình được xác định trên ba phương diện cụ thể:

• Về kiến thức: Sinh viên trình bày được cấu trúc hoàn chỉnh của một website; nắm vững quy trình 6 bước xây dựng và phát triển hệ thống web; giải thích được các vấn đề kỹ thuật liên quan đến an toàn và bảo mật website.
• Về kỹ năng: Thiết kế và xây dựng được website hoàn chỉnh dựa trên ngôn ngữ HTML, CSS, JavaScript, XML và hệ quản trị nội dung mã nguồn mở; xử lý đồ họa giao diện theo yêu cầu kỹ thuật; thực hiện xuất bản website lên máy chủ (server).
• Về năng lực tự chủ và trách nhiệm: Bố trí quy trình làm việc khoa học đảm bảo tiến độ xây dựng và vận hành hệ thống; rèn luyện tác phong cẩn thận, tỉ mỉ và tuân thủ các quy chuẩn an toàn lao động với thiết bị máy tính.

Giáo trình được biên soạn theo phương thức tích hợp lý thuyết và thực hành với tổng thời lượng 90 giờ, bao gồm 29 giờ lý thuyết (chiếm 32,2%), 58 giờ thực hành, bài tập, thảo luận (chiếm 64,4%) và 3 giờ kiểm tra định kỳ (chiếm 3,4%). Cấu trúc tiếp cận đi tuần tự từ khái niệm mạng và dịch vụ Internet, kỹ thuật bố cục giao diện, lập trình mã nguồn tĩnh (HTML/CSS), đến triển khai hệ quản trị nội dung động (WordPress CMS) và quy trình xuất bản website lên hosting thực tế.

---

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

                             TIẾN TRÌNH NỘI DUNG MÔ ĐUN MĐ 23 (90 GIỜ)

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

Nội dung giảng dạy của giáo trình được phân bổ trong 5 bài học chính:

• Bài 1: Các định nghĩa và thuật ngữ (4 giờ - 4 LT): Cung cấp kiến thức nền tảng về mạng máy tính toàn cầu, nguyên lý chuyển gói dữ liệu (packet switching), giao thức IP. Phân tích các dịch vụ Internet tiêu biểu: World Wide Web, E-Mail, FTP (mô hình máy chủ FTP/trình chủ và máy khách FTP/trình khách), Gopher, Newsgroup, Usenet, Mailing List, Telnet, VoIP (dẫn chứng dịch vụ 178 của Viettel và 171 của VNPT), Video Conference, WAP trên mạng GSM. Giới thiệu lịch sử WWW qua ý tưởng Hypertext của Ted Nelson (1965) và dự án của Tim Berners-Lee (1989), kèm 3 cơ chế: định dạng URL, giao thức HTTP và ngôn ngữ siêu văn bản HTML. Khái quát quy trình 6 bước xây dựng website, phân biệt Web page và Website tĩnh/động. Phân loại các trình duyệt (Internet Explorer, Firefox, Safari, Chrome, Opera, Lynx, UCWeb...) và thực hành các thao tác kỹ thuật trên Google Chrome (tìm kiếm, phím tắt ẩn danh Ctrl + Shift + N, đánh dấu trang Ctrl + Shift + B, Bookmark Manager, quản lý Tab Ctrl + T, Ctrl + W).
• Bài 2: Giao diện Web (16 giờ - 4 LT, 12 TH): Phân tích các thành phần cấu trúc của một giao diện chuẩn: Header (logo, banner, tìm kiếm), Navigation (menu điều hướng), Content (nội dung chính), Sidebar (thanh bên), Footer (chân trang). Khảo sát hệ thống thẻ bố cục ngữ nghĩa trong HTML5 (<header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>). Hướng dẫn phương pháp tiếp nhận yêu cầu người dùng và ứng dụng phần mềm Photoshop để thiết kế giao diện đồ họa.
• Bài 3: Ngôn ngữ HTML - CSS (40 giờ - 10 LT, 28 TH, 2 KT):
  • Ngôn ngữ HTML: Khái niệm bắt nguồn từ SGML theo chuẩn W3C; cấu trúc tài liệu cơ bản gồm thẻ mở/đóng <html>, phần tiêu đề <head>, thẻ <title>, và phần thân <body>. Hệ thống thẻ tiêu đề phân cấp từ <h1> đến <h6>, thẻ đoạn văn <p>, các thẻ định dạng văn bản (<strong>, <i>, <u>, <strike>). Cấu trúc liên kết <a> (thuộc tính href, title, target với các giá trị _self, _blank, _top, _parent, và liên kết neo #id). Thẻ nhúng hình ảnh <img /> (thuộc tính src, alt, title). Thao tác bảng <table> (<tr>, <th>, <td>, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>). Xây dựng biểu mẫu <form> (thuộc tính action, method GET/POST, target, enctype gồm application/x-www-form-urlencoded và multipart/form-data) cùng các phần tử điều khiển: Text Input (đơn dòng, Password Input, đa dòng <textarea>), Checkbox, Radio Button, Select Dropdown Box, File Upload Box, Button (submit, reset, button, image), Hidden Form. Xử lý đa phương tiện qua thẻ <video> HTML5 thay thế công nghệ Adobe Flash.
  • Ngôn ngữ CSS: Định nghĩa Cascading Style Sheets, cấu trúc cú pháp Selector { property:value; }. Phân loại Selector (tag, class, id, selector phân cấp #entry img, selector thuộc tính input[name="Search"], selector đại diện *). Ba phương pháp nhúng CSS: Nội tuyến (inline style), Bên trong (internal style trong <head>), Bên ngoài (external style qua thẻ <link>). Thiết lập các nhóm thuộc tính: Nền (background-color, background-image, background-repeat với 4 giá trị repeat-x, repeat-y, repeat, no-repeat, background-attachment với scroll/fixed, background-position và cú pháp rút gọn); Font chữ (font-family với family-names và generic families sans-serif/serif, font-style normal/italic/oblique, font-variant normal/small-caps, font-weight normal/bold/100-900, font-size đơn vị px, em, %, pt và cú pháp rút gọn); Văn bản (color mã HEX/RGB, text-indent, text-align left/right/center/justify, letter-spacing, text-decoration underline/overline/line-through/blink, text-transform uppercase/lowercase/capitalize/none). Điều khiển lớp giả (pseudo-classes) cho liên kết: a:link, a:hover, a:visited, a:active. Quy tắc phân biệt và sử dụng Class (.) và ID (#), cấu trúc khối thẻ <div> và thẻ nội dòng <span>.
• Bài 4: Mã nguồn mở (24 giờ - 8 LT, 15 TH, 1 KT): Khái niệm phần mềm mã nguồn mở; định nghĩa, tác dụng và quy trình cài đặt môi trường Web Server cục bộ. Hướng dẫn toàn diện về hệ quản trị nội dung WordPress: quy trình cài đặt, làm việc với giao diện quản trị AdminCP (tạo danh mục, soạn thảo bài viết, quản lý thư viện hình ảnh, phân quyền người dùng). Khảo sát cấu trúc mã nguồn WordPress, cơ chế cài đặt, thay đổi, chỉnh sửa Theme (tùy biến header, background, can thiệp file CSS trong theme, tra cứu 21 nguồn cung cấp theme miễn phí), quản lý Plugin (chức năng và cài đặt các plugin căn bản), thiết lập Menu, Add new pages, cấu hình Widget và triển khai kỹ thuật tối ưu hóa công cụ tìm kiếm (SEO).
• Bài 5: Xuất bản và duy trì Website (6 giờ - 3 LT, 3 TH): Hướng dẫn đăng ký tên miền (domain) và dịch vụ lưu trữ (hosting). Xác nhận thông số máy chủ, thiết lập kết nối và tải mã nguồn lên server qua giao thức FTP. Quy trình kiểm tra, thử nghiệm nội dung, phát triển nội dung sau khi xuất bản. Phân tích các nguyên lý an toàn, nhận diện các hiểm họa tấn công và triển khai giải pháp bảo mật website.

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

Giáo trình thiết lập hệ thống kiến thức nền tảng bao gồm:

• Hệ thống lý thuyết mạng và giao thức: Mô hình mạng chuyển gói dữ liệu IP, kiến trúc khách - chủ (Client - Server) của dịch vụ Web và FTP, nguyên lý siêu văn bản (Hypertext) của W3C.
• Nguyên lý cấu trúc và phân tách giao diện: Quy tắc tách biệt tầng cấu trúc dữ liệu (HTML) khỏi tầng định dạng hiển thị (CSS); phân loại thẻ dạng khối (block-level) và thẻ nội dòng (inline-level).
• Cơ chế hoạt động của hệ quản trị nội dung (CMS): Nguyên lý tương tác giữa máy chủ Web Server, hệ thống mã nguồn PHP và cơ sở dữ liệu động của nền tảng mã nguồn mở WordPress.

Kỹ năng phát triển

Qua các bài học, người học được rèn luyện các nhóm kỹ năng:

• Kỹ năng kỹ thuật (Technical skills): Viết mã HTML/CSS đúng quy chuẩn cú pháp W3C; xử lý thuộc tính form để thu thập dữ liệu; cấu hình CSS typography và bố cục khối; cài đặt và cấu hình hệ quản trị WordPress trên web server.
• Kỹ năng phân tích (Analytical skills): Phân tích yêu cầu bố cục từ người dùng; tổ chức cấu trúc thẻ tiêu đề <h1>–<h6> và thẻ ngữ nghĩa HTML5 chuẩn SEO; lựa chọn cấu hình hosting và tên miền phù hợp với quy mô website.
• Kỹ năng thực hành nghề nghiệp (Practical competencies): Chuyển đổi bản thiết kế giao diện từ Photoshop sang mã nguồn web; sử dụng phần mềm FTP để truyền tải tập tin lên máy chủ; thao tác quản trị nội dung chuyên nghiệp trong WordPress AdminCP.

---

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

Thành phần mô đun	Thời lượng (Giờ)	Tỷ lệ (%)	Trọng tâm phương pháp đào tạo
Lý thuyết (LT)	29	32,2%	Giảng giải khái niệm, phân tích cú pháp mã lệnh, phân tích giao thức và cấu trúc website.
Thực hành, bài tập, thảo luận (TH)	58	64,4%	Viết mã nguồn trực tiếp trên máy tính, cắt giao diện từ Photoshop, cài đặt Web Server và WordPress.
Kiểm tra định kỳ (KT)	3	3,4%	Đánh giá kỹ năng viết mã HTML/CSS (Bài 3: 2 giờ) và kỹ năng quản trị CMS (Bài 4: 1 giờ).
Tổng cộng toàn khóa	90	100%	Mô hình đào tạo tích hợp lý thuyết gắn liền với thực hành nghề.

Phương pháp tiếp cận sư phạm

Giáo trình áp dụng mô hình giảng dạy tích hợp (integrated pedagogical approach). Mỗi đơn vị bài học lý thuyết được thiết kế đi liền với các bài thực hành cụ thể trong phòng máy. Giảng viên trình bày cấu trúc cú pháp, phân tích ví dụ mẫu, sau đó học viên trực tiếp thao tác trên môi trường phần mềm để kiểm chứng kết quả hiển thị trên trình duyệt.

Hệ thống bài tập và thực hành

• Thực hành thao tác trình duyệt: Luyện tập điều hướng tab, sử dụng phím tắt, vận hành công cụ Bookmark Manager và kích hoạt chế độ ẩn danh Incognito trên Google Chrome.
• Thực hành lập trình HTML/CSS: Viết mã tạo bảng dữ liệu phức tạp, xây dựng form đăng ký/đăng nhập đầy đủ các trường dữ liệu (text, password, checkbox, radio, file upload, hidden form), áp dụng thuộc tính định dạng nền, font chữ và các lớp giả a:hover, a:visited cho liên kết.
• Thực hành hệ thống mã nguồn mở: Cài đặt Web Server cục bộ, cài đặt mã nguồn WordPress, cấu hình cơ sở dữ liệu, can thiệp mã nguồn CSS của Theme, cài đặt Plugin và tạo lập bài viết, danh mục, menu và widget.

Phương pháp đánh giá

Quy trình đánh giá kết quả học tập gồm hai cấu phần:

1. Đánh giá thường xuyên: Thông qua mức độ hoàn thành các bài tập thực hành trên máy (58 giờ) và tính chủ động, cẩn thận, an toàn thiết bị của sinh viên.
2. Đánh giá định kỳ: Thực hiện qua 3 giờ kiểm tra chính thức:
   • 02 giờ kiểm tra tại Bài 3: Đánh giá kỹ năng xây dựng giao diện web tĩnh chuẩn SEO bằng HTML và CSS.
   • 01 giờ kiểm tra tại Bài 4: Đánh giá kỹ năng cài đặt, cấu hình giao diện và quản trị nội dung website WordPress.

Hướng dẫn tự học

Người học được yêu cầu tự cài đặt các môi trường soạn thảo mã nguồn và trình duyệt web trên máy tính cá nhân; chủ động thực hành lại các đoạn mã mẫu; tham khảo 21 website cung cấp theme miễn phí được liệt kê trong giáo trình; tự nghiên cứu tài liệu kỹ thuật về các hàm WordPress và thực nghiệm kiểm tra lỗi hiển thị trên nhiều trình duyệt khác nhau.

---

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

• Cập nhật chuẩn giao diện ngữ nghĩa HTML5: Giáo trình tích hợp các thẻ ngữ nghĩa mới của chuẩn HTML5 (<header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>). Việc ứng dụng các thẻ này giúp cấu trúc website rõ ràng, hỗ trợ các thuật toán của công cụ tìm kiếm thu thập và phân tích dữ liệu chính xác hơn.
• Loại bỏ sự phụ thuộc vào Adobe Flash: Thay vì sử dụng các plugin phụ trợ truyền thống như Adobe Flash gây tiêu tốn tài nguyên và hạn chế trên thiết bị di động, giáo trình hướng dẫn khai thác thẻ <video> chuẩn HTML5, giúp trình duyệt phát đa phương tiện trực tiếp và tối ưu hóa hiệu năng phần cứng.
• Tích hợp dữ liệu thực tế ngành viễn thông và Internet tại Việt Nam: Nội dung bài giảng liên hệ trực tiếp với các dịch vụ viễn thông triển khai trong nước như dịch vụ VoIP 178 (Tổng công ty Viễn thông Quân đội - Viettel) và VoIP 171 (Tổng công ty Bưu chính Viễn thông Việt Nam - VNPT), giúp sinh viên nắm bắt ứng dụng thực tiễn của giao thức mạng.
• Định hướng kỹ thuật chuẩn SEO (Search Engine Optimization): Yếu tố SEO được tích hợp trực tiếp vào bài giảng lập trình HTML/CSS (cách bố trí thẻ tiêu đề <h1> duy nhất, hệ thống thẻ phụ <h2>–<h6>, thẻ <title>, thuộc tính alt cho hình ảnh) và cấu hình SEO trong trang quản trị WordPress.
• Kết hợp giữa lập trình mã thuần và hệ quản trị CMS: Giáo trình không dừng lại ở việc viết mã tĩnh mà mở rộng sang kỹ năng quản trị hệ thống động qua CMS WordPress, từ khâu quản lý người dùng, chỉnh sửa Theme/Plugin đến việc xuất bản thực tế lên máy chủ hosting qua giao thức FTP.

---

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

                     PHÂN VÙNG ĐỐI TƯỢNG VÀ ĐIỀU KIỆN TIẾP CẬN MÔ ĐUN

• Sinh viên đào tạo chính quy: Giáo trình là tài liệu học tập bắt buộc cho sinh viên hệ Trung cấp nghề Tin học văn phòng tại Trường Cao đẳng Cơ điện Xây dựng Việt Xô và các cơ sở giáo dục nghề nghiệp có cùng khung chương trình. Tài liệu cũng phục vụ sinh viên chuyên ngành Quản trị mạng máy tính có nhu cầu hoàn thiện kỹ năng thiết kế web.
• Yêu cầu kiến thức tiên quyết (Prerequisites): Người học cần hoàn thành khối kiến thức tin học đại cương, các môn cơ sở chuyên ngành; có kỹ năng sử dụng máy tính cơ bản, thao tác quản lý tệp tin và sử dụng thành thạo các ứng dụng trình duyệt web.
• Giảng viên và cơ sở đào tạo nghề: Sử dụng làm căn cứ phân phối chương trình chi tiết cho 90 giờ giảng dạy, xây dựng kế hoạch bài giảng tích hợp, thiết kế phòng thực hành máy tính và biên soạn ngân hàng đề kiểm tra đánh giá tay nghề.
• Học viên tự học và kỹ thuật viên tham khảo: Cung cấp tài liệu tham khảo cho nhân viên văn phòng, kỹ thuật viên quản trị mạng cần bổ sung năng lực quản trị nội dung website, chỉnh sửa giao diện và vận hành hosting cho cơ quan, doanh nghiệp.

---

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

1. Giáo trình này phù hợp với ai?

Giáo trình được thiết kế chuẩn hóa cho sinh viên trình độ Trung cấp nghề Tin học văn phòng và nghề Quản trị mạng máy tính. Ngoài ra, giáo trình phù hợp cho giảng viên công nghệ thông tin làm tài liệu giảng dạy và những người mới bắt đầu tiếp cận kỹ thuật xây dựng website.

2. Cần trang bị kiến thức nền nào trước khi học?

Người học cần hoàn thành các môn học chung và môn cơ sở chuyên môn nghề, nắm vững kỹ năng sử dụng hệ điều hành máy tính, quản lý thư mục/tệp tin và sử dụng các trình duyệt web cơ bản.

3. Điểm khác biệt của giáo trình này so với các tài liệu lý thuyết thông thường?

Giáo trình được xây dựng theo hình thức tích hợp với thời lượng thực hành chiếm tới 64,4% (58/90 giờ). Nội dung kết hợp toàn diện từ thiết kế giao diện đồ họa (Photoshop), lập trình mã nguồn tĩnh (HTML/CSS), vận hành hệ quản trị nội dung động (WordPress) đến xuất bản thực tế qua FTP và bảo mật web.

4. Làm sao để tự học giáo trình này đạt hiệu quả cao?

Người học cần kết hợp đọc lý thuyết với việc gõ mã nguồn trực tiếp trên các trình soạn thảo; kiểm tra giao diện trên nhiều trình duyệt; cài đặt Web Server cục bộ để thực hành quản trị WordPress và chủ động nghiên cứu các tài nguyên theme miễn phí được giới thiệu trong sách.

5. Có những tài liệu và công cụ bổ trợ nào được hướng dẫn trong giáo trình?

Giáo trình hướng dẫn chi tiết việc sử dụng phần mềm đồ họa Photoshop, trình duyệt Google Chrome, các bộ gõ và phím tắt, phần mềm Web Server cục bộ, danh mục 21 website tìm kiếm theme miễn phí cho WordPress, cùng các tài liệu về giao thức FTP và bảo mật máy chủ.

---

Kết luận

Giáo trình Thiết kế Web (Mã mô đun: MĐ 23) cung cấp hệ thống kiến thức toàn diện và có cấu trúc chặt chẽ về quy trình xây dựng, phát triển và duy trì trang web. Giá trị cốt lõi của tài liệu nằm ở cấu trúc phân bổ thực hành chiếm ưu thế (58/90 giờ), giúp người học chuyển hóa các khái niệm lý thuyết mạng và mã lệnh thành năng lực nghề nghiệp thực tế.

Lộ trình học tập đề xuất:

1. Nắm vững thuật ngữ mạng và thao tác trình duyệt (Bài 1: 4 giờ LT).
2. Thiết kế bố cục giao diện và ứng dụng HTML5/Photoshop (Bài 2: 16 giờ).
3. Lập trình cấu trúc và định dạng trang web tĩnh với HTML và CSS chuẩn SEO (Bài 3: 40 giờ).
4. Cài đặt, tùy biến Theme/Plugin và quản trị nội dung động với WordPress (Bài 4: 24 giờ).
5. Thực hiện xuất bản qua FTP, cấu hình Domain/Hosting và kiểm soát an toàn bảo mật (Bài 5: 6 giờ).

Để mở rộng kiến thức sau mô đun, người học có thể tham khảo thêm các tài liệu kỹ thuật chuyên sâu về tiêu chuẩn Web của tổ chức World Wide Web Consortium (W3C), tài liệu hướng dẫn phát triển mở rộng của WordPress Codex và các giải pháp bảo mật máy chủ web chuyên dụng.

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

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƯỜNG CAO ĐẲNG CƠ ĐIỆN XÂY DỰNG VIỆT XÔ KHOA CÔN NGHỆ THÔNG TIN VÀ NGOẠI NGỮ GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB NGHỀ: TIN HỌC VĂN PHÒNG TRÌNH ĐỘ TRUNG CẤP Trang 1 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 Chương trình khung quốc gia nghề Quản trị mạng máy tính đã được xây dựng trên cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun, môn học đào tạo nghề là cấp thiết hiện nay.

Thiết kế web là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu thiết kế và lập trình web trong và ngoài nước, kết hợp với kinh nghiệm trong thực tế sản xuất. Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn. Tam Điệp, 2018 Trang 2 MỤC LỤC Bài 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ.

Internet và dịch vụ Internet. Lợi ích của Internet. Dịch vụ Internet. Giới thiệu về WWW.

Quy trình xây dựng Website. Web page, Website. Trình duyệt Web. Khái niệm trình duyệt Web.

Các trình duyệt Web. Một số thao tác cơ bản với trình duyệt Web. 13 Bài 2: GIAO DIỆN WEB. Các loại giao diện Website.

Bố cục giao diện Web. Xây dựng giao diện Web theo yêu cầu. 21 Bài 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ. Giới thiệu HTML.

Các thẻ cơ bản trong HTML. Thẻ định dạng văn bản. Thẻ căn chỉnh nội dung. Giới thiệu CSS .Các lệnh cơ bản trong CSS.

Định dạng chữ. Các lệnh CSS khác. 47 Bài 4: MÃ NGUỒN MỞ. Giới thiệu mã nguồn mở.

Khái niệm mã nguồn mở. 64 4: Quản trị nội dung Website Wordpress. Làm việc với AdminCP. Cài đặt Plugin cho WordPress.

Cài đặt Themes cho WordPress. Chỉnh giao diện bằng CSS trong Theme .Tuỳ chỉnh header va background. Hướng dẫn viết bài mới Wordpress Trang 3 .Cách tạo menu trong Wordpress. Hướng dẫn tạo trang mới (Add new pages).

Hướng dẫn Widget Wordpress. Tối ưu hoá tìm kiếm (SEO). 21 website để tìm theme miễn phí. 135 Bài 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE.

Đăng ký tên miền, hosting. Tên miền – domain. Đăng ký dịch vụ. Cài đặt Website lên Server.

Xác nhận thông tin server. Đưa mã nguồn lên server. Phát triển Website. Kiểm tra và thử nghiệm nội dung.

Phát triển nội dung. Bảo mật Website. Hiểm họa đối với Website. 136 Trang 4 CHƯƠNG TRÌNH MÔ ĐUN Tên mô đun: Thiết kế Web Mã mô đun: MĐ 23 Thời gian thực hiện mô đun: 90 Giờ; (Lý thuyết: 29 giờ; Thực hành: 58 giờ; Kiểm tra: 3 giờ) I.

Vị trí tính chất mô đun: - Vị trí: Mô đun được bố trí sau khi sinh viên học xong các môn học chung, các môn cơ sở chuyên ngành đào tạo chuyên môn nghề. - Tính chất: Là mô đun chuyên môn nghề II. Mục tiêu mô đun: - Về kiến thức + Trình bày được cấu trúc của một Website; + Trình bày được quy trình xây dựng và phát triển Website; + Trình bày được các vấn đề liêu quan đến an toàn và bảo mật Website. - Về kỹ năng: Tạo được Website dựa trên các ngôn ngữ HTML, CSS, Javascrip, XML.; - Về năng lực tự chủ và trách nhiệm + Bố trí làm việc khoa học đảm bảo thời gian xây dựng và vận hành Website.

+ Cần cù, chủ động trong học tập, đảm bảo an toàn trong học tập. Nội dung mô đun: 1. Nội dung tổng quát và phân phối thời gian: Thời gian Thực Số hành, thí Tên chương mục Tổng Lý Kiểm tra TT nghiệm, số thuyết thảo luận, Bài tập Bài 1: Các định nghĩa và 4 4 thuật ngữ 1. Internet và dịch vụ Internet 1 1 1.

Lợi ích của Internet. Dịch vụ Internet. Giới thiệu về WWW 0. Dịch vụ WWW.

Giao thức trong WWW. Quy trình xây dựng Website 1 1 4. Web page, Website 0. Trình duyệt Web Trang 5 0.

Khái niệm trình duyệt Web. Các trình duyệt Web 5. Một số thao tác cơ bản với trình duyệt Web 6: Phần mềm trong thiết kế 0.5 Web Bài 2: Giao diện Web 16 4 12 1. Các loại giao diện Website 1 1 2 2.

Bố cục giao diện Web 3 1 2 3. Xây dựng giao diện Web 12 2 10 theo yêu cầu Bài 3: Ngôn ngữ HTML - 40 10 28 2 CSS 1. Giới thiệu HTML 0. Các thẻ cơ bản trong HTML 13 3 9 1 2.

Thẻ định dạng văn bản. Thẻ căn chỉnh nội dung. Liên kế - Link. Biểu mẫu – Form 2.Giới thiệu CSS 0.Các lệnh cơ bản trong CSS 12 3 9 4.

Định dang khung. Định dạng chữ. Sắp xếp các khối. Xây dựng giao diện Web tử 10 2 7 1 file.

Xây dưng Web chuẩn SEO 4 1 3 Bài 4: Mã nguồn mở 24 8 15 1 1. Giới thiệu mã nguồn mở 0. Khái niệm mã nguồn mở. Các loại mã nguồn mở 4 2.

Khái niệm Web server. Tác dụng Web Server. Cài đặt Web server. Cài đặt Wordpress Trang 6 2 1 1 3.

Giới thiệu Wordpress 3. Cài đặt Wordpress 4: Quản trị nội dung Website 7 2 5 Wordpress 4. Tạo danh mục. Tạo bài viết.

Quản lý bài viết, quản lý ảnh. Quản lý người dùng. Quản lý bố các thành phần khác 5. Cấu trúc mã nguồn 3 1 2 Wordpress 6: Theme Wordpress 6 1 4 1 6.

Thay đổi Theme Wordpress 6. Tìm và cài đặt Theme Wordpress 6. Chỉnh sửa Theme Wordpress 7: Plugin Wordpress 2. Tác dụng của Plugin Wordpress 7.

Các Plugin cơ bản Bài 5: Xuất bản và duy trì 6 3 3 Website 1. Đăng ký tên miền, hosting. Tên miền – domain. Đăng ký dịch vụ 2.

Cài đặt Website lên Server 2 1 1 2. Xác nhận thông tin server. Đưa mã nguồn lên server. Phát triển Website.

Kiểm tra và thử nghiệm nội dung 3. Phát triển nội dung. Bảo mật Website 1. Hiểm họa đối với Website.

Cộng 90 29 58 3 Trang 7 BÀI 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ Mã bài: MĐ 23 – 01. Giới thiệu Website - trang web, trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP1. Internet và dịch vụ Internet.

Mục tiêu - Trình bày được các khái niệm về cá thuật ngữ trong dịch vụ WWW - Trình bày được vai trò của internet và các dịch vụ internet - Trình bày được quá trình xây dựng website - Cẩn thận, tỉ mỷ khi tìm hiểu và phát triển hệ thống Web 1. 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. Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng đã được chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân và các chính phủ trên toàn cầu.

Lợi ích của Internet Internet có rất nhiều lợi ích đối với cuộc sống thường ngày:  Đọc báo, xem tin tức Online  Lướt Facebook, xem phim, nghe nhạc trực tuyến  Gửi nhận Mail, tìm kiếm thông tin trên mạng  Mua bán, học tập, thậm chí chữa bệnh qua mạng  … Nói tóm lại, Internet mang lại CỰC KỲ tiện ích cho con người, nó cung cấp một khối lượng thông tin Khổng Lồ. Các cách thức thông thường để truy cập Internet là quay số, băng rộng, không dây, vệ tinh và qua điện thoại cầm tay. Dịch vụ Internet 1.1 Web, E-Mail, FTP, hội thoại Website - trang web, trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP.

WebsiteTrang có thể 8 được xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động). Website có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,.NET, Java, Ruby on Rails. Email - Thư điện tử (từ chữ Electronic mail) là một hệ thống chuyển nhận thư từ qua các mạng máy tính. Email là một phương tiện thông tin rất nhanh.

Một mẫu thông tin (thư từ) có thể được gửi đi ở dạng mã hoá hay dạng thông thường và được chuyển qua các mạng máy tính đặc biệt là mạng Internet. Nó có thể chuyển mẫu thông tin từ một máy nguồn tới một hay rất nhiều máy nhận trong cùng lúc. Ngày nay, email chẳng những có thể truyền gửi được chữ, nó còn có thể truyền được các dạng thông tin khác như hình ảnh, âm thanh, phim, và đặc biệt các phần mềm thư điện tử kiểu mới còn có thể hiển thị các email dạng sống động tương thích với kiểu tệp HTML. Hoạt động của FTP cần có hai máy tính, một máy chủ và một máy khách).

Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là trình chủ, lắng nghe yêu cầu về dịch vụ của các máy tính khác trên mạng lưới. Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi là trình khách, thì khởi đầu một liên kết với máy chủ. Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thao tác về tập tin, như tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy của mình, đổi tên của tập tin, hoặc xóa tập tin ở máy chủ v. Vì giao thức FTP là một giao thức chuẩn công khai, cho nên bất cứ một công ty phần mềm nào, hay một lập trình viên nào cũng có thể viết trình chủ FTP hoặc trình khách FTP.

Hầu như bất cứ một nền tảng hệ điều hành máy tính nào cũng hỗ trợ giao thức FTP. Hiện nay trên thị trường có rất nhiều các trình khách và trình chủ FTP, và phần đông các trình ứng dụng này cho phép người dùng được lấy tự do, không mất tiền.