Bài giảng Thiết kế Web - ThS. Phạm Đào Minh Vũ

Bài giảng Thiết kế Web gồm có những nội dung chính sau: Chương 1 - Mở đầu về thiết kế web, chương 2 - Ngôn ngữ HTML: Phần cơ bản, chương 3 - Ngôn ngữ HTML: Phần FORM, chương 4 - CSS - Cascading Style Sheet, chương 5 - CSS: Advanced, chương 6 - Javascript, chương 7 - Javascript: Mô hình DOM. Mời các bạn tham khảo.

Mở đầu về thiết kế web

CHƯƠNG 1

Giảng viên : Ths PHẠM ĐÀO MINH VŨ

Khoa CNTT-Trường CĐ CNTT TPHCM

Email : vupdm@itc.edu.vn

Nội dung

Một số khái niệm

Mạng, giao thức, Internet

ü Mạng máy tính (Computer

Network): Hệ thống các máy

tính được kết nối với nhau

nhằm trao đổi dữ liệu

ü Giao thức: Protocol:

– Tập hợp các quy tắc được thống

nhất giữa các máy tính trong

mạng nhằm thực hiện trao đổi dữ

liệu được chính xác

– Ví dụ: TCP/IP, HTTP, FTP,…

Các dịch vụ cơ bản trên Internet

ü World Wide Web : Truy cập,

tìm kiếm thông tin

ü Email – Electronic Mail :

Trao đổi thông điệp, văn bản…

ü FTP – File Tranfer Protocol

ü Chat – Tán gẫu: Người dùng

trao đổi trực tiếp với nhau bằng văn

bản, âm thanh, hình ảnh, …

Địa chỉ IP: IP Address

ü Xác định một máy tính trong

mạng dựa trên giao thức

TCP/IP Hai máy tính trong

mạng có 2 địa chỉ IP khác nhau

ü Có dạng x.y.z.t (0 ≤ x, y, z, t ≤

255)

ü Ví dụ: 74.125.71.105: địa chỉ

máy chủ web của Google.com

ü Đặc biệt: địa chỉ: 127.0.0.1 (địa

chỉ loopback) là địa chỉ của

chính máy tính đang sử dụng

dùng để thử mạng

Tên miền: Domain Name

ü Là tên được “gắn” với 1 địa chỉ IP.

ü Máy chủ DNS thực hiện việc “gắn” (ánh

xạ)

ü Ở dạng văn bản nên thân thiện với con

người

ü Được chia thành nhiều cấp, phân biệt bởi

dấu chấm (.) Đánh số cấp lần lượt từ phải

sang trái bắt đầu từ 1.

ü Cấp lớn hơn là con của cấp nhỏ hơn

ü Ví dụ: it.dlu.edu.vn gắn với

203.162.18.59 trong đó:

– vn: Nước Việt Nam (Cấp 1)

– edu: Tổ chức giáo dục (Cấp 2)

– dlu: Tên cơ quan (Cấp 3)

– it: đơn vị nhỏ trong cơ quan (Cấp 4)

ü Đặc biệt: Tên localhost được gắn với

127.0.0.1

Máy chủ (máy phục vụ): Server

nguyên, dịch vụ cho máy tính khác.

chuyên dụng để có khả năng cung

Chuỗi định vị tài nguyên (địa chỉ): URL

(Uniform Resource Locator)

ü Tài nguyên: file trên mạng

ü URL: Xác định vị trí và cách khai thác file

– Giao thức, cổng: Được trình duyệt đặt mặc định

– Tên file: được máy chủ đặt mặc định

Trang web, web site, World Wide Web

ü Trang web: Web page:

– Là một trang nội dung

– Có thể được viết bằng nhiều ngôn

hợp các web site trên mạng internet.

Web server, Web browser

– Máy tính dùng lưu trữ các trang Web,

có kết nối Internet, cung cấp thông

tin cho người dùng

– Một số phần mềm web server chuyên

