chuong3b html-091030201401-phpapp02

29
Trình bày: Nguyễn Phú Trường Chương III

Upload: ta-hormon

Post on 14-Jun-2015

177 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Chuong3b html-091030201401-phpapp02

Trình bày: Nguyễn Phú Trường

Chương III

Page 2: Chuong3b html-091030201401-phpapp02

Table với thuộc tính cellpadding

Cellpadding : số khoảng trắng từ nội dung trong ô dữ liệu đến đường viền.

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông2

CÁC THẺ CƠ BẢN

Page 3: Chuong3b html-091030201401-phpapp02

Table với thuộc tính cellspacing

Cellspacing : khoảng cách giữa các ô dữ liệu trong 1 bảng.

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông3

CÁC THẺ CƠ BẢN

Page 4: Chuong3b html-091030201401-phpapp02

Table với số cột không bằng nhau

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông4

CÁC THẺ CƠ BẢN

Page 5: Chuong3b html-091030201401-phpapp02

Dữ liệu trong Table

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông5

CÁC THẺ CƠ BẢN

Page 6: Chuong3b html-091030201401-phpapp02

Thẻ danh sách (List)

Có 3 dạng danh sách chính

Danh sách có thứ tự (Ordered List) : <ol>

Danh sách không thứ tự (Unordered List) : <ul>

Danh sách định nghĩa (Definition Lists) : <dl>

Danh sách sẽ gồm nhiều phần tử

• Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li>

• Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>

Ngoài ra còn có các dạng: <menu> và <dir>

Có thể định nghĩa các danh sách lồng nhau

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông6

CÁC THẺ CƠ BẢN

Page 7: Chuong3b html-091030201401-phpapp02

Thẻ danh sách (ví dụ)

Danh sách có thứ tự

với nhiều định dạng khác nhau

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông7

CÁC THẺ CƠ BẢN

Page 8: Chuong3b html-091030201401-phpapp02

Thẻ danh sách (ví dụ)

Danh sách

không thứ tự

với nhiều định dạng khác nhau

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông8

CÁC THẺ CƠ BẢN

Page 9: Chuong3b html-091030201401-phpapp02

Thẻ danh sách (ví dụ)

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông9

CÁC THẺ CƠ BẢN

Page 10: Chuong3b html-091030201401-phpapp02

Thẻ Form

Lựa chọn dữ liệu nhập từ người sử dụng khi

truy xuất Web,

Thành phần trong Form: text fields, textarea

fields, drop-down menus, radio buttons,

checkboxes, etc.

Form được đánh dấu bởi thẻ: <form> …. </form>

• VD : <form name=“Fname" action=“Form-Action”

method=“GET|POST"> …</form>

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông10

CÁC THẺ CƠ BẢN

Page 11: Chuong3b html-091030201401-phpapp02

Ví dụ về Text Field

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông11

Page 12: Chuong3b html-091030201401-phpapp02

Ví dụ về Radio Button

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông12

Page 13: Chuong3b html-091030201401-phpapp02

Ví dụ về Checkbox

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông13

Page 14: Chuong3b html-091030201401-phpapp02

Ví dụ về Submit button

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông14

Page 15: Chuong3b html-091030201401-phpapp02

Thẻ Form (ví dụ)

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông15

CÁC THẺ CƠ BẢN

Page 16: Chuong3b html-091030201401-phpapp02

Thẻ Image

Thêm vào trang web những hình ảnh dưới định

dạng là *.gif hay *.jpg

Thẻ đánh dấu là : <image src=“URL”>

Các thuộc tính của thẻ Image

Width = number pixels / number %

Height = number pixels / number %

Align = “left/right/top/middle/bottom”

Alt=“Chuỗi đại diện khi không tải được hình”

Thẻ <map> và <area>: chia hình ra làm nhiều phần24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông16

CÁC THẺ CƠ BẢN

Page 17: Chuong3b html-091030201401-phpapp02

Thẻ Image (ví dụ)

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông17

CÁC THẺ CƠ BẢN

Page 18: Chuong3b html-091030201401-phpapp02

