Giáo trình HTML và Thiết kế Web - Khoa CNTT ĐH Công nghệ ĐHQGHN

Giáo trình HTML và thiết kế web từ Đại học Công nghệ cung cấp kiến thức nền tảng về ngôn ngữ HTML, CSS và các kỹ thuật thiết kế web hiện đại. Nâng cao kỹ năng

• Trường học: Đại học Công Nghệ, Đại học Quốc gia Hà Nội
• Chuyên ngành: Công nghệ thông tin
• Đề tài: HTML và Thiết kế Web
• Loại tài liệu: Giáo trình

Tóm tắt

I. Tổng quan về giáo trình HTML và thiết kế web đại học công nghệ

Giáo trình HTML và thiết kế web là môn học cốt lõi trong chương trình đào tạo công nghệ thông tin tại các trường đại học công nghệ. HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò nền tảng cho mọi trang web hiện đại. Ngôn ngữ này hoạt động dựa trên cấu trúc thẻ (tag), cho phép định dạng văn bản, chèn hình ảnh, âm thanh và tạo liên kết siêu văn bản. Tại các trường đại học công nghệ, giáo trình HTML thường được thiết kế từ cơ bản đến nâng cao. Sinh viên bắt đầu với các thẻ cơ bản như tiêu đề, đoạn văn, danh sách. Sau đó tiến tới bảng biểu, form nhập liệu và đa phương tiện. HTML có ưu điểm lớn về tính tương thích. Một tài liệu HTML tuân thủ chuẩn có thể hiển thị trên bất kỳ trình duyệt nào. Từ NetScape trên Windows đến Lynx trên UNIX. Giáo trình cũng giới thiệu các phiên bản HTML từ HTML 2, HTML 3 đến HTML5. Mỗi phiên bản bổ sung tính năng mới đáp ứng yêu cầu phát triển của web.

1.1. Vai trò của HTML trong đào tạo công nghệ thông tin

HTML là ngôn ngữ đầu tiên sinh viên tiếp cận khi học lập trình web. Môn học này xây dựng nền tảng vững chắc cho các môn nâng cao hơn như CSS, JavaScript và lập trình phía máy chủ. Tại các trường đại học công nghệ, giáo trình HTML thường đi kèm thực hành trên các trình soạn thảo phổ biến. Các công cụ như Notepad, TextPad hoặc phần mềm WYSIWYG giúp sinh viên làm quen với quy trình tạo trang web. HTML cũng dạy tư duy cấu trúc hóa thông tin. Sinh viên học cách tổ chức nội dung logic, dễ tiếp cận người dùng.

1.2. Cấu trúc cơ bản của một tài liệu HTML

Một tài liệu HTML hoàn chỉnh gồm hai phần chính là phần đầu (head) và phần thân (body). Phần head chứa thông tin meta, tiêu đề trang và liên kết stylesheet. Phần thân chứa toàn bộ nội dung hiển thị trên trình duyệt. Cấu trúc cơ bản bắt đầu bằng khai báo DOCTYPE. Tiếp theo là cặp thẻ html bao bọc toàn bộ tài liệu. Bên trong có thẻ head và thẻ body. Các thẻ tiêu đề H1 đến H6 tạo hệ thống phân cấp nội dung. Thẻ đoạn văn P, thẻ xuống dòng BR và thẻ đường kẻ HR điều khiển bố cục văn bản.

II. Các vấn đề và thách thức khi học HTML thiết kế web

