›
›

Bài giảng Thiết kế và lập trình Web - Bài 2: HTML Căn bản

Download
Thiết kế và lập trình Web  
Bꢀi 2  
HTML Căn bản  
Viện CNTT & TT  
Thiết kế & Lập trình Web  
Nội dung  
. Giới thiệu về HTML  
. Cấu trúc của 1 tài liệu HTML  
. Các Tag cơ bản  
. Các Tag danh sách  
. Tag liên kết trang  
. Tag kẻ bảng  
2
Thiết kế & Lập trình Web  
Nội dung  
. Giới thiệu về HTML  
. Cấu trúc của 1 tài liệu HTML  
. Các Tag cơ bản  
. Các Tag danh sách  
. Tag liên kết trang  
. Tag kẻ bảng  
3
Thiết kế & Lập trình Web  
Giới thiệu về HTML  
. HTML (Hyper Text Markup Language) - Ngôn ngữ  
đánh dấu siêu văn bản  
. Là một ngôn ngữ dùng để xây dựng một trang Web.  
. Chứa các thành phần định dạng để báo cho trình  
duyệt Web biết cách để hiển thị một trang Web.  
. Một trang web thông thường gồm có 2 thành phần  
chính:  
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)  
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ  
liệu trên hiển thị trên trình duyệt.  
4
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Trình duyệt, trình soạn thảo  
Trình dditor)  
5
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Thẻ (Tag) HTML  
<HTML>  
<HEAD>  
<TITLE>Welcome to HTML</TITLE>  
</HEAD>  
<BODY BGCOLOR = lavender>  
<H3>My first HTML document</H3>  
</BODY>  
</HTML>  
Hiển thị ví dꢀ trong IE  
6
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Thẻ (Tag) HTML  
<b> Dòng chữ này được in đậm </b>  
. <Tag mở> Dữ liệu <Tag đóng>  
. Tên Tag luôn mang tính gợi nhớ  
– Ví dꢀ: B ~ Bold, I ~ Italic, P ~ Paragraph  
. Đôi khi không cần Tag đóng <br>, <hr>  
. Cú pháp chung  
<TAG Tên_thuộc_tính=‘giá_trị’ ……..> Dữ liệu </TAG>  
– Ví dꢀ :  
– <div >Thuong mai Dien tu 1</div>  
– <div id="txtDiv" style="color:#0000CC">Thuong mai Dien tu 2</div>  
7
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp  
Mã HTML  
Hiển thị  
<b> Đây là một dòng được in Đậm</b>  
<h3> Mức chữ ở tiêu đề 3 </h3>  
Đây lꢀ một dòng được in Đậm  
Mức chữ ở tiêu đề 3  
Mã HTML  
Hiển thị  
<font FACE=‘Arial’ Size=‘3’>  
Hello  
Hello  
</font>  
Lưu ý :  
• Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép  
• Không phân biệt chữ HOA và thường  
• Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng  
8
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp  
. Lưu ý: Các Tag nên lồng nhau tuyệt đối  
9
Thiết kế & Lập trình Web  
Giới thiệu về HTML – Thẻ (Tag) HTML.Ví dꢀ  
>Welcome to HTML>  
BGCOLOR = lavender>  
My first HTML document<>  
10  
Thiết kế & Lập trình Web  
Nội dung  
. Giới thiệu về HTML  
. Cấu trúc của 1 tài liệu HTML  
. Các Tag cơ bản  
. Các Tag danh sách  
. Tag liên kết trang  
. Tag kẻ bảng  
11  
Thiết kế & Lập trình Web  
Cấu trúc 1 tài liệu HTML  
<html>  
<head>  
Phần đầu  
trang HTML  
<title>Tiêu đề </title>  
</head>  
Bắt đầu và  
Kết thúc của  
trang HTML  
<body>  
Nội dung 1  
Nội dung 2  
Nội dung 3  
Nội dung  
trang HTML  
</body>  
</html>  
12  
Thiết kế & Lập trình Web  
Cấu trúc 1 tài liệu HTML  
. <html></html> : Định nghĩa phạm vi của văn bản HTML  
. <head></head> : Định nghĩa các mô tả về trang HTML.  
Thông tin trong tag này không được hiển thị trên trang web  
. <title></title> : Mô tả tiêu đề trang web  
. <body></body> : Xác định vùng thân của trang web, nơi  
chứa các thông tin  
13  
Thiết kế & Lập trình Web  
Cấu trúc 1 tài liệu HTML – Ví dꢀ  
<HTML>  
<HEAD>  
<TITLE>Welcome to HTML</TITLE>  
</HEAD>  
<BODY BGCOLOR = lavender>  
<H3>My first HTML document</H3>  
</BODY>  
</HTML>  
14  
Thiết kế & Lập trình Web  
Nội dung  
. Giới thiệu về HTML  
. Cấu trúc của 1 tài liệu HTML  
. Các Tag cơ bản  
. Các Tag danh sách  
. Tag liên kết trang  
. Tag kẻ bảng  
15  
Thiết kế & Lập trình Web  
Các Tag Cơ bản  
. Các Tag xử lý văn bản  
. Tag hình ảnh  
. Tag âm thanh  
16  
Thiết kế & Lập trình Web  
Các tag xử lý văn bản – Khối, chuổi văn bản  
. Các thẻ định dạng khối văn bản  
– Tiêu đề (Heading) : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>  
– Đoạn văn bản (Paragraph): <p>  
– Danh sách (List Items): <li>  
– Đường kẻ ngang (Horizontal Rules): <hr>  
. Các thẻ định dạng chuổi văn bản  
– Định dạng chữ : <em>, <i>, <b> và <font>  
– Tạo siêu liên kết : <a>  
– Xuống dòng : <br>  
17  
Thiết kế & Lập trình Web  
Các tag xử lý văn bản – Ví dꢀ về Heading  
. HEADING  
<HTML>  
<HEAD>  
<TITLE>Introduction to HTML</TITLE>  
</HEAD>  
<BODY>  
<H1>Introduction to HTML - H1</H1>  
<H2>Introduction to HTML - H2</H2>  
<H3>Introduction to HTML - H3</H3>  
<H4>Introduction to HTML - H4</H4>  
<H5>Introduction to HTML - H5</H5>  
<H6>Introduction to HTML - H6</H6>  
</BODY>  
</HTML>  
18  
Thiết kế & Lập trình Web  
Các tag xử lý văn bản – Ví dꢀ về Paragraph  
. PARAGRAPH - <P>  
<html>  
<head>  
<title>Welcome to HTML</title>  
</head>  
<body bgcolor=‘lavender’>  
<h3>My first HTML document</h3>  
<p>  
This is going to be real fun  
<h2>Using another heading</h2>  
</p>  
<p align=‘center’>Another paragraph element</p>  
</body>  
</html>  
19  
Thiết kế & Lập trình Web  
Các tag xử lý văn bản – Ví dꢀ về Paragraph  
. HORIZONTAL RULES  
. <HR …>  
– Thuộc tính :  
• align : Canh hàng đường kẻ ngang so với trang web  
• width : Chiều dài đường kẻ ngang  
• size : Bề rộng của đường kẻ ngang  
• noshade : Không có bóng  
. <HR noshade size=‘5’ align=‘center’ width=‘40%’></HR>  
. <HR size=’15’ align=‘right’ width=‘80%’></HR>  
20  
Tải về để xem bản đầy đủ
pdf 88 trang yennguyen 21121 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Web - Bài 2: HTML Căn bả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:

  • pdfbai_giang_thiet_ke_va_lap_trinh_web_bai_2_html_can_ban.pdf