CHƯƠNG III DANH SÁCH pps

Giới thiệu Bảng thường được sử dụng để tạo các văn bản dạng nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau với những chủ đề khác nhau, rất tiện lợi trong thiết kế và trình b

Trang 1

CHƯƠNG III

DANH SÁCH

Trang 2

I DANH SÁCH KHÔNG CÓ THỨ TỰ

(Unorder List -UL)

<UL Type= Shape1>

<LI Type= Shape 2> Nội dung 1

<LI Type= Shape 2> Nội dung 2

…

</UL>

trong danh sách

 Các loại shape:

Trang 3

</BODY>

</HTML>

Trang 4

II DANH SÁCH CÓ THỨ TỰ

(OrderList – OL)

 Cú pháp:

<OL Type=x Start =n >

<LI Type =x1 Value=m> Nội dung 1

<LI Type =x1 Value=m> Nội dung 2

Trang 5

– n: giá trị đầu tiên của danh sách

– x1: là loại ký tự sử dụng cho dòng này và dòng tiếp theo, làm mất ảnh hưởng của x

– m: giá trị đầu tiên của dòng này, làm thay đổi giá trị của n

<LI TYPE = i>Introduction to HTML

<LI TYPE = i>Creating Lists

</OL>

Trang 6

<LI >Creating Tables

<LI >Inserting Images

</OL>

<LI>Wednesday

<LI >Creating Forms

<LI >Working with Frames

Trang 7

Ví dụ 2: Có thể lồng 2 loại danh sách có thứ tự và không có thứ tự vào nhau

<LI >Creating Tables

<LI >Inserting Images

</UL>

<LI>Wednesday

<UL type=’cycle’>

<LI >Creating Forms

<LI >Working with Frames

</UL>

</OL>

</BODY>

<HTML>

Trang 8

III DANH SÁCH ĐỊNH NGHĨA:

 Trong HTML có một tag đặc biệt dùng để tạo danh sách

định nghĩa dành riêng cho việc tra cứu, nhưng cũng

thích hợp cho loại danh sách để nối một từ với một diễn giải dài.

Trang 9

<DD>The quality of the display on a monitor The higher the resolution, the sharper the image The number of pixels that can be displayed on a screen defines resolution

Trang 11

CHƯƠNG IV

BẢNG-TRÌNH BÀY TRANG

Trang 12

I BẢNG

1. Giới thiệu

Bảng thường được sử dụng để tạo các văn bản dạng

nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau với những chủ đề khác nhau, rất tiện lợi trong

thiết kế và trình bày trang web

2. Cách tạo bảng:

– Tag <table> </table> : chỉ thị một bảng

– Tag <tr>……</tr> : xác định một dòng của bảng

– Tag <td>……</td>: xác định một ô chứa dữ liệu của

bảng Dữ liệu trong ô có thể là văn bản hoặc hình ảnh…

Trang 13

<TABLE >

<TR>

<TD>Nội dung trong ô 1</TD>

…

<TD>Nội dung trong ô n</TD>

</TR>

<TR>

Dòng 1

Dòng 2

Trang 15

3. Các thuộc tính:

<Table Border =n> …</Table>

n: độ dày của khung viền tính bằng Pixel

<Table BorderColor= “Color” BgColor=”Color”>

…

</Table>

Bóng đổ ở cạnh dưới và phải của bảng

<Table BorderColorDark= “Color”> …</Table>

Bóng đổ cạnh trên trái của bảng

<Table BorderColorLight= “Color”> …</Table>

Trang 17

 Định chiều rộng và chiều cao của bảng:

<Table Width =n height=m> …</table>

n, m là độ rộng và chiều cao tính bằng Pixel

<Table Align= left/ right/ center> …</table>

<Table CellSpacing =”value”> …</table>

Khoảng cách giữa đường viền của các ô

<Table CellPadding=”Value”> …</table>

Khoảng cách giữa đường viền của ô với văn bản

Trang 18

 Tag Caption: Dùng để tạo tiêu đề cho bảng

<Caption> tiêu đề </Caption>

Trang 19

b) Thuộc tính của cột

<Td Align=left/ right/center>…</Td>

<Td Valign= Top/ Bottom/ Middle>…</Td>

<Td Colspan=n>: trộn n cột

<Td RowSpan=n>: trộn n dòng

liệu trong ô được in đậm và canh giữa

<tr>

<th> Nội dung </th>

</tr>

Trang 22

II TRÌNH BÀY TRANG

Trong thực tế, bảng thường được sử dụng để trình bày bố cục cho toàn bộ trang web Nếu muốn thiết kế một trang thể hiện văn bản trong cột dạng báo chí hoặc phân trang

thành những vùng có chủ đề khác nhau, thì bảng là một

công cụ cần thiết Một trong những nét đặc trưng hữu dụng của bảng đó là trong mỗi table cell bạn có thể sử dụng bất

kỳ tag HTML nào, ví dụ bạn có thể chèn một tag <H1>

trong một cell hoặc một danh sách có thứ tự các mục hoặc

có thể chèn một bảng con trong một bảng khác…

Ví dụ :