Việc học HTML và thiết kế web tại đại học công nghệ gặp nhiều thách thức. Nhiều sinh viên mới bắt đầu thường nhầm lẫn giữa các thẻ và thuộc tính. Cú pháp HTML tuy đơn giản nhưng đòi hỏi sự chính xác cao. Một lỗi nhỏ có thể khiến trang web hiển thị sai. Thách thức lớn nhất là khoảng cách giữa lý thuyết và thực hành. Văn bản soạn thảo và kết quả hiển thị trên trình duyệt thường không giống nhau. Điều này gây khó khăn cho người mới học. Ngoài ra, HTML liên tục phát triển qua các phiên bản. Sinh viên cần cập nhật kiến thức thường xuyên. Các phiên bản mới như HTML5引入 nhiều thẻ semantic và API mới. Việc nắm bắt đầy đủ đòi hỏi thời gian và nỗ lực. Một vấn đề khác là tối ưu hóa cho nhiều trình duyệt khác nhau. Mỗi trình duyệt có cách render trang web riêng. Điều này yêu cầu kiểm tra chéo (cross-browser testing) phức tạp hơn. Cuối cùng, quản lý tài nguyên đa phương tiện như hình ảnh, âm thanh, video cũng là thách thức. Kích thước tệp lớn ảnh hưởng tốc độ tải trang.

2.1. Khó khăn trong việc hiểu cấu trúc thẻ HTML

Cấu trúc thẻ HTML dựa trên nguyên tắc cặp mở và đóng. Ví dụ thẻ in đậm sử dụng cặp <B> và </B>. Nhiều thẻ khác như tiêu đề, danh sách cũng tuân thủ nguyên tắc này. Tuy nhiên, một số thẻ tự đóng như <BR> hoặc <HR> gây nhầm lẫn. Sinh viên thường quên thẻ đóng, dẫn đến lỗi hiển thị. Việc hiểu đúng ngữ nghĩa từng thẻ cũng quan trọng. Sử dụng sai thẻ khiến cấu trúc trang không hợp lý. Giáo trình cần nhấn mạnh thực hành nhiều để khắc phục vấn đề này.

2.2. Vấn đề tương thích trình duyệt và thiết bị

Mỗi trình duyệt web có cách diễn giải HTML khác nhau. Trang web hiển thị đẹp trên Chrome có thể lỗi trên Firefox hoặc Safari. Đây là thách thức lớn trong thiết kế web hiện đại. Ngoài ra, sự phổ biến của thiết bị di động đòi hỏi thiết kế responsive. HTML thuần không đáp ứng được yêu cầu này một cách đầy đủ. Cần kết hợp CSS để tạo giao diện linh hoạt. Sinh viên cũng cần kiểm tra trên nhiều độ phân giải màn hình. Giáo trình đại học thường chưa đề cập sâu vấn đề này.

III. Giải pháp và phương pháp học HTML thiết kế web hiệu quả

Để học HTML và thiết kế web hiệu quả, sinh viên cần áp dụng phương pháp học tập đúng đắn. Thực hành là yếu tố quan trọng nhất. Mỗi kiến thức lý thuyết cần được áp dụng ngay qua bài tập cụ thể. Sử dụng trình soạn thảo văn bản đơn giản như Notepad giúp hiểu rõ cú pháp. Sau đó chuyển sang công cụ WYSIWYG như FrontPage hoặc TextPad để tăng hiệu suất. Phương pháp học theo dự án rất hiệu quả. Sinh viên xây dựng trang web hoàn chỉnh từ đầu. Qua đó nắm vững toàn bộ quy trình từ thiết kế đến triển khai. Học nhóm cũng là giải pháp tốt. Trao đổi kiến thức giúp khắc phục điểm yếu cá nhân. Ngoài ra, tham khảo tài liệu trực tuyến và cộng đồng lập trình viên rất hữu ích. Các diễn đàn, blog chuyên về HTML cung cấp giải pháp cho vấn đề thường gặp. Giáo trình nên kết hợp bài tập thực tế như tạo portfolio cá nhân. Điều này vừa rèn kỹ năng vừa xây dựng sản phẩm có giá trị.

3.1. Xây dựng lộ trình học HTML từ cơ bản đến nâng cao

