HTML và ứng dụng trong thiết kế website tin tức Euro 2012

Trên cơ sở những kiến thức tích lũy trong những năm học tập chuyên ngànhĐiện Tử - Viễn Thông tại trường đại học Bách Khoa Hà Nội và tìm hiểu một số tàiliệu liên quan đến ngôn ngữ siêu vă

BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

- Độc lập - Tự do - Hạnh phúc

-NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ và tên sinh viên: NGUYỄN VĂN HÙNG Số hiệu sinh viên: 09CĐ0587 Khoá: 2009 – 2012 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 Euro 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

Cán bộ phản biện

BỘ GIÁO DỤC VÀ ĐÀO TẠO 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 Văn Hùng Số hiệu sinh viên: 09CĐ0587 Ngành: Điện tử - Viễn thông Khoá: 2009 - 2012 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 Euro 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 )

LỜI NÓI ĐẦU

Xã hội ngày càng phát triển, nhu cầu cập nhật tin tức của con người ngày càngcao Bên cạnh việc sử dụng báo giấy truyền thống, ngày nay cùng với sự phát triểncủa internet, báo điện tử là một phần không thể thiếu trong việc truyền tải thông tinđến mọi người

Trên cơ sở những kiến thức tích lũy trong những năm học tập chuyên ngànhĐiện Tử - Viễn Thông tại trường đại học Bách Khoa Hà Nội và tìm hiểu một số tàiliệu liên quan đến ngôn ngữ siêu văn bản HTML, sử dụng Google Chrome cùng với

sự hướng dẫn của ThS Nguyễn Quang Minh, em đã tìm hiểu, nghiên cứu và hoàn

thành đồ án tốt nghiệp với đề tài “HTML và ứng dụng trong thiết kế website tin

tức Euro 2012“.

Em xin gửi lời cảm ơn sâu sắc tới thầy Nguyễn Quang Minh, Bộ môn Điện tử

-Kỹ thuật máy tính đã tận tình hướng dẫn và cho em những ý kiến quý báu trong quátrình thực hiện nghiên cứu đề tài này

Em xin gửi lời cảm ơn các thầy cô của Viện Điện Tử Viễn Thông, đã tạo mọiđiều kiện và dạy bảo tận tình trong quá trình em học tập

Con xin được gửi lời cảm ơn đặc biệt tới gia đình đã luôn ở bên động viên,khuyến khích và là động lực lớn cho con trong những ngày học tập và thực hiện đềtàu này

Cuối cùng xin gửi lời cảm ơn đến bạn bè đã giúp đỡ, hỗ trợ nhiệt tình khi mìnhthực hiện đề tài này

Sinh viên thực hiện đề tài:

Nguyễn Văn Hùng

MỤC LỤC

LỜI NÓI ĐẦU

DANH SÁCH BẢNG BIỂU

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

TÓM TẮT ĐỒ ÁN

PHẦN MỞ ĐẦU 1

Chương 1 : NGÔN NGỮ SIÊU VĂN BẢN HTML 2

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

1.2 Thẻ HTML (HTML tag) 3

1.2.1 Thẻ HTML 3

1.2.2 Phân loại thẻ 3

1.2.3 Thẻ chứa (container tag) 3

1.2.4 Thẻ rỗng (empty tag) 4

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

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

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

1.2.8 Phần thân body 6

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

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

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

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

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

1.3.4 Phân đoạn văn bản 9

1.3.5 Tạo đề mục 10

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

1.3.7 Định dạng font chữ 11

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

1.3.9 Trích dẫn 13

1.3.10 Văn bản đã định dạng trước 13

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

1.3.12 Hình ảnh 15

1.3.13 Âm thanh 16

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

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

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

1.3.17 Các thẻ tạo Frame 19

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

1.3.19 Chú thích 20

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

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

Chương 2 : SỬ DỤNG GOOGLE CHROME PHIÊN BẢN TIẾNG VIỆT 22

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

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

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

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

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

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

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

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

2.3.7 Tùy chỉnh trang 27

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

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

2.4.2 Tìm kiếm web 28

2.4.3 truy cập vào các địa chỉ web 28

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

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

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

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

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

2.5.1 Truy cập chế độ ẩn danh 33

2.5.2 Thanh địa chỉ (Omnibox)/Tìm kiếm 35

2.5.2.1 Tìm kiếm trên thanh địa chỉ (Omnibox) 35

