Tìm hiểu cấu trúc cơ bản của một trang web HTML4 và HTML5

Tóm tắc nội dung bài học

Trang web được thiết kế bằng thẻ (tag)

Cú pháp viết thẻ:

+ Thẻ mở đầu:

+ Thẻ kết thúc:

+ Thẻ đặc biệt:

+ Thẻ đơn:

Làm đậm nội dung văn bản

+ Thẻ phức:

Định dạng kích cỡ chữ, màu chữ, kiểu font chữ

Một số từ viết tắc trong bài học

HTML 4.0.1 (Hyper Text Markup Language Version 4.0.1)

HTML5 (Hyper Text Markup Language Version 5.0) Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 1)

Tóm tắt chức năng của một số thẻ HTML cơ bản trong bài học:

+ Thẻ

Dùng xuất ra một đoạn văn bản

- Trong thẻ p có thuộc tính align dùng để canh lề cho đoạn văn bản với align=left|right|

center|bottom

+ Thẻ
để tạo xuống dòng

cho văn bản và thẻ này là thẻ đặc biệt không có thẻ kết thúc + Thẻ dùng để làm đậm văn bản

+ Thẻ cũng để làm đậm văn bản

+ Thẻ dùng để làm nghiêng văn bản

+ Thẻ cũng dùng để làm nghiêng văn bản Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 2)

+ Thẻ Dùng để tạo gạch dưới cho văn bản

+ Thẻ ~~Dùng để tạo gạch ngang cho văn bản~~

+ Thẻ ~~Cũng dùng để tạo gạch ngang cho văn bản~~

+ Thẻ Dùng để định kích cỡ , màu, kiểu font cho văn bản với 3 thuộc tính

như:

- color="mau"

- size="kichco"

- face="kieu font"

+ Ví dụ:

Cú pháp viết thẻ font như sau: Thẻ font

dùng để định kích cỡ , màu, kiểu font cho văn bản Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 3)

Cách sử dụng thẻ tạo danh sách có thứ tự: Cú pháp:

Chuyên Viên Website Lành Nghề Online

Thiết kế Giao Diện Website Online

Lập Trình PHP Online

Lập Trình PHP Cơ Bản Online

Lập Trình PHP Nâng Cao Online

Lập Trình HTML5/CSS3/Javascript Online

? 1 2 3 4 5 6 7 8 9 10 11

+ Trong đó type là kiểu có các giá trị như: a, A, I, i + Trong đó start là thứ tự của danh sách: start='n" với n là số nguyên dương

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 4)

Tóm tắt cách sử dụng thẻ tạo danh sách không có thứ tự: Cú pháp: ? 1 2

Dreamweaver

Cơ bản

Nâng cao

Fireworks

Flash

3 4 5 6 7 8 9 10

+ Thuộc tính type có các giá trị sau: square, circle, disc

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 5)

Cú pháp viết thẻ tạo tiêu đề đoạn:

Tiêu đề đoạn cấp 1

Tiêu đề đoạn cấp 2

Tiêu đề đoạn cấp 3

Tiêu đề đoạn cấp 4

Tiêu đề đoạn cấp 5

Tiêu đề đoạn cấp 6

? 1 2 3 4 5 6

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 6)

Tóm tắc cách dùng thẻ chèn hình ảnh + Thẻ dùng để chèn hình ảnh vào trang web (chú ý đây là thẻ đặc biệt không có thẻ kết thúc ) + Thẻ có các thuộc tính cơ bản như sau: - src: Dùng để chỉ đường dẫn tới hình ảnh - width: Dùng để định độ rộng cho hình ảnh - height: Dùng để định chiều cào cho hình ảnh - border=n: Dùng định đường viền cho hình ảnh - alt: Dùng để tạo chú thích cho hình ảnh - title: Dùng để tạo tooltip khi di chuyển qua hình ảnh - hspace: Dùng để định khoảng cách từ hình đế nội dung văn bản theo chiều ngang - align="left": Dùng để canh lề hình qua bên trái, nội dung mô tả cho hình sẽ nằm bên phải Ví dụ:

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 7)

