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

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.

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.