Chương 3 Ngôn ngữ HTML (Thiết kế web)

Chương III: Ngôn ngữ HTML• Tổng quan về HTML • Cấu trúc tổng quát trang HTML • Các Tag HTML thông dụng • Các thẻ ñịnh dạng danh sách... Tổng quan về HTML-HTML Hyper Text Markup Language:

Trang 1

Chương III: Ngôn ngữ HTML

• Tổng quan về HTML

• Cấu trúc tổng quát trang HTML

• Các Tag HTML thông dụng

• Các thẻ ñịnh dạng danh sách

Trang 2

Tổng quan về HTML

-HTML (Hyper Text Markup Language): ngôn ngữ

ñánh dấu siêu văn bản

- Là một ngôn ngữ ñể xây dựng một trang web

- Một trang web thông thường gồm có 2 thành phần

chính:

- Dữ liệu của trang web (văn bản, âm thanh, hình ảnh )

- Các thẻ (tag) HTML dùng ñể ñịnh dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt

Trang 3

Tổng quan về HTML (tt)

VD: Dòng chữ cần in

nội dung

- tags cho Web browser biết làm thế nào ñể hiện

trang web ra màn hình

- HTML file có ñuôi htm hoặc html

- HTML file có thể ñược tạo từ một trình soạn thảo

văn bản bất kỳ

Trang 4

Tổng quan về HTML (tt)

FrontPage or Dreamweaver (Adobe, Macromedia)

VD1:

<html>

<head>

<title> ðây là tiêu ñề trang Web </title>

Trang 5

Tổng quan về HTML Ờ thẻ HTML (Tag)

- <Tag mở> Dữ liệu <Tag ựóng>

- Vắ du^: B ~ B old, I ~ I talic, P ~ P aragraph

- đôi khi không cần Tag ựóng , <hr>

Trang 6

Trang 7

Cấu trúc tổng quát trang HTML

Trang 8

Cấu trúc tổng quát trang HTML

<html></html> : ðịnh nghĩa phạm vi của văn bản HTML

web

<title></title> : Mô tả tiêu ñề trang web

<body></body> : Xác ñịnh vùng thân của trang web, nơi chứa các thông tin

Trang 9

Trang 10

Các Tag HTML thông dụng

Các Tag xử lý văn bản Tag hình ảnh

Tag âm thanh

Trang 11

Các tag xử lý văn bản

Các thẻ ñịnh dạng khối văn bản

– Tiêu ñề (Heading) : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

– ðoạn văn bản (Paragraph):

– Danh sách (List Items): <li>

– ðường kẻ ngang (Horizontal Rules): <hr>

Các thẻ ñịnh dạng chuỗi văn bản

– ðịnh dạng chữ : , , và

– Tạo siêu liên kết : <a>

– Xuống dòng :

Trang 12

Các tag xử lý văn bản - Heading

Trang 13

Các tag xử lý văn bản (tt)

Paragraph

This is a paragraph

This is another paragraph

This is a paragraph with attribute

Trang 14

Defines a horizontal rule

– Thuộc tiunh :

• align : Canh hàng ñường kẻ ngang so với trang web

• width : Chiều dài ñường kẻ ngang

• size : Bề rộng của ñường kẻ ngang

• noshade : Không có bóng

VD:

Trang 16

Các thẻ định dạng ký tự

Chọn kiểu chữ hiển thị Cú hai tham sốsize và color Kớch thước cú thể nhận giỏtrị 1 ủến 7

ủịnh nghĩa kích thước font chữ được sửdụng cho đến hết văn bản Thẻ này chỉ

có một tham số size Thẻ <BASEFONT> không có thẻ kết thúc

Trang 17

VD Các thẻ định dạng ký tự

This text is bold

This text is strong

This text is emphasized

This text is italic

This text is small

This text contains a2

This text contains x2 = a x a

Xem kết quả Display

Trang 18

VD Các thẻ định dạng ký tự

Trang 19

Các thẻ định dạng ký tự

