chuong 3 cong cu tk web html

Trang 1

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

WEBSITE

Trang 3

3.1 Ngôn ngữ HTML

3.1.1 Tổng quan về HTML3.1.2 Các thẻ của HTML

3.1.3 Sử dụng Frontpage thiết kế web tĩnh3.1.4 Định dạng website với CSS

Trang 4

3.1.1 Tổng quan về HTML

•HTML=HHTML=HyperTyperText Mext Markup Larkup Language – 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,

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 đó.

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

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

<TITLE> Tiêu đề trang </TITLE> Các khai báo khác ở đây

Nội dung cần thể hiện ở đây</BODY>

Trang 13

–Cấu trúc (structure)–Định dạng (formatting)–Ảnh (image)

–Danh sách (list)–Bảng (table)

–Form

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 15

VD• VD1

• VD2• VD3

………

Trang 16

Lớp thẻ định dạng•Các thẻ định dạng vật lý như

– <b> .</b>, <i> </i>, <u> </u>, <EM> </EM>, <STRONG> </STRONG>

•Các thẻ định dạng logic như– <center> </center>

– <big> </big>, <small> </small>– <blink> </blink>

•Các thẻ định dạng khối như– <p> </p>

Trang 17

•VD5

Trang 18

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

+ Tạo dòng trắng: <P>, <BR>+ Xuống dòng: <BR>

+ Căn chính giữa: <CENTER> … </CENTER>+ Đường kẻ ngang: <HR>

<P ALIGN=LEFT> </P>, <HR size =2>,

Trang 19

VD•VD6

Trang 20

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

Subscript text được tạo bằng cặp thẻ <SUB> :<SUB> </SUB>

Ví dụ:

Số mũ và chỉ số

Trang 21

<h1 align=‘left’>Heading 1</h1><h2 align=‘right’>Heading 2</h2><h3 align=‘center’>Heading 3</h3><h4 title=‘4’>Heading 4</h4>

<h5 title=‘5’>Heading 5</h5><h6 title=‘6’>Heading 6</h6></body></html>

Trang 22

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

Đầu đề mức 3 <H3> </H3>Đầu đề mức 4 <H4> </H4>Đầu đề mức 5 <H5> </H5>

Đầu đề mức 6 <H6> </H6> Mức thấp nhất

Trang 23

• Thẻ

- div- center

• Thuộc tính

- align

<p align=‘left’>Left</p><p align=‘right’>Right</p><p align=‘center’>Center</p><p align=‘justify’>Justify</p>

<div align=‘center’>DIV Center</div><center>Center</center>

</body></html>

Trang 24

Font & Color

• Thẻ

- font

• Thuộc tính- face

- size- color - style

<font face=Arial>Arial</font><br><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

VD•VD7

Trang 26

Link & URL & Bookmark

• Thẻ

- a

• Thuộc tính- href

- title- name

+ WEB Resource+ File System

+ 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 31

• Ds không thứ tự

- ul (unordered lists)- li

• Ds có thứ tự

- ol (ordered lists)- li

• Thuộc tính

• Ds các định nghĩa- dl (definition lists)- dt (title)

- dd (detail)

List

Trang 32

<LI>Đây <LI>là <LI>một <LI>danh <LI>sách

<LI>không có thứ tự !</UL>

•Đây •là •một •danh •sách

•không có thứ tự !

Unordered Lists

Thẻ UL đầy đủ

…… </UL>

Trong đó “Kiểu chấm tròn” bao gồm:

“Disc” : Chấm tròn đậm“Circle” : Chấm tròn rỗng“Square” : Chấm vuông đậm

Thẻ UL đầy đủ

…… </UL>

Trong đó “Kiểu chấm tròn” bao gồm:

“Disc” : Chấm tròn đậm“Circle” : Chấm tròn rỗng“Square” : Chấm vuông đậm

Trang 33

1 Đây 2 là 3 một 4 danh 5 sách

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

Trang 34

<DT> Môc 1:

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

<DT> Môc 2:

<DT> Môc 3:

Mục 1:

Chú thích rõ mục 1Mục 2:

Chú thích rõ mục 2Mục 3:

Chú thích rõ mục 3

Danh sách định nghĩa Defined Lists

Trang 35

Lớp thẻ tạo bảng•Bao gồm các thẻ

– <table> </table>: Giới hạn bảng

– <tr> </tr>: Đặc tả các dòng của bảng– <td> </td>: Đặc tả ô dữ liệu của bảng– <th> </th>: Đặc tả ô tiêu đề của bảng– <caption > </caption>: Đặc tả tên bảng

Trang 36

Table

Trang 37

Table• Thẻ

- table• Thuộc tính

- border

- bordercolor- cellspacing- cellpadding

- bgcolor- width- height- style

Trang 38

Table• Thẻ

- tr

- align, valign- width, height- background- bgcolor

• Thẻ

- td

- align, valign- width, height- background- bgcolor

- colspan- rowspan

Trang 39

TAG/AttributeMô tả

<TABLE BORDER=n

BGCOLOR="#rrggbb“ WIDTH=n% HEIGHT=n%>

Trang 40

Thuộc tính dùng kèm bên trong các thẻ <TR>,

<TH> hay <TD> để căn lề chữ trong một ô của bảng theo chiều ngang

Thuộc tính dùng kèm các thẻ <TR>, <TH> hay <TD> để căn lề chữ trong ô bảng theo chiều đứng.

WIDTH=n% Thuộc tính dùng kèm các thẻ <TH> hay <TD> đẻ đặt độ rộng của ô bảng

COLSPAN=n Thuộc tính dùng kèm các thẻ <TH> hay <TD> để giãn một ô theo chiều ngang chiếm nhiều cột

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

Form•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 43

Các thẻ trong form•<input>

– Trường nhập dữ liệu•<select> </select>

– Danh sách chọn

– Mục chọn trong danh sách•<textarea> </textarea>

– Trường nhập dữ liệu nhiều dòng

Trang 45

Hộp nhập văn bản 1 dòng (Oneline Textbox)

• Sử dụng để nhập các văn bản ngắn (trên 1

dòng) hoặc mật khẩu

• Thẻ: <input>• Thuộc tính:

– 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 dấu (“tích”).

• Thẻ: <input>: mỗi ô nhập cần 1 thẻ• Thuộc tính:

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

– 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

• Thẻ: <input>: Mỗi ô cần 1 thẻ• Thuộc tính:

– name=“tên_đt”: quan trọng Các đối tượng cùng tên

thì thuộc cùng nhóm.

– type=“radio”

– 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 nhiều phần tử

Trang 50

Hộp nhập TextArea• Cho phép nhập văn bản dài trên nhiều

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:

• Thẻ: <input>• Thuộc tính:

– name=“tên_ĐT”: thường không quan trọng– type=“submit”: nút submit

– type=“reset”: nút reset

– type=“button”: nút thông thường (normal), it sử dụng.

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ộngrộng” height=“cao” height=“cao”>

<param name="FileName" value=“

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

</object>

Trang 55

" 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

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

•Frameset: dùng để phân vùng hiển thị trên trình duyệt– Cols = n | * | n%

– Rows = n | * | n%– Border, bordercolor

•Frame: Nằm trong frameset dùng để định nghĩa từng vùng

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

– Name, bordercolor, noresize, marginwidth, marginheight– Scrolling = ‘yes|no|auto’

Trang 61

Khung (tt)•Tạo trang web chứa các khung:

– Thay thẻ <body>…</body> bằng:

<frameset>các khung</frameset><noframes>

nội dung trong trường hợp trình duyệt không hỗ trợ khung

Trang 62

Khung (tt)•Một số thuộc tính của <frameset>

– rows rows = = “n“n1, , nn2, , … … nnk”

hoặc cols = “n1, n2, … nk”: Quy định có k dòng (hoặc cột), độ rộng dòng (cột) thứ i là ni ni là số, có thể thay bằng *: phần còn lại

– frameborder = yes hoặc no

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

Trang 64

Ví dụ

</FRAMESET></FRAMESET>