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...

Một định nghĩa khác - nếu nhìn ở kết quả trong trình duyệt - chúng ta có thể nói một cách nôm na rằng: trang web là một trang thông tin giống như một trang báo, nhưng súc tích hơn vì có đủ các dạng thông tin: chữ, hình , âm thanh, video.

2. Hyperlink

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

3. Website

Là một tập hợp nhiều trang web thể hiện thông tin của một tổ chức, một chủ đề nào đó.

Mỗi website có một trang web gọi là trang chủ, trang chủ này 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.

4. Browser (Trình duyệt web)

Là chương trình dùng để xem các trang web. Ví dụ : Internet Explorer, Firefox, Chrome…

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, 2 chương trình webserver nổi tiếng nhất là: IIS và Apache.

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.

6. Http

Khi bạn gõ một địa chỉ trong thanh Address của browser hoặc nhắp một liên kết, giữa browser của bạn và webserver sẽ diễn ra hàng loạt các liên lạc/ trao đổi với nhau để hiển thị trang web cho bạn xem. Những hoạt động liên lạc này là giao thức http

7. 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

Mô hình web tĩnh:

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 hay hệ thống. Webserver chỉ việc lấy file htm trả về cho user. Vậy là xong.

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 một 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).

II. Các loại trang web trong 1 website

1. Trang chủ (Homepage)

Là trang đầu tiên xuất hiện khi website được gọi tên. Trang chủ thường chứa các thông tin căn bản nhất của website và các liên kết đến các trang chuyên đề. Trang chủ có thể có các tên như index.html, default.htm

2. Trang chuyên đề

Là trang lớn mang các liên kết đến các trang đơn vị có cùng tính chất. Ví dụ: Trang chuyên đề giới thiệu lãnh đạo công ty liên kết đến các trang về giám đốc, phó giám đốc,

trưởng phòng.... Trang chuyên đề giới thiệu các dịch vụ liên kết đến các trang đơn vị có nội dung giới thiệu từng dịch vụ …

Trong website tin tức, trang chuyên đề là các trang hiển thị tin trong một loại.

3. Trang đơn vị

Thường được bố trí vào các thư mục có cùng chủ đề, chứa nội dung cụ thể của website. Một trang đơn vị có thể xuất hiện trên một hay nhiều trang chuyên đề tùy theo tính chất của trang đó.

Các trang đơn vị thường là một trang web tĩnh với đuôi htm hay html, cũng có thể là những trang web động với kết quả hiển thị là những thông tin trích xuất từ database.

Trong website tin tức, trang đơn vị là các trang hiển thị chi tiết một tin nào đó.

4. Trang phản hồi (Feedback)

Chứa các form thu nhận thông tin từ người xem. Đây là đặc trưng của Internet: thông tin hai chiều. Người xem web không chỉ nhận thông tin từ web mà còn có thể giao tiếp với chủ website thông qua trang web. Thông tin do người đọc nhập vào có thể hiển thị ngay tại trang web hoặc có thể chuyển đến một địa chỉ email nhất định nào đó hoặc đưa vào cơ sở dữ liệu.

Có nhiều loại trang phản hồi tùy mục đích sử dụng form thu nhận thông tin. Ví dụ trang góp ý, trang đặt câu hỏi thắc mắc...

5. Trang 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 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, ….

III. Các thành phần thường có trong 1 trang web

1. Chữ

Là những thông tin chính trình bày trong trang web.

2. Hình ảnh

Có 3 loại hình ảnh dùng để chèn vào trang web, đó là gif, png, jpg. Gif nhẹ ký nhưng màu sắc đơn giản, jpg và png nặng ký hơn và màu sắc mịn đẹp. Gif giúp tạo các hình animation chuyển động nhúc nhích làm vui mắt. Hình ảnh nhiều làm cho việc load web chậm. Gif và png có thể tạo hiệu ứng transparent (trong suốt) cho hình.

3. Banner

Là một file ảnh dùng để quảng cáo hay tiêu đề website.

4. Logo

Là biểu tượng của website, hoặc của cơ quan chủ quản website.

5. Hit Counter

Là thông tin đếm số người truy cập website.

6. Search form

Là hộp thoại giúp người xem tìm kiếm thông tin cần tìm. Search form có thể dùng để tìm thông tin trong một trang, một site hay tất cả các site trên toàn cầu.

7. Navigator (Menu)

Là tập hợp những liên kết dẫn đến các trang chuyên đề.

8. Multimedia

Là các file ảnh, video hay âm thanh lồng trong trang.

IV. 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 bạn nên viết bằng chữ thường, đặt trong 2 dấu < >. Tag thường có mở và đóng, một số tag chỉ có mở.

V. Cấu trúc của một 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.

VI. Soạn thảo trang web

1. Mở Notepad++ và gõ nội dung sau

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

(Encoding là UTF-8)

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

2. Xem Source HTML của trang

Trong trình duyệt , nhắp phải chuột è View page Source, bạn sẽ thấy code HTML của trang. Hoặc hay hơn là nhắp nút phải tại tên file .html è Edit With Notepadd++

3. 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

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

- Trong source HTML của trang, nhắp sau tag <hr> và gõ như sau:

- 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 (Chú ý: Trong trang google có chỗ để bạn tìm hình theo kích thước, theo màu, theo loại hình, theo thời gian.)

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

5. 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ả

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

- Trong source HTML của tran, nhắp sau chữ </i> , Enter xuống hàng vào nhập vào code sau rồi lưu lại:

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

VII. Các tag HTML căn bản

Tên Tag	Cú pháp	Định nghĩa
<!--...-->	<!-- Nội dung chú thích -->	Chú thích trong HTML
<!DOCTYPE>	<!doctype html public "-//ietf//dtd html Level 1//en">	Ghi thông tin về version HTML áp dụng trong tài liệu Web
<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
<blockquote>		Định nghĩa một khối trích dẫn

<body>	<BODY>Nội dung trang HTML</BODY>	Tag chứa toàn bộ nội dung trang
<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
<caption>	<table> <caption>Bảng điểm </caption> <tr><td>Tên</td><td>Điểm</td></tr> <tr><td>Tèo</td><td>9</td></tr> </table>	Nhãn của 1 table
<dl> , <dt> , <dd>	<dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl>	dl: Tạo danh sách dạng definition list dt: phần tiêu đề trong 1 mục dd: phần mô tả trong 1 mục
<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
<embed>	<embed src="yourfile.mid" autostart="true" hidden="false" loop="false">	Nhúng đối tượng (nhạc, phim..)
<fieldset>		Định nghĩa một fieldset, dùng để bao quanh 1 vùng dữ liệu (cho đẹp)
<form>	<form method=post action="xuly.php"> </form>	Tạo 1 form
<input>	<form method=post action="xuly.php"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form>	form: Tạo 1 form input: dùng để chèn các text field, button, checkbox, radio button, image field trong form
<h1> to <h6>	<h1>Tiêu đề 1 </h1> <h2>Tiêu đề 2 </h2> <h3>Tiêu đề 3 </h3>	Tạo tiêu đề (cấp 1 đến cấp 6)

	<h4>Tiêu đề 4 </h4> <h5>Tiêu đề 5 </h5> <h6>Tiêu đề 6 </h6>
<head> , <meta>	<head> <meta name="Description" content="Mô tả website"> <meta name="keywords" content="Từ khóa 1, từ khóa 2,..."> </head>	head:Phần thông tin quản lý meta: Tag Meta chứa các thông tin quản lý trang web. Ví dụ: Mô tả trang, khai báo keyword, tự động chuyển hướng, tạo hiệu ứng chuyển trang …
<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 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.
<legend>		Title của một fieldset
<ol>, <li>	<ol> <li>Danh mục 1</li> <li>Danh mục 2</li> <li>Danh mục 3</li> </ol>	ol: Tạo danh sách dạng unordered list li: Tạo 1 mục trong danh sách
<link>	<link href="c1.css" rel="stylesheet" type="text/css" />	Liên kết đến 1 file css
<ol>	<ol> <li>Danh mục 1</li> <li>Danh mục 2</li> <li>Danh mục 3</li> </ol>	Tạo 1 danh sách dạng ordered list (mỗi mục có 1 số thứ tự ở đầu)
<option>, <select>	<select> <option value="giátrị1">Option1</option> <option value="giátrị2">Option2</option>	select: dùng để tạo 1 select box option: Tạo 1 item trong 1 select box

	</select>
<p>	<p>Nội dung đoạn văn bản.</p>	Paragraph
<script>	<script type="text/javascript" src="a.js"> </script>	Liên kết đến 1 file javascript (a.js)
<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
<style>	<style>body { color : white} P { color : blue; font-size : 12pt; } H1 { color : red; font-size : 18pt} </style>	Tag chứa các style CSS trong vùng head
<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ỏ)
<table>, <td>, <tr>	<table> <tr> <th>Họ tên</th> <th>Điểm</th> </tr> <tr> <td>Tèo</td> <td>9</td></tr> <tr> <td>Tý</td> <td>10</td></tr> <table>	table: Tạo 1 bảng tr: Tạo 1 hàng trong bảng td: Tạo 1 ô dữ liệu trong bảng th: Tạo 1 ô tiêu đề trong bảng
<textarea>	<textarea>…</textarea>	Tạo 1 đối tượng trong form để user gõ nhiều hàng chữ
<u>	<u>Nội dung đoạn văn bản</u>	Gạch dưới
<ul>	<ul> <li>Danh mục 1</li> <li>Danh mục 2</li> </ul>	Tạo 1 danh sách dạng unordered list (mỗi mục có 1 số ở đầu)