Cần thiết kế trang web gồm nhiều vùng với những chủ đề khác nhau như hình dưới đây, thì bảng là công cụ rất hiệu quả

Trang 24

Bước 1: Tạo một table thứ nhất gồm 1 dòng và 2 cột

Trang 25

Bước 2: tạo table thứ 2 gồm 3 dòng và 2 cột

Trang 26

Kết quả trình bày trang

Trang 27

CHƯƠNG V

Trang 28

I GIỚI THIỆU FRAMES(KHUNG)

 Khi cần hiển thị trên trình duyệt nhiều nội dung, chủ đề

khác nhau trên cùng một trang thì một giải pháp có thể đáp ứng cho trường hợp này là frame (khung)

 Có thể phân chia một trang thành các khung, cho phép

người truy cập cùng một lúc có thể xem nhiều trang mà không cần cuốn màn hình, mỗi khung chứa một trang web riêng.

 Nếu trong trang đã sử dụng Frame thì không sử tag

Body

 Ví dụ: cần tạo một trang web mà khung bên trái chứa

các mục liên kết, bên phải hiển thị nội dung của các trang liên kết, phần trên của trang chứa logo

Trang 30

Cách thực hiện:

Trước hết ta tạo các trang web riêng: trang logo, trang

chứa các liên kết và các trang nội dung chính, sau đó đưa các trang này vào các khung của frame

Trang 32

II CÁCH TẠO FRAME LAYOUT

Trang 33

<Frame name=”Name1” Src=”Content1.htm>

…

<Frame name=”Name_n” Src=”Content_n.htm>

</Frameset>

</HTML>

Trang 34

– a, b: là độ cao của các dòng thứ 1, thứ 2 …, có thể tính

bằng pixel hoặc bằng %

– Name: tên khung, (xác định chức năng của khung)

– Content.htm: địa chỉ trang web xuất hiện đầu tiên trong

</Frameset>

</HTML>

Trang 35

 Tạo frame theo cột

Cú pháp:

<HTML>

<HEAD><TITLE>Nội dung tiêu đề</TITLE></HEAD>

<Frameset Cols=”a, b…” >

…

<Frame name=”Name_n” Src=”Content_n.htm>

</Frameset>

</HTML>

Trang 36

– a, b: là độ cao của các dòng thứ 1, thứ 2 …, có thể tính

bằng pixel hoặc bằng %

– Name: tên khung, (xác định chức năng của khung)

– Content.htm: địa chỉ trang web xuất hiện đầu tiên trong

<Frame name=”Baner” Src=”head.htm>

<Frame name=”Content1” Src=”Content1.htm>

<Frame name=”Content2” Src=”Content2.htm>

</Frameset>

</HTML>

Trang 37

III CÁC THUỘC TÍNH CỦA FRAME

 Noresize: Không đổi kích thước

 Scrolling: có/không có thanh cuộn

Auto: Xuất hiện thanh cuộn khi nội dung dài Yes: luôn xuất hiện thanh cuộn

No: không xuất hiện thanh cuộn

 Frameborder: đường viền của khung mặc định là 1, muốn

giữa các khung không còn đường viền thì trong tag Frameset nhập thêm Border=0,

Trang 38

 Marginwidth: hiệu chỉnh khoảng cách từ nội dung

đến lề trái và phải của khung (tính bằng pixel)

 Marginheight: hiệu chỉnh khoảng cách từ nội dung

đến lề trên và dưới của khung (tính bằng pixel)

Trang 39

IV LIÊN KẾT FRAME

 Trang đầu tiên của khung được chỉ ra trong thuộc tính SRC, ta có thể chỉnh các trang khác cùng xuất hiện trong khung đó bằng cách chỉ ra vị trí trang đích (Target)

 Tại trang muốn tạo liên kết với khung, ta nhập cú pháp:

<a Href=”Page.htm Target=”name”>

Nhãn mục liên kết

</a>

Trong đó :

Target=Name : tên của khung mà trang muốn liên kết

đến trong tag <Frame>

Page.htm: trang hiển thị trong khung liên kết

Trang 40

 Tag <Base>:

Nếu có nhiều liên kết đến các trang xuất hiện trong cùng một khung thì thuộc tính target mặc định đặt trong tag <Base>

 Cú pháp:

<Head>

<Base target=”name”>

</Head>

Trang 42

VI PHẦN TỬ IFRAME

tạo một khung bên trong trang bằng tag <iframe>, khi trình

duỵêt không hổ trợ thì nội dung trong IFRAME sẽ bị trả lại

<Iframe Src=”Page.htm” Name=”name” Width= x Height=y Align=left/ right>

Nội dung thay thế khi trình duyệt không chấp nhận khung

</Iframe>

Trong đó:

Page.htm: là trang đầu tiên xuất hiện trong khung

Name: tên của khung

x, y: kích thước của khung

Align: canh lề

Trang 43

VÍ DỤ:

Tiêu đề	Chương III Danh Sách pps
Trường học	Trường Đại Học Công Nghệ Thông Tin - ĐHQG Hà Nội
Chuyên ngành	Kỹ Thuật Web và Các Ngôn Ngữ Đánh Danh Sách
Thể loại	Bài viết thực hành
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	43
Dung lượng	0,91 MB