Bài giảng phát triển ứng dụng web 1 ngôn ngữ html
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 (793.39 KB, 28 trang )
9/20/23
Phát triển ứng dụng web 1
Đại Học Sài Gòn – Khoa CNTT
Ngôn ngữ HTML
4 – Ngôn ngữ HTML
4 - Ngôn ngữ HTML
2
GV: Phan Thị Kim Loan
2
2
Nội dung buổi học trước
1. Các bước thiết lập website
2. Thiết kế lập trình website
• Thiết kế giao diện
3. Xây dựng website dưới góc
nhìn ngộ nghĩnh
4 – Ngôn ngữ HTML
3
3
1
9/20/23
Nội dung
1. Giới thiệu về HTML
2. Cấu trúc 1 tài liệu HTML
3. Các tag (thẻ) HTML
4. Hướng dẫn thực hành HTML
5. Gợi ý chọn đề tài cho đồ án
4
4 – Ngơn ngữ HTML
4
Giới thiệu về HTML
§HTML (Hyper Text Markup Language): ngôn ngữ đánh
dấu siêu văn bản, dùng để xây dựng một webpage.
§HTML: chứa các thành phần định dạng để báo cho
browser biết cách hiển thị một webpage.
§Một trang web thơng thường gồm:
• Dữ liệu (văn bản, âm thanh, hình ảnh, …)
• Các tag (thẻ) HTML để định dạng mơ tả cách thức các dữ liệu
hiển thị trên trình duyệt
§Web browser: phân tích & “hiểu” các tags HTML, hiện thị
nội dung web cho người dùng
§Webpage HTML: 1 file *.htm || *.html
4 – Ngôn ngữ HTML
5
5
2
9/20/23
Trình duyệt – Trình soạn thảo
Web browser – trình duyệt web
Notepad
4 – Ngôn ngữ HTML
6
6
HTML căn bản - Tag (thẻ) HTML
<html>
<head>
<title>First page title</title>
</head>
<body>
Hello world!
It's my first html.
</body>
</html>
4 – Ngôn ngữ HTML
7
7
3
9/20/23
Cú pháp, đặc tính của HTML
<TAG ten_thuoc_tinh=“gia tri” ……..> Dữ liệu </TAG>
HTML tag:
§ Tên gợi nhớ
§ Tag được quy định trong cặp dấu ngoặc <>
§ Phần lớn tag gồm 2 phần mở <tag> và đóng </tag>
§ Một số tag chỉ có 1 phần & khơng có dữ liệu:
, <hr>
§ Cấu trúc lồng
§ Thuộc tính của tag cung cấp thơng tin bắt buộc/tùy chọn cho tag
§ Một số web browser khơng hiểu một số tag hoặc thuộc tính
§ Khơng phân biệt chữ hoa, thường
§ Bỏ qua các khoảng trắng
8
4 – Ngôn ngữ HTML
8
Cấu trúc một webpage HTML
<head>
Phần đầu trang
<title>First page title
</title>
</head>
Phần nội dung
Bắt đầu và kết thúc 1 trang
<html>
<body>
Hello world!
It's my first html.
</body>
</html>
4 – Ngôn ngữ HTML
9
9
4
9/20/23
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
10
4 – Ngơn ngữ HTML
10
Các tag HTML cơ bản
§ Tag xử lý định dạng văn bản
§Tag danh sách
§Tag tạo bảng <table>
§Tag liên kết trang <a>
§Tag hình ảnh <img>
§Tag âm thanh
4 – Ngôn ngữ HTML
11
11
5
9/20/23
Tag xử lý định dạng văn bản
§ Tiêu đề - heading tags:
, , …,
§Đoạn văn bản:
§Đoạn văn bản:
§Định dạng chuỗi: <em>, <i>, <b>, và <font>
§Đường kẻ ngang: <hr>
§Xuống dịng
§Hiển thị các ký tự đặc biệt
12
4 – Ngơn ngữ HTML
12
Ví dụ: Tag Heading
Nội dung hiện thị
Trong trình duyệt
Ngơn ngữ HTML
Trong trình soạn thảo
4 – Ngơn ngữ HTML
13
13
6
9/20/23
Ví dụ: Tag Paragraph
Thuộc tính của tag <body>
<body bgcolor=‘pink’>
14
4 – Ngơn ngữ HTML
14
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>
4 – Ngôn ngữ HTML
15
15
7
9/20/23
Định dạng chữ
Định dạng:
<font>Hello world</font>
color="#000099" size="3"> Hello world </font>
<b>This text is bold</b>
<strong>This text is strong </strong>
<big>This text is big </big>
<em>This text is emphasized </em>
<i>This text is italic </i>
<small>This text is small</small>
This text contains a<sub>2</sub>
This text contains x<sup>2</sup>= a x a
16
4 – Ngôn ngữ HTML
16
Định dạng chữ
<EM>Computer Sciences</EM>
<STRONG> Computer Sciences </STRONG>
<DFN> Computer Sciences </DFN>
<CODE> Computer Sciences </CODE>
<KBD> Computer Sciences </KBD>
<VAR> Computer Sciences </VAR>
<CITE> Computer Sciences </CITE>
<BLINK> Computer Sciences </BLINK>
<DEL> Computer Sciences </DEL>
<INS> Computer Sciences </INS>
4 – Ngôn ngữ HTML
17
17
8
9/20/23
Định dạng theo tag <Pre>
Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng,
xuống dịng, tag,…)
18
4 – Ngơn ngữ HTML
18
Các ký tự đặc biệt
§Hiển thị các ký tự đặc biệt
Result
Description
Entity name
Entity number
Khoảng trắng
&
Dấu và
&
&
“
Ngoặc kép
"
"
<
Nhổ hơn
<
<
>
Lớn hơn
>
>
..v ..v..
Ví dụ:
Để hiển thị được: <Dai hoc sai Gon> & “SGU”
<Dai hoc sai Gon> ; &
; ; "SGU"
HTML special character --à Google
4 – Ngôn ngữ HTML
19
19
9
9/20/23
Tag hình ảnh
§<img> : Khơng có thẻ đóng
§
§Các thuộc tính của tag <img>:
–src : Đường dẫn đến file hình ảnh
–alt : Chú thích cho hình ảnh
-width: chiều rộng của hình khi hiển thị
-height: chiều dài của hình khi hiển thị
–position: Top, Bottom, Middle
–border : Độ dày nét viền quanh ảnh (default=0)
20
4 – Ngơn ngữ HTML
20
Tag hình ảnh
§Giá trị mặc định của 2 thuộc tính width, height là kích
thước thật của file ảnh.
§Đặt ảnh nền cho trang web
–Sử dụng thẻ <body background=‘Image Path’>
§ ví dụ:
<body>
=“45” height=“45” ></body>
4 – Ngôn ngữ HTML
21
21
10
9/20/23
Tag âm thanh
§<bgsound> : Khơng có tag đóng
§Thuộc tính của tag <bgsound>
–SRC : Đường dẫn đến file âm thanh
–Loop : Số lần lặp (bằng -1 : Lặp vô hạn)
–<bgsound> Thường đặt trong tag <head> của web.
§Ví dụ: <BGSOUND src=‘batman.mid’ LOOP=‘1’>
§Tag comment – Ghi chú trong HTML
<!-- Nội dung ghi chú -->
22
4 – Ngôn ngữ HTML
22
Tag danh sách
Types
Tags
Items in List
Ordered List
<ol>
<li>
Unordered List
<ul>
<li>
List Item
<li>
User-defined List
<dl>
<dt>, <di>
§ Thuộc tính type của các tag danh sách
§Xem các ví dụ
4 – Ngơn ngữ HTML
23
23
11
9/20/23
Tag danh sách
§Vd: Danh sách có thứ tự:
24
4 – Ngơn ngữ HTML
24
Danh sách có thứ tự
4 – Ngơn ngữ HTML
25
25
12
9/20/23
Danh sách khơng có thứ tự
§Vd: Danh sách khơng có thứ tự:
4 – Ngôn ngữ HTML
26
26
Danh sách tự định nghĩa
4 – Ngôn ngữ HTML
27
27
13
9/20/23
Tag liên kết trang - URL
§ protocol://site address/directory/filename
§ Các dạng địa chỉ HTTP:
§ http://server/
/>
§ http://server/file
/>
§ http://server/directory/
/>
§ http://server/directory/file
/>28
4 – Ngơn ngữ HTML
28
Tag liên kết trang - URL
§ http://server/directory/file#marker
/>
§ http://server/directory/file?parameters
/>
§ http://server:port/directory/file
:8080/products/greetings.html
§ ftp://user:password@server:port/directory/file
4 – Ngôn ngữ HTML
29
29
14
9/20/23
Tag liên kết trang - URL
§ Tag liên kết trang – Tag <a> (anchor)
§ Cú pháp:
<a href = “URL” target = ‘…’> Linked content </a>
§ Thuộc tínht target của tag <a>
• name: tải trang web vào frame có tên là name
• blank: tải trang web vào cửa sổ mới
• parent: tải trang web vào cửa sổ cha của nó
• self: tải trang web vào chính cửa sổ hiện hành
• top: tải trang web vào cửa sổ cao nhất
• Ví dụ:
30
4 – Ngơn ngữ HTML
30
Phân loại liên kết
Phân loại:
§ Liên kết ngoại (external link)
§ Liên kết nội (internal link)
§ Liên kết email (email link)
4 – Ngôn ngữ HTML
31
31
15
9/20/23
Liên kết ngoại (external link)
<a href = “URL> Linked content </a>
……………………………
……………………………
……………………………..
……………………………
……………………………
……………………………..
PAGE A
……………………………
……………………………
…………………………….
PAGE B
Mouse-Click
……………………………
……………………………
…………………………….
Trang có địa chỉ URL
PageB.html
Trang hiện hành
PageA.html
32
4 – Ngôn ngữ HTML
32
Liên kết nội (internal link)
<a name = “TenViTri”> Vị trí bắt đầu </a>
<a href = “#TenViTri”> Text đại diện </a>
……………………………
…………………………..
…….………………………
…… Text đại diện
…………………………..
……………………………
… Vị tri bat dau
………abc123xyz…….
Nội dung trang khi
…….………………………
…… Text đại diện
Mouse-Click
…………………………..
……………………………
… Vị tri bat dau
………abc123xyz…….
……………………………
…………………………….
Nội dung trang khi
bấm liên kết
chưa liên kết
4 – Ngôn ngữ HTML
33
33
16
9/20/23
Liên kết email (email link)
<a href = “mailto:emailAddress”> Liên hệ Admin </a>
……………………………
……………………………
……………………………..
Liên hệ Admin Mouse-Click
……………………………
……………………………
…………………………….
34
4 – Ngôn ngữ HTML
34
Phân loại URL
<a href = “URL” target=‘….’> Link content </a>
§ Địa chỉ URL phân làm 2 loại:
• Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng
Internet
• Địa chỉ tương đối: là vị trí tương đối so với trang web
hiện hành đang chứa liên kết.
§ Một số ký hiệu đường dẫn đặc biệt:
Ký hiệu
Ý nghĩa
/
Trở về thư mục gốc của site
./
Thư mục hiện tại của webpage sử dụng link (mặc định)
../
Quay ra thư mục cha/ đi ngược 1 cấp thư mục
4 – Ngôn ngữ HTML
35
35
17
9/20/23
Phân loại URL
file A có link đến file B, vậy file A
có HTML element:
<a href = “URL” target=‘….’>
Liên kết đến B </a>
§ URL =
http://172.0.0.1/demo/Thumuc1/fileB.html
/demo/Thumuc1/fileB.html
./Thumuc1/fileB.html
Thumuc1/fileB.html
36
4 – Ngơn ngữ HTML
36
Phân loại URL
file B có link đến file C, vậy file B
có HTML element:
<a href = “URL” target=‘….’>
Liên kết đến C </a>
§ URL =
http://172.0.0.1/demo/Thumuc1/Thumuc1_
1/fileC.html
/demo/Thumuc1/Thumuc1_1/fileC.html
./Thumuc1_1/fileC.html
Thumuc1_1/fileC.html
4 – Ngôn ngữ HTML
37
37
18
9/20/23
Phân loại URL
file C có link đến file D, vậy file C
có HTML element:
<a href = “URL” target=‘….’>
Liên kết đến D </a>
§ URL =
http://172.0.0.1/demo/Thumuc1/Thumuc1_
2/fileD.html
/demo/Thumuc1/Thumuc1_2/fileD.html
./../Thumuc1_2/fileD.html
../Thumuc1_2/fileD.html
38
4 – Ngơn ngữ HTML
38
Phân loại URL
file D có link đến file F, vậy file D
có HTML element:
<a href = “URL” target=‘….’>
Liên kết đến F </a>
§ URL =
http://172.0.0.1/demo/Thumuc2/fileF.html
/demo/Thumuc2/fileF.html
./../../Thumuc2/fileF.html
../../Thumuc2/fileF.html
4 – Ngôn ngữ HTML
39
39
19
9/20/23
Phân loại URL
file F có link đến file E, vậy file F
có HTML element:
<a href = “URL” target=‘….’>
Liên kết đến E </a>
§ URL =
http://172.0.0.1/demo/Thumuc1/Thumuc1_
2/Thumuc1_2_1/fileE.html
/demo/Thumuc1/Thumuc1_2/Thumuc1_2_1
/fileE.html
../Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE
.html
40
4 – Ngơn ngữ HTML
40
Phân loại URL
file E có link đến file A ở vị trí xác
định X, vậy file E có HTML element:
<a href = “URL” >
Liên kết đến A tại X </a>
§ URL = ../../../fileA.html#positionX
4 – Ngơn ngữ HTML
41
41
20
9/20/23
Phân loại URL
§ Bài tập:
Nội dung về: Phân loại các URL
Reference from: GV. Trần Thị Bích Hạnh (2007)
Bài giảng Mơn Lập trình và thiết kế web, K.CNTT, ĐHKHTN
42
4 – Ngơn ngữ HTML
42
Tag kẻ bảng - Table
Tên thẻ và các thuộc tính của thẻ
Tên thẻ / T. tính
Mơ tả
<table> </table>
Khởi tạo 1 bảng
<tr> …</tr>
Tạo 1 dòng, thẻ <tr> nằm trong thẻ <table>
<th> …</th>
Tạo 1 ô tiêu để, thẻ <th> nằm trong thẻ <tr>
<td> …</td>
Tạo 1 ô, thẻ <td> phải nằm trong thẻ <tr>
Colspan
Thiết lập ơ có độ rộng bằng bao nhiêu cột
Rowspan
Thiết lập ơ có độ cao bằng bao nhiêu dịng
Background
Thiết lập ảnh nền cho thẻ <table>, <td>, <tr>
Bgcolor
Thiết lập màu nền cho thẻ <table>, <td>, <tr>
§ Ví dụ minh hoạ
4 – Ngôn ngữ HTML
43
43
21
9/20/23
Tag kẻ bảng - Table
Show
Code
<table border = "1">
<tr>
<th> STT </th>
<th> Ho va Ten </th>
</tr>
<tr>
<td>1</td>
<td>Do Minh Tung</td>
</tr>
<tr>
<td>2</td>
<td>Cao T. Phuong Thanh</td>
</tr>
<tr>
<td>3</td>
<td>Phan Thi Kim Loan</td>
</tr>
</table>
44
4 – Ngôn ngữ HTML
44
Colspan Table Tag
Show
Code
<table border = "1">
<tr>
<th> Name </th>
<th colspan="2"> Cellphone </th>
</tr>
<tr>
<td>Phan Thi Kim Loan</td>
<td>88352100</td>
<td>86251160</td>
</tr>
</table>
4 – Ngôn ngữ HTML
45
45
22
9/20/23
Rowspan Table Tag
Show
Code
<table border = "1">
<tr>
<th> First Name: </th>
<td>Phan Thi Kim Loan</td>
</tr>
<tr>
<th rowspan="2">Cellphone:</th>
<td>86251160</td>
</tr>
<tr>
<td>88352100</td>
</tr>
</table>
46
4 – Ngôn ngữ HTML
46
Attribute Table Tag
Show
Background
Bgcolor
4 – Ngôn ngữ HTML
Code
<table border = "1" background="Candle.jpg">
<tr>
<td>Puppy</td>
<td>Piggy</td>
<tr>
<td>Kitty</td>
<td>Mummy</td>
</table>
</tr>
</tr>
<table border = "1">
<tr>
<td bgcolor="#CCFFFF">Puppy</td>
<td>Piggy</td>
</tr>
<tr>
<td>Kitty</td>
<td background = “C.jpg">Mummy</td>
</tr>
</table>
47
47
23
9/20/23
Một số ví dụ Table
Picture reference from: GV. Trần Thị Bích Hạnh (2007)
Bài giảng Mơn Lập trình và thiết kế web, K.CNTT, ĐHKHTN
48
4 – Ngơn ngữ HTML
48
Một số ví dụ Table
4 – Ngôn ngữ HTML
49
49
24
9/20/23
Tham khảo
§ />§ />§ />§Lisa Fiedor, HTML Basics, DELTA Instructional
Services, , 2007
§Bài tập:
/>50
4 – Ngơn ngữ HTML
50
Bài thực hành
Đại Học Sài Gịn – Khoa CNTT
Ngôn ngữ HTML
4 – Ngôn ngữ HTML
4 - Ngôn ngữ HTML
51
GV: Phan Thị Kim Loan
51
51
25
