Giáo trình thiết kế web cơ bản

Hoc thiet ke web co ban tu A den Z voi giao trinh chi tiet. Nang cao ky nang lap trinh web, HTML, CSS va JavaScript hieu qua cho nguoi moi bat dau.

• Trường học: Trường cao đẳng kỹ thuật lý tự trọng thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Thiết kế web cơ bản
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2006 - 2007
• Địa điểm: Hồ Chí Minh

Mục lục chi tiết

• 1. CHƯƠNG 1: GIỚI THIỆU KHÁI QUÁT VỀ TRANG WEB
• 1.1. Các khái niệm cơ bản
• 1.2. Giới thiệu khái quát về Web
• 1.2.1. HTML là gì?
• 1.2.2. Tag HTML là gì?
• 1.2.3. Ta có thể làm gì trên file HTML
• 1.3. Cấu trúc cơ bản của trang Web
• 1.4. Các TAG căn bản trong HTML
• 1.4.1. Phân loại các TAG
• 1.4.2. <Title>
• 1.4.3. <P>
• 1.4.4. <BR>
• 1.4.5. <HR>
• 1.4.6. <FONT>
• 1.4.7. <BODY>
• 1.4.8. <Img>
• 1.4.9. <BgSound>
• 1.4.10. <Marquee>
• 1.4.11. Thẻ chú thích
• 1.4.12. Một số thẻ mức logic
• 1.4.13. Sử dụng các ký tự đặc biệt
• 1.4.14. <PRE>
• 1.4.15. <DIV> <SPAN>
• 1.5. Hiển thị trang web
• 1.5.1. Một số thao tác trong cửa sổ trình duyệt

Tóm tắt

I. Hướng dẫn tổng quan về giáo trình thiết kế web cơ bản

Giáo trình thiết kế web cơ bản là tài liệu nền tảng cho bất kỳ ai muốn bước vào lĩnh vực phát triển web. Nội dung này cung cấp một cái nhìn tổng quan, hệ thống hóa kiến thức từ những khái niệm sơ khai đến các kỹ năng thực hành đầu tiên. Việc nắm vững các nguyên tắc cơ bản không chỉ giúp xây dựng những trang web đầu tiên mà còn tạo ra một tiền đề vững chắc để tiếp cận các công nghệ phức tạp hơn. Một lộ trình học thiết kế web rõ ràng sẽ bắt đầu bằng việc hiểu rõ các thành phần cấu thành nên một trang web, cách chúng tương tác với nhau và vai trò của người thiết kế. Theo tài liệu gốc, một trang web về cơ bản là "một file văn bản đơn giản được lưu với đuôi .html hoặc .htm" chứa các thẻ (tags) đặc biệt mà trình duyệt có thể thông dịch. Khái niệm này tuy đơn giản nhưng là cốt lõi của toàn bộ World Wide Web. Giáo trình này sẽ đi sâu vào ba trụ cột chính: HTML để xây dựng cấu trúc, CSS để định hình phong cách và JavaScript để tạo ra sự tương tác. Đây là bộ ba công nghệ không thể thiếu trong lập trình web front-end. Hơn nữa, việc hiểu đúng về cấu trúc website và các nguyên lý thiết kế web ngay từ đầu sẽ quyết định đến chất lượng sản phẩm cuối cùng, đảm bảo trang web không chỉ hoạt động tốt mà còn mang lại trải nghiệm tích cực cho người dùng. Bắt đầu với một nền tảng kiến thức vững chắc là chìa khóa để tự học thiết kế web thành công.

1.1. Tổng quan về thiết kế web cho người mới bắt đầu

Thiết kế web là quá trình tạo ra giao diện và trải nghiệm người dùng cho một trang web. Đối với thiết kế web cho người mới bắt đầu, điều quan trọng là phải hiểu sự khác biệt giữa thiết kế (design) và lập trình (development). Thiết kế tập trung vào giao diện người dùng (UI) và trải nghiệm người dùng (UX), bao gồm việc lên bố cục website, chọn lựa màu sắc trong thiết kế, và typography web. Trong khi đó, lập trình là quá trình biến những thiết kế đó thành một trang web hoạt động bằng mã nguồn. Giáo trình cơ bản sẽ tập trung vào các công nghệ phía client (front-end), nơi người dùng tương tác trực tiếp. Các khái niệm ban đầu như mô hình Client-Server, giao thức TCP/IP, và World Wide Web (WWW) là những kiến thức nền tảng giúp hiểu cách một trang web được truy cập và hiển thị trên toàn cầu. Việc này tạo ra một bối cảnh rộng lớn hơn cho các kỹ năng kỹ thuật sắp được học.

1.2. Vai trò của lộ trình học thiết kế web chuyên nghiệp

Một lộ trình học thiết kế web có cấu trúc là yếu tố then chốt để tránh bị quá tải thông tin. Thay vì học một cách rời rạc, một lộ trình bài bản giúp người học đi từ dễ đến khó, từ lý thuyết đến thực hành. Lộ trình này thường bắt đầu với HTML cơ bản để tạo ra khung sườn, tiếp theo là CSS cơ bản để trang trí và làm đẹp, và cuối cùng là JavaScript cho người mới bắt đầu để thêm các chức năng động. Việc tuân theo một lộ trình giúp đảm bảo không bỏ sót các kiến thức quan trọng và xây dựng kỹ năng một cách logic. Nó cũng giúp người học tự tin hơn khi đối mặt với các dự án thực tế, vì họ biết mình đã có một nền tảng kiến thức toàn diện và có hệ thống.

II. Thách thức thường gặp khi tự học thiết kế web cơ bản

Việc tự học thiết kế web mang lại sự linh hoạt nhưng cũng đi kèm với nhiều thách thức. Một trong những khó khăn lớn nhất là cảm giác bị "ngợp" trước một lượng kiến thức khổng lồ. Internet có vô số tài liệu, hướng dẫn và các khóa học thiết kế web, nhưng không phải tất cả đều chất lượng hoặc phù hợp với người mới. Người học dễ bị lạc lối, không biết nên bắt đầu từ đâu và học theo thứ tự nào. Thách thức thứ hai là rào cản kỹ thuật. Việc làm quen với cú pháp của HTML, CSS và JavaScript đòi hỏi sự kiên nhẫn và thực hành liên tục. Theo Giáo trình Thiết kế Web Cơ bản (2007), một lỗi cú pháp nhỏ trong HTML có thể được trình duyệt bỏ qua, nhưng "nếu chúng ta viết một tag sai thì nội dung bên trong tag đó không làm gì cả". Điều này nhấn mạnh tầm quan trọng của việc học đúng ngay từ đầu. Cuối cùng, một thách thức không kém phần quan trọng là cân bằng giữa kỹ thuật và mỹ thuật. Một trang web không chỉ cần hoạt động đúng chức năng mà còn phải có thẩm mỹ và dễ sử dụng. Việc nắm bắt các nguyên lý thiết kế web, đặc biệt là các khái niệm về UI/UX là gì, thường khó hơn việc học thuộc các thẻ HTML. Vượt qua những rào cản này đòi hỏi một kế hoạch học tập rõ ràng và sự kiên trì.