Mô hình hoạt động website

Phân loại trang web

Phân loại trang web

– Web tĩnh: Thường được viết bằng ngôn ngữ

HTML kết hợp JavaScript

– Web động:

• Thường để chỉ những website có Cơ sở dữ liệu

• Có thể được viết bằng ngôn ngữ ASP, ASP.NET, PHP, JSP, … với CSDL có thể là Access, SQLServer, MySQL, Oracle, …

• Khó khăn trong thay đổi, cập nhật thông tin

• Thông tin cố định, không mang tính linh hoạt

• Khó tích hợp, nâng cấp, mở rộng.

• Tương tác yếu

• Thực hiện các tác vụ phức tạp với độ bảo mật cao

như : mua bán, thanh toán trực tuyến,…

• Ít tốn công sức cập nhật thông tin

Một số bước chính trong phát triển website

– Nội dung từng trang

– Liên kết giữa các trang

– Cấu trúc thư mục

– Các modul dùng chung

– …

Công bố website trên Internet

Các điều kiện cần thiết

ü Xây dựng website

ü Quyền sử dụng hợp pháp

ü Domain (tên miền)

– Sử dụng tên miền con miễn phí

– Đăng ký tên miền riêng

ü Hosting

– Sử dụng miễn phí

– Thuê không gian riêng

– Tự host website của mình

ü Duy trì và phát triển và quảng bá website

Đăng ký tên miền

– Tên tiếng Việt

– Tên giao dịch tiếng Anh

– Tên viết tắt

– Thủ tục đơn giản, nhanh chóng

– Kinh phí rẻ

• Việt Nam: 450.000+480.000/năm

• Nước ngoài: 8 – 12USD

ü Xác định môi trường vận hành của website

– Máy chủ Windows

• Support ASP, PHP…, SQL Server, MySQL…

• Đắt hơn máy chủ Linux – Máy chủ Linux

• Support PHP, JSP…, MySQL…

• Rẻ hơn máy chủ Windows

ü Xác định dung lượng thực tế của website, khả

năng sẽ mở rộng

ü Xác định băng thông, các dịch vụ đảm bảo an

toàn, an ninh, backup dữ liệu…

Phát triển website

– Sử dụng thư điện tử

– Đầu tư quảng cáo 1 đợt trên

các phương tiện truyền thông

(Báo, đài, Tivi…)

loại

– Trao đổi banner

– Giới thiệu lẫn nhau

Quảng bá website

– Đăng ký Website vào các máy tìm

kiếm trong nước và thế giới

– Biến Website thành một môi

trường kinh doanh thực sự hiệu

quả 24/24 trên Internet.

Ngôn ngữ HTML

Phần cơ bản

CHƯƠNG 2

Giới thiệu HTML

ü HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản, dùng để thiết kế trang web

ü Mô tả cách thức mà dữ liệu được hiển thị thông qua các ký hiệu đánh dấu gọi là tag (Element)

ü File HTML phải có đuôi HTML hoặc HTM

ü File HTML có thể được tạo bất kỳ trình soạn thảo web hoặc văn bản nào

ü HTML trở thành 1 chuẩn của Internet do tổ chức World Wide Web Consortiun (W3C) phát triển và duy trì

Ví dụ HTML

This is my first homepage

<b>This text is bold</b>

</body>

</html>

HTML Elements (Tag)

ü HTML là văn bản bao gồm các HTML Element,

Hay được gọi là các HTML Tag

ü Mỗi tag có 1 tên, được bao giữa 2 kí tự “<“ và

“>”

ü Tag thường đi theo cặp Ví dụ <b> </b>

ü Thẻ đầu tiên gọi là thẻ mở (<b>), thẻ sau gọi làthẻ đóng (</b>)

HTML Tag

ü HTML tag không phân biệt hoa thường <b>

giống <B>

– Nội dung của HTML Element là : This text is bold

– Khi hiển thị trên trình duyệt : This text is bold

