NGÔN NGỮ THIẾT KẾ WEB

Các phần tử phải được lồng nhau đúng cách ● Phải có đặt ở dạng chuẩn (wellformed) ● Tên gọi của thẻ đều phải viết thường ● Tất cả các thẻ phải được đóng lại ● Các thẻ rỗng cũng phải được đóng lại ● Các giá trị của thuộc tính phải được đặt trong dấu nháy kép ● Việc tối giản thuộc tính là bị nghiêm cấm

Trang 1

Trình bày: Nguyễn Đăng Khoa

Trang 2

Nội dung

● HTML

● HTML Form

● CSS

Trang 3

Giới thiệu

Trang 4

Quá trình phát triển

Trang 5

World Wide Web Consortium

Trang 6

•Khai báo DTD - phiên bản của tài liệu HTML/XHTML

•Trình duyệt sẽ dựa theo khai báo này để render trang web

Document Type Declaration - DTD

Trang 7

Các thẻ HTML/XHTML

Trang 9

?

Các khác biệt quan trọng nhất

XHTML element phải được đóng lại đúng thứ tự

XHTML element phải luôn luôn đóng

XHTML element phải chữ thường

XHTML document phải có một element gốc

….

Phân biệt HTML/XHTML

Trang 10

● Các phần tử phải được lồng nhau đúng cách

● Phải có đặt ở dạng chuẩn (well-formed)

● Tên gọi của thẻ đều phải viết thường

● Tất cả các thẻ phải được đóng lại

● Các thẻ rỗng cũng phải được đóng lại

● Các giá trị của thuộc tính phải được đặt trong dấu nháy kép

● Việc tối giản thuộc tính là bị nghiêm cấm

● http://www.w3schools.com/html/html_intro.asp

Trang 12

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

Trang 15

● Thẻ có thể có nhiều attribute

● Attribute cung cấp thêm thông tin cho thẻ

Trang 19

HTML Link <a>

● <a href="http://www.w3schools.com/"

target="_blank">Visit W3Schools!</a>

● <a href="#tips">Visit the Useful Tips

Section</a>

● <a

href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>

Trang 21

HTML Image

● <img>

– http://www.w3schools.com/html/html_images.asp

– <img src="url" alt="some_text"/>

● <img src="boat.gif" alt="Big Boat" />

● <img src="pulpit.jpg" alt="Pulpit rock" width="304"

height="228" />

● http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage

Trang 24

HTML <div> and <span>

Trang 26

● <table> table

● <th> table header

● <tr> table row

● <td> table cell

● <caption> table caption

● <thead> table head

● <tbody> table body

● <tfoot> table footer

● …

Các thẻ liên quan

Trang 27

● colspan: thiết lập độ rộng bằng bao nhiêu cột

● rowspan: thiết lập độ rộng bằng bao nhiêu dòng

● cellpadding: khoảng cách nội dung tới lề

● cellspacing: khoảng cách các ô với nhau

● border: thiết lập độ dày đường biên

● background: thiết lập ảnh nền

● bgcolor: thiết lập màu nền

● height: chiều cao bảng

● weidth: chiều rộng bảng

Các thuộc tính liên quan

Trang 35

Nội dung

● HTML

● CSS

Trang 36

Ví dụ

Trang 38

● Xác định những control nào được lưu trữ trong một form

Trang 40

Form fields

Trang 42

Thẻ <label>

● Định nghĩa label cho một control.

● Khi click vào text bên trong label, nó sẽ chuyển sang control

trị id của element

Trang 43

Thẻ <fieldset>

● Gom nhóm các element trong một form

● Vẽ đường biên bao xung quanh chúng

Trang 46

Thẻ <optgroup>

● Tạo nhóm các lựa chọn Cho phép gom nhóm các lựa chọn

Trang 48

Thẻ <button>

● Định nghĩa một push button

● Cho phép định nghĩa nội dung bên trong button, khác với dùng thẻ <input> để tạo một button

● Chú ý:

● Trong một form, browser khác nhau sẽ đưa

những value khác nhau

● IE: nội dung giữa 2 thẻ <button> và </button>

● Browser khác: gửi nội dung của thuộc tính

“value”

=> Nên dùng thẻ <input>

Trang 50

Form fields

Trang 51

Text field <input>

● Vùng cho phép người dùng nhập text Nhập trên một dòng

Trang 52

Text field

● Size: cho phép định nghĩa độ dài của field

Field có thể chứa bao nhiêu kí tự

● Maxlength: Bao nhiêu kí tự được gõ vào

● Name: Tên của field trong chương trình

● Value: Giá trị mặc định sẽ xuất hiện trong box

● Align: Canh lề

● Tabindex: Thứ tự của các field khi nhấn phím tab

Trang 53

Password field

