chuong 3 cong cu tk web html

• Do Tim Berner Lee phát minh và được W3C World Wide Web Consortium đưa thành chuẩn năm 1994 • Các trang Web đầy sinh động mà bạn thấy trên WWW là các trang siêu văn bản được viết bằng

Trang 1

Chương 3 MỘT SỐ CÔNG CỤ THIẾT KẾ

WEBSITE

Chương 3 MỘT SỐ CÔNG CỤ THIẾT KẾ

WEBSITE

Trang 4

3.1.1 Tổng quan về HTML

• HTML=H HTML= H yperT yper T ext M ext M arkup L arkup L anguage – Ngôn ngữ đánh

dấu siêu văn bản – Ngôn ngữ để viết các trang web.

• Do Tim Berner Lee phát minh và được W3C (World

Wide Web Consortium) đưa thành chuẩn năm 1994

• Các trang Web đầy sinh động mà bạn thấy trên WWW

là các trang siêu văn bản được viết bằng HTML

• HTML cho phép bạn tạo ra các trang phối hợp hài hoà giữa văn bản thông thường với hình ảnh, âm thanh,

Trang 5

• HTML là ngôn ngữ của các thẻ đánh dấu - Tag Các thẻ này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình.

• HTML không phân biệt chữ hoa, chữ thường

• Các trình duyệt thường không báo lỗi cú pháp HTML Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định.

Trang 7

HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình

Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình diễn văn bản Các từ khoá có ý nghĩa xác định được cộng đồng Internet thừa nhận và sử dụng

Ví dụ b = bold, br=break,

Language

Trang 8

HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet

HTML dựa trên nền tảng là một văn bản Các thành phần khác như hình ảnh, âm thanh, video đều phải

"cắm neo" vào một đoạn văn bản nào đó.

Text?

Hyper?

Trang 9

Trang mã nguồn HTML và trang Web?

+ Trang mã nguồn HTML là một tệp văn bản bình thường gồm các kí tự ASCII, có thể được tạo ra bằng bất cứ bộ soạn thảo thông thường nào

+ Theo quy ước, tất cả các tệp mã nguồn của trang

Soạn thảo siêu văn bản

Trang 10

+ Nói soạn siêu văn bản tức là tạo ra trang mã nguồn đúng quy định để bộ duyệt hiểu được và hiển thị đúng

+ Khi dùng bộ duyệt - browser đọc nội dung trang mã nguồn và hiển thị nó lên màn hình máy tính thì ta thường gọi là trang Web

+ Vậy trang web không tồn tại trên đĩa cứng của máy tính Nó là cái thể hiện của trang mã nguồn qua xử lí của bộ duyệt.

Soạn thảo siêu văn bản

Trang 11

3.1.2 Các thẻ HTML

• Các thẻ - Tag dùng để báo cho bộ duyệt_brower cách thức trình bày văn bản trên màn hình hoặc dùng để chèn một mối liên kết đến các trang khác

• Mỗi thẻ gồm một từ khoá - KEYWORD với cú pháp Hầu hết các lệnh thể hiện bằng một cặp hai thẻ : thẻ

mở <KEYWORD> và thẻ đóng </KEYWORD>

Trang 12

3.1.2 Các thẻ HTML

• Cấu trúc chung của một siêu văn bản

<HTML>

<HEAD>

<TITLE> Tiêu đề trang </TITLE>

Các khai báo khác ở đây

</HEAD>

<BODY>

Nội dung cần thể hiện ở đây

</BODY>

Trang 14

Lớp thẻ cấu trúc

• Là các thẻ xác định các thành phần trong cấu trúc của một siêu văn bản:

– <html> </html>

– <head> </head>, <title> </title>

– <body> </body>

• Một số thuộc tính của thẻ <body> …</body>

– Background: Ảnh nền, được hiển thị theo kiểu xếp gạch

– Bgcolor, text, link, alink, vlink: Tương ứng là các thuộc tính

quy định màu nền, màu văn bản, màu siêu liên kết, màu liên kết đang hoạt động, màu liên kết đã thực sự được duyệt

– Leftmargin, topmargin: Căn lề trái, lề trên của tài liệu theo

pixel

Trang 17

• VD4

• VD5

Trang 18

Các thẻ trình bày trang trong HTML

Trang 19

• VD6

Trang 20

Superscript text được tạo ra bằng cặp thẻ <SUP>:

Trang 22

Đầu đề mức 1 Đầu đề mức 2

Trang 24

Font & Color

<font size=1>Size 1</font><br>

<font size=7>Size 7</font><br>

<font color=red>Red</font><br>

<font color=#0000FF>Blue</font><br>

<font style=‘font-size: 72pt’>72pt</font>

</body></html>

Trang 25

• VD7

Trang 26

Link & URL & Bookmark

+ Bookmark

Trang 27

Lớp thẻ âm thanh, hiện ảnh

• Chèn hình ảnh vào trang web

– thẻ <img> không có thẻ kết thúc, gồm các thuộc tính:

• Src: Đường dẫn đến file ảnh

• Alt: Đoạn văn bản hiển thị khi không có ảnh

• Width, height: Độ rộng, chiều cao của ảnh khi hiển thị

• Border: Độ đậm của đường viền xung quanh ảnh

• Vspace, hspace: Khoảng cách theo chiều dọc và theo chiều

ngang của ảnh với các phần tử khác

• Lowsrc: Đường dẫn đến file ảnh thứ 2’ (cho phép hiển thị 2 ảnh

Trang 28

Lớp thẻ âm thanh, hiện ảnh (tt)

• Chèn hình ảnh vào trang web

– thẻ <img> không có thẻ kết thúc, gồm các thuộc tính:

• align = ‘left | right’: căn lề trái | phải

• align = ‘top | texttop’: phần trên của ảnh ở vị trí cao nhất của

phần tử | phần tử text trên nó

• align = ‘middle | absmiddle’: đường căn giữa của ảnh trùng với

đường cơ sở | đường căn giữa của dòng hiện thời

• align = ‘baseline’: biên dưới của ảnh trùng với đường cơ sở

của dòng hiện thời

• align = ‘bottom | absbottom’: biên dưới của ảnh trùng với

đường cơ sở | biên dưới của dòng hiện thời

Trang 29

Lớp thẻ âm thanh, hiện ảnh (tt)

• Chèn file âm thanh

– thẻ <Embed> không có thẻ kết thúc, gồm các thuộc tính:

• Src: Đường dẫn đến file cần chạy

• Width, height: Kích thước khung điều khiển

• Autoplay: Tự động bật hay không

• Controller: Có hiện thị bảng điều khiển không

• Loop: Có tự động lặp lại khi hết không

Trang 30

Lớp thẻ tạo danh sách

• Gồm các loại danh sách

– <dir> </dir>: Danh sách thư mục

– <dl> </dl>: Danh sách được định nghĩa

– <menu> </menu>: Danh sách thực đơn

– <ol> </ol>: Danh sách có thứ tự

– <ul> </ul>: Danh sách không có thứ tự

• Các loại danh sách có thể lồng nhau

Trang 32

<LI>Đây <LI>là <LI>một <LI>danh <LI>sách <LI>không có thứ tự !

Trang 33

X là Kiểu ký hiệu được dùng

N là giá trị bắt đầu của danh sách

<OL>

<LI>Đây <LI>là <LI>một <LI>danh <LI>sách <LI>có thứ tự !

</OL>

Trang 34

<DT> Môc 1:

<DD> Chó thÝch râ môc 1

<DT> Môc 2:

<DT> Môc 3:

Trang 36

Table

Trang 41

• Sử dụng để chứa mọi đối tượng khác

• Không nhìn thấy khi trang web được hiển thị

• Quy định một số thuộc tính quan trọng như method,

Trang 42

• Các thuộc tính:

– name=“tên_form”: Không quan trọng lắm

– action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn

tương đối nếu nằm trong cùng 1 web

– Enctype : cách thức dữ liệu được mã hóa để gửi

– method=“phương thức gửi dữ liệu” Chỉ có 2 giá trị:

• GET (mặc định)

• POST

Trang 44

• Là một trường của form cho phép người dùng nhập

dữ liệu theo nhiều dạng

Trang 45

– name=“tên_đt”: quan trọng

– type=“text”:Ô nhập văn bản thường

– type=“password”: ô nhập mật khẩu

– value=“giá trị mặc định”

Trang 46

• Cho phép chọn nhiều lựa chọn trong một

nhóm lựa chọn được đưa ra bằng cách đánh

– value=“giá trị”: đây là giá trị chương trình sẽ

nhận được nếu NSD chọn ô này.

– checked: nếu có thì nút này mặc định được

chọn

Trang 47

Option Button (Radio Button)

• Cho phép chọn một lựa chọn trong một nhóm lựa

chọn được đưa ra.

• Trên 1 form có thể có nhiều nhóm lựa chọn kiểu

– value=“giá trị”: đây là giá trị chương trình sẽ nhận

được nếu NSD chọn ô này.

Trang 48

Combo Box (Drop-down menu)

• Bao gồm một danh sách có nhiều phần tử Tại một thời

điểm chỉ có 1 phần tử được chọn

• NSD có thể chọn 1 phần tử trong danh sách xổ xuống

bằng cách kích vào mũi tên bên phải hộp danh sách.

• Thẻ tạo hộp danh sách:

<select>Danh sách phần tử</select>

• Thuộc tính:

• Thẻ tạo 1 phần tử trong danh sách:

<option>Tiêu đề phần tử</option>

Trang 49

• Tương tự như Combo box, tuy nhiên có thể nhìn

thấy nhiều phần tử cùng lúc, có thể lựa chọn

Trang 50

rows tính theo số dòng văn bản, cols tính

theo số ký tự chuẩn trên dòng.

Trang 51

Nút lệnh

• Sử dụng để NSD ra lệnh thực hiện công việc.

• Trên web có 3 loại nút:

Trang 52

- Dùng để tương tác, gửi thông tin từ Form đến WebServer

- Có 2 cách dùng:

+ Click nút lệnh thì submit tới URL được chỉ ra trong form

<Input type=“Submit” name=“cmdName” value=“Gi á trị ”>

+ Click nút lệnh thì gọi đến một hàm khác

<Input type=“Button” name=“cmdName” value=“Gi á trị ”

Onclick=“Tên_hàm”>

Nút lệnh

Trang 53

Đa phương tiện

• Âm thanh nền: <bgsound>

– Thuộc tính:

• src=“địa chỉ file âm thanh”

• loop=“n”: số lần lặp -1: mặc định: mãi mãi.

Trang 54

Đa phương tiện (tt)

• Video trên IE sử dụng Windows Media Player

width=“rộng rộng ” height=“cao” height=“cao”>

<param name="FileName" value=“

<param name="FileName" value=“địa chỉ file địa chỉ file">

</object>

Trang 55

width=“số" height=“số">

<embed src="

" height="số "></embed>

Trang 56

Một số thẻ meta thông dụng

• Thẻ <meta>:

– Đặt ở giữa <head>…</head>

– Thường dùng quy định thuộc tính cho trang web

– Có tác dụng lớn với Search Engine

– 2 cách viết thẻ <meta>:

Trang 57

Một số thẻ meta thông dụng (tt)

• <META NAME="description" content="">

• <META NAME="keywords" content="">

• <META NAME="author" CONTENT="author's name">

• <META HTTP-EQUIV="refresh" CONTENT="delay;url=new

url">

• <META HTTP-EQUIV="expires" CONTENT="date">

• <META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=utf-8">

Trang 58

Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài

Ví dụ :

<A HREF='http://www.vcu.edu.vn'>Đại học Thương Mại</A>

<A HREF=“Homepage.htm”>Trang chủ</A>

HyperLink

Trang 59

Lớp thẻ tạo khung

• Chia vùng hiển thị của trang web thành nhiều vùng con theo chiều dọc, ngang

• Mỗi vùng con là một frame có đặc điểm:

– Có thể truy cập tới một URL độc lập với frame khác.

– Mỗi frame có thể được đặt tên.

– Có thể thay đổi kích thước khung nhìn, cho phép hay không

cho phép người dùng thay đổi kích thước này

• Tài liệu có cấu trúc frame, không có phần tử body

Trang 60

– Src: URL chứa nội dung của vùng

– Name, bordercolor, noresize, marginwidth, marginheight

– Scrolling = ‘yes|no|auto’

Trang 62

– frameborder = yes hoặc no

– framespacing = “n”: Khoảng cách giữa 2 khung

Trang 63

Khung (tt)

• Tạo 1 khung có nội dung là 1 trang web nào đó:

<frame>

– Thuộc tính:

• src=“Địa chỉ chứa nội dung”

• name=“tên khung”

• noresize: Không được thay đổi kích thước

• Thẻ <base> mặc định

– Thuộc tính

Trang 64

Ví dụ

</FRAMESET>

Tiêu đề	Công cụ thiết kế Website
Chuyên ngành	Công cụ thiết kế Web

Định dạng
Số trang	64
Dung lượng	389,5 KB