Tóm tắt cách dùng thẻ tạo siêu liên kết: Cú pháp: + Trong thẻ a có các thuộc tính thường dùng như:

- href="URL": dùng để chỉ đường dẫn tới trang web hay địa chỉ website muốn liên kết

đến

- title="Chú thích" : thuộc tính title dùng để tạo chú thích cho siêu liên kết này nói về

cái chủ đề gì

- target="_blank | self" : thuộc tính target dùng chỉ định nội dung của trang web liên

kết tới hiện ra ở đâu. Nó có các giá trị như:

_blank: dùng để mở ra cửa sổ mới. _self: dùng hiện cùng cửa sổ trình duyệt.

_top: hiện cùng cửa sổ frame (thường dùng trong trang web dạng Frame)

_parent: hiện ở cửa sổ frame cha (thường dùng trong trang web dạng Frame) Ví dụ:

Học Thiết Kế web Giá Rẻ

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 8)

Tóm tắt cách sử dụng thẻ a để tạo Email link:

+ Hãy copy đoạn nội dung văn bản ví dụ mẫu bên dưới bỏ vào trong trang chủ

(index.html) của bạn và đặt trước thẻ để thực hành bài tập này.

-------------------------------Văn bản mẫu---------------------------------

Địa chỉ: 192/2/11 Phan Văn Hân, P17, Q, Bình Thạnh, TPHCM

Điện thoại: 0945 861 290 - 0932 152 592

Email: nguyenphattai@gmail.com

Website: hocwebgiare.com

---------------------------Hãy copy đoạn này------------------------------

+ Trong trang chủ index.html chuyển qua chế độ Code, hãy dùng thẻ tạo siêu liên

kết a để tạo Email link cho địa chỉ Email trong đoạn văn bản mẫu như sau:

Địa chỉ: 192/2/11 Phan Văn Hân, P17, Q, Bình Thạnh, TPHCM

Điện thoại: 0945 861 290 - 0932 152 592

Email:

href="mailto:nguyenphattai@gmail.com">nguyenphattai@gmail.com

Website: hocwebgiare.com

+ Hãy chú ý đoạn thẻ a màu đỏ là đoạn thẻ HTML để tạo Email link

+ Phần ôn tập lại trong bài này là các bạn hãy tạo External link cho 2 địa chỉ web trong

phần Website: trong đoạn văn bản mẫu để liên kết tới 2 website này.

+ Các bạn tạo External link theo mẫu HTML bên dưới. Chú ý đoạn Code HTML màu đỏ.

Địa chỉ: 192/2/11 Phan Văn Hân, P17, Q, Bình Thạnh, TPHCM

Điện thoại: 0945 861 290 - 0932 152 592

Email:

href="mailto:nguyenphattai@gmail.com">nguyenphattai@gmail.com

Website:hocwebgiare.com

+ Sau khi thực hiện xong bạn hãy click thử vào địa chỉ Email và website xem nó có

chạy được hay không?

Tìm hiểu các thẻ html cơ bản trong thiết kế trang web (phần 9)

Tóm tắt thẻ tạo hotpot link cho hình ảnh: + Để tạo Hotpot link cho hình ảnh trong thẻ phải có thuộc tính usemap và thuộc tính này có giá trị là tên của bảng đồ hình ảnh. + Thẻ map dùng để định nghĩa bảng đồ cho hình ảnh. + Thẻ area dùng để tạo vùng chứa của hotpot. + Thuộc tính shape dùng tạo hình dáng của điểm Hotpot. + Thuộc tính coords dùng để chỉ toạ độ của hotpot. + Thuộc tính href dùng để chỉ đường dẫn tới trang web khi click vào Hotpot. + Thuộc tính alt dùng để tạo chú thích khi chuột đụng vào Hotpot. + Thuộc tính usemap chỉ định hình ảnh này có sử dụng bảng đồ hình ảnh. Ví dụ:

1 2 3 4 5 6