THIET KE WEB

Chia sẻ bởi Nguyễn Quỳnh Mai | Ngày 26/04/2019 | 291

Chia sẻ tài liệu: THIET KE WEB thuộc Công nghệ thông tin

Nội dung tài liệu:

THIẾT KẾ WEBSite
Nguyễn Thị Thanh Tú
Giới thiệu môn học
Số tiết học: 75
LT: 32 tiết.
TH: 40 tiết.
KT: 5
Một bài tập lớn, các nhóm bảo vệ lấy điểm thi
Phần 1
THIẾT KẾ WEB VỚI HTML
Tài liệu tham khảo
Tự học HTML và XHTML trong 24 giờ. Lê Minh Phương
Những bài thực hành HTML
Đinh Xuân Lâm
Thiết kế quảng cáo và tiếp thị trên web HTML. Ngọc Anh Thư Press
Thiết kế và xuất bản trang Web với HTML. NXB Thống Kê
Bài Mở Đầu
HTML là gì?
HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang Web và được hiển thị bởi các trình duyệt Web.
Web Page (Trang Web): Là tài liệu HTML.
Web site: Là một số các trang Web liên kết với nhau.
World Wide Web (www): Là dịch vụ toàn cầu của Internet mà HTML là nền tảng.
Những ứng dụng của HTML
HTML là nền tảng của World Wide Web, một dịch vụ toàn cầu của Internet.
HTML để thiết kế Web trên mạng Internet, tạo tài liệu, gửi cáo thị... cho các công ty, cá nhân.
Trình soạn thảo trong quá trình học
Sử dụng trình soạn thảo NotePad có sẵn trong Windows.
StartProgramsAccessoriesNotePad
Hoặc một trình soạn thảo bất kỳ trong windows.
FrontPage, DreamWare, Visual Studio...
Những vấn đề cần quan tâm khi thiết kế Web
Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn, đường kẻ ngang, danh sách, bảng.
Thu ngắn văn bản.
Bố trí hình ảnh nhỏ gọn, hợp lý.
Bài 1
Tạo chương trình đầu tiên
1.1 Tạo một trang Web mới.
- Mở môi trường mà bạn muốn soạn thảo tài liệu HTML..
- Sử dụng chương trình soạn thảo NotePad: Start -> Program -> Accessories -> NotePad.
Chú ý:
+ Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần mở rộng
+ Nếu sử dụng môi trường soạn thảo là NotePad trên Windows thì ghi ghi tài liệu HTML vào ổ đĩa fải chọn Encoding là UTF-8 để hiển thị tiếng việt.
1.2. Tag (thẻ) HTML là gì?
Khi moät Web browser hieån thò moät trang Wed, Web Browser seõ ñoïc töø moät file vaên baûn ñôn giaûn vaø tìm kieám nhöõng ñoaïn maõ ñaëc bieät hay nhöõng Tag ñöôïc ñaùnh daáu bôûi kyù hieäu < vaø >.
* Tag mang thoâng tin
String of text
Trong đó: : tag bắt đầu.
: tag kết thúc.
* Tag roãng:
Ví dụ:

Chúc mừng bạn đến với HTML

Chúc bạn học tốt!
Tag
Tag
Tag kết thúc
* Web browser
Là trình duyệt Web, ví dụ: Microsoft Internet Explorer, FireFox, Opera, Netscape...

1.3. Cấu trúc cơ bản của một trang HTML

tiêu đề trang

Văn bản hiển thị.

1.4. Tag chú thích.
.
Thẻ
Thẻ này dùng để ghi thông tin về version HTML áp dụng trong tài liệu web.
Thường đây là dòng đầu tiên trong file HTML.
Ví dụ:

1.6. Tạo trang Web đầu tiên
Mở chương trình soạn thảo NotePad.
Sử dụng phông đánh tiếng việt: Unicode
Soạn thảo đoạn mã sau:
1.5. Hiển thị tài liệu trong Web Browser

Học tập HTML

Chúc mừng bạn đã tạo được trang web đầu tiên!

Lưu lại với tên “MoDau.html” (vào trong thư mục của mình), với phần Encoding là UTF-8.
Lưu ý: phần mở rộng có thể là html hoặc htm đều được.
Vào thư mục của mình chạy tệp HTML mà ta vừa tạo, xem kết quả nhận được.
Thực hành
Thiết kế một trang HTML giới thiệu về bản thân.
Chương 2
Điều chỉnh 1 tài liệu HTML
2.1. Nạp tài liệu trong Web browse
2.1.1.Tạo sự thay đổi trong tài liệu HTML
Vào thư mục làm việc, mở tệp html của mình.
Mở trình soạn thảo NotePad.
Từ thực đơn File, dùng Open để mở tệp mình đã làm.
Từ đó thêm, bớt, sửa đổi... văn bản trong đó.
Lưu trở lại.
2.1.2.Nạp lại tài liệu trong Web browser

Trở lại thư mục làm việc, mở lại tệp đã sửa, quan sát, so sánh với trang Web đã mở lúc đầu về sự thay đổi.
2.1.3. Thực hành

Đều chỉnh lại tài liệu HTML của mình, tạo một một trang HTML giới thiệu về một vài thành viên của lớp.
2.2. 6 mức tiêu đề
2.2.1. Những tiêu đề của HTML

Tag tiêu đề:
Nội dung hiển thị
N là số nguyên từ 1 đến 6.
Ví dụ:

Tiêu đề thứ 3

Tiêu đề nhỏ nhất

Để tiêu đề ở giữa:
Tiêu đề
Để tiêu đề bên phải:
Tiêu đề
Ví dụ
2.2.2. Đặt những tiêu đề vào tài liệu html
Ví dụ đoạn mã sau vào trong phần thân ...

Tiêu đề lớn nhất

Tiêu đề lớn thứ hai

Tiêu đề thứ 3

Tiêu đề thứ 4

Tiêu đề thứ 5

Tiêu đề nhỏ nhất

Lưu tài liệu lại với phần mở rộng là htm.
Mở thư mục làm việc để mở trang html của mình mới làm. Xem sự hiển thị 6 mức tiêu đề.
2.2.3. Thực hành
Tạo một trang tài liệu html giới thiệu về bản thân, trong đó có dùng các tiêu đề để nhấn mạnh từng phần tài liệu.
2.3.Chia văn bản ra thành nhiều đoạn
2.3.1. Chia đoạn trong HTML
Tag chia đoạn:

Khi gặp

Web browser sẽ chèn một dòng trống và bắt đầu một đoạn mới.
Tag

không cần tag kết thúc (

).
2.3.1. Căn chỉnh đoạn
Tag