Lộ trình học HTML nên bắt đầu từ các thẻ cơ bản. Bao gồm tiêu đề, đoạn văn, danh sách và liên kết. Tiếp theo là bảng biểu và form nhập liệu. Giai đoạn nâng cao bao gồm nhúng đa phương tiện và HTML5 semantic. Mỗi giai đoạn cần có bài tập thực hành cụ thể. Thời gian học lý tưởng là 2-3 giờ mỗi ngày. Duy trì đều đặn giúp kiến thức không bị quên. Sử dụng công cụ kiểm tra HTML validator giúp phát hiện lỗi kịp thời.

3.2. Sử dụng công cụ và tài nguyên hỗ trợ học tập

Nhiều công cụ miễn phí hỗ trợ học HTML hiệu quả. Trình soạn thảo code như Visual Studio Code có tính năng gợi ý cú pháp. DevTools tích hợp trong trình duyệt giúp kiểm tra và debug trực tiếp. Tài nguyên học tập phong phú trên mạng. W3Schools, MDN Web Docs cung cấp tài liệu chi tiết kèm ví dụ. Video hướng dẫn trên YouTube cũng là nguồn học bổ ích. Thực hành trên các nền tảng như CodePen hoặc JSFiddle cho kết quả tức thì. Điều này giúp sinh viên hiểu nhanh mối quan hệ giữa mã và hiển thị.

IV. Kết luận và ứng dụng thực tế của HTML trong thiết kế web

HTML là ngôn ngữ nền tảng không thể thiếu trong thiết kế web. Giáo trình HTML tại các trường đại học công nghệ cung cấp kiến thức vững chắc cho sinh viên. Từ việc hiểu cấu trúc thẻ cơ bản đến ứng dụng phức tạp, HTML mở ra nhiều cơ hội nghề nghiệp. Ứng dụng thực tế của HTML rất rộng rãi. Mọi trang web đều sử dụng HTML làm nền tảng. Kết hợp với CSS và JavaScript, HTML tạo nên trải nghiệm người dùng hoàn chỉnh. Các vị trí việc làm liên quan bao gồm lập trình viên front-end, thiết kế web và phát triển ứng dụng di động. HTML5 với các tính năng mới như canvas, video native và local storage mở rộng khả năng ứng dụng. Giáo trình cần cập nhật thường xuyên để bắt kịp xu hướng. Sinh viên sau khi hoàn thành môn học có thể tự tin xây dựng trang web chuyên nghiệp. Kiến thức HTML cũng là bước đệm để học các framework hiện đại như React, Angular hay Vue.js.

4.1. Ứng dụng HTML trong phát triển web hiện đại

HTML5 mang đến nhiều tính năng mạnh mẽ cho phát triển web hiện đại. Thẻ semantic như header, nav, article giúp cấu trúc trang rõ ràng. API Canvas cho phép vẽ đồ họa 2D trực tiếp trên trình duyệt. Tính năng video và audio native loại bỏ cần plugin bên thứ ba. Local storage hỗ trợ lưu trữ dữ liệu phía client. Các tính năng này được ứng dụng rộng rãi trong xây dựng ứng dụng web. Từ website tin tức, thương mại điện tử đến ứng dụng quản lý.

4.2. Cơ hội nghề nghiệp cho người giỏi HTML và thiết kế web

Nhu cầu tuyển dụng lập trình viên web luôn cao. Kiến thức HTML vững chắc là yêu cầu tối thiểu cho vị trí front-end developer. Kết hợp CSS và JavaScript, cơ hội việc làm mở rộng hơn nhiều. Các vị trí như UI/UX designer, webmaster cũng đòi hỏi hiểu biết HTML. Mức lương khởi điểm cho lập trình viên web hấp dẫn. Sau 2-3 năm kinh nghiệm, có thể đạt vị trí senior developer. HTML cũng là nền tảng để học thêm React, Angular hay Vue.js. Đây là các framework được sử dụng phổ biến hiện nay.

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