B. CĂN BẢN VỀ DREAMWEAVER

I. Giới thiệu về Dreamweaver

Dreamweaver là chương trình dùng để tạo trang web tĩnh, web động rất hay. Dreamweaver là một thành phần trong bộ sản phẩm của hãng Adobe gồm nhiều sản phẩm như: Photoshop, Dreamweaver, Fireworks, Acrobat Pro,…

Mở Dreamweaver: Start è (All) Programs è Abobe Dreamweaver …

II. Thao tác với trang

1. Tạo trang web

a. Tạo trang HTML trống

Menu File è New è Blank page è HTML è None è Create

b. Tạo trang PHP

Menu File è New è Blank Page è PHP è Noneè Create

2. Xem thử trang web

Gõ phím F12 để xem thử

3. Chuyển chế độ làm việc

a. Chế độ Code

Là chế độ để xem và làm việc với code HTML của trang.

b. Chế độ Design

Là chế độ chủ yếu để xem và làm việc với trang. Trang web sẽ hiện gần giống hệt theo ý của bạn ở chế độ này.

c. Chế độ Split

Chia đôi màn hình. Phía trên hiện code HTML, phía dưới là chế độ Design.

d. Chuyển chế độ của trang

Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document)

4. Lưu trang web

Nhắp menu File è Save /Save As / Save All

5. Mở trang

Nhắp đúp vào tên file trong panel Files.

6. Đổi tên file

Nhắp tên file trong panel Files è gõ phím F2 è gõ tên file mới

III. Màn hình Dreamwevear

1. Toolbar Document

Là thanh toolbar chứa các thao tác với tài liệu hiện hành. Toolbar này chứa các nút Design, Code, Split mà bạn đã dùng.

2. Thanh Properties

Là thanh nằm bên dưới vùng soạn thảo. Thanh Properies là nơi hiện các thuộc tính của đối tượng mà bạn đang chọn. Bạn dùng thanh này để hiệu chỉnh thuộc tính của đối tượng.

Ẩn hiện thanh Properties: Nhắp menu Window è Properties

3. Thanh Tag

Là thanh nằm ngang, ngay phía trên thanh Properties. Đây là nơi hiện ra các tag chứa đối tượng mà bạn đang chọn. Nghĩa là nếu bạn muốn biết một đối tượng nào đó nằm trong các tag nào, hãy chọn nó rồi nhìn vào thanh này.

4. Panel group

Là vùng nằm dọc bên phải của vùng soạn thảo. Đây là nơi chứa rất nhiều thông tin mà bạn có thể dùng để tạo và định dạng trang, các panel thường dùng trong đây là Insert, CSS,

Files

a. Insert bar

Là toolbar dùng để chèn các đối tượng vào trang web (table, hình, form, div…). Ẩn hiện thanh này bằng cách vào menu Window è Insert

b. Css bar

Là toolbar dùng để định dạng các tag bằng kỹ thuật CSS. Ẩn hiện thanh này bằng cách vào menu Window è CSS Designer

c. Css bar

Là toolbar dùng để quản lý các file trong website. Ẩn hiện thanh này bằng cách vào menu Window è Files

d. Dom bar

Là toolbar dùng để quản lý cấu trúc các tag trong trang theo dạng cấu trúc cây thư mục. Dùng thanh này để chọn tag, duplicate tag, di chuyển, xóa tag… rất hay, nhất là với các trang web có cấu trúc phức tạp (dựa trên bootstrap) mà bạn sẽ học sau. Ẩn hiện thanh này bằng cách vào menu Window è DOM

C. CHÈN THÔNG TIN VÀO TRANG

I. Paragraph

Paragraph là 1 đoạn text gồm một hoặc nhiều hàng chữ nằm trong tag p, tag h1-h6 . Khi nhập chữ rồi Enter xuống hàng, Dw sẽ tự động bao quanh vùng text vừa gõ 1 tag p. Có thể thay đổi tag bao quanh đoạn như sau:

- Chọn đoạn text

- Trên thanh Properties/mục Format: chọn tag (Heading 1 à Heading 6). Tag h1-h6 thường dùng khi định dạng các tiêu đề chương, bài, đề mục

II. Hình ảnh

1. Các loại hình ảnh chèn vào vào trang

Hình ảnh làm cho trang web thêm sống động. Có 3 loại hình có thể dùng để chèn vào trang:

- Dạng gif: chất lượng thấp, ít màu, có thể là hình động, có thể tạo được hiệu ứng Transparent

- Dạng jpg: chất lượng tốt, nhiều màu, không thể là hình động, không tạo được hiệu ứng Transparent

- Dạng png: chất lượng tốt, nhiều màu, có thể là hình động, có thể tạo được hiệu ứng Transparent, tỷ lệ nén tốt nên file size thường nhỏ hơn jpg. Nên dùng hình dạng này để chèn vào trang.

2. Chèn hình vào trang

- Nhắp vị trí chèn hình rồi vào menu Insert è Image

- Chọn file hoặc gõ địa chỉ của hình trong mục URL

- Alternate Text: Text thay thế cho hình è OK

3. Chỉnh thuộc tính của hình

Trên thanh Properties, có thể chỉnh :

· Vspace/Hspace: Khoảng cách từ hình tới chữ theo chiều dọc/ chiều ngang

· W: bề rộng của hình.

· H: bề cao của hình.

· Src: địa chỉ, tên file hình.

· Link: địa chỉ trang web sẽ hiện khi user nhắp vào hình.

· Alt: thay thế cho hình.

· Border: độ dày của đường viền quanh hình. Nếu gõ 0 thì hình sẽ không có viền.

· Align: cách canh của hình so với văn bản xung quanh (Left, Right,…)

III. Liên kết

1. Các loại địa chỉ

a. Địa chỉ tuyệt đối

- Là địa chỉ bao gồm đầy đủ 3 phần protocol, domain, file. Địa chỉ tuyệt đối thường dùng khi liên kết sang website khác

- Ví dụ: http://www.nhatnghe.com/ChuongTrinh/CCNA.html

§ Protocol là http

§ Domain là www.nhatnghe.com

§ File là ChuongTrinh/CCNA.html

b. Địa chỉ tương đối

- Là địa chỉ không đầy đủ . Không có protocol và domain

- Thường dùng để liên kết giữa các trang trong nội bộ website

- Khi dùng địa chỉ tương đối, phải biết mình đang ở đâu, link đến đâu.

- Ví dụ: Site bạn đang thực hiện là NhatNghe

NhatNghe /

gioithieu.html index.html

CHUONGTRINH

ccna.html

MICROSOFT

MCSA.html MCSE.html

a. Nếu bạn đang soạn file gioithieu.html, muốn tạo liên kết đến file index.html thì ghi địa chỉ là index.html

b. Nếu bạn đang soạn file MCSE.html, muốn tạo liên kết đến file MCSA.html thì ghi địa chỉ là MCSE.html

c. Nếu bạn đang soạn file gioithieu.html, muốn tạo liên kết đến file CCNA.html thì ghi địa chỉ là ChuongTrinh/ccna.html

d. Nếu bạn đang soạn file gioithieu.html, muốn tạo liên kết đến file MCSA.html thì ghi địa chỉ là ChuongTrinh/Microsoft/MCSA.html

e. Nếu bạn đang soạn file CCNA.html, muốn tạo liên kết đến file index.html thì ghi địa chỉ là ../index.html

f. Nếu bạn đang soạn file MCSA.html, muốn tạo liên kết đến file index.html thì ghi địa chỉ là ../../index.html

c. Địa chỉ gốc (Ký hiệu là /)

- Là địa chỉ bắt đầu bằng dấu / (tính từ gốc của website)

- Dùng để link trong nội bộ website

- Không quan tâm đến vị trí hiện tại, do đó:

a. Từ bất cứ trang nào trong site, muốn tạo liên kết đến file index.html thì ghi địa chỉ là /index.html

b. Từ bất cứ trang nào trong site, muốn tạo liên kết đến file CCNA.html thì ghi địa chỉ là /ChuongTrinh/CCNA.html

c. Từ bất cứ trang nào trong site, muốn tạo liên kết đến file MCSA.html thì ghi địa chỉ là /ChuongTrinh/Microsoft/MCSA.html

2. Tạo liên kết

Cách 1: Chọn text hoặc hình rồi gõ địa chỉ trong mục Link trên thanh Properties Cách 2: Chọn text hoặc hình rồi nhắp nút Browse (trên thanh Properties) để chọn file Cách 3: Chọn text hoặc hình rồi vào menu Insert è Hyperlink

- Text: Dòng text hyperlink

- Link: trang đích

- Target: cửa sổ mà trang đích hiện

- Title: tiêu đề của link

IV. Chèn phim từ Youtube

1. Xem 1 Video nào đó trên Youtube https://www.youtube.com/watch?v=YEUpFUGri3E

2. Nhắp nút Share (xem hình dưới)

3. Nhắp nút Embed (hình dưới)

4. Chọn các thông số rồi nhắp nút Copy (hình dưới)

5. Trong Dreanweaver, Paste tại vị trí muốn chèn video