2.5.2.2 Nhận kết quả tính toán từ thanh địa chỉ 36

2.5.2.3 Thay đổi công cụ tìm kiếm trong thanh địa chỉ (Omnibox) 36

37

2.5.2.4 Dán và truy cập / Dán và tìm kiếm 37

2.5.2.5 Tìm kiếm nhanh văn bản được chọn 37

2.5.3 Các ứng dụng web 38

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

2.5.4.1 Đồng bộ thiết lập với tài khoản trên Google 39

2.5.4.2 Xóa dữ liệu trình duyệt được đồng bộ khỏi Google 39

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

Chương 3 : PHÂN TÍCH THIẾT KẾ WEBSITE TIN TỨC EURO 2012 41

3.1 Thiết kế website tin tức Euro 2012 41

3.2 Kết Luận Chương 83

KẾT LUẬN 84

TÀI LIỆU THAM KHẢO 85

DANH MỤC HÌNH VẼ

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

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

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

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

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

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

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

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

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

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

Hình 2.11 Google Chrome Properties 34

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

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

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

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

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

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

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

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

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

Hình 3.1 Trang web 1 43

Hình 3.2 Bảng danh sách các liên kết 44

Hình 3.3 Trang web 2 45

Hình 3.4 Bảng danh sách các liên kết 46

Hình 3.5 Trang web 3 50

Hình 3.6 Trang web 3 50

Hình 3.7 Trang web 3 51

Hình 3.8 Trang web 3 51

Hình 3.9 Trang web 3 52

Hình 3.10 Trang web 3 52

Hình 3.11 Trang web 3 53

Hình 3.12 Trang web 3 53

Hình 3.13 Bảng danh sách các liên kết 54

Hình 3.14 Trang web 4 57

Hình 3.15 Trang web 5 60

Hình 3.16 Trang web 10 62

Hình 3.17 Bảng danh sách các liên kết 62

Hình 3.18 Trang web 21 66

Hình 3.19 Trang web 22 68

Hình 3.20 Bảng danh sách các liên kết 69

Hình 3.21 Trang web 44 73

Hình 3.22 Trang web 45 79

Hình 3.23 Trang web 75 83

DANH SÁCH BẢNG BIỂU

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

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

TÓM TẮT ĐỒ ÁN

***

Đồ án tốt nghiệp giới thiệu về ngôn ngữ siêu văn bản HTML, và sử dụngGoogle Chrome phiên bản tiếng Việt Dạng tổng quát của một thẻ HTML, cách sửdụng và một số thẻ (tag) cơ bản đã được đề cập Hướng dẫn cài đặt, sử dụng GoogleChrome được trình bày chi tiết cùng một số công cụ và tiện ích của GoogleChrome Phần chính của đồ án tập trung vào chi tiết thiết kế website tin tức Euro

2012, bằng việc sử dụng ngôn ngữ đánh dấu siêu văn bản html để xây dựng websitenhằm cung cấp thông tin về giải bóng đá vô địch châu Âu – Euro 2012

ABSTRACT

***

PHẦN MỞ ĐẦU

***

Đồ án tốt nghiệp giới thiệu về ngôn ngữ siêu văn bản HTML, cùng trìnhduyệt website Google Chrome phiên bản tiếng Việt Bên cạnh đó là một website tintức Euro 2012 sử dụng ngôn ngữ siêu văn bản HTML tự thiết kế Nội dung của đềtài đượ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 Euro 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 bóng đá vô địch châu Âu – Euro 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 1tập tin 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 nhấpchuộ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ước5

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

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

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ốnhiể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

link

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

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à:

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

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

1.3.2 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

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

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

o Thẻ <p>

Trong tài liệu, những nội dung thuộc cùng một nhóm ý tưởng được gom thànhmột đoạn Thẻ <p> được sử dụng để đánh dấu sự bắt đầu của một đoạn mới Do đó,

ta có thể không cần chỉ định thẻ đóng </p>

<p align="left | center | right"> nội dung </p>

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

Quê hương là chum khế ngọt<br>

Cho con trèo hái mỗi ngày

</p>

1.3.5 Tạo đề mục

Để tài liệu HTML được rõ ràng, ta có thể thêm đề mục (tiêu đề) cho từng phầncủa tài liệu HTML hỗ trợ 6 mức đề mục phân cấp khối văn bản Mỗi cấp đề mục cócách định dạng riêng, tùy thuộc vào ngữ nghĩa của tài liệu, mà ta sử dụng cấp đềmục phù hợp Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6 Thông thường vănbản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản bình thường Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

<H5> Tiêu đề 5 </H5>

<H6> Tiêu đề 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>

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

Để thay đổi font chữ, kích thước và màu của văn bản, ta sử dụng thẻ <font>

với các thuộc tính face, size và color:

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

Công cha như núi Thái sơn <br>

Nghĩa mẹ như nước trong nguồn chảy ra <br>

Một lòng thờ mẹ kính cha <br>

Cho tròn chữ hiếu mới là đạo con <br>

</cite>

1.3.10 Văn bản đã định dạng trước

Nếu ta muốn hiển thị văn bản đã được định dạng trước, thì sử dụng thẻ <pre>

bao quanh khối văn bản đó

<pre> Văn bản đã được định dạng </pre>

Anh mãi gọi với lòng tha thiết

Vàm cỏ đông ơi vàm cỏ đông

</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ínhcủa chúng là phân chia nội dung trang web thành những khối thông tin logic và kếthợp vớ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

Để 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 đếnhì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 trường ĐHBKHN.

</marquee>

Trong ví dụ Trên, dòng chữ "chào mừng bạn đến trang web trường ĐHBKHN"

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ú 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 :

Sử dụng thẻ : <table width = “giá trị”>

Thiết lập tiêu đề cho bảng :

<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 đó :

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

<FORM>…</FORM>.

Tạo textbox :

<input type = “text” name=” name” value = “value” size = n maxlength = n>

Trong đó:

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

 “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, maxlengthgiớ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” trong tag

<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

sử dụng các thẻ (tab) Với những ưu điểm về giao diện thân thiện, dễ sử dụng, cóthể nhúng các ngôn ngữ khác trên HTML, dễ thiết kế và 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 Chromelà 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ênMicrosoft Windowsđược phát hành ngày2 tháng

9năm2008vớ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

vàotháng 6năm2009

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, em 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 em

đã 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ột tài liệu hướngdẫn chi tiết về cách 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ànhì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ải

mộ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ục sau:

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 nhỏ) của trang web ta truy cập nhiều nhất được hiển thị ở trêncùng Nhấp vào hình thu nhỏ để truy cập trang web Ta cũng có thể chọn để ấn cáchì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ôi phục tab

cuối cùng ở phía trên cùng trình duyệt của chúng 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ở GoogleChrome Để làm điều này, vào website mong muốn trên một tab, kích chuột phải vàotab đó và chọn “Ghim tab” (Pin tab) từ thực đơn hiện ra Thẻ tab biến thà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 thanh tab

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ôi dừnglạ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àytiện lợi nếu ta có nhiều trang truy cập mỗi lần mở Google Chrome và để lưu lại nhữngtrang ta tìm thấy khi tìm kiếm và muốn truy cập lại lần sau

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

2.3.5 Tách một tab sang cửa 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 2.3.6 Xóa các hình thu nhỏ cụ thể khỏi trang

Để xóa các hình thu nhỏ được hiển thị cho các trang web cụ thể, di chuột quahình thu nhỏ Khi khung màu xanh xuất hiện xung quanh hình thu nhỏ, nhấp vào

xuất hiện ở góc phải trên cùng của khung Các hình thu nhỏ ta xóa sẽ khôngbao giờ xuất hiện lại trên trang tab mới nữa trừ khi chúng ta khôi phục các hình thunhỏ đã xóa

2.3.7 Tùy chỉnh trang

Chúng ta có thể kiểm soát bố cục của trang tab mới

Để ẩn tất cả các hình thu nhỏ khỏi chế độ xem, chúng ta nhấp vào nút hìnhthu nhỏ Ở phần bên phải trên cùng của trang Nhấp lại nút để hiển thị phần đó

Chúng ta cũng có thể chuyển đổi các hình thu nhỏ của mình sang danh sáchcác liên kết có thể quét được Nhấp vào nút danh sách ở phần bên phải trên cùngcủa trang Nhấp lại nút để ẩn danh sách

Để chuyển chỗ một hình thu nhỏ ta chỉ cần dùng chuột kéo nó tới một vị tríkhác Các hình thu nhỏ của các trang web cụ thể có thể xuất hiện và biến mất theo