02 00-html

GIỚI THIỆU NGÔN NGỮ HTML

Thiết kế Web

Trường Cao đẳng Kinh tế - Công nghệ TP.HCMKhoa Công nghệ thông tin

Trình bày: Hà Đồng Hưng

Thiết kế Web 2

CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU

HTML HEAD TITLE BODY

Thiết kế Web 3



Xác nhận tài liệu HTML

Thiết kế Web 4

Thẻ HTML

Thẻ mở là <HTML> Thẻ đóng là </HTML> Cặp thẻ này được sử dụng để xác

nhận một tài liệu là tài liệu HTML (HyperText Markup Language).

Nội dung đặt trong cặp thẻ này sẽ sử dụng các thẻ HTML để trình bày.

Thiết kế Web 5

Thẻ <HTML>

Cú pháp<HTML>… Toàn bộ tài liệu đặt ở đây</HTML>

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tập tin văn bản bình thường.

Thiết kế Web 6



Xác định phần đầu

Thiết kế Web 7

Thẻ <HEAD> Thẻ mở <HEAD> Thẻ đóng </HEAD> Thẻ HEAD xác định phần mở đầu cho tài

liệu Thẻ HEAD nằm trong cặp thẻ <HTML> Cú pháp:

<HEAD>… Phần mở đầu (HEADER) của tài liệu đặt ở đây</HEAD>

Thiết kế Web 8



Xác định tiêu đề

Thiết kế Web 9

Thẻ <TITLE>

Thẻ mở <TITLE> Thẻ đóng </TITLE> Cặp thẻ này chỉ có thể được sử

dụng trong phần mở đầu của tài liệu

Nó phải nằm trong phạm vi giới hạn của thẻ <HEAD>

Thiết kế Web 10

Thẻ <TITLE>

Cú pháp:<TITLE> Tiêu đề của tài liệu </TITLE>

Nội dung đặt giữa cặp thẻ này sẽ được hiển thị trên thanh tiêu đề (title bar) của trình duyệt web

Thiết kế Web 11

Thẻ <TITLE>

Thiết kế Web 12



Xác định phần thân của tài

liệu

Thiết kế Web 13

Thẻ <BODY> Thẻ mở: <BODY> Thẻ đóng: </BODY> Thẻ này được sử dụng để xác định phần

nội dung chính của tài liệu. Trong phần thân có thể chứa các thông

tin định dạng nhất định được đặt trong tham số: Đặt ảnh nền cho tài liệu Màu nền Màu văn bản, siêu liên kết Lề cho trang tài liệu

Thiết kế Web 14

Thẻ <BODY> Cú pháp

<BODY>… phần nội dung chính của tài liệu

</BODY> Các thuộc tính của thẻ <BODY>

BACKGROUND: đặt ảnh nền cho trang BGCOLOR: đặt màu nền cho trang TEXT: Xác định màu chữ văn bản ALINK, VLINK, LINK: Màu sắc các siêu liên kết

Thiết kế Web 15

Cấu trúc tài liệu HTML

<HTML><HEAD>

<TITLE>tiêu đề</TITLE></HEAD><BODY Các tham số>… nội dung chính</BODY>

</HTML>

Thiết kế Web 16

Ví dụ

Thiết kế Web 17

Bài tập

Viết tập tin html để có kết quả như trên ?

- Chữ màu xanh da trời

- Nền trang màu vàng

Thiết kế Web 18

Đáp án

Thiết kế Web 19

Các thẻ định dạng khối

<P> <H1>,<H2>,…, <H6> <BR> <PRE>

Thiết kế Web 20


<P> <H1>,<H2>,…, <H6> <BR> <PRE>

Đoạn

Thiết kế Web 21

Thẻ <P>

Thẻ mở <P> Thẻ đóng </P> Cú pháp

<P> Nội dung đoạn văn bản</P> Được dùng để định dạng đánh dấu

một đoạn văn bản

Thiết kế Web 22

Thẻ <P>

Ví dụ

Thiết kế Web 23


<P> <H1>,<H2>,…, <H6> <BR> <PRE>

Đề mục

Thiết kế Web 24

Các thẻ đề mục HTML hỗ trợ 6 đề mục:

<H1>…</H1> Định dạnh đề mục cấp 1






Đề mục là chỉ dẫn định dạng về mặt logic, mỗi trình duyêt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp.

H1 > H2 > H3 > H4 > H5 > H6

Thiết kế Web 25

Các thẻ đề mục

Thiết kế Web 26


<P> <H1>,<H2>,…, <H6> <BR> <PRE>

Xuống dòng

Thiết kế Web 27

Thẻ <BR>

Thẻ này không có thẻ đóng tương ứng

Có tác dụng chuyển sang dòng mới Nội dung văn bản trong tài liệu

HTML sẽ được trình duyệt hiển thị liên tục

Để xuống dòng, sử dụng thẻ <BR>

Thiết kế Web 28

Thẻ <BR>

Do dùng các khoảng trắng, tab và enter

?

Thiết kế Web 29

Thẻ <BR>

Dùng thẻ <BR> để xuống dòng