Bạn chỉnh lại độ rộng, độ cao cho thích hợp

V. Chèn bản đồ vào trang

1. Chèn bản đồ

1. Vào google.com/maps

Nếu địa điểm là nổi tiếng, chỉ cần bạn gõ tên, còn không thì gõ đầy đủ địa chỉ (số nhà, đường, phường, quận, tp). Hoặc bạn gõ tọa độ chính xác của chổ cần hiện theo kiểu (vĩ độ , kinh độ)

2. Nhắp Nút Share (xem hình trên) rôi nhắp Embed map

3. Copy địa chỉ hiện trong hình ( <iframe src=… ) rồi paste vào trong trang web.

Bạn có thể hiệu chỉnh độ rộng, độ cao của bản độ

2. Tìm vĩ độ, kinh độ của 1 địa điểm bất kỳ

- Vào trang latlong.net

- Nhập 1 địa chỉ nổi tiếng nào đó. VD: Chợ bến thành

- Bạn phóng to và kéo bản đồ đến vị trí cần dùng rồi nhắp vào è sẽ hiện vĩ độ và kinh độ

VI. Table

Bạn dùng table khi muốn trình bày một vùng dữ liệu dạng bảng. hoặc bố cục dữ liệu thành dạng nhiều hàng cột.

1. Chèn table

- Nhắp vị trí muốn chèn rồi vào menu Insert è chọn Table

§ Rows: số hàng. Columns: số cột

§ Table Width: độ rộng table (tính bằng pixel hoặc %)

§ Cell Padd: khoảng cách từ đường viền của ô đến nội dung trong ô

§ Cell Space: khoảng cách giữa các ô

§ Header: cho biết table có vùng header hay không (top, left, both, none)

§ Caption: Nhãn của table

§ Nhắp OK

- Thêm xóa hàng, cột

§ Thêm hàng, cột: Nhắp 1 ô trong hàng/cột hiện hành rồi nhắp phải è Table

è chọn Insert Row hoặc Insert Column

§ Xóa hàng cột: Nhắp 1 ô trong hàng/cột muốn xóa rồi nhắp phải è Table è

Delete Row hoặc Delete Column

- Merge cell: Chọn các ô cần merge è Nhắp phải è Table è Merge Cell

- Split cell: Chọn ô cần chia è Nhắp phải è Table è Split Cell

- Nhập dữ liệu: Nhắp từng ô muốn nhập và gõ dữ liệu vào

- Cấu trúc HTML đơn giản, mỗi table có cấu trúc HTML như sau

2. Các tag trong một table

1. <table>: là tag bao trùm toàn bộ 1 table

2. <tr> : là tag bao quanh 1 hàng dữ liệu

3. <td>: là tag bao quanh 1 ô dữ liệu

4. <th>: là tag bao quanh 1 ô tiêu đề, chữ trong ô tiêu đề mặc định là đậm và canh giữa trong ô

5. <thead>: là tag bao quanh các tr dùng làm dòng tiêu đề trên.

6. <tbody>: là tag bao quanh các tr dùng làm dòng dữ liệu.

7. <tfoot> là tag bao quanh các tr dùng làm dòng tiêu đề dưới.

VII. Danh sách

1. UnOdered list

- Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 ký hiệu (bullet) ở đầu.

- Thực hiện : Chọn text rồi vào menu Format è List è UnOrdered List

List dạng này nằm trong tag UL, mỗi mục nằm trong tag li . Bạn qua code để xem nhé.

2. Ordered list

- Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 con số ở đầu

- Thực hiện: Chọn text rồi vào menu Format è List è Ordered List

Chú ý: List dạng này nằm trong tag OL, mỗi mục nằm trong tag li.

3. Definition list

- Là list dùng khi diễn tả nhiều item, mỗi item có mô tả của nó

- Thực hiện : Chọn text rồi vào menu Format è List è Definition List

Chú ý : List dạng này nằm trong tag dl, mỗi mục nằm trong tag dt ,dd.

VIII. Các tag quan trọng: div, span, iframe

Phần trên là những tag quan trọng phải biết , đó là tag a, img, table, iframe. Dưới đây trình bày thêm một số tag nữa:

1. Tag DIV

Là tag có thể chứa được mọi đối tượng html bên trong nó (table, liên kết, hình ảnh...). Trong trang web, tag div đóng vai trò “container” (nghĩa là bao chứa 1 vùng dữ liệu nào đó). Ví dụ: vùng menu, vùng tin xem nhiều, vùng form đăng nhập, vùng tìm kiếm... Ví dụ:

2. Tag Span

Tag Span dùng để bao quanh một vùng text. Mặc định, tag span “chung sống hòa bình” với các text khác trong một hàng. Nghĩa là ở đầu và cuối tag span không có xuống hàng (khác với div và p)

3. Tag Heading

Là các tag h1 , h2, h3, h4, h5, h6. Các tag này gọi là tag Heading. Bạn thường dùng bó bao quanh các tiêu đề chương, tiêu đề bài… Chữ trong các tag này mặc định là đậm.

4. Tag nav

Thường dùng tag này bao quanh vùng menu, paper links, topic path. Ví dụ:

5. Tag header

Là tag định nghĩa những gì bên trong nó là phần đầu của trang web. Thường chứa giới thiệu, tiêu đề, thanh navigation.Ví dụ:

6. Tag Footer

Là tag định nghĩa những gì bên trong nó là phần cuối của trang. Thường chứa các thông tin liên lạc, tên tác giả, nguồn gốc của bài viết. Ví dụ:

7. Tag main

Là tag dùng để xác định nội dung chính của trang. Tag <main> thường sử dụng kết hợp với tag <header> & tag <footer>để tạo thành cấu trúc của 1 trang web hoàn chỉnh. Mỗi trang web chỉ nên có 1 tag main.

8. Tag section

Tag <section> định nghĩa một khu vực (vùng bao) trong trang web. Thường section để quy định các vùng trong 1 trang web rộng.

D. CASCADING STYLE SHEET (CSS)

I. Giới thiệu

- CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của các đối tượng trong trang web. CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có. Bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu nhiều về kỹ thuật CSS.

- Style: Là 1 tập hợp các đặc điểm định dạng .

- Sheet: Là 1 tập hợp nhiều style

- Vị trí lưu style: Các ctyle có thể lưu trong trang web hiện hành hoặc ở file riêng bên ngoài (.css). Nếu đặt trong tang web thì các style được đặt trong tag <style>. Nếu style được đặt ở file bên ngoài thì dùng tag link đề nhúng vào trang web.

II. Tạo Style

1. Định dạng cho 1 tag trong toàn trang

a. Tên style

Để định dạng cho tag nào đó trong toàn trang (như định dạng cho các tag p trong trang chẳng hạn) thì bạn tạo style giống như tên của tag muốn định dạng. Cụ thể như muốn định dạng cho tag p thì tạo style tên là p

b. Ví dụ:

2. Định dạng cho 1 tag cụ thể có tên riêng

Với mỗi tag trong trang, bạn có thể đặt cho nó 1 tên riêng nào đó (thông qua thuộc tính id của nó)

Ví dụ : <img src="h.jpg" id="hinh1"> è hinh1 là tên riêng của tag img này.

a. Tên style

Với 1 tag có tên riêng, bạn định dạng cho nó bằng cách tạo 1 style như sau:

#TênRiêng (Là dấu # kèm với tên riêng của tag muốn định dạng)

b. Ví dụ:

Muốn định dạng cho 1 tag có tên riêng là quangcao thì tạo style như sau:

3. Định dạng cho tag bên trong 1 đối tượng có tên riêng

a. Tên style

#TênRiêng TagCon (là #TênRiêng kèm với tag bên trong muốn định dạng)

b. Ví dụ

Định dạng tag img trong 1 tag có tên riêng là quangcao thì tạo style là

4. Class

Class là 1 cái tên bạn dùng để đại diện cho 1 nhóm các thuộc tính định dạng. Thường dủng class để định dạng cho những tag nằm rời rạc (xa nhau) nhưng muốn định dạng giống nhau, như tiêu đề các box chẳng hạn.

a. Tên style

.TênClass (Là “.” kèm với tênClass )

b. Ví dụ

c. Set Class

Để ấn định class cho 1 tag nào đó, bạn thêm thuộc tính class. Ví dụ :

Chú ý: Bạn cũng có thể ấn định nhiều class cho 1 tag cũng được

III. Nhúng file css bên ngoài vào trang web

Các style định dạng css bạn có thể đạt ở 1 file (có tên mở rộng .css) mà không nhất thiết phải đạt trong trang web. Khi đó để nhúng file .css vào trang html thì bạn dùng tag link

IV. Định dạng trực tiếp css trong tag html

Bạn có thể định dạng 1 tag html nào đó bằng cách dùng thuộc tính style trong mở đầu của tag đó. Xem ví dụ sau:

V. Các thuộc tính CSS

1. Các thuộc tính thường dùng để định dạng text

- font- family: Font chữ. Mỗi lần 3 font để dự phòng máy user không có font.

- font-size : Cỡ chữ. Có thể dùng các đơn vị px, em

- font-weight : độ đậm của chữ. Thường dùng Normal và Bold.

- font-style: chữ nghiêng hay không. Thường dùng italic

- text-transform: Biến đổi thành chữ hoa/chữ thường. Thường dùng Uppercase, lowercase, capitalize

