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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (566.75 KB, 36 trang )

LẬP TRÌNH WEB VỚI HTML

TS TRẦN QUANG DIỆU

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ó đ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.
Hello World
</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:
)

 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: và )
 Thẻ HTML không phân biệt chữ hoa và chữ thường -> thẻ
 tương đương 
 Đ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.
Hello World
</body>

</html>

Thẻ bắt đầu : 

Thẻ kết thúc: 
Nội dung: Hello World
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ẻ

,

…

 Thẻ

: tiêu đề lớn nhất,

: tiêu đề nhỏ nhất

Thẻ đoạn văn bản (Paragraph tags)
 Thẻ

Thẻ xuống dòng (Line breaks tags)
 Xuống dòng trong một đoạn
 Thẻ

7

CÁC THẺ HTML CƠ BẢN
<html>
<body>

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

Paragraph 1

Hello World.
This is the first paragraph

Paragraph 2

Hello World.
This is the second paragraph

</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)

 Khn 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">

Test HTML Attributes

Paragraph 1

Line 1

Line 2

Paragraph 2

Line 1

Line 2

</body>
</html>
10

CÁC THẺ ĐỊNH DẠNG VĂN BẢN
Các thẻ định dạng văn bản
 , <big>, , …

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>,

, <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>
 Bai tap so 1 

<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>

<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)

Bảng tra một số thực thể ký tự

14

 
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ụ:

LAP TRINH WEB



<a href=" />
<a href="#Chapter1">Nhay toi Chuong 1</a>


<a href="#Chapter2">Nhay toi Chuong 2</a>


</pre>

<img src="Test_Hyperlink.jpg"></img>


<a name="Chapter1"><strong>Chuong 1</strong></a>
…
<a name="Chapter2"><strong>Chuong 2</strong></a>

…

</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>
18

 
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

 
HTML TABLES
Một số thẻ thường sử dụng
 <th>: định nghĩa tiêu đề, là thẻ con trong thẻ <tr>
 <caption>

Một số thuộc tính thường sử dụng
 border: độ dày đường bao
 align: căn lề

 bgcolor: màu nền
 Background: ảnh nền
 colspan: định nghĩa số cột của cell
 rowspan: định nghĩa số dòng của cell
…
21

 
HTML TABLES
Cell that spans two columns:


<table border="8">
<tr bgcolor="yellow">
<th>Name</th>
<th colspan="2">Telephone</th>

</tr>
<tr>
<td>Bill Gates</td>

<td>555 77 854</td>
<td>555 77 855</td>
</tr>

Cell that spans two rows:

<table border="3">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>

<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</table>
22

 
HTML LISTS
HTML Lists: biểu diễn các danh sách trong tài liệu HTML
Phân loại
 Danh sách không sắp xếp: <ul>, <li>
 Danh sách có sắp xếp: <ol>, <li>
 Danh sách tự định nghĩa: <dl>, <dt>, <dd>

<ol>
<ul>
<li>Coffee</li>
<li>Coffee</li>
<li>Milk</li>
<li>Milk</li>
</ol>
</ul>

1.Coffee

•Coffee
•Milk
2.Milk

23

 
HTML LISTS
Disc bullets list:

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
</ul>
Circle bullets list:

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
</ul>
Square bullets list:

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
</ul>
24

 
HTML FORMS
HTML Forms: tương tác, cho phép người dùng nhập các thông tin thông qua các điều
khiển thành phần (textbox, radio, drop down list…)
<input type=“” name=“” value=“”>


<form>
<input>
<input>
</form>

•Type: text, radio, checkbox, submit
•Name: tên của điều khiển
•Value: giá trị

<select name=“”>
<option>
<option>

</select>
25

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

,

…

 Thẻ

: tiêu đề lớn nhất,

: tiêu đề nhỏ nhất

Thẻ đoạn văn bản (Paragraph tags)
 Thẻ

Thẻ xuống dòng (Line breaks tags)
 Xuống dòng trong một đoạn
 Thẻ

7

CÁC THẺ HTML CƠ BẢN
<html>
<body>

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

Test HTML Attributes

Paragraph 1

Paragraph 2

Bai tap so 1

Cell that spans two columns:

Cell that spans two rows:

Disc bullets list:

Circle bullets list:

Square bullets list:

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

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

,

…

 Thẻ

: tiêu đề lớn nhất,

: tiêu đề nhỏ nhấtThẻ đoạn văn bản (Paragraph tags) Thẻ (adsbygoogle = window.adsbygoogle || []).push({});Thẻ xuống dòng (Line breaks tags) Xuống dòng trong một đoạn Thẻ 7 CÁC THẺ HTML CƠ BẢN<html><body>

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

Test HTML Attributes

Paragraph 1

Paragraph 2

Bai tap so 1

Cell that spans two columns:

Cell that spans two rows:

Disc bullets list:

Circle bullets list:

Square bullets list:

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

: tiêu đề nhỏ nhất

Thẻ đoạn văn bản (Paragraph tags)
 Thẻ

Thẻ xuống dòng (Line breaks tags)
 Xuống dòng trong một đoạn
 Thẻ

7

CÁC THẺ HTML CƠ BẢN
<html>
<body>