– Mục đích của thẻ b là in đậm văn bản nằm trong nó

<b>This text is bold</b>

This is my first homepage

<b>This text is bold</b>

</body>

This is my first homepage

<b>This text is bold</b>

Chú ý

Mặc dù thẻ HTML khôngphân biệt hoa thường vànhiều trang web sử dụngchữ hoa Thế nhưng để phùhợp với các tiêu chuẩn mớinhất của web ta sẽ sử dụng

chữ thường cho tất cả các

thẻ HTML

<title> Title here </title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<! other head information here >

Thẻ DOCTYPE

thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng

Transitional

render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quick mode) mà không theo chuẩn

Cấu trúc trang HTML đơn giản

DOCTYPE

Click chuột phải , nhấn view source

<html>

<head>

<title> Title here </title>

<! other head information here >

Thẻ html

ü <HTML> </HTML> : Bắt đầu và kết thúc tập tin

HTML

ü <HEAD> </HEAD> : Phần đầu trang web

ü <META>…</META> : Khai báo thông tin trang web

ü <TITLE> Nội dung tiêu đề </TITLE> : Hiển thị nội dung

trên thanh tiêu đề

ü <link> : Là tag rỗng, chứa khai báo đến các tập tin có liên

quan như tập tin định dạng thể hiện (.css), xử lý (.js),…

ü <BODY> Nội dung trên trang </BODY> : Hiển thị nội

dung trên trang.

ü <Style></Style> : Khai báo mẫu định dạng chung cho 1

Element nào đó (tag <h1>, <div>, <body>,…)

ü <Script><Script> : Khai báo phần ngôn ngữ tham gia xử

lý trang web, như Javascript, Vbscript, …

ü Hầu hết trình duyệt đều hiển thị các thẻ heading

tô đậm và sử dụng font lớn hơn bình thường h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất

ü Thẻ heading dùng để đánh dấu các đoạn text

mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản

Lưu ý

ü Nhớ đóng thẻ

ü Quên đóng thẻ là lỗi rất hay mắc phải

ü Lỗi này khiến 1 số trình duyệt hiển thị sai Tuy 1

số có thể hiển thị đúng nhưng sẽ không đúng

trong mọi trường hợp

ü Việc quên đóng thẻ sẽ khiến mã nguồn HTML khó đọc, khó sửa khi có lỗi xảy ra

ü Không đóng thẻ là không tuân theo chuẩn web

<p>This is a paragraph

<p>This is another paragraph

Ngắt dòng – Thẻ br

nhưng không phải để bắt đầu 1 đoạn văn

Thẻ br demo

<p>This <br/> is a para<br/>graph with line breaks</p>

HTML Attributes

ü Bên cạnh tên, HTML Tag có thể có thêm các

thuộc tính

<body bgcolor = ”red”>Hello World</body>

Tên thuộc tính Thuộc tính

element bgcolor qui định

màu nền cho body Giá trị thuộc tính

bgcolor = “red” Màunền trang web sẽ có

màu đỏ

Dấu nháy kép ( ”)hoặc

đơn (‘) dùng để đánh dấu

bắt đầu và kết thúc củagiá trị thuộc tính

Ví dụ HTML Attribute

– center : canh giữa

– left : canh trái

– right : canh phải

<h1 align = ”center”>My page<h1>

Ví dụ HTML Attribute

Ví dụ HTML color

BẢNG MÃ MÀU Tên màu Trị Tên màu Trị

Black Đen #000000 Olive Nâu vàng #808000

Red Đỏ #FF0000 Teal Nâu sẫm #008080

Blue Xanh #0000FF Maroon Nâu #800000

Demo HTML color

<body bgcolor="#000000">

<font color="#FF0000">

<p>

Quê hương tôi có con sông xanh biếc<br/>

Nước trong xanh soi bóng những hàng tre<br/>

Cách lấy màu hexa