- line-height: độ cao của 1 hàng chữ trong paragraph. (>100% là giãn ra, <100% là co lại)

- text-decoration: cách gạch ngang chữ. Thường dùng none, underline

§ Underline: gạch dưới chữ

§ None: không gạch

- color: màu chữ.

2. Các thuộc tính thường dùng để định dạng background

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

- background-image:url(DiachiHình) : ả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. Mặc định là scroll.

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

3. Các thuộc tính thường dùng để định dạng cho khối chữ

- word-spacing: Khoảng cách giữa các từ.

- letter-spacing: Khoảng cách giữa các ký tự

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

- white-space: (normal/pre/nowrap) bình thường/ giữ nguyên định dạng/không cuộn chữ xuống hàng

- display: (block, none, inline, table): cách hiển thị 1 tag

§ block: quy định tag sẽ là 1 khối tách biệt với những cái khác ở trên và dưới nó. Giống paragraph. Có thể apply cho link để toàn chiều rộng có thể click thay vì user chỉ click vào text của link

§ inline: các tag được định dạng display:inline sẽ nằm cùng 1 hàng. Vd: các li cùng 1 hàng, để làm menu ngang.

§ none: tag bị ẩn, không xuất hiện trong trang web.

4. Các thuộc tính thường dùng để định dạng 1 khối

- width: độ rộng. Có thể dùng đơn vị px hoặc %.

- height: độ cao. Có thể dùng đơn vị px hoặc %.

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

- clear: (left, right, both). Thuộc tính bỏ qua float của tag phía trên tag đang định dạng.

- 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

5. Các thuộc tính thường dùng để định dạng đường viền

- border-style: (solid, dash, dotted, double) kiểu đường viền.

- border-width: độ dày. Có thể dùng thick, medium, thin hoặc 1 con số

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

6. Các thuộc tính định dạng danh sách list

- list-type: (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha) Kiểu bullet của danh sách

- list-type-image:url(DiaChiHinh) hình dùng thay thế ký tự bullet

- list-type-position: (inside, outside) vị trí của ký hiệu bullet (ở ngoài hay bên trong lề trái của các item)

7. Các thuộc tính định dạng vị trí

Các thuộc tính liên quan đến vị trí, kích thước đối tượng …

- position: (static, relative, absolute, fixed): cách đặt đối tượng theo tọa độ top, left,,right, bottom

- top: tọa độ dọc của cạnh trên

- left: tọa độ trái

- z-Index: để cho tag được định dạng nằm trên hoặc dưới so với những tag khác (tag nào có giá trị i_index cao hơn sẽ nằm trên)

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

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

E. HOSTING VÀ DOMAIN

I. Khái niệm

1. Hosting

Hosting là chỗ trên mạng internet để chứa các trang web của bạn. Để có hosting thì bạn phải mua chỗ. Nếu không muốn mua chỗ thì bạn có thể đăng ký ở những chỗ cho miễn phí (nhưng bạn sẽ bị hạn chế nhiều thứ, như tốc độ, các tính năng hay, thời gian…)

2. Domain

Domain (hay tên miền) là địa chỉ website của bạn. Ví dụ: abc.com hay abc.com.vn. Để có được địa chỉ này thì bạn phải mua. Điều kiện để mua (ngoài tiền) là tên domain mà bạn muốn chưa có ai mua. Thường thì tiền mua domain sẽ trả theo năm, hết hạn phải gia hạn tiếp. Nếu không thì bạn sẽ bị mất domain và người khác có thể mua tên đó.

Mỗi domain sẽ được trỏ vào 1 hosting do bạn đã mua trước đó. Và bạn có thể mua nhiều domain để trỏ vào một website.

II. Tìm mua domain và hosting

Ở Việt nam hiện có rất nhiều nhà cung cấp dịch vụ domain và hosting. Ví dụ như mắt bão, pa viet nam, nhân hòa, và nhiều mơi khác nữa. Thường để cho tiện thì bạn nên mua hosting và domain ở cùng một nhà cung cấp, để họ setup hết các thông số cho bạn.

III. Những điều phải biết khi mua hosting

1. Những điều phải biết

Khi đăng ký mua hosting ở đâu đó, bạn phải quan tâm đến các thông tin sau:

· Gói hosting bạn định mua chạy hệ điều hành nào? Bạn phải chọn Linux nhé, vì chúng ta đang dùng PHP để làm web động.

· Gói hosting bạn định mua chạy php version mấy. Ít nhất phải version php 5.5 trở về sau.

· Gói hosting bạn định mua chạy cho tạo bao nhiêu database mysql? Điều này quan trọng để bạn sử dụng database sau này. Ít nhất phải là 1 database, nếu bạn không để ý điều này mà mua gói rẻ, nó không cho tạo database thì khổ.

· Gói hosting bạn định mua cho phép bạn lưu thông tin với dung lượng là bao nhiêu? Dung lượng hosting gồm tổng kích thước file trong website, kích thước database và mail đó nhé.

· Gói hosting bạn định mua cho phép băng thông là bao nhiêu? Có gói không hạn chế nhưng nhiều gói là hạn chế đó nhe. Băng thông là tổng dung lượng dữ liệu mà server sẽ trả về cho các người xem trong 1 tháng. Nếu trong tháng mà server đổ về đủ băng thông thì nó ngưng lại.

· Bạn mua hosting ở đâu thì khả năng support của kỹ thuật là rất quan trọng. Việc support của họ bạn rất cần khi muốn được giúp đỡ để hiệu chỉnh hay hỏi han gì đó từ nhà cung cấp hosting.

· Khả năng bảo mật của nhà cung cấp hosting cũng là thông tin cần quan tâm, Tuy nhiên yếu tố này cần tới niềm tin của bạn nhiều hơn.

· Backup data: Việc backup dữ liệu cho website của bạn được định kỳ bao lâu 1 lần? Đề khi cần lấy lại dữ liệu cũ, bạn có thể yêu cầu.

2. Quản trị hosting

Khi mua hosting xong, bạn sẽ được nhà cung cấp tạo cho 1 tài khoản và mật khẩu. Họ sẽ gửi cho bạn địa chỉ server + tài khoản + mật khẩu để bạn đưa website của bạn lên chỗ của họ.

Những gì phải làm khi quản trị hosting? Khi quản trị hosting, những việc sau đây bạn thường hay làm:

- Quản trị File: bao gồm upload file, tạo file, xóa file, đổi tên, di chuyển, bung nén, nén file…

- Quản trị Database: bao gồm tạo database, tạo user kết nối database, ấn định quyền truy cập vào database, import và export dữ liệu.

- Quản trị FTP: bao gồm tạo các user để ftp từ các chương trình FTP client như FlashFXP, WS_FTP, WinSCP…

- Quản trị domain và subdomain

- Quản trị các mail box

3. Upload website lên mạng internet

Việc upload lên mạng bạn sẽ có lab riêng. Bạn thực thiện theo lab riêng của Thầy cho.

IV. Mua domain

Bạn có thể mua domain từ các nhà cung cấp trong nước hoặc nước ngoài. Khi mua xong domain, bạn cũng sẽ được cung cấp username, password, và địa chỉ website để vào quản lý domain.

Bạn làm gì để quản lý domain? Thường làm nhất là trỏ tên miền đến nhà cung cấp hosting của bạn. Ngoài ra còn 1 số các thao tác khác liên quan đến việc tạo/chỉnh các MX record, Cname record…

F. FORM

Form dùng để tạo các biểu mẫu thu thập thông tin của người xem trang web. Một Form có thể chứa nhiều thành phần như TextField, CheckBox, RadioButton, ComboBox, List/Menu, TextAera…

- Mỗi form phải có ít nhất 1 nút đóng vai trò submit (đưa dữ liệu lên server)

- Mỗi form có thể có 1 nút giúp xóa hết dữ liệu được gõ trong form (nút Reset)

- Mỗi form nằm trong 1 tag form. Tag form có thuộc tính medod (post, get : là phương thức đưa dữ liệu lên server) vả thuộc tính action (là trang web seẽ tiếp nhận dữ liệu từ form gửi lên)

- Một trang web có thể có nhiều Form nhưng các form không được lồng nhau.

I. Chèn form

Nhắp vị trí muốn chèn form rồi vào menu Insert è Form è Form

II. Các thuộc tính của Form

Chọn tag form trên thanh tag, khi đó trên thanh Properties sẽ hiện các thuộc tính:

- Form Name: là tên của form, duy nhất, không khoảng trắng

- Action: tên của file tiếp nhận dữ liệu của Form (URL).

- Method: Là phương thức truyền dữ liệu lên server. Có 2 phương thức: Post và get

Get: Kết hợp theo từng cặp tên-giá trị vào phía sau URL của file nhận dữ liệu. Ví dụ: action là login.php thì khi submit sẽ ghép như sau login.php?username=abc&pass=123

Post : được dùng nhiều hơn Get. Với Post, dữ liệu được ẩn đi khi truyền về server (cũng theo theo dạng key-value).

- Enctype: có giá trị là :

Application : mặc định, không cần gán

Mutipart: dùng khi form có 1 file cần upload. Mỗi lần thêm 1 file field vào form, dw sẽ tự động chỉnh entype thành multipart

III. Các thành phần trên Form

1. Text field

- Là thành phần trong form cho phép user gõ 1 hàng chữ

- Cách chèn: Nhắp vị trí muốn chèn rồi vào menu Insert è Form è Text Field