Thẻ Body - với thuộc tính

Nền của trang Web có thể được định dạng

Màu nền :

– <body bgcolor="#000000">

– <body bgcolor="rgb(0,0,0)">

– <body bgcolor="black">

Ảnh nền :

– <body background="clouds.gif">

– <body background=“http://www.diachi.net/hinh.jpg">

– <body background=“/bkground.jpg">

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông18

CÁC THẺ CƠ BẢN

Page 19: Chuong3b html-091030201401-phpapp02

Thẻ Body - thuộc tính bgcolor

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông19

CÁC THẺ CƠ BẢN

Page 20: Chuong3b html-091030201401-phpapp02

Thẻ Body - thuộc tính background

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông20

CÁC THẺ CƠ BẢN

Page 21: Chuong3b html-091030201401-phpapp02

Thẻ Head: Giữa cặp thẻ <head> và </head> : thông tin về tiêu

đề, địa chỉ nền, styles, meta, font nền, …

Thông tin khai báo trong thẻ Head không được thểhiện ra trong nội dung trang Web.

VD :<head>

• <title> Tieu de trang Web </title>

• <link rel="stylesheet" type="text/css“ href="mystyle.css">

• <meta name="keywords" content="HTML">

• </head>

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông21

CÁC THẺ CƠ BẢN

Page 22: Chuong3b html-091030201401-phpapp02

Thẻ Title

Cung cấp tên tiêu đề trên thanh tiêu đề của trình

duyệt khi thể hiện trang Web.

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông22

CÁC THẺ CƠ BẢN

Page 23: Chuong3b html-091030201401-phpapp02

Thẻ Meta:

Cung cấp thông tin tổng quát về trang Web cho các

Search Engine lưu trữ.

Mô tả :

• <meta name="description" content=“Trang chu cua Website Khoa

CNTT – Truong DHCT">

Từ khóa tìm kiếm :

• <meta name="keywords" content=“University, Cantho,

Computer, Information Technology">

Chỉ định khi hiện trang Web: mở trang Web URL sau 5s

• <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn">

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông23

CÁC THẺ NÂNG CAO

Page 24: Chuong3b html-091030201401-phpapp02

Thẻ Style

Xu hướng dùng Style Sheet (CSS) để định dạng

chung cho nhiều trang Web trong Website,

Có thể định dạng trong file ở ngoài,VD : <link rel="stylesheet" type="text/css“ href=“abc.css">

Có thể khai báo bên trong phần <head> trang Web,VD : <style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

Có thể sử dụng thẳng trong nội dung trang Web.VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p>

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông24

CÁC THẺ NÂNG CAO

Page 25: Chuong3b html-091030201401-phpapp02

Thẻ script

Có thể nhúng vào trang Web những đoạn Script

viết bằng các ngôn ngữ như : JavaScript, VBScript,

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông25

CÁC THẺ NÂNG CAO

Page 26: Chuong3b html-091030201401-phpapp02

Thẻ Font

Định font cho cả trang Web bằng thẻ <basefont>

Định font cho 1 đoạn văn bản bằng thẻ <font>

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông26

CÁC THẺ NÂNG CAO

Page 27: Chuong3b html-091030201401-phpapp02

Thẻ Font

Thường sử dụng thuộc tính style để định dạng font

thay cho các tag cũ.

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông27

CÁC THẺ NÂNG CAO

Page 28: Chuong3b html-091030201401-phpapp02

Nhiều thẻ HTML được định nghĩa,

Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ

cũ bằng các định dạng khác,

Có thể tham khảo từ : http://www.w3.org

Hiện nay, còn nhiều định dạng khác được sử dụng rất

nhiều trên Internet, chẳng hạn như :

• XML, XHTML

• WML

• Các kỹ thuật DHTML, CSS, ...

Ngày nay, thường sử dụng thuộc tính style để định dạng

font thay cho các tag cũ.

24/Oct/2009 Bộ môn Mạng máy tính & Truyền thông28

KẾT LUẬN

Page 29: Chuong3b html-091030201401-phpapp02