2.1. Khó khăn trong việc tìm kiếm khóa học thiết kế web uy tín

Thị trường hiện nay có vô vàn khóa học thiết kế web, từ miễn phí đến trả phí, khiến người mới bắt đầu bối rối trong việc lựa chọn. Một khóa học không tốt có thể cung cấp kiến thức lỗi thời, thiếu hệ thống hoặc không tập trung vào thực hành. Ngược lại, một khóa học uy tín sẽ cung cấp một lộ trình học thiết kế web rõ ràng, tài liệu chất lượng, và sự hỗ trợ từ giảng viên. Khó khăn nằm ở việc đánh giá chất lượng của một khóa học trước khi tham gia. Người học cần nghiên cứu kỹ lưỡng, đọc các bài đánh giá, và tìm hiểu về chương trình giảng dạy để đảm bảo khóa học đó phù hợp với mục tiêu và trình độ của mình.

2.2. Rào cản kỹ thuật với HTML cơ bản và CSS cơ bản

Mặc dù HTML cơ bản và CSS cơ bản được coi là những ngôn ngữ dễ tiếp cận, chúng vẫn có thể gây khó khăn cho người mới. HTML yêu cầu sự chính xác về cấu trúc thẻ lồng nhau, trong khi CSS có thể trở nên phức tạp với các khái niệm như selectors, specificity, và box model. Người học thường gặp vấn đề khi bố cục website không hiển thị như mong muốn, hoặc các thuộc tính CSS không được áp dụng đúng cách. Vượt qua rào cản này đòi hỏi việc thực hành thường xuyên, sử dụng các công cụ gỡ lỗi của trình duyệt (Developer Tools) và tìm hiểu sâu hơn về cách trình duyệt diễn giải mã HTML và CSS. Việc xây dựng các dự án nhỏ từ đầu là cách tốt nhất để củng cố kiến thức.

III. Phương pháp xây dựng nền tảng thiết kế web vững chắc

Để xây dựng một nền tảng vững chắc trong thiết kế web cho người mới bắt đầu, phương pháp tiếp cận phải có hệ thống và tập trung vào các công nghệ cốt lõi. Bước đầu tiên và quan trọng nhất là làm chủ HTML cơ bản. HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, có vai trò định hình cấu trúc website. Theo tài liệu tham khảo, cấu trúc cơ bản của một trang web bao gồm hai phần chính: <HEAD> chứa thông tin của trang và <BODY> chứa nội dung hiển thị. Toàn bộ được bao bọc bởi thẻ <HTML>. Việc hiểu và sử dụng thành thạo các thẻ ngữ nghĩa (semantic tags) như <header>, <footer>, <article>, <nav> sẽ giúp trang web không chỉ có cấu trúc rõ ràng mà còn tốt cho SEO. Sau khi đã có khung sườn, bước tiếp theo là sử dụng CSS cơ bản để định dạng và trang trí. CSS (Cascading Style Sheets) cho phép kiểm soát mọi khía cạnh về mặt hình ảnh, từ màu sắc trong thiết kế, typography web, đến bố cục website. Việc học CSS nên bắt đầu từ các selectors cơ bản, các thuộc tính phổ biến, sau đó tiến tới các kỹ thuật bố cục hiện đại như Flexbox và Grid. Cuối cùng, JavaScript cho người mới bắt đầu sẽ thổi hồn vào trang web, tạo ra sự tương tác và trải nghiệm động cho người dùng. JavaScript có thể xử lý các sự kiện, thay đổi nội dung trang mà không cần tải lại, và giao tiếp với máy chủ. Nắm vững ba công nghệ này là yêu cầu bắt buộc để trở thành một nhà lập trình web front-end.

3.1. Xây dựng cấu trúc website với các thẻ HTML cơ bản

HTML cơ bản là khởi đầu của mọi trang web. Người học cần nắm vững các thẻ thiết yếu để tạo ra một cấu trúc website hợp lý. Các thẻ tiêu đề từ <H1> đến <H6> dùng để phân cấp nội dung. Thẻ <P> dùng cho các đoạn văn bản. Thẻ <A> tạo siêu liên kết, là nền tảng của World Wide Web. Các thẻ danh sách như <UL> (không thứ tự) và <OL> (có thứ tự) kết hợp với <LI> giúp trình bày thông tin một cách có tổ chức. Ngoài ra, thẻ <IMG> dùng để chèn hình ảnh, và thẻ <TABLE> dùng để hiển thị dữ liệu dạng bảng. Việc thực hành xây dựng các trang đơn giản chỉ với HTML sẽ giúp củng cố sự hiểu biết về vai trò của từng thẻ.

3.2. Định hình phong cách với CSS cơ bản và typography web

CSS cơ bản mang lại sức mạnh biến đổi một tài liệu HTML thô sơ thành một tác phẩm có thẩm mỹ. Người học cần làm quen với ba cách nhúng CSS: inline, internal và external. Trong đó, external stylesheet là phương pháp được khuyến khích nhất để quản lý mã nguồn hiệu quả. Các thuộc tính CSS quan trọng cần nắm vững bao gồm color và background-color để quản lý màu sắc trong thiết kế, cùng với font-family, font-size, font-weight để kiểm soát typography web. Hiểu rõ về Box Model (content, padding, border, margin) là chìa khóa để kiểm soát không gian và bố cục website.

3.3. Thêm tính tương tác với JavaScript cho người mới bắt đầu

JavaScript cho người mới bắt đầu mở ra một thế giới hoàn toàn mới về tính tương tác. Khóa học cơ bản sẽ giới thiệu về các khái niệm cốt lõi như biến (variables), kiểu dữ liệu (data types), toán tử (operators), câu lệnh điều kiện (if/else), và vòng lặp (loops). Quan trọng hơn, người học cần hiểu về DOM (Document Object Model), một giao diện lập trình cho phép JavaScript truy cập và thay đổi các phần tử HTML trên trang. Bằng cách thao tác với DOM, lập trình viên có thể tạo ra các hiệu ứng, xác thực biểu mẫu (forms), và cập nhật nội dung trang một cách linh hoạt.