ID: Tên của text field Label: Nhãn của text field Style: cách đặt nhãn.

- Thuộc tính:

Char width: độ rộng text field tính theo ký tự

Max chars: Số ký tự tối đa mà user có thể nhập

Type: Single line/Multi line/Password ~ 1 hàng chữ/nhiều hàng chữ/mật khẩu

Init val: Giá trị ban đầu.

2. Radio group

- Sử dụng khi muốn tạo nhóm các mục chọn và chỉ cho phép user chọn 1 mục

- Cách chèn: Nhắp vị trí muốn chèn rồi vào menu Insert è Form è Radio Group

Name: Tên chung của các mục Label: Nhãn của từng mục Value: Giá trị của mỗi mục

Layout: chọn xuống hàng dùng br hoặc table

3. Check Box

- Sử dụng khi muốn tạo nhiều mục và user có thể chọn nhiều mục.

- Cách chèn: Nhắp vị trí trong form muốn chèn rồi vào Insert è Form è Checkbox

4. List/Menu

- List/menu chứa nhiều item (mục) bên trong, user có chọn hoặc nhiều mục trong box.

- Cách chèn: Nhắp vị trí (trong form) muốn chèn vào menu Insert è Form è List/Menu

- Thuộc tính:

List Values: Thêm bớt mục (name, value). Ví dụ: Thêm các item sau:

Type: cách hiển thị

List: box có thể cao nhiều hàng. User có thể chọn nhiều

Menu: box chỉ cao 1 hàng. Khi user nhắp vào sẽ xổ xuống các mục bên trong. User chỉ chọn được 1 mục.

Height: Chiều cao box

Allow multiple: cho phép user chọn nhiều mục

- Chú ý:

· Chiều rộng của box tự co giãn theo item dài nhất, nhưng có thể fix độ rộng = css

· Nếu xem code html, bạn sẽ thấy mỗi item nằm trong tag option. Có value và text

· Thêm giá trị selected trong 1 option để chỉ định item được chọn mặc định

5. File field

- File Field là đối tượng giúp user chọn file trên máy của họ để đưa lên server.

- Cách chèn: Nhắp vị trí muốn chèn rồi vào menu Insert è Form è File Field

6. Text area

- Là thành phần trong form cho phép user gõ nhiều hàng chữ

- Cách chèn: Nhắp vị trí muốn chèn rồi vào menu Insert è Form è Text Area ID: Tên của Text Area

Label: Nhãn của Text Area

- Thuộc tính:

Char width: độ rộng tính theo ký tự Num lines: độ cao tính theo số dòng text Init val: Giá trị ban đầu.

7. Button

- Button là nút lệnh, có thể dùng để gởi dữ liệu trong form lên server (submit), xóa dữ liệu trong form (reset) , hoặc thực hiện 1 tác vụ nào đó.

- Cách chèn: Nhắp vị trí (trong form) muốn chèn rồi vào menu Insert è Form è Button

- Thuộc tính:

Value: Dòng chữ trong nút.

Action: chức năng của nút submit, reset, none

8. Image Field

- Image Field là hình đóng vai trò như nút submit, dùng để gởi dữ liệu trong form lên server. Bạn có thể dùng image field thay thế cho nút submit nếu muốn có định dạng đẹp hơn trong cách trình bày form.

- Cách chèn: Nhắp vị trí muốn chèn, vào menu InsertèFormèImage FieldèChọn file.

- Chú ý: Đối tượng này là tag input, không phải là hình thông thường (Hình thông thường nằm trong tag img) và không có Image field đóng vai trò reset

9. Hidden field

- Hidden field là đối tượng ẩn, user không thấy, chỉ người lập trình mới biết.

- Cách chèn: Nhắp vị trí muốn chèn rồi vào menu Insert è Form è Hidden Field

- Thuộc tính: Hidden Field: Tên của hidden field

Value: Giá trị của hidden field

G. JAVASCRIPT

I. Giới thiệu

- Là ngôn ngữ lập trình chạy trên browser, nhằm tạo khả năng tương tác với user.

- Phân biệt chữ hoa, chữ thường

- Mỗi lệnh kết thúc bằng dấu ;

- Ghi chú: 1 dòng //

- Ghi chú nhiều dòng : /* ……. */

- Có thể viết mã lệnh javascript trong tag script của trang, hoặc viết riêng trong file .js rồi nhúng vào trang html, hoặc viết mã lệnh javascript trong sự kiện của các tag html.

II. Viết mã Javascript vào trang

1. Viết trực tiếp trong trang với tag script

2. Viết mã javasctipt trong file riêng

a. Tạo file javascript

- Nhắp menu File è New è Javascript è Create

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

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

b. 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 Insert è HTML è Script Object è Script è Chọn file javascript

3. Sử dụng javascript trong sự kiện của các tag

Mỗi tag đều có một số sự kiện, bạn có thể sử dụng javascript khi các sự kiện này xảy ra.

Mở file js1.html

a. Đưa chuột vào hình trái tim, sẽ đổi thành hình khác, chuột ra trở lại hình cũ

Nhắp hình trái tim rồi qua code, bổ sung vào tag img như sau :

b. Nhắp chuột vào textfield tim kiếm, chữ tìm kiếm trong đó sẽ biến mất

Nhắp text field tim rồi qua code, bổ sung để được như sau :

4. Lab sử dụng một số javascript hữu dụng

Bạn mở file js_HuongDan.doc để xem

5. Website javascript

- www.dynamicdrive.com: Nhiều javacript hay

- www.w3schools.com: Nhiều bài học, ví dụ rất dễ hiểu và javascript, php, css, xml…

- http://www.htmlgoodies.com/

III. Lập trình javascript

1. Các sự kiện cơ bản trong Javascript

- onClick è Khi Click chuột vào đối tượng

- onMouseover è Khi con trỏ vào đối tượng

- onMouseout è Khi con trỏ ra ngoài đối tượng

- onKeyPress è Khi nhấn phím

- onSubmit è Khi submit form

- onChange è Khi thay đổi dữ liệu trong list/menu

- onBlur è Khi chọn đối tượng khác

2. Biến

Biến dùng để chứa một giá trị, biến có thể thay đổi giá trị sau khi khai báo

3. Các phép toán trên các biến

- Các phép toán số học: +, -, *, / , ++, --, %

- Phép gán: =

- Các phép toán so sánh: ==, !=, >, <, >=, <=

- Các phép toán logic : &&, ||, !

4. Phát biểu if…else

Biểu thức

Ví dụ

if(điều kiện){

Các lệnh thực hiện khi điều kiện đúng

}else{

Các lệnh thực hiện khi điều kiện sai

}

document.write(n + " Là số chẵn");

} else{

document.write(n + " Là số lẻ");

}

</script>

5. Vòng lặp for

Biểu thức

Ví dụ

for(i=0;i<10;i++){

Các lệnh được lặp

}

i=0: giá trị khởi tạo i<10: biểu thức điều kiện i++: Tăng biến đếm lên 1 */

for (i=0;i<10;i++){

document.write(i + "<br/>");

}

</script>

6. Vòng lặp while

Biểu thức	Ví dụ
while(điều kiện){	<script>

Các lệnh được lặp

}

/* kiểm tra điều kiện, nếu đúng

thì lặp, sai thì kết thúc lặp

var i=0; while(i<10){

document.write(i + " "); i++;

}

</script>

7. Vòng lặp do…while

Biểu thức

Ví dụ

do{

Các lệnh được lặp

}while(điều kiện)

Thực thi các lệnh trong vòng lặp rồi test điều kiện, nếu đúng thì lặp lại, nếu sai thì kết thúc*/

i++;

document.write(i + "nbsp;");

}while(i<50);

</script>

8. Truy xuất đối tượng trong trang web

- Truy xuất đối tượng theo id

- Truy xuất đối tượng trong form

- Ví dụ:

9. Hàm trong javascript

Hàm là một nhóm lệnh để giải quyết một việc nào đó. Mỗi hàm có 1 tên. Khi gọi tên của hàm, các lệnh trong đó sẽ thực thi

- Tạo hàm mới:

- Phần tham số có thể có hoặc không. Hàm có thể trả về 1 giá trị sau khi tính

10. Đối tượng window

Là đối tượng có sẵn trong Javascript để diễn tả cửa sổ hiện hành. Các hàm thường dùng:

alert()	Hiện hộp thông báo có 1 nút OK

close()	Đóng cửa sổ hiện hành

confirm()	Hiện box với 1 thông báo, nút OK và Cancel

focus()						Sets focus cho window

open()						Mở 1 window mới

print()						In cửa sổ hiện hành

prompt()						Hiện hộp thoại để user nhập thông tin

setInterval()						Dùng để thực thi 1 hàm sau 1 thời khoảng (milli giây)

setTimeout()						Gọi 1 hàm sau 1 khoảng thời gian chỉ định (milli giây)

11. Đối tượng document

Là đối tượng có sẵn trong Javascript dùng để mô tả tài liệu hiện hành. Mỗi trang HTML khi nạp vào trình duyệt sẽ trở thành đối tượng document. Thông qua đối tượng này, bạn có thể truy xuất vào mọi thành phần HTML trong trang.

- Các Properties:

cookie					Trả về tất cả các cookie trong tài liệu (name/value)

domain					Trả về domain name của server nạp tài liệu

