3 Đặt vấn đề Trang web khác với các văn bản khác được tạo ra bởi Word, NotePad… Trang Web được thiết kế để có thể hiển thị được trên các trình duyệt Internet Explorer, Mozilla Fir
Trang 1HTML CƠ BẢN
Trang 22
Mục tiêu bài học
Khái quát về HTML
Viết một tài liệu HTML đơn giản
Sử dụng các thẻ trong HTML
Thực hành tạo trang web trên Macromedia
Dreamweaver 8.0 hoặc frontpage
Trang 33
Đặt vấn đề
Trang web khác với các văn bản khác được tạo ra bởi Word, NotePad… Trang Web được thiết kế để có thể hiển thị được trên các trình duyệt (Internet Explorer, Mozilla FireFox, Nestcape…)
Các trình duyệt sẽ dịch và hiển thị nội dung trang Web của bạn do nó được định dạng bằng ngôn ngữ HTML (HyperText MarkupLanguage)
Trang 44
Giới thiệu HTML
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn bản, được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web
Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML
Trang 55
XHTML là viết tắt của cụm từ eXtensible HyperText Markup Language”, là ngôn ngữ đánh
dấu siêu văn bản mở rộng
XHTML là bộ thẻ mở rộng của HTML theo kiểu XML (là ngôn ngữ đánh dấu mở rộng, với cấu trúc tự do, gồm các thẻ do người dùng tự định nghĩa)
Giới thiệu XHTML
Trang 6Giới thiệu XHTML
Các thẻ do người dùng tự định nghĩa được mô tả trong một tài liệu mô tả được gọi là DTD (Document Type Definition)
Do tương thích với XML, XHTML vượt qua được những hạn chế của HTML (chỉ có thể sử dụng được các thẻ được quy định sẵn) và có thể mở rộng thêm các thẻ
Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới
Trang 7Giới thiệu HTML(tt)
Sử dụng các thẻ và các phần tử HTML, ta có thể :
Điều khiển hình thức và nội dung của trang
Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách chèn các liên kết vào tài liệu HTML
Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch
7
Trang 8 Trình duyệt: Internet Explorer, fireFox, Chrome…
Các công cụ khi thiết kế web
Trang 99
Tổ chức cấu trúc thư mục cho website như đã học ở bài
“Các khái niệm cơ bản”
Dùng trình soạn thảo trong Notepad, frontpage, hoặc dreamweaver, nhập các thẻ và các đoạn văn bản, lưu lại dưới dạng *.htm hoặc *.html
Nạp lên trình duyệt xem kết quả
Quay lại trình soạn thảo chỉnh sửa, lưu lại sau đó trở lại trình duyệt refresh (nhấn F5) để xem kết quả
Lưu ý: HTML dùng để xác định cách trình bày văn bản chứ không điều khiển sự hiển thị văn bản phụ thuộc vào trình duyệt
Các bước thiết kế web
Trang 1212
Hiển thị trang
Trang 1414
Các thẻ trong HTML
Thẻ (tag) dùng để mô tả cách trình bày văn bản
Không được hiển thị bởi trình duyệt
Trang 1515
Các thẻ trong HTML (tt)
Một thẻ trong HTML bao gồm :
<element attribute = “value”>
Element – Nhận dạng thẻ (tag_name)
Attribute – Mô tả thẻ/ thuộc tính thẻ
Value – Giá trị được thiết lập cho thuộc tính, , XHTML
quy định các giá trị thuộc tính phải được bao bởi cặp
dấu nháy đôi
Ví dụ: <font face=“Arial” size=“4” color=“red”>
Thẻ HTML được sử dụng để đánh dấu sự bắt đầu và kết thúc của tài liệu HTML
<html> </html>
Trang 1616
Thẻ HEAD
Định nghĩa các mô tả về trang HTML
Các thông tin này sẽ không hiển thị dưới dạng nội dung của trang web.
HEAD có thể chứa các thành phần:
<BASE> : Khai báo địa chỉ cơ bản cho file HTML
<TITLE>: Đặt tiêu đề cho tài liệu
<META>: Các thông tin khác về tài liệu
Trang 1717
Thẻ BASE
Thẻ <BASE>:
các mối nối liên kết , coi như đây là địa chỉ cơ bản cho các mối nối liên kết
<BASE HREF="http://fithou.edu.vn">
TARGET> dùng để chỉ định frame mặc nhiên
mà các đối tượng liên kết được nạp vào
Trang 18 Thông tin này cũng có thể được dùng bởi một
số máy tìm kiếm để xây dựng chỉ mục cho các trang web
Ví dụ:
<title> website tin tức thể thao</title>
Trang 1919
Thẻ META
Thẻ <meta http-equiv=“ ” content=“ ” name=“ ”/>:
Dùng để khai báo loại font sử dụng, tìm kiếm, xóa cache, chuyển trang,…
Ví dụ:
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Tự động chuyển font tiếng Việt
<meta name=”keywords” content=”mywebsite.org, diễn đàn CNTT”>
Giúp cho các công cụ tìm kiếm, tìm thấy trang web của bạn thông qua các thông tin khai báo trong phần content
<meta http-equiv=“refresh” content=“15; URL=http://www.google.com.vn/”>
sau 15 giây thì nó sẽ tự động chuyển đến trang http://www.google.com.vn
<meta http-equiv=”pragma” content=”no-cache” >
Không lưu trang web này vào bộ nhớ cache khi truy nhập vào một trang web
Trang 2020
Thẻ BODY
Thẻ <body> </body>:
Xác định vùng thân của trang web, đây là
phần mà các dữ liệu cùng với các thẻ
HTML được dùng để định dạng một trang
web
<body background=“url”
bgproperties=“fixed”> đặt nền cho trang
web, đặt thuộc tính nền là fixed
<body bgcolor=“color”>: đặt màu nền
Trang 2121
Thẻ <! content >
Để thêm những dòng chú thích trong file HTML
Nội dung văn bản nằm giữa "<! " " >" sẽ được chương trình bỏ qua
Cho phép có khoảng trắng giữa và >, nhưng không được có khoảng trắng giữa <! và
Trang 2323
Ví dụ về thẻ HEADER
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; 1252">
charset=windows-<title>Chào mừng bạn đến với Dreamwaver CS3</title>
</head>
<body>
<h1>Chào mừng bạn đến với Dreamwaver CS3.</h1>
<h2>Công cụ thiết kế Website trực quan.</h2>
<h3>Cách nhanh nhất để bạn xuất bản thông tin của mình đến với mọi người</h3>
<h4>Nào, hãy bắt đầu </h4>
</body>
</html>
Trang 24 <font color=“#value”> hay <font color=name>
xác lập màu cho văn bản , value là các giá trị trong hệ thập lục phân
<font face=“name[,name][,name]” >
[name] chỉ định font chữ khi hiển thị text, có thể không cần dùng thuộc tính này khi các bạn có một trình convert font cho web
Trang 2828
Các thẻ định dạng văn bản
Lớn hơn (>): >
Nhỏ hơn (<): <
Trích dẫn (“ “): "
Ký tự & (&) : &
Ký tự khoảng trắng:
Thẻ <CODE>
Dùng để nhập một dòng mã có ký tự riêng, dòng
mã này không được thực hiện , nó chỉ hiển thị ở
dạng text
Cú pháp: <CODE>text</CODE>
Trang 2929
Đoạn
Thẻ <P>
Chèn dòng trắng và bắt đầu một dòng mới
Các thuộc tính : align="center/left/right/justify”
nếu có dùng canh lề cho văn bản,
Cú pháp: <P ALIGN="alignment">text</P>
Trang 30<BODY BGCOLOR = lavender>
<P align=right>This is going to be real fun
Another paragraph element
</P>
</BODY>
</HTML>
Trang 31<BODY BGCOLOR = lavender>
<P>This is going to be real fun
<BR>Another paragraph element </P>
</BODY>
</HTML>
Trang 3232
Thẻ HR
Thẻ <HR>
Chèn đường gạch ngang để phân cách các đoạn
trong trang web
Cú pháp:
<HR SIZE=“number”>: kích thước (độ dày) đường
kẻ
<HR WIDTH=number/percent>: Độ rộng đường kẻ
<HR ALIGN=“left/right/center”>: Canh lề
<HR NOSHADE>: Không có bóng đổ
<HR COLOR=name/#rrggbb>: màu đường kẻ
Ví dụ: <hr size="6" noshade align="left">