IV. Bí quyết thiết kế web hiệu quả và các công cụ hỗ trợ

Một giáo trình thiết kế web cơ bản hoàn chỉnh không chỉ dừng lại ở việc viết mã mà còn phải trang bị các nguyên lý thiết kế web và kỹ năng sử dụng công cụ thiết kế web hiện đại. Thiết kế hiệu quả là sự kết hợp hài hòa giữa thẩm mỹ và công năng. Nguyên tắc cốt lõi là tập trung vào người dùng, tức là thực hành thiết kế UI/UX. UI/UX là gì? UI (User Interface) là giao diện người dùng, bao gồm tất cả các yếu tố hình ảnh như nút bấm, biểu tượng, và bố cục website. Một UI tốt phải sạch sẽ, nhất quán và hấp dẫn. UX (User Experience) là trải nghiệm người dùng, đề cập đến cảm nhận tổng thể của người dùng khi tương tác với trang web. Một UX tốt đảm bảo trang web dễ sử dụng, hữu ích và mang lại giá trị. Để hiện thực hóa các ý tưởng thiết kế, các công cụ chuyên dụng đóng vai trò cực kỳ quan trọng. Thay vì chỉ sử dụng các công cụ cũ như Dreamweaver được đề cập trong tài liệu gốc, các nhà thiết kế hiện đại ưa chuộng các phần mềm như Figma và Adobe XD. Chúng cho phép tạo ra các mẫu thiết kế (mockup) và mẫu thử tương tác (prototype) một cách trực quan trước khi viết mã. Đối với việc lập trình, một trình soạn thảo mã nguồn mạnh mẽ như Visual Studio Code là không thể thiếu. Nó cung cấp các tính năng như tô màu cú pháp, gợi ý mã, và tích hợp các tiện ích mở rộng giúp tăng tốc độ và hiệu quả công việc.

4.1. Tìm hiểu các nguyên lý thiết kế web và bố cục website

Các nguyên lý thiết kế web là những quy tắc nền tảng giúp tạo ra một giao diện hài hòa và hiệu quả. Các nguyên tắc này bao gồm: hệ thống phân cấp thị giác (visual hierarchy) để hướng sự chú ý của người dùng đến các yếu tố quan trọng; sự cân bằng (balance) để tạo cảm giác ổn định; sự tương phản (contrast) để làm nổi bật các thành phần; và không gian trắng (whitespace) để giao diện thoáng đãng và dễ đọc. Việc áp dụng các nguyên tắc này vào bố cục website sẽ tạo ra một cấu trúc logic và dễ điều hướng, giúp người dùng tìm thấy thông tin họ cần một cách nhanh chóng.

4.2. Giới thiệu về các công cụ thiết kế web Figma và Adobe XD

Các công cụ thiết kế web hiện đại đã thay đổi hoàn toàn quy trình làm việc. Figma là một công cụ dựa trên nền tảng web, nổi bật với khả năng cộng tác theo thời gian thực, cho phép nhiều người cùng làm việc trên một tệp thiết kế. Adobe XD là một lựa chọn mạnh mẽ khác, tích hợp tốt với hệ sinh thái của Adobe. Cả hai công cụ này đều cho phép nhà thiết kế tạo ra các wireframe, mockup và prototype có độ trung thực cao. Chúng giúp trực quan hóa ý tưởng, thử nghiệm các luồng người dùng và nhận phản hồi sớm trước khi bắt đầu giai đoạn lập trình web front-end.

4.3. Lựa chọn trình soạn thảo mã nguồn Visual Studio Code

Visual Studio Code (VS Code) đã trở thành trình soạn thảo mã nguồn tiêu chuẩn trong ngành phát triển web. Đây là một công cụ miễn phí, mạnh mẽ và có khả năng tùy biến cao. VS Code hỗ trợ hàng trăm ngôn ngữ lập trình và cung cấp một hệ sinh thái tiện ích mở rộng (extensions) phong phú. Các tiện ích như Live Server, Prettier, và ESLint giúp tự động hóa các tác vụ lặp đi lặp lại, định dạng mã nguồn nhất quán và phát hiện lỗi sớm, từ đó cải thiện đáng kể năng suất của lập trình viên.

V. Ứng dụng phương pháp thiết kế web responsive hiện đại

Trong bối cảnh người dùng truy cập internet từ vô số thiết bị với kích thước màn hình khác nhau, thiết kế web responsive (thiết kế đáp ứng) không còn là một lựa chọn mà đã trở thành một yêu cầu bắt buộc. Đây là phương pháp tiếp cận nhằm đảm bảo trang web hiển thị và hoạt động tốt trên mọi thiết bị, từ máy tính để bàn, máy tính bảng đến điện thoại di động. Một trang web responsive sẽ tự động điều chỉnh bố cục website, kích thước hình ảnh và cỡ chữ để phù hợp với không gian hiển thị của thiết bị. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn là một yếu tố quan trọng được các công cụ tìm kiếm như Google đánh giá cao, ảnh hưởng trực tiếp đến thứ hạng SEO. Việc triển khai thiết kế web responsive dựa trên ba kỹ thuật chính: lưới linh hoạt (flexible grid), hình ảnh linh hoạt (fluid images), và media queries. Lưới linh hoạt sử dụng các đơn vị tương đối như phần trăm (%) thay vì các đơn vị cố định như pixel (px) để các cột bố cục có thể co giãn theo kích thước màn hình. Hình ảnh linh hoạt đảm bảo hình ảnh không bị tràn ra ngoài vùng chứa của chúng. Cuối cùng, media queries là các quy tắc CSS cho phép áp dụng các kiểu định dạng khác nhau dựa trên các đặc điểm của thiết bị như chiều rộng màn hình. Việc nắm vững kỹ thuật này là một phần không thể thiếu trong bất kỳ giáo trình thiết kế web cơ bản nào ngày nay.

5.1. Tầm quan trọng của thiết kế web responsive trong SEO

Thiết kế web responsive có ảnh hưởng trực tiếp đến hiệu quả SEO. Google ưu tiên các trang web thân thiện với thiết bị di động (mobile-friendly) trong kết quả tìm kiếm của mình thông qua chỉ số Mobile-First Indexing. Một trang web responsive sử dụng cùng một URL và cùng một mã HTML cho tất cả các thiết bị, giúp Google dễ dàng thu thập dữ liệu và lập chỉ mục nội dung. Ngược lại, việc có một trang web riêng cho di động (ví dụ: m.domain.com) có thể tạo ra các vấn đề về nội dung trùng lặp và làm phức tạp quá trình quản lý. Do đó, áp dụng thiết kế đáp ứng là một chiến lược thông minh để cải thiện cả trải nghiệm người dùng và thứ hạng tìm kiếm.