Làm sao ta biết giá trị hexa của nó ?

– Là ảnh : Sử dụng các chương trình chỉnh sửa ảnh như Photoshop Dùng tính năng Eye Drop ( )

– Là web : Dùng add-on ColorZilla của

Firefox (Download tại colorzilla.com) Sau khi install,

click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu – Một cách khác là vào trang http://colorpicker.com

– Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản Trình duyệt tự do hiển thị theo cách của mình.

Thẻ định dạng vật lý

<i> … </i> In nghiêng

Demo thẻ định dạng vật lý

<b>This text is bold</b><br/>

<i>This text is italic</i><br/>

<big>This text is big</big><br/>

</acronym> Cụm từ viết tắt (acronym).Ví dụ WWW) Thường

<cite> … </cite> Trích dẫn nguồn In nghiêng

<code> … </code> Mã nguồn Chìều dài cố định

</p>

Demo thẻ định dạng logic

Lưu ý

ü Dùng thẻ định dạng vật lý, tất cả

các trình duyệt đều hiển thị đoạn

văn bản giống nhau( ví dụ thẻ <b>

thì đều sử dụng font đậm)

ü Thẻ định dạng logic, không qui định

việc hiển thị mà qui định loại hay

ngữ nghĩa của văn bản Các trình

duyệt khác nhau có thể hiển thị

khác nhau

ü Để thay đổi hiển thị của thẻ logic,

ta phải dùng CSS

HTML Preformat

trắng và các kí tự xuống dòng khi hiển thị trang HTML

ü<body>Xem ví dụ :

for i = 1 to 10

print i next i

</body>

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for

displaying computer code:</p>

SPACES and

RETURNS are lost.

</p>

Địa chỉ với thẻ address

Viết tắt với abbr, acronym

<abbr title="United Nations">UN</abbr>

<br>

<acronym title="World Wide Web">WWW</acronym>

<p>The title attribute is used to show the spelled-out

version when holding the mouse pointer over the acronym or abbreviation.</p>

<p>This only works for the acronym element in IE 5.</p>

<p>This works for both the abbr and acronym element in

Netscape 6.2.</p>

Viết từ phải qua trái với thẻ bdo

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

</p>

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

</p>

Đánh dấu chèn, xóa với ins, del

ü Câu trả lời là dùng HTML Entities

ü HTML Entities là các kí tự đặc biệt được ghi dưới 2 dạng sau :

– Kí tự & + Tên + Kí tự ;

– Kí tự & + Kí tự # + Số + Kí tự ;

Các HTML entities phổ biến

tên Thực thểdùng số

not work in IE) &#39;

Một số HTML Entities khác

Kết quả Mô tả Thực thể dùng

tên Thực thể dùng số

Substitute the "X" with an

entity number like "#174" or an

entity name like "pound" to see

the result

</p>

</body>

</html>

HTML List

– Danh sách không thứ tự (unordered list)

– Danh sách có thứ tự (ordered list)

– Danh sách định nghĩa (definition list)

Unordered list

ü Một danh sách không thứ tự bao gồm nhiều mục Mỗi mục sẽ được đánh dấu bằng 1 bullet (thường hình tròn màu đen)

ü Danh sách bắt đầu bằng thẻ <ul>

ü Mỗi mặt hàng bắt đầu bằng thẻ <li>

Các loại danh sách không thứ tự

thể thay đổi hình dáng của bullet trong

danh sách

– disc => bullet hình tròn tô đen

– circle => bullet hình tròn đen không tô

– square => bullet hình vuông

Demo kiểu danh sách không thứ tự

Ordered list

ü Một danh sách có thứ tự cũng gồm nhiều mục

Nhưng mỗi mục lại được đánh số từ 1,2,3

ü Danh sách có thứ tự bắt đầu bằng thẻ ol (ordered list)

ü Mỗi mục bắt đầu bằng thẻ <li>

Các loại danh sách có thứ tự