: align=align_type dùng chỉ định căn đoạn mới, align_type là center hoặc right.
Ví dụ:

Chữ ở giữa

Chữ bên phải

2.3.2. Chèn các dấu chia đoạn

Sử dụng tag

để tạo một trang HTML, trong đó có các đoạn văn bản riêng biệt.
Dùng Web browser để kiểm tra công việc của mình.
Ví dụ
2.4. Đường kẻ ngang
2.4.1. Tạo đường kẻ ngang
Tag hard rule

: chèn một đường thẳng trong trang html.
Tag
: đẩy văn bản xuống dòng, nhưng không chèn thêm dòng trống.
Tag

đoạn văn bản

: Toàn bộ đoạn văn bản thụt vào ở đầu dòng.
Ví dụ
2.4.2. Định dạng thuộc tính cho đường kẻ.
Thêm thuộc tính vào đường thẳng

Ví dụ

size of hard ruler

tag style trong HTML

Không dùng width

Width = 100, size = 12, color = #800000

Width = 200, size = 20, color = #808080

Width = 50%, size = 40, color = red

Width = 50%, size = 40, color = blue

Chúc các bạn thành công!!!

2.4.3.Thực hành
Tạo một trang tài liệu html giới thiệu về mình, các bạn trong lớp. Trong đó có dùng tiêu đề, các tag vừa học để phân mảng từng phần.

Dùng “<” để viết ra ký tự “<“.
Dùng “>” để viết ra ký tự “>”.

2.5.Làm việc với các kiểu mẫu
2.5.1. Các Tag style của HTML
Tag Chữ đậm.
Tag Chữ nghiêng.
Tag Chữ gạch chân.
Tag ~~Chữ gạch giữa~~.
Tag Chữ đánh máy.

Ví dụ

Sử dụng style

Chia đoạn trong HTML

Vì một thế giới ngày mai.

Vì tương lai của mỗi chúng ta

Hãy cố gắng học bạn ơi
Hà Nội, ngày 14/3/2007.

Chúc các bạn thành công!!!

2.5.2.Tag định dạng logic
Tag đậm logic type
Dòng này đậm
Tag nghiêng logic type
Dòng này nghiêng
Tag gạch ngang logic type
~~Dòng này gạch giữa~~
Tag kiểu đánh máy logic type
Chữ đánh máy
Tag chỉ số trên
x^y ----> xy
Tag chỉ số dưới
x₂ ----> x2
Ví dụ
2.5.2. Áp dụng tag style vào trong tài liệu html

Chúng ta có thể áp dụng linh hoạt các tag ..., ..., ..., ~~...~~, ...,... để tạo các kiểu khác, như: đậm nghiêng, chữ đánh máy nghiêng, chữ đánh máy đậm...
3.5.3.Thực hành
Tạo một trang tài liệu html giới thiệu về mình, các bạn trong lớp. Trong đó có dùng các tag style vừa học nhấn mạnh từng phần.
Web mẫu
2.6.Danh sách
2.6.1.Danh sách không có thứ tự
Sử dụng tag

...: cho một danh sách các mục với những ký hiệu được đánh dấu phía trước.
Tag

chỉ ra từng mục cho một danh sách.

Doøng 1
Doøng 2
Doøng 3
.........

Ví dụ, ta có đoạn mã sau:

Ngô Thị An.
Lê Xuân Châu.
Vũ Đức Chiến.
Nguyễn Đức Đại.

Ta thêm thuộc tính type = circle/square/disk vào trong tag

Ngô Thị An.
Lê Xuân Châu.

Ngô Thị An.
Lê Xuân Châu.

Ngô Thị An.
Lê Xuân Châu.

...

Doøng 1
Doøng 2
Doøng 3
.........

Ngô Thị An.
Lê Xuân Châu.
Vũ Đức Chiến.
Nguyễn Đức Đại.

Ngô Thị An.
Lê Xuân Châu.
Vũ Đức Chiến.
Nguyễn Đức Đại.

Dịng 1
Dịng 2
Dịng 3

thì phần còn lại của danh sách sẽ được định dạng và đánh số thứ tự từ phần tử này.
2.6.3.Danh sách các định nghĩa
Nằm giữa các tag
...
.
Dùng với
để
chỉ định mẫu cần
định nghĩa.
Dùng
để chỉ
định nghĩa cho
mẫu xác định
bởi
.
Các Tag sử dụng để định nghĩa như sau:

Thuật ngữ cần định nghĩa

Lời diễn giải

Thuật ngữ cần định nghĩa

Lời diễn giải
...

- Thuật ngữ cần định nghĩa: Cố định trên một dòng
- Lời diễn giải: Có thể là đoạn văn viết trên nhiều dòng
- Trong danh sách có thể có hoặc không lời diễn giải (tức là có hoặc không Tag DD sau Tag DT)
Ví dụ, ta có đoạn mã sau:

Tình yêu

Tình yêu là bát bún riêu...

Bao nhiêu sợi bún bấy nhiêu sợi tình.

HTML

Ngôn ngữ để thiết kế trang web tĩnh.

C++

Ngôn ngữ lập trình hướng đối tượng.

Là ngôn ngữ lập trình khó học.

2.6.4.Danh sách lồng nhau
Danh sách có thứ tự, không thứ tự và danh sách định nghĩa có thể lồng vào nhau theo nhiều mức độ khác nhau.
Ngoài lồng các danh sách lại với nhau, ta con có thể trộn lẫn các loại danh sách.
Ví dụ, ta có đoạn mã sau:
1. Ngô Thị An.
  - Là nữ.
  - Nghỉ học ngày 7-3
  ....
2. Phạm Hồng Duyên
  - Đi học chăm chỉ.
    1. Hát hay.
    2. Múa giỏi.
2.6.6.Thực hành
Tạo trang web chứa danh sách lớp.
Tạo một trang tài liệu html giới thiệu về trường, lớp, bạn bè... Trong đó có sử dụng các danh sách không thứ tự, danh sách có thứ tự, danh sách lồng nhau...
2.7. Chèn ký tự đặc biệt.
2.7.1. K� t? d?c bi?t
&xxxx;
Trong đó xxxx là tên mã (code name) cho kí tự đặc biệt đó.
Ví d?:
� é r r
� � � Ù
� �
2.7.2.Các dấu nhấn.
< thay cho <
> thay cho >
& thay cho &
Ví dụ
2.7.3. Những khoảng trống thêm vào
�
Ví dụ:
A B C D E