5.2. Kỹ thuật Media Queries trong CSS cho người mới bắt đầu

Media Queries là công nghệ cốt lõi của thiết kế web responsive. Đây là một tính năng của CSS3 cho phép áp dụng các khối CSS chỉ khi một điều kiện nhất định được đáp ứng. Điều kiện phổ biến nhất là chiều rộng của khung nhìn (viewport). Ví dụ, một nhà thiết kế có thể viết một quy tắc để áp dụng bố cục một cột khi chiều rộng màn hình nhỏ hơn 768px (điện thoại di động), và bố cục hai cột khi chiều rộng lớn hơn 768px (máy tính bảng và máy tính để bàn). Việc sử dụng media queries giúp tạo ra các điểm ngắt (breakpoints) mà tại đó thiết kế sẽ thay đổi để tối ưu hóa cho không gian hiển thị, mang lại một trải nghiệm mượt mà và nhất quán trên mọi thiết bị.

VI. Kết luận và định hướng phát triển sau khóa học web cơ bản

Hoàn thành một giáo trình thiết kế web cơ bản là một cột mốc quan trọng, đánh dấu việc người học đã nắm vững những kiến thức nền tảng nhất. Từ việc hiểu HTML cơ bản để xây dựng cấu trúc, sử dụng CSS cơ bản để tạo phong cách, cho đến việc thêm thắt sự tương tác bằng JavaScript cho người mới bắt đầu, người học đã có đủ khả năng để tự mình xây dựng những trang web tĩnh hoàn chỉnh và responsive. Quá trình này không chỉ trang bị kỹ năng kỹ thuật mà còn rèn luyện tư duy logic, khả năng giải quyết vấn đề và óc thẩm mỹ. Tuy nhiên, thế giới công nghệ luôn vận động và phát triển không ngừng. Nền tảng cơ bản chỉ là bước khởi đầu. Để thực sự trở thành một chuyên gia lập trình web front-end, người học cần liên tục cập nhật kiến thức và khám phá các công nghệ mới. Con đường phía trước còn rất rộng mở với các thư viện và framework hiện đại, các kỹ thuật tối ưu hóa hiệu suất, và các lĩnh vực chuyên sâu hơn như phát triển back-end hay bảo mật web. Việc không ngừng học hỏi và thực hành qua các dự án thực tế là chìa khóa để tiến xa hơn trên lộ trình học thiết kế web chuyên nghiệp.

6.1. Tóm tắt các kỹ năng cốt lõi sau khi hoàn thành khóa học

Sau khi hoàn thành khóa học thiết kế web cơ bản, người học sẽ sở hữu một bộ kỹ năng cốt lõi bao gồm: khả năng phân tích yêu cầu và lên cấu trúc website logic; sử dụng thành thạo HTML và CSS để chuyển đổi một bản thiết kế (từ Figma hoặc Adobe XD) thành một trang web tĩnh; áp dụng các nguyên lý thiết kế web để tạo ra giao diện thân thiện; triển khai thiết kế web responsive để đảm bảo khả năng tương thích đa thiết bị; và viết các đoạn mã JavaScript đơn giản để xử lý sự kiện và tương tác cơ bản. Đây là nền tảng vững chắc để xây dựng portfolio và ứng tuyển các vị trí thực tập sinh hoặc junior front-end.

6.2. Các bước tiếp theo trong lộ trình học lập trình web front end

Con đường học lập trình web front-end không dừng lại ở kiến thức cơ bản. Các bước tiếp theo bao gồm việc tìm hiểu sâu hơn về JavaScript (ES6+), các khái niệm bất đồng bộ (asynchronous programming). Sau đó, người học nên tiếp cận với các thư viện và framework phổ biến như React, Angular, hoặc Vue.js. Những công cụ này giúp xây dựng các ứng dụng web phức tạp, có khả năng mở rộng một cách hiệu quả hơn. Ngoài ra, việc học về các công cụ quản lý phiên bản như Git, các bộ tiền xử lý CSS như SASS, và các công cụ đóng gói module như Webpack cũng là những kỹ năng quan trọng giúp hoàn thiện bộ công cụ của một nhà phát triển web chuyên nghiệp.

Nội dung chính

TỔNG QUAN HỌC THUẬT: GIÁO TRÌNH THIẾT KẾ WEB CƠ BẢN

Tổng quan về giáo trình (250-300 từ)

Giáo trình Thiết Kế Web Cơ Bản do Khoa Công nghệ Thông tin – Trường Cao đẳng Kỹ thuật Lý Tự Trọng TP. Hồ Chí Minh biên soạn (năm học 2006 – 2007) là tài liệu giảng dạy chính quy dành cho môn học Thiết kế Web cơ sở. Trong chương trình đào tạo chuyên ngành Công nghệ Thông tin, môn học giữ vị trí nền tảng, cung cấp những nguyên lý ban đầu về kiến trúc web, cách thức tổ chức tài liệu siêu văn bản và kỹ thuật xây dựng giao diện tương tác trên mạng Internet.

Mục tiêu học tập (Learning Outcomes) của giáo trình bao gồm:

1. Xác định và giải thích đúng các khái niệm hạ tầng mạng cơ bản: giao thức TCP/IP, địa chỉ IP, mô hình Client-Server, cổng Gateway và định dạng tài nguyên URL.
2. Viết và kiểm soát chuẩn xác mã nguồn HTML để xây dựng các thành phần giao diện: định dạng văn bản, siêu liên kết, danh sách, bảng biểu, hình ảnh, khung trang (frame) và biểu mẫu thu thập dữ liệu (form).
3. Sử dụng công cụ thiết kế trực quan Macromedia Dreamweaver để quản lý cấu trúc trang, thao tác bảng điều khiển thuộc tính (Properties Inspector), thiết lập tương tác thông qua hệ thống Behaviors và kiểm tra hợp lệ dữ liệu.

Giáo trình được cấu trúc theo tiến trình từ bản chất mã lệnh (code-level) đến thao tác tự động hóa trên công cụ (tool-level). Tài liệu tiếp cận vấn đề qua việc diễn giải chi tiết cú pháp từng thẻ tag, phân tích thông số thuộc tính, cung cấp cấu trúc mã nguồn mẫu và minh họa trực quan thông qua kết quả hiển thị trên trình duyệt. Điểm đặc thù của giáo trình là tính thực nghiệm cao, kết hợp song song giữa lý thuyết thẻ đánh dấu tĩnh với kỹ thuật điều khiển biến cố giao diện người dùng.