● Tương tự như Text field

● Những gì nhập vào field sẽ được hiển thị dạng dấu chấm

Trang 54

Hidden field

● Tương tự Text Field

● Không hiển thị trên màn hình

● Người dùng không nhập trực tiếp giá trị vào field này được

Trang 56

Check box

● Người dùng có thể chọn 1 hoặc nhiều lựa chọn trong một tập các lựa chọn

Trang 57

Radio button

● Tương tự check box

● Chỉ cho phép người dùng chọn 1 lựa chọn

Trang 58

Drop – down menu

● Được sử dụng cùng mục đích như các radio button hoặc các check box

● Tốn ít không gian

● Người dùng không nhìn thấy đồng loạt các option

● Thẻ <select> dùng để định nghĩa một menu

● Mỗi option được định nghĩa bằng thẻ

Trang 59

Drop – down menu

Trang 60

Drop – down menu

Trang 61

Submit button

● Khi người dùng click vào submit button, form

sẽ được gửi đến một địa chỉ đã xác định

trong action của thẻ <form>

Trang 62

Reset button

● Khi người dùng click vào reset button, các entry sẽ được reset về các giá trị mặc định

Trang 63

Image button

● Tương tự như submit button

dùng nhấn tab

Trang 64

Mickey Submit

Ví dụ

Trang 65

Cơ chế Submit

Trang 67

Cơ chế hoạt động của Webserver

Trang 68

Cơ chế truyền nhận dữ liệu

Yêu cầu

trang Web B

Trang 69

Yêu cầu trang Web B

Trang 70

Yêu cầu trang Web B

Trang 71

Trang 72

trình truyền

dữ liệu ?

Trang 73

Trang 74

Textbox:txtDangNhap Passwordbox:txtPassword

Yêu cầu trang xlDangNhap.

Trang 75

Trang 76

txtDangNhap = admin txtPassword = Admin

Textbox:txtDangNhap

Passwordbox:txtPassword

Trang 77

Textbox:txtDangNhap

Passwordbox:txtPassword

Trang 78

Trang 79

Trang 80

● Trang Web nhập dữ liệu

– Sử dụng đối tượng form

– Nhập liệu thông qua các formfield

– Thực hiện việc truyền dữ liệu thông qua

submit

● Trang Web nhận dữ liệu từ URL

● Thông qua phương thức GET và POST, Webserver nhận và xử lý các yêu cầu

Trang 81

Thuộc tính Method trong FORM

Có 2 phương thức chính

Trang 83

● Get là phương thức truyền dữ liệu qua địa

chỉ URL

– Các biến được truyền thành từng cặp

biến=giá_trị phân cách bởi dấu &

– Phân cách với địa chỉ trang ban đầu bởi dấu

chấm hỏi (?)

Ví dụ: Truyền 3 biến a, b, c có giá trị lần lượt là 1,

2, -3 vào trang http://localhost/ptb2.php qua URL: http://localhost/ptb2.php?a=1&b=2&c=-3

Trang 84

Phương thức GET

● Khi ta Submit 1 form sử dụng phương thức GET

– Tên các biến là tên đối tượng trên form

– Giá trị biến là giá trị user nhập vào đối tượng

● Có thể sửa giá trị tham số trực tiếp trên URL

● Sử dụng GET khi cần truyền những tham số

đi)

Trang 85

Phương thức GET

● Có thể lưu Bookmark

● Dữ liệu được mã hóa bởi browser trong URL

● Get thường được sử dụng để lấy dữ liệu từ server về client

Trang 86

Sử dụng phương thức GET trong

Form

< form action ="xulydulieu.asp" method =“get">

Your name is:

< input type ="text" name ="uname">

< input type ="submit" name ="submit"

Trang 87

Form

Your name is:

Trang 88

Form

Your name is:

Trang 90

● POST truyền dữ liệu qua form khi submit

● Giá trị các biến không xuất hiện trên URL

● Post được đóng gói dữ liệu thành block rồi mới gởi lên Server → Bảo mật cao hơn GET

hạn chế về kích thước dữ liệu

message

sorting hoặc update date, order hoặc gởi email

Trang 91

Tóm tắt

Trang 92

Nội dung

● HTML

● HTML Form

● CSS

Trang 93

Lịch sử

bày trang web theo bố cục như tạp chí.

trên các hệ browser mới.

Trang 94

Tại sao có sự ra đời của CSS?

Trang 95

● Cascading Style Sheets

● CSS dùng để mô tả các thành phần trên trang web

Định nghĩa

Trang 96

Ví dụ

Trang 99

Các loại CSS

Trang 100

Inline CSS

<p style=“color:red; font-weight:bold;”> Test

Trang 101

<head>

h1, h2 { color: green }

