Thẻ tạo đường gạch ngang - ý nghĩa: Dùng để tạo các đường gạch ngang phân cách các đoạn trong trang Web - Cú pháp: Các thuộc tính của thẻ HR - Align =”căn lề”: Dùng để căn lề cho đường[r]
Trang 1ThiÕtkÕtrangWebvíiHTML
Trang 2I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem
trangHTMLb»ngtrÌnhduyÖtWeb
-GiíithiÖung«nngỮ HTML
HTML là chữ viết tắt của Hyper Text Markup Language.
Sử dụng các ký hiệu quy định sẵn (được gọi
là tag/thẻ) để trình bày nội dung văn bản.
Nội dung + Định dạng = Kết quả hiển thị
Một file HTML phải có phần mở rộng là htm hoặc html
Trang 3I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem
Trang 4I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem
trangHTMLb»ngtrÌnhduyÖtWeb
Trang 5I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem
Trang 6II Các tag cơ bản trong HTML
Trang 7<Body Các tham số nếu có>
Nội dung của tài liệu đ ợc đặt ở đây
</Body>
VD:
Trang 8Các thuộc tính của thẻ Body:
Background = địa chỉ : Chỉ định ảnh nền cho trang Web” ”
Bgcolor = màu : Chỉ định màu nền cho trang Web” ”
Text = màu : Chỉ định màu văn bản cho trang Web” ”
Bgproperties = pixed : Chỉ định ảnh nền trang Web không ” ”
cuộn khi cuộn thanh Scrollbar
Leftmargin = n: Chỉ định lề trái cho trang Web, với n là 1 số nguyên d ơng tính theo pixed
Topmargin = n: Chỉ định lề trên cho trang Web, với n là 1 số nguyên d ơng tính theo pixed.
Link = màu : Chỉ định màu cho các Hyperlink khi ch a đ ợc ” ”
duyệt trong trang Web.
Vlink = màu : Chỉ định màu cho các Hyperlink khi đã đ ợc ” ”
duyệt trong trang Web.
Alink = màu : Chỉ định màu cho các Hyperlink khi đang đ ợc ” ”
duyệt trong trang Web.
Trang 92.2 Thẻ định dạng kiểu ch ữ
a Thẻ tạo chữ đậm <B>
- ý nghĩa: Cho phộp tạo chữ đậm
- Cỳ phỏp: <B>…</B>
b Thẻ tạo chữ xiờn <I>
- ý nghĩa: Cho phộp tạo chữ xiờn
- Cỳ phỏp: <I>…</I>
c Thẻ tạo chữ gạch chõn <U>
ý nghĩa: Cho phộp tạo chữ gạch chõn
Cỳ phỏp: <U>…</U>
Trang 10Các thuộc tính của thẻ Font
- Face = "phông chữ" : Chỉ định tên phông chữ
Trang 112.5 Thẻ tạo đoạn văn bản <P>
- ý nghĩa: Cho phép tạo 1 đoạn văn bản và căn lề cho đoạn văn bản đó
- Cú pháp:<P align ="Căn lề" >…</P>
Align =”căn lề”: Dùng để căn lề cho đoạn văn bản
Left: Căn bằng bên trái
Right: Căn bằng bên phảiCenter: Căn bằng ở giữa
Trang 122.8 Thẻ tạo chủ đề
- ý nghĩa: Dùng để mô tả ngắn gọn chủ đề của phần đứng sau nó, Có 6 cấp độ heading
Trang 13<Li> Mục 1 trong danh sách
<Li> Mục 2 trong danh sách
<Li> Mục 3 trong danh sách
</UL>
- Thuộc tính của thẻ <UL>
Type = ”Disc”: mặc định, đĩa tròn đen quen thuộc
“Square” : Một hình vuông nhỏ được tô đầy
“Circle” : Một hình tròn không được tô đầy.
Trang 14b Danh sách có đánh số thứ tự
<OL>
<Li> Mục 1 trong danh sách
<Li> Mục 2 trong danh sách
<Li> Mục 3 trong danh sách
</OL>
Các thuộc tính của thẻ <OL>
Type =”1” : Kiểu đánh danh sách là: 1, 2, 3
”a” : Kiểu đánh danh sách là: a,b,c
”A” : Kiểu đánh danh sách là: A, B, C
”i” : Kiểu đánh danh sách là: i, ii, iii
”I” : Kiểu đánh danh sách là: I, II, III
Start =”giá trị” : Xác định giá trị khởi đầu cho danh sách
Trang 15Bài tập:
Tạo trang web với nội dung
Trang 17 2.11 Thẻ tạo đường gạch ngang <HR>
- ý nghĩa: Dùng để tạo các đường gạch ngang phân cách các đoạn trong trang Web
- Cú pháp:
<HR>
Các thuộc tính của thẻ HR
- Align =”căn lề”: Dùng để căn lề cho đường gạch ngang
Left: Căn bên trái
Right: Căn bên phải
Center: Căn ở giữa
- Color =”màu”: Chỉ định màu cho đường gạch ngang
- Size =n: Chỉ định kích thước cho đường gạch ngang.
- Noshade: chỉ định độ bóng cho đường gạch ngang.
- Width =n: Chỉ định độ rộng cho đường gạch ngang.
Trang 18 2.12 Thẻ tạo ký tự trắng
- ý nghĩa: Cho phép tạo các ký tự trắng ở trên Web
- Cú pháp:  
Trang 192.13 Thẻ chèn ảnh vào trang Web
- ý nghĩa: Cho phép chèn 1 ảnh bất kỳ vào trang Web
- Cú pháp:
<IMG src="địa chỉ">
Các thuộc tính của thẻ IMG
- Src ="địa chỉ" : Chỉ ra nơi chứa ảnh cần chèn vào trang Web (lưu ý: Tên ảnh phải có cả đuôi vd: a1.jpg hay a1.bmp)
- Alt ="text": Cho phép tạo dòng chữ thay cho hình.
- Border =n: Chỉ định đường viền cho ảnh
- Height =n: Chỉ định độ cao cho ảnh
Trang 20Ví dụ: trang ảnh
Trang 21 2.14 Thẻ tạo chữ chạy:
HTML, dòng văn bản, hay một đối tượng bất kỳ nằm giữa thẻ này sẽ chạy theo kiểu đã quy định trước Thẻ này chỉ dành riêng cho trình duyệt Internet
Explore
Các thuộc tính của thẻ Marquee
chứa văn bản đó (left, right, middle, bottom)
chữ (Scroll,Slide, Alternate)
Trang 22 2.14 Thẻ tạo chữ chạy:
Các thuộc tính của thẻ Marquee
- Bgcolor =màu: Chỉ định màu nền cho
khung chứa văn bản.
- Direction="hướng chạy": Chỉ định hướng chạy của dòng văn bản Mặc định chạy từ
phải qua trái (Left, right, Up, Down)
Trang 232.15.Thẻ tạo liên kết trong trang
- ý nghĩa: Dùng để tạo liên kết từ vị trí này tới vị trí khác trên cùng một trang Web Nó có ý
nghĩa khi nội dung của một trang web dài với nhiều trang màn hình.
- Cú pháp:
Các bước thực hiện:
b1: Tạo điểm neo tại vị trí cần liên kết tới bằng lệnh;
<A name ="tenneo"></A>
b2: Tạo 1 lên kết tới điểm neo
<A href ="#tenneo">noi dung hiển thị</A>
Trang 24 2.16 Thẻ tạo liên kết ngoài trang
- ý nghĩa: Dùng để tạo liên kết từ trang web này tới trang web khác, hay tới một tệp tin, thư mục được chỉ ra tại mục địa chỉ.
- Cú pháp:
<A href ="diachi"> nội dung hiển thị </A>
Trang 252.17 Thẻ tạo nhạc nền
- ý nghĩa: Cho phép chèn một bản nhạc lên
trang Web
- Cú pháp :
<Bgsound src ="điạ chỉ" loop =n>
Src ="địa chỉ": Chỉ định địa chỉ nơi lấy bản
nhạc (.mp3, wav, midi)
loop =n: Chỉ định số lần lặp cho bản nhạc, nếu không chọn, sẽ lặp cho đến khi tắt trang Web
Trang 27Các điều khiển trên form
CheckBox
Command Button OptionButton
Submit Reset
✘
TextBox
Muc chon 1
Trang 28 type dùng để xác định loại điều khiển
<input type=”loại_điều_khiển” name=”…” value=”…”>
CheckBox
Command Button OptionButton
✘
TextBox
Trang 29Có 5 loại điều khiển
Các thuộc tính của thẻ Form
liệu trên Form đến
gửi và nhận dữ liệu
Trang 30 Submit/Reset là hai nút đặc biệt trong form
đối với web browser
gửi dữ liệu nhập vào form tới Web server
khởi tạo lại trạng thái ban đầu của các điều
khiển trên form
Ví dụ:textbox
Submit
Menu Về
Trang 31 <textarea> dùng để tạo một vùng nhập liệu văn bản
Trang 32 <select> dùng để tạo một ComboBox hay
ListBox
ComboBox hay ListBox
Trang 333.3 Tạo bảng
Trang 35 colspan : một cột trải rộng trên nhiều cột
rowspan : một cột nằm trên nhiều dòng
Trang 363.4 Hiển thị nhiều trang trên WebBrowse