---

Nội dung kiến thức cốt lõi (500-600 từ)

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

Cấu trúc giáo trình bao quát từ lý thuyết ngôn ngữ HTML thuần túy đến kỹ thuật thiết kế trực quan trên phần mềm chuyên dụng:

• Chương 1: Giới thiệu khái quát về trang Web: Trình bày mô hình mạng Client-Server, hệ thống phân phối địa chỉ IP (dãy 4 số thập phân từ 0 đến 255), chức năng của Web Browser (Internet Explorer, Netscape Navigator). Giới thiệu cấu trúc chuẩn của một tệp tin HTML với các cặp thẻ <HTML>, <HEAD>, <TITLE>, <BODY>, phân loại phần tử mức khối (<H1>–<H6>, <P>, <HR>) và phần tử mức nội dòng (<FONT>, <B>, <I>, <U>, <IMG>), bảng mã màu RGB hệ thập lục phân #RRGGBB cùng các ký tự đặc biệt (>, <, ", &).
• Chương 2: Siêu liên kết (Hyperlink): Phân loại liên kết nội bộ (Internal Hyperlink) và liên kết ngoài (External Hyperlink); định dạng URL tuyệt đối và tương đối; cú pháp thẻ <A HREF="...">, cơ chế đánh dấu điểm neo nội trang bằng <A NAME="..."> và ký tự #; liên kết gửi thư điện tử với giao thức mailto: và thẻ định danh <ADDRESS>.
• Chương 3: Danh sách: Kỹ thuật xây dựng danh sách không thứ tự (<UL> với thuộc tính type="disc|circle|square"), danh sách có thứ tự (<OL> với các tùy chọn đánh số Ả Rập, chữ cái La Mã hoa/thường và thuộc tính start), danh sách định nghĩa (<DL>, <DT>, <DD>) và phương pháp lồng ghép danh sách đa tầng.
• Chương 4: Bảng và hình ảnh: Cấu trúc tổ chức dữ liệu dạng lưới với thẻ <TABLE>, <TR>, <TD>, <TH>, <CAPTION>; các thuộc tính điều khiển không gian hiển thị gồm cellpadding, cellspacing, colspan, rowspan; cấu trúc phân đoạn bảng <THEAD>, <TBODY>, <TFOOT>; nguyên lý nén ảnh GIF, JPEG, PNG; chèn âm thanh <BGSOUND> và thiết lập bản đồ ảnh phía client (<MAP>, <AREA shape="rect|circle|poly">).
• Chương 5 & 16: Khung (Frame) và Framesets: Phân chia cửa sổ trình duyệt bằng thẻ <FRAMESET rows="..." cols="...">, điều khiển nội dung khung con <FRAME>, thẻ hiển thị dự phòng <NOFRAMES>, khung nội tuyến <IFRAME>; quy trình phân nhóm tệp tin, chia tách khung, thiết lập lề marginwidth, marginheight và quản lý tệp khung trên phần mềm Macromedia Dreamweaver.
• Chương 6 & 15: Biểu mẫu Form: Xây dựng giao diện nhập liệu với thẻ <FORM> (thuộc tính action, method="GET|POST"), các thành phần điều khiển <INPUT> (Text, Password, Checkbox, Radio Button, Radio Group, Submit, Reset, File Field, Image Field), vùng văn bản TextArea, danh sách thả xuống List/Menu, Jump Menu.
• Chương 14: Sử dụng Behaviors: Cơ chế gắn biến cố (Event) và hành động (Action) trên môi trường Dreamweaver; danh mục các biến cố chuẩn (onClick, onMouseOver, onMouseOut, onLoad, onChange...); kỹ thuật thay đổi thuộc tính Change Properties (ẩn/hiện lớp style.visibility, dịch chuyển tọa độ style.left) và hàm kiểm tra dữ liệu Validate Form.

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

1. Lý thuyết truyền thông mạng và web: Nguyên lý trao đổi thông tin qua giao thức TCP/IP, vai trò định tuyến của Gateway, cơ chế cung cấp dịch vụ của ISP, Web Server và phương thức phân giải tài nguyên bằng URL.
2. Nguyên tắc đánh dấu siêu văn bản: Bản chất của ngôn ngữ HTML dựa trên hệ thống quy ước thẻ đánh dấu; phân biệt thẻ đóng/mở; quy tắc lồng thẻ; nguyên lý phân chia không gian hiển thị giữa phần tử mức khối (block-level) và mức dòng (inline-level).
3. Nguyên lý thiết kế hệ thống: Quy tắc "Thống nhất và Đa dạng" (Unity and Variety) trong tổ chức bố cục, phông chữ, màu sắc; mô hình điều hướng đa cửa sổ và luồng đóng gói dữ liệu truyền tải về máy chủ web.

Kỹ năng phát triển

• Kỹ năng kỹ thuật (Technical skills): Soạn thảo mã nguồn HTML đúng cú pháp; cấu hình các tham số hiển thị, bảng mã màu, phông chữ tiếng Việt; cấu trúc bảng lồng nhau phức tạp và lập trình bản đồ điểm ảnh dựa trên hệ tọa độ toán học.
• Kỹ năng phân tích (Analytical skills): Phân tích cấu trúc phân cấp tài liệu web; bóc tách bố cục giao diện đa khung; đánh giá ưu nhược điểm của các định dạng tệp đồ họa và âm thanh để tối ưu hóa tốc độ tải trang.
• Kỹ năng thực hành chuyên môn (Practical competencies): Sử dụng thành thạo các thanh công cụ trên Macromedia Dreamweaver; thiết lập bộ website hoàn chỉnh (Site Management); thiết kế form tương tác có cơ chế tự động kiểm tra lỗi dữ liệu đầu vào.

---

Phương pháp giảng dạy và học tập (300-350 từ)

Giáo trình áp dụng phương pháp sư phạm diễn dịch kết hợp thực hành thực nghiệm (Code-to-Tool approach). Quy trình giảng dạy đi từ việc hiểu rõ bản chất mã lệnh thông qua các trình soạn thảo văn bản thuần túy (Notepad) đến việc tự động hóa thao tác bằng phần mềm thiết kế chuyên nghiệp Macromedia Dreamweaver.

Hệ thống bài tập và nghiên cứu tình huống (case studies) được xây dựng bám sát các yêu cầu thực tế:

• Case study Bảng dữ liệu địa chất: Bài tập xây dựng bảng thống kê lịch sử phun trào núi lửa ("Volumes of some well-known Volcanic Eruptions" với dữ liệu về Paricutin, Mt. Vesuvius, Mount St. Helens, Krakatoa, Long Valley, Yellowstone) nhằm rèn luyện kỹ năng gộp hàng/cột (colspan, rowspan), phân vùng <THEAD>, <TBODY>, <TFOOT> và định dạng màu sắc dòng.
• Case study Biểu mẫu dịch vụ: Thiết kế form "Đặt phòng khách sạn" đầy đủ các trường: Họ và tên, Email, Ngày đến (Ngày/Tháng/Năm), Số người, Ghi chú; tích hợp xử lý sự kiện với Behavior Validate Form (ràng buộc trường bắt buộc Required, định dạng ký tự @ cho email, giới hạn giá trị số ngày 1–31, tháng 1–12, năm 2002–2010).
• Case study Bố cục trang tin đa vùng: Thiết kế bộ trang khung "Truyện ngắn" chia 3 phân vùng (TopFrame chứa banner, LeftFrame chứa danh mục nút liên kết, MainFrame hiển thị nội dung chi tiết).

Phương pháp đánh giá kết quả học tập dựa trên sản phẩm thực hành: tính hợp lệ của cú pháp HTML, khả năng hiển thị chuẩn xác trên trình duyệt web, tính toàn vẹn của hệ thống siêu liên kết và khả năng vận hành chính xác của các biến cố kịch bản trên form dữ liệu.

Đối với hoạt động tự học, giáo trình hướng dẫn người học quy trình tự kiểm tra lỗi: sử dụng công cụ View Source để đối chiếu mã nguồn, dùng phím F5 để cập nhật hiển thị, phím F12 để kiểm tra trang trên trình duyệt thực tế, kết hợp kiểm soát các thông số trong thanh Properties Inspector.

---

Điểm nổi bật và cập nhật (250-300 từ)

Tài liệu phản ánh chuẩn mực công nghệ thiết kế giao diện web giai đoạn 2006 – 2007, lấy chuẩn HTML 4.01, trình duyệt Internet Explorer và phần mềm Macromedia Dreamweaver làm trung tâm giảng dạy. Nội dung giáo trình tích hợp các giải pháp kỹ thuật đáp ứng trực tiếp nhu cầu xây dựng website trong giai đoạn này:

• Tích hợp kịch bản tương tác phía client (Behaviors): Cung cấp hệ thống 24 biến cố chuẩn (onAbort, onBlur, onChange, onClick, onDblClick, onError, onFocus, onKeyDown, onKeyUp, onKeyPress, onLoad, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMove, onReadyStateChange, onReset, onResize, onRowEnter, onRowExit, onScroll, onSelect, onStart, onSubmit, onUnload). Cơ chế này cho phép người thiết kế tạo hiệu ứng động (thay đổi thuộc tính Change Properties, ẩn/hiện Layer, điều khiển tọa độ dịch chuyển style.left, tạo menu nhảy nhanh Jump Menu) mà không đòi hỏi phải viết mã JavaScript phức tạp từ đầu.
• Hệ thống hóa kỹ thuật xử lý đa phương tiện: Phân tích chi tiết sự khác biệt giữa thuật toán nén mất dữ liệu (lossy) của JPEG (hỗ trợ 16 triệu màu) và thuật toán nén không mất chi tiết (lossless) của GIF (hỗ trợ 256 màu, ảnh trong suốt), định dạng PNG; kỹ thuật nhúng âm thanh kỹ thuật số nền (<BGSOUND> hỗ trợ .mid, .wav, .au).
• Kỹ thuật tổ chức bố cục chuyên sâu: Hướng dẫn chi tiết phương pháp phân chia không gian hiển thị bằng bảng lồng nhau (Nested Tables) và hệ thống khung trang đa vùng (Framesets), giải quyết bài toán cố định thanh điều hướng và biểu ngữ trong môi trường web tĩnh.

---

Đối tượng sử dụng giáo trình (200-250 từ)

• Sinh viên mục tiêu: Sinh viên năm thứ nhất hoặc năm thứ hai hệ Cao đẳng và Đại học thuộc các ngành Công nghệ Thông tin, Tin học ứng dụng, Mạng máy tính và Hệ thống thông tin.
• Kiến thức tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về Tin học đại cương; thành thạo thao tác quản lý tệp tin, thư mục và đường dẫn trên hệ điều hành Windows; hiểu biết tổng quan về cách sử dụng trình duyệt web và kết nối mạng Internet.
• Giảng viên chuyên ngành: Sử dụng giáo trình làm tài liệu giảng dạy chính thức, xây dựng đề cương chi tiết môn học Thiết kế Web cơ bản, làm căn cứ thiết kế bài giảng lý thuyết và các bài thực hành định kỳ tại phòng máy tính.
• Người tự học và cán bộ kỹ thuật: Sử dụng làm tài liệu tra cứu nhanh danh mục thẻ HTML, hệ thống bảng mã màu Hex RGB, thông số thuộc tính CSS/HTML nguyên bản và cẩm nang thao tác trực quan trên phần mềm Macromedia Dreamweaver.

---

Câu hỏi thường gặp (250-300 từ)

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

Giáo trình phù hợp với sinh viên chuyên ngành Công nghệ Thông tin, kỹ thuật viên tin học và những người bắt đầu học về lập trình giao diện web từ nền tảng mã nguồn căn bản.

2. Cần kiến thức nền nào để học?

Người học chỉ cần kỹ năng sử dụng máy tính căn bản, khả năng quản lý thư mục/tệp tin trên hệ điều hành Windows và hiểu biết sơ cấp về khái niệm mạng Internet.

3. Điểm khác biệt với giáo trình khác?

Giáo trình kết hợp chặt chẽ giữa việc giải thích tường minh cú pháp mã nguồn HTML thủ công với quy trình thiết kế trực quan trên phần mềm Macromedia Dreamweaver, sử dụng hệ thống ví dụ số liệu thực tế thay vì các đoạn mã lý thuyết trừu tượng.

4. Làm sao để tự học hiệu quả?

Người học nên viết mã nguồn trực tiếp trên các trình soạn thảo đơn giản để hiểu bản chất thẻ tag trước khi sử dụng Dreamweaver; đồng thời liên tục sử dụng phím F12 để kiểm tra kết quả hiển thị trên trình duyệt và đối chiếu mã nguồn bằng chức năng View Source.