UL { font-family: serif;

font-weight: bold;

font-style: oblique;

text-decoration: underline; }

</style>

</head>

</html>

Internal CSS

Trang 103

External CSS

XHTML

CSS CSS

Trang 104

</head>

<head>

</head>

@import url( URL );

@import “mystyle”;

</style>

External CSS

Trang 105

So sánh

Trang 106

<style type=“text/css” media="all | print | screen" >

CSS cho từng loại thiết bị

Trang 107

Media type

XHTML CSS for Screen

CSS for Screen

CSS for TV

CSS for print

Mobile user

TV user

External CSS

PC user

CSS cho từng loại thiết bị

Trang 108

Thứ tự override của style

Thứ tự ưu tiên

Trang 109

Cú pháp CSS

Trang 110

<tag style = “property1: value1;

property2: value2;

…

propertyN: valueN;”>…</tag>

<h1 style = “font-style: italic;

color: green;

text-decoration: underline”; > CSS <h1>

Cú pháp CSS

Trang 111

Cú pháp CSS

Trang 112

Selector Description Example

element Chọn tất cả các element có

tên như chỉ định h1 {color: red;}/* biến tất cả các tag h1 thành đỏ */

#id Chọn bất cứ tag nào với có

tập thuộc tính id #test {color: green;} /* biến tag có id=‘test’ thành xanh*/

.class Chọn bất cứ tag nào với giá

trị class như chỉ định .note {color: yellow;}/* tag có class=‘note' thành vàng*/

element.class Chọn những element xác

định với một thuộc tính class nhất định

h1.note {text-decoration: underline;} /*gạch dưới tất cả tag H1 với class=‘note' */

Grouping Áp dụng cùng luật tới một

nhóm tags. h1,h2,h3 {background-color: orange;}/* đặt màu nên tất cả h1, h2, and h3

thành cam*/

Contextual Chọn tất cả tag descendent p strong {color: purple;}

/* thiết lập các tag sau tag p thành màu tím*/

CSS Selector

Trang 113

● P, h1, title, body, ul, …

● Định dạng cho tất cả nội dung nằm

trong thẻ element của HTML

BODY

{ font: x-large EastMarket, serif;

margin: 1em 1em 1em 1em;

}

CSS Selector – HTML Element

Trang 114

CSS Selector - ID

● #id {…}

● Áp dụng cho tag có thuộc tính id=“id”

● Giá trị thuộc tính id là duy nhất trên toàn bộ trang web

Trang 115

● classname {….}

● Áp dụng cho tất cả các tag HTML có thuộc tính class=“classname”

Trang 117

● Định dạng cho một nhóm có chung một style:

Trang 118

CSS Selector - Contextual

● Định dạng áp dụng cho nội dung các thẻ lồng trong thẻ nào đó

<div> CSS - <i> Cascading Style

Trang 119

CSS Selector - Pseudo class

● Định dạng áp dụng dựa vào trạng thái của thẻ

Trang 120

CSS Selector - Pseudo element

Trang 122

M$ IE 6.0 có Box-model không theo chuẩn của W3C

“Khi làm việc với M$ IE, có thể sử dụng CSS-HACK để đảm bảo chạy đúng trên mọi browser”

CSS Box model - IE 6 vs W3C

Trang 123

CSS + XHTML = WEB PAGE

Trang 124

Quy trình làm việc - Workflow

Trang 125

Layout cho website

Trang 126

CSS-based layout

Trang 127

•Ý tưởng ban đầu đó là sử dụng thẻ

<table> để tạo khung cho website

“The Web Is Ruined, and I ruined it”

Lịch sử của Table-based layout

Trang 128

Chúng ta đã quá lạm dụng TABLE và trở thành nô lệ ??

Hãy sử dụng HTML đúng cách

Trang 129

2 Sử dụng hết các tag được cung cấp

4 Dùng css khi cần presentation

Hãy sử dụng HTML đúng cách

Trang 131

Validate mã HTML,xHTML và CSS

Trang 132

Validate mã HTML với add-on

HTML Validator của Firefox

Validate mã HTML,xHTML và CSS

Trang 135

BluePrint Framework

Trang 136

Tripoli Framework

Trang 137

● Khái niệm xưa, ứng dụng mới

● Div vs Table

Grid Framework

Trang 138

Grid builder

Trang 139

CSS Form Framework

Tiêu đề	Ngôn Ngữ Thiết Kế Web
Tác giả	Nguyễn Đăng Khoa
Trường học	Trường Đại học Công Nghệ Thông Tin
Chuyên ngành	Ngôn Ngữ Thiết Kế Web
Thể loại	Giáo trình
Năm xuất bản	2023
Thành phố	Hồ Chí Minh

Định dạng
Số trang	139
Dung lượng	3,44 MB