referrer					Trả về URL của trang web liên kết đến trang hiện tại

title					Set hoặc get tiêu đề của trang

URL					url của tài liệu

- Các Methods

getElementById()			Truy xuất đến phần tử theo id (phần tử đầu tiên)

getElementsByTagName()			Truy xuất đến các phần tử theo tag

12. Đối tượng screen

Là đối tượng có sẵn trong Javascript, chứa thông tin về màn hình của user. Các thuộc tính

Ví dụ:

13. Đối tượng history

Là đối tượng có sẵn trong Javascript dùng để lưu địa chỉ các trang web mà user đã xem. Dùng đối tượng này, bạn có thể chuyển tới trang trước , trang sau. Các phương thức:

back()	Trở lại trang trước

forward()	Trới trang sau

go()	Nhảy đến trang chỉ định trong history list

Ví dụ:

14. Đối tượng location

Là đối tượng có sẵn trong Javascript chứa thông tin về URL hiện hành. Đây là con của đối tượng window và được truy xuất với cú pháp window.location. Các properties:

hostname	Cho biết hostname của URL
href	Trả về toàn thể URL
search	Trả về phần query string trong URL

- Các methods

reload()

Nạp lại trang hiện hành

- Ví dụ:

15. Đối tượng Navigator

Là đối tượng chứa các thông tin về browser. Các Properties

appName	Trả về tên của browser

appVersion	Trả về version của browser

platform	Trả về hệ điều hành mà browser đang chạy trên đó

userAgent	Trả về user-agent mà broswer gửi tới server

Ví dụ:

H. JQUERY

I. Giới thiệu

- Jquery là một thư viện Javascript giúp đơn giản cách viết JavaScript trong trang web.

- JQuery có thể giúp định dạng lại và thay đổi thông tin trong trang web.

- Jquery có thể giúp bạn tạo nhiều hiệu ứng như mờ dần, chạy dọc chạy ngang v.v.. bạn có thể tạo thêm các hiệu ứng khác.

- jQuery cho phép tạo ra các Plugin nếu cần..

II. Chèn jQuery vào trang

- Vào trang chủ của jQuery 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 quen thuộc.

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

III. Chọn phần tử trong trang

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ì đó bằng cách sử dụng hàm $(). Lệnh cơ bản 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 diễn tả phần tử sẽ chọn trong trang, có nhiều cách chọn

1. jQuery Selectors

Chọn các phần tử (selector) kiểu như CSS:

2. jQuery Attribute Selectors

jQuery có thể chọn các phần tử với các thuộc tính cho trước.

III. Một số hàm thường dùng trong Jquery

a. addClass: Thêm một class CSS

Để set class cho đối tượng, dùng lệnh addClass. Để bỏ class, dùng removeClass. Ví dụ:

b. removeClass: gỡ một class CSS

c. css : định dạng css cho tag được chọn.

Cú pháp: $(selector).css(name,value) hoặc $(selector).css({properties})

Tham khảo thêm: http://www.w3schools.com/jquery/jquery_ref_css.asp

d. html : Thay đổi nội dung (thuộc tính innerHTML) của thành phần được chọn.

e. append: Thêm nội dung vào innerHTML (ở cuối) của thành phần được chọn

f. preppend: Thêm nội dung vào innerHTML (ở đầu) của thành phần được chọn

g. after: Chèn nội dung vào ở trước thành phần được chọn

h. before: Chèn nội dung vào ở phía sau thành phần được chọn Ví dụ:

Tham khảo thêm: http://www.w3schools.com/jquery/jquery_ref_html.asp

IV. Hiệu ứng trong jquery

Jquery giúp bạn tạo các hiệu ứng như Hide, Show, Toggle, Slide, Fade, and Animate. (Ẩn, hiện, bật tắt, trượt, mờ đi và hoạt hình).

Các hàm tạo hiệu ứng trên nhận 2 đối số: speed và callback. Cú pháp như sau:

Tham khảo thêm: http://www.w3schools.com/jquery/jquery_ref_effects.asp Ví dụ 1:

Ví dụ 2:

Ví dụ 3:

Ví dụ 4:

V. Sự kiện trong Jquery

Dưới đây là một số hàm xử lý sự kiện phổ biến, hay dùng trong jquery

Có thể có sự xung đột về tên: jQuery sử dụng ký hiệu $ như là cách phân biệt mã jQuery với code javascript thông thường. Nhưng một số thư viện khác (như Prototype) cũng dùng ký hiệu này. jQuery có một phương thức gọi là noConflict nhằm khắc phục vấn đề này.

var $jq=Jquery.noConflict();

ð Khi đó Jquery sẽ sử dụng ký hiệu $jq thay cho $ mặc định

Tham khảo thêm: http://www.w3schools.com/jquery/jquery_events.asp

VI. Jquery Ajax

AJAX (Asynchronous JavaScript and XML) là 1 kỹ thuật để cập nhật một phần của trang web với một lượng nhỏ dữ liệu mà không cần phải nạp lại toàn bộ trang. Với jQuery AJAX, bạn có thể các request lên server để lấy dữ liệu. Các hàm tạo jQuery AJAX Requests

Hàm	Mô tả
$(selector).load(url,data,callback)	Tải dữ liệu từ server vào phần tử được chọn
$.ajax(options)	Tại dữ liệu từ server vào XMLHttpRequest object
$.get(url,data,callback,type)	Tải dữ liệu từ xa sử dụng HTTP GET
$.post(url,data,callback,type)	Tải dữ liệu từ xa sử dụng HTTP POST
$.getScript(url,callback)	Tải và thực thi 1 JavaScript file

selector Phần tử được chọn

url Địa chỉ trang web sẽ request dữ liệu

data : Dữ liệu dạng cặp đôi Key/value sẽ gởi lên server callback: hàm sẽ thực thi khi request xong

type Kiểu của dữ liệu sẽ send (html,xml,json,jasonp,script,text)

options: Tất cả các cặp giá trị key/value để tạo request như: định nghĩa url, datatype, filter, characterset, timoue, error function

VII. Một số Plugin Jquery hữu dụng

1. Cycle Plugin : http://malsup.com/jquery/cycle/

2. jqGrid Plugin : http://www.trirand.com/blog/ Trình bày dữ liệu dạng bảng, có phân trang, tìm kiếm…

3. Jquery Media: http://jquery.malsup.com/media/#download

4. AnythingSlider: http://css-tricks.com/examples/AnythingSlider/#panel-3

5. Creating a Slick Auto-Playing Featured Content Slider

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

6. Create Featured Content Slider Using jQuery UI http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

7. s3Slider jQuery plugin: http://www.serie3.info/s3slider/

I. HTML5 CSS3, RESPONSIVE

I. HTML5

Html5 ra đời năm 2014 và hiện là phiên bản html mới nhất để làm web. HTML5 được bổ sung thêm nhiều tag mới, nhiều tính năng mới so với html4.

1. Những gì mới trong html5

Khai báo doctype đơn giản hơn như sau ở đầu mỗi trang html5

Khai báo charset cũng đơn giản hơn trong tag head

2. Cấu trúc 1 trang html5

3. Những element mới trong html5 và những tag bị loại bỏ Những tag mới cho layout: <header>, <footer>, <article>, and <section>. Những form elements mới : number, date, time, calendar, range.

Thành phần đồ họa : <svg> and <canvas>.

Những tag media : <audio> , <video>. Những tag cũ không còn dùng trong html5

Bỏ tag <acronym> thay bằng <abbr> , bỏ tag <applet> thay bằng <object>, bỏ tag <dir> thay bằng <ul>

Bỏ tag hoàn toàn các <basefont>, <big> , <center> , <font> , <frame> , <frameset> ,

<noframes> , <strike>, <tt>. Tác dụng của tag này đã có sẵn trong css.

4. HTML5 Form Elements

HTML5 thêm 2 tag form lement mới : <datalist> , <output>

a. <datalist>

Tag <datalist> chứa danh sách các mục cho 1 tag input. Người dùng sẽ thấy các giá trị từ danh sách này và chọn thay vì phải nhập giá trị.

Thuộc tính list của tag <input> phải giống với thuộc tính id của <datalist>

b. <output>

Tag <output> dùng để diễn tả kết quả tính toán

5. Các kiểu input mới trong HTML5

HTML5 thêm nhiều kiểu input mới trong form: color, date, datetime-local, email, month, number, range, search, tel, time, url, week

Tuy nhiên, vì nhiều lý do, các trình duyệt chưa hỗ trợ hết các loại này. Mời bạn test vài cái được support trong 3 trình duyệt nổi tiếng nhất (Chrome, Firefox, IE):

6. Các thuộc tính quy định giá trị nhập;

Sau đây là 1 số giá trị giúp bạn quy định cách nhập trong form của user:

Thuộc tính	Mô tả
disabled	Khóa tag input, không cho user nhập
max	Giá trị lớn nhất mà user có thể nhập trong tag input
maxlength	Số ký tự lớn nhất mà user có thể nhập trong tag input

min	Giá trị nhỏ nhất mà user có thể nhập trong tag input
pattern	Chỉ định biểu thức regular expression để test giá trị user nhập
readonly	Specifies that an input field is read only (cannot be changed)
required	Bắt buộc user phải nhập giá trị vào
size	Độ rộng của tag (tính theo ký tự)
step	Chỉ định bước nhảy của giá trị trong tag input
value	Giá trị mặc định trong tag input