Thiết kế Web 30


<P> <H1>,<H2>,…, <H6> <BR> <PRE>

theo định dạng trước

Thiết kế Web 31

Thẻ <PRE>

Thẻ mở <PRE> Thẻ đóng </PRE> Được dùng để giới hạn đoạn văn

bản được định dạng sẵn. Văn bản đặt giữa hai thẻ này sẽ

được thể hiện giống như khi chúng được đánh vào

Thiết kế Web 32

Thẻ <PRE>

Cú pháp:<PRE> Văn bản đã được định

dạng</PRE> Dấu xuống dòng trong đoạn văn

bản sẽ có ý nghĩa chuyển sang dòng mới

Thiết kế Web 33

Thẻ <PRE>

Ví dụ:

Thiết kế Web 34

CÁC THẺ ĐỊNH DẠNG DANH SÁCH

Danh sách không theo thứ tự(Unordered List - UL)

Danh sách theo thứ tự(Ordered List - OL)

Thành phần (mục) trong danh sách(List Item - LI)

Thiết kế Web 35

Danh sách không sắp xếp

Cú pháp:<UL>

<LI> Mục thứ nhất<LI> Mục thứ hai

</UL> Mang tính liệt kê các danh mục

Thiết kế Web 36

Ví dụ UL:

Thuộc tính TYPE=“circle/disc/square” của UL qui định ký hiệu đầu mục

Thiết kế Web 37

Danh sách sắp xếp

Cú pháp:<OL TYPE=“1/a/A/i/I”>

<LI> Mục thứ nhất<LI> Mục thứ hai

</OL> Mang tính đánh số các danh mục

Thiết kế Web 38

Ví dụ OL:

Thiết kế Web 39

Ví dụ OL:

Thiết kế Web 40

CÁC THẺ ĐỊNH DẠNG KÝ TỰ

Các thẻ định dạng in ký tự Căn lề văn bản Các ký tự đặc biệt Màu sắc Kiểu chữ Siêu liên kết Đường kẻ ngang

Thiết kế Web 41

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

<B>...</B><STRONG>…<STRONG>

In chữ đậm

<I>…</I><EM>…</EM>

In chữ nghiêng

<U>…</U> In chữ gạch chân

<S>…</S><STRIKE>…</STRIKE>

In chữ bị gạch ngang

<SUP>…</SUP> Định dạng chỉ số trên (SuperScript)

<SUB>…</SUB> Định dạng chỉ số dưới (SubScript))

<BASEFONT> Đị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=n xác định cỡ chữ

Thiết kế Web 42


Ví dụ:

Thiết kế Web 43


Bài tập:

Thiết kế Web 44

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

LEFT Căn lề trái

CENTER Căn giữa trang

RIGHT CĂn lề phải

Trong trình bày, luôn phải chú ý đến việc căn lề cho các văn bản để trang Web có bố cục đẹp. Một số thẻ như <P>, <HR>, <IMG>… đều có tham số ALIGN cho phép căn lề trong phạm vi giới hạn thẻ đó

Ngoài ra còn có thể sử dụng thẻ <CENTER> để căn giữa một khối văn bản

Cú pháp: <CENTER> văn bản sẽ được căn giữa</CENTER>

Thiết kế Web 45

Các ký tự đặc biệt Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem như một thực thể duy nhất. Ký tự ; được sử dụng để tách các ký tự trong một từ

Ký tự Mã ASCII Tên chuỗi

< &#060 &lt

> &#062 &gt

& &#038 &amp

space &#032 &nbsp

Thiết kế Web 46

Các ký tự đặc biệt Ví dụ:

Thiết kế Web 47

Màu sắc trong thiết kế Web Một màu được tổng hợp từ 3 thành phần màu

chính: Đỏ (Red) Xanh lá cây (Green) Xanh nước biển (Blue)

Trong HTML, một giá trị màu là một số nguyên dạng hexa (hệ cơ số 16) có dạng:

#RRGGBB RR: là giá trị màu đỏ GG: là giá trị màu xanh lá cây BB: là giá trị màu xanh nước biển

VD: #A52A2A

Thiết kế Web 48

Màu sắc trong thiết kế Web

Với mỗi giá trị RGB là một màu, ta có rất nhiều màu

Có 16 màu có tên tiếng Anh xác định

Màu sắc được xác định thông qua giá trị RGB hay thông qua tên tiếng Anh.

Thiết kế Web 49

Màu sắc trong thiết kế WebĐỏ #FF0000 RED

Đỏ sẫm #8B0000 DARKRED

Xanh lá cây #00FF00 GREEN

Xanh nhạt #90EE90 LIGHTGREEN

Xanh nước biển #0000FF BLUE

Vàng #FFFF00 YELLOW

Vàng nhạt #FFFFE0 LIGHTYELLOW

Trắng #FFFFFF WHITE

Đen #000000 BLACK

Xám #808080 GRAY

Nâu #À52A2A BROWN

Tím #FF00FF MAGENTA

Tím nhạt #EE82EE VIOLET

Hồng #FFC0CB PINK

Da cam #FFA500 ORANGE