ü Sử dụng thuộc tính type của thẻ ol, ta có thể

thay đổi cách đánh số trong danh sách có thứ tự

ü Nếu không có thuộc tính type, đánh số từ 1,2,3

Demo kiểu danh sách thứ tự

Ví dụ danh sách lồng

Danh sách định nghĩa

gồm nhiều mục Mỗi mục bao gồm 1 từ

khóa (term) và một định nghĩa

(description) cho từ khóa đó

(definition list)

– Thẻ dt (definition term) đánh dấu từ khóa

– Thẻ dd (definition description) đánh dấu định nghĩa

HTML Link

ảnh, 1 file âm thanh

trong nội bộ 1 trang

Thẻ <a>

ü Cú pháp :

ü Trong đó :

– href là địa chỉ của tài nguyên cần trỏ tới

– name là tên của liên kết (tùy chọn – sử dụng khi dùng anchor)

– target qui định cửa sổ nào sẽ mở tài nguyên được liên kết

• target = _blank : mở liên kết trong 1 cửa sổ mới

• target = _self : mở liên kết trong cửa sổ hiện tại

• target = _parent: mở liên kết trong cửa sổ cha của cửa sổ hiện tại

<a href=”url” name=” ” target=” ”> Mô tả liên kết</a>

Ví dụ

tuoitre.com sẽ được mở trong 1 cửa sổ

mới

<a href= http://www.itc.edu.vn ”> Trường CĐ CNTT</a>

<a href=http://tuoitre.com.vn” target=”_blank”> Báo Tuổi trẻ</a>

ü Để có thể liên kết đến 1 nơi nào đó trong nội bộ

trang Ta phải :

– Đánh dấu (Bookmark) vị trí bằng cách sử dụng thuộc

tính tên của thẻ <a> Ví dụ : ta đánh dấu vị trí trên cùng của trang web :

– Sau đó liên kết đến vị trí vừa đánh dấu sử dụng thẻ <a>

và thuộc tính href hoặc

<a name=”top”/> Chapter 1</a>

<a href=”#top”/> Go to Chapter 1</a>

<a href=”http://ebook.com/chapter1.html#top”/>

Go to Chapter 1</a>

Địa chỉ URL

– Tuyệt đối : Địa chỉ tuyệt đối bao gồm cả tên

miền của website

– Tương đối : Địa chỉ tương đối chỉ chứa đường dẫn đến tài nguyên so với thư mục hiện tại

<a href=”page1.htm”/> Trang 1</a>

<a href=” /Chapter2/page1.htm”/> Chapter 2 Trang 1</a>

Đường dẫn tương đối

WE ARE HERE

/Index.html

Section2.html

/Chapter2/Section1.html

Kí hiệu đặc biệt

Thuộc tính thẻ <img>

ü src : URL của hình ảnh Ví dụ

<img src = ” http://www.w3schools.com/images/pulpit.jpg ”/>

ü alt : Đoạn text mô tả hình ảnh Sẽ được hiện khi

hình không tìm thấy hoặc chưa nạp kịp

<img src = ” http://www.w3schools.com/images/pulpit.jpg ”

alt= ”Đây là cái vách núi” />

ü width, height : Dùng để qui định kích thước hiển thị của ảnh Ta có thể dùng để phóng lớn, hoặc thu

nhỏ ảnh

<img src = ” http://www.w3schools.com/images/pulpit.jpg ”

alt= ”Đây là cái vách núi” width= ”200px” height= ”200px”/>

Hình sẽ được hiển thị với kích thước 200x200

Cú pháp thẻ <table>

dấu bằng <tr> (table row)

được đánh dấu bằng thẻ <td> (table data)

ảnh, văn bản hay 1 bảng khác

Tiêu đề trong bảng

ü Tiêu đề được đánh dấu sử dụng thẻ <th>

ü Dòng tiêu đề là dòng đầu tiên của bảng

Các thuộc tính của <table>

cellpadding

cellspacing

border