cÁc th Ẻ html c Ơ b Ảnfit.mta.edu.vn/files/danhsach/htmlbai2(20148202030).pdf · 2014. 8....

Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin

CÁC THẺ HTML CƠ BẢN

NHẬP MÔN HTML VÀ THIẾT KẾ WEB

1


� Các thẻ HTML cơ bản và � Các thẻ siêu liên kết.� Tổ chức giao bài tập lớn môn học cho các

nhóm.

NỘI DUNG


� Thẻ Headings: Sử dụng để cung cấp tiêu đề cho các nội dung trong trang web. Các thẻ tiêu đề bắt đầu từ kết bằng thẻ . Ta có thể sử dụng các thẻ tiêu đề từ H1 đến H6


Thẻ tiêu ñề

Thẻ h1 Thẻ h2 Thẻ h3 Thẻ h4 Thẻ h5 Thẻ h6


� Các thẻ mức đoạn:� Thẻ : Được dùng để hiển thị thông tin như tác

giả, địa chỉ, chữ ký trong tài liệu HTML. Thường dùng ởcuối trang với việc liên kết trang chủ, thông tin bảnquyền,


Thẻ tiêu ñề

HVKTQS - 100 Ho àng Qu ốc Vi ệt


� Các thẻ mức đoạn:� Thẻ : Dùng để hiển thị theo các định dạng xác định

trước trong mã nguồn HTML.


Thẻ HTML c ơ b ản

Trang HTML c ó tên m ở r ộng l à

.htm,

.html,

.jhtm. phtm.v.v …

nhưng tên m ở r ộng chu ẩn trongHTML l à .htm, html.


� Thẻ đoạn và ngắt:� Thẻ đoạn

…
: dùng để đánh dấu sự bắt đầu của một đoạn mới (Thẻ
có thể không cần thẻ đóng)

� Thẻ ngắt
: Bổ sung một ký tự xuống dòng� Thuộc tính canh lề: Thuộc tính align được sử dụng để

canh lề cho các phần tử HTML: văn bản, đối tượng, hình ảnh, đoạn,… Thuộc tính align nhận các giá trị:�Left: Canh trái�Right:Canh phải�Center: Canh giữa�Justify: Canh đều hai bên.

CÁC THẺ HTML


� Thẻ đoạn và ngắt:

CÁC THẺ HTML

Wellcome to HTML

Mục ñích l à nhómý t ưởng logic l ại

với nhau v à áp dụng một s ố
ñịnh d ạng n ội dung


� Thẻ khối: Thẻ và được sửdụng để nhóm nội dung với nhau:� … : Dùng để định nghĩa nội dung mức khối,

chia tài liệu thành các thành phần có liên quan với nhau. …

� Phần … : Định nghĩa nội dung trongdòng (một khoảng các ký tự)

…

CÁC THẺ HTML


� Thẻ khối:

CÁC THẺ HTML

Wellcome to HTML

Division 1

DIV ñược d ùng ñể nh óm c ác

phần t ử

DIV th ường d ùng cho kh ối

các ph ần t ử

Division2

DIV 2 canh l ề ph ải.

ðịnh d ạng chung cho t ất c ả c ác ph ần t ử trong th ẻ DIV n ày


� Các thẻ định dạng ký tự thường dùng:� … : In đậm,� < i>…: In nghiêng,� : Gạch chân,� … : Chỉ số trên� … : Chỉ số dưới� … : Nhấn mạnh văn bản� …: S/dụng trong trích dẫn mã chương trình.� …: S/dụng trong trích dẫn biến chương trình� …: S/dụng cho trích dẫn và tham chiếu.

CÁC THẺ HTML


� Danh sách: Danh sách dùng để nhóm dữliệu có logic với nhau, thường có� Danh sách không có thứ tự� Danh sách có thứ tự� Danh sách định nghĩa

CÁC THẺ HTML


� Danh sách:� Danh sách không có thứ tự (bulleted list): Danh sách được