5. Có tài liệu bổ trợ nào kèm theo?

Nội dung giáo trình đã tích hợp sẵn hệ thống bảng tra cứu thuộc tính thẻ HTML, bảng đối chiếu 24 biến cố Behaviors, bảng thông số mã màu RGB thập lục phân, danh mục ký tự đặc biệt và mã nguồn mẫu cho toàn bộ các bài tập tình huống.

---

Kết luận (150 từ)

Giáo trình Thiết Kế Web Cơ Bản của Khoa Công nghệ Thông tin – Trường Cao đẳng Kỹ thuật Lý Tự Trọng TP. Hồ Chí Minh cung cấp hệ thống kiến thức nền tảng hoàn chỉnh về cấu trúc trang web tĩnh, ngôn ngữ đánh dấu HTML và kỹ thuật quản lý bố cục trực quan.

Lộ trình học tập khuyến nghị:

1. Nắm vững khái niệm mạng truyền thông, địa chỉ IP và cấu trúc thẻ văn bản cơ bản (Chương 1 – 3).
2. Làm chủ kỹ thuật tổ chức dữ liệu dạng bảng, xử lý tệp đồ họa, hệ thống khung trang và biểu mẫu (Chương 4 – 6).
3. Ứng dụng công cụ Macromedia Dreamweaver để quản lý website, thiết lập tương tác bằng Behaviors và hoàn thiện cấu trúc Frameset (Chương 13 – 16).

Để đạt hiệu quả thực hành cao nhất, người học nên trang bị môi trường phần mềm gồm Macromedia Dreamweaver, trình duyệt web Internet Explorer và bộ công cụ soạn thảo mã nguồn cục bộ.

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

CHƯƠNG 1: GIOI THEEU KHAI QUAT VE TRANG WEB 1.1, Các khái niệm cơ bản: 9 Ínternet là một mạng máy tính toàn câu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCPIP. Ímtranet đó là mạng cục bộ không nôi vào Internet và cách truyền thông của chúng cũng theo ngôn ngữ chung là TCP/IP. ~ MO hinh Client-Server: d6 la m6 hinh khach-chu. Server chira tar nguyên dùng chung cho nhiều máy khác(Client) như các tập tin, tài liệu, máy in.

Ưu điểm của mô hình này là tiết kiệm về thời gian, tài chính, đễ quản tri hé théng. “Cách hoạt động của mô hình này là máy Server ở trang thái hoạt động(24/24) và chờ yêu cầu từ phía Client. Khi Client yêu câu thì máy Server đáp ứng yêu câu đó. Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP Server.) Internet Service Provider(ISP): La noi cung cap các dịch vụ Internet cho skhach hàng.

Mỗi ISP có nhiều khách hàng và có thể có nhiêu loại địch vụ Internet khác “hau. Internet Protocol : Cac may sw dung trong mạng Internet liên lạc với nhau theo một tiêu chuẩn truyền thông gọi là. IP Address-đia chỉ IP: để việc trao đổi thông tin trọng mạng Internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân biệt với các máy khác. Theo Internet Protocol moi may tinh trong mang được định danh bằng một nhóm các số được gọi là địa chỉ IP.

Địa chỉ IP gồm 4 số thập phân có giá từ 0 đến 255 và được phân cách nhau bởi dấu chấm.1 Địa chỉ IP này có giá trị trong toàn mạng Internet. Uy ban phan phối địa chỉ IP của thế giới sẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau. Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý và phân phối lại cho các ISP. Một máy tính khi thâm nhập vào mạng Internet cân có một dia chi IP.

Địa chỉ IP có thể cấp tạp thời hoặc cấp vĩnh viễn. Thông thường các máy Client kết nỗi vao mang Internet thong qua mot ISP bang đường điện thoại. Khi kết nối, ISP sẽ cấp tạm thời một IP cho may Client. Phương thức tr uyén thông tin trong Internet: Khi một máy tính có địa chỉ TP: la _ X(máy X) gửi tin đến máy tính có địa chỉ IP là y (máy “Y) thi phuong thức tru uyễn tin cơ bản diễn ra như sau: Nếu máy X và máy Y cùng năm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp.

Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y, Máy trung gian này gọi la Gateway. World Wide Web(WWW): là một dịch vụ phô biến nhất hiện nay trên Internet. Dịch vu nay đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các piao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cân có một chương trình got la Web Browser.