Cú rất nhiều Tag sử dụng biến căn lề align như HR, P,

IMG,…Cỏc giỏ trị của align như sau:

Căn lề phảiRIGHT

Giữa trangCENTER

Căn lề trỏiLEFT

<CENTER>Văn bản sẽ đ−ợc căn giữa trang</CENTER>

Ngoài ra cũn cú Tag center:

Căn lề văn bản trong trang Web

Trang 20

“ ”

Mã Tên

Mô tả

Ký tự

Trang 21

ðịnh dạng văn bản trước

WYSIWYG với tag <pre>

Hiển thị ñúng dạng văn bản ñã soạn thảo

(khoảng trắng, xuống dòng, tag,…)

VD:

<pre>

This text is

in a fixed-pitch font, and it preserves

line breaks

</pre>

Trang 23

Sử dụng màu sắc

Giá trị màu ñược xác ñịnh:

# RR GG BB

RR : Màu ñỏ

GG : Màu xanh lá cây

BB : Màu xanh nước biển Giá trị màu trong hệ thập lục phân 0->F

Trang 24

RED DARKRED GREEN LIGHTGREEN BLUE

YELLOW LIGHTYELLOW WHITE

BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE

Trang 25

http://www.w3schools.com/tags/ref_colornames.asp

Trang 26

Mau BLUE

Mau

"112233"

</body>

Trang 27

Tag hình ảnh

<img> : Không có thẻ ñóng

Các thuộc tiunh chính của tag <img>:

– Position : Top, Bottom, Middle

– Border : ðộ dày nét viền quanh ảnh (default=0)

ðặt ảnh nền cho trang web

– Sử du^ng thẻ <body Background=‘Image Path’>

Trang 28

</body>

</html>

Trang 29

Tag âm thanh

<bgsound> : Không có tag ñóng

Thuộc tiunh của tag <bgsound>

Trang 30

Trang 31

<LI> Môc thø nhÊt

<LI> Môc thø hai

</UL>

<LI>Muc thu nhat

<LI>Muc thu hai

<LI>Muc thu ba

</OL>

Trang 33

Một số thẻ thông dụng

<BODY

LINK = COLORALINK = COLORVLINK = COLORBACKGROUND = URLBGCOLOR = COLOR

TOPMARGIN = PIXELSRIGHTMARGIN = PIXELSLEFTMARGIN = PIXELS

>

Nội dung trong BODY

</BODY>

Thẻ BODY

Trang 34

<a href="315.htm">Một cái

LINK chưa mở</a>

<a href="3_5.htm">Một cái LINK

Trang 35

SIZE = nWIDTH = width

>

<FONTFACE = font-nameCOLOR = color

Trang 36

WIDTH = width HEIGHT = height HSPACE = hspace VSPACE = vspace

>

Align-type : TOP, MIDDLE, BOTTOM, LEFT, RIGHT

Trang 37

ðịnh dạng

font cỡ 4 và màu NAVY

Trang 41

Link ñến một ñoạn chỉ ñịnh trong trang hiện hành

< a name="Web "></a>3 Frontpage

Nội dung dai 5 trang

</body>

Trang 42

Một số thẻ thông dụng

Mọi chi tiết xin liên hệ với chúng tôi qua

<Ahref=”mailto:webmaster@vnuh.edu.vn” >

Trang 43

BEHAVIOR = ALTERNATE | SCROLL | SLIDE

DIRECTION = DOWN | LEFT | RIGHT | UP

LOOP = string

SCROLLAMOUNT=long

SCROLLDELAY=long> Dòng chữ cần chạy

</MARQUEE>

Trang 44

> Chào mừng các bạn ñã ñến với trang web của tôi

</MARQUEE>

</body>

Trang 45

Tự ñộng refresh/redirect trang web

Tự ñộng chuyển hướng trang web sang trang web khác (URL) sau một khoảng

thời gian t (tính theo giây)

Định dạng
Số trang	45
Dung lượng	620,38 KB