Bài giảng Phát triển ứng dụng web 1 Ngôn ngữ HTML

4 – Ngôn ngữ HTML 2Ngôn ngữ HTML Phát triển ứng dụng web 1 GV: Phan Thị Kim Loan Đại Học Sài Gòn – Khoa CNTT 2 Nội dung buổi học trước 1.. §Một trang web thông thường gồm: • Dữ liệu văn

Trang 1

4 – Ngôn ngữ HTML 2

Ngôn ngữ HTML

Phát triển ứng dụng web 1

GV: Phan Thị Kim Loan

Đại Học Sài Gòn – Khoa CNTT

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

Trang 2

§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

Trang 3

Trình duyệt – Trình soạn thảo

Web browser – trình duyệt web

Trang 4

§ 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: <br>, <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

Trang 5

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

§Tag tạo bảng <table>

§Tag liên kết trang <a>

§Tag hình ảnh <img>

§Tag âm thanh

Trang 6

Trong trình soạn thảo

Nội dung hiện thị Trong trình duyệt

Trang 7

• 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

Trang 8

Định dạng chữ

Định dạng:

<font>Hello world</font>

<font style="font-family: Verdana, Geneva, sans-serif "

color=" #000099 " size=" 3 "> Hello world </font>

<strong>This text is strong </strong>

<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

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

Trang 9

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

Các ký tự đặc biệt

Result Description Entity name Entity number

& Dấu và & &

§Hiển thị các ký tự đặc biệt

Ví dụ:

Để hiển thị được: <Dai hoc sai Gon> & “SGU”

<Dai hoc sai Gon>&nbsp ; &amp

; &nbsp ; "SGU"

HTML special character à Google

Trang 10

-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

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

Trang 11

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

Tag danh sách

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ụ

Trang 15

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

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)

Trang 16

Liên kết ngoại (external link)

<a href = “URL> Linked content </a>

………

PAGE A ………

………

……….

………

PAGE B ………

………

……….

Mouse-Click Trang hiện hành PageA.html Trang có địa chỉ URL PageB.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 …….

Mouse-Click Nội dung trang khi chưa liên kết Nội dung trang khi bấm liên kết …….………

…… Text đại diện ………

………

… Vị tri bat dau ……… abc123xyz …….

………

……….

Trang 17

Liên kết email (email link)

<a href = “mailto:emailAddress”> Liên hệ Admin </a>

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:

Trang 18

Phân loại URL

file A có link đến file B, vậy file A

có HTML element:

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

Phân loại URL

file B có link đến file C, vậy file B

có HTML element:

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

Trang 19

Phân loại URL

file C có link đến file D, vậy file C

có HTML element:

Liên kết đến D </a>

2/fileD.html /demo/Thumuc1/Thumuc1_2/fileD.html / /Thumuc1_2/fileD.html

/Thumuc1_2/fileD.html

38

Phân loại URL

file D có link đến file F, vậy file D

có HTML element:

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

Trang 20

Phân loại URL

file F có link đến file E, vậy file F

có HTML element:

Liên kết đến E </a>

2/Thumuc1_2_1/fileE.html /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1

/fileE.html /Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE

Liên kết đến A tại X < /a>

Trang 21

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

Tên thẻ và các thuộc tính của thẻ

Trang 24

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

Một số ví dụ Table

Trang 27

§Bài tập: HTML cơ bản, Introduction

§Thời gian giao: Cuối Lecture04

§Thời gian làm việc: 1 tuần

§ Yêu cầu:

• Viết ít nhất 4 trang *.html (1 homepage)

• Giới thiệu thông tin cá nhân và các sở thích

liên quan, chủ đề tuỳ ý.

• Các trang phải liên kết với nhau và sử dụng

tất cả các tag đã học.

Tiêu đề	Ngôn Ngữ HTML
Người hướng dẫn	GV: Phan Thị Kim Loan
Trường học	Đại Học Sài Gòn
Chuyên ngành	Khoa CNTT
Thể loại	bài giảng
Năm xuất bản	2023
Thành phố	Sài Gòn

Định dạng
Số trang	28
Dung lượng	1,28 MB