html_css_javascript_jquery ~ Diễn Đàn Website

Thời gian	Tiết	Thứ 2	Thứ 3	Thứ 4	Thứ 6
8g40 - 9g10	1	Tiếng Việt	Tiếng Anh	Tiếng Việt	Tiếng Việt
9g10 - 9g30	2	Nghỉ giải lao	Tiếng Anh	Nghỉ giải lao	Nghỉ giải lao
9g30 - 10g	3	Toán		Toán	Toán

Chương 1 : NGÔN NGỮ HTML

1.1 Một số khái niệm

· 1.1.1 Trang web (Webpage): Trang web (tĩnh) là một file dạng text chứa dữ liệu và các tag HTML. Khi hiển thị trong trình duyệt web, dữ liệu sẽ được hiển thị theo quy định của các tag mà nó nằm trong. Dữ liệu trong trang web có thể là văn bản, hình ảnh, âm thanh, video...

· Hyperlink: là 1 liên kết chỉ đến 1 trang web khác. Một trang web có thể chứa nhiều link.

· Website: Là 1 tập hợp nhiều trang web thể hiện thông tin của 1 tổ chức, 1 chủ đề nào đó. Mỗi website có 1 trang web gọi là trang chủ, trang chủ sẽ chứa các hyperlink chỉ đến các trang web khác trong website. Người xem sẽ vào website bắt đầu từ trang chủ, từ trang này, nhờ các link trong đó mà họ sẽ đến được các trang khác trong toàn website.

· Browser : Là chương trình dùng để xem các trang web. Các trình duyệt web nổi tiếng là Internet Explorer, Firefox

· 1.1.5 WebServer: Là các máy “phục vụ web”, đây là các máy tính trên Internet/Intranet có cài chương trình webserver. Webserver sẽ trả về cho người sử dụng trang web mà họ yêu cầu để họ xem. Webserver liên lạc với browser qua giao thức http. Một Webserver có thể chứa nhiều website. Hai chương trình webserver nổi tiếng nhất là: IIS và Apache.

· 1.1.6 Http: là giao thức để browser và web server trao đổi với nhau nhằm đưa trang web cho user xem.

· Web tĩnh: Là trang web chỉ có tag html và dữ liệu, tất cả đều gõ trực tiếp trong trang chứ không đặt ở nơi khác. File có tên mở rộng là .html hoặc .htm

Trong mô hình web tĩnh, user yêu cầu 1 trang web html, trang web này đã được thiết kế sẵn và đặt trên webserver, trang web không hề có tương tác đến CSDL. Webserver chỉ việc lấy file htm trả về cho user. Vậy là xong.

· 1.1.8 Web động: Là trang web có truy xuất đến cơ sở dữ liệu (Database) hoặc có tương tác với webserver để thực hiện 1 chức năng cao cấp nào đó. Một trang web động có thể trả về những kết quả khác nhau tùy theo yêu cầu của người sử dụng. Thiết kế web động đòi hỏi người thiết kế có nhiều kiến thức: HTML, Javascript, Database, WebServer, … tốn nhiều công sức và thời gian. Mô hình Web động:

Trong mô hình web động, Webserver sẽ tương tác với các chương trình “hậu trường” phía sau nó (PHP, ASP…) để thực hiện 1 số việc nào đó, (thường là kết nối cơ sở dữ liệu), các chương trình này lấy dữ liệu trong hệ quản trị cơ sở dữ liệu và thực hiện định dạng (nếu cần) rồi đưa về cho webserver để webserver sẽ trả về cho user.

Các chương trình “hậu trường” như PHP, ASP… là chương trình trung gian, là cầu nối giữa Webserver và cơ sở dữ liệu. Sở dĩ có chúng là vì tương tác với cơ sở dữ liệu không phải là mục tiêu của webserver, nhiệm vụ chính của WebServer là tương tác với user để trả về trang web (qua giao thức http).

1.2 Giới thiệu HTML

· HTML (Hyper Text Markup Language)là một ngôn ngữ để quy định cách hiển thị thông tin trong trang web. HTML gồm nhiều lệnh, mỗi lệnh gọi là 1 tag. Mỗi tag quy định một cách thức hiển thị dữ liệu trong trang web. Ví dụ như: chữ đậm, chữ nghiêng, màu chữ … Người xem trang web không thấy các tag mà chỉ thấy các dữ liệu được định dạng bởi các tag. Nói đơn giản : HTML Là 1 ngôn ngữ dùng để tạo ra các trang web.

· Các tag cùng với dữ liệu trong đó được lưu trong 1 file text, gọi là trang web. File này thường có tên mở rộng là .html hoặc .htm

· Ví dụ: Nếu bạn gõ như sau khi tạo trang web:

thì kết quả hiện trong Browser sẽ thế này:

· Tên tag không quan trọng chữ thường chữ hoa, tên tag phải đặt trong 2 dấu <>, thường có mở và đóng, một số tag chỉ có mở.

1.3 Một số tag thường dùng

<b>, <strong>	Chữ đậm
<i>, <em>	Chữ nghiêng
<u>	Chữ gạch dưới
<a href=url>	Tạo 1 hyperlink
< img src=url>	Chèn hình
<hr>	Chèn 1 đường gạch ngang
<p align=cáchcanh>	Tạo paragraph mới
<br>	Xuống hàng, không tạo paragraph mới

1.4 Cấu trúc của 1 trang web

· Một trang web thường có mở đầu và kết thúc bởi tag html

· Tag head chứa những thông tin để quản lý và hoạt động nội tại bên trong trang web, không hiện ra cho user xem.