nằm trong cặp thẻ …, mỗi phần tử trong danhsách được đánh dấu bằng thẻ … (thẻ khôngbắt buộc>

CÁC THẺ HTML

Thứ hai Thứ ba Thứ t ư Thứ n ăm Thứ sáu


� Danh sách:� Danh sách không có thứ tự (bulleted list): Thuộc tính Type

dùng để định dạng các bullets.

CÁC THẺ HTML

Thứ hai

ðọc t ài li ệu Thực h ành

Thứ ba

Coding Testing

Thứ t ư Thứ n ăm Thứ s áu


� Danh sách:� Danh sách không có thứ tự (bulleted list): Ta có thể sử

dụng các danh sách lồng nhau

CÁC THẺ HTML

Thứ hai


Thứ ba

Coding Testing



� Danh sách:� Danh sách có thứ tự: Nằm trong cặp …

CÁC THẺ HTML

Thứ hai


Thứ ba

Coding Testing



� Danh sách:� Danh sách có thứ tự: Dùng thuộc tính Type để định dạng

kiểu thứ tự, Start để xác định số khởi đầu danh sách.

CÁC THẺ HTML

Thứ hai


Thứ ba


� Danh sách:� Danh sách: Có thể lồng hai loại danh sách với nhau.

CÁC THẺ HTML

Thứ hai


Thứ ba


� Danh sách:� Danh sách định nghĩa: Danh sách định nghĩa được bao

trong cặp … và các phần tử được định nghĩatrong cặp …

CÁC THẺ HTML

Thứ hai


Thứ ba

Coding Testing



� Thẻ …: Dùng để định dạng fontchữ, sử dụng các thuộc tính sau:� Color: Màu chữ� Size: Kích thước font (từ 1 đến 7)� Face: Kiểu font chữ

� Thẻ : Vẽ đường thẳng nằm ngang.� align: Canh lề đường thẳng� width: Độ dài đường thẳng� size: Độ dày đường thẳng� Noshade:Không đổ bóng.

CÁC THẺ HTML


� … và :

CÁC THẺ HTML

h1>Tiêu ñề


� Sử dụng màu sắc:� Tên màu: sử dụng các tên màu chuẩn nhe red, blue,

green, black, …� Mã thập lục phân: Được phối từ 3 màu cơ bản

#RRGGBB. Mẫu màu được xem như bộ hai số củamàu. 00 chỉ 0% của màu và FF chỉ 100% của màu.� #FF0000: Red� #00FF00: Green� #0000FF: Blue� #000000: Black� #FFFFFF: White

CÁC THẺ HTML


� Sử dụng ảnh:� Ảnh GIF (Graphics Interchange Format - .gif): Định dạng

không phụ thuộc vào định dạng nền và hỗ trợ 256 màu. Ưuđiểm file khá dễ truyền tải, ngày cả khi kết nối với Modemtốc đôk thấp.

� Ảnh JPEG (Joint Photographic Expert Group): Ảnh JPEGnén mất thông tin, ảnh sau khi bị nén sẽ không giống ảnhgốc, nhưng quá trình phát lại ảnh gần giống ảnh gốc. Hỗ trợ16 triệu màu và sử dụng đối với ảnh thực.

� PNG (Portble Network Graphics): Nén không bỏ qua cácchi tiết và không mất thông tin. Hỗ trợ ảnh màu thực và dảimàu xám.

CÁC THẺ HTML


� : Chèn ảnh vào trang web� Src: Chỉ đường dẫn ảnh� Alt: Chuỗi text thay thế khi không có ảnh� Align: Canh lề của ảnh với văn bản xung quanh� Height: Chiều cao của ảnh� Width: Chiều rộng của ảnh

CÁC THẺ HTML


� : Chèn ảnh vào trang web

CÁC THẺ HTML

Canh l ề dưới

Canh l ề tr ái

Canh l ề gi ữa


� Thẻ marque: cho phép khai báo một chuỗi chuyểnđộng theo nhiều hướng khác nhau trên trang Web.Có 4 chiều di chuyển chuỗi tuỳ thuộc vào tham sốhướng là UP, DOWN, BACK, RIGHT.

Ashley- Ana -Chanthaly - Kathleen- Lena

Ashley
Ana
Chanthaly
Kathleen
Lena

CÁC THẺ HTML


� Thẻ liên kết: Dùng để liên kết đến mọt tài liệuhay file khác hoặc đến một phần khác trongtài liệu đó:� Một phần khác trong tài liệu.� Một tài liệu khác� Một phần trong tài liệu khác. HyperText

CÁC THẺ HTML


� Thẻ liên kết: HyperText

� Host.domain: Là địa chỉ Internet của máy chủ� Port: CỔng phục vụ của máy chủ đích� Hypertext: Văn bản hoặc hình ảnh mà người dùng

cần nhấp vào để kích hoạt liên kết.

CÁC THẺ HTML


� Thẻ liên kết:� Liên kết đến tài liệu khác

+ Sử dụng hình ảnh:


� Thẻ liên kết:� Liên kết đến tài liệu khác

+ Sử dụng hình ảnh:�Đường dẫn tuyệt đối chỉ ra đầy đủ từ thư mục gốc đến file.

C:\mydirectory\HTML\Doc2.html

�Đường dẫn tương đối chỉ ra vị trí liên quan đến file hiện tạiNext

�Chú ý: Liên kết đến các tài liệu không có liên quan thì nêndùng đường dẫn tuyệt đối . Nếu có các nhóm tài liệu liênquan với nhau thì nền dùng đường dẫn tương đối với các tàiliệu trong nhóm và đường dẫn tuyệt đối cho các tài liệu khôngliên quan trực tiếp đến chủ đề.

CÁC THẺ HTML


� Thẻ liên kết:� Liên kết đến một phần khác trong tài liệu: Dùng thẻ

neo (anchor) gồm hai phần� Đánh dấu vị trí nhày đến:Topic name

� Liên kết đến điểm đánh dấu: Topic name

Dấu “#” đặt trước tên siêu liên kết để báo cho trình duyệt biếtđây là liên kết đến một điểm trong tài liệu.

CÁC THẺ HTML


� Thẻ liên kết:� Liên kết đến một phần khác trong tài liệu khác:

Tương tự gồm hai phần :� Đánh dấu vị trí nhảy đến trên tài liệu khác:Topic name

� Liên kết đến tài liệu tại vị trí điểm đánh dấu: Topic name

� Sử dụng Email:

Welcome

CÁC THẺ HTML


THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ trong TL[1] và tìm hiểu mở rộng về HTML5.

� Nên ý tưởng thiết kế các chức năng cho bài tập lớn

BÀI TẬP

cÁc th Ẻ html c Ơ b Ảnfit.mta.edu.vn/files/danhsach/htmlbai2(20148202030).pdf · 2014. 8....

Documents