UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA CÔNG NGHỆ THƠNG TIN
----------
SANTIPHAB PHOMMALAYSY
XÂY DỰNG WEBSITE DU LỊCH LÀO VỚI CSS
KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC
Quảng Nam, tháng 6 năm 2020
UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA CÔNG NGHỆ THƠNG TIN
----------
KHĨA LUẬN TỐT NGHIỆP ĐẠI HỌC
Tên đề tài:
XÂY DỰNG WEBSITE DU LỊCH LÀO VỚI CSS
Sinh viên thực hiện
SANTIPHAB PHOMMALAYSY
MSSV: 2116100147
CHUN NGÀNH: LẬP TRÌNH WEB
KHĨA 2016 - 2020
Cán bộ hướng dẫn
ThS. LÊ THỊ NGUYÊN AN
MSCB: 1000
Quảng Nam, tháng 6 năm 2020
MỤC LỤC
Phần 1. MỞ ĐẦU ................................................................ Error! Bookmark not defined.
Lý do chọn đề tài: ................................................................ Error! Bookmark not defined.
1.2. Mục tiêu của đề tài ........................................................ Error! Bookmark not defined.
1.3. Đối tượng và phạm vi nghiên cứu ................................ Error! Bookmark not defined.
1.4. Phương pháp nghiên cứu .............................................. Error! Bookmark not defined.
1.5. Lịch sử nghiên cứu........................................................ Error! Bookmark not defined.
1.6. Đóng góp của đề tài ................................................... Error! Bookmark not defined.
1.7. Cấu trúc đề tài ............................................................... Error! Bookmark not defined.
Chương 1:CƠ SỞ LÝ THUYẾT ...................................... Error! Bookmark not defined.
1.1 CÁC KHÁI NIỆM CƠ BẢN ......................................... Error! Bookmark not defined.
1.1.1 URL ............................................................................ Error! Bookmark not defined.
1.1.2. HTTP ......................................................................... Error! Bookmark not defined.
1.1.3 Word Wide Web ......................................................... Error! Bookmark not defined.
1.1.4 Giới thiệu ngôn ngữ HTML ........................................ Error! Bookmark not defined.
1.1.5 Cấu trúc cơ bản của một file HTML ........................... Error! Bookmark not defined.
1.2 NGÔN NGỮ CSS .......................................................... Error! Bookmark not defined.
1.2.1 Giới thiệu .................................................................... Error! Bookmark not defined.
1.2.2 Cú pháp của CSS ........................................................ Error! Bookmark not defined.
1.3 CÔNG CỤ SỬ DỤNG ................................................... Error! Bookmark not defined.
1.3.1. Notepad++ ................................................................. Error! Bookmark not defined.
Chương 2. PHÂN TÍCH & THIẾT KẾ HỆ THỐNG .................................................... 21
2.1 PHÂN TÍCH & THIẾT KẾ HỆ THỐNG ...................................................................... 21
2.1.1. ĐẶC TẢ BÀI TOÁN ................................................................................................. 21
2.1.2 DANH SÁCH CÁC TÁC NHÂN .............................................................................. 22
2.2 ĐẶC TẢ CÁC ÚC ......................................................................................................... 22
2.3 BIỂU ĐỒ UC CHI TIẾT ............................................................................................... 23
2.3.1. Biểu đồ UC tổng quát ................................................................................................ 24
2.3.2.Biểu đồ hoạt động ....................................................................................................... 25
2.3.3 Biểu đồ tuần tự ............................................................................................................ 26
CHƯƠNG 3. DEMO CHƯƠNG TRÌNH ............................................................................ 27
Phần 3. KẾT LUẬN ........................................................................................................... 30
Phần 4. TÀI LIỆU THAM
KHẢO............................................................................................31
LỜI CẢM ƠN
Đầu tiên, em xin gửi lời mời cảm ơn sâu sắc tới cô ThS. Lê Thị Nguyên An
,cô đã nhiệt tình giúp đỡ và hướng dẫn em trong q trình thực hiện khóa luận này.
Em xin gửi đến quý thầy cô đang giảng dạy tại Trường Đại học Quảng Nam
nói chung và thầy cơ trong khoa cơng nghệ thơng tin nói rieeng lời biết ơn chân thành
,cảm ơn thầy cơ vì đã hết lịng truyền đạt chio em những kiến thức trong những năm
thán ngôi trên ghế nhà trường.Kính chúc q thầy cơ ln mạnh khỏe,gặt hái được
nhiều thành công trong sự nghiệp.
Dù đã cố gắng hết sức thực hiện đề tài nhưng cũng khó tránh khỏi thiếu sót,em
rất mong nhận được sự gót ý của quý thầy cô,các anh chị và các bạn để bản thân.
Quảng Nam, tháng 4 năm 2020
Sinh viên thực hiện
Santiphab Phommalaysy
II. NỘI DUNG ĐỀ TÀI
Phần 1. MỞ ĐẦU
1.1. Lý do chọn đề tài:
Lào – đất nước láng giềng xinh đẹp và bình n, mê hoặc du khách với những
ngơi chùa tôn nghiêm, những thác nước tuyệt đẹp, những pho tượng phật nhiều hình
dáng độc đáo và nụ cười thân thiện, hiếu khách của người dân.
Với những nét văn hóa đặc sắc, những ngôi chùa với lối kiến trúc đặc biệt, những
món ăn ngon phù hợp với khẩu vị Việt Nam. Lào đang là một điểm đến được rất
nhiều bạn trẻ lựa chọn trong chuyến hành trình khám phá của mình.
Với việc xây dựng Website nói chung, và xây website du lịch Lào với CSS. Mục
đích là để nhắm vào tất cả mọi người hay mọi nước trong Đông Nam Á biết nơi du
lịch, phong tục tập quán, tiếng nói, món ăn ngon đặc sản, tính cách của con người
Lào.
Như vậy, để có cái nhìn tồn cảnh về chun đề này, khóa luận đi sâu vào nghiên
cứu trên đề tài: “Xây dựng website du lịch Lào với CSS”
1.2. Mục tiêu của đề tài
Nắm vững những kiến thức về nội dung chính, hiểu được về HTML, CSS, và
các công cụ thiết kế web. Biết vận dụng những kiến thức vào xây dựng trang thông
tin điện tử (Website).
1.3. Đối tượng và phạm vi nghiên cứu
Ứng dụng các kiến thức về nội dung chính, hiểu được về HTML, CSS, Biết
vận dụng những kiến thức vào xây dựng trang Web.
1.4. Phương pháp nghiên cứu
Em đi sâu nghiên cứu vào nội dung chính của đề tài khóa luận tốt nghiệp, tìm
hiểu ngơn ngữ HTML, CSS, áp dụng xây dựng trang Website vào việc quảng cáo và
tự hào đất nước mình.
1.5. Lịch sử nghiên cứu
- Nội dung đã được dạy và học ở học phần phân tích thiết kế Website
- Có nhiều người cũng như các nhóm nghiên cứu đã chọn kiến thức này làm nội dung
cho đề tài nghiên cứu của họ.
1
1.6. Đóng góp của đề tài
Khóa luận tóm tắt các kiến thức về sự thiết kế và sử dụng tin tức nơi du lịch
và phong tục tập quán của đất nước Lào.
1.7. Cấu trúc đề tài
Chương 1: Cơ sở lý thuyết. Chương này trình bày các khái niệm cơ bản về web, ngôn
ngữ và phần mềm hỗ trợ được sử dụng trong q trình thiết kế website.
Chương 2: Phân tích & thiết kế hệ thống. Chương này đặc tả bài tốn sau đó phân
tích và thiết kế, xây dựng hệ thống.
Chương 3: Demo chương trình.
2
Phần 2. NỘI DUNG NGHIÊN CỨU
Chương 1:CƠ SỞ LÝ THUYẾT
1.1 CÁC KHÁI NIỆM CƠ BẢN
1.1.1 URL
URL viết tắt của (Uniform Resource Locator), URL cung cấp một cách chính
xác để xác định vị trí một nguồn tài nguyên trên web, các hệ thống hoạt động trên
internet. URL chứa tên của giao thức sử dụng để truy cập vào tài nguyên và tên của
tài nguyên. Phần đầu tiên của một URL xác định giao thức nào được sử dụng. Phân
thứ hai xác định địa chỉ IP hoặc tên miền nơi có tài nguyên năm.
Giao thức URL bao gồm HTTP (Hypertext Transfer Protocol) và HTTPS
(HTTP Secure) cho tài nguyên web, “mailto” cho các địa chỉ email, “ftp” cho các tập
tin trên File Transfer Protocol server , và telnet cho một phiên truy cập máy tính từ
xa.
Một URL được sử dụng chủ yếu để trỏ đến một trang web, một thành phần
của một trang web hoặc một chương trình trên một trang web. Tên tài nguyên của
URL bao gồm:
• Một tên miền xác định một máy chủ hoặc các dịch vụ web
• Một tên chương trình hoặc một đường dẫn đến tập tin trên máy chủ.
Ví dụ, Các nguồn tài
nguyên sẽ được lấy ra bằng cách sử dụng giao thức HTTPS Các nguồn tài ngun có
được thơng qua tên miền (DNS) www.mona-media.com Và đường dẫn đến tài
nguyên cụ thể là /project/instagetter/index.html.
1.1.2. HTTP
Với những người thường xuyên sử dụng internet, cụm từ HTTP có lẽ đã trở
nên quá quen thuộc. Nó quen thuộc đến nỗi nhiều người thường xuyên đọc và sử
dụng chúng nhưng lại không hề biết đến ý nghĩa của cụm từ này. Vậy HTTP kỳ thực
là gì?
HTTP là chữ viết tắt của HyperText Transfer Protocol (giao thức truyền tải
siêu văn bản). Đây là một giao thức ứng dụng trong bộ các giao thức TCP/IP (gồm
một nhóm các giao thức nền tảng cho internet).
3
Hình 1.1 Mơ hình hoạt động của HTTP
HTTP hoạt động dựa trên mơ hình Client - Server. Trong mơ hình này, các
máy tính của người dùng sẽ đóng vai trị làm máy khách (Client). Sau một thao tát
nào đó của người dùng, các máy khách sẽ gửi yêu cầu đến máy chủ (Server) và chờ
đợi câu trả lời từ những máy chủ này. Để có thể nói chuyện được với nhau, các máy
chủ và máy khách phải thực hiện việc trao đổi thông qua các giao thức. Một trong
những giao thức được sử dụng thường xuyên nhất chính là HTTP.
HTTP là chữ viết tắt của HyperText Transfer Protocol (giao thức truyền tải
siêu văn bản). Đây là một giao thức ứng dụng trong bộ các giao thức TCP/IP (gồm
một nhóm các giao thức nền tảng cho internet).
Khi bạn gõ một địa chỉ Web URL vào trình duyệt Web, một lệnh HTTP sẽ
được gửi tới Web server để ra lệnh và hướng dẫn nó tìm đúng trang Web được u
cầu. Trang Web này sau đó sẽ được kéo về và mở trên trình duyệt Web. Nói đơn giản
hơn, HTTP là giao thức giúp cho việc truyền tải file từ một Web server vào một trình
duyệt Web để người dùng có thể xem một trang Web đang hiện diện trên trình duyệt.
• ĐIỀU NGƯỜI DÙNG INTERNET CẦN LƯU Ý
Rõ ràng việc sử dụng giao thức HTTPS giúp tăng cường khả năng bảo mật và
phịng vệ đáng kể cho người dùng internet. Cũng chính bởi điều này, các hệ thống
ngân hàng, tổ chức tín dụng... đều sử dụng giao thức HTTPS trên các Website của
mình. Điều này cũng đã được sự hưởng ứng của cả Google và Facebook.
Với người dùng internet, điều mà bạn cần lưu ý khi truy nhập vào các hệ thống
thanh toán điện tử hoặc các website yêu cầu việc nhập liệu những thông tin nhạy cảm
về người dùng nằm ở chính giao thức mà Website đó sử dụng. Ở các doanh nghiệp
4
hoặc các hệ thống thanh tốn điện tử uy tín, việc sử dụng giao thức HTTPS gần như
là một trong những yêu cầu bắt buộc đối với các doanh nghiệp này. Bởi vậy việc
không sử dụng giao thức HTTPS đồng nghĩa với việc bạn phải xếp website đó vào
diện nghi vấn. Rất có thể, đây chỉ là một trang Web giả danh nhằm lấy đi thông tin
về tài khoản của bạn.
Đề kiểm tra một Website có sử dụng giao thức HTTPS hay không cũng vô
cùng đơn giản. Các bạn chỉ cần để ý đến phần link đường dẫn khi truy nhập vào
Website mở đầu bằng http:// hay https://. Bên cạnh đó, link đường dẫn của các
Website có sử dụng giao thức HTTPS thường đi kèm với một biểu tượng nhỏ hình ổ
khóa. Khi đưa con trỏ chuột hướng vào biểu tượng này, trên đó sẽ hiện ra tên của đơn
vị xác thực như đã nói ở trên. Đây là dấu hiệu cho thấy Website mà bạn đang truy
nhập không phải là giả mạo.
Chỉ như vậy thôi rõ ràng là chưa đủ cho việc đảm bảo an tồn thơng tin trên
internet. Tuy nhiên với những điều cơ bản này, các bạn cũng sẽ phần nào hiểu được
cách thức mà các Website hoạt động và có cho mình những kinh nghiệm cơ bản nhất
để tự bảo vệ chính bản thân mình.
1.1.3 Word Wide Web
World Wide Web là mạng lưới nguồn thông tin cho phép ta khai thác thông
qua một số công cụ, chương trình hoạt động dưới các giao thức mạng. World Wide
Web là công cụ, phương tiện hay đúng hơn là một dịch vụ của Internet.
• Lịch sử trang web.
World Wide web đã được tạo ra vào năm 1990 của CERN bởi kỹ sư Tim
Berners-Lee. Ngày 30 tháng từ năm 1993, CERN thơng báo rằng World Wide web
sẽ được miễn phí để sử dụng cho bất cứ ai.
Trước khi giới thiệu về HTML và các giao thức HTTP và các giao thức khác
như FTP,... được sử dụng để lấy các tập tin cá nhân từ một máy chủ. Những giao thức
này cung cấp một cấu trúc thư mục đơn giản mà người sử dụng chuyển và chọn các
tập tin để tải về. Văn bản được thường xuyên nhất được trình bày như là các tập tin
văn bản thuần tuý mà không có định dạng hoặc đã được mã hố trong trình xử lý các
định dạng.
5
• Phân loại website.là công việc của một cá nhân, một doanh nghiệp hoặc
các tổ chức, và thường dành riêng cho một số chủ đề cụ thể hoặc mục đích.
Bất kỳ trang web có thể chứa một siêu liên kết vào bất kỳ trang web khác, do
đó, phân biệt các trang web cá nhân, như cảm nhận của người sử dụng. Tạm
thời phân loại như sau:
Trang web cá nhân
Trang web thương mại
Trang web của chính phủ
Trang web tổ chức phi lợi nhuận
Trình duyệt web
Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và
tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trị chơi và các thông tin khác
ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ. Văn
bản và hình ảnh trên một trang web có thể chứa siêu liên kết tới các trang web khác
của cùng một địa chỉ web hoặc địa chỉ web khác. Trình duyệt web cho phép người sử
dụng truy cập các thông tin trên các trang web một cách nhanh chóng và dễ dàng
thơng qua các liên kết đó. Trình duyệt web đọc định dạng HTML để hiển thị, do vậy
một trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau.
Một số trình duyệt web hiện nay cho máy tính cá nhân bao gồm Internet
Explorer, Mozilla Firefox, Safari, Opera, Avant Browser, Konqueror, Lynx, Google
Chrome, Flock, Arachne, Epiphany, K-Meleon và AOL Explorer.
World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một khơng
gian thơng tin tồn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính
nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với
chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chay trên
Internet, chẳng hạn như dịch vụ thư điện tử. Web được phát minh và đưa vào sử dụng
vào khoảng năm 1990, 1991 bởi viện sĩ Viện Hàn lâm Anh Tim Berners-Lee và
Robert Cailliau (Bỉ) tại CERN, Geneva, Switzerland
Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn
bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng
6
một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản.
Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử
dụng yêu cầu (thông tin trong ô địa chỉ được gọi là tên miền (domain name), rồi sau
đó chương trình sẽ tự động gửi thông tin đến máy chủ (Web Server)và hiển thị trên
màn hình máy tính của người xem. Người dùng có thể theo các liên kết siêu văn bản
(hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản
hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên
kết thường được gọi là duyệt Web.
Quá trình này cho phép người dùng có thể lướt các trang web để lấy thơng
tin.Tuy nhiên độ chính xác và chứng thực của thông tin không được đảm bảo.
1.1.4 Giới thiệu ngôn ngữ HTML
Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là
một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập một trang
web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau và
các trang này được gọi là một tài liệu HTML (tập tin HTML).
Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được
quy định bằng các thẻ tag. Bạn có thể phân biệt một trang web được viết bằng ngôn
ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các trang HTML thường
hay có đi là HTML hoặc HTM.
Hình 1.2 Mơ hình của HTML
Một trang HTML được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định
bằng các thẻ tag.
HTML là ngơn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web, mọi
trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML. Hiện nay, phiên bản mới
7
nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các
phiên bản HTML cũng.
Vậy, đối với các website, ngơn ngữ HTML đóng vai trị như thế nào ? HTML,
theo đúng nghĩa của nó, là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức
năng của nó cũng xoay quanh yếu tố này. Cụ thể, HTML giúp cấu thành các cấu trúc
cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp
phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh.
Hình 1.3 Mơ hình hoạt động JavaScript,CSS,HTML
Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng
cấu trúc và làm cho website trở thành một hệ thống hoàn chỉnh.
Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu
trúc và khiến trang web đi vào quy củ một hệ thống hoàn chỉnh. Nếu bạn mong muốn
sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố trong văn
bản, hãy hỏi HTML. Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà lập trình
viên hay người dùng có thể lựa chọn ngơn ngữ lập trình riêng cho website của bạn,
tuy nhiên thực chất HTML chứa những yếu tố cần thiết mà dù website của bạn có
thuộc thể loại nào, giao tiếp với ngơn ngữ lập trình nào để xử lý dữ liệu thì nó vẫn
phải cần đến ngơn ngữ HTML để hiển thị nội dung cho người truy cấp.
Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nền tảng nào
thì nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều. Đối với các lập trình viên
hay nhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước
khi bắt tay vào thiết kế trang web nào.
1.1.5 Cấu trúc cơ bản của một file HTML
Cấu trúc cơ bản của HTML
8
Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3
phần:
<!Doctype>: Phần khai báo chuẩn của html hay xhtml.
<head></head>: Phần khai báo ban đầu, khai báo về meta, title, CSS,
javascript...
<body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung.
Cấu trúc cơ bản
" /><html>
<head>
<title>Tiêu đề trang web</title> </head>
<body>
...Phần thân viết ở đây...
</body>
</html>
Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang
2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn
giản sử dụng 2 cột để layout.
•
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner
liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm...
• Phần liên kết tồn cục:global navigation, dùng để chứa các liên kết
đến những trang quan trọng trong tồn bộ trang, trong phần này có thể chứa
thêm các liên kết con (sub navigation).
• Phần thân của trang: page body, phần này chứa phần nội dung chính
(content) và phần nội dung phụ (sidebar).
• Phần nội dung chính: content, phần này chứa nội dung chính cần thể
hiện cho người dùng xem.
9
• Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của
từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có
thể dùng để chứa các liên kết quảng cáo...
• Phần cuối trang web: footer, phần này thường chưa phân liên hệ như:
tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc
có thể chứa các liên kết tồn trang, các banner liên kết...
Hình 1.4 Mơ hình cấu trúc cơ bản của trang HTML
1.2 NGÔN NGỮ CSS
1.2.1 Giới thiệu
• Định nghĩa
CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn style sheet được sử
dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngơn ngữ đánh dấu
(markup). Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng
với HTML để thay đổi phong cách của trang web và giao diện người dùng. Nó cũng
10
có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản,
SVG và XUL.
CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web
để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều
ứng dụng di động.
• CSS làm được những gì?
Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ.
Bạn hồn tồn có thể thay đổi giao diện trang web của mình chỉ với một vài
thay đổi trong mã CSS.
• Tại sao sử dụng CSS
Đây là ba lợi ích chính của CSS:
1) Giải quyết một vấn đề lớn
Trước khi có CSS, các thẻ như phơng chữ, màu sắc, kiểu nền, các sắp xếp phần
tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một q
trình rất dài tốn thời gian và cơng sức. Ví dụ: Nếu bạn đang phát triển một trang web
lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một
q trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một
khuyến cáo của W3C.
2) Tiết kiệm rất nhiều thời gian
Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngồi vì vậy có thể thay
đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp.
3) Cung cấp thêm các thuộc tính
CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của
trang web.
Các điểm chính của CSS được đưa ra dưới đây:
CSS là viết tắt của Cascading Style Sheet.
CSS được sử dụng để thiết kế các thẻ HTML.
CSS là một ngôn ngữ được sử dụng rộng rãi trên web.
11
HTML, CSS và JavaScript được sử dụng để thiết kế web. Nó giúp các nhà
thiết kế web áp dụng phong cách trên các thẻ HTML.
• Ví dụ về CSS
<!DOCTYPE>
<html>
<head>
<style>
h1 {
color:white;
background-color:#00eeee;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
Write Your First CSS Example
This is Paragraph
</body>
</html>
1.2.2 Cú pháp của CSS
Bộ quy tắc CSS chứa selector và khối khai báo.
12
Hình 1.5 Mơ hình cú pháp của CSS.
Selector: Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu cách. Nó có thể là
bất kỳ thẻ nào như
, <title>,...
Declaration Block: Khối khai báo có thể chứa một hoặc nhiều khai báo được
phân cách bởi dấu chấm phẩy (;). Đối với ví dụ trên, có hai khai báo:
1. color: yellow;
2. font-size: 11 px;
Mỗi khai báo chứa một tên thuộc tính và giá trị, được phân cách bởi dấu hai chấm.
Property: Một property là một kiểu của thuộc tính của phần tử HTML. Nó có
thể là color, border,...
Value: Các giá trị được gán cho thuộc tính CSS. Trong ví dụ trên, giá trị
“yellow” được gán cho thuộc tính color.
Selector{Propertyl: valuel; Property2: value2; .........;}
1.3 CÔNG CỤ SỬ DỤNG
1.3.1. Notepad++
Notepad++ hay được gọi là Notepad plus plus là một text editor đơn giản nhẹ
nhàng trong q trình làm việc và sử dụng nó. Ngồi phần mềm này ra thì nếu bạn là
một trình viên chẳng hạn thì cũng ít nhiều bạn cũng biết tới các phần mềm IDE. Editor
mạnh mẽ hỗ trợ code như là Sublime Text, Zend Studio với rất nhiều Plugin hỗ trợ
bạn Nhưng nhe nhất, linh hoạt trong việc tắt mở thì có lẽ Notepad++ sẽ là sự lựa chọn
hàng đầu của bạn.
13
1.3.2.Giới thiệu
Notepad++ là một phần mềm mã nguồn mở làm nhiệm vụ biên tập mã nguồn,
được coi là thay thế cho Notepad. Notepad++ được viết bằng ngôn ngữ C++ trên nền
Win32 API và STL thuần túy, đảm bảo tốc độ thực thi cao hơn và có kích thước
chương trình nhỏ gọn. Notepad++ hỗ trợ nhiều ngôn ngữ bao gồm tất cả ngơn ngữ
lập trình hiện nay như C/C++, C#, Java, HTML, PHP, ... Trong môi trường Windows,
Notepad++ là một lựa chọn rất lý tưởng.
Tiền đề bài viết
Trong quá trình học tập và làm việc, thao tác với nhiều ngôn ngữ và nhiều trình
soạn thảo là việc thường gặp ở mỗi lập trình viên. Trong bài viết này tơi muốn cung
cấp cho bạn đọc cách cài đặt và sử dụng phần mềm Notepad++ để phục vụ quá trình
học tập và làm việc trong chuyên ngành công nghệ.
1.3.3.Đối tượng hướng đến
Các bạn học viên đang bắt đầu quá trình học tập và làm việc trong các ngành
cơng nghệ và lập trình, nhất là các học viên STDIO Training. Những bạn muốn tìm
kiếm một chương trình hỗ trợ đắc lực có thể hỗ trợ nhiều ngôn ngữ và được sử dụng
trong suốt quá trình từ giai đoạn khởi đầu đến giai đoạn chuyên nghiệp.
1.3.4.Cài đặt
Dễ dàng download bản cài đặt mới nhất tại trang chủ:
(Ví dụ này thực hiện tại phiên bản Notepad++ 7.7 ngày 24 tháng 9 năm 2019)
Sau khi download bản cài đặt phù hợp. Khởi động file cài đặt và chọn ngôn ngữ.
14
Chọn Next:
Chọn I Agree để đồng ý với những điều khoản của chương trình
Chọn đường dẫn lưu chương trinh
15
Chọn các Components cần thiết
Có thể chọn tạo Shortcut trên Desktop trước khi Install
16