A� B� C� D� E�
Kết quả hiển thị:
A B C D E
Chương 3
Thêm hình ảnh vào trang Web
3.1. Các dạng hình ảnh của web
Có nhiều dạng tệp tin hình ảnh: PICT, GIF, TIFF, BMP, JPEG, ...
Dạng chuẩn có thể hiển thị trong một trang web là Gif.
Dạng hình ảnh khác sử dụng trong web là Jpeg.
3.2 Vài điểm cần biết khi sử dụng đồ hoạ
Kích thước hình ảnh càng nhỏ càng tốt, nên nhỏ hơn 100Kb.
Các hình ảnh không nên rộng hơn 480 điểm và cao hơn 300 điểm.
Hình ảnh là những thứ tạo thêm nghĩa cho tài liệu.
Một hình ảnh nhỏ có thể xuất hiện nhiều lần trong một trang mà chỉ bị chậm rất ít thời gian.
3.3. Đưa hình ảnh vào trang web
Nên để các hình ảnh vào một thư mục riêng (Ví dụ như thư mục Image).
Cú pháp:

Trong đó FileName.gif là tên một hình ảnh dạng gif hoặc jpg ñeå ôû cuøng thö muïc vôùi taøi lieäu HTML
Ví dụ:

Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag
.
Ví dụ:

3.4. Định dạng hình ảnh
3.4.1. Chiều cao, chiều rộng của hình ảnh.
Tag:

Trong đó X là chiều rộng và Y là chiều cao của hình ảnh được tính bằng số điểm (pixel).
Khi thêm hai thuộc tính Width và height giúp cho web hiển thị nhanh hơn.

Ví dụ:

3.4.2. Mô tả hình ảnh
Tag coù daïng:

Người sử dụng Browser vẫn xem được hình ảnh thì khi đưa trỏ chuột đến hình ảnh sẽ xuất hiện "Dòng mô tả hình ảnh" .
Ví dụ:
alt = Muon tai hinh anh về phải vào.. >

Chèn ảnh vào giữa thì làm thế nào?
3.4.4. Sắp xếp hình ảnh so với văn bản bao quanh
Tag

trước tag
Kiểu sắp xếp:
Left: hình ảnh chèn vào bên trái văn bản
Center: hình ảnh chèn vào giữa văn bản
Right: hình ảnh chèn vào bên phải văn bản
3.4.4.Sắp xếp trong hàng của văn bản và hình ảnh

Trong đó:
Value có các giá trị sau:
Top: Chỉnh đáy của dòng văn bản ngang với đỉnh của ảnh.
Middle: Chỉnh đáy của dòng văn bản nằm khoảng giữa ảnh.
Bottom: Chỉnh đáy của dòng văn bản bằng với đáy của ảnh. (luôn mặc định)
Ví dụ:

ee
Ví dụ:

Ví dụ:

Ngoài ra ta có thể thêm từ khóa
align=right/left vào trong tag .
Để có viền khung hoặc không, ta sử dụng khoá Border=N trong tag .
Trong đó N là số nguyên lớn hơn hoặc bằng 0, chỉ độ dày của viền khung.
Ví dụ

Ví dụ

Thực hành
Tạo một trang tài liệu html chứa các hình ảnh ngộ nghĩnh + các lời bình vui vẻ.
Chương 4
Liên kết và URL
4.1. Hoạt động của các liên kết
- Caùc lieân keát ñöôïc bieåu thò bôûi chöõ maàu xanh coù gaïch döôùi goïi laø caùc anchor.
- Ñeå taïo caùc lieân keát: Tag .. (anchor).
- Ñeå chæ ñòa chæ lieân keát ñeán ta duøng thuoäc tính HREF =…… cuûa Tag

4.2.Thế nào là URL
URL-Uniform Resource Locator-Địa chỉ tài nguyên thống nhất.
URL là địa chỉ của trang web, khi kích chuột thường nó chuyển đến các tài liệu liên quan.
URL bao gồm hai phần chính: giao thức (protocol) và đích truy cập (target).
Giao thức chung trên web là http://, giao thức này nhận các tài liệu html.
Ngoài ra còn các giao thức khác như: Gopher://, ftp:// và telnet://.
4.3. Cấu trúc của URL
URL-Uniform Resource Locator-Địa chỉ tài nguyên thống nhất.
URL là địahhhu chỉ của trang web, khi kích chuột thường nó chuyển đến các tài liệu liên quan.
URL tương đối: là URL trỏ đến trang thuộc cùng side với trang hiện hành, chỉ khác nhau tên tập tin.
URL tuyệt đối: là URL trỏ đến trang riêng biệt từ bất cứ đâu trên internet.
4.4. Các dạng liên kết
Liên kết đến tập tin cục bộ
Liên kết đến tập tin cục bộ
Là liên kết đơn giản nhất để mở tập tin html trong cùng một thư mục. Có dạng:
đoạn text linh
Ví dụ: có đoạn mã
Chi tiết...
Nguyễn Đức Đại.
Liên kết Anchor đến một hình ảnh
Đoạn mã lệnh:
text link
Web browser sẽ tự động gọi hình ảnh về.
Ví dụ, đoạn mã lệnh sau:
mất thẩm mĩ.
Để web browser mở văn bản, hình ảnh ở một trang web mới. Ta sử dụng từ khoá target=“_blank” trong tag .
Ví dụ. người thiên cổ.
Liên kết đến các side Internet bên ngoài
Dạng đầy đủ:
text link
Ví dụ có đoạn mã
Tin tức VN
4.4.3. Liên kết đến các phần của trang
Anchor được đặt tên
Anchor được đặt tên là một dấu hiệu tham khảo ẩn cho một phần của tập tin html.
Được sử dụng để tạo liên kết đến phần khác của một trang khi trang đó dài.
Dạng html cho việc cho việc tạo anchor
text to link
Ví dụ:
I. Thành phần, độc tính của thuốc lá
Viết một liên kết đến một Anchor được đặt tên.
Dạng html:
text to hypertext
Ví dụ (tệp Bai8_3.html)
Thành phần, độc tính của thuốc lá
Các nguy cơ gây bệnh của hút thuốc lá
Liên kết này thường dùng để xây dựng mục lục.
Thêm liên kết tới Anchor được đặt tên trong tài liệu khác
Dạng mã:
text link
Ví dụ: có đoạn mã
Nguy cơ gây bệnh của thuốc lá
4.4.4. Liên kết đến hình ảnh
Button siêu liên kết
Ta cũng có thể gắn hình ảnh thay cho các text hyperlink.
Để làm điều này, ta đặt tag hình ảnh vào trong phần siêu văn bản của tag Anchor.
Ví dụ: trong đó có đoạn mã