Màu đồng phục hải quân

#000080 NAVY

Thiết kế Web 50

Chọn kiểu chữ cho văn bản

Cú pháp:

<FONT

FACE = font-name

COLOR = color

SIZE = n

>

…

</FONT>

Thiết kế Web 51

Màu sắc trong thiết kế Web

Ví dụ:

<font face="arial" color="red" size="6">

abc

</font>

Thiết kế Web 52

Văn bản siêu liên kết

Văn bản siêu liên kết hay siêu văn bản là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết đến một trang web khác

Siêu văn bản là môi trường trong đó chứa các liên kết (link) của các thông tin

Thiết kế Web 53


Cú pháp:

<A

HREF = url

NAME = name

TITLE = title

TARGET =_blank/ _self

>

… siêu văn bản

</A>

Thiết kế Web 54


Ví dụ: Liên kết đến báo tuổi trẻ

<A HREF=“http://tuoitre.com.vn”> Báo tuổi trẻ </A>

Liên kết gửi thư<A HREF=“mailto:[email protected]”> Gửi thư

</A>

Thiết kế Web 55

Vẽ đường thẳng nằm ngang

<HRALIGN = LEFT/CENTER/RIGHTCOLOR = colorNOSHADESIZE = nWIDTH = width

>

Thiết kế Web 56

CHÈN ÂM THANH, HÌNH ẢNH

Chèn âm thanh Chèn một hình ảnh, đoạn video Chèn Windows Media Player Chèn Flash Chèn Applet

Thiết kế Web 57

Chèn âm thanh Cú pháp:

<BGSOUNDSRC = urlLOOP = n

> Thẻ này không có thẻ đóng. Để lặp vô

hạn LOOP=-1 hay LOOP=INFINITE Thẻ BGSOUND phải được đặt trong phần

HEAD

Thiết kế Web 58

Chèn hình ảnh, đoạn video<IMG

ALIGN = LEFT/CENTER/RIGHTALT = textBORDER = nSRC = urlWIDTH = widthHEIGHT = heightHSPACE = hspaceVSPACE = vspaceTITLE = titleDYNSRC = urlSTART = FILEOPEN/MOUSEOVERLOOP = n

>

Thiết kế Web 59

Chèn Windows Media Player

<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95“id="MediaPlayer1“width=“rộng” height=“cao”><param name="FileName" value=“địa chỉ

file"></object>

Thiết kế Web 60

Chèn Flash<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=rộng" height=“cao">

<param name="movie" value="ten_file.swf"> <param name="quality" value="high"> <embed src="ten_file.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="rộng" height="cao"></embed>

</object>

Thiết kế Web 61

Chèn Applet

<applet code="ten_file.class" width="rộng" height="cao">

</applet>

Thiết kế Web 62

CÁC THẺ ĐỊNH DẠNG BẢNG

Các thẻ tạo bảng <TABLE>…</TABLE>: định nghĩa một

bảng <TR>…</TR>: định nghĩa một dòng <TD>…</TD>: định nghĩa một ô

Thiết kế Web 63

Cú pháp tạo bảng

<TABLE><TR>

<TD>nội dung ô</TD>…

</TR>…

</TABLE>

Thiết kế Web 64

Các thuộc tính ALIGN = LEFT/CENTER/RIGHT

Căn lề theo chiều ngang VALIGN = TOP/MIDDLE/BOTTOM

Căn lề theo chiều đứng BORDER = n

Kích thước đường biên BACKGROUND = url

Ảnh nền BGCOLOR = color

Màu nền CELLSPACING = n

Khoảng cách giữa các ô trong bảng CELLPADDING = n

Khoảng cách giữa biên ô đến nội dung ô COLSPAN = n

Ô sẽ trải dài trên bao nhiêu cột ROWSPAN = n

Ô sẽ trải dài trên bao nhiêu dòng

WIDTH = n Độ rộng

HEIGHT = n Độ cao

Thiết kế Web 65

Ví dụ:

A B C

D E F

<TABLE border=“1”><TR>

<TD>A</TD><TD>B</TD><TD>C</TD>

</TR><TR>

<TD>D</TD><TD>E</TD><TD>F</TD>

</TR></TABLE>

Thiết kế Web 66

Ví dụ:

A B

C D E


<TD>A</TD><TD colspan=“2”>B</TD>

</TR><TR>

<TD>C</TD><TD>D</TD><TD>E</TD>

</TR></TABLE>

Thiết kế Web 67

Ví dụ:

A B C

D E


<TD>A</TD><TD rowspan=“2”>B</TD><TD>C</TD>

</TR><TR>

<TD>D</TD><TD>E</TD>

</TR></TABLE>

Thiết kế Web 68

Ví dụ:

A B

C D


<TD rowspan=“2”>A</TD><TD colspan=“2”>B</TD>

</TR><TR>

<TD>C</TD><TD>D</TD>

</TR></TABLE>

Thiết kế Web 69

Bài tập Border =“1” Cellspacing=“1” Cellpadding=“1” Width=“400” Height=“400”

Thiết kế Web 70

Đáp án

Documents

02 00-html