LỜI MỞ ĐẦU Ngôn ngữ Siêu văn bản HTML (Hyper Text Markup Language) là ngôn ngữ biểu diễn văn bản cho phép ta đưa vào một văn bản nhiều thuộc tính cần thiết để có thể truyền thông quảng bá trên mạng toàn cục WWW (World Wide Web). HTML cho phép ta đưa hình ảnh đồ họa vào văn bản, thay đổi cách bày trí của văn bản, và tạo những tài liệu siêu văn bản có khả năng đối thoại tương tác với người dùng. HTML chủ yếu xoay quanh khái niệm “thẻ” (tag) làm nền tảng. Một ví dụ về tag là <B>. Hầu hết các chức năng trên HTML có thẻ mở và thẻ đóng tạo thành một cặp giới hạn một đoạn văn bản. Ví dụ <B> và </B> là thẻ “bold” nghĩa là chữ béo. Toàn bộ đoạn văn bản giữa <B> và </B> sẽ được thể hiện dưới dạng chữ béo (hay chữ đậm) khi văn bản đó được xem bằng một trình duyệt tương ứng. Ví dụ <B> xin chào </B> sẽ được hiện lên là xin chào. Để tạo một siêu văn bản, ta có thể dùng bất cứ một chương trình soạn thảo nào (ví dụ: NC-Norton Commander, EDIT - của DOS, NotePad hay Write - của Windows 3.x, WordPad của Win95, WinWord 2.0, FoxPro, Borland C++ IDE, Borland Pascal IDE, FrontPage, TextPad, v.v…), chỉ cần nắm được các thẻ của HTML, và khi ghi vào đĩa thì cần lưu dưới dạng file text. Tên file có đuôi mở rộng là HTM (hoặc HTML). Song có một hạn chế là dạng văn bản khi ta soạn với khi ta xem sau này (trên WWW) không giống nhau. Chính vì lẽ đó mà nhiều hãng tung ra phần mềm soạn siêu văn bản What You See Is What You Get (WYSIWYG- cái ta thấy cũng là cái ta có được). Hãng Microsoft cũng đã tung ra một tiện ích được sử dụng rộng rãi. Ngoài ra, còn có nhiều tiện ích chuyển đổi từ dạng RTF (có thể soạn bằng WinWord hay WordPad) sang HTML, hay các phiên bản sau này của trình duyệt Web như NetScape có sẵn luôn chức năng này. Các tiện ích đó đều giống nhau ở chỗ cho phép ta gõ trực tiếp các thẻ vào văn bản nhưng cũng có thể dùng tổ hợp của thanh công cụ (toolbar), hộp thoại (dialog), thực đơn (menu) hay danh sách các lựa chọn (pop-up list). Để gạch dưới đoạn văn bản trong ví dụ vừa rồi, ta có thể gõ vào xin chào, dùng chuột chọn, rồi bấm vào nút Underline trên thanh công cụ. Văn bản sẽ tự động được chuyển thành <U>xin chào</U> (ở đây thì <U> và </U> là cặp mở/đóng của tag có chức năng giới hạn đoạn văn bản cần được gạch dưới). Ngày nay, do sự phát triển như thác lũ của mạng toàn cục, HTML cũng ngày càng trở nên phức tạp và hoàn thiện hơn để đáp ứng được những yêu cầu mới nảy sinh trong quá trình phát triển đó (như âm thanh, hình ảnh động, v. Người ta gọi đó là những phiên bản của HTML và đánh số để biểu thị. HTML 2, HTML 2+, HTML 3,… là để chỉ những phiên bản sau này. Một trong những điểm mạnh của HTML là một văn bản bất kỳ nếu tuân thủ tiêu chuẩn HTML đều có thể hiện lên màn hình hay in ra, tóm lại là hiểu được, bởi bất kỳ loại phần mềm hay máy tính nào mà người đọc có, không phân biệt trình duyệt nào (NetScape trên Windows hay Lynx trên UNIX, thậm chí cho người khiếm thị bằng phần mềm đặc biệt). Người ta còn đang tranh cãi nhiều trên Internet về HTML “tốt”. Định hướng nguyên thủy của HTML là tạo ra một phương pháp vạn năng để lưu giữ và thể hiện thông tin. Sau này người ta coi HTML như một ngôn ngữ định hướng nội dung – “trong tài liệu có gì” quan trọng hơn nhiều so với “tài liệu có đẹp không”. Tác giả rất mong nhận được sự góp ý từ bạn đọc Xin chân thành cảm ơn. 1 - Tên môn học: HTML VÀ THIẾT KẾ WEB - Mã số môn học: 3CI3 - Thời gian: Lý thuyết + thực hành 45T - Mục tiêu: Cung cấp cho học viên các kiến thức cơ bản liên quan đến ngôn ngữ HTML và thiết kế Web. - Những kiến thức cần phải được trang bị trước khi học: Có kiến thức về sử dụng máy tính. - Nội dung môn học: Chương I: NHỮNG KHÁI NIỆM CƠ SỞ. Chương II: TRÌNH BÀY TRANG. Chương III: DANH SÁCH VÀ BẢNG TRONG HTML. Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML. Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN. Chương VI: BÀY TRÍ NỀN VÀ KHUNG. Chương VII: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET. Chương VIII: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (Microsoft FrontPage 2003) - Đối tượng học: Những người cần biết các kiến thức cơ bản về HTML và Website để thiết kế Website tĩnh. - Biên soạn: Bộ môn Các hệ thống thông tin, Khoa Công nghệ thông tin, Trường ĐH Công Nghệ, ĐHQGHN. 2 MỤC LỤC LỜI MỞ ĐẦU 1 CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ . World Wide Web là gì?. Các đặc điểm của siêu văn bản . Độc lập với phần cứng và phần mềm. Độc lập với khái niệm trang và thứ tự các trang . Website và trang chủ - homepage. Soạn thảo văn bản - những vấn đề chung . Trang mã nguồn HTML và trang Web. Các quy tắc chung. Cấu trúc của một tài liệu HTML . Các phần tử HTML (HTML element). 18 CHƯƠNG II. TRÌNH BÀY TRANG . Thẻ trình bày trang . Một số thẻ chính. Các thuộc tính của thẻ trình bày trang . 26 CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML . Các kiểu danh sách . Danh sách không đánh số thứ tự. Danh sách đánh số thứ tự . Danh sách các định nghĩa. Danh sách phối hợp, lồng nhau. Khung cấu trúc . Một số lưu ý về bảng . 39 CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML. Hình ảnh tĩnh. Các thuộc tính của thẻ chèn hình ảnh. Thuộc tính ALT . Thuộc tính WIDTH và HEIGHT. Thuộc tính ALIGN . Thuộc tính VSPACE và HSPACE . CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN . Thẻ neo và mối liên kết . Thuộc tính HREF. Liên kết ra ngoài – External Links. Địa chỉ tuyệt đối. Địa chỉ tương đối . Liên kết nội tại – Internal Link . Dùng hình ảnh làm đầu mối liên kết . Thay chữ bằng hình . Image Map - thẻ AREA. Đưa âm thanh vào tài liệu . Liên kết đến tệp âm thanh . Tạo âm thanh nền. Đưa Video vào tài liệu . Chèn tệp Video. Nhúng tệp video . 49 CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG. Màu nền và văn bản . Đặt màu nền . Màu chữ của văn bản. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK . Thuộc tính và mã màu . Nạp hình ảnh làm nền cho trang văn bản. Thuộc tính BACKGROUND. Hãy ký tên vào tài liệu của mình . Trang trí khung . Thành phần FRAMESET. Thiết lập Target, thẻ NOFRAME và IFRAME . Thiết lập Target. Nhúng frame - thẻ IFRAME . 60 CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET .Các thành phần trong FORM . Thêm tính cấu trúc cho FORM. Cascading style sheet . Giới thiệu Style Sheet . Javascript Style Sheet . Thuật ngữ Style Sheet . Các chú thích trong Style Sheet . Lợi ích của các Style Sheet. Kết hợp Style Sheet với HTML . Thứ tự ưu tiên của các style (Cascading) . 96 CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) . Tạo một trang Web. Bắt đầu sử dụng FrontPage2003 . Tạo một trang từ một template. Tạo và lưu một trang mới. Tạo một đề mục . Chọn font và màu. Tổ chức một trang với các liên kết, danh sách và bảng . Thêm một hyperlink vào một trang Web . Tạo một danh sách . Tổ chức một trang với các bảng. Hiển thị hình ảnh trên một trang Web . Tạo một Web site mới .Khai thác site mới . Phát triển nhanh một site với các template . Chọn một template Web site . Tạo một Web site mới . Tạo tùy biến Web site mới của ta . Thêm và loại bỏ các lời chú thích. Khai thác template Personal Web Site . Thêm một tem thời gian vào một trang Web . Lưu các thay đổi sang một site. Tạo một site với sự trợ giúp của Wizard trong FrontPage 2003. Mở một wizard tạo site . Nhập một site hiện có vào FrontPage. Chọn một phương pháp import . Chọn vị trí để lưu site . Thu thập thông tin phản hồi từ các khách tham quan Web site của ta . Lưu thông tin phản hồi của khách tham quan sang một file . Nhận thông tin phản hồi của khách tham quan bằng email . 160 BẢNG CÁC TỪ VIẾT TẮT .162 TÀI LIỆU THAM KHẢO. NHỮNG KHÁI NIỆM CƠ SỞ I. World Wide Web là gì? World Wide Web (WWW) là một mạng các tài nguyên thông tin. WWW dựa trên 3 cơ chế để các tài nguyên này trở nên sẵn dùng cho người xem càng rộng rãi nhất càng tốt: - Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW (như các URL) - Các giao thức, để truy nhập tới các tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML). Các ràng buộc giữa ba cơ chế được nêu rõ dưới đây Giới thiệu về URL: Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương trình,… - có một địa chỉ mà có thể được mã hóa bởi một URL. Các URL thường gồm 3 phần: - Việc đặt tên của các cơ chế dùng để truy nhập tài nguyên - Tên của máy tính lưu trữ (tổ chức) tài nguyên - Tên của bản thân tài nguyên, như một đường dẫn Ví dụ coi URL chỉ rõ trang W3C Technical Reports: http://www.org/TR URL này có thể được đọc như sau: Có một tài liệu sẵn dùng theo giao thức HTTP, đang lưu trong máy www.org, có thể truy nhập theo đường dẫn “/TR”. Các cơ chế khác ta có thể thấy trong các tài liệu HTML bao gồm “mailto” đối với thư điện tử và “ftp” đối với FTP. Đây là một ví dụ khác về URL. Ví dụ này ám chỉ tới hộp thư (mailbox) của người dùng: ….đây là văn bản … Mọi góp ý, xin gửi thư tới <A ref=”mailto:[e-mail]”>Joe Cool</A> Các định danh đoạn (fragment identifiers): 8 Một số URL ám chỉ tới việc định vị một tài nguyên. Kiểu này của URL kết thúc với “#” theo sau bởi một dấu hiệu kết nối (gọi là các định danh đoạn). Ví dụ, đây là một URL đánh dấu một móc tên là section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: Một URL tương đối không theo cơ chế đặt tên. Đường dẫn của nó thường tham chiếu tới một tài nguyên trên cùng một máy như tài liệu hiện tại. Các URL tương đối có thể gồm các thành phần đường dẫn tương đối (như “.