Giới thiệu về HTMLNgôn ngữ đánh dấu siêu văn bản được phân cách nhau bởi các ký tự đặc biệt xác định cách hiển thị văn bản hay các mục khác trong thành phần đó thẻ HTML – HTML tag... Giớ
Trang 2Giới thiệu về HTML
Ngôn ngữ đánh dấu siêu văn bản
được phân cách nhau bởi các ký tự đặc biệt xác định cách hiển thị văn bản hay các mục khác trong thành phần đó
thẻ HTML – HTML tag
Trang 3Giới thiệu về HTML
các thẻ định dạng HTML quy định cho trình duyệt biết cách hiển thị các thành phần của trang Web
hoặc html
Trang 6Thẻ HTML – HTML Tag
HTML
Trang 7Thẻ HTML
thông tin tiết cho việc hiển thị thành phần HTML
tên thuộc tính = “giá trị thuộc tính”
Trang 8Thẻ HTML
Trang 10Các thẻ HTML cấu trúc
<HTML>
<HEAD>
<TITLE> Tiêu đề trang Web </TITLE>
<META name=“WRITER” content=“Lê Huy Cường”>
<META name=date content=“04/04/2006”>
Trang 11 Không được hiển thị trên trình duyệt
Trang 12Các thẻ HTML cấu trúc
<META>
Thuộc tính
NAME: tên của thông tin mô tả
CONTENT: nội dung thông tin mô tả
<! chú thích ở đây, không được hiển thị >
Trang 14 Color rrggbb Color rrggbb
White FFFFFF Light Green 32CD32
Red FF0000 Maroon 8E236B
Green 00FF00 Medium Blue 3232CD
Blue 0000FF Navy Blue 23238E
Yellow FFFF00 Neon Blue 4D4DFF
Black 000000 Neon Pink FF6EC7
Blue Violet 9F5F9F Orchid DB70DB
Orange FF7F00 Pale Green 8FBC8F
Brown A62AA2 Pink BC8F8F
Dark Green 2F4F2F Plum EAADEA
Dark Brown 5C4033 Scarlet 8C1717
Dark Purple 871F78 Sea Green 238E68
Dark Slate Blue 6B238E Sky Blue 3299CC
Dusty Rose 856363 Slate Blue 007FFF
Forest Green 238E23 Summer Sky 38BODE
Gold CD7F32 Tan DB9370
Gray C0C0C0 Turquoise ADEAEA
Hunter Green 215E21 Violet 4F2F4F
Green Yellow 93DB70 Yellow Green 99CC32
Trang 16Các thẻ định dạng văn bản
(Text)
<P> và </P>
Tự động thêm vào ký tự xuống dòng ở
trước và sau đoạn paragraph
Thuộc tính
align = {left | center | right | justify}
Trang 17 Thuộc tính:
align = {left | center | right | justify} - căn lề
Trang 18 align = {left | center | right | justify}: căn lề đường kẻ
size = {n pixels | n%}: độ dầy của đường kẻ
width = {n pixels | n%}: chiều dài đường kẻ
Trang 19Các thẻ định dạng văn bản
(Text)
Các thẻ định dạng chữ
Không có thuộc tính
Trang 20 face: tên font chữ
size = {n | +n}: kích thước font chữ, n=1 7
Trang 21Các thẻ định dạng văn bản
(Text)
Thẻ giữ nguyên định dạng PRE (PREserved)
<PRE> và </PRE>
Trình duyệt hiển thị với định dạng giống như
trong file trên trình soạn thảo
Thẻ giữ nguyên định dạng CODE
<CODE> và </CODE>
Giống PRE, chỉ khác là không có xuống dòng cuối cùng
Trang 23< (less than)
Trang 24Các ký tự đặc biệt
> (greater than)
Dấu và &
& (ampersand)
" (quotation mark)
' (apostrophe)
Trang 26 Mỗi mục của danh sách có thể là một đoạn
paragraph, line break, ảnh, liên kết
Thuộc tính của thẻ <ul>
type = {disc | square | circle} kiểu ký hiệu đánh dấu khoản mục
Trang 27 Mỗi mục của danh sách có thể là một đoạn
paragraph, line break, ảnh, liên kết
Thuộc tính của thẻ <ol>
type = {A | a | I | i | 1} kiểu đánh số thứ tụ của
Trang 29Thẻ xác lập liên kết - link
<a> và </a>
Thuộc tính
name = “tên” - tên của thành phần liên kết
href = “url” - địa chỉ đích của liên kết
target = {_blank | _self | _parent | _top} - xác
định nơi mở địa chỉ đích
_blank: mở trên cửa sổ mới
_self: mở cùng frame với liên kết
Trang 30Thẻ tạo liên kết - link
Tạo liên kết gửi thư điện tử
<a href="mailto:hoanna@it-hut.edu.vn?subject=Hello world!">Send mail</a>
Tạo liên kết đến đến vị trí trong trang
Trang 32 align = {left | center | right | justify} - căn lề
height = {n pixels | n%} - chiều cao của ảnh
width = {n pixels | n%} - chiều rộng của ảnh
usemap = “url” - kết hợp với thẻ <map> và thẻ
<area> để tạo ra các vùng trên ảnh
Trang 33Thẻ hiển thị ảnh
Thiết lập liên kết cho ảnh
<a href=“url”><img src=“url”></a>
Xác lập phần ảnh có thể kích chuột vào với bộ thẻ <map>
Trang 34<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun“ href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury“
href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus“ href="venus.htm">
</map>
<p>
<b>Note:</b> Chung ta su dung ca 2 thuoc tinh <b>id</b> va
<b>name</b> trong the map boi vi mot so phien ban cua Netscape
khong hieu thuoc tinh id.</p>
Trang 40Thẻ tạo bảng
Tiêu đề của bảng - Heading ngang
Trang 41Thẻ tạo bảng
Tiêu đề của bảng - Heading dọc
Trang 42Thẻ tạo bảng
Nối các cột - thuộc tính colspan
Trang 43Thẻ tạo bảng
Nối các hàng - rowspan
Trang 45Thẻ tạo frame
Cho phép hiển thị nhiều trang web một cách độc lập với nhau trong cùng 1 cửa sổ trình
duyệt
Mỗi frame được đánh dấu bởi thẻ <frame>
Mỗi cửa sổ được chia thành nhiều frame được gọi là frameset, được đánh dấu bởi cặp thẻ
<frameset> và </frameset>
Mỗi frameset lại có thể chứa một hay nhiều
Trang 46Thẻ tạo frame
frameborder = {0 | 1 | yes | no}
cols = “width1, width2, …”
width – độ rộng của các frame, có thể nhận giá trị
pixel
% - tỷ lệ % với độ rộng frameset
* - tỷ lệ tương đối giữa các độ rộng
rows = “height1, height2, …”
Trang 47Thẻ tạo frame
Thuộc tính thẻ frame
name = “text” – tên của frame
frameborder = {0 | 1 | yes | no}
src = “url” – địa chỉ trang web hiển thị
noresize = {true | false}
scrolling = {auto | yes | no}
Cặp thẻ <noframes> và </noframes>
Xác lập vùng không chứa frame cho các trình
Trang 49Thẻ tạo form
<form> và </form>
dữ liệu vào của người sử dụng
dropdown box, radio button, checkbox
Trang 50Các thuộc tính của thẻ form
xác định nơi mở địa chỉ đích
Trang 51TextBox - Text Field
Được dùng để người sử dụng nhập vào 1 dòng văn bản (các chữ, số)
Trang 52Ô điền mật khẩu
<form name="login" ID="login">
Username: <input type="text“ name="user">
<br>
Password: < input type="password“ name="password">
</form>
Trang 53Vùng soạn thảo - Textarea
Thuộc tính
Trang 54Radio button – Option button
Cho phép người dùng lựa chọn một trong số hữu hạn các lựa chọn
Trang 56Hộp kéo thả - Dropdown box
thẻ <select> và </select>
được đánh dấu bởi cặp thẻ <option>
</option>
Trang 57Hộp kéo thả Dropdown box
Trang 58Hộp kéo thả theo nhóm
Trang 59Nút lệnh – (Command) Button
<form>
<input type="button" value="Hello world!">
</form>
Trang 60Nút kiểu Submit và Reset
Submit - Xác nhận gửi các thông tin trên form (trên các điều khiển) đến Server
Reset - thiết lập lại giá trị trên các điều khiển về mặc định
Trang 61Nút Submit và thuộc tính action của form
Khi người sử dụng nhấn vào nút submit, nội dung của form sẽ được đưa tới một file khác được chỉ ra
ở thuộc tính action của form
File này có thể tiến hành một số xử lý với dữ liệu nhận được
Nếu bạn đánh vào textfield ở trên một vài ký tự,
sau đó nhấn vào nút Submit, bạn sẽ gửi các ký tự này tới trang “url” Ở trang này, bạn có thể lấy dữ liệu để làm một vài xử lý nào đó, thí dụ hiển thị lên
Trang 63Thẻ kịch bản - Script
Cho phép đưa vào trang HTML các đoạn script
để tăng tính động và khả năng tương tác
Cặp thẻ <script> và </script>
Vị trí chèn script
Trong phần HEAD: được thực hiện ngay khi trang web được load
Trong phần BODY: được thực hiện khi phần nội
dung trang web được load hoặc khi có lời gọi
Cặp thẻ <noscript> và </noscript>
Trang 64Thẻ kịch bản - Script
type = {text/javascript | text/vbscript |
text/xml …} : xác định lọai ngôn
ngữ kịch bản
src = “url”: xác định địa chỉ đến file chứa script, tránh phải chèn trực tiếp nội dung đoạn script vào mã nguồn file HTML
language = {javascript | vbscript …}
runat = server
Trang 66Thẻ định kiểu - style
bản trong trang web
External: kiểu hiển thị được định nghĩa
trong một file tách riêng – style sheet
Trang 67Thẻ style
Inline: chỉ có hiệu lực trong 1 thành phần
<textarea style="FONT-WEIGHT: bolder;