›
›

Bài giảng Lập trình Web-ASP.NET- Bài 2 - Trần Quang Diệu

Download
TS TRẦN QUANG DIỆU  
LẬP TRÌNH WEB VỚI HTML  
1
MỤC TIÊU BÀI HỌC  
Sau khi kết thúc môn học này, sinh  
viên có thể:  
Thiết kế trang web tĩnh, sử dụng HTML  
Sử dụng CSS StyleSheet và Java Script  
2
HTML CĂN BẢN  
HTML (Hyper Text Markup Language): ngôn ngữ  
đánh dấu siêu văn bản  
Mỗi file HTML (có đuôi .htm hoặc .html): file văn  
bản chứa các thẻ đánh dấu (markup tags). Thẻ  
đánh dấu này cho trình duyệt biết cách thể hiện  
trang web  
Soạn thảo file HTML:  
Notepad  
Frontpage  
Dreamweaver…  
3
TRANG WEB HELLO WORLD  
<html>  
<head>  
<title>Hello World</title>  
</head>  
<body>This is my first homepage.  
<b>Hello World</b>  
</body>  
</html>  
4
HTML ELEMENTS  
Mỗi tài liệu HTML là các file văn bản cấu thành từ các  
phần tử HTML (HTML elements). Các phần tử này  
được định nghĩa bằng các thẻ (HTML tags)  
Thẻ HTML:  
Mỗi thẻ được bao bởi 1 cặp dấu ngoặc nhọn “<“ và “>” (VD:  
<b>)  
Các thẻ HTML thường đi theo từng cặp, một thẻ bắt đầu và  
một thẻ kết thúc (VD: <b> và </b>)  
Thẻ HTML không phân biệt chữ hoa và chữ thường -> thẻ  
<b> tương đương <B>  
Đoạn văn bản ở giữa thẻ bắt đầu và kết thúc chính là nội  
dung của phần tử HTML được định nghĩa bởi cặp thẻ đó  
5
HTML ELEMENTS  
<html>  
<head>  
<title>Hello World</title>  
</head>  
<body>This is my first homepage.  
<b>Hello World</b>  
</body>  
Thẻ bắt đầu : <b>  
Thẻ kết thúc: </b>  
Nội dung: Hello World  
</html>  
Chức năng: hiển thị nội dung  
dưới dạng chữ đậm  
6
CÁC THẺ HTML CƠ BẢN  
Thẻ tiêu đề (Heading tags)  
Thẻ <h1>, <h2> … <h6>  
Thẻ <h1>: tiêu đề lớn nhất, <h6>: tiêu đề nhỏ nhất  
Thẻ đoạn văn bản (Paragraph tags)  
Thẻ <p>  
Thẻ xuống dòng (Line breaks tags)  
Xuống dòng trong một đoạn  
Thẻ <br>  
7
CÁC THẺ HTML CƠ BẢN  
<html>  
<body>  
<h1>heading 1</h1>  
<h2>heading 2</h2>  
<h3>heading 3</h3>  
<h4>heading 4</h4>  
<h5>heading 5</h5>  
<h6>heading 6</h6>  
<p>Paragraph 1</p>  
Hello World. <br> This is the first paragraph </br>  
<p>Paragraph 2</p>  
Hello World. <br> This is the second paragraph </br>  
</body>  
</html>  
8
THUỘC TÍNH CỦA CÁC THẺ HTML  
HTML attributes (Thuộc tính của thẻ HTML)  
Bổ sung các thông tin cho phần tử HTML (HTML elements)  
Khuôn dạng thuộc tính: name=“value” (ví dụ: align=“center”)  
Thường được đặt trong thẻ mở đầu  
9
THUỘC TÍNH CỦA CÁC THẺ HTML  
<html>  
<body bgcolor="yellow">  
<h1 align="center"> Test HTML Attributes </h1>  
<h3 align="right">Paragraph 1</h3>  
<p align="right">  
<br>Line 1</br>  
<br>Line 2</br>  
<h3 align="left">Paragraph 2</h3>  
<p align="left">  
<br>Line 1</br>  
<br>Line 2</br>  
</p>  
</body>  
</html>  
10  
CÁC THẺ ĐỊNH DẠNG VĂN BẢN  
Các thẻ định dạng văn bản  
<b>, <big>, <strong>, <small>…  
Các thẻ định dạng dữ liệu liên quan đến máy tính,  
ngôn ngữ lập trình…  
<code>, <kbd>, <pre>, <var>…  
Các thẻ trích dẫn, định nghĩa, chú thích…  
<blockquote>, <address>, <abbr>…  
11  
CÁC THẺ ĐỊNH DẠNG VĂN BẢN  
<html>  
<body>  
<h1> Bai tap so 1 </h1>  
<blockquote>  
Su dung tap lenh cua vi xu ly 8088/8086, hay viet chuong trinh con tao tre tuong duong voi doan chuong trinh duoc viet bang ngon ngu C duoi day.  
</blockquote>  
<pre>  
<code>  
void delay()  
{
for(i=0;i<100;i++);  
}
</code>  
</pre>  
</body>  
</html>  
12  
CÁC THỰC THỂ KÝ TỰ (CHARACTER  
ENTITIES)  
Tại sao cần sử dụng thực thể ký tự?  
Một số ký tự, ví dụ như “<“ có ý nghĩa đặc biệt trong mã HTML nên không thể biểu  
diễn trực tiếp trong một đoạn văn bản  
Khuôn dạng thực thể ký tự  
& Name ;  
& # Entity_Number ;  
13  
CÁC THỰC THỂ KÝ TỰ  
(CHARACTER ENTITIES)  
14  
Bảng tra một số thực thể ký tự  
CÁC THỰC THỂ KÝ TỰ  
(CHARACTER ENTITIES)  
15  
SIÊU LIÊN KẾT (HYPERLINK)  
HTML sử dụng các siêu liên kết để liên kết tới các tài liệu khác  
(trang web, file văn bản, âm thanh, hình ảnh…)  
Thẻ liên kết:  
<a href="url">Text to be displayed</a>  
Ví dụ:  
<a href="http://www.google.com/">Visit Google!</a>  
Các thuộc tính  
name  
target  
16  
SIÊU LIÊN KẾT (HYPERLINK)  
<body>  
<h1 align="center">LAP TRINH WEB</h1>  
<pre>  
<p>  
<br><a href="http://www.google.com.vn/">www.google.com.vn</a></br>  
<br><a href="#Chapter1">Nhay toi Chuong 1</a></br>  
<br><a href="#Chapter2">Nhay toi Chuong 2</a></br>  
</p>  
</pre>  
<p>  
<img src="Test_Hyperlink.jpg"></img>  
</p>  
<p>  
<a name="Chapter1"><strong>Chuong 1</strong></a>  
…
<a name="Chapter2"><strong>Chuong 2</strong></a>  
…
</p>  
</body>  
17  
HTML FRAMES  
Mục đích: hiển thị nhiều hơn một trang web trên một màn hình  
của trình duyệt  
Thẻ <frameset>  
Định nghĩa cách chia cửa sổ thành các khung (theo chiều dọc hoặc  
theo chiều ngang sử dụng thuộc tính rows hay columns)  
Thẻ <frame>  
Xác định file nguồn sẽ hiển thị trên khung  
<frameset cols="25%,75%">  
<frame src="frame_a.html">  
<frame src="frame_b.html">  
</frameset>  
HTML FRAMES  
<html>  
<head>  
<title>Frame Master</title>  
</head>  
<frameset rows="25%,*">  
<frame src="frame_a.html" noresize="noresize">  
<frameset cols="25%,75%">  
<frame src="frame_b.html">  
<frame src="chuong1.html" name="showframe">  
</frameset>  
</frameset>  
</html>  
19  
HTML TABLES  
HTML Tables  
Tạo bảng trong tài liệu HTML, sử dụng các thẻ  
<table>: định nghĩa bảng  
<tr>: định nghĩa hàng  
<td>: định nghĩa các ô dữ liệu trong hàng  
20  
Tải về để xem bản đầy đủ
pdf 36 trang baolam 23361 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web-ASP.NET- Bài 2 - Trần Quang Diệu", để 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_asp_net_bai_2_tran_quang_dieu.pdf