NGÔN NGỮ THIẾT KẾ WEB
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.44 MB, 139 trang )
NGÔN NGỮ THIẾT KẾ WEB
Trình bày: Nguyễn Đăng Khoa
Nội dung
●
HTML
●
HTML Form
●
CSS
Giới thiệu
Quá trình phát triển
World Wide Web Consortium
6
•
Khai báo DTD - phiên bản của tài liệu HTML/XHTML
•
Trình duyệt sẽ dựa theo khai báo này để render trang web
Document Type Declaration - DTD
Các thẻ HTML/XHTML
Các thẻ HTML/XHTML
9
?
Các khác biệt quan trọng nhất
XHTML element phải được đóng lại đúng thứ tự
XHTML element phải luôn luôn đóng
XHTML element phải chữ thường
XHTML document phải có một element gốc
….
Phân biệt HTML/XHTML
XHTML
●
Các phần tử phải được lồng nhau đúng cách
●
Phải có đặt ở dạng chuẩn (well-formed)
●
Tên gọi của thẻ đều phải viết thường
●
Tất cả các thẻ phải được đóng lại
●
Các thẻ rỗng cũng phải được đóng lại
●
Các giá trị của thuộc tính phải được đặt trong dấu nháy
kép
●
Việc tối giản thuộc tính là bị nghiêm cấm
●
/>
Ví dụ
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a HTML sample
</body>
</html>
Ví dụ - Mô tả
●
<html> </html> định nghĩa phạm vi của văn bản
HTML
●
<head> </head> Định nghĩa các mô tả về trang
HTML. Các thông tin trong tag này không được
hiển thị trên trang web
●
<title> </title> mô tả tiêu đề trang web
●
<body> </body> xác định vùng thân của trang
web, nơi chứa các thông tin
Ví dụ
●
/>●
Heading
/>●
Paragraph
/>●
Link
/>●
Image
/>
Cấu trúc thẻ
●
Thẻ kép
<tên thẻ> Dữ liệu </tên thẻ>
–
Ví dụ: <a href=‘'>Yahoo</a>
●
Thẻ đơn
<tên thẻ />
–
Ví dụ: <br />, <hr />
●
Các thẻ lồng nhau
Attribute
●
Thẻ có thể có nhiều attribute
●
Attribute cung cấp thêm thông tin cho thẻ
●
Attribute luôn được được ở thẻ mở
●
Cấu trúc
–
tên_attribute=”giá_trị”
●
Ví dụ
<a href="">This is a
link</a>
HTML Heading
●
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
–
/>●
<hr />
–
/>●
Comment
<! This is a comment >
HTML Paragraph
●
<p>
–
/>●
<br />
–
/>
Định dạng chữ
●
/>●
<b>, <strong>, <big>, <i>, <em>, <code>,
<sub>, <sup>
–
/>
HTML Link <a>
●
/>●
<a href="
target="_blank">Visit W3Schools!</a>
●
<a href="#tips">Visit the Useful Tips
Section</a>
●
<a
href=" />m#tips">Visit the Useful Tips Section</a>
HTML Head
●
/>●
<head>
●
<title>
●
<link />
●
<meta />
●
<script>
●
<style>
HTML Image
●
<img>
–
/>–
<img src="url" alt="some_text"/>
●
<img src="boat.gif" alt="Big Boat" />
●
<img src="pulpit.jpg" alt="Pulpit rock" width="304"
height="228" />
●
/>
HTML List
●
/>●
Unordered Lists
–
<ul>, <li>
–
/>●
Ordered Lists
–
<ol>, <li>
–
/>●
Definition Lists
–
<dl>, <dt>, <dd>
–
/>
HTML IFrame
●
/>●
Hiển thị 1 trang web bên trong 1 trang web
khác
●
<iframe src="URL"></iframe>
–
<iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
HTML <div> and <span>
●
Block
–
<h1>, <p>, <ul>, <table>
●
Inline
–
<b>, <td>, <a>, <img>
●
<div>
–
Block
–
Dùng để gom nhóm các thẻ khác
●
<span>
–
Inline
–
Dùng để định dạng chuỗi
25
<table>
</table>
<tr>
<tr>
<tr>
<tr>
<th> </th> <th> </th>
<tr>
<tr>
<td> </td> <td> </td>
<td> </td> <td> </td>
<caption> </caption>
Thẻ TABLE <table>
