›
›

Bài giảng Lập trình Web - Bài 1: Ngôn ngữ HTML (HyperText Mark up Language)

Download
12/30/2016  
LẬP TRÌNH WEB  
www.rabbit7978.wordpress.com  
dtthuha79@gmail.com  
www.w3schools.com  
…
12/30/2016  
1
DTTH  
PHẦN 1: NGÔN NGỮ HTML  
(HyperText Mark up Language  
)
12/30/2016  
2
DTTH  
1
12/30/2016  
Nội dung  
• Giới thiệu HTML  
• Các thẻ HTML cơ bản  
DTTH  
• HTML (HyperText markup Language) gồm các đoạn mã  
chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình  
duyệt Web  
–Hypertext (Hypertext link) là một từ hay một cụm từ  
đặc biệt dùng để tạo liên kết giữa các trang web  
–Mark up: là cách định dạng văn bản để trình duyệt  
hiểu và thông dịch được.  
–Language: tập những quy luật để định dạng văn bản  
trên trang web.  
12/30/2016  
4
DTTH  
2
12/30/2016  
• Webpage: là một file văn bản chứa những tag HTML  
hoặc những đọan mã đặc biệt mà trình duyệt web có thể  
hiểu và thông dịch được, file được lưu với phần mở  
rộng là .html ( tập tin HTML)  
• Website: Một tập hợp nhiều web page, thể hiện thông tin  
của một tổ chức hoặc một chủ đề nào đó  
• Web Editor :Có thể soạn thảo web page trên bất kỳ trình  
soạn thảo văn bản nào: Notepad, Dreamweaver,…  
12/30/2016  
5
DTTH  
DTTH  
3
12/30/2016  
Ví dụ  
DTTH  
4
12/30/2016  
Giải thích  
•<!DOCTYPE html>: thẻ đầu tiên phải bắt buộc có cho  
1 tập tin HTML5, kiểm tra tính hợp lệ cho tài liệu  
HTML  
•<html>: thẻ chứa  
•<head> : phần đầu của trang không hiển thị trên trình  
duyệt web (web browser)  
•<body>: nội dung của trang được hiển thị trên trình  
duyệt web (web browser)  
•Thẻ html chứa 2 loại thẻ <html> thẻ mở, </html> thẻ  
đóng,…  
DTTH  
<!DOCTYPE HTML>  
<HTML>  
<HEAD>  
<TITLE>Tiêu đề của trang web </TITLE>  
<
12/30/2016  
10  
DTTH  
5
12/30/2016  
Thẻ HTML cơ bản  
Có 2 loại thẻ:  
<tên_thẻ>: thẻ mở  
</tên_thẻ>: thẻ đóng  
Cú pháp:  
<tên_thẻ thuộc_tính=“giá_trị” > nội  
dung </tên_thẻ>  
Ví dụ:  
<html> </html>  
<body bgcolor=“pink” text=“red”> … </body>  
12/30/2016  
11  
DTTH  
1. <Title> : Hiển thị nội dung tiêu đề của trang web trên  
thanh tiêu đề của trình duyệt  
Cú pháp:  
<TITLE> Nội dung tiêu đề </TITLE>  
2. <Hn>: Tạo header, gồm 6 cấp header, được đặt trong  
phần BODY. Với n=[1..6].  
Cú pháp  
<Hn ALIGN= “left|right|center”>  
Nội dung của Header  
</Hn>  
12/30/2016  
12  
DTTH  
6
12/30/2016  
3. <P> : Dùng để ngắt đoạn và bắt đầu đoạn mới. (Enter)  
Cú pháp:  
<PALIGN = “left|right|center|justify”>  
Nội dung của đoạn  
</P>  
4. <BR>: Ngắt dòng tại vị trí của của tag. (Shift Enter)  
5. <HR>: Kẻ đường ngang trang  
Cú pháp:  
<HR Align=“left|right|center” Width= “100px|2cm”  
Size=“3px” color=“#rrggbb”>  
12/30/2016  
13  
DTTH  
6. <FONT>: định dạng font chữ  
Định dạng Font chữ  
Cú pháp:  
<FONT Face=“fontName1, fontName2, fontName3” size=“value” Color=“rrggbb”>  
Nội dung hiển thị  
</FONT>  
12/30/2016  
14  
DTTH  
7
12/30/2016  
7. <BODY > : Chứa nội dung của trang web  
<BODY>  
Nội dung chính của trang web  
</BODY>  
•
Các thuộc tính của <Body>  
BgColor: thiết lập màu nền của trang  
Text: thiết lập màu chữ  
–
–
–
–
–
Background: tạo hình làm nền cho trang  
LeftMargin: Canh lề trái  
TopMargin: Canh lề trên của trang  
12/30/2016  
15  
DTTH  
Ví dụ:  
12/30/2016  
16  
DTTH  
8
12/30/2016  
8. <IMG> : Chèn một hình ảnh vào trang Web  
Cú pháp:  
<img src=“URL” alt=“Text” width=“giá_trị”  
height=“giá_trị” border=“giá_trị”>  
URL: tập tin hình cần chèn vào trang Web  
Alt: chuỗi thay thế nếu hình không thể hiển  
Width, Height: chiều rộng, chiều cao (px). (mặc định)  
Border: đường viền quanh hình  
Ví dụ:  
12/30/2016  
17  
DTTH  
9. <audio> : Chèn một âm thanh vào trangWeb. Âm  
thanh này sẽ được phát mỗi khi người sử dụng mở  
trang Web.  
Cú pháp:  
<audio>  
<source src=“URL” type=“loại_file”>  
</audio>  
URL: tên tập tin âm thanh  
Type: {audio/mpeg | audio/ogg | audio/wav}  
DTTH  
9
12/30/2016  
10. <Marquee></Marquee> : Điều khiển đối tượng  
chạy một cách tự động trên trang Web  
Cú pháp:  
<Marquee direction=“left|right|up| down”>Nội  
dung</Marquee>  
11. <!-- Ghi chú -->: không hiển thị trong trang  
Cú pháp:  
<! -- Nội dung lời chú thích -->  
12. <B>: định dạng chữ đậm  
Cú pháp  
<B> Nội dung chữ đậm</B>  
12/30/2016  
19  
DTTH  
13. <I>: Định dạng chữ nghiêng  
Cú pháp:  
<I> Nội dung chữ nghiêng</I>  
14. <U>: Gạch chân văn bản  
Cú pháp:  
<U> Nội dung chữ gạch chân</U>  
15. <sub>: nội dung văn bản hạ xuống  
Cú pháp:  
<sub> Nội dung</sub>  
16. <sup>: nội dung văn bản lên cao  
Cú pháp:  
<sup> Nội dung </sup>  
12/30/2016  
20  
DTTH  
10  
12/30/2016  
17. <blockquote>:  
Dùng phân cách một khối văn bản để nhấn mạnh, đoạn  
văn bản này được tách thành một paragraph riêng,  
thêm khoảng trắng trên và dưới đoạn đồng thời thụt  
vào so với lề trái (tương đương chức năng của phím  
tab)  
Cú pháp:  
<blockquote>  
Nội dung khối văn bản nhấn mạnh  
</blockquote>  
12/30/2016  
21  
DTTH  
18. <address>: hiển thị nội dung ở dạng địa chỉ cá nhân với  
các định dạng riêng. (thường đặt ở phần footer trang web)  
Cú pháp:  
<address> Họ tên: …<br> email: ….<br> </address>  
12/30/2016  
22  
DTTH  
11  
12/30/2016  
19. Các ký tự đặc biệt:  
Ký tự khoảng trắng: &nbsp;  
Ký tự và &: &amp;  
Lớn hơn (>): &gt;  
Nhỏ hơn (<): &lt;  
Cặp nháy””: &quot;  
……  
DTTH  
• Bài tập về nhà:  
• Bài Tập HTML (download)  
• Tutorial 01  
DTTH  
12  
pdf 12 trang baolam 21021 Free
Download
Bạn đang xem tài liệu "Bài giảng Lập trình Web - Bài 1: Ngôn ngữ HTML (HyperText Mark up Language)", để 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:

  • pdfbai_giang_lap_trinh_web_phan_1_ngon_ngu_html_hypertext_mark.pdf