TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN
KHOA KHOA HỌC MÁY TÍNH
ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI : XÂY DỰNG WEBSITE GIỚI THIỆU DU LỊCH ĐÀ NẴNG
Sinh viên thực hiện
: NGUYỄN VĂN TÌNH - 20IT554 NGUYỄN NGỌC HỒNG - 20IT371 Giảng viên hướng dẫn : TS. LÝ QUỲNH TRÂN Lớp : ĐỒ ÁN CƠ SỞ(48)
Đà nẵng, tháng 5 năm 2021
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN
KHOA KHOA HỌC MÁY TÍNH
ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI : XÂY DỰNG WEBSITE GIỚI THIỆU DU LỊCH ĐÀ NẴNG
Sinh viên thực hiện
: NGUYỄN VĂN TÌNH - 20IT554 NGUYỄN NGỌC HỒNG - 20IT371 Giảng viên hướng dẫn : TS. LÝ QUỲNH TRÂN Lớp : ĐỒ ÁN CƠ SỞ(48)
2
Đà Nẵng, tháng 5 năm 2021
3
MỤC LỤC ******* MỤC LỤC...................................................................................................................................3 BẢNG DANH TỪ VIẾT TẮT....................................................................................................5 LỜI CẢM ƠN..............................................................................................................................6 MỞ ĐẦU.....................................................................................................................................8 1. Giới thiệu về vấn đề nghiên cứu..................................................................................8 3. Giới hạn và phạm vi đề tài...........................................................................................9 4. Giới thiệu tóm tắt bố cục của đề tài.............................................................................9 PHẦN 1: TỔNG QUAN VỀ ĐỀ TÀI........................................................................................10 1.1. Nhiệm vụ đề tài và định hướng giải quyết.................................................................10 1.2. Giới thiệu và cài đặt công cụ xây dựng hệ thống Website du lịch Đà Nẵng.............12 1.2.1.
Giới thiệu về ngơn ngữ lập trình HTML...........................................................12 1.2.2. Giới thiệu về CSS..............................................................................................18 1.2.3. Giới thiệu về Bootstrap..................................................................................... 24 1.2.4. Giới thiệu về JavaScript.....................................................................................28 1.2.5. Cài đặt Visual Studio Code................................................................................28 PHẦN 2: KẾT QUẢ ĐẠT ĐƯỢC............................................................................................31 1.1. Phân tích thiết kế hệ thống.........................................................................................31 1.1.1. Phân tích các chức năng của hệ thống...............................................................31 1.1.2. Xây dựng hệ thống Website...............................................................................31 1.2. Thiết kế giao diện Website Cổng Thông Tin Du Lịch Đà Nẵng................................33 1.2.1. Giao diện Đăng nhập.........................................................................................33 1.2.2. Giao diện Trang chủ...........................................................................................34 1.2.3. Giao diện Tìm Kiếm..........................................................................................35 1.2.4. Giao diện Chuyên mục Tin Tức.........................................................................36 1.2.5. Giao diện Chuyên mục Điểm đến......................................................................36 1.2.6. Giao diện Chuyên mục Dịch vụ.........................................................................37 1.3. Các thủ thuật SEO tốt cho website tin tức.................................................................38 1.5.1
Hệ thống Search Engine....................................................................................40 1.5.2 Bước đầu làm SEO cho website........................................................................41 1.5.3 Các thủ thuật SEO tốt cho website tin tức.........................................................41 KẾT LUẬN................................................................................................................................45 1.Kết quả đạt được.................................................................................................................45 2. Hướng phát triển................................................................................................................45 4
TÀI LIỆU THAM KHẢO.........................................................................................................46
BẢNG DANH TỪ VIẾT TẮT *********
:
STT 1 2 3 4
Cụm từ Công nghệ phần mềm Công nghệ thông tin Hệ Thống
Viết tắt
CNPM CNTT HT
Quản Trị Hệ Thống
QTHT
5
LỜI CẢM ƠN *****
Lời đầu tiên em xin gửi lời cảm ơn sâu sắc tới các thầy cô giáo khoa CNTT Đại Học Công Nghệ Thông Tin Và Truyền Thông Việt -Hàn và TS. Lý Quỳnh Trân người đã tận tình hướng dẫn em trong suốt quá trình thực hiện Đồ Án. Em cũng xin gửi lời cảm ơn đến các thầy cô và các bạn đã giúp đỡ em hoàn thành Đồ Án này. Do chưa có nhiều kinh nghiệm trong việc làm đề tài nên khơng tránh khỏi những thiếu sót. Em mong nhận được sự góp ý của các thầy cơ và các bạn để Đồ án được hoàn thiện hơn. Em xin chân thành cảm ơn!
6
NHẬN XÉT (Của giảng viên hướng dẫn) ……………………………………………………………………………………………………
Trong những năm gần đây, khoa học công nghệ Việt Nam đã từng bước hội nhập vào dịng chảy của khoa học cơng nghệ tiên tiến trên thế giới. Công nghệ thông tin ở nước ta mới, song tốc độ phát triển của nó rất nhanh và mạnh, chiếm một vị trí quan trọng trong các ngành khoa học cơng nghệ. Thành tựu của nó được ứng dụng trong mọi lĩnh vực của đời sống, xã hội. Trong thời kỳ hội nhập kinh tế quốc tế, du lịch là một ngành được dự kiến sẽ trở thành ngành kinh tế mũi nhọn của nước ta. Ra đời từ năm 1960 nhưng du lịch Việt Nam chỉ thực sự phát triển, đặc biệt trong khoảng 10 năm lại đây. Từ chỗ chỉ đón khoảng 250.000 lượt khách quốc tế vào năm 1990, đến năm 2019, cả nước đón 18 triệu lượt khách quốc tế, 85 triệu lượt khách nội địa với thu nhập từ du lịch đạt khoảng 720 nghìn tỷ đồng, thu hút khoảng 32.8 tỷ USD, chiếm 41% tổng số vốn đăng ký FDI vào Việt Nam.Hiện du lịch đóng góp khoảng 9.2% GDP của quốc gia. Theo thống kê sơ bộ ngành Du lịch năm 2019, cả nước có trên 2,5 triệu lao động, trong đó 860.000 lao động trực tiếp với 45% được đào tạo chuyên ngành du lịch, 35% được đào tạo chun ngành khác, 20% chưa qua đào tạo. Internet đóng vai trị quan trọng trong việc tuyên truyền, đặc biệt là các website về du lịch, có thể quảng bá về nét đẹp của du lịch Việt Nam, về các khu du lịch nổi tiếng trên khắp đất nước, giúp khách du lịch có thể tìm kiếm những địa điểm du lịch đẹp, những thơng tin cần thiết cho chuyến đi...Với Bờ Biển đẹp trải dài hơn 3.260 km cùng nhiều thắng cảnh nổi tiếng, Việt Nam sẽ trở thành một trung tâm du lịch biển của
thế giới, một Thiên Đường Du Lịch.Đà Nẵng là một thành phố biển đẹp nên thơ đang trên đà phát triển vượt bậc, để đón chào các du khách trong và ngồi nước đến thăm quan và khám phá. Với mong muốn tìm hiểu và xây dựng một Website giới thiệu về vùng đất, con người và văn hóa du lịch Đà Nẵng. Tơi chọn đề tài: “ XÂY DỰNG WEBSITE GIỚI THIỆU DU LỊCH ĐÀ NẴNG ” để làm “Đồ Án Cơ Sở 1” đồng thời mong muốn giúp những du khách sắp đến và sẽ đến với Đà Nẵng và với những ai muốn tìm hiểu về Đà Nẵng có những thơng tin đa dạng, chính xác và cập nhật nhất.
2. Mục đích của đề tài 8
Xây dựng website quảng bá nét đẹp của thành phố Đà Nẵng. Áp dụng những kiến thức đã học để thiết kế, xây dựng website bằng ngôn ngữ HTML, CSS, Bootstrap, Javascript
3.
Giới hạn và phạm vi đề tài
Đề tài được xây dựng chỉ dừng lại ở phạm vi là một website tin tức du lịch, xã hội, quảng cáo và tìm kiếm. Nguồn tài liệu, tin tức và hình ảnh về Đà Nẵng được tham khảo tại các website của các cơ quan thành phố Đà Nẵng, các website du lịch của Đà Nẵng… Sử dụng cơng cụ ngơn ngữ lập trình HTML, CSS, Bootstrap, Javascript trên nền tảng Visual Studio Code để thiết kế trang web.
4. Giới thiệu tóm tắt bố cục của đề tài Báo cáo gồm 4 phần chính: + Mở đầu: Giới thiệu về vấn đề nghiên cứu Mục đích của đề tài Giới hạn và phạm vi đề tài Giới thiệu tóm tắt bố cục của đề tài + Phần 1: Tổng quan về đề tài Nhiệm vụ đề tài và định hướng giải quyết Giới thiệu và cài đặt công cụ xây dựng hệ thống Website + Phần 2: Kết quả đạt được Phân tích hệ thống Thiết kế hệ thống - Các bảng dữ liệu của hệ thống - Xây dựng hệ thống Website Thiết kế giao diện của hệ thống Website Cổng thông tin du lịch Đà Nẵng Hệ thống quản trị website Các thủ thuật SEO tốt cho web tin tức + Kết luận Đánh giá kết quả đạt được, chưa đạt được 9
Hướng phát triển
PHẦN 1: TỔNG QUAN VỀ ĐỀ TÀI ***************
1.1.
Nhiệm vụ đề tài và định hướng giải quyết
Cuộc sống ngày càng tốt hơn, song song với đời sống vật chất thì đời sống tinh thần cũng là một phần khơng thể thiếu, đó cũng là một hệ quả tất yếu. Nhu cầu du lịch, ẩm thực, nghỉ ngơi rất được nhiều người quan tâm. Các công ty hoạt động trong lĩnh vực phải nghĩ đến những giải pháp chiến lược cho sự phát triển dịch vụ của mình. Một trong những lựa chọn hàng đầu hiện nay là xây dựng cho mình một website đáp ứng yêu cầu cả về chức năng và thẩm mỹ với dịch vụ mà mình cung cấp. Thiết kế một website với đầy đủ thơng tin về tin tức, văn hóa, địa điểm du lịch, nhà hàng khách sạn, ẩm thực là một giải pháp tối ưu. Để dựng Website du lịch Đà Nẵng dựa trên các module sau: S
Chức năng module
Mô tả chi tiết
TT Các module trong việc xuất bản nội dung, giao diện tương tác người dùng 1
Thiết kế giao diện
Web site về du lich thì giao diện người dùng là yếu tố quan trọng. Phải thể hiện được các đặc điểm: Tính thẩm mỹ Tính nghệ thuật Tạo cảm giác ấn tượng với
người dùng Tính tiện dụng và đầy đủ thơng tin
10
2
Trang chủ
3
Mục tin tức
Thể hiện tổng quan nội dung của toàn bộ website như: Các tin tức nổi bật đáng chú ý Các dịch vụ hữu ích Chuyên mục Điểm đến Chuyên mục Quảng cáo Cập nhật các tin tức về du lịch và các sự kiện Giới thiệu các địa điểm du lịch đẹp của Đà Nẵng….
4
Mục Điểm đến
5
Mục Tour du lịch
Giới thiệu các tour du lịch trong và ngoài nước cho khách tham quan
6
Mục Dịch vụ
Giới thiệu các Khu nghỉ dưỡng, khách sạn, nhà hàng, spa nổi tiếng…
7
Tìm kiếm
8
Ý Kiến
Tìm kiếm bài viết theo từ khóa
Mọi người đóng góp ý kiến của mình để trang Web hoang thiện hơn
Module trong hệ thống quản trị nội dung 1
Quản lý thành viên
Quản lý danh sách người quản trị hệ thống
2
Quản lý bài viết
Quản lý các bài viết trong website
3
Quản lý thể loại
Quản lý danh sách các thể loại bài viết trong website
4
Quản lý tác giả
Quản lý danh sách các tác giả viết bài cho website
11
5
Quản lý đăng tải bài viết
1.2. Đà Nẵng
Các bài viết sau khi được thêm được xem xét chỉnh sửa trước khi đăng tải
Giới thiệu và cài đặt công cụ xây dựng hệ thống Website du lịch
1.2.1. Giới thiệu về ngôn ngữ lập trình HTML 1.2.1.1.
HTML là gì?
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng. HTML không phải là ngơn ngữ lập trình, đồng nghĩa với việc nó khơng thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web. Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản
và
Đây là cách bạn thêm đoạn văn trong HTML.
Bạn có thể thêm nhiều đoạn văn!
Tổng quan, HTML là ngơn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website. Sau đây là những gì bạn sẽ được tìm hiểu trong bài viết này:
1.2.1.2 Lịch sử của HTML HTML được sáng tạo bởi Tim Berners-Lee , nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet. Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag 12
HTML. Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới. Theo Mozilla Developer Network: HTML Element Reference , hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (khơng hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website. Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website . Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.
1.2.1.3
HTML hoạt động như thế nào?
HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.
Thơng thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng. Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác. Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>. Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào: <div>
The Main Heading
A catchy subheading
13
Paragraph one
<img src="/" alt="Image">
Paragraph two with a <a href="">hyperlink</a>
</div>
Element ngoài cùng là bộ tag division (<div></div>), dùng để mark up cho phần nội dung lớn.
Nó bao gồm một tag tiêu đề (), một tag subheading (),
2 văn bản (), và một bước hình (<img>). Đoạn văn thứ 2 chứa tag chứa link (<a></a>) với attribute href chứa địa chỉ
URL đích. Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mơ tả của hình.
1.2.1.4 Tổng quan của các tag thơng dụng nhất của HTML HTML tags có 2 loại chính: block-level và inline tags. 1. Elements Block-level sẽ sử dụng tồn khơng gian trang web và ln bắt đầu dịng mới của trang web. Headings và paragraph là những ví dụ chính của block tags. 2. Inline elements chỉ chiếm phần nhỏ không gian web và khơng bắt đầu dịng mới của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level elements. Links và những tag nhấn mạnh là những tag inlines phổ biến. Block-Level Tags 3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>, và <body>. 1. Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML. 2. Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset. 14
3. Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang. <html> <head> <!-- META INFORMATION -->
Có tất cả 6 cấp độ trong HMTL, trải dài từ tới , h1 là cấp heading cao nhất và h6 là thấp nhất. Văn bản được đặt trong tag , nhưng blockquotes thì sử dụng<blockquote></blockquote>.
Divisions là những khu vực lớn, chứa nhiều paragraph, images, blockquotes,
và các yếu tố khác. Chúng ta có thể đánh dấu chúng bằng cách sử dụng <div></div>. Div element cũng có thể chứa div tag khác bên trong nó. Bạn cũng có thể dùng tag <ol></ol> cho danh sách theo thứ tự và <ul></ul> cho danh sách không theo thứ tự. Danh sách cần được được đặt trong tag <li></li>. Ví dụ, đây là cách hiển thị của một danh sách không theo thứ tự trong HTML:
Inline Tags Có nhiều inline tags được dùng để định dạng vnă bản. Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên. Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể:
Nó cũng hỗ trợ những tính năng mặc định như hỗ trợ scalable vector graphics (SVG) và MathML cho các cơng thức tốn học và phương trình khoa học.
16
HTML5 có rất nhiều cải thiện về mặt ngơn ngữ. Các tag mới nhằm giới thiệu cho trình duyệt biết mục đích chính của nội dung trong website là gì, việc này có lợi cho cả người đọc và cả search engine. Các semantic tags đó là <article></article>, <section></section>, <aside></aside>, <header>>, và <footer></footer>. Để hiểu rõ hơn sự khác biệt của từng loại, hãy xem qua bản so sánh chuyên sâu giữa HTML và HTML5 của chúng tôi.
1.2.1.6
Ưu điểm và nhược điểm của HTML
Như hầu hết mọi chuyện, HTML có ưu và nhược điểm của riêng nó. Ưu điểm:
Ngơn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
Sử dụng mượt mà trên hầu hết mọi trình duyệt. Có q trình học đơn giản và trực tiếp. Mã nguồn mở và hồn tồn miễn phí
Markup gọn gàng và đồng nhất. Chuẩn chính của web được vận hành bởi World Wide Web Consortium
(W3C). Dễ dàng tích hợp với các ngơn ngữ backend như PHP và Node.js.
Khuyết điểm:
Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết
các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers. Một số trình duyệt chậm hỗ trợ tính năng mới. 17
Khó kiểm sốt cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ khơng render được tag mới) 1.2.2. Giới thiệu về CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngơn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngơn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.
1.2.2.1 Bố cục và cấu trúc một đoạn CSS Bố cục của một đoạn CSS Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảng trống trên trang của bạn với các thuộc tính như:
Padding: Gồm khơng gian xung quanh nội dung (ví dụ: xung quanh đoạn
văn bản).
Border: Là đường liền nằm ngay bên ngoài phần đệm. Margin: Là khoảng cách xung quanh bên ngoài của phần tử.
18
Cấu trúc của một đoạn CSS Một đoạn CSS bao gồm các phần như thế này: vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; ..... } Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dịng khai báo thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng khơng giới hạn thuộc tính. Định nghĩa của các phần này như sau:
Bộ chọn (Selector): là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Các selector được áp dụng cho các trường hợp sau:
Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1. o Thuộc tính id và class của các phần tử. o Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu. Khai báo (Declaration): Khối khai báo chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo gồm tên và giá trị đặc tính CSS, phân tách bằng dấu phẩy. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy, khối khai báo nằm trong các dấu ngoặc móc. Trong ví dụ dưới đây, các phần tử
sẽ được căn giữa, chữ màu đỏ. o
p{ color: red; text-align: center;} 19
Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. (Với trường hợp này thì color được xem là một trong những thuộc tính của phần tử p). Chính vì vậy, với CSS thì bạn chỉ cần lựa chọn thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắc của mình.
Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta
sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiện nhiều lần để có thể cho một thuộc tính cụ thể nào đó.
Về danh sách các thuộc tính của CSS bạn có thể xem qua CSS Reference của Mozilla.
1.2.2.2 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 quá 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 quá 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. Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đó, q trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML. 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. Sử dụng CSS sẽ giúp bạn không cần thực hiện lặp lại các mơ tả cho từng thành phần. Từ đó, bạn có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm sốt dễ dàng hơn các lỗi khơng đáng có. CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau. 20
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. CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng điều chỉnh trang của bạn trở nên vô hạn.
1.2.2.3 Các phiên bản của CSS CSS được xuất hiện lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Bắt đầu đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn. Với phiên bản đầu tiên CSS có những đặc điểm cụ thể như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính. CSS phiên bản 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS đầu tiên và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều. Xuất hiện các kiểu font chữ mới để định dạng văn bản. Ngoài ra, sau phiên bản 2 cịn có một sự nâng cấp khác là CSS 2.1 được release vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc khơng tương thích cho người dùng. CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là module. Các module có khả năng mở rộng các tính năng được xác định trong CSS2. Nhằm duy trì khả năng tương thích ngược. Đặc biệt, CSS3 mang đến các bộ chọn (selector) và thuộc tính (properties) mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể tạo ra các hiệu ứng hình ảnh mà khơng cần tạo ra hình ảnh trước đó. CSS 4 là phiên bản kế thừa CSS 3 hiện vẫn đang được cập nhật, phát triển và được dự đoán sẽ có rất nhiều phương thức mới được thêm vào như: Mutability, Hyperlink… 21
1.2.2.4
Cách nhúng CSS vào website
Để CSS có thể thực thi trên website hoặc HTML Documents thì phải tiến hành nhúng CSS vào website. Nếu không, các định dạng CSS sẽ không thực thi trên HTML. Có 3 cách nhúng CSS vào website:
Inline CSS – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
Internal CSS – dùng thẻ <style> bên trong thẻ <head> của HTML để tạo ra nơi viết mã CSS. External CSS – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.
Inline CSS Đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS. Mã CSS chỉ tác động nên chính phần tử đó. Internal CSS Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ type=”text/css”></style> Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head> External CSS
Với External CSS: Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS. Đây là một tập tin hoàn toàn độc lập so với file (File này thường được đặt phần mở rộng là .css) sau đó dùng thẻ link đến tập tin CSS”> đặt ở phần head (cặp thẻ <head></head> của các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.
22
1.2.3. Giới Thiệu Về Bootstrap
1.2.3.1 Bootstrap Là Gì ? Bootstrap là một framework cho phép lập trình viên xây dựng website nhanh chóng theo một tiêu chuẩn nhất định. Trong đó, các website này có ưu điểm là thân thiện và tương thích với nhiều thiết bị khác nhau, hỗ trợ chức năng màn hình từ desktop đến mobile nhanh chóng. Đơn giản hơn, Bootstrap là kho sưu tập miễn phí chứa các mã nguồn mở và cơng cụ để tạo ra một mẫu website hồn chỉnh bao gồm: có HTML template, CSS template, JavaScript template. Nhờ việc xây dựng trên những thành tố sẵn có như: typography, forms, buttons, tables,grids, navigation, modal, image carousels và nhiều thành tố khác Bootstrap giúp việc thiết kế được dễ dàng, nhanh chóng hơn. Ngồi ra, trong Bootstrap cịn tích hợp thêm các plugin Javascript bên trong nó. Theo đó, với những thuộc tính về giao diện được quy định sẵn về màu sắc, kích thước, chiều cao, chiều rộng… từ Bootstrap người dùng có thể sáng tạo ra nhiều thiết kế web mới mẻ song vẫn tiết kiệm thời gian tối ưu. 1.2.3.2 Lịch sử phát triển bootstrap Bootstrap được sáng tạo bởi Mark Otto và Jacob Thornton tại Twitter. Ban đầu nó có tên gọi là Twitter Blueprint và được xuất bản với vai trò như một mã nguồn mở vào ngày 19/8/2011 trên GitHub. 3 năm sau khi ra mắt, Bootstrap vươn lên chiếm vị trí No1 trên GitHub, với ưu điểm vượt trội là giao diện tương thích với điện thoại thơng
minh. Ở thời điểm hiện tại, Bootstrap vẫn là cái tên framework được đông đảo người dùng ưa chuộng và lựa chọn nhiều nhất hiện nay. 1.2.3.3 Vì sao nên dùng bootstrap cho website? Sau khi hiểu Bootstrap là gì, hẳn bạn sẽ thắc mắc tại sao nên dùng framework này. Và dưới đây là những lí do dành cho bạn:
23
Bootstrap dễ sử dụng: Bootstrap được hoạt động dựa trên mã nguồn mở HTML, CSS và Javascript, cho phép người dùng dễ dàng điều chỉnh và thay đổi theo ý muốn. Cho phép Responsive, giúp người dùng thiết kế website thân thiện với mọi thiết
bị điện tử, di động giúp việc kết nối đến khách hàng được tối ưu trên mọi điểm chạm. Tùy chỉnh dễ dàng nhờ lợi thế được tạo ra từ các mã nguồn mở, bên cạnh đó cịn giúp bạn tiết kiệm được một lượng dung lượng đáng kể nhờ tính năng khơng cần tải mã nguồn về máy. Tương thích với trình duyệt như chrome, firefox, internet Explorer, safari, Opera của Bootstrap mang đến trải nghiệm tốt nhất cho người dùng. Lưu ý, Bootstrap chỉ hỗ trợ từ IE9 trở lên đối với IE browser vì IE8 khơng hỗ trợ HTML5 và CSS3. Chất lượng đầu ra tốt nhất với thiết kế mã nguồn mở, Bootstrap được coi là sáng tạo chung của cộng đồng lập trình viên trên tồn thế giới. 1.2.3.4 Những tính năng đặc biệt khi dùng Bootstrap Bootstrap bao gồm các tập tin CSS, Fonts và JavaScript được biên dịch và nén lại. Nhờ thiết kế dưới dạng module, Bootstrap cho phép tích hợp với nhiều mã nguồn mở như: Joomla, Magento, WordPress… Bootstrap cũng giúp người dùng tùy chỉnh framework trên website trước khi tải về và có thể sử dụng nó tại website của khung Với việc cung cấp thư viện các thành tố khổng lồ, Bootstrap giúp người dùng dễ dàng truy cập và thiết kế website hoàn chỉnh theo ý muốn Trong trường hợp muốn tích hợp jQuery trên Bootstrap, bạn chỉ cần khai báo các tính năng sử dụng trong quá trình thiết kế web là xong. 1.2.3.5 Cách cài đặt bootstrap đơn giản, hiệu quả
Hiểu Bootstrap là gì vẫn chưa đủ, bạn cần phải biết cách sử dụng chúng hiệu quả. Cụ thể, để cài đặt Bootstrap, bạn có thể làm theo 2 cách sau:
Cách 1: Tải trực tiếp từ trang cung cấp Bootstrap
Cách 2: tải Bootstrap gián tiếp qua CDN Bootstrap
Tải bootstrap về từ trang chủ Theo đó, bạn có thể tải xuống Bootstrap từ trang chủ và cài đặt chúng trên máy của mình. Cụ thể, khi tải về, Bootstrap sẽ gửi cho bạn 2 thư mục JS, CSS. nhiệm vụ của bạn là phải giải nén và cài đặt chúng vào web hosting thông qua giao thức FTP. Kết thúc công đoạn này, bạn có thể dùng Bootstrap để thiết kế web dễ dàng. 24
Lưu ý, do đây là phiên bản Bootstrap đã được biên dịch sẵn nên việc tải về và nhúng chúng vào website sẽ dễ dàng và nhanh chóng hơn. Sử dụng Bootstrap CDN Trong trường hợp không muốn tải và lưu trữ Bootstrap trên máy tính, bạn có thể nhúng Bootstrap qua CDN - Mạng phân phối nội dung (Content Delivery Network). Điều này giúp bạn tiết kiệm được lượng băng thông đáng kể. Đồng thời hỗ trợ việc tích hợp jQuery, JavaScript, CSS cung cấp nhiều tính năng cho website và mang lại trải nghiệm vượt trội cho người dùng. 1.2.3.6 Những lưu ý khi sử dụng Bootstrap Bootstrap hiện đang là một trong những nền tảng thiết kế web hiệu quả bậc nhất hiện nay và được nhiều người lựa chọn, Tuy nhiên, cần lưu ý một số lỗi sau trong q trình sử dụng Bootstrap:
Giao diện khơng hiển thị chính xác ngay trên các thiết bị khác nhau. lí do là bởi chúng sử dụng thuộc tính width khiến giao diện khơng điều chỉnh kích thước phù hợp với từng thiết bị cụ thể. Thay đổi nội dung của file bootstrap.css có thể khiến các dữ liệu bị hư khi cần nâng cấp. Do đó, thay vì sửa nội dung, bạn có thể overwrite- viết đè lên trang định dạng của riêng mình để thay đổi những thiết lập mặc định của Bootstrap. Hộp hội thoại Bootstrap modals có thể hiển thị khơng đúng cách. Qn sử dụng các thuộc tính data của Bootstrap Khơng khai báo thư viện hỗ trợ với trình duyệt IE8 và các trình duyệt cũ hơn.
Hi vọng với những chia sẻ trên đây đã giúp bạn hiểu rõ hơn về Bootstrap là gì. Theo đó, nếu muốn thiết kế một website chất lượng, chuyên nghiệp và thân thiện với người dùng, đừng quên tham khảo công cụ này nhé 1.2.4. Giới Thiệu Về JavaScript 1.2.4.1.
JavaScript Là Gì ?
JavaScript là một ngơn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn. JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML. Vậy ứng dụng thực tiễn của JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript JavaScript là ngơn ngữ lập trình được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động. 25
![]( me!</a><br />Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà<br />khơng cần tag đóng. Nhưng bạn cũng cần sử dụng attribute src để xác định nguồn<br />ảnh, ví dụ như:<br /><img src="/images/example.jpg" alt="Example image"><br />Nếu bạn muốn tìm hiểu thêm về tag HTML, hãy cân nhắc xem qua cheat sheet<br />HTML của chúng tơi (có thể download được file cheat sheet)<br /><br />1.2.1.5<br /><br />Sự phát triển của HTML. Có gì khác biệt giữa HTML và<br /><br />HTML5?<br />Từ những ngày đầu tiên, HTML đã là một phát minh vượt thời đại. W3C liên tục<br />xuất bản các bản cập nhật và nâng cấp.<br />HTML4 (cũng thường được gọi là “HTML”) được phát hành năm 1999, trong khi<br />phiên bản mới nhất, lớn nhất là HTML5 thì phát hành năm 2014. Phiên bản này đã<br />ra mắt rất nhiều tính năng quan trọng mới.<br />Một trong số các tính năng hấp dẫn nhất của HTML5 là khả năng hỗ trợ audio và<br />video. Thay vì sử dụng Flash Player, chúng ta giờ đây chỉ cần nhúng videos và<br />audio files vào trong trang web bằng tag <audio></audio> hay <video></video>.<br /><div style=){kind=link}