Ví dụ:

II. CSS3

CSS3 chuẩn mới nhất để định dạng trang web với rất nhiều đặc điểm định dạng.

1. Rounded Corners

CSS3 có thuộc tính border-radius giúp bo tròn góc của các tag

2. Background Image

Bạn có thể chỉ định nhiều hình nền khi định dạng

3. Gradients

Gradients giúp bạn tạo nên hiệu ửng màu nền giữa 2 màu (nhiều màu cũng được)

4. Shadow

Có 2 thuộc tính tạo bóng: bóng theo viền của khung (box-shadow) và bóng cho ký tự ( text-shadow)

5. Text

Ba thuộc tính mới định dạng text: text-overflow, word-wrap, word-break

Thuộc tính text-overflow chỉ định cách hiển thị text khi nội dung tràn vùng hiển thị

6. Web Fonts

a. Dùng @font-face

Web fonts cho phép bạn dùng các font mà máy tính của người dùng không có. Tức là bạn nhúng font từ server của bạn vào trang web để đưa về máy tính của user. Bạn nhúng font bằng chỉ chị @font-face

b. Dùng @import

Dùng chỉ thị import, bạn cũng có thể nhúng font mà máy người dùng không có. Các font có thể lấy từ host khác chứ không hẳn lấy từ server của bạn.

7. 2D Transforms

Transforms là hiệu ứng dùng để di chuyển quay, phóng to thu nhỏ,làm nghiêng. Dùng transform bạn có thể làm thay đổi shape, size và position. CSS3 hỗ trợ 2 cách supports transform: 2D và 3D.

2D Transforms có các hàm translate(), rotate(), scale(), skewX(), skewY(), matrix()

8. 3D Transforms

3D transform có 3 hàm :rotateX() ,rotateY() , rotateZ() giúp bạn quay nội dung đối tượng.

9. Transitions

Transitions cho phép bạn thay đổi giá trị 1 thuộc tính rất mượt trong 1 khoảng thời gian.

10. Animations

Animation giúp bạn tạo các hiệu ứng hoạt hình cho các tag mà không cần tới javascript hay Flash.

https://www.w3schools.com/css/css3_animations.asp

11. Multi-column

CSS3 cho phép bạn trình bày chiều cột chữ rất dễ dàng. Các thuộc tính để định dạng nhiều cột gồm: multi-column properties: column-count , column-gap , column-rule-style , column-rule-width, column-rule-color, column-rule, column-span, column-width

12. Resizing

CSS3 có thuộc tính resize cho phép user chỉnh kích thước đối tượng . resize

13. Box Sizing

CSS3 có thuộc tính tên box-sizing rất quan trọng, nó giúp bạn bao gồm luôn padding và border vào trong vùng độ rộng và cao của đối tượng. Giúp bạn tránh rắc rối khi đối tượng chạy lung tung khi chỉnh padding, border.

14. Media Query

Media query trong CSS3 giúp bạn xác định kiểu của thiết bị mà người dùng đang sử dụng để xem trang web của bạn. Media query xác định kiểu thiết bị dựa vào các tiêu chí như: width và height của viewport, width và height của thiết bị , orientation (hướng dọc/ngang), độ phân giải.

Sử dụng media query là cách phổ biến để định dạng trang web cho phù hợp với thiết bị.

a. Xác định media

Cú pháp media query trong trang html

Cú pháp nhúng file css

b. Các loại media types trong css3

Value	Description
all	Mọi loại thiết bọ
print	Sử dụng để in ấn
screen	Dùng cho màn hình máy tính., tablets, smart-phones …
speech	Sử dụng cho screenreaders để đọc trang

c. Ví dụ

III. Reponsevice

1. Giới thiệu

Thiết kế web responsive là làm cho trang web nhìn tốt trên các loại thiết bị khác nhau (desktops, tablets, phones).

Để làm được điều này, bạn sử dụng HTML và CSS để chỉnh lại kích thước, ẩn bớt, phóng to, thu nhỏ, hoặc di chuyển nội dung các thành phần trong trang để làm cho trang web xem tốt được trên nhiều kích thước màn hình.

2. Khai báo Viewport

Viewport là vùng user nhìn thấy của trang web. Viewport khác nhau tùy theo loại thiết bị, nó nhỏ với điện thoại và là lớn với màn hình máy tính.

Khi tạo chức năng responsive cho trang, bạn phải thêm lệnh khai báo viewport trong tag head:

Lệnh trên dùng để chỉ cho trình duyệt cách thức để điều khiển độ rộng của trang cũng như điều chỉnh các thành phần trong trang cho phù hợp ngữ cảnh màn hình. Trong đó:

width=device-width ấn định độ rộng của trang theo độ rộng của màn hình thiết bị.

initial-scale=1.0 ấn định tỷ lệ phóng (zoom) ban đầu là 1 khi trang được nạp. Sau đây là ví dụ không có và có tag meta viewport

Không khai báo tag meta viewport

Có khai báo meta viewport

3. Các nguyên tắc khi thực hiện responsive

a. Responsive Images

Sử dụng thuộc tính max-width : Responsive images là làm cho các hình có tỷ lệ đẹp theo kích cỡ của browser. Nếu ấn định thuộc tính max-width là 100% thì các hình sẽ nhỏ lại nếu cần thiết nhưng chúng sẽ không lớn hơn kích thước gốc. Ví dụ:

- Hiện các hình khác nhau tùy theo độ trong của browser : Dùng tag <picture> giúp bạn chỉ định các hình khác nhau theo kích thước trình duyệt.

b. Responsive Text Size

Cỡ chữ có thể được chỉ định bằng đơn vị "vw", nghĩa là "viewport width". Ấn định này làm cho cỡ chữ thay đổi theo cỡ của browser:

c. Media query

Media query là cách thức trong CSS3 giúp bạn dò môi trường hiện tại để biết mà định dạng trang web. Bằng cách sử dụng chỉ thị @media

Bằng cách dùng media query, bạn có thể định nghĩa cách hiển thị trang web của mình trên các môi trường khác nhau.

Ví dụ 2:

4. Các nền tảng hỗ trợ Responsive Web Design

Việc thiết kế trang web có responsive là rất hay, rất cần thiết nhưng không hề dễ dàng, rất cực nếu như bạn tự thực hiện.

Bạn nên sử dụng sự hỗ trợ của các bộ thư viện giúp cho việc này thì hay hơn. Có nhiều bộ thư viện như W3.CSS, Bootstrap… sẽ giúp bạn thực hiện này nhanh và hiệu quả hơn.

J. BOOTSTRAP 4

I. Sơ lược về Bootstrap

1. Giới thiệu

Bootstrap là một nền tảng cho phép phát triẻn các website hỗ trợ responsive. Nó định nghĩa sẵn rất nhiều class CSS, icon font, các hàm tiện ích chạy trên jquery… để tạo ra các kiểu chữ, button, menu và các thành phần giao diện trong trang.

Bootstrap hỗ trợ Responsive với nhiều kích thước màn hình khác nhau

Ký hiệu lớp	Thiết bị	Độ rộng lớp container	Chú thích
.col-xs-$	Extra small	Auto	Dùng cho điện thoại kích thước nhỏ hơn 768px
.col-sm-$	Small devices	750px	Dùng cho tablets kích thước >= 768px
.col-md-$	Medium devices	970px	Dùng cho desktop ( >=992px)
.col-lg-$	Large devices	1170px	Dùng cho desktops >=1200px

Trong đó $ là một số nằm trong khoảng từ 1-12

2. Các ưu điểm của Bootstrap

1. Chuẩn hiển thị trên mọi màn hình, mọi trình duyệt.

2. Tự động điều chỉnh kích thước trang theo kích thước trình duyệt.

3. Tốc độ load tốt.

4. Hỗ trợ nhiều kiểu hiển thị sẵn, nhiều kiểu box, nhiều kiểu form đẹp và sang trọng.

5. Hỗ trợ LESS và SASS giúp lập trình viên nhanh chóng tích hợp Bootstrap.

6. Việc tích hợp Bootstrap vào website rất dễ dàng.

II. Download và nhúng bootstrap vào trang

1. Downloaf bootstrap

- Vào https://getbootstrap.com/docs/4.2/getting-started/download/ rồi nhắp Download

- Chép file zip vừa down vào website của bạn rồi giải nén (Extract Here) , bạn sẽ được 1 folder

- Vào folder vừa chép, sẽ thấy các folder css, js. Đó là những gì chúng ta cần

2. Nhúng bootstap vào trang web

Cách 1: Mở 1 trang trong website của bạn rồi nhúng code css và js của botstrap vào:

Do bootstrap chạy trên nền jquery nên bạn phải kèm thêm jquery như trên. Nhúng jquery trực tiếp từ CDN như ví vụ trên hoặc download jquery về website rồi nhúng vào cũng được.

Cách 2: Nhúng bootstrap trực tiếp từ CDN, không cần down về máy, đoạn code có sẵn trên trang download boostrap

3. Thiết lập cho website hỗ trợ giao diện Mobile

Để chắc chắn giao diện của website có hỗ trợ mobile. Đặt code sau trong tag <head>:

Tag này dùng để co giãn độ rộng trang theo độ rộng của thiết bị. 1,0 là thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.

4. Một số lưu ý khi sử dụng Bootstrap

