thiết kế web - ngôn ngữ html

Một trang web thông thường gồm:  Dữ liệu văn bản âm thanh hình ảnh  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

Trang 1

ĐẠI HỌC SÀI GÒN – KHOA CNTT

Trang 2

Nội dung buổi học trước

1 Các bước thiết lập website

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

 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

R Web broser: 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 5

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

Web browser – trình duyệt web

Trang 7

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

R  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 9

Cấu trúc 1 tài liệu HTML

<ht l></ht l> Đị h hĩ h i ủ ă bả

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

<body></body> : Xác định vùng thân của trang web,

nơi chứa các thông tin

Trang 14

width : Chiều dài đường kẻ ngang

size : Bề rộng của đường kẻ ngang

Trang 15

Định dạng chữ

<f t>H ll ld</f t>

Hello world

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

color="#000099" size="3"> Hello world

This text is bold

This text is strong

<big>This text is big </big>

This text is emphasized

This text is italic

R This text is italic

This text is small

This text contains a2

K This text contains a2

This text contains x2= a x a

Trang 16

Định dạng chữ

Computer Sciences

Computer Sciences

<DFN> Computer Sciences </DFN>

<CODE> Computer Sciences </CODE>

<KBD> Computer Sciences </KBD> TextFormat.html

KBD Computer Sciences /KBD

<VAR> Computer Sciences </VAR>

<CITE> Computer Sciences </CITE>

<BLINK> Computer Sciences </BLINK>

<DEL> Computer Sciences </DEL>

Trang 17

Định dạng theo tag <Pre>

Hiển thị đúng dạng văn bản đã soạn thảo (khoảng

Trang 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ấ à

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

& Dấu và & &

“ Ngoặc kép " "

< Nhỏ hơn < <

Lớ hơ

> Lớn hơn > >

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

<Dai hoc sai Gon>&nbsp ; &amp

Trang 19

R 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

K position: Top, Bottom, Middle

border : Độ dày nét viền quanh ảnh (default=0)

Trang 20

Tag hình ảnh

Giá t ị ặ đị h ủ 2 th ộ tí h idth h i ht là kí h

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

Tag âm thanh

<bgsound> : Không có tag đóngg g g g

Thuộc tính của tag <bgsound> Sound.html

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 ‘b id’ LOOP ‘1’

R Ví dụ: <BGSOUND src=‘batman.mid’ LOOP=‘1’>

Tag comment – Ghi chú trong HTML

Trang 22

List Item <li>

User-defined List <dl> <dt>, <di>

Trang 27

Tag liên kết trang - URL

Trang 28

Trang 29

Tag liên kết trang Tag <a> (anchor)

Tag liên kết trang – Tag <a> (anchor)

 Cú pháp:

<a href = “ URL ” target = ‘…’> Linked content </a>

 Thuộc tính 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

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

Trang 31

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

Trang 32

Liên kết nội (internal link)

< “T ViT i”> Vị t í bắt đầ </ >

Nội dung trang khi

Nội dung trang khibấm liên kết

Trang 33

Liên kết email (email link)

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

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

Trang 34

Phân loại URL

<a href = “URL” target=‘….’> Link content </a>

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

./ Thư mục hiện tại của webpage sử dụng link (mặc

Trang 35

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

có HTML element:

Trang 36

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

Thumuc1_1/fileC.html

Trang 37

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

/Thumuc1_2/fileD.html

Trang 38

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

Trang 39

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

Trang 40

fil E ó li k đế fil A ở ị t íxác định X, vậy file E có HTML element:

Trang 41

Trang 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

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

<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

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

Trang 44

Colspan Table Tag

Trang 45

Rowspan Table Tag

Trang 46

Attribute Table Tag

Trang 47

K 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

Trang 50

ĐẠI HỌC SÀI GÒN – KHOA CNTT

Trang 51

Giới thiệu 1 số website tham khảo làm đồ án

Trang 52

Trang 53

Trang 54

Bài thực hành HTML

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

Thời gian giao: Buổi đầu Tuần 02

Thời gian nộp: Buổi đầu Tuần 03

 Yêu cầu:

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

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

Tiêu đề	Thiết kế Web - Ngôn ngữ HTML
Tác giả	Nhóm Tác Giả
Người hướng dẫn	GV: Trần Đình Nghĩa
Trường học	Đại Học Sài Gòn
Chuyên ngành	Thiết kế Web
Thể loại	Báo cáo thực tập
Năm xuất bản	2011
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	54
Dung lượng	4,06 MB