Bài giảng Lập trình Web - Bài 2: Liên kết - Hình ảnh, Danh sách

12/30/2016

Liên kết – Hình ảnh

Danh sách – Bảng

DTTH

Nội dung

• Hình ảnh - Image

• Danh sách – List

• Liên kết - Link

• Bảng biểu – Table

DTTH

1

12/30/2016

Hình ảnh - Image

<IMG Src=“URL” Border=“n” Alt=”Nội dung thay thế” align={left |

right | center} vspace=“n” hspace=“m” width=“x” height=“y”>

URL: địa chỉ file hình.

Border: đường viền (pixles), n là số nguyên

Alt: chuỗi thay thế khi trình duyệt không thể hiện hình

Hspace: Khoảng cách từ văn bản đến hình chiều ngang

Vspace: Khoảng cách từ văn bản đến hình chiều dọc

width, height: Kích thước hình theo chiều rộng và chiều cao

DTTH

2

12/30/2016

DTTH

Liên kết hình ảnh – Image Link

Cú pháp:

</A>

DTTH

3

12/30/2016

Bản đồ ảnh – Image Map

Bản đồ ảnh là một ảnh trong trang web được

chia ra làm nhiều vùng, mỗi vùng khi sẽ liên kết

đến một địa chỉ URL

• Cú pháp:

<Area Shape= “type” coords=“x1,y1,…”

href=“URL”>

</Map>

DTTH

Label: tên của bản đồ ảnh

Type: hình dạng của các vùng trên ảnh:

Rect: Vùng hình chữ nhật

Circle: Vùng hình tròn

Poly: Vùng hình đa giác

Coords: toạ độ các đỉnh của hình

Rect: (x1, y1, x2, y2) toạ độ 2 đỉnh chéo hình CN

Circle: (x, y, r) toạ độ tâm và bán kính hình tròn

Poly: (x1, y1, x2, y2, x3, y3, …) tọa độ các đỉnh của vùng

hình đa giác

12/30/2016

8

DTTH

4

12/30/2016

DTTH

Danh sách - List

12/30/2016

10

DTTH

5

12/30/2016

DANH SÁCH KHÔNG CÓ THỨ TỰ(Unorder List -UL)

Cú pháp:

…

</UL>

• Circle: Bullet tròn, rỗng

• Square: Bullet vuông

• Disc: Bullet tròn không rỗng (default)

12/30/2016

11

DTTH

DANH SÁCH CÓ THỨ TỰ (OrderList – OL)

Cú pháp:

…

</OL>

Ví dụ:

12/30/2016

12

DTTH

6

12/30/2016

• x: loại ký tự muốn sử dụng trong danh sách gồm :

• A: Chữ hoa

• a: Chữ thường

• I: Số la mã hoa

• i: Số la mã thường

• 1: Cho số mặc định

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

Ví dụ:

12/30/2016

13

DTTH

Bài tập

DTTH

7

12/30/2016

DANH SÁCH ĐỊNH NGHĨA<define list - dl>

Cú pháp:

<DL>

<dt>Nhập từ muốn định nghĩa<dt>

<dd>Nhâp nội dung định nghĩa</dd>

…

</DL>

Ví dụ:

12/30/2016

15

DTTH

Liên kết - Link

• Có 2 loại liên kết:

• Liên kết ngoài (external link): liên kết đến 1 trang web

khác

Cú pháp:

• Liên kết trong (internal link): liên kết đến một phần trên

cùng trang web

Cú pháp

DTTH

8

12/30/2016

Liên kết - Link

• url: tên tập tin HTML hay website được liên kết tới

• Nhãn: tiêu đề thể hiện liên kết trên trình duyệt

• Điểm liên kết:

<a name=“tên_điểm_liên_kết”> được đánh

dấu trên phần cần tạo liên kết trong

• Liên kết rỗng: href=“#”

DTTH

Liên kết email

Cú pháp:

DTTH

9

12/30/2016

DTTH

BẢNG BIỂU - TABLE

TRÌNH BÀY TRANG - LAYOUT

12/30/2016

20

DTTH

10

12/30/2016

TẠO BẢNG:

Bảng thường được sử dụng để tạo các văn bản nhiều cột hoặc

phân chia trang thành nhiều vùng khác nhau rất tiện lợi trong

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

• Kích thước bảng n * m

3 * 4

12/30/2016

21

DTTH

<TR>

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

Dòng 1

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

…

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

</TR>

<TR>

Dòng 2

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

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

…

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

</TR>

…

</TABLE>

12/30/2016

22

DTTH

11

12/30/2016

Ví dụ

<HTML>

<HEAD>

<TITLE>TABLE</TITLE>

</HEAD>

<BODY >

<TR>

</TR>

</table>

</BODY>

</HTML>

12/30/2016

23

DTTH

CÁC THUỘC TÍNH:

Thuộc tính của bảng

….

<table>

• Border = n: đường kẻ bảng (px)

• BorderColor= “Color”: màu đường đường kẻ

• BgColor=“Color”: màu nền của bảng

• Width =“n”: chiều rộng bảng.

• Height=“m”: chiều cao bảng

12/30/2016

24

DTTH

12

12/30/2016

• Align= {left|right|center}: canh lề cho bảng

• Cellspacing =“value”>: Khoảng cách giữa đường viền của

các ô

• Cellpadding=“value”>: Khoảng cách giữa đường viền của

ô với văn bản

DTTH

CSS thuộc tính

DTTH

13

12/30/2016

DTTH

Thuộc tính của ô:

…

</td>

• Nhận các thuộc tính như bảng: bgcolor, border, …

• Align={left | center | right}: canh lề theo chiều ngang

• Valign = {top | middle | bottom}: canh lề theo chiều dọc

• Colspan=n: nối n ô trên các cột liên tiếp nhau

• RowSpan=n: nối n ô trên các hàng liên tiếp nhau

DTTH

14

12/30/2016

11

21

31

12

22

32

13

23

33

Nối cột – colspan=3

Nối hàng

Rowspan=2

22

32

23

33

DTTH

<table>

<tr>

</tr>

…

Sáng

Chiều

Anh Văn

Vẽ

Anh Văn

</table>

DTTH

15

12/30/2016

31

DTTH

16

Bài giảng Lập trình Web - Bài 2: Liên kết - Hình ảnh, Danh sách - Bảng