html và ứng dụng trong thiết kế website tin tức giải quần vợt wimbledon 2012

duyệt Web Google Chrome phiên bản tiếng Việt và chi tiết thiết kế Website tin tứcgiải quần vợt Wimbledon 2012, bằng cách vận dụng các thẻ cơ bản trong HTML.Nội dung của đồ án được trình

-

-NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ và tên sinh viên: NGUYỄN DUY VƯƠNG Số hiệu sinh viên: 09CĐ0639 Khoá:………….Khoa: Điện tử - Viễn thông Ngành: Điện tử - Viễn thông 1 Đầu đề đồ án: “HTML và ứng dụng trong thiết kế Website tin tức giải quần vợt Wimbledon 2012” 2 Các số liệu và dữ liệu ban đầu: ……… ……… …… ………

……….

… ……… ……….

3 Nội dung các phần thuyết minh và tính toán : ……… ….

………

…… ….

………

……… ….………

4 Các bản vẽ, đồ thị ( ghi rõ các loại và kích thước bản vẽ ): ……… ….

………

……….……….

5 Họ tên giảng viên hướng dẫn………

6 Ngày giao nhiệm vụ đồ án………

7 Ngày hoàn thành đồ án………

Ngày tháng năm

Sinh viên đã hoàn thành và nộp đồ án tốt nghiệp ngày tháng năm

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

-BẢN NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP Họ và tên sinh viên: Nguyễn Duy Vương Số hiệu sinh viên:09CD0639 Ngành: Điện tử - Viễn thông Khoá: Giảng viên hướng dẫn: ThS Nguyễn Quang Minh Cán bộ phản biện: ………

1.Nội dung thiết kế tốt nghiệp: “HTML và ứng dụng trong thiết kế Website tin tức giải quần vợt Wimbledon 2012” 2.Nhận xét của cán bộ phản biện:

Ngày tháng năm

Cán bộ phản biện

( Ký, ghi rõ họ và tên )

Ngôn ngữ đánh dấu siêu văn bản HTML là một phát minh vĩ đại của ngành khoahọc máy tính, từ khi HTML xuất hiện vào cuối thế kỷ XX, con người đã có thể dễdàng xuất bản, cập nhật, chia sẻ tin tức trên nền Internet Trong đồ án tốt nghiệpnày chúng tôi áp dụng HTML trong việc thiết kế website tin tức giải quần vợtWimbledon 2012

Sau một thời gian tìm tòi nghiên cứu và học hỏi, dưới sự hướng dẫn tận tình củaThạc Sỹ: Nguyễn Quang Minh em đã nghiên cứu và hoàn thành đề tài “ HTM vàứng dụng trong thiết kế Website tin tức giải quần vợt Wimbledon 2012”

Do kiến thức còn han chế nên đề tài chắc chắn không tránh khỏi thiếu sót,vì vậy emrất mong được sự góp ý nhắc nhở của thầy cô và của các bạn để giúp đề tài của emngày một hoàn thiện hơn

Em xin chân thành cảm ơn thày cô, Viện, đặc biệt là Thạc sỹ: Nguyễn Quang Minh

đã hết sức giúp đỡ và tạo điều kiện cho em hoàn thành tốt đề tài này

Con xin chân thành cảm ơn bố mẹ đã luôn ở bên và ủng hộ con trong thời gian họctập và nghiên cứu đồ án

Cuối cùng xin gởi lời cảm ơn đến bạn bè đã luôn giúp đỡ mình nhiệt tình trong quátrình học tập cũng như khi nghiên cứu đồ án tột nghiệp

Sinh viên thực hiện đề tài:Nguyễn Duy Vương

LỜI NÓI ĐẦU

DANH MỤC HÌNH 1

DANH SÁCH BẢNG BIỂU 3

BẢNG TRA CỨU TỪ VIẾT TẮT 4

TÓM TẮT ĐỒ ÁN 6

MỞ ĐẦU 7

CHƯƠNG 1 : NGÔN NGỮ SIÊU VĂN BẢN HTML 8

1.1 Khái niệm cơ bản về HTML 8

1.2 Thẻ HTML (HTML tag) 9

1.2.1 Thẻ HTML : 9

1.2.2 Phân loại thẻ : 9

1.2.3 Thẻ chứa (container tag): 9

1.2.4 Thẻ rỗng (empty tag) : 10

1.2.5 Thuộc tính của thẻ : 10

1.2.6 Cấu trúc của tài liệu HTML : 10

1.2.7 Phần đầu tập tin HTML (header) : 11

1.2.8 Phần thân body : 11

1.2.9 Màu sắc trong thiết kế trang Web : 12

1.3 Một số thẻ HTML cơ bản : 13

1.3.1 Phân loại thẻ định dạng : 13

1.3.2 Thẻ định dạng mức khối : 14

1.3.3 Thẻ định dạng mức văn bản hay trong dòng : 14

1.3.4 Phân đoạn văn bản : 14

1.3.5 Tạo đề mục : 15

1.3.6 Định dạng kiểu chữ : 16

1.3.7 Định dạng font chữ : 17

1.3.8 Đường kẻ ngang – Thẻ <HR> : 17

1.3.9 Trích dẫn : 18

1.3.11 Thẻ <div> và <span> : 19

1.3.12 Hình ảnh : 20

1.3.13 Âm thanh : 21

1.3.14 Đối tượng di chuyển : 21

1.3.15 Tạo liên kết (link) : 22

1.3.16 Các thẻ dùng thiết kế bảng : 23

1.3.17 Các thẻ tạo Frame : 24

1.3.18 Các thẻ dùng tạo Form : 25

1.3.19 Chú thích : 26

1.3.20 Các ký tự đặc biệt : 26

1.4 Kết luận chương 27

CHƯƠNG 2 : SỬ DỤNG GOOGLE CHROME PHIÊN BẢN TIẾNG VIỆT 28

2.1 Giới thiệu về Google Chrome 28

2.2 Cài đặt Google Chrome và khởi động 29

2.3 Cách dùng các tab 30

2.3.1 Trang “Tab mới” : 31

2.3.2 Ghim thẻ tab vào một thanh tab : 31

2.3.3 Mở lại những tab đã đóng gần đây : 32

2.3.4 Mở lại toàn bộ các tab trong phiên Chrome trước : 32

2.3.5 Tách một cửa tab sang sổ mới : 33

2.3.6 Xóa các hình thu nhỏ cụ thể khỏi trang : 34

2.4 Cách dùng thanh địa chỉ 35

2.4.1 đánh dấu một trang web : 35

2.4.2 Tìm kiếm web : 35

2.4.3 Truy cập vào các địa chỉ web : 35

2.4.4 Tìm kiếm dấu trang và lịch sử duyêt web : 35

2.4.5 Thêm nút “Trang chủ” vào thanh công cụ : 36

2.4.6 Chức năng nút “Điều khiển trang hiện tại” : 37

2.4.7 Chức năng nút “Tùy chỉnh và điều khiển Google Chrome” : 38

2.5 Một số công cụ và tiện ích của Google Chrome 40

2.5.3 Các ứng dụng web : 45

2.5.4 Thiết lập thông tin cá nhân và đồng bộ : 46

2.6 Kết Luận Chương 48

CHƯƠNG 3 : PHÂN TÍCH THIẾT KẾ WEBSITE TIN TỨC CHO GIẢI ĐẤU TENNIS WIMBLEDON 2012 49

3.1: Chi tiết thiết kế Website tin tức giải Wimbledon 2012 49

3.2 Kết Luận chương: 77

KẾT LUẬN 78

TÀI LIỆU THAM KHẢO 79

Hình 2.1 Biểu tượng Google trên màn hình nền 29

Hình 2.2 Màn hình ban đầu của Google Chrome 29

Hình 2.3 Các tab của Google Chrome 30

Hình 2.4 Ghim một thẻ tab vào thanh tab 31

Hình 2.5 Mở lại tab đã đóng 32

Hình 2.6 Mở lại toàn bộ tab được mở khi đóng Google Chrome 33

Hình 2.7 Tách một tab sang cửa sổ mới 33

Hình 2.8 Thêm nút “Trang chủ” vào thanh công cụ 36

Hình 2.9 Nút điều khiển trang hiện tại 37

Hình 2.10 Nút tùy chỉnh và điều khiển Google Chrome 38

Hình 2.11 Google Chrome Properties 41

Hình 2.12 Cửa sổ ẩn danh 41

Hình 2.13 Tìm kiếm thông qua thanh địa chỉ 42

Hình 2.14 Tính toán từ thanh địa chỉ 43

Hình 2.15 Thay đổi công cụ tìm kiếm trong thanh địa chỉ 44

Hình 2.16 Dán và truy cập một URL nằm ngoài Google Chrome 45

Hình 2.17 Tìm kiếm nhanh văn bản được chọn trên Google Chrome 45

Hình 2.18 Các ứng dụng web 46

Hình 2.19 Đăng nhập tài khoản 47

Hình 2.20 Dữ liệu đồng bộ 47

Hình 3.1: Web page 1 51

Hình 3.2: Web page 2 53

Hình 3.3: Web page 3 55

Hình 3.4: Web page 4 (siêu liên kết giữa Web page 2 và 3) 57

Hình 3.5 Web page 5 60

Hình 3.6: Web page 6 63

Hình 3.7: Web page 7 66

Hình 3.9: Web page 9 70

Hình 3.10: Web page 10 71

Hình 3.11: Web page 11 72

Hình 3.12: Web page 12 (Siêu liên kết giữa các Web page từ 5-11) 74

Hình 3.13: Web page 13 ( Siêu liên kết giữa tất cả các Web page đã có ở trên) .76

Bảng 1.1 Thẻ <body> và một số thuộc tính cơ bản 12 Bảng 1.2: Một số màu cơ bản 13 Bảng 1.3: Các ký tự đặc biệt 26

MỞ ĐẦU

***

duyệt Web Google Chrome phiên bản tiếng Việt và chi tiết thiết kế Website tin tứcgiải quần vợt Wimbledon 2012, bằng cách vận dụng các thẻ cơ bản trong HTML.Nội dung của đồ án được trình bày trong các chương như sau:

 Chương 1: Ngôn ngữ siêu văn bản HTML

Giới thiệu về ngôn ngữ siêu văn bản HTML, vai trò của nó trong việc xâydựng các website Các thẻ (tag) và một số thẻ (tag) HTML cơ bản

 Chương 2: Sử dụng Google Chrome phiên bản tiếng Việt

Giới thiệu về Google Chrome Cách cài đặt, sử dụng các tab, thanh địa chỉcùng một số công cụ và tiện ích của Google Chrome

 Chương 3: Phân tích thiết kế website tin tức giải quần vợt Wimbledon 2012

Là một website tự thiết kế sử dụng ngôn ngữ siêu văn bản HTML, nhằm mụcđích cung cấp thông tin về giải quần vợt Wimbledon 2012

CHƯƠNG 1 : Ngôn ngữ siêu văn bản HTML

1.1 Khái niệm cơ bản về HTML.

HTML là ngôn ngữ chính để xây dựng các trang website, nó mô tả cách thức 1trang web hiển thị như thế nào trong 1 trình duyệt HTML là 1 ngôn ngữ mô tả tàiliệu, được phát triểm từ ngôn ngữ mô tả tài liệu tổng quát SGML (StandardGeneralized Markup Language) HTML ko phải là 1 ngôn ngữ lập trình,nó cungcấp các chỉ thị định dạng để phụ vụ cho việc trình bày văn bản và các đối tượngkhác như video,hình ảnh v.v

HTML (Hypertext Markup Language) là ngôn ngữ định dạng siêu liên kết,chophép định dạng văn bản, bổ sung hình ảnh,video,cũng như lưu tất cả vào trong 1 tậptin dưới dạng văn bản hay dưới dạng ACSII Các thuật ngữ cơ bản về ngôn ngữHTML như sau :

Markup: HTML là ngôn ngữ của các thẻ đánh dấu - Tag Các thẻ này xác địnhcách thức trình bày đoạn văn bản tương ứng trên màn hình

Language : HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuynhiên đơn giản hơn.Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trìnhdiễn văn bản Các từ khoá có ý nghĩa xác định được cộng đồng Internet thừa nhận

và sử dụng Ví dụ b = bold, ul = unordered list,

Text : HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nềntảng là một văn bản.Các thành phần như hình ảnh , âm thanh, hoạt hình đều phải

"cắm neo" vào một đoạn văn nào đó

Hyper : HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trênInternet Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng , cóthể đọc mà không cần biết đến văn bản đó nằm ở đâu, xây dựng phức tạp như thếnào Sự phát triểm có tính bùng nổ của Internet trong thời gian vừa qua một phầnlớn là nhờ vào WWW

Hyperlink : dùng để liên kết các tài liệu này đến tài liệu khác hoặc liên kết đốivới bất kì đối tượng nào trên Web như văn bản ,hình ảnh, âm thanh Chỉ cần clickchuột vào siêu liên kết,tài liệu được liên kết sẽ được hiển thị

1.2 Thẻ HTML (HTML tag)

1.2.1 Thẻ HTML :

Tập tin HTML khác với các tập tin văn bản khác là ở chỗ chúng chứa các mãđặc biệt, đó là thẻ HTML (HTML tag) Các thẻ này làm nhiệm vụ quy định cáchhiển thị cho nội dung trong trang web

Thẻ HTML không phân biệt dạng chữ hoa – thường Dạng tổng quát của mộtthẻ HTML thường gồm ba phần:

<tên-thẻ> nội dung </tên-thẻ>

Thẻ HTML thường được phân thành hai loại:

 Thẻ chứa (container tag)

 Thẻ rỗng (empty tag)

1.2.3 Thẻ chứa (container tag):

Mỗi thẻ chứa gồm đầy đủ cặp thẻ đóng và thẻ mở, bao bọc khối văn bản cầnđịnh dạng

Ví dụ :

<B> Viện Điện Tử Viễn Thông- Trường Đại Học Bách Khoa Hà Nội </B>

Ví dụ này sử dụng thẻ <B> là thẻ đánh dấu chỉ định đoạn văn bản được inđậm.Trong đó <B> là thẻ mở, chỉ định vị trí bắt đầu đoạn văn bản in đậm, còn

</B> là thẻ đóng chỉ định nơi kết thúc của văn bản được in đậm Như vậy, câu ví

dụ này khi hiển thị trên trang web sẽ là:

Viện Điện Tử Viễn Thông - Trường Đại Học Bách Khoa Hà Nội

1.2.4 Thẻ rỗng (empty tag) :

Bên cạnh những thẻ có cả phần thẻ mở và thẻ đóng là những thẻ chỉ gồm duynhất phần thẻ mở, không có thẻ đóng Các thẻ này được gọi là thẻ rỗng Do nhiệm

vụ của thẻ đóng là thông báo cho trình duyệt Web vị trí kết thúc hiệu lực của thẻ,nhưng trong một số trường hợp, trình duyệt có thể tự nhận biết điều này,nên thẻđóng không còn cần thiết nữa Ví dụ thẻ <HR> là thẻ có nhiệm vụ vẽ một đườngngang theo chiều rộng của tài liệu Như thế, thẻ không tác dụng lên khối văn bản, vìvậy cũng không cần phải có thẻ đóng cho biết vị trí kết thúc hiệu lực của thẻ

1.2.5 Thuộc tính của thẻ :

Khi sử dụng thẻ HTML, trong phần thẻ mở ta có thể sử dụng các thuộc tính thẻ

để bổ sung thêm hiệu quả định dạng

<tên_thẻ thuộc_tính_1=giá_trị thuộc_tính_2=giá_trị … >

Các thuộc tính ngăn cách nhau bởi khoảng trắng Đồng thời, trị của thuộc tính phảinằm trong cặp nháy kép hay cặp nháy đơn

Ví dụ:

<font color="BLUE" size="5">Viện Điện Tử Viễn Thông</font>

Ví dụ trên sử dụng thẻ <font> kèm theo hai thuộc tính color và size nhằm định dạngfont chữ của chuỗi văn bản Viện Điện Tử Viễn Thông có màu xanh và kích thước 5

1.2.6 Cấu trúc của tài liệu HTML :

Tài liệu HTML bắt đầu bằng thẻ mở <HTML> và kết thúc bằng thẻ đóng

Phần đầu chứa thông tin về tài liệu, bắt đầu với thẻ <head> và kết thúc bởi thẻđóng </head>.

Trong phần này, ta khai báo tiêu đề của trang bằng thẻ <title> Tiêu đề khôngliên quan gì đến tên tập tin.Ta đặt tiêu đề cho trang web nhằm thể hiện chủ đề củatrang Khi hiển thị trong trình duyệt, phần tiêu đề đã khai báo sẽ xuất hiện trênthanh tiêu đề của cửa sổ trình duyệt

Phần thân là phần chủ yếu của trang web, chứa nội dung hiển thị trong trình

duyệt gồm cả văn bản và hình ảnh Phần này được bao bọc bởi cặp thẻ <body>và </

body> Nội dung giữa hai thẻ mở và đóng của thẻ <body> là những gì ta muốn hiển

thị trong trình duyệt

Thẻ <body> gồm một số thuộc tính như sau:

Background Chỉ định một ảnh làm ảnh nền (background) cho văn bản Giá trị

của thuộc tính này là đường dẫn đến tập tin ảnh

Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì ảnh nền này

sẽ được lặp nhiều lần để lấp đầy cửa sổ trình duyệt

Bgcolor

Đặt màu nền cho trang khi hiển thị Nếu cả hai thuộc tính

BACKGROUND và BGCOLOR cùng được chỉ định thì trình

duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên

Alink

Vlink

Chỉ định màu sắc cho các siêu liên kết trong văn bản:

alink (active link) là liên kết đang được kích hoạt

vlink (visited link) là liên kết đã được kích hoạt

link link là liên kết chưa được kích hoạt

Bảng 1.1 Thẻ <body> và một số thuộc tính cơ bản

Như vậy, ta có phần khung định dạng một tài liệu HTML như sau:

1.2.9 Màu sắc trong thiết kế trang Web :

Trong thiết kế Web, màu sắc hiển thị được tổng hợp từ ba thành phần màuchính:

- Đỏ (Red)

- Xanh lá cây (Green)

- Xanh biển (Blue)

Mỗi màu có 256 giá trị, được biểu diễn từ 0 – FF (0 - 255) Trong đó trị 0 thểhiện mức độ màu thấp nhất, còn FF thể hiện mức độ màu cao nhất Như vậy kết hợpgiá trị của ba màu, ta nhận được một màu sắc cụ thể, được biểu diễn dưới dạng hexavới định dạng như sau: #RRGGBB Trong đó:

- RR - là giá trị màu Đỏ (0 – FF)

- GG - là giá trị màu Xanh lá cây (0 – FF)

- BB - là giá trị màu Xanh nước biển (0 – FF)

Trong HTML, màu sắc thường được xác định qua các thuộc tính bgcolor hay

color Giá trị của các thuộc tính này có thể là:

- Giá trị RGB: #RRGGBB

- Tên tiếng Anh của màu

Tên tiếng Anh chỉ có thể biểu diễn 16 màu, ít hơn nhiều so với số lượng màubiểu diễn bằng giá trị RGB

Sau đây là giá trị của một số màu cơ bản:

Đây là các phần tử xuất hiện ở phần thân văn bản Các phần tử mức khối có tác

dụng thể hiện cấu trúc của tài liệu Khi các phần tử mức khối bắt đầu ở một dòngmới, ta không cần ghi thẻ kết thúc

Một số phần tử mức khối thông thường:

 Tiêu đề (H1 đến H6)

 Đoạn văn bản (P)

 Phần tử trong danh sách (LI)

1.3.3 Thẻ định dạng mức văn bản hay trong dòng :

Sau khi đã phân tài liệu thành những đoạn văn bản, định dạng các đề mục của tài liệu Ta đã có một tài liệu tương đối hoàn chỉnh về mặt cấu trúc Tuy nhiên, để cho văn bản HTML khi hiển thị trên trình duyệt bớt đơn điệu, ta sử dụng thêm một

số thẻ định dạng kí tự như in đậm, in nghiêng, chỉ định font, kích thước chữ trong tài liệu,…Các thẻ này được gọi là thẻ định dạng mức văn bản hay trong dòng

Nếu ta không sử dụng các thẻ HTML để bắt đầu một dòng mới hoặc một đoạnmới,thì khi hiển thị trên trình duyệt, văn bản sẽ xuất hiện thành một khối duy nhất,

dù ta có nhấn Enter để xuống dòng trong lúc soạn thảo tập tin HTML

o Thẻ <br>:

Thẻ <br> được dùng để khai báo một ngắt dòng, chèn một ký tự xuống dòng.Như thế, nội dung nằm phía sau thẻ này sẽ bắt đầu ở lề trái của màn hình và trêndòng mới Thẻ <br> là thẻ rỗng nên không cần thẻ đóng đi kèm Tuy nhiên hiệnnay chuẩn XHTML khá thông dụng trong các trình soạn thảo HTML mới nên có thểdùng thẻ <br/> để thích hợp hơn

Để canh lề cho đoạn văn bản, ta sử dụng thuộc tính align với các giá trị

center/right/left.

Ví dụ :

<p align="left">

Thề xuân đâu có vuông tròn<br>

Tại người hay tại nước non đất trời<br>

Buồng xuân chất ngất tình tôi<br>

Niềm chưa cạn tỏ người thời biệt li

<H4> Tieu de 4 </H4>

<H5> Tieu de 5 </H5>

<H6> Tieu de 6</H6>

1.3.6:Định dạng kiểu chữ :

Sau đây là các thẻ qui định tính chất in nghiêng, in đậm, gạch dưới… của văn

bản khi hiển thị trên trình duyệt

<b> nội dung in đậm </b>

<strong> nội dung in đậm </strong>

 In nghiêng

<i> nội dung in nghiêng </i>

<em> nội dung in nghiêng </em>

<u> nội dung được gạch dưới </u>

<s> nội dung bị gạch ngang </s>

<strike> nội dung bị gạch ngang </strike>

<font face="tên-font" size="kích-thước" color="màu-chữ"> nội dung </font>

Ta có thể định dạng font chữ cho toàn bộ tài liệu bằng cách đặt thẻ <font>

trong thẻ <body> và bao bọc hết những nội dung của tài liệu Ngoài ra, thẻ <font>còn có thể áp dụng cho từng từ, từng khối văn bản cụ thể trong trang.

Ý nghĩa các thuộc tính:

 Thuộc tính face chỉ định font chữ hiển thị, giá trị của thuộc tính này là tênfont chữ muốn định dạng

<font face="arial"> Đây là font arial </font>

<font face="verdana", "arial">

Nếu không có font Verdana thì hiển thị font Arial

</font>

 Thuộc tính size chỉ định kích thước của kí tự Giá trị của thuộc tính có thể là:

- Trị số nguyên chỉ kích thước chính xác

- Trị tương đối (+/- giá trị số) chỉ mức gia giảm kích thước

<font size=4> Kích thước là 4 </font>

<font size=+2> Tăng kích thước thêm 2 đơn vị </font>

 Thuộc tính color xác định màu của kí tự trong đoạn văn bản Thuộc tính này

có thể nhận trị hexa RGB hay các tên màu chuẩn

<font color="#FF0000"> Khối VB màu đỏ </font>

<font color="green"> Khối VB màu xanh lá </font>

1.3.8 Đường kẻ ngang – Thẻ <HR> :

Thẻ <hr> cho phép tạo một đường kẻ ngang trên trang Thẻ <hr> là thẻ rỗng,nên không có thẻ đóng đi kèm Sau đây là một số thuộc tính của thẻ <hr>:

 align: canh chỉnh vị trí đường kẻ,nhận các trị sau: left,right,center.

 width: xác định chiều rộng của đường kẻ, là số điểm px hay trị phần trăm %

(VD: 200px, 30%) Trị mặc định của thuộc tính là 100%, nghĩa là toàn bộ bề ngangcủa tài liệu

 size: chỉ định bề dày của đường kẻ và được xác định bằng số điểm px.

 noshade: không có bóng mờ.

Ví dụ :

<hr>

<hr size="15" align="left" width="100" >

<hr noshade size="5" align="center" width="50%" >

<blockquote> nội dung trích dẫn </blockquote>

o Thẻ <cite> định dạng in nghiêng khối văn bản trích dẫn

<cite> nội dung trích dẫn </cite>

Trời cao, mây bạc,trăng tròn<br>

Dế than hưu quạnh,tre buồn nỉ non<br>

Diều ai gọi gió véo von<br>

Cành xoan đùa ánh trăng suông dịu dàng

Bây giờ chỉ thấy lỡ làng

Nữa vùi trong cát nữa mang trong mình

Sắc xanh mai một vì tình

Ném đi văng lại trái tim héo mòn

</pre>

1.3.11 Thẻ <div> và <span> :

Hầu hết các thẻ HTML đều được xây dựng với một mục đích cụ thể, ví dụ, thẻ

<p> để tạo đoạn văn bản, thẻ <h1> để định dạng tiêu đề cấp 1,…Tuy nhiên, thẻ

<div> và <span> thì không mang một ý nghĩa cụ thể nào cả,mà mục đích chính củachúng là phân chia nội dung trang Web thành những khối thông tin logic và kết hợpvới định dạng CSS – (Cascading Style Sheets)

 Thẻ <div>, có phần gần giống thẻ <p>, là phần tử định dạng mức khối,nhưng không chèn thêm dòng trống phía trước và sau đoạn văn bản

<div align="left/right/center"

style="giá-trị" class="giá-trị" id="giá-trị" >

nội dung trong khối div </div>

 Thẻ <span> là phần tử định dạng trong dòng

<span style="giá-trị" class="giá-trị" id="giá-trị" >

nội dung trong khối span </ span >

Với hai thẻ này, các thuộc tính style,class và id thường được dùng trong định dạngCSS

style="color:blue"> phần tử span định dạng màu xanh </span>

</div>

</body></HTML>

1.3.12 Hình ảnh :

Để chèn hình ảnh vào trang web, ta sử dụng thẻ <img>:

<img src="đường-dẫn-đến-file-ảnh" alt="văn-bản"

width="trị-số" height="trị-số" border="trị-số"

align="left/right/center" />

Các thuộc tính của thẻ <img> :

 src : xác định đường dẫn đến file ảnh, có thể chỉ định đường dẫn tuyệt

đối đến ảnh hay dùng đường dẫn tương đối

 alt: là phần văn bản xuất hiện trong trường hợp không hiển thị được

hình ảnh Văn bản này cũng được hiển thị ở dạng tooltip khi ta đưa chuột

đến hình

 width: xác định chiều rộng ảnh.

 height: xác định chiều cao ảnh.

 border: xác định độ dày đường viền ảnh.

 align: canh chỉnh hình ảnh theo lề trái, lề phải hay canh giữa

Ví dụ :

<img src= /images/logo.gif

alt="logo trường ĐHBK." width = "107" heig = "104" />

Thêm chữ xung quanh hình ảnh :

Cú pháp: <IMG SRC=“tên file” align=“giá trị”> Nội dung

 Giá trị Top: ví trí văn bản nằm ở phái trên hình ảnh

 middle: vị trí văn bản nằm ở giữa hình ảnh

 bottom: vị trí văn bản nằm ở dưới hình ảnh

Thẻ <bgsound> cung cấp khả năng chèn âm thanh (đoạn nhạc) vào trang Web.

Âm thanh này sẽ khởi động mỗi khi người dùng mở trang Web

<bgsound src="file-âm-thanh" loop=value />

Các thuộc tính:

 src: xác định đường dẫn đến file âm thanh (.mp3, mdi, wma,…)

 loop: số lần lặp lại file âm thanh

- loop = -1 : lặp vô hạn lần

- loop = n : lặp n lần rồi tự động tắt

Ví dụ :

<bgsound src=" /sound/song1.mp3" loop=-1 />

1.3.14 Đối tượng di chuyển :

Để tạo đối tượng chạy tự động trên trang web, ta dùng thẻ <marquee>:

<marquee> chuỗi kí tự hay đối tượng </marquee>

Các thuộc tính:

 direction=up/down/left/right: điều khiển hướng chạy.

 behavior=scroll/slide/alternate: kiểu chạy

 bgcolor=giá-trị-màu: màu nền cho chữ/đối tượng

Ở ví dụ này, hình flower.gif sẽ chạy từ trái sang phải

<marquee direction="left" behavior="scroll"

bgcolor="#FFFF00" >

Chào mừng bạn đến trang web giới thiệu về Wimbledon 2012.

</marquee>

Trong ví dụ Trên, dòng chữ "Chào mừng bạn đến trang web giới thiệu về

Wimbledon 2012" sẽ chạy từ phải sang trái màn hình trên một nền màu vàng.

1.3.15 Tạo liên kết (link) :

Liên kết là đặc trưng WWW, cho phép người dùng chuyển từ mục này sangmục khác, trong cùng một trang hoặc chuyển sang một trang Web này sang mộttrang Web khác

Liên kết trong cùng một trang Web:

Cho phép liên kết đến các mục bên trong một trang Web

 Các bước thực hiện

 Tạo một điểm neo (bookmark)

 Cú pháp: <A name=“tên điểm neo cần tạo”>nội dung</A>

 Tạo liên kết đến điểm neo

 Cú pháp: <A href=“#tên điểm neo cần liên kết đến”</A>

 Dấu # báo cho trình duyệt biết liên kết này là nội bộ

Tạo liên kết đến các trang Web khác :

Cú pháp <A href=“URL”>Nội dung</A>

Ví dụ : <a herf=http://www.fet.hut.edu.vn>ĐHBK</A>

Thuộc tính:

 target=“giá trị”: mở liên kết ở vị trí nào phụ thuộc giá trị

 blank: nạp liên kết vào một cửa sổ trống mới

 parent: nạp liên kết vào cửa sổ cha gần nhất của trang Web hiện thời

 self: nạp liên kết vào cùng cửa sổ với trang Web hiện hành

 top: nạp liên kết vào cửa sổ cao nhất

1.3.16 Các thẻ dùng thiết kế bảng :

Tạo mới một bảng

Sử dụng thẻ : <Table ></Table>

Thuộc tính:

 Bgcolor: định màu nền cho bảng

 Border: định độ dày, mảnh của đường viền

 Bordercolor: định màu cho đương viền

 Bordercolordark: định màu sậm cho phần hắt bóng của đường viền

 Cellpadding: định khoảng cách giữa nội dung và đường viền

 Cellspacing: định khoảng cách giữa các ô

 Frame: hiển thị đường viền ngoài

 Height: định chiều cao bảng

 Width: định chiều rộng bảng

 Rules: hiển thị đường viền trong

Tạo mới một hàng trong bảng :

Sử dụng thẻ : <TR>Nội dung</TR>

Thuộc tính:

 Align/valigh: canh chỉnh nội dung hàng theo phương ngang/dọc

 Bgcolor: thay đổi màu nền của bảng

Tạo mới một đề nục trong bảng :

Sử dụng thẻ : <TH></TH>,<TD></TD>

Thuộc tính:

 Align/valigh: canh chỉnh nội dung hàng theo phương ngang/dọc

 Bgcolor: thay đổi màu nền của ô

 Colspan: mở rộng ô qua nhiều cột

 Rowspan: kéo dài ô xuống nhiều hàng

 Nowrap: giữ nội dung ô nằm trên một dòng

 Width, height: định chiều rộng, cao cho ô

Tạo khung viền cho bảng :

Sử dụng thẻ : <Table border=“n”>

Thay đổi màu khung :

Sử dụng thẻ : <Table bordercolor=“màu”>

Thiết lập độ rộng cột :

Thiết lập tiêu đề cho bảng : Sử dụng thẻ : <caption>Nội dung</caption>

1.3.17 Các thẻ tạo Frame :

Khung (Frame) là thành phần cơ bản của Web, một trang Web có thể được chiathành nhiều khung, mỗi khung sẽ chứa một trang Web riêng tạo Frame có dạnghàng :

<Frameset rows=“a,*,b”>

<frame name=“tên frame” src=“tên tệp tin sẽ hiển thị”>

<frame name=“tên frame” src=“tên tệp tin sẽ hiển thị”>

</Frameset>

Trong đó :

 a : chiều cao frame đầu tiên

 *: chiều cao của frame thứ 2 là khoảng trống còn lại

 b: chiều cao của frame thứ 3

Tạo Frame có dạng cột :

<Frameset cols=“a,*,b”>

<frame name=“tên frame” src=“tên tệp tin sẽ hiển thị”>

<frame name=“tên frame” src=“tên tệp tin sẽ hiển thị”>

</Frameset>

Trong đó:

 Scorlling = “yes/no”: ẩn/hiện thanh cuộn.

 Framebode = “yes/no”: ẩn/hiện viền khung.

 Border = “n”: chỉnh độ dày/mỏng của viền khung.

 Noresize : không cho thay đổi kích thước của khung

1.3.18 Các thẻ dùng tạo Form :

Form là thành phần giao tiếp cơ bản giữa người duyệt Web với người tạo Web

Dữ liệu được nhập vào Form thông qua các hộp điều khiển

 “value” là dữ liệu đầu tiên hiển thị trong Textbox và được gửi đến máy chủkhi người duyệt không gõ thông tin gì, size định kích thước của Textbox,maxlength giới hạn số kí tự nhập vào Textbox.

Tạo Textbox với vùng văn bản chứa nhiều dòng :

<textarea name = “name” rows = “n”, cols = “m” wrap><textarea>

Trong đó :

 “name” : chuỗi kí tự nhận diện dữ liệu nhập vào,

 n : chiều cao của vùng văn bản tính bằng dòng (mặc định = 4),

 m : chiều rộng của vùng văn bản tính bằng kí tự (mặc định = 40)

Tạo nút Radio button:

<input type = “radio name = “name” value = “data” checked>

Tạo ô chọn (checkbox) :khác với Radio, checkbox cho phép chọn nhiều núttrong một nhóm :

<input type = “checkbox” name = “set” value = “value” checked>

Tạo nút Push button (nút nhấn) :

<input type = “button” value = “nhãn”>

Để tạo nút nhấn khi người dùng nhấn vào, dữ liệu của các điều khiển khác đềuđược đặt giá trị mặc định lúc khởi tạo, có thể chỉ định thuộc tính type =”reset” trongtag <input> Tạo nút nhấn đề kết thục việc nhập dữ liệu của một Form, ta chỉ địnhthuộc tính type = “submit” trong thẻ <input>

&quot; To be or not to be? &quot;

Thit is the hard question

</body>

Ký tự & &amp; <p> William &amp; Graham has gone to the fair

</p>

Bảng 1.3: Các ký tự đặc biệt

1.4 Kết luận chương

Chương 1 đưa ra khái niệm cơ bản về ngôn ngữ siêu văn bản HTML, thẻ (tag)HTML và một số thẻ(tag) cơ bản HTML ko phải là 1 ngôn ngữ lập trình, nó cungcấp các chỉ thị định dạng để phụ vụ cho việc trình bày văn bản và các đối tượngkhác như video, hình ảnh… Qua đó cung cấp cho chúng ta cái nhìn tổng quan vềHTML, vai trò, chức năng của nó trong việc xây dựng các trang website

HTML là một công cụ cực kỳ hữu ích cho ta trong việc thiết kế Website

HTML hỗ trợ các phần tử mới để khai báo cấu trúc Website như: Header, footer,…

do vậy giúp cho nhà thiết kế hay người lập trình ngay lập tức hiểu được cấu trúccủa Website

HTML dễ thiết kế và có nhiều kiểu không theo một kiểu mặc định nào

Trình duyệt của HTML nhanh vì nó không cần đến cơ sở dữ liệu

CHƯƠNG 2 : Sử dụng Google Chrome phiên bản

tiếng Việt

2.1 giới thiệu về Google Chrome

Google Chrome là một trình duyệt web khởi chạy và tải trang web nhanhchóng Google Chrome được tối ưu chạy các trang web tương tác, các ứng dụngweb và JavaScript Google Chrome được thiết kế để đạt được hiệu quả và tính dễ sửdụng, tìm kiếm và điều hướng đến các trang web từ cùng một hộp ở thanh địa chỉ,sắp xếp và tổ chức các tab đa dạng Việc truy cập các trang web ưa thích chỉ cầnmột cú nhấp chuột từ thu nhỏ của các trang web được truy cập nhiều nhất trong các

“Tab mới”

Google Chrome là một trình duyệt Web miễn phí, được phát triển bởi Google.

Dự án mã nguồn mở đứng sau Google Chrome được biết với tên gọi Chromium

Phiên bản beta chạy trên Microsoft Windows được phát hành ngày 2 tháng

9 năm 2008 với 43 ngôn ngữ.

Phiên bản ổn định chính thức là 1.0.154.36 Trình duyệt này đã trở thành mộttrong ba trình duyệt thông dụng trên toàn cầu, cùng với Firefox và Internet

Explorer Phiên bản Chrome cho hệ điều hành Mac OS X và Linux được phát hành vào tháng 6 năm 2009.

So với Microsoft Internet Explorer thì Google Chrome chạy nhanh hơn nhiều,giao diện mới lạ và dễ sử dụng, hơn nữa nó chạy ổn định và miễn phí Phần nhiềucác bản Microsoft Windows cài trên các máy ở Việt Nam là bản không có bảnquyền, nên Internet Explorer chạy rất chậm, hay bị trục trặc, hay bị treo máy Vớinhững ưu điểm đó chúng ta nên lựa chọn trình duyệt cho máy tính của mình làGoogle Chrome

Sau một thời gian tìm hiểu về Google Chrome và hướng dẫn sử dụng GoogleChrome, chúng tôi thấy các tài liệu liên quan đến vấn đề này khá ít và rời rạc Vìvậy chúng tôi đã tìm tòi và tổng hợp các tài liệu và kiến thức vốn có để đưa ra mộttài liệu hướng dẫn chi tiết về các sử dụng Google Chrome.

2.2 Cài đặt Google Chrome và khởi động

Để tải về trình duyệt mới nhất Google Chrome 20.0.1132.57 chúng ta vào trangweb http://www.google.com/chrome , xuất hiện màn hình chính của GoogleChrome, nháy vào nút “Tải xuống Google Chrome”, ta sẽ tải về máy tệpChromeSetup.exe dung lượng 722 KB Sau đó chạy tệp này thì Google Chrome sẽ

tự động được cài đặt và chiếm khoảng 70 MB đĩa cứng, biểu tượng của GoogleChrome xuất hiện trên màn hình nền như sau :

Hình 2.1 Biểu tượng Google trên màn hình nền

Nháy vào biểu tượng Google Chrome thì Google Chrome sẽ khởi chạy Màn hình ban đầu của Google Chrome có dạng :

Hình 2.2 Màn hình ban đầu của Google Chrome

Google Chrome sử dụng trong trạng thái không hiển thị toàn màn hình, trìnhduyệt loại bỏ toàn bộ thanh thực đơn của trình duyệt thông thường vào hai nút phíabên phải thanh địa chỉ Google Chrome có hệ thống tab được đặt ở bên trên thanhđịa chỉ chứ không phải ở bên dưới như truyền thống Cách thiết lập này sẽ giúpngười dùng “cảm giác” rõ hơn về thanh địa chỉ đi liền với website, chứ không phảimột thành phần tách biệt Ngoài ra, tên miền chính của trang web đang đọc cũngđược làm nổi rõ hơn bằng cách in đậm hơn.

Từ thanh địa chỉ có thể tiến hành tìm kiếm, bộ máy tìm kiếm mặc định củaChrome tất nhiên là Google, nhưng có thể thay đổi nếu muốn Trong trang chủ mặcđịnh các trang web yêu thích nhất được “gom” vào một chỗ cùng với ảnh nhỏ xemtrước truy cập nhanh, trình duyệt sẽ dựa vào tần suất viếng thăm để tự động đưawebsite vào đây Tại dòng cuối cửa sổ, ta còn có thể chỉnh sửa lịch sử web (history)của trình duyệt, truy nhập vào tab đã đóng gần đây

2.3 Cách dùng các tab

Việc điều chỉnh quá trình duyệt web nằm ở ba dòng đầu của Google Chrome.Khi bắt đầu khởi động Google Chrome ta có “Tab mới”, gõ địa chỉ để mở một trangweb thì “Tab mới” được thay bằng tên trang web vừa gõ Để tạo một “Tab mới” tanháy vào nút dấu cộng ở cuối dòng đầu tiên của trình duyệt, tại tab này ta lại mởđược một trang web khác Một tab cũng được sinh ra khi ta nháy vào một liên kếtcủa một bài mà tác giả đặt thuộc tính mở trong cửa sổ mới đối với liên kết

Để di chuyển giữa các tab, ta nháy vào tiêu đề của tab Để đóng một tab, nháyvào nút gạch chéo ở cuối tiêu đề tab

Hình 2.3 Các tab của Google Chrome

2.3.1 Trang “Tab mới” :

Khi chúng ta mở “Tab mới”, Google Chrome sẽ tải trước tab này với các mụcsau:

 Các trang web được truy cập nhiều nhất Các hình vuông ảnh đại diện (cònđược gọi là hình thu vào biểu tượng bên cạnh tab cuối cùng ở phía trêncùng trình duyệt của chúng nhỏ) của trang web ta truy cập nhiều nhất đượchiển thị ở trên cùng Nhấp vào hình thu nhỏ để truy cập trang web Ta cũng

có thể chọn để ấn các hình thu nhỏ này khỏi chế độ xem

 Các cửa sổ và tab đã đóng gần đây Các tab và của sổ chúng ta đã đóng gầnđây được liệt kê trong phần “Đã đóng gần đây” Nhấp vào liên kết để khôiphục tab hoặc cửa sổ đã đóng Để mở trang tab mới, nhấp ta

2.3.2 Ghim thẻ tab vào một thanh tab :

Có những website mà có thể chúng ta luôn truy cập mỗi khi mở Google

Chrome Thay vì cứ phải gõ địa chỉ website nhiều lần, hãy ghim những website nàyvào thanh tab một cách cố định, làm như vậy chúng sẽ mở tự động mỗi lần mởGoogle Chrome Để làm điều này, vào website mong muốn trên một tab, kích chuộtphải vào tab đó và chọn “Ghim tab” (Pin tab) từ thực đơn hiện ra Thẻ tab biếnthành biểu tượng ưa thích của website và nhảy về phía ngoài cùng bên trái thanhtab

Hình 2.4 Ghim một thẻ tab vào thanh tab

2.3.3 Mở lại những tab đã đóng gần đây :

Nếu muốn mở lại những tab đã đóng gần đây, có những cách rất dễ dàng vàtích hợp sẵn cho việc này Trang tab mới có một liên kết (link) đóng gần đây ở gócdưới bên phải mà hiển thị một danh sách các link tới những website từ những tabđóng gần đây Nếu chỉ muốn mở lại tab đóng gần nhất, kích chuột phải vào bất kỳtab nào, chọn “Mở lại tab đã đóng” hoặc nhấn Ctrl + Shift + T

Như hình 2.5 :

Hình 2.5 Mở lại tab đã đóng

2.3.4 Mở lại toàn bộ các tab trong phiên Chrome trước :

Cũng có thể mở lại toàn bộ tab được mở khi đóng Google Chrome Việc này cóích trong trường hợp có nhiều tab mở và Google Chrome bị sự cố vì một số lý do.Một cách là mở “Cài đặt” từ thực đơn cờ lê và tích vào nút “Tiếp tục tại nơi tôidừng lại” trên trang “Cơ bản” trong phần “Khi khởi động” Lưu các phiên Google

Chrome và tải chúng bất cứ lúc nào ta muốn bằng cách sử dụng tiện ích “ Phiên

quản lý” Công cụ cho phép chúng ta lưu nhóm tab, đổi tên hay xóa phiên từ thưviện phiên Điều này tiện lợi nếu ta có nhiều trang truy cập mỗi lần mở GoogleChrome và để lưu lại những trang ta tìm thấy khi tìm kiếm và muốn truy cập lại lầnsau

Hình 2.6 Mở lại toàn bộ tab được mở khi đóng Google Chrome

2.3.5 Tách một cửa tab sang sổ mới :

Nếu muốn chuyển một tab sang một cửa sổ Google Chrome mới, chỉ cần kéotab đó ra ngoài cửa sổ trình duyệt hiện tại Thẻ tab bị gỡ khỏi cửa sổ cũ Chúng tacũng có thể kéo nó lại cửa sổ Chrome gốc Nếu thẻ tab ta kéo ra khỏi một cửa sổChrome là thẻ tab duy nhất trên cửa sổ này thì cửa sổ sẽ đóng tự động

Hình 2.7 Tách một tab sang cửa sổ mới