4.4.5. Thực hành
Tạo vài trang html để chúng liên kết với nhau, đưa vào các hình ảnh minh hoạ, các liên kết hình ảnh, tạo menu cho trang chính...
Bắt đầu làm bài tập lớn được rồi.
4.5. Danh thiếp và địa chỉ liên kết đến Email
4.5.1.Dạng tag address
Ở cuối một trang web thường cung cấp thông tin về tác giả và tài liệu. Và cũng có thể gửi Email cho tác giả.
Ta có thể sử dụng tag

Đánh địa chỉ ở đây.....

Các dòng text trong đoạn tag này là chữ có kiểu nghiêng.
Chú ý: trong tag này ta vẫn có thể sử dụng các tag khác, ví dụ như ......
Ví dụ ta có đoạn mã sau:

Theo thông tin của Lê Anh Nhật, điện thoại 0912.844.866

4.5.2. Liên kết đến Email
Để người đọc có thể gửi Email cho tác giả, ta chỉ cần thêm liên kết siêu văn bản, trong đó có sử dụng từ khoá “mailto:”.
Nội dung

Ví dụ: trong đó có đoạn mã:
E-mail: [email protected]
4.5.3. Liên kết đến một FTP site

FTP site: dùng để sao chép tập tin giữa các máy tính với nhau. Những người sử dụng FTP truy cập vào một máy tính từ xa để lấy mọi thứ mà họ cần.
Tạo liên kết:

Nội dung

Ví dụ:
FTP sever�
4.5.4. Thực hành
Thêm các địa chỉ và liên kết Email vào các tài liệu của mình đã làm ở các bài trước.
Chương 5. Trang trí cho văn bản
5.1. Mầu sắc và cẩu trúc nền
5.1.1. Cơ bản về màu sắc
Trong một web browser, ta có thể sử dụng 256 màu của hệ thống để tạo màu cho chữ hoặc nền văn bản.
Mỗi một màu được xác định dựa trên các giá trị RED-GREEN-BLUE (RGB) của nó.
R,G,B lấy giá trị từ 0 đến 255.
Thay vì xác định màu theo dạng tương tự "123,211,143" thì mỗi số xác định theo kiểu thập phân se được chuyển sang hệ 16.
Chỉ còn số dạng: "xxyyzz", trong đó:
xx là trị của màu Red.
yy là trị của màu Green.
zz là trị của màu Blue.
Ví dụ một số màu:
Màu có số 008000
Màu có số FFFF00
Màu có số FF0000
Màu có số 008080
Màu có số 800000
Màu có số 808080
Màu có số 00FFFF
5.1.2. Màu nền cố định
Ta điều chỉnh tag như sau:

trong đó XXYYZZ là dạng biểu diễn thập lục phân của màu được chỉ định.
Ví dụ

Màu của chữ và những siêu văn bản:
Ta sử dụng dạng:

Trong đó: TEXT là màu chữ, LINK là màu của mục liên kết siêu văn bản, VLINK là màu của mục liên kết siêu văn bản đã xem.
Chú ý: thứ tự của các mục trong tag không quan trọng.

5.1.3. Cấu trúc nền
Ta có thể sử dụng tệp hình ảnh nhỏ để làm nền cho trang web. (dạng gif, jpg)
Chú ý:
Kích cỡ tệp ảnh nên nhỏ.
Chọn màu chữ và màu nền tương phản.
Nhược điểm: thời gian nạp trang web sẽ chập hơn.
Dạng HTML cho nền hình ảnh di chuyển theo khi cuốn trang web:

Ví dụ
Dạng sau cho một nền đứng yên:
bgproperties = "fixed">
Thực hành
Thêm màu nền, ảnh nền, màu chữ vào các trang web của bạn.
5.2. Trang trí cho văn bản
5.2.1. Kích cỡ phông chữ
Tag:
...
trong đó N là cỡ chữ có giá trị từ 1 đến 7.
* Giá trị Font chữ mặc định là 3
Một cách sử dụng khác của Tag Font là:

Dòng văn bản Dòng văn bản

Các giá trị +N hoặc-N cho biết độ dịch chuyển (offset) so với kích cở phông hiện tại.

Ngoài ra còn có các tag:
... --------------> Chữ to.
... ----------> Chữ nhỏ.
(tag này ít dùng vì thiếu linh hoạt)
Cách khác để sử dụng:
... ---> Dịch chuyển font hiện tại lên 1.
... ---> Dịch chuển font hiện tại xuống 2.
Font cơ sở:

Tag basefont không có tag đóng, nó vẫn là cỡ phông cơ sở cho đến khi gặp một tag khác xuất hiện.
Ví dụ
5.2.2. Màu của phông chữ
Ta có thể bổ sung thêm thuộc tính màu vào trong tag :

Có thể thay #xxyyzz bằng tên một số màu cơ bản: red, aqua, blue, gray, lime,
Ví dụ
...
...
5.2.3. Dạng phông

text...

Chú ý: nên sử dụng các dạng phông thông dụng của máy tính.
Ví dụ:
...
Thực hành:
Tạo trang web riêng của bạn.
Tạo trang web của nhóm.
5.3. Easy hard rulers
5.3.1. Độ dày của đường
Ta đã học tag
cho kết quả là một đường thẳng ngang màn hình.
Ta có thể tăng độ dày của đường với tham số N:

trong đó N là một số chỉ độ dày.
Ví dụ:

5.3.2. Độ rộng của đường
Ta sử dụng tham số width
Cú pháp:

hoặc

trong đó N là số điểm của đường thẳng, Z% là tỉ lệ phần trăm của trang hiện hành.
Có thể thêm tham số align="left", align="right".
để căn chỉnh đường kẻ
* Màu sắc của đường kẻ
Ta thêm tham số color = #xxyyzz.

* Đường kẻ không có bóng
Ta thêm từ khoá noshade sau tag hr.
Ví dụ:
Thực hành
Thêm vào trang web của bạn các đường thẳng
vừa mới học.
5.4. Xét thêm về sự chỉnh lề
5.4.1. Sự chỉnh lề văn bản
ta có thể dùng tag:
text
vẫn có tác dụng là căn đoạn văn bản ở giữa.
tag xoá đi sự sắp xếp:

5.4.2. Chỉnh lề và sắp xếp văn bản
Còn một tag nữa cũng để chỉnh lề văn bản:
text

text

text

Ví dụ
5.5. Nhạc nền – Chèn video
5.5.1. Nhạc nền : định nhạc nền cho trang tài liệu.
Cú pháp:

url: chỉ định tệp tin nhạc có định dạng wav, au, midi.
n: số lần lặp lại bài hát, n=-1 sẽ lặp cho đến đóng trang web.
Chú ý: tag được đặt sau phần .... và trước tag . Hoặc trong .....
Ví dụ:

Background Sound

Enjoy my sound.

5.5.2. Chèn Video
Ta có thể nhúng file video (*.avi, *.mpg, *.mwv) vào tài liệu html, ta thêm thuộc tính dynscr=“filename” vào trong tag
Ví dụ:

ngữ pháp:
dynsrc=“*.avi” | ”*.mpg”
width=n height=m
start=fileopen | mouseover
loop=infinite | -1 | n align=left | right
>
Học viên tự tìm hiểu về các thuộc tính.
Ví dụ
Ngữ pháp:
width=“n” hight=“m”
scrolldelay=“k”
scrollamount=“i”
behavior="alternate“|slide|scroll
direction="right“ | “left”
bgcolor="#xxyyzz“
loop=-1 | j

5.5.3.Tạo một dòng chữ chạy trên màn hình trang web

Học viên tự tìm hiểu ý nghĩa các thuộc tính của .
Ví dụ
Chương 6. Bảng (Table)
6.1. Những tag cơ bản của bảng

<--Tạo bảng-->
<--Đặc tả các dòng của bảng-->

<--Đặc tả ô dữ liệu của bảng-->

...

text ...

text ...
<--Giới hạn của bảng-->

Ví vụ: tạo một bảng 2 hàng, 2 cột

Hàng 1, cột 1 Hàng 1, cột 2

Hàng 2, cột 1 Hàng 2, cột 2

6.2. ...

có những thộc tính sau:
border = n: tạo viền xung quanh bảng.
cellpadding = N: cho biết có bao nhiêu khoảng trắng giữa khối bên trong phần tử và vách ngăn.
cellspacing = M: Cho biết độ rộng của những đường bên trong bảng để chia các phần tử.
width = n | n%, height = m | m% : định trước kích thước rộng/cao cho bảng.
align = left | right: Cho phép bảng dóng lề trái hoặc phải.
valign = top | bottom: để chỉnh lề trên hoặc giữa hoặc dưới.
bgcolor = #xxyyzz: thiết lập màu nền của bảng.
bordercolor = #xxyyzz: thiết lập màu viền cho bảng.
bordercolorlight = #xxyyzz : thiết lập màu nhạt hơn cho viền bảng 3 chiều.
bordercolordark = #xxyyzz : thiết lập màu đậm hơn cho viền bảng 3 chiều.
background = "...image.gif|jpg": thiết lập nền cho các ô văn bản là hình ảnh với địa chỉ của nó.

6.3. ...
Đặc tả dòng của bảng, số dòng của bảng bằng số phần tử trong cặp

...
.
Một số thuộc tính:
align = left | center | right: để chỉnh lề trái/giữa/phải.
valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới.
bgcolor: đặc tả màu nền của hàng.
bordercolor: đặc tả màu viền của bảng.
bordercolorlight: thiết lập màu nhạt hơn cho màu viền 3 chiều.
bordercolordark: thiết lập màu đậm hơn cho màu viền 3 chiều.

6.4. ...
Đại diện cho ô dữ liệu trong bảng, ô dữ liệu phải xuất hiện trong hàng của bảng.
align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.
valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.
width = n | n%: đặc tả độ rộng của ô.
hight = n | n%: đặc tả chiều cao của ô.
colspan = N: Tạo một ô bằng N ô liền kề theo dòng.
rowspan = M: Tạo một ô bằng M ô liền nhau theo cột.
ngoài ra còn có các thuộc tính:
bgcolor = #xxyyzz.
bordercolor = #xxyyzz.
bordercolorlight = #xxyyzz.
bordercolordark = #xxyyzz.
background = "...image...".
6.5. ...
cũng giống tag nhưng thường dùng cho tiêu đề của bảng, dòng text... sẽ được viết chữ đậm và căn giữa ô.
có những thuộc tính sau:
align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.
valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.
width = n | n%: đặc tả độ rộng của ô.
hight = n | n%: đặc tả chiều cao của ô.
nowrap: thiết lập cho những ô không muốn có dòng nào bị gãy để dữ liệu vừa khít với ô tiêu đề.
colspan = n: đặc tả số cột của bảng mà ô này sẽ trộn lại thành 1. (mặc định = 1)

rowspan: đặc tả số hàng của bảng mà ô này sẽ trộn lại thành một. (mặc định=1)
bgcolor = #xxyyzz.
bordercolor = #xxyyzz.
bordercolorlight = #xxyyzz.
bordercolordark = #xxyyzz.
background = "...image...".
6.6. Thực hành:
Sử dụng bảng biểu để thiết kế giao diện cho trang chính của web.
Ví dụ
Chương 7. Frame
7.1. Giới thiệu frame
Frame mở rộng khả năng hiển thị trang web
bằng cách cho phép chia miền hiển thị thành nhiều vùng. Mỗi vùng như vậy được gọi là frame và có những đặc điểm sau:
Nó có thể truy cập tới một URL một cách độc lập với các frame khác.
Mỗi frame có thể đặt tên, dùng làm đích trong liên kết.
Nó có thể tự thay đổi kích thước khung nhìn, hoặc có thể không thay đổi đối với người sử dụng.
* Cú pháp Frame
Cấu trúc cơ bản:

7.2. Thẻ Frameset
cols = "m1, m2, ..."
border = "N"
framespacing = "N"
bordercolor = #xxyyzz
frameborder = "yes/no">
rows: chỉ chia hàng, tuỳ theo tham số.
cols: chỉ chia cột, tuỳ theo tham số.
border: độ dày đường viền.
framespacing: khoảng cách các frame.
n1, n2, m1, m2, ...: là giá trị thuộc tính được tính bằng điểm hoặc phần trăm tương đối. Và có thể là dấu `*`, frame tương ứng sẽ tự động điều chỉnh.

N: là độ dày tương ứng với các thuộc tính.

frameborder: thiết lập đường viền cho toàn bộ tập frame, có giá trị yes hoặc no.
Ví dụ:
chia thành 2 hàng, hàng thứ nhất chiếm 30% màn hình, còn lại là hàng thứ 2.
chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các cột còn lại sẽ tự động phân chia.
: đặt đường viền, khoảng cách, ...
7.3. Thẻ frame
Cú pháp:
name="tên cửa sổ"
with = "N"
height = "M"
scrolling = "yes/no/auto"
frameborder = "yes/no"
framespacing = "N"
bordercolor = #xxyyzz
noresize >
noresize: nếu có thuộc tính này thì người sử dụng không thể thay đổi kích thước hiển thị frame.
name: gán một tên cho một frame, nó có thể làm đích cho các liên kết từ các tài liệu khác.
with: chiều rộng frame.
height: chiều cao frame.
scrolling: đặt thuộc tính thanh cuốn.
Ví dụ: tạo trang web có 4 frame như sau:

vi du ve frame...index...

Xin lỗi, trình duyệt không trợ giúp frame

Tệp "frame_index.html"

vi du ve frame...content...

MỤC LỤC

Cấu trúc trang web

Tệp "frame_content.html"
7.4. Thực hành tự do
Chương 8. FORM
8.1. Form
Form cho phép bạn nhận thông tin hay phản hồi từ người dùng.
Tạo Form:
Action = “URL”>
yêu cầu thông tin bằng một trong nhiều
cách khác nhau

: nhận giá trị trị Post hoặc Get
8.2. Trường văn bản và các thuộc tính.

Cols = number Wrap = <value>><br> Text…..<br>< /TextArea><br><br>Cho phép người dùng nhập nhiều dòng văn bản vào Form với số dòng và số cột cần hiển thị.<br><br>Text: Hướng dẫn người sử dụng nhập dữ liệu.<br>Value: OFF (giá trị mặc định) nếu không dùng Wrap.<br>8.3. Text Box.<br><br><input type = Text name = “Text_name” <br> Size =number MaxLength= number><br><br>Cho phép người dùng nhập một đoạn văn bản có chiều dài Size và chiều dài tối đa cho đoạn văn bản là MaxLength (Size < MaxLength)<br>8.4. Password<br><br><input type = Password name = “name” <br> Size =number MaxLength= number><br><br>Khi nhập dữ liệu vào thì các ký tự được dấu đi và thay vào đó là những ký tự “*” hay “x” tuỳ thuộc vào trình duyệt.<br>8.5. Check Box<br><br><input type = CheckBox name = “name” <br> Value = “giá trị”> String<br>Tuỳ chọn này được dùng khi có nhiều giá trị cho một tuỳ chọn.<br>Muốn xác định trạng thái mặc định của checkBox là đánh dấu hoặc không đánh dấu thì thêm một trong hai giá trị: Checked hoặc UnChecked<br>String: Là xâu thông báo lựa chọn.<br>8.6. Radio Button<br><br><input type = Radio name = “name”<br> Value = “giá trị”> String<br><br>Cho phép người dùng lựa chọn trong các tuỳ chọn được định trước. <br><br>Thuộc tính Name phải giống nhau và thuộc tính Value phải khác nhau<br>8.7. Trường Hidden.<br><br><input type = Hidden name = “name” <br> Value = “giá trị”> <br><br>Được thiết kế để truyền (ngầm) giá trị đến Web Server và Script. Giá trị truyền thường là một từ khoá, giá trị kiểm tra hay một chuỗi bất kỳ<br>8.8. Submit Button.<br><br><input type =Submit value = “String”><br> <br>Dùng để chuyển dữ liệu trên Form mà người sử dụng đã nhập sang một trang mới.<br>String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Submit ghi trên nút <br><br>8.9. Reset Button.<br><br><input type = Reset value = “String”><br> <br>Dùng để xoá dữ liệu trên Form mà người sử dụng đã nhập, khởi động lại cho các phần tử trên Form.<br><br>String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Reset ghi trên nút <br>8.10. ComboBox và ListBox.<br><br>< Select Name = “name” Size = <giá trị> Multiple ><br> <option selected value = “gia trị 1”> String<br> <option value = “gia trị 2”> String<br> <option value = “gia trị 3”> String<br> ………….<br></Select><br><option>: Định nghĩa một phần tử trong danh sách.<br>Multiple: Cho phép người dùng chọn cùng một lúc nhiều giá trị. <br>Bài tập thực hành<br>Nhập vào thông tin của một sinh viên, sau đó in ra thông tin của sinh viên đó.<br>Chương 9<br>LẬP TRÌNH SCRIPTING VỚI VBSCRIPT<br>9.1. Cơ bản về VBScript.<br>9.1.1. VBScript là gì?<br>Một Script trong tài liệu HTML nói chung có hai phần:<br>+ Phần <head> của tài liệu sẽ có một Script Container đặc biệt chứa định nghĩa của các hàm được script dùng. <br><br>+ Lời gọi hàm làm nhiệm vụ truyền và nhận các giá trị.<br>9.1.2. Tại sao dùng VBScript.<br><br> - VBScript là tập con của Visual Basic <br> - Làm việc với ActiveX: Mặc dù Microsoft bắt đầu hỗ trợ javacript và các ngôn ngữ Script khác truy cập các ActiveX Component, VBScript vẫn là sự lựa chọn của Microsoft và hầu hết những người ủng hộ ActiveX.<br> - Dùng kỹ thuật Dynamic HTML.<br>.<br>9.1.3. Thêm VBScript vào trang.<br><br>Tag <script language = “VBScript”><br> </script> <br>Một vài Tag HTML chấp nhận ngôn ngữ Script bên trong chúng <br> Tất cả các lệnh VBScript sẽ xuất hiện trong các Tag <script><br>Ví dụ:<br> 9.2. Các sự kiện trong VBScript<br>9.2.1. Quản lý sự kiện trong VBScript.<br>Các sự kiện trên Form trong<br>9.2.2. Tạo các trình quản lý sự kiện<br>- Trong VBScript, các sự kiện được quản lý bằng hàm Sub nằm ở phần đầu tài liệu. <br> - Lấy dữ liệu trong Form: Document.<tên Form><br>- Để viết dữ liệu ta dùng Document.Write “String”<br> - Mở một cửa sổ mới:<br> Window.Open (“page.Html”, “Window Name”);<br> - Nèi c¸c chuçi dïng ký tù & <br> - ChuyÓn tõ chuçi sang sè: Hàm Cdbl(value) <br>9.2.1. Khai báo biến, hằng<br>* Khai báo biến:<br> Biến của Asp có kiểu dữ liệu là Variant nên không cần sử dụng từ khoá As với kiểu dữ liệu khai báo.<br>Dim <biến 1>, <biến 2>,……<br> <%<br> Dim so, xau<br> So = 10: xau = “Học thiết kế Web với Asp”<br> %><br>Ví dụ:<br>Có thể sử dụng biến mà không cần khai báo.<br>9.2. Tóm tắt cú pháp VBscript<br>* Khai báo biến mảng:<br>+ Mảng 1 chiều: <br>Dim <Tên biến mảng>(số phần tử)<br> Ví dụ: Dim A(50)<br><br>+ Mảng 2 chiều:<br> Dim <Tên biến mảng>(số dòng, số cột)<br> Ví dụ: Dim B(10, 20)<br><br>+ Khai báo mảng có phần tử cố định: <br> Dim <Tên biến mảng>(phần tử 1, phần tử 2,….)<br>+ Khai báo mảng động:<br> Dim <Tên biến mảng>()<br> Ví dụ: Dim mang()<br>+ Có thể khai báo lại mảng động: <br>ReDim <Tên biến mảng>(số phần tử)<br>Ví dụ: ReDim mang(3)<br>* Khai báo hằng:<br>Const <Tên_hằng> = <giá trị><br>- Với <giá trị>: Kiểu xâu ký tự: Để trong “…”<br> Kiểu ngày: Để trong #....#<br> Kiểu Logic: True hoặc False<br> Kiểu số:<br>1.3.2. Dòng chú thích<br><br>‘ Nội dung dòng chú thích <br>9.2.2. Dấu gạch dưới<br>- Có thể dùng phép toán “&” hay “+” để nối chuỗi.<br>Ví dụ: <br>SQL = Select Mahs, ho_ten, ngay_sinh, gioi_tinh “_<br> & “From tbl_hoso”<br>hoặc<br>SQL = “ Select Mahs, ho_ten, ngay_sinh, gioi_tinh” _<br>SQL = SQL & “From tbl_hoso”<br>Dấu gạch dưới “_” dùng để tiếp nối các câu lệnh quá dài.<br>9.2.3. Phát biểu điều khiển<br>a, IF …THEN<br> SELECT CASE <biểu thức><br> CASE <giá trị 1><br> <dãy lệnh 1><br> CASE <giá trị 2><br> <dãy lệnh 2><br> ……………………………<br> [CASE ELSE<br> <dãy lệnh n>]<br> END SELECT<br>b, SELECT CASE<br>9.2.4. Phát biểu vòng lặp<br>a, FOR…NEXT<br>FOR <biến đếm> = <giá trị đầu> TO <giá trị cuối> [STEP <bước nhẩy>]<br> <dãy lệnh 1><br>[EXIT FOR]<br> <dãy lệnh 2><br>NEXT <biến đếm><br>b, FOR EACH…NEXT<br>FOR EACH <phần tử> IN <nhóm><br> <dãy lệnh><br>NEXT <phần tử><br>c, DO…LOOP <br>9.2.5. Khai báo hàm và thủ tục<br>a, Thủ tục:<br>SUB <tên thủ tục>(danh sách các tham số)<br><br> <thân thủ tục><br><br>END SUB<br> - Gọi thủ tục:<br>- Khai báo<br>CALL <tên thủ tục><br>b, Hàm:<br>FUNCTION <tên hàm>(danh sách các tham số)<br><br> <thân hàm><br><br>END FUNCTION<br>* Khai báo<br>* Gọi hàm <br> <Biến> = <Tên hàm>(danh sách tham số)<br>* Hàm có sẵn<br>- Các hàm chuyển đổi kiểu dữ liệu<br>- Các hàm format<br> - Các hàm toán học<br>Cho phép định dạng dữ liệu<br>Int, Abs, Atn, Cos, Exp, Fix, Hex, Log, Oct, Rnd, Randomize, Round, Sin, Sqr, Tan<br>- Các hàm thao tác với chuỗi<br>- Các hàm ngày tháng<br>- Các hàm kiểm tra<br> * Isdate: Kiểm tra có phải đúng kiểu ngày tháng không?<br> * IsNumeric: Kiểm tra có phải đúng kiểu số không?<br>Chương 10<br>LẬP TRÌNH SCRIPTING VỚI JAVASCRIPT<br>10.1. Tổng quan về JavaScript<br>. Đơn giản.<br>. Động (Dynamic).<br>. Hướng đối tượng (Object Oriented <br>Javascript là một ngôn ngữ thông dịch (interpreter), chương trình nguồn của nó được nhúng (embedded) hoặc tích hợp (integated) vào tập tin HTML chuẩn <br> 10.1.1. Ñaëc tính cuûa ngoân ngöõ Javascript:<br>? đặc tính <br>10.1.2. Ngôn ngữ JavaScript:<br>- Một trong những đặc tính quan trọng của ngôn ngữ JavaScript là khả năng tạo và sử dụng các đối tượng (Object) <br>Object <br>10.2. Nhúng JavaScript vào file HTML<br>Sử dụng một trong cách cách sau đây:<br>- Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT><br>- Sử dụng các file nguồn JavaScript<br>- Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML<br>- Sö dông thÎ sù kiÖn (event handlers) trong mét thÎ HTML nµo ®ã<br> 10.2.1. Sử dụng thẻ SCRIPT<br>Cú pháp:<br>- Dòng chú thích:<br> // Nội dung ghi chú<br>hay /* Nội dung ghi chú */<br>10.2.2. Sử dụng một file nguồn JavaScript <br>Ví dụ:<br><SCRIPT SRC=" http://cse.com.vn "><br>10.3. Sử dụng Javascript<br>10.3.1. Cú pháp cơ bản của lệnh <br>JavaScript xây dựng các hàm, các phát biểu, các toán tử và các biểu thức trên cùng một dòng và kết thúc bằng ;<br> 10.3.2. Caùc khoái leänh<br> Nhieàu doøng leänh coù theå ñöôïc lieân keát vôùi nhau vaø ñöôïc bao bôûi { }<br>Phụ lục<br>Đăng ký web ở http://www.freewebs.com/ <br>Tạo mới một Account<br>Ktra thông tin user<br>Nhập thông <br>tin cá nhân<br>Next để tiếp tục<br>Kích vào đây để tiếp tục<br>Chọn<br>Điền họ tên đầy đủ<br>Lựa chọn thể loại site<br>Tiếp tục<br>Nhập thông <br>tin cá nhân<br>Tiếp tục để kết thúc<br>Nếu đăng ký<br>thành công<br>Kích vào dòng này<br>Địa chỉ trang web của bạn<br>để vào thư mục và xây dựng trang web<br>Tạo một trang mới<br>Tạo một thư mục mới<br>Upload 1 file<br>Upload nhiều file<br>Trang:<br>http://www.125mb.com/<br><br>Trang: http://www.netfirms.com<br><br><br>Đăng ký miễn phí<br>Đăng ký miễn phí<br>2. Chon tên miền<br>1. lựa chọn<br>3. tiếp tục<br>1. tiếp tục<br>2a.tạo tên miền khác<br>2b. tiếp tục<br>Bỏ các dấu tích<br>Tiếp tục<br>Khai báo<br>đầy đủ <br>thông tin<br>cá nhân<br>Tiếp tục<br>Báo thiết lập thành công<br>Tên người sử dụng<br>đ/c trang web<br>địa chỉ để login = FTP<br>địa chỉ để login điều khiển<br>Vào trang web https://controlpanel.netfirms.com để đăng nhập vào điều khiển<br>gõ tên người sử dụng<br>mật khẩu<br>lựa chọn ngôn ngữ<br>tiếp tục<br>Thông tin chính<br>Công cụ của trang web<br>Quản lý các tệp<br>Quản lý các tệp<br>Load các tệp lên mạng<br>lựa chọn "file" hoặc "Directory" để tạo<br>Nh� </div> </div> </div> </div> </div> <div align="center" style="position:relative;"> <div id="preview1-advert1"><script type="text/javascript" src="https://e.eclick.vn/delivery/zone/4749.js"></script></div> </div> </div> <div style="font-size:12px;">* Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ...</div> <hr> <div class="row"> <div class="ad-container"> </div> </div> <div class = 'clearfix'></div> <div class="row"> <div class="col-md-6 col-xs-12"> <div><b>Người chia sẻ</b>: <a href="#">Nguyễn Quỳnh Mai </a></div> <div><b>Dung lượng</b>: | <b>Lượt tài</b>: 2 </div> <div><b>Loại file</b>: </div> <div><b>Nguồn</b> : Chưa rõ </div> <div style="font-size:12px;">(Tài liệu chưa được thẩm định)</div> </div> <div class="col-md-6 col-xs-12"> <div class="btn-preview download-file-btn" style="width:150px;background:#f26c4f;margin:3px;" data-lesson-id = "5cc2a2e4831f12da2f8b5f7d"> <a data-href="https://thuviengiaovien.com/lesson/download/id/5cc2a2e4831f12da2f8b5f7d" href= "javascript:void(0)" style="color:#fff;" rel="nofollow"> <i class="fa fa-download" aria-hidden="true" style="font-size:20px;"></i> Tải tài liệu </a> </div> <div><a href="#">Báo cáo sai sót </a></div> <div><a href="#">Đề suất chỉnh sửa , phân lại mục</a> </div> </div> </div> </div> </div> </div> <div class="u-face-cm lazy"> <div class="fb-like" data-href="https://thuviengiaovien.com/thiet-ke-web-696103.html" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" data-width="300"> </div> <div class="fb-comments" data-href="https://thuviengiaovien.com/thiet-ke-web-696103.html" data-width="100%" data-numposts="5" data-colorscheme="light"> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 pdr-b hidden-xs"> <div class="u-learn-what"> <div class="alert alert-success" role="alert"> <h3>Thư Viện Giáo viên có gì ?!</h3> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Thư viện tài liệu giáo viên đủ các bậc học </div> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Tải và chia sẻ tài liệu miễn phí , lưu trữ không giới hạn ... </div> <hr style="margin:3px 0px;"> <div><i class="fa fa-check" aria-hidden="true"></i> Cộng đồng chia sẻ kinh nghiệm dạy học ... </div> <hr style="margin:3px 0px;"> <br /> <center><a class="unica-log-acc" href="/register">Tham gia thư viện > </a></center> </div> </div> <div class="u-learn-what"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4649191202673214" data-ad-slot="2171434249" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div> </div> </div> </div> </div> <br /> </main> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <footer> <div id="footer2"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdl" style="padding-top:20px;"> <span class="logo-footer"> <a class="navbar-brand" href="/"><img src="/images/logo/logo-tv-gv.png" width="100%"></a> </span>  </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdm des-unica"> <h4>Về chúng tôi </h4> <ul> <li><a href="/gioi-thieu">Giới thiệu</a></li> <li><a href="/faq">Câu hỏi thường gặp</a></li> <li><a href="/dieu-khoan-dich-vu.html">Điều khoản dịch vụ</a></li> <li><a href="/blog">Blog chia sẻ </a></li> </ul> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr pdm des-unica"> <h4>Hoạt động</h4> <ul> <li><a href="/teacher">Đăng ký / Đăng nhập </a></li> <li><a href="#" target="_blank">Đăng ký hợp tác </a></li> </ul> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 pdr des-unica"> <h4>Liên kết hữu ích </h4> <ul> <li><a href="#">Dạy online </a></li> </ul> <span class="social-connect"> <p>Kết nối với </p> <ul> <li><a href="https://www.facebook.com/hoctaphay/" data-bg-color="#3B5998" style="background: rgb(59, 89, 152) !important;"><i class="fa fa-facebook"></i></a></li> <li><a href="# data-bg-color="#C22E2A" style="background: rgb(194, 46, 42) !important;"><i class="fa fa-youtube"></i></a></li> </ul> </span> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pdr facebook-box"> <div class="fb-page fb_iframe_widget" data-href="https://www.facebook.com/hoctaphay/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" fb-xfbml-state="rendered" fb-iframe-plugin-query="adapt_container_width=true&app_id=1639709859601244&container_width=137&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Funica.vn%2F&locale=vi_VN&sdk=joey&show_facepile=true&small_header=false"><span style="vertical-align: bottom; width: 180px; height: 230px;"></span></div> </div> </div> </div> </div> <div id="footer3"> <div class="container"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> <p>© Thư viện giáo viên - Chia sẻ phướng pháp, tài liệu dạy học trực tuyến </p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> -- </div> </div> </div> </div> </footer> <script type="text/javascript" src="/templates/default/new/js/jquery-3.2.1.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/bootstrap.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/slick.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/bootstrap.offcanvas.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/sidenav.min.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/amazonmenu.js?ver=201904261832"></script> <script type="text/javascript" src="/templates/default/new/js/sticky-sidebar.js?ver=201904261832"></script> <script type="text/javascript" src="/js/ViewerJS/viewerjs.js?ver=201904261832"></script> <script type="text/javascript"> $.fn.isOverflowed = function(){ var e = this[0]; return e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth; }; </script> <script type="text/javascript">  </script> <script> $(document).ready(function () { $(".remove-navibar").click(function () { $("#js-bootstrap-offcanvas").trigger("offcanvas.toggle"); }); }); jQuery(function () { amazonmenu.init({ menuid: 'mysidebarmenu' }) }) resizeWindow(); window.addEventListener('resize', resizeWindow); function resizeWindow() { $('.slider').slick({ responsive: [{ breakpoint: 2500, settings: "unslick" }, { breakpoint: 640, settings: { dots: true, infinite: true } } ] }); } $('.u-blog-slide').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, responsive: [{ breakpoint: 1025, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true } }, { breakpoint: 769, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-114571019-15', 'auto'); ga('send', 'pageview'); </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=292835638303077"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </html>

Hàng 1, cột 1	Hàng 1, cột 2
Hàng 2, cột 1	Hàng 2, cột 2