Web Browser(trình duyệU: là trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. Cac trình duyệt thông thường hiện nay là Internet Explorer và Netseape Navigator. Home-pagse: là trang web: đầu tiêm trong web site: khi vào một web site nào đớ th TT” “ trang đâu tiên sẽ là trang nay.

Trang | - Khoa CNTT Giáo Trình Thiết Kế Web Cơ Bản lên web Hosting provider: là công ty hoặc tế chức đưa các trang của chúng ta Hyperlink : tên khác của hypertextlink l Publish: lam cho trang web chạy được trên mạng nguôn tài URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thê trong nguyên mạng. a truy xuất tài nguyên từ trình ® Web server là một chương trình đáp ứng lại các yêu cầu dụng cụm từ này để chỉ máy chạy chương trình server `duyệt. Người ta thường sử 712.) Giới Thiệu Khái Quát Về Web thường. Web là một ứng dụng chạy trên mạng(Client-Server), là một ứng dụng thông khắp toàn câu.

như bao ứng dụng khác, chỉ có điểm khác biệt là nó được chia sẻ hoặc htm. Trong file Trang web là một file văn bản đơn giản được lưu với đuôi .html trình duyệt web (Web văn bản đó có những tag hoặc những đọan mã đặc biệt mà. browser)có thể hiểu và thông dịch được. Có hai trình duyệt thông dụng là : Internet Explorer va Netscape Navigator Trong chương trình này ta sử dụng trình duyệt IE 1.

HTML Là Gì? < - cac - HTML là chữ viết tat cla cum th Hypertext makeup language. No la hang loat đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi một trình duyệt Web (Web Browser). mà khi ta Hyperfext là từ nói tãt của Hypertext link, là một từ hay một cụm từ biệt trí khác trong click vào đó trình duyệt web sẽ đưa ta đến một trang khác hay một vị trang web Mark up: là cách định dạng văn bản để trình duyệt hiểu vả thông dịch được. Ví dụ ta có thể đánh văn bản trong đó ta có sử dụng những đoan code ø _ Tô đậm,in nghiêng, gạch đưới đòng văn bản.

Tạo một danh sách các nút ® 6 Chèn hình ảnh vào trang web. s Chúng ta có thể làm gì với file có đuôi này ' luật dé Language: đây không hẳn là ngôn ngữ lập trình, đây chỉ là tập nhỏ những quy ta định dạng văn ban--”. Trình duyệt(Browser) và trình soạn thao(editor) trang web cài trên Trình đuyệt: là trình dùng để hiển thị trang web. nó là một ứbg dụng dược qua địa chỉ máy người dùng, có có nhiệm vụ tải các trang web từ các web site thông SỐ Các của các trang web và hiển thị chúng.

Hiện nay có rất nhiều trình duyệt hai trong trình duyệt khá phổ biến là: Netscape và Internet Explorer. soạn thảo Trình soạn thảo trang web :ø1úp ta tạo, thiết kế các trang, web. Các trình phé bién hién nay la: Notepad. FrontPage va Dreamweaver.

Tag HTML 1a gi? Các lệnh HTML được gọi là TAG. nó được dùng đẻ định dang các văn bản trên trang -XvoB. [Dạng chúng của một tap HPML là: <tagName ListProperties> Object </tlagName> ‘Urong do Trang 2 Gido Trinh Thiét Ké Web Co Ban Khoa CNTT ø. <taeName> là tên một thẻ HEMI.

ø (Object là đối tượng chúng ta can dinh dang trong trang Web, ° ListPropeties là đanh sách thuộc tính của một Tag. Thuộc tính là những dặc điểm bổ sung vào cho một tag, thứ tự các thuộc tính trong một tag thì không quan trọng: Nếu có từ 2 thuộc tính trở lên thi mỗi thuộc tính ngăn cách nhau bởi khoảng trăng. Chúng ta cần nhớ răng thuộc tính không bao giờ viết ở đầu của một tap khi đó thuộc tính này trở thành tên tag:. <TagName propety1=’valuel’ propety2=’value2’ >Object</TagName> Giá trị của thuộc tính chúng ta có thể bao bọc trong nháy đơn “ hoặc nhảy đôi ` thậm chí ta có thể không bao bọc gi.

° <TagName>goi la tag mở và </tagName> gọi là tag đóng. Thông thường thi các tag đều có tag đóng. Nếu nhu tag do khong co tag đóng mà ta viết có tag đóng cũng không sao. Chúng ta cần nhớ rằng trong tag đóng ta dùng ký tự °/.

Ký tự này báo cho Web browser biết là hiệu ứng của tag được kết thúc tại đây. Nếu chúng ta quên đi *⁄ thì hiệu ứng của tag này còn ảnh hưởng đến các đối tượng phía sau. Ví dụ I1 <body BGCOLOR="RED”> trong vi du trén BODY la TAGNAME BGCOLOR Ia property RED 1a value. <B> Dong chit in dam</B> khi trinh duyét gap doan ma nay no sé xuat ra trang web Đòng chữ in đậm.

Chúng ta có thể lồng các tag vào nhau nhưng có đều phải theo đúng thứ tự chứa nó <Tag1><Tag2>Object</Tag2></Tagl> hoặc <Tagl>Object|<Tag2>Object2 ObJect3</ Tag2></Tagl> Vị dụ 2 _<B><U>In đậm và gạch dưới</U></B> thì trình duyệt sẽ hiện thị In đâm và gạch dưới Lưu ý: một Web browser không quan tâm đến tới việc chúng ta sử dụng chữ hoa hay chữ thường trong việc viét tag Vi du nhu <B>Dong chft in dam </B> thì cũng giéng như .<b>Dong chit in dam </b> hoac <B>Dong chit in dam </b>, Không giống như việc lập trình, nếu như chúng ta có một Idi trong trang HTML. thi trinh duyét sé bo qua va van hién thi noi dung trang Web của chúng tị lên. Một điều cân lưu ý là nếu chúngta v iết một tag sai thì nội dụng bên trong + Tag 10 đó không làm gì cả (nghĩa là trình duyệt không hiểu tag nay do dé nó sẽ không dinh dang). Khi chúng ta viet m ehoano.

= ed ROaHTES < B>Dòng chữ1 Trang. 2 Giáo Trình Thiét Ké Web Co Ban — KhoaCNET 1. Ta có thể làm gì trên file HTML e Dinh dang van ban se _ Tạo danh sách øe_ Chèn hình ảnh e Tao link liên kết đến fñile khác _® Tạo, chỉnh sửa bảng # ø Tạo form nhập dữ liệu £ 1. Cấu trúc cơ ban của trang Web Một trang Web thông thường gồm có 2 phần > Phần đầu(<Head></Head>): đây là phần chứa thông tin của trang Web.

những gì viết trong phần này sẽ không hiển thị lên trang. _ Web > Phần thân (<Body></Body>): đây là phần chứa nội dung của trang những gì ta muốn thể hiện trên trang thì được viết trong cặp tag này. Ngoài ra để cho các trình duyệt hiểu đây là tài liệu HTML thì phân đầu và phần thân sé bao boc béi cap tag <HTML></HTML> | Nhu vay cấu trúc của một file html được hình thành như sau: <HTML> _ ca <HEAD> </HEAD> <BODY> Nội dung cần hiển thị được trình bảy trong đây </BODY> | : _ ⁄HTMI> 1. Cae TAG can ban trong HTML + †:4:†—Phânloạicác PFAG r2 loại Các phân tử Phần tử mức khối - Đây là các phân tử xuât hiện ở phần thân văn bản.

này có thê chứa mức khối được sử dụng để kết câu tài liệu của chúng ta. Khi các phần tử mức khôi bắt đầu ở một hàng moi, chúng ta không cân ghi thẻ kết thúc. Một sô phần tử mức khôi thông thường: Phân tiêu đề (HI đến H6) Đoạn văn bản (P) [Tạng mục danh sach (11) Đường năm ngang (TH) Phan tir mire van ban hay trong dong — Day là những phân tử chứa dữ liệu. Các phần tử này cũng có tế baø gồm các phân từ-trung dòng khác -và-không-dững dau dòng mới.

Miột số phần tư riức săn bán thông thường bao ĐÔM: - TS Khoa CNTT Giáo Trình Thiết Kế Web Cơ Bản EM, I,B và FONT (nhắn mạnh ký tự) A (liên kết đa văn bản) BR (ngắt dòng) APPLET (đối tượng được nhúng) [MG (ảnh) 1. <Title> nội-dung hiển thị trên trang Phần tử này được sử dụng để cung cấp tiêu để -cho- phân và kết thúc Web. Tat cả các phần tử tiêu đề phải có thẻ kết thúc.