HTML5 XP session 03 định dạng văn bản t2
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (624.17 KB, 22 trang )
Bài 03:
Định dạng van bản bằng thẻ
NexTGen Web
© Aptech Ltd.
Building Dynamic Web Sites / 2 of 22
Mục tiêu
Giải thích thẻ heading
Danh sách
Danh sách có thứ tự (Ordered Lists)
Danh sách không thứ tự (Unordered Lists)
Danh sách định nghĩa (Definition Lists)
Bảng
© Aptech Ltd.
Nội dung văn bản của trang web, hình thành một phần quan trọng của một web
site.
Văn bản không chỉ cung cấp tin tức mà còn phải lôi cuốn, dễ đọc, và câu nên
ngắn gọn và cô đọng cho người dùng web dễ hiểu.
Để lôi cuốn sự chú ý người dùng, cần cung cấp các tiêu đề(heading) phù hợp, áp
dụng các tùy chọn định dạng văn bản như in đậm, in nghiêng, superscript,
subscript.
Màu nền và ảnh nền của trang web có thể được chỉ ra bằng HTML.
3
HTML5/ Định dạng văn bản
Giới thiệu
© Aptech Ltd.
Các phần tử heading định nghĩa tiêu đề cho nội dung cũng như văn
bản và hình ảnh.
Xác định cấu trúc phân cấp của một trang web bằng cách nhóm các
nội dung.
HTML xác định sáu mức độ của các nhóm khác nhau, từ H1 đến H6.
4
HTML5/ Định dạng văn bản
Các phần tử tiêu đề 1-2
H1 là tiêu đề cấp cao nhất và được hiển thị với kích thước font
chữ lớn nhất
H6 là tiêu đề mức thấp nhất và được hiển thị với kích thước phông
chữ nhỏ nhất
© Aptech Ltd.
Các phần tử tiêu đề 2-2
Phần tử Heading định nghĩa các tiêu đề cho văn bản và hình ảnh.
<!doctype html>
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<BODY>
<H1>H1 Heading</H1>
<H2>H2 Heading</H2>
<H3>H3 Heading</H3>
<H4>H4 Heading</H4>
<H5>H5 Heading</H5>
<H6>H6 Heading</H6>
</BODY>
</HTML>
© Aptech Ltd.
6
HTML5/ Định dạng văn bản
Phần tử HGROUP
<hgroup> là phần
tử mới được xác định
trong HTML5
Sử dụng cho tiêu đề phụ nhiều
cấp độ có thể được phân
nhóm, tiêu đề thay thế, khẩu
hiệu vv
Nhóm một tập hợp các phần
tử H1 đến H6
Phần tử
HGROUP
Tạo ra một phác
thảo tài liệu
<hgroup>
<hl>Title of Post One </hl>
<h2>Subtitle of Post One </h2>
</hgroup>
© Aptech Ltd.
Các phần tử text
Có 5 phần tử text cơ bản
P
BR
HR
PRE
© Aptech Ltd.
Các phần tử định dạng cơ bản
Phần tử định dạng cho phép điều khiển nội dung trang Web được
hiển thị trên trình duyệt theo nhiều kiểu dạng khác nhau.
Gồm các phần tử sau:
B
Big
I
SMALL
U
<h2>Using HTML Formatting Elements</h2><br>
<b>This text is displayed in bold.</b><br>
<big>This text is displayed in larger.</big><br>
<i>This text is displayed in italic.</i><br>
<u>This text is underlined.</u><br>
<small>This text is displayed smaller.</small>
© Aptech Ltd.
Các phần tử định dạng cơ bản
Một số phần tử định dạng khác
DEL
INS
STRONG
SUB
SUP
© Aptech Ltd.
10
HTML5/ Định dạng văn bản
Định dạng một khối-blockquote
Thẻ <blockquote> tạo một đoạn được thụt vào so với lề của trình
duyệt.
Xem đoạn mã sau về thẻ <blockquote>.
<blockquote>
"When one door closes, another opens; but we often look so
long and so regretfully upon the closed door that we do not
see the one which has opened for us." -Alexander Graham
Bell
</blockquote>
© Aptech Ltd.
11
Introduction to the HTML5 / Session 2
Monospaced và Preformatted Text
© Aptech Ltd.
12
Formatting Text using Tags / Session 3
Monospaced and Preformatted Text 2-2
Following table lists some of the predefined tags and their
description.
Tag Description
<em> Used for emphasized text
<dfn> Used for definition term
<code> Used for computer code
<samp>
Used for sample output from a computer
program
<cite> Used for citation
© Aptech Ltd.
Building Dynamic Web Sites / 13 of 22
Thuộc tính style
Một style (kiểu dáng) là cách để chỉ rõ hình thức trình bày nội dung
trực quan như: màu sắc, font chữ, cỡ chữ, đường viền.
Thuộc tính style được dùng trong thẻ mở của hầu hết các thẻ.
Cách dùng:
<tênphầntử
style="thuộctính:giátrị"
>
© Aptech Ltd.
Màu nền và màu chữ
Có thể thiết lập màu cho văn bản hoặc màu nền trong trang Web bằng
thuộc tính style như sau:
Giá trị màu có thể được dùng là tên màu, giá trị hệ Hexa, hoặc giá trị
RGB
Có 3 kiểu màu chính: RGB – Red(đỏ), Green(xanh), Xanh da trời(Blue)
Mỗi màu chính được xem như một bộ hai số của hệ 16.
#RRGGBB
Số thập lục phân 00: tương ứng với 0%, còn FF tương ứng với
100%
<body style="background-color: color_name|he x_number|rgb_number;
color: colo r _name|hex_ number|rgb_nu mber">
© Aptech Ltd.
Màu nền và màu chữ
Color Names RGB Percentages RGB Values Hexadecimal Values
aqua rgb(0%,65%,65) rgb(0,160,160)
#00a0a0
black rgb(0%,0%,0%) rgb(0,0,0)
#000000
blue rgb(0%,32%,100) rgb(0,80,255)
#0050ff
gray rgb(65%,65%,65%) rgb(160,160,160)
#a0a0a0
green rgb(0%,100%,0%) rgb(0,255,0)
#00ff00
lime rgb(0%,65%,0%) rgb(0,160,0)
#00a000
maroon rgb(70%,0%,32%) rgb(176,0,80)
#b00050
navy rgb(0%,0%,65%) rgb(0,0,160)
#0000a0
olive rgb(65%,65%,0%) rgb(160,160,0)
#a0a000
purple rgb(65%,0%,65%) rgb(160,0,160)
#a000a0
red rgb(100%,0%,32%) rgb(255,0,80)
#ff0050
silver rgb(90%,90%,90%) rgb(225,225,255)
#d0d0d0
teal rgb(0%,65%,100%) rgb(0,160,255)
#00a0ff
white rgb(100%,100%,100%) rgb(255,255,255)
#ffffff
yellow rgb(100%,100%,0%) rgb(255,255,0)
#ffff00
© Aptech Ltd.
16
HTML5/ Định dạng văn bản
Ảnh nền
Ảnh nền
Chèn một hình ảnh
như là nền tảng trên
một trang web
Chọn hình ảnh với sắc
thái nhẹ hơn
Hình nền không được khuyến
khích như màu sắc văn bản có
thể ẩn các văn bản
Chọn một hình ảnh kết hợp
tốt và trông giống như một
hình ảnh duy nhất ngay cả sau
khi ốp vào
© Aptech Ltd.
Danh sách
Danh sách không thứ tự
Danh sách có thứ tự
Danh sách định nghĩa
© Aptech Ltd.
Danh sách có thứ tự
<HTML>
<HEAD>
<TITLE>Days in a Week</TITLE>
</HEAD>
<BODY>
<H1>Days in a Week:</H1>
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
</BODY>
</HTML>
© Aptech Ltd.
Chọn kiểu đánh số
Upper Roman
<LI TYPE = I>
Lower Roman
<LI TYPE = i>
Uppercase
<LI TYPE = A>
Lowercase
<LI TYPE = a>
Bắt đầu với một số khác 1
<OL START = n> [ Mặc định ]
© Aptech Ltd.
Danh sách không thứ tự
<HTML>
<HEAD>
<TITLE>Wild Animals </TITLE>
</HEAD>
<BODY>
<H1>Wild Animals</H1>
<UL>
<LI>Lion
<LI>Tiger
<LI>Leopard
<LI>Wolf
</UL>
</BODY>
</HTML>
© Aptech Ltd.
Chọn kiểu Bullet
<LI TYPE = SQUARE> bullets hình vuông
<LI TYPE = DISC> bullets hình đĩa
<LI TYPE = CIRCLE> bullets hình tròn
© Aptech Ltd.
Danh sách định nghĩa
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Sunday
<DD>The first day of the week
<DT>HTML
<DD>HyperText Markup Language
<DT>Internet
<DD>A network of networks
</DL>
</BODY>
</HTML>
