02 00-html
Post on 14-Dec-2014
386 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML HEAD TITLE BODY
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
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML HEAD TITLE BODY
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
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML HEAD TITLE BODY
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
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML HEAD TITLE BODY
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
Các thẻ định dạng khối
<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
Các thẻ định dạng khối
<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
<H2>…</H2> Định dạnh đề mục cấp 2
<H3>…</H3> Định dạnh đề mục cấp 3
<H4>…</H4> Định dạnh đề mục cấp 4
<H5>…</H5> Định dạnh đề mục cấp 5
<H6>…</H6> Định dạnh đề mục cấp 6
Đề 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
Các thẻ định dạng khối
<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
Các thẻ định dạng khối
<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
Các thẻ định dạng in ký tự
Ví dụ:
Thiết kế Web 43
Các thẻ định dạng in ký tự
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
< < <
> > >
& & &
space    
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
Văn bản siêu liên kết
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ăn bản siêu liên kết
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:abc@domain.com”> 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
<TABLE border=“1”><TR>
<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
<TABLE border=“1”><TR>
<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
<TABLE border=“1”><TR>
<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
top related