class Container: được fix sẵn độ rộng tùy theo độ phân giải, padding sang hai bên là 15px class Container-fluid: có độ rộng full màn hình

class Row: Margin là số âm: -15px nếu muốn thẻ nào đó sát bên lề hai bên, trái ngược với Container, bạn chỉ cần đặt container bọc ngoài thẻ Row là thẻ trong đó sẽ nằm đúng lề,

III. Sử dụng các thành phần trong bootstrap

1. Chuẩn bị

Để học/thực tập các thành phần trong boostrap, bạn cần chuẩn bị như sau:

1. Tạo 1 trang html/php và lưu với tên gì đó, chẳng hạn testBT.html

2. Chèn code jquery, code bootstrap vào trang của mình. Dưới đây là ví dụ:

Code màu đỏ ở trên bạn có thể sửa cho thích hợp với site của bạn. Và từ đây trở xuống , các đoạn code exampe bạn hãy copy đạt trong body để zem thử

2. Color

a. Text color

Các class dùng để định dạng màu chữ gồm .text-muted , .text-primary , .text- success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text- dark , .text-body , .text-light

Có thể thêm 50% opacity cho màu chữ đen/trắng khi dùng thêm class .text-black- 50 , .text-white-50

b. Background color

Các class màu nền gồm: .bg-primary , .bg-success, .bg-info , .bg-warning , .bg- danger , .bg-secondary , .bg-dark , .bg-light

3. Form

Khi tạo form có dùng các định dạng của bootstrap, bạn cần nhớ:

- Dùng <div class="form-group"> bao quanh mỗi form control và nhãn của nó

- Thêm class .form-control vào các tag <input>, <textarea> và <select>

- Tag form có 1 class đặc biệt do bạn chỉ định sẽ quyết định cách hiện của form

a. Form inline

b. Form horizontal

4. Navigation

a. Navigation 1 cấp

Thanh navigation hay menu được tạo rất dễ dàng với <nav class="navbar navbar-default">

- Class navbar-expand-xl|lg|md|sm để chỉ định sẽ hiện dọc trên loại thiết bị.

- Class bg-info là màu nền, có thể đổi thành bg-primary , bg-success , bg-info , bg- warning , bg-danger , bg-secondary , bg-dark , bg-light

- Class navbar-light là màu chữ, có thể đổi thành navbar-dark

- Nếu thêm class justify-content-center vào tag nav thì thanh sẽ canh giữa

- Class navbar-brand là logo, có thể bỏ

b. Navigation collapse

Là thanh sẽ tự động co lại khi màn hình nhỏ

c. Navigation có dropdown

d. Fixed navigation

- fixed-top : canh theo cạnh trên

- fixed-bottom : canh theo cạnh dưới

- sticky-top : Khi user cuộn, thanh navigation dụng cạnh trên thì dừng lại

5. Badges

Badges dùng để thông tin về 1 trạng thái, 1 điều gì đó.

- Nếu muốn bo tròn góc thì thêm class badge-pill

Có thể dùng badge trong các element khác

6. Table

Các class trong boostrap để định dạng table

.table	Là class cơ bản để định dạng 1 table trong bootstrap.
.table-striped	định dạng màu nền các hàng chẵn lẻ khác nhau
.table-bordered	Bổ sung border cho các ô
.table-hover	Định dạng để đưa chuột vào ô sẽ có màu thay đổi
.table-responsive	Tạo table responsive
.table-dark	Nền đen cho table
.table-borderless	Table không có viền
table-sm	Cho padding của các ô giảm 1 nữa
.table-primary .table-success .table-danger .table-info .table-warning .table-active .table-secondary .table-light .table-dark	Màu nền cho table, tr, td
thead-dark thead-light	Màu nền trong tag thead

Boostrap có class .table để định dạng table cơ bản

c. Boostrap có class .table-bordered để định dạng các ô có đường viền

Xem thêm: www.w3schools.com/bootstrap4/bootstrap_tables.asp

7. Button

Sau đây là 8 class để tạo các button với bootstrap: btn , btn-default , btn-primary , btn- success, btn-info , btn-warning , btn-danger , btn-link

8. Pagination

Booostrap có class .pagination (gán cho tag ul ) để định dạng thanh phân trang. Và vài class khác

.pagination	Là class cơ bản để định dạng 1 thanh phân trang.
.active	Gán cho tag li diễn tả trang hiện hành
.disabled	Gán cho tag li diễn tả cấm click
.pagination-lg	Cho thanh phân trang cỡ lớn
.pagination-sm	Cho thanh phân trang cỡ nhỏ
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li>

9. Card

- Nếu không cần, có thể bỏ heading, footer của panel

- Có thể thêm các class sau để chỉ định màu nền.bg-primary, .bg-success, .bg-info, .bg- warning, .bg-danger, .bg-secondary, .bg-dark , .bg-light

- Class .card-columns dùng để tạo 1 grid cards. layout sẽ tự động điều chỉnh khi có nhiều card. Grid sẽ hiển thị dạng dọc trên màn hình small (<=576px):

- Dùng class .card-deck để các card = nhau width và height, có một khoảng cách giữa các card

Dùng class .card-group để các card = nhau width và height, không có 1 khoảng cách giữa các card

10. Image

- Class img-fluid : responsive, tức max-width=100% , height=auto

- Class mx-auto d-block : để cho hình canh giữa (1 mình)

- Class float-left/ float-right: cho hình dạt qua trái/phải

11. Alert

Alert là hiện ra 1 thông báo cho user xem. Thông báo có thề ở những mức độ thông tin khác nhau như susscess, warning, danger…Các class có thể dùng : alert-success , alert-info, alert-warning , alert-danger , alert-primary , alert-secondary , alert-light , alert-dark

12. Carousel

Các class

Class	Mô tả
.carousel	Tạo 1 carousel
.carousel-indicators	Hiện các nút chuyển tới 1 slide, giống thanh phân trang
.carousel-inner	Chứa các slides
.carousel-item	Chứ 1 slide
.carousel-control-prev	Nút chuyển qua slide trái khi user nhắp
.carousel-control-next	Nút chuyển qua slide phải khi user nhắp
.carousel-control-prev-icon	Icon qua trái
.carousel-control-next-icon	Icon qua phải
.slide	Hiệu ứng transition và animation khi chuyển slide


. carousel-caption	Nhãn cho từng slide

13. Modal

Hiện 1 cửa sổ popup để hiện thông tin, nằm trên trang web.

- Thêm hiệu ứng fade : Thêm class fade cho div modal

Chỉ định size: Thêm class modal-sm hoặc modal-lg cho div modal-dialog

- Modal giữa màn hình: Thêm class modal-dialog-centered cho div modal-dialog

14. Collapse

Collapse rất hữu dụng khi bạn muốn ẩn hiện 1 lượng lớn nội dung.

15. Jumbotron

Jumbotron là 1 grey box để hiện thông tin quan trọng nào đó

Nếu muốn full width thì thêm class .jumbotron-fluid

16. Text/Typography

<mark>: Tag <mark> được định dạng màu nền vàng và padding

- <abbr>: Tag <abbr> được định dạng border-bottom dạng dotted

<blockquote>: Tag <blockquote> với class blockquote được dùng khi trích nguyên văn

- Định dạng chữ

Class

Description

.font-weight-bold	Chữ đậm
.font-italic	Chữ nghiêng
.font-weight-light	Chữ đậm sáng
.font-weight-normal	Chữ bình thường
.lead	Làm paragraph chữ lớn là sáng ra 1 chút
.small	Chữ nhỏ hơn, (khoảng 85% so với cha)
.text-left	Chữ canh trái
.text-*-left	Chữ canh trái trên màn hình small, medium, large , xlarge
.text-center	Chữ canh giữa
.text-*-center	Chữ canh giữa trên màn hình small, medium, large , xlarge
.text-right	Chữ canh phải
.text-*-right	Chữ canh phải trên màn hình small, medium, large , xlarge
.text-justify	Chữ canh đều hai biên
.text-monospace	CHỮ Monospaced
.text-nowrap	Không cho chữ cuộn xuống khi đụng lề phải
.text-lowercase	Hiện ra dạng chữ thường
.text-uppercase	Hiện ra dạng chữ hoa
.text-capitalize	Hiện ra dạng chữ hoa đầu mỗi từ

17. Flex

Các class flex trong BS4 dùng để tạo layput theo kỹ thuật flex – kỹ thuật làm layout tốt nhất hiện nay

Tạo flex với class d-flex

- Tạo flex với class d-inline-flex

- Flex vertical: Dùng class .flex-column hoặc .flex-column-reverse

Flex fill/equal width: Dùng class .flex-fill

- Flex order: Dùng class .order để sắp xếp các item

18. Tooltip

Tooltip là 1 popup nhỏ hiện ra khi user đưa chuột vào 1 tag.

- Chú ý: Để tooptip chèn thêm popper nữa nhé (trước jquery)

- Position tooltip: có thể thay top trong data-placement thành bottom, left, right để chỉ định vị trí .

19. Popover

Giống như tooltip nhưng nội dung phong phú hơn.

Chú ý: Để tooptip chèn thêm popper nữa nhé (trước jquery)

- Position tooltip: có thể thay top trong data-placement thành bottom, left, right để chỉ định vị trí .

- Đóng popover: thêm thuộc tính sau để đóng popover khi user lick bên ngoài

20. Scrollspy