· Tag title là tiêu đề của trang web, bạo giờ cũng nằm trong tag head

· Tag body chứa dữ liệu hiện ra trong trang web cho user xem.

1.5 Soạn thảo trang web

· Để soạn 1 trang web, bạn dùng 1 chương trình soạn văn bản để gõ. Có thể dùng Notepad, Wordpad hoặc MS Word. Bạn nên dùng notepad vì đây là chương trình đơn giản, dễ dùng, notepad lưu file dưới dạng text – loại file của trang web. Nếu bạn dùng Wordpad hoặc MS Word thì phải chọn dạng file là Text.

· Cách mở Notepad : Nhắp Start (All) Programs Accessories Notepad

· Lưuý: khi soạn thảo trang web, bạn gõ các tag và các dữ liệu bên trong tag. Một đoạn dữ liệu có thể nằm bên trong nhiều tag. Hãy nhớ là các tag được lồng nhau chứ không nên gõ so le nhau. Ví dụ:

· Gõ thế này là đúng: <b> <i> Nhất nghệ </i> </b> tag i lồng (nằm trọn) bên trong tag b.

· Gõ thế này là sai: <b> <i> Nhất nghệ </b> </i> 2 tag so le nhau. Mặc dù gõ thế này đôi khi browser cũng hiện ra nhưng đó là “hên”, là nhờ browse thông minh và cấu trúc trang web của bạn đơn giản, trong những trường hợp khác hoặc browser khác thì chưa chắc .

Ví dụ

· Mở Notepad và gõ nội dung sau:

<html>

<head>

<title>Trang web cá nhân</title>

</head>

<body>

<hr>

Họ tên: <b> Nguyễn Văn Tèo</b>

Email: <i><u> teonv@giahu.com </u></i>

</body>

</html>

· Nhắp menu File Save để lưu file. Lưu vào Desktop , tên file là vidu.html, Encoding là UTF-8

· Đóng Notepad

· Nhắp đúp vào file vidu.htmltrên Desktop để xem kết quả

· Thêm lệnh xuống hàng giữa Họ tên và Email:

· Thêm sau tag </b> lệnh xuống hàng: <br/>

· Đóng Notepad và lưu lại.

· Nạp lại trang vidu.html (phím F5) để xem những thay đổi

· Đưa hình (h.jpg) vào trang web:

· Xem Source HTML của trang

· Nhắp sau tag <hr> và gõ như sau:

<img src=h.jpg>

· Mở thêm 1 cửa sổ Browser. Vào Google, tìm 1 hình nào đó (cỡ lớn) và lưu vào Desktop với tên h.jpg.

· Nạp lại trang vidu.html để xem kết quả

· Chỉnh kích thước và title, cách canh và đường viền cho hình:

· Xem Source HTML của trang

· Nhắp sau chữ <img và bổ sung để được như sau:

Xong thì lưu lại

· Nạp lại trang vidu.html để xem kết quả

· Sửa chữ left thành right và xem kết quả

· Chỉnh direction (chiều cuộn), behavior (cách cuộn), scrolldelay (thời gian dừng), scrollamount (khoảng cách nhảy) của marquee

· Xem Source HTML của trang

· Nhắp sau chữ <marquee và bổ sung để được như sau:

Xong thì lưu lại

· Nạp lại trang vidu.html để xem kết quả

· Có thể sửa chữ scroll thành slidehoặc alternate

· Có thể sửa chữ right thành left hoặc up hoặc down

· Có thể sửa số 10, số 1 thành những giá trị khác (>=1)

· Thêm liên kết vào trang (liên kết nằm trong tag a)

· Xem Source HTML của trang

· Nhắp sau chữ </i> , Enter xuống hàng vào nhập vào:

<p>Website thường xem: </p>

<a href=http://google.com target=_blank> Google </a>

Xong thì lưu lại

· Nạp lại trang vidu.html để xem kết quả

1.6 Các tag HTML căn bản

Tên Tag	Cú pháp	Định nghĩa
<a>	<a href=abc.html> Tên hiển thị</a>	Tạo liên kết đến trang abc.html
<b>	<b> Nội dung đoạn văn</b>	In đậm
<br>	Nội dung đoạn văn <br> bắt đầu một dòng mới	Xuống dòng, không qua đoạn mới
<bgsound>	<bgsound delay="1" loop="-1" src="start.wav">	Nhạc nền cho trang web
<center>	<CENTER>Canh giữa chữ</CENTER>	Canh giữa
<div>	<div>……</div>	div chứa 1 vùng dữ liệu trong trang
<em>	<em> Nội dung </em>	Định dạng kiểu chữ nghiêng
<h1> to <h6>	<h1>Tiêu đề 1 </h1> <h2>Tiêu đề 2 </h2> <h3>Tiêu đề 3 </h3> <h4>Tiêu đề 4 </h4> <h5>Tiêu đề 5 </h5> <h6>Tiêu đề 6 </h6>	Tạo tiêu đề (cấp 1 đến cấp 6)
<hr>	<hr color="#FF0000">	Tạo một đường gạch ngang
<i>	<i> Nội dung </i>	Chữ in nghiêng
<iframe>	<iframe name="content_frame" width="488" height="244" src="welcome.htm"> </iframe>	Tạo 1 iframe (iframe là 1 vùng trong trang chứa 1 trang web khác)
<img>	<img src="hinh.gif" width="41" height="41" border="0" alt="Mô tả về hình ảnh">	Chèn hình vào văn bản.
<marquee>	<marquee direction="left" loop="-1" scrollamount="2" width="100%">Chữ cuộn</marquee>	Là tag dùng để cuộn (hình, văn bản).
<p>	<p>Nội dung đoạn văn bản.</p>	Paragraph
<small>	<small>Nội dung văn bản</small>	Chữ nhỏ
<span>	<span> Nội dung văn bản</span>	Bao quanh 1 vùng text để định dạng
<strong>	<strong>Nội dung đoạn văn bản</strong>	Chữ đậm
<sub>	<sub>Nội dung đoạn văn bản</sub>	Chữ subscript (chữ xuống dưới+nhỏ)
<sup>	<sup>Nội dung đoạn văn bản</sup>	Chữ superscript (chữ lên cao+nhỏ)
<u>	<u>Nội dung đoạn văn bản</u>	Gạch dưới

1.7 Bài tập minh họa

Giới thiệu cá nhân

</tr>

<tr>

<td><font color="red"><b>Hứa Chí Phước</b></font></td>

</tr>

<tr>

<td>Email</td>

<td><a href="mailto:hchiphuoc@gmail.com">hchiphuoc@gmail.com</a></td>

</tr>

<tr>

<td>Điện thoại</td>

</tr>

<tr>

<td>Facebook</td>

<td><a href="https://www.facebook.com/phuoc.huachi">Phước</a></td>

</tr>

</table>

Chương 2 CASCADING STYLE SHEET (CSS)

· Giới thiệu

· CSS là 1 kỹ thuật dùng để định dạng các tag trong trang web. CSS giúp định dạng trang web rất nhanh nhờ nhiều kiểu định dạng tag, class, element…Bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về CSS.

· Style: Là 1 tập hợp các đặc điểm định dạng cho các thành phần trong trang

· Muốn định dạng thì qua chế độ code , rồi định nghĩa các style bên trong tag <style>. Tag <style> cần đặt trong tag head

· Tạo style định dạng cho 1 tag trong toàn trang

Muốn định dạng tag nào thì style sẽ giống như tag muốn định dạng. Ví dụ: định dạng tag p và tag a

<style>

p {color:#F00}

a { color:#039; text-decoration:none}

<style>

· Tạo style định dạng cho 1 đối tượng cụ thể có tên:

Muốn định dạng cụ thể 1 tag nào đó theo tên do bạn đặt thì tạo style bắt đầu bằng dấu # .
Ví dụ sau định dạng cho 1 tag có tên là box

<style>

#box { width:300px; height:150px; text-align:justify}

<style>

Chú ý: tag phải đặt tên theo id khớp với style đã tạo thì mới có tác dụng

2.4 Tạo style định dạng cho tag bên trong 1 đối tượng có tên

Muốn định dạng tag bên trong 1 vùng thì tạo style theo công thức sau: #TênVùng tag
Ví dụ sau định dạng cho các tag a trong vùng có tên là box

<style>

#box a { color: magenta; text-transform: uppercase}

<style>

2.5 Tạo style dạng class và set class

Muốn tạo class gõ theo công thức sau: .TênClass Ví dụ sau tạo class .tieude

<style>

.caption {color:#993; padding:5px; margin:0px; text-align:center }

<style>

Set class: Tạo class xong, muốn tag nào định dạng theo class thì chỉ định thông số class.Vd:

<h4 class="caption">Tin xem nhiều</caption>

· Tạo file css và nhúng vào trang web

Tạo file css

· Nhắp menu File New chọn CSS Create Lưu với tên file .css

· Khai báo các style

Nhúng file css vào trang web

Trong trang web, gõ code trên để nhúng file css, trong đó c1.css là tên file css muốn nhúng.

· Các thuộc tính CSS

· Định dạng chữ

· font-family : Font chữ.

· font-size : Cỡ chữ

· font-weight : chữ đậm.

· font-style: chữ nghiêng

· line-height: độ cao hàng chữ trong paragraph.

· text-transform: đổi chữ hoa, chữ thường (capitalize: chữ hoa đầu từ, uppercase: toàn chữ hoa, lowercase: toàn chữ thường)

· text-decoration: gạch ngang chữ (Underline: gạch dưới chữ, Strikethrough: gạch giữa chữ , Overline: gạch đầu chữ, None: không gạch )

· color: màu chữ.

· text-align: canh chữ (left, right, center, justify)

· text-shadow: màu bóng của chữ

· Background

· background-color: màu nền.

· background-image: ảnh nền

· background-repeat: cách lặp lại ảnh nền (repeat-x, repeat-y, repeat: 2 chiều)

· background-attachment: (fixed, scroll) ảnh nền sẽ cuộn theo chữ hay cố định.

· background- position: vị trí ảnh nền theo chiều ngang/dọc.

· Box

· Width: độ rộng

· Height: độ cao

· Float: (left, right) Cho đối tượng trôi qua trái hoặc qua phải

· Clear: bỏ qua float

· Padding: : Khoảng cách từ lề của đối tượng với nội dung bên trong

· Margin: Khoảng cách từ lề của đối tượng với những đối tượng bên ngoài

· Border

· border-style: kiểu đường viền.

· border-width: độ dày.

· border-color: Màu đường viền.

· border-radius: bo tròn góc

· box-shadow: tạo bóng cho đối tượng định dạng

· List

· list-type: Kiểu bullet (disc: tròn đen; circle: tròn trắng; square: vuông…)

· list-style-image: hình dùng thay thế ký tự bullet

· Định dạng liên kết

Tên style	Ý nghĩa
a:link	định dạng cho tag a chưa được nhắp trong trang
a:visited	định dạng cho tag a đã được nhắp trong trang
a:hover	định dạng cho tag a trong trang đang được đưa chuột vào
a	định dạng cho tag a trong trang
#menu a:link	định dạng cho tag a chưa nhắp trong vùng có tên là menu
#menu a:visited	định dạng cho tag a đã được nhắp trong vùng có tên là menu
#menu a:hover	định dạng cho tag a đang đưa chuột vào trong vùng menu
#menu a	định dạng cho tag a trong vùng có tên là menu

.menu A:link	định dạng cho tag a (chưa nhắp) trong vùng có class là menu
.menu A:visited	định dạng cho tag a (đã nhắp) trong vùng có class là menu
.menu A:hover	định dạng tag a (đang đưa chuột vào) trong class là menu
.menu A	định dạng cho tất cả liên kết trong vùng có class là menu
.tieudetin	định dạng cho liên kết có class là tieudetin

2.8 Bảng định kiểu – CSS

2.8.1 Giới thiệu

Mong muốn của những người làm web chúng ta là làm thế nào để tách thông tin về kiểu dáng, diện mạo ra khỏi nội dung của các trang web. Nếu làm được điều này, chúng ta có được các lợi điểm sau:

· Dễ quản lý, bảo trì.

· Tái sử dụng. Một qui luật kiểu dáng có thể áp dụng cho nhiều thành phần web khác nhau.

· Cải thiện tốc độ.

· Giảm lượng thông tin truyền tải.

· Cách hiển thị của trình duyệt

2.8.2 Khởi động nhanh

Để không gặp khó khăn của các qui luật của CSS, hãy tìm hiểu một ví dụ đơn giản về nó. Qua đó chúng ta có dịp làm quen với các khái niệm của CSS.

Mã nguồn HTML

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

H2{color:red;font-size: 14px;}

</STYLE>

</HEAD>

This is the H1 element (1)</H1>

<H2>This is the H2 element (1)</H2>

<H1>This is the H1 element (2)</H1>

<H2>This is the H2 element (2)</H2>

</HTML>

Kết quả thực hiện

Hình 5.2: Áp dụng CSS đơn giản

Phân tích ví dụ:

Các thẻ <h2> nhỏ và màu đỏ là do dòng mã CSS H2{color:red;font-size: 14px;}. Còn thẻ <h1> nghiêng và có màu xanh do thuộc tính style chứa CSS style="color:blue;font-style:italic;".

Phương pháp định nghĩa CSS cho 1 thẻ phù hợp cho áp dụng hàng loạt ngược lại phương pháp inline (sử dụng thuộc tính style) thì các CSS được tạo ra chỉ để áp dụng cho từng trường hợp đơn lẻ.

· Bộ chọn (Selector)

Bộ chọn (selector) là nơi định nghĩa các qui luật kiểu dáng để áp dụng cho các thành phần trên trang web. Có 3 loại bộ chọn cơ bản là Class, ID và HTML

2.8.3.1 Bộ chọn HTML (HTML Selector)

· Định nghĩa: định nghĩa kiểu dáng bổ sung cho các thẻ HTML

<tên thẻ>{<khai báo các thuộc tính css>}

· Áp dụng: Tự động áp dụng các qui luật css trong phần khai báo cho tất cả các thẻ có tên là <tên thẻ>

· Ví dụ sau đây định nghĩa lại thẻ <fieldset> và legend với các thuộc tính kích thước (width), đường kẻ (border), màu chữ (color), màu nền (background-color).

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

FIELDSET{

width: 250px;

border: 1px dotted #0000FF;

}

LEGEND{

font-weight: bold;

color: #FF0000;

background-color: #FFFF00;

border: 1px dotted #0000FF;

width: 150px;

}

</STYLE>

</HEAD>

<body>

<input type="radio" name="rdoGioiTinh" checked/>Nam

<input type="radio" name="rdoGioiTinh" />Nữ

</fieldset>

</body>

</HTML>

Kết quả hiển thị

· Bộ chọn lớp (Class Selector)

· Định nghĩa: định nghĩa một lớp được bắt đầu bởi dấu chấm (.) bên trong khai báo nhiều thuộc tính css để áp dụng cho bất kỳ thẻ nào chỉ định bởi thuộc tính class của nó.

.<tên lớp>{<khai báo các thuộc tính css>}

· Áp dụng: tất cả các thẻ sử dụng thuộc tính class có giá trị là <tên lớp>. Chú ý thuộc tính class của mỗi thể có thể chỉ đến nhiều class cùng một lúc (cách nhau khoản trắng).

· Ví dụ sau định nghĩa 2 bộ chọn lớp sau đó thẻ <H1> áp dụng một còn thẻ <DIV> áp dụng cả hai để tận dụng các đặc điểm tổng hợp.

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

.MyHeader{

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

font-style: italic;

font-size: 14px;

color: #FF0000;

}

.MyBorder{

border: 3px double blue;

font-size: 20px;

display: inline;

}

</STYLE>

</HEAD>

<body>

<h1 class="MyHeader">Hello World !</h1>

<div class="MyHeader MyBorder">Hello World !</div>

</body>

</HTML>

Trong đó

· font-family: tên font chữ

· font-weight: độ đậm

· font-style: kiểu chữ

· font-size: kích thước chữ

· color: màu chữ

Kết quả thực hiện

· Bộ chọn định danh (ID Selector)

· Định nghĩa: giống như bộ chọn lớp nhưng khởi đầu với dấu rào (#)

#<tên định danh>{<khai báo các thuộc tính css>}

· Áp dụng: tất cả các thẻ sử dụng thuộc tính id với giá trị là <tên định danh>

· Ví dụ sau định nghĩa bộ chọn định danh tên là #MyPara sau đó áp dụng cho một thẻ <P> trong trang web. Chú ý thẻ <P> còn lại không hề bị ảnh hưởng gì.

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

#MyPara

{

background-color: orange;

background-image: url(images/abc.gif);

text-align: justify;

margin: 10px;

padding: 5px;

border: 1px dotted #0000FF;

}

</STYLE>

</HEAD>

<body>

</body>

</HTML>

Kết quả thực hiện

· Bộ chọn nâng cao

· Bộ chọn cho liên kết

Định nghĩa: định nghĩa css cho siêu liên kết. Với liên kết có bốn trạng thái sử dụng là chưa thăm (chưa click), đã thăm, có chuột và tích cực (đang chọn). Vì vậy để định nghĩa CSS áp dụng cho liên kết bạn không chỉ định nghĩa CSS cho thẻ <A> mà còn định nghĩa cả 4 trạng thái của nó. Sau đây là cú pháp chung định nghĩa css cho siêu liên kết

A: {<khai báo các thuộc tính css>}

A:link {<khai báo các thuộc tính css>}

A:visited{<khai báo các thuộc tính css>}

A:hover{<khai báo các thuộc tính css>}

A:active{<khai báo các thuộc tính css>}

· Áp dụng: Tất cả các liên kết trong trang có định nghĩa CSS cho liên kết

· Ví dụ

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

font-family: Arial

font-size:16px;

text-decoration: none;

}

A:link{

color: Blue;

}

A:visited{

color: Green;

}

A:hover{

text-decoration: underline;

color: Red;

border: 1px dotted Red;

background-color: Yellow;

}

A:active{

color: Orange;

}

</STYLE>

</HEAD>

<body>

<a href="#1">Link 1</a> |

<a href="#2">Link 2</a> |

<a href="#3">Link 3</a> |

<a href="#4">Link 4</a> |

<a href="#5">Link 5</a> |

</body>

</HTML>

Kết quả thực hiện: Link3 đang có chuột, Link2 đã bị click trước đó

· Nhiều bộ chọn cùng kiểu

· Định nghĩa: định nghĩa nhiều bộ chọn đồng một số kiểu dáng.

<bộ chọn 1>, <bộ chọn 2>,…,<bộ chọn n>{<khai báo các thuộc tính css>}

· Áp dụng: áp dụng các khai báo css cho tất cả các thẻ có chỉ định sử dụng css thõa mãn với các bộ chọn được liệt kê cách nhau dấu phẩy.

· Ví dụ

<html>

<head>

<title>HTML, CSS & JQuery</title>

#A, .B, DIV INPUT, H2

{

font-weight: bold;

font-style: italic;

color: #FF0000;

font-size: 11pt;

}

</style>

</head>

<body>

<div id="A">Nghĩa mẹ như nước trong nguồn chảy ra</div>

</body>

</html>

Kết quả thực hiện

Lưu ý: “DIV INPUT” có nghĩa là định nghĩa css cho các thẻ <INPUT> đặt trong các thẻ <DIV>. Vì vậy trong bài này thẻ <input> không đặt trong <div> không hề chịu tác dụng của css đã định nghĩa.

· Bộ chọn khoanh vùng

· Định nghĩa: định nghĩa CSS cho các vùng khác nhau trên trang. Như vậy chúng ta cần xác định vùng cần áp dụng và bộ chọn chứa các CSS để áp dụng.

<vùng> <bộ chọn>{<khai báo các thuộc tính css>}

· Áp dụng: Áp dụng CSS của bộ chọn cho các thẻ đặt trong <vùng> và chỉ định áp dụng bộ chọn

· Ví dụ

<HTML>

<HEAD>

<title>HTML, CSS & JQuery</title>

/*--võ bọc bên ngoài rộng 900px, canh giữa, nền trắng--*/

.container{width:900px; margin: 0px auto; background-color: White;}

/*--đầu trang cao 100px--*/

.top{height: 100px; background-color: Red;}

/*--menu trang cao 22px, canh giữa--*/

.menu{height: 22px; background-color: Yellow; text-align:center}

/*--giữa trang cao tối thiểu 400px--*/

.middle{min-height: 400px;}

/*--giữa-trái cao như middle, rộng 250px, gâm trái--*/

.middle_left{

float:left;width: 250px;min-height:inherit;

background-color: Aqua;

}

/*--giữa-phải cao như middle, rộng 650px, gâm phải--*/

.middle_right{

float:right;width: 645px;min-height:inherit;

background-color: White;

}

/*--chân trang không gâm, cao 22px--*/

.bottom{clear:both;height: 22px; background-color: Yellow;}

/*--fieldset trong .middle_left cao tối thiểu 150--*/

.middle_leftfieldset{min-height: 150px;}

/*--li trong .middle_left không dùng dấu, kẽ chân--*/

.middle_leftli{list-style-type:none; border-bottom: 1px dotted red;}

/*--liên kết trong .menu cách nhau 20px--*/

.menua{padding: 0px 10px 0px 10px;}

/*--liên kết trong .middle_left chữ HOA nhỏ--*/

.middle_lefta{font-variant:small-caps;}

/*--liên kết có chuột trong .middle_left in đậm--*/

.middle_lefta:hover{font-weight: bold;}

/*--liên kết chung cho toàn trang--*/

a{text-decoration: none;}

a:link, a:active, a:visited{color: Blue;}

a:hover{color: Red;}

body{background-color: Gray;}

</STYLE>

</HEAD>

<body>

<a href="#1">Home</a> |

<a href="#2">About Us</a> |

<a href="#3">Contact Us</a> |

<a href="#4">Feedback</a> |

</div>

<legend>Member Info</legend>

</fieldset>

<legend>Products</legend>

<li><a href="#1">Nokia</a></li>

<li><a href="#2">Sumsung</a></li>

<li><a href="#3">Sony Ericsson</a></li>

<li><a href="#4">Motorola</a></li>

<li><a href="#5">Apple</a></li>

<li><a href="#5">Seamen</a></li>

</fieldset>

<legend>Online Support</legend>

</fieldset>

</div>

</div>

</div>

</body>

</HTML>

Kết quả thực hiện

Các bạn lưu ý các điểm sau:

· Khoanh vùng liên kết cho 2 vùng khác nhau là .menu và .middle_left:

/*--liên kết trong .menu cách nhau 20px--*/

.menu a{padding: 0px 10px 0px 10px;}

/*--liên kết trong .middle_left chữ HOA nhỏ--*/

.middle_left a{font-variant:small-caps;}

/*--liên kết có chuột trong .middle_left in đậm--*/

.middle_left a:hover{font-weight: bold;}

Chúng ta cũng khoanh vùng cho các <fieldset> và <li> đặt trong middle_left

/*--fieldset trong .middle_left cao tối thiểu 150--*/

.middle_left fieldset{min-height: 150px;}

/*--li trong .middle_left không dùng dấu, kẽ chân--*/

.middle_left li{list-style-type:none; border-bottom: 1px dotted red;}

· Qui tắc nạp chồng

Nếu nhiều bộ chọn cùng được áp dụng cho cùng một thẻ thì phần khác nhau sẽ được gộp lại và phần giống nhau sẽ bị bộ chọn có độ ưu tiên cao hơn nạp chồng lên các bộ chọn có độ ưu tiên thấp hơn.

Thể loại và vị trí định nghĩa của các bộ chọn sẽ ảnh hướng đến độ ưu tiên của chúng khi áp dụng lên một thẻ. Hãy ghi nhớ 2 qui tắc sau:

· Phân biệt theo thể loại:

· Nội tuyến -> Bộ chọn ID -> Bộ chọn Class-> Bộ chọn HTML -> Mặc định

· Phân biệt theo vị trí định nghĩa:

· Nội tuyến -> Nhúng -> Liên kết ngoài

Ví dụ sau thẻ <H1> chịu ảnh hưởng cả 3 bộ chọn khác nhau. Khi chạy sẽ cho dòng chữ “Nạp Chồng” màu vàng

<HTML>

<HEAD>

<TITLE>Job application</TITLE>

H1{color: green;}

#xyz{color: yellow;}

.abc{color: Red;}

</style>

</HEAD>

<BODY>

<H1 class="abc" id="xyz">Nạp chồng</H1>

</BODY>

</HTML>

· Các thuộc tính CSS

Khi thiết kế trang web với CSS thì vốn kiến thức CSS là khối lượng các thuộc tính CSS mà bạn có được. Sau đây trình bày danh sách các thuộc tính thường dùng nhất có phân loại.

Các thuộc tính CSS thường sử dụng để định nghĩa cho văn bản trên trang web như font chữ, màu sắc, chế độ hiển thị…

Thuộc tính	Mô tả
font-family: Verdana, Geneva, sans-serif;	Chỉ định tên font. Các font được liệt kê các nhau dấu phẩy. Áp dụng cho font được tìm thấy trước
font-size: 12px;	Kích thước font
font-style: italic;	Kiểu font
line-height: 12px;	Độ cao của mỗi hàng
font-weight: bold;	Độ đậm của font chữ: bold (đậm), 100 (độ đậm 100)
font-variant: small-caps;	Chữ hoa nhỏ, ký tự đầu lơn hơn
text-transform: uppercase;	Chữ hoa, chữ thường lowercase(thường), uppercase(HOA)
color: #F00;	Màu sắc có thể dùng mã (Red, Green, Blue) hoặc tên màu
text-decoration: none;	Trang trí chữ: none(không làm gì), underline(gạch chân), throuth-line(gạch ngang giữa)

· Nền

Nền chỉ có 2 loại là màu và ảnh. Nếu là ảnh thì cần điều chỉnh chế độ lặp lại (lát). Trong trường hợp không lặp bạn cần điều chỉnh vị trí đặt ảnh nền.

Thuộc tính	Mô tả
background-color: #F00;	Màu nền
background-attachment: fixed;	Chế độ cuộn ảnh nền · Fixed = cố định ảnh nền khi cuộn nội dung · Scroll = ảnh nền cuộn theo nội dung
background-image: url(anh/abc.jpg);	Ảnh nền
background-repeat: repeat;	Chế độ lặp: · None: không lặp · Repeat: lặp cả 2 chiều · repeat-x: lặp chiều ngang · repeat-y: lặp chiều đứng
background-position: left center;	Vị trí đặt ảnh nền trường hợp không lặp
Background-size: 100% 100%	Kích thước ảnh nền (width height)

· Định nghĩa toàn khối văn bản

Điều khiển các thông số toàn khối văn bản là rất cần thiết để áp dụng cho một vùng nào đó trên trang web. Bạn có thể điều chỉnh khoản cách giữa các ký tự, các từ, thụt đầu dòng hay canh lề theo chiều đúng, chiều ngang. Đặc biết là chế độ hiển thị của khối.

Thuộc tính	Mô tả
letter-spacing: 2em;	Khoản cách giữa các ký tự
text-align: justify;	Canh lề: left, right, center, justify
text-indent: 5px;	Khoản thụt vào đầu dòng
vertical-align: middle;	Canh lề đứng: top, bottom, middle, base-line
word-spacing: 4em;	Khoản cách giữ các từ
display: inline;	Chế độ hiển thị: none (ẩn khối), block (một khối tách biệt), inline (trong hàng cho phép ngắt khối khi xuống hàng), inline-block (xuống hàng nguyên khối)

· Định nghĩa thuộc tính hộp

Mô hình của một hộp gồm kích thước, lề, phần đệm, được viềng, chế độ xếp hộp.

Thuộc tính	Mô tả
height: 222px;	Chiều cao
width: 111px;	Chiều rộng
margin: 6px;	Khoản lề xung quanh hộp. Sử dụng margin-top, margin-right, margin-bottom, margin-left nếu muốn định nghĩa riêng mỗi cạnh.
padding: 4px;	Phần đệm bên trong hộp. Sử dụng padding -top, padding -right, padding -bottom, padding -left nếu muốn định nghĩa riêng mỗi cạnh.
border: medium dotted #F00;	Đường kẻ theo thứ tự độ dài, kiểu, màu. Sử dụng border -top, border -right, border -bottom, border -left nếu muốn định nghĩa riêng mỗi cạnh.
float: left;	Gâm (chế độ xếp hộp) vào trái: left (gâm trái), right(gâm phải)
clear: right;	Hủy bỏ chế độ gâm: left(xóa gâm trái), right(xóa gâm phải), both(xóa gâm cả 2 bên)

· Định nghĩa danh sách

Để điều chỉnh <OL>, <UL> và <LI> bạn cận sử dụng các thuộc tính css sau đây.

Thuộc tính	Mô tả
list-style-position: inside;	Vị trí đặt dấu danh sách
list-style-type: square;	Kiểu dấu danh sách: square, none-list, circle
list-style-image: url(xyz/abc.gif);	Hình ảnh thay dấu danh sách

· Layer

Để tạo ra và điều chỉnh các thông số của nó, bạn cần học các thuộc tính css sau đây là đủ.

Thuộc tính	Mô tả
overflow: scroll;	Điều kiển chế độ tràn: scroll, visible, hidden
position: relative;	Chế độ vị trí của layer. Absolute (vị trí tuyệt đối so với layer mẹ), relative (vị trí tương đối tức đặt tại vị trí đặt thẻ)
visibility: visible;	Ẩn hiện layer
left: 0px;	Vị trí layer tính từ bên trái
top: 0px;	Vị trí layer tính từ bên trên
right: 0px;	Vị trí layer tính từ bên phải
bottom: 0px;	Vị trí layer tính từ bên dưới
z-index: 111;	Chiều z hướng từ trong màn hình ra người dùng. Layer nào có z-index cao hơn sẽ nằm trên.

· Bài tập minh họa

Trong bài này bạn sẽ sử dụng CSS để thiết kế lại form nhập (đăng nhập) theo yêu cầu được mô tả như sau:

· Các ô nhập (text, password, textarea) và các nút (button, reset, submit) được bo tròn góc.

· Các ô nhập ở trạng thái focus có bóng trong màu xanh

· Các ô nhập ở trạng thái hover có bóng trong màu cam

Các liên kết không có gạch chân và khi ở trạng thái hover thì có màu cam và chữ small-caps.

Các bước để hoàn thành công việc thiết kế CSS như mô tả trên bạn chỉ cần thiết kế tập tin form-styles.css sau đó liên kết vào trang Login.aspx của bài lab7.1

THỰC HIỆN

Bước 1: Thiết kế form-styles.css

input[type=text], input[type=password], textarea

{

border:1px solid lightgray;

border-radius:10px;

padding:0px 10px;

height:22px;

}

input[type=text]:hover, input[type=password]:hover, textarea:hover

{

box-shadow: inset 0 0 10px orange;

}

input[type=text]:focus, input[type=password]:focus, textarea:focus

{

box-shadow: inset 0 0 10px aqua;

}

input[type=button], input[type=submit], input[type=reset]

{

border:1px solid lightgray;

border-radius:15px;

padding:0px 15px;

height:28px;

font-weight: bold;

background-color: White;

box-shadow: inset 0 0 10px lightgray;

font-variant:small-caps;

}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover

{

color:orange;

border:1px solid orange;

box-shadow: inset 0 0 15px orange;

}

{

text-decoration:none;

}

a:hover

{

font-variant:small-caps;

color:orange;

}

Bước 2: Liên kết đến Login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<tr>

<asp:Label ID="lblError"runat="server"ForeColor="Red"

Text="Vui lòng đăng nhập !"></asp:Label>

</td>

</tr>

<tr>

<td>

Mã đăng nhập</td>

<td>

<asp:TextBox ID="txtMaDN"runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

Mật khẩu</td>

<td>

<asp:TextBox ID="txtMatKhau"TextMode="Password"runat="server"Width="250px"></asp:TextBox>

</td>

</tr>

<tr>

<td>

 </td>

<td>

<asp:CheckBox ID="chkRemember"runat="server"Text="Ghi nhớ tài khoản ?" />

</td>

</tr>

<tr>

<td>

Mã bảo mật</td>

<td>

<asp:TextBox ID="txtMaBM"runat="server"></asp:TextBox>

<asp:Label ID="lblMaBM"runat="server"Text="123456"Font-Bold="True"

Font-Size="Larger"ForeColor="Red"></asp:Label>

</td>

</tr>

<tr>

<td>

 </td>

<td>

<asp:Button ID="btnDangNhap"runat="server"Text="Đăng nhập"/>

</td>

</tr>

<tr>

<asp:HyperLink NavigateUrl="DangKy.aspx"ID="lnkDangKy"runat="server">Đăng ký thành viên ?</asp:HyperLink>

</td>

</tr>

<tr>

<asp:HyperLink NavigateUrl="QuenMK.aspx"ID="lnkQuenMK"runat="server">Quên mật khẩu ?</asp:HyperLink>

</td>

</tr>

</table>

</div>

</body>

</html>

Bước 3: Chạy

Chạy như trong phần mô tả

Định dạng layout đơn giản

Bước 1 : Code trong trang vidu1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<div id="right">MỤC RIGHT</div>

<div id="footer">MỤC FOOTER</div>

</div>

</body>

</html>

Bước 2 : Code trong trang vidu1.css

#wrapper{ width:800px; margin:auto}

#top{ width:800px; height:100px; background-color:#009; color:#FFF}

#left{ width:300px; height:500px; float:left; background-color:#033; color:#FFF}

#right{ width:500px; height:500px; float:left; background-color:#0CF; color:#F00}

#footer{ width:800px; height:100px; clear:both; background-color:#C30; color:#FF0}

Bước 3 : Chạy và kiểm tra

Định dạng layout phức tạp

Bước 1 : Code trong trang vidu1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<div id="left_bottom">MỤC LEFT BOTTOM</div>

</div>

<div id="right_top">MỤC RIGHT TOP</div>

<div id="right_bottom">MỤC RIGHT BOTTOM</div>

</div>

<div id="footer">MỤC FOOTER</div>

</div>

</body>

</html>

Bước 2 : Code trong trang vidu1.css

#wrapper{ width:800px; margin:auto}

#top{ width:800px; height:100px; background-color:#009; color:#FFF}

#left{ width:300px; height:500px; float:left;}

#left_top{ width:300px; height:300px; background-color:#090; color:#FFF}

#left_bottom{ width:300px; height:200px; background-color:#360; color:#FFF}

#right{ width:500px; height:500px; float:left; }

#right_top{ width:500px; height:200px; background-color:#FC0; color:#FFF}

#right_bottom{ width:500px; height:300px; background-color:#663; color:#FFF}

#footer{ width:800px; height:100px; clear:both; background-color:#C30; color:#FF0}

Bước 3 : Chạy và kiểm tra

Chương 3 : JAVASCRIPT VÀ JQUERY

3.1 Giới thiệu

· Là ngôn ngữ lập trình dạng script thực thi trong browser

· Javasrcipt giúp trang web có tính tương tác với user như: đổi màu 1 đối tượng khi đưa chuột vào, đổi nội dung của 1 tag, đưa ra các thông báo cần giao tiếp, phóng to hình

· Trong trang web, mã lệnh javascript được đặt bên trong tag script

· Mã lệnh javascript có thể đặt trực tiếp trong trang html hoặc có đặt trong 1 file riêng (có tên mở rộng là js). Khi đó trang html muốn dùng code javascript thì link đến file js

· Mỗi lệnh javascript kết thúc là dấu ;

3.2 Đưa javascript vào trang

· Nhập trực tiếp code trong HTML

Là viết mã lệnh Javascript trực tiếp trong file HTML với tag script. Ví dụ:

· Viết mã javasctipt trong file riêng

Là viết mã lệnh trong file .js nằm ngoài trang web. Sau đó nhúng file js vào trang web

· Tạo file javascript:

· Nhắp menu File New Javascript Create

· Gõ mã lệnh javascript . Ví dụ: gõ

hoten=prompt("Bạn ơi bạn tên gì?");

alert("Chào bạn " + hoten);

</script>

· Lưu file với tên mở rộng là .js

· Liên kết file js đến trang html

· Mở 1 fle html.

· Nhắp vị trí muốn chèn (thường trong tag head) rồi vào menu Insert HTML Script Object Script Chọn file javascript F12 xem thử

3.3 Jquery

· jQuery là một thư viện giúp viết code JavaScript dễ hơn.

· JQuery có nhiều hàm giúp định dạng, thay đổi nội dung trang web, tạo nhiều hiệu ứng như mờ dần, chạy dọc chạy ngang, tạo request ajax v.v..

· jQuery cho phép tạo ra các Plugin. Cộng đồng sử dụng jQuery đã tạo ra nhiều plugin rất hay

· Nhúng jquery vào trang web

· Vào trang chủ www.jQuery.com và download phiên bản mới nhất (file js), chép vào folder website của bạn, rồi insert vào trang web bằng tag script

· Hoặc chèn Jquery từ site chính thức của Jquery:

$(document).ready(function(){

// Mã jquery của bạn

});

</script>

</head>

· Sử dụng jQuery cơ bản

Lệnh đầu tiên trong jQuery mà bạn cần biết là lệnh theo dõi document ready (ready event), lệnh này theo dõi và đợi cho đến khi document sẵn sàng. Code Jquery thường đặt trong sự kiện này để chúng thực thi khi tài liệu sẵn sàng

$(document).ready(function(){

// Mã jquery của bạn

});

</script>

· Chọn các phần tử HTML

Thao tác cơ bản của Jquery là chọn các phần tử trong tài liệu HTML và thực hiện một việc gì đó. Cú pháp như sau: $(query).action()

$ là kí hiệu đặc biệt, xác định đây là câu lệnh jQuery. action là hàm sẽ tác động lên các phần tử được chọn (click, change…). query là cách chọn phần tử.