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

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ư “.” nghĩa là một mức trên trong cấu trúc được định nghĩa bởi đường dẫn), và có thể bao gồm các dấu hiệu đoạn. Các URL được giải quyết để cho toàn các URL sử dụng một URL gốc.

Như một ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc “http://www.com/support/intro. URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản: <A href=”suppliers.html”>Suppliers</A> sẽ mở rộng thành URL đầy đủ “http://www.com/support/suppliers.html” trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây <IMG src=”.gif” alt=”logo”> sẽ mở rộng thành URL đầy đủ “http://www.com/icons/logo.gif” Trong HTML, các URL được dùng để: - Liên kết tới tài liệu hoặc tài nguyên khác, (xem A và LINK) - Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script) (xem LINK và SCRIPT) - Gồm một ảnh, đối tượng, hoặc applet trong một trang, (xem IMG, OBJECT, APPLET và INPUT) - Tạo một bản dồ ảnh (xem MAP và AREA) - Tạo một form (xem FORM) - Tạo một khung tài liệu (xem FRAME và IFRAME) - Trích dẫn một chỉ dẫn bên ngoài (xem Q, BLOCKQUOTE, INS và DEL) - Tham khảo các quy ước siêu dữ liệu mô tả một tài liệu (xem HEAD) 9 Ngày nay người ta dùng máy tính như một công cụ rất hữu ích để truy nhập Internet, chủ yếu là tìm kiếm thông tin. Các thông tin này có thể là các văn bản, hình ảnh âm thanh hay thông tin đa phương tiện… Với giao diện thân thiện bởi việc sử dụng các ký hiệu, biểu tượng rất gợi tả gần giống với các hình ảnh đời thường và chỉ cần những thao tác đơn giản ta đã có ngay thông tin cần tìm kiếm ở trước mặt. Nhu cầu sử dụng máy tính để truy cập Internet tìm kiếm thông tin ngày càng nhiều và người sử dụng máy tính có trình độ tin học và tiếng Anh để hiểu các thông báo của máy khác nhau.

Làm thế nào để mọi người có thể dễ dàng sử dụng máy tính để truy cập Internet như một công cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thông tin trên mạng thông tin rộng lớn nhất toàn cục. Việc này trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext). Siêu văn bản là các văn bản “thông minh” có thể giúp người đọc tìm và cung cấp cho họ các tài liệu liên quan. Người đọc không phải mất công tìm kiếm trong kho thông tin Internet vô tận.

Khái niệm siêu văn bản do nhà tin học Ted Nelson đề xuất vào năm 1965 như một ước mơ (“Computer Dreams”) về khả năng của máy tính trong tương lai. Ông hy vọng về các máy tính có trí tuệ như con người, biết cách truy tìm các thông tin cần thiết. Dự án thực hiện siêu văn bản là của một kỹ sư trẻ người Anh tên là Tim Berners – Lee. Sau khi tốt nghiệp Đại học Oxfort (Anh) năm 1976, năm 1980 Tim đã viết một chương trình mô phỏng mối liên kết hai chiều bất kỳ trên một đồ thị như kiểu liên kết siêu văn bản.

Năm 1989, trong khi làm việc tại Viện nghiên cứu kỹ thuật hạt nhân châu Âu (CERN) tại Berne (Thụy sỹ), thấy các đồng nghiệp rất vất vả trong việc tra tài liệu, Tim đã đưa ra một đề án lưu trữ siêu văn bản trên máy tính sao cho dễ dàng tìm kiếm tài liệu hơn. Trong thế giới siêu văn bản WWW, người sử dụng có thể dễ dàng đi từ tài liệu này sang tài liệu khác thông qua các mối liên kết. Như vậy ta có thể du lịch trong xa lộ thông tin phong phú trong khi vẫn ngồi tại nhà. Kỹ thuật siêu văn bản 10 giúp cho ta không phải sang tận Luvrơ ở Paris mà vẫn có thể chiêm ngưỡng được các kiệt tác hội họa.

Chính nó đã góp phần tạo ra bước phát triển bùng nổ của Internet trong những năm gần đây. HTML là gì? Để phổ biến thông tin trên toàn cục, cần một ngôn ngữ phổ biến và dễ hiểu, một kiểu việc phổ biến tiếng mẹ đẻ mà toàn bộ các máy tính có thể hiểu được. Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup Language). HTML cho tác giả các ý nghĩa để: Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh,.v… Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng,.v… Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ.

Các trang Web đầy sinh động mà bạn thấy trên World Wide Web là các trang siêu văn bản được viết bằng ngôn ngữ đánh dấu siêu văn bản hay HTML - HyperText Markup Language.