›
›

Bài giảng Thiết kế Web - Bài 2: Hyper Text Markup Language - Phan Thanh Sơn

Download
THIẾT KẾ WEB  
Phan Thanh Sơn  
Khoa Công nghệ thông tin  
Email: webmaster.tsq[email protected]  
Tel: 0989.937.737  
BÀI 2. HyperText Markup Language  
1. Giớthiệu  
2. Đặđiểm  
3. Cáthbắbuộc  
4. Thuộtính củthẻ  
5. Cấu trúcủmộfilHTML  
6. Mộsố ký tự đặbiệt  
7. Cáthđịnh dạng văn bản  
8. Danh sáchhình ảnhsiêu liên kết  
9. Bảng biểu  
2/32  
1. Giới thiệu  
HTM: (HyperText Markup Language)  
Do Tim Berner Lee phá t minh và được W3C (World Wide  
Web Consortium) đưa thành chuẩn năm 1994.  
HTML là một tập hợp cá c quy tắc và cá c thẻ (tag) được sử  
dụng để quy định cá c thức trì nh bày, hiển thị nội dung của  
cá c trang Web, tập hợp cá c quy tắc và thẻ này phải tuâ n  
theo một chuẩn quốc tế, đảm bảo cho cá c trì nh duyệt Web  
khá c nhau,trên cá c nền phần cứng và hệ điều hành khá c  
nhau đều hiểu được và hiển thị đúng nội dung của cá c  
trang Web.  
HTML khô ng phải là một ngô n ngữ lập trì nh, nó là một ngô n  
ngữ đánh dấu.  
HTML dễ hiểu hơn nhiều so với hầu  
hết cá c ngô n ngữ lập trì nh.  
Một tài liệu HTML là một tệp tin văn bản trong đó có sử  
dụng cá c thẻ HTML để quy định cá ch thức hiển thị văn bản  
khi nó được mở bởi một trì nh duyệt Web.  
3/32  
2. Đặc điểm  
HTML sử dụng cá c thẻ (tags) để định  
dạng dữ liệu  
HTML khô ng phâ n biệt chữ hoa, chữ  
thường  
Cá c trì nh duyệt thường khô ng bá o lỗi cú  
phá p HTML. Nếu viết sai cú phá p chỉ dẫn  
đến kết quả hiển thị khô ng đúng với dự  
định.  
4/32  
3. Các thẻ (tags) trong HTML  
Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa  
khá c nhau.  
Có 2 loại thẻ: thẻ đóng và thẻ mở  
Cá ch viết thẻ:  
❖ Thẻ mở: <tên_thẻ>  
Ví dụ: <u>, <p>, <img>…  
❖ Thẻ đóng tương ứng: </tên_thẻ>  
Ví dụ: </u>, </p>  
Chú ý: luô n có thẻ mở nhưng có thể khô ng có thẻ  
đóng tương ứng. Ví dụ: <img> khô ng có thẻ đóng  
5/32  
4. Thuộc tính (property) của thẻ  
Một thẻ có thể có cá c thuộc tí nh nhằm bổ sung tá c dụng  
cho thẻ  
Mỗi thuộc tí nh có tên thuộc tí nh (tên_TT)  
Viết thẻ có thuộc tí nh:  
<tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”…>  
Chú :  
–
–
–
–
–
Có thể thay đổi thứ tự, số lượng cá c thuộc tí nh mà khô ng gâ y  
ra lỗi cú phá p  
Sự hỗ trợ cá c thẻ, thuộc tí nh ở mỗi trì nh duyệt là khá c nhau.  
Chỉ giống nhau ở cá c thẻ, thuộc tí nh cơ bản.  
Thẻ đóng của thẻ có thuộc tí nh vẫn viết bì nh thường  
(</tên_thẻ>)  
Một thẻ, có thể có 1 hoặc nhiều thuộc tí nh hoặc khô ng có  
thuộc tí nh nào.  
Cá c thẻ HTML có thể lồng nhau được  
6/32  
5. Cấu trúc của một file HTML  
Có thể tạo trang HTML bằng bất cứ trì nh soạn  
thảo văn bản nào (Notepad, DreamWeaver,…)  
Có nhiều trì nh soạn thảo HTML đặc biệt hỗ trợ  
soạn thảo HTML (Notepad++, EditPlus,  
HTMLPad,…)  
Có nhiều trì nh soạn thảo HTML cho phé p người  
sử dụng soạn thảo trực quan, kết quả sinh ra  
HTML tương ứng như:, kết quả sinh ra HTML  
tương ứng như:  
– Microsoft FrontPage  
– Adobe Dreamweaver CS3  
7/32  
5. Cấu trúc của một file HTML (tt)  
<HTML>  
<HEAD>  
<TITLE> Tiêu đề trang </TITLE>  
... Cá c khai bá o khá c ở đây  
</HEAD>  
<BODY>  
... Nội dung cần thể hiện ở đây  
</BODY>  
</HTML>  
8/32  
5. Cấu trúc của một file HTML (tt)  
Thẻ <html></html>: Định nghĩa phạm vi của  
văn bản HTML  
Thẻ <head></head>: Định nghĩa cá c mô tả về  
trang HTML. Cá c thô ng tin trong thẻ này khô ng  
được hiển thị trên màn hì nh cửa sổ trang web.  
Thẻ <title></title>: Mô tả tiêu đề trang web.  
Thô ng tin trong phần này sẽ hiển thị trên thanh  
tiêu đề của cửa sổ trang web.  
Thẻ <body></body>: Xá c định vùng thâ n của  
trang web. Đây là nơi chứa cá c thô ng tin sẽ  
hiển thị trong trang web.  
9/32  
4. Cấu trúc của một file HTML (tt)  
Trong HTML, văn bản được soạn thảo  
như bì nh thường trong cá c file HTML  
Lưu ý:  
– Mọi khoảng trống, dấu xuống dò ng trong HTML  
được thể hiện trên trang web là 1 khoảng trống  
duy nhất  
– Để gõ một số ký tự đặc biệt ta phải sử dụng mã  
tương ứng  
Ghi chú trong HTML:  
<!-- Ghi chú -->  
10/32  
5.a. Các thuộc tính của thẻ BODY  
bgcolor = “màu” : Chọn màu làm nền  
background=“URL”: chọn hì nh làm nền  
Cá ch lề : leftmargin, rightmargin, topmargin,  
bottommargin.  
VD: leftmargin = “0”,  
Lưu ý: Cá c thuộc tí nh bgcolor, background có  
thể á p dụng cho bảng (table), khối div, ….  
Có thể sử dụng cá c sự kiện bằng cá ch gọi hàm  
javascript trong thẻ BODY  
11/32  
5.b. Ví dụ thuộc tính của BODY  
<body bgcolor=red topmargin=0 onload=  
“alert (‘Thong bao cua javascript’)”>  
Hello world  
<p>  
Doan van ban co <b> Chu in dam </b>  
</p>  
</body>  
12/32  
6. Một số ký tự đặc biệt  
HTML  
Mô tả  
&nbsp;  
&lt;  
Ký tự khoảng trắng  
<
&gt;  
>
&amp;  
&copy;  
&trade;  
&reg;  
&
©
®
13/32  
7. Các thẻ định dạng văn bản  
Đậm, nghiêng, gạch châ n: <b>…</b>,  
<i>…</i>, <u>…</u>  
Chỉ số trên:<sup>…</sup>  
Chỉ số dưới: <sub>…</sub>  
Gạch ngang thâ n: <strike>…</strike>  
Ngắt dò ng: <br>  
Đường gạch ngang: <hr>  
– Cá c thuộc tí nh:  
+ Color = “màu”  
+ Width = “chiều rộng”  
+ Size = “cỡ”  
– Ví dụ: <hr color=“#FF0000” size=“4”>  
Cá c thẻ <br>, <hr> là thẻ tự đóng.  
14/32  
7. Các thẻ định dạng văn bản (tt)  
Font chữ (í t dùng): <font>…</font>  
Thuộc tí nh:  
❖ face=“tên font chữ”  
❖ size=“kích thước”  
❖ color=“màu”  
– Viết bằng tên tiếng Anh (red, blue,…)  
– Viết dạng #RRGGBB, RR, GG, BB ở dạng hexa.  
Ví dụ: #FFFFFF: Trắng, #FF0000: đỏ,…  
Ví dụ:  
<font size=“4” color=“#FF0000”>Text</font>  
15/32  
7. Các thẻ định dạng văn bản (tt)  
Tiêu đề: với kí ch thước nhỏ dần  
– <h1>…</h1>  
– …  
– <h6>…</h6>  
Sau mỗi tiêu đề, văn bản tự động xuống dò ng  
– Thuộc tí nh:  
+ align=“cách căn chỉnh lề” (left, right, center, justify)  
Đoạn văn bản: <p>…</p>  
– Thuộc tí nh:  
+ align tương tự thẻ <h>  
16/32  
7. Các thẻ định dạng văn bản (tt)  
Sử dụng trích dẫn  
– <BLOCKQUOTE >  
Văn bản được định dạng trước.  
– <PRE>  
Phần tử nhóm  
– <DIV>…</DIV>  
– <SPAN>…</SPAN>  
17/32  
8. Danh sách, hình ảnh, liên kết  
Danh sách không thứ tự  
<UL TYPE = (square, disc, circle)>  
<LI>Monday</LI>  
<LI>Tuesday </LI>  
</UL>  
Danh sách có thứ tự  
<OL TYPE= (…)>  
<LI>Monday</LI>  
<LI>Tuesday </LI>  
</OL>  
18/32  
8.a. Danh sá ch (tt)  
Upper Roman  
❖ <OL TYPE = I>  
Lower Roman  
❖ < OL TYPE = i>  
Uppercase  
❖ < OL TYPE = A>  
Lowercase  
❖ < OL TYPE = a>  
Bắt đầu với một số khác 1  
❖ <OL START = n> [ Mặc định ]  
19/32  
.a. Danh sách (tt)  
Danh sách định nghĩa  
<DL>  
<DT>Sunday</DT>  
<DD>The first day of the week</DD>  
<DT>HTML</DT>  
<DD>HyperText Markup Language</DD>  
<DT>Internet</DT>  
<DD>A network of networks</DD>  
</DL>  
20/32  
Tải về để xem bản đầy đủ
ppt 32 trang baolam 24661 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Bài 2: Hyper Text Markup Language - Phan Thanh Sơn", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pptbai_giang_thiet_ke_web_bai_2_hyper_text_markup_language_phan.ppt