GIÁO TRÌNH HTML CƠ BẢN

Tài liệu tham khảo dành cho giáo viên, sinh viên cao đẳng, đại học chuyên ngành công nghệ thông tin.File HTML có thể được tạo sử dụng 1 trình soạn thảovăn bản hoặc 1 trình soạn thảo HTML WYSIWYG (WhatYou See Is What You Get). Client-side scripting (Javascript) là ngôn ngữ lập trìnhchạy trên trình duyệt. Javascript dùng để thay đổi vàđịnh dạng lại nội dung trang web sau khi trình duyệt đãhiển thị......
Nội dung trích xuất từ tài liệu:
GIÁO TRÌNH HTML CƠ BẢN KHOA CNTT - TUD KHOAHTML Trần Khải Hoàng Khoa CNTT – TỨD. ĐH Tôn Đức ThắngNội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 2Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 3Giới thiệu HTML• HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản• File HTML là 1 file văn bản chứa các các thẻ đánh dấu• Các thẻ đánh dấu sẽ báo cho trình duyệt biết cách hiển thị trang HTML• File HTML phải có đuôi HTML hoặc HTM• File HTML có thể được tạo sử dụng 1 trình soạn thảo văn bản hoặc 1 trình soạn thảo HTML WYSIWYG ( What You See Is What You Get)Ví dụ HTML• Mở notepad++, gõ đoạn văn bản sau và lưu lại dưới tên hello.html : Title of page This is my first homepage. This text is bold • Để xem kết quả, nhấn đúp vào file hello.htmlNội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 6HTML Elements• HTML là văn bản bao gồm các HTML Element• HTML Element được đánh dấu bởi các HTML Tag• Mỗi tag có 1 tên, được bao giữa 2 kí tự < và >• Tag thường đi theo cặp. Ví dụ • Thẻ đầu tiên gọi là thẻ mở (), thẻ sau gọi là thẻ đóng ()• Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Element• HTML tag không phân biệt hoa thường. giống Ví dụ về HTML Elements• Đây là 1 HTML Element This text is bold• Trong đó : – b là tên thẻ đánh dấu bắt đầu và kết thúc element – Thẻ mở – Thẻ đóng – Nội dung của HTML Element là : This text is bold – Khi hiển thị trên trình duyệt : This text is bold – Mục đích của thẻ b là in đậm văn bản nằm trong nóVí dụ về HTML Tag (tt)• Đây cũng là 1 HTML Element This is my first homepage. This text is bold • Trong đó – body là tên thẻ – Thẻ mở , thẻ đóng – Nội dung : – Mục đích thẻ bodyThis iscả các first nội dung trong trang HTML là chứa tất my Element homepage. This text is boldChú ý Mặc dầu thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa. Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web ta sẽ sử dụng chữ thường cho tất cả các thẻ HTMLNội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 11Cấu trúc trang HTMLTitle hereThẻ DOCTYPE• Mọi trang HTML đều nên bắt đầu bằng 1 thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng.• Trong ví dụ trên ta dùng XHTML 1.0 Transitional• DOCTYPE sẽ cho trình duyệt biết nên render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quirk mode) mà không theo chuẩn•Cấu trúc trang HTML đơn giản• Cấu trúc 1 trang HTML đơn giản không DOCTYPETitle here• Cách xem mã nguồn của 1 trang web : Click chuột phải , nhấn view sourceThẻ html• Thẻ html là thẻ gốc phải có trong mọi trang HTML• Thẻ html chứa nhiều nhất 1 thẻ head và chỉ 1 thẻ body• Không có thẻ nào nằm ngoài thẻ html ngoại trừ thẻ DOCTYPE• Thẻ head dùng để chứa các thông tin mô tả về trang web như loại charset đang xài (utf-8, iso-8859-1), tiêu đề, tóm tắt trang, từ khóa, tác giả, CSS, javascript ...• Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại• Thẻ body dùng để chứa tất cả nội dung thật sự của trang web (bắt buộc phải có)Tiêu đề - Thẻ h• Thẻ heading dùng để tạo các tiêu đề, đầu đề cho trang web• Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6• Theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất).• Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường. h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất• Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bảnThẻ h demo• Trình duyệt sẽ tự động thêm dòng trống trước và sau 1 headingHeading ...