Tổng quan về HTML• 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à... HTML là một ng
Trang 1Chương 3 MỘT SỐ CÔNG
Bộ môn CNTT – Khoa Tin học thương mại
– Trường ĐH Thương Mại Email: cntt@vcu.edu.vn
Trang 43.1.1 Tổng quan về HTML
• 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à
Trang 53.1.1 Tổng quan về HTML
• 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 6Là các văn bản thông minh biết cách tìm kiếm và cung cấp cho người đọc các tài liệu khác có liên quan
Các thông tin mà siêu văn bản hỗ trợ rất đa dạng: văn
Làm thế nào để tra cứu, tìm kiếm thông tin đa phương tiện trên mạng thông tin rộng lớn nhất toàn cầu???
Trang 7HTML 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 8HTML 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 9Trang 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 siêu văn bản phải có đuôi là html hoặc htm
Trang 10+ 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.
Trang 113.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 123.1.2 Các thẻ HTML
<HTML>
<HEAD>
<TITLE> Tiêu đề trang </TITLE>
Các khai báo khác ở đây
</HEAD>
<BODY>
Trang 14• 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 nhquy định màu nền, màu văn bản, màu siêu liên kết, màu liênkết đang hoạt động, màu liên kết đã thực sự được duyệt
Trang 16Các thẻ trình bày trang trong HTML
Trang 17Superscript text được tạo ra bằng cặp thẻ <SUP>:
Trang 19Đầu đề mức 1 Đầu đề mức 2
Đầu đề mức
Đầu đề mức
Đầu đề mức
Đầu đề mức Đầu đề mức
Tên
Trang 21Font & 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 22Link & URL & Bookmark
+ Bookmark
Trang 23Lớp thẻ âm thanh, hiện ảnh
– 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 ác phần tử khác
• Lowsrc: Đường dẫn đến file ảnh thứ 2’ (cho phép hiển thị 2 ảnh trong 1 không gian)
Trang 24Lớp thẻ âm thanh, hiện ảnh (tt)
– 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ở
Trang 25Lớp thẻ âm thanh, hiện ảnh (tt)
– 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 26Lớp thẻ tạo 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ự
Trang 29X là Kiểu ký hiệu được dùng
N là giá trị bắt đầu của danh sách
Trang 32Table
Trang 35Table
Trang 36HT
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
VALIGN=TOP|BOTTO
M
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 độ
Trang 37• 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ị
action
• Thẻ tạo form:
<form>…</form>
• Có thể có nhiều form trong một tài liệu
Trang 38• 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ẫntươ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 40dữ liệu theo nhiều dạng
Trang 41– 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 42• 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.
Trang 43Option 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
– checked: nếu có thì nút này mặc định được chọn
Trang 44Combo Box (Drop-down menu)
<select>Danh sách phần tử</select>
<option>Tiêu đề phần tử</option>
Trang 45• 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 47Nú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 48- 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
Trang 49Đ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 50Đa phương tiện (tt)
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95“
id="MediaPlayer1“
width=“rộng” height=“cao”>
<param name="FileName" value=“địa chỉ file">
</object>
Trang 51<param name="movie" value="ten_file.swf">
<param name="quality" value="high">
<embed src="ten_file.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashpla
yer" type="application/x-shockwave-flash" width="số "
height="số "></embed>
</object>
Trang 52Mộ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>:
<META NAME="name" CONTENT="content">
<META HTTP-EQUIV="name" CONTENT="content">
Trang 53Mộ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 54Cú 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
-<A HREF="URL"> nhãm tõ lµm ®Çu mèi</A>
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 55Lớp thẻ tạo khung
– 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ôngcho 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 58– frameborder = yes hoặc no
– framespacing = “n”: Khoảng cách giữa 2 khung
Trang 59Khung (tt)
<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
• target=“Cửa sổ mặc định”
Trang 60Ví dụ
</FRAMESET>
</FRAMESET>