học phần thiết kế giao diện web báo cáo về website giới thiệu về hà nội

Hiện nay, việc thiXt kX m`t trang website đã trởnên dễ dàng hơn va có nhiều công c\ hỗ trợ tiện lợi, để thiXt kX được m`t trangweb chZng ta cJn phải hiểu rõ bản chất và cách hoOt đ`ng củ

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA

1.Nguyễn Thị Thanh Huyền MSSV: 22013534

2 Lê Nguyễn Gia Huy

3 Nguyễn Hoài Nam

MSSV: 22014366 MSSV: 22013038Giảng viên: Ths Nguyễn Thị Hồng Hoa

Khoa: Công Nghệ Thông Tin

PHẦN THÔNG TIN CƠ BẢN 1.Thông tin cán bộ hỗ trợ, hướng dẫn:

1.1 Họ và tên: Ths Nguyễn Thị Hồng Hoa

1.2 Đơn vị: Khoa Công Nghệ Thông Tin

2 Tên tập thể tác giả

Nguyễn Thị Thanh Huyền 22013534 22013534@st.phenikaa-uni.edu.vn

Lê Nguyễn Gia Huy 22014366 22014366@st.phenikaa-uni.edu.vn

Nguyễn Hoài Nam 22013038 22013038@st.phenikaa-uni.edu.vn

3 Phân công nhiệm vụ

Nội dung công việc Sinh viên thực hiện

Nav footer, Giao diện của home Báo cáo Nguyễn Hoài Nam

Tổng hợp code, giao diện du lịch

của website

Nguyễn Thị Thanh HuyềnGiao diện của Ẩm thực của Website Lê Nguyễn Gia Huy

2

LỜI MỞ ĐẦU

NhHng nIm gJn đLy, Ngành Du lịch ngày càng lNn mOnh, việc quảng bá

du lịch ngày càng giH vai trò quan trọng trong các đời sống ĐTc biệt vNi sựxuất hiện của Website du lịch ngày nay đã khiXn nhiều cá nhLn, doanh nghiệplNn nhỏ ngày càng chZ [ hơn tNi việc áp d\ng nó để cOnh tranh, trưng bày sảnphẩm và tOo cơ h`i cho manh Hiện nay, việc thiXt kX m`t trang website đã trởnên dễ dàng hơn va có nhiều công c\ hỗ trợ tiện lợi, để thiXt kX được m`t trangweb chZng ta cJn phải hiểu rõ bản chất và cách hoOt đ`ng của ngôn ngH đánhdấu siêu vIn bản HTML (Hypertext Markup Language), kèm theo việc áp d\ngCSS (Cascading Style Sheets) và JavaSript, nó tOo thành b` ba công nghệ nềntảng cho World Wide Web (WWW) Lợi ích của CSS mang lOi là rất lNn, hỗtrợ các đoOn mã của HTML được tối ưu hơn, dễ nhan hơn, dễ chỉnh sửa hơn.Riêng về ngôn ngH JavaSript đã làm cho trang web sinh đ`ng hơn, bắt mắt vàtOo được thiện cảm vNi người nhan B` ba này bù đắp cho nhau nhHng thiXu sót

để thống nhất thành m`t thể hoàn chỉnh, từ đó tOo điều kiện cho nhiều cá nhLn,doanh nghiệp dễ dàng tiXp cận công nghệ web để tOo ra m`t website ph\c v\cho công việc, đời sống của nhHng người muốn khám phá về thủ đô Hà N`i nóichung và toàn b` Việt Nam nói riêng Va vậy, để nắm bắt được yêu cJu trênnên nhóm bọn em đã quyXt định thiXt kX m`t website giNi thiệu về Hà N`i vNicái tên TOP 10 HANOI ( TOP 10 HANOI là sẽ m`t trang web giNi thiệu về cácđịa điểm du lịch, giải trí, mua sắm, ẩm thực và các dịch v\ uy tín tOi thành phố

Hà N`i Trang web này cung cấp thông tin khách quan giZp người dùng có cáinhan tổng quan về nhHng nơi và dịch v\ đáng tin cậy, được đánh giá cao tOi HàN`i )

MỤC LỤC

NỘI DUNG

LỜI MỞ ĐẦU

MỤC LỤC

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1 Giới thiệu tổng quan về Internet

1.2 Ngôn ngữ: HTML – CSS – JavaScript

1.2.1 HTML

a Giới thiệu về HTML

b Cấu trúc cơ bản và một số thẻ thông dụng của HTML

1.2.2 CSS

a Giới thiệu về CSS

b Công dụng của CSS

c Sử dụng CSS:

d Phân nhóm định dạng CSS

e Bảng màu CSS

1.2.3 JavaScript:

a Giới thiệu về JavaSript

b Cách thức hoạt động của JavaScript

c Cách sử dụng JavaScript:

CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNG WEBSITE

2.1 Cấu trúc lưu trữ

2.2 Cấu trúc trang:

2.3 Phân tích cấu trúc mỗi site:

CHƯƠNG III: MÔ TẢ CÁC KỊCH BẢN SỬ DỤNG ĐỐI VỚI WEBSITE ĐÃ XÂY DỰNG

3.1 Nhu cầu người dùng:

3.2 Hướng dẫn sử dụng website:

CHƯƠNG IV: KẾT LUẬN……… 22

4.1 Kết quả đạt được

4.2 Hạn chế

4.3 Hướng phát triển

4

TÀI LIỆU THAM KHẢO………

Minh họa Internet

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1Giới thiệu tổng quan về Internet – Dịch vụ web

- Internet hay còn gọi là MOng là m`t hệ thống thông tin toàn cJu có thểđược truy nhập công c`ng gồm các mOng máy tính được liên kXt vNinhau Hệ thống này truyền thông tin theo kiểu nối chuyển gói dH liệu(packet switching) dựa trên m`t giao thức liên mOng đã được chuẩn hóa(giao thức IP) Hệ thống này bao gồm hàng ngàn mOng máy tính nhỏ hơncủa các doanh nghiệp, của các viện nghiên cứu và các trường đOi học,của người dùng cá nhLn và các chính phủ trên toàn cJu, được liên kXt bởim`t loOt các công nghệ mOng điện tử, không dLy và mOng quang.Internet mang theo m`t loOt các tài nguyên và dịch v\ thông tin, chẳnghOn như các tài liệu và ứng d\ng siêu vIn bản được liên kXt vNi nhaucủa World Wide Web (WWW), thư điện tử, điện thoOi và chia sẻ file

- Internet mang nhiều ứng d\ng và dịch v\, nổi bật nhất là World Wide

Web, bao gồm phương tiện truyền thông xã h`i, thư điện tử, ứng d\ng diđ`ng, trò chơi trực tuyXn

- HJu hXt các máy chủ cung cấp các dịch v\ ngày nay được lưu trH trong

các trung tLm dH liệu và n`i dung thường được truy cập thông qua cácmOng phLn phối n`i dung hiệu xuất cao

6

đó, các nhà phát triển đã thay thX nó bằng XHTML Hiện nay, phiên bảnmNi nhất của ngôn ngH này là HTML5.

- Bằng cách dùng HTML đ`ng hoTc Ajax, lập tranh viên có thể được tOo ra

và xử l[ bởi số lượng lNn các công c\, từ m`t chương tranh soOn thảo vInbản đơn giản – có thể gõ vào ngay từ nhHng dòng đJu tiên – cho đXnnhHng công c\ xuất bản WYSIWYG phức tOp Hypertext là cách mà cáctrang Web (được thiXt kX bằng HTML) được kXt nối vNi nhau Và nhưthX, đường link có trên trang Web được gọi là Hypertext Như tên gọi đãnói, HTML là ngôn ngH đánh dấu bằng thẻ (Markup Language), nghĩa làbOn sử d\ng HTML để đánh dấu m`t tài liệu text bằng các thẻ (tag) đểnói cho tranh duyệt Web cách để cấu trZc nó để hiển thị

b Cấu trúc cơ bản và một số thẻ thông dụng của HTML

- Cấu trZc cơ bản của HTML:

1<html>

2 <head>

3 <title>TIÊU ĐỀ CỦA TRANG WEB</title>

4 CÁC THẺ KHAI BÁO THÔNG TIN TRANG WEB

1 <html> Thẻ mở đJu của trang HTML none

2 <head></head> Thẻ chứa các thẻ trong phJn đJu trangHTML none

3 <title></title> Tiêu đề trang web none

4 <meta> Mô tả tổng quát về n`i dung trang web none

5 <link> Dùng để nhZng m`t tập tin nào đó vàotrang web none

6 <script></

script> Dùng để nhZng các tập tin JavaScript none

7 <style></style> Dùng để bao bọc m`t n`i dung về CSS none

8 <body></body> Thẻ chứa n`i dung chính của website blocklevel

9 <h1></h1> Thẻ để thể hiện tiêu đề của m`t vấn đề nào

10 <div></div> Thẻ này là thẻ thường dùng để chứa n`idung blocklevel

11 <span></span> Thẻ chứa n`i dung inline

12 <p></p> Thẻ chứa n`i dung (đoOn vIn) block

level

14 <ul></ul> KXt hợp vNi thẻ <li> để mô tả liệt kê theodOng danh sách blocklevel

15 <img> Thẻ dùng để hiển thị m`t hanh ảnh nào đó Inline

8

18 <br> Thẻ xuống hàng blocklevel

19 <hr> Thẻ tOo đường kẻ ngang levelblock

20 <table></table> TOo bảng block

level

24 <u></u> TOo chH gOch chLn inline

25 <s></s> TOo chH gOch cắt ngang inline

27 <button>

</button> TOo nZt bấm hiển thị thêm thông tin

blocklevel

29 <pre></pre> Định dOng n`i dung levelblock

Và còn nhiều m`t số thẻ khác như <nav>, <option>,v.v…

- Entities:

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

1.2.2.CSS

a Giới thiệu về CSS

- CSS (viXt tắt của từ Cascading Style Sheets) được dùng để miêu tả cáchtranh bày các tài liệu viXt bằng ngôn ngH HTML và XHTML Ngoài rangôn ngH định kiểu theo tJng cũng có thể dùng cho XML, SVG, XUL.Các đTc điểm kỹ thuật của CSS được duy tra bởi World Wide WebConsortium (W3C) Thay va đTt các thẻ quy định kiểu dáng cho vInbản HTML (hoTc XHTML) ngay trong n`i dung của nó, bOn nên sửd\ng CSS

b Công dụng của CSS

- HOn chX tối thiểu việc làm rối mã HTML của trang Web bằng các thẻquy định kiểu dáng (chH đậm, chH in nghiêng, chH có gOch chLn, chHmàu), khiXn mã nguồn của trang Web được gọn gàng hơn, tách n`i dungcủa trang Web và định dOng hiển thị, dễ dàng cho việc cập nhật n`i dung

- TOo ra các kiểu dáng có thể áp d\ng cho nhiều trang Web, giZp tránhphải lTp lOi việc định dOng cho các trang Web giống nhau

body font-family { :verdana; color:#0000FF;}

 Tham chiXu tNi tệp tin CSS trên từ trang Web bằng đoOn mã (mã có thể nằm ngoài thẻ <head>):

<linkrel="stylesheet"type="text/css"href="style.css"/>

d Phân nhóm định dạng CSS

Có thể chia các thu`c tính CSS thành 7 nhóm định dOng cơ bản

 Type Group: định dOng cho vIn bản

1 font-family Nhóm font được sử d\ng cho m`t đối

tượng HTML

2 font-size Kích thưNc của vIn bản

3 font-style Định kiểu cho font chH nghiêng hay thẳng

4 font-variant Định kiểu cho font chH thường hoTc chH

hoa

5 font-weight Kiểu của chH

6 line-height Chiều cao giHa các dòng của vIn bản

7 text-transform

Định dOng hiển thị của font chH trong vInbản như chH hoa, chH thường, chH cái đJuviXt hoa

8 text-decoration Định dOng các trang trí thêm cho vIn bản

 Background Group: định dOng hanh ảnh nền cho đối tượng nào đó

1 Background-color Màu nền của đối tượng HTML

2 Background-image Sử d\ng nền là hanh ảnh

3 Background-repeat ảnh làm nền cho đối tượngkiểu sử d\ng hanh nền nXu sử d\ng hanh

4 Background-position Vị trí bắt đJu hiển thị của hanh nền

5 Background-attachment ChX đ` cố định hanh nền

STT Nhóm thuộc tính Miêu tả

1 letter-spacing Khoảng cách giHa các k[ tự

2 word-spacing trong đoOn vIn bảnTIng hoTc giảm khoảng cách giHa các từ

3 text-align Sắp xXp các n`i dung theo chiều ngang

4 text-indent đoOn vIn bảnKhoảng cách thu`c vào đJu dòng của m`t

5 white-space vIn bảnĐịnh dOng cho khoảng trắng trong đoOn

6 display Các kiểu hiển thị của m`t phJn tử HTML

border-bottom-color, border-left-color Màu sắc của đường viền

 Box Group: định dOng kích thưNc, trị trí cho khối

1 widthmin-width, max-width Chiều r`ng của đối tượng

2 heightmin-height, max-height Chiều dài của đối tượng

3 margintop, right,

Hình minh họa các # màu

cơ bản CSS

6 clear

Xoá các thu`c tính float của các phJn tử phía trên

 List Group: định dOng cho các danh sách

1 list-style-position

Vị trí của icon <li>, giá trị mTc định là outsite

2 list-style-type Kiểu icon của <li>

3 list-style-image Hanh ảnh icon của <li>

 Position Group: định dOng tọa đ` của m`t phJn tử HTML nào đó

1 position Kiểu hiển thị của m`t đối tượng

2 top Khoảng cách từ đối tượng đXn vị trí top

7 overflow, overflow-x, overflow-y ChX đ` hiển thị thanh

cu`n

e Bảng màu CSS

a Giới thiệu về JavaSript

- JavaScript, theo phiên bản hiện hành, là m`t ngôn ngH lập tranh thôngdịch được phát triển từ các [ niệm nguyên mẫu Ngôn ngH này đượcdùng r`ng rãi cho các trang web (phía người dùng) cũng như phía máychủ (vNi Nodejs) Nó vốn được phát triển bởi Brendan Eich tOi Hãngtruyền thông Netscape vNi cái tên đJu tiên Mocha, rồi sau đó đổi tênthành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript

có cZ pháp tương tự C, nhưng nó gJn vNi Self hơn Java .js là phJn mởr`ng thường được dùng cho tập tin mã nguồn JavaScript

- JavaScript là ngôn ngH phức tOp hơn HTML hoTc CSS và nó không đượcphát hành ở dOng beta cho đXn nIm 1995 Ngày nay, JavaScript được hỗtrợ bởi tất cả các tranh duyệt web hiện đOi và được sử d\ng trên hJu hXtmọi trang web để có chức nIng mOnh mẽ và phức tOp hơn

b Cách thức hoạt động của JavaScript

JavaScript là ngôn ngH lập tranh dựa trên logic, có thể được sử d\ng đểsửa đổi n`i dung trang web và khiXn nó hoOt đ`ng theo nhiều cách khácnhau để đáp ứng vNi hành đ`ng của người dùng Các cách sử d\ng phổbiXn cho JavaScript bao gồm confirmation boxes, calls-to-action, vàthêm thông tin mNi vào thông tin hiện có

- Nói tóm lOi, JavaScript là ngôn ngH lập tranh cho phép các nhà phát triểnweb thiXt kX các trang web tương tác HJu hXt các hoOt đ`ng mà bOn sẽthấy trên m`t trang web là nhờ JavaScript, giZp tIng cường các kiểmsoát và hành vi mTc định của tranh duyệt

14

c Cách sử dụng JavaScript:

- Sử d\ng thẻ <script> đoOn mã JavaScript… </script>

- Tham chiXu dưNi dOng thư viện : sử d\ng tag link theo cZ pháp

<script type =”text/javascript” src=”url_trỏ_đXn _file_js”></script>Tam hiểu thêm về JQuery tOi đLy: https://www.w3schools.com/jqueryTheo dõi Youtube BODUA Group để tam hiểu về JavaScript nói riêng và ThiXt

kX Web nói chung:

https://www.youtube.com/channel/UCf3vstUYEnFWVjWumM3Ij3g

CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNG

WEBSITE

2.1Cấu trúc lưu trữ

- TOo 1 thư m\c theo yêu cJu vNi tiêu đề: “Nhóm”

- Chứa website giao diện trang chủ (index.html), các được giNi thiệu vào,

mở bán và trưng bày c\ thể như và cuối cùng là thư m\c hanh ảnh

(images) và tệp định dOng (style.css).

2.2Cấu trúc trang:

- Giao diện trực quan, đơn giản nhưng không kém phJn bắt mắt, giZpngười dùng có thể tam kiXm nhHng sản phẩm được trưng bày m`t cách dễdàng va các website đã được liên kXt chTt chẽ

- Hiện tOi, trang web đang chứa n`i dung thu`c thể loOi trưng bày, mô tả

và giNi thiệu về các địa điểm ẩm thực và du lịch tOi Thủ đô Hà N`i

2.3Phân tích cấu trúc mỗi site:

- Trang chủ gồm 3 phJn:

16

 Thanh điều hưNng: dùng thẻ <nav> , được tOo ra tỉ mỉ trong quá tranhthiXt kX size, font, color, và là cJu nối trong việc liên kXt các site khácvNi nhau.

 PhJn n`i dung:

+ ĐJu tiên là giNi thiệu về dùng các tag <nav> để bao quát <img>, tiêu đề vàtag <a>, định dOng các tag trên để trông được hài hòa về góc nhan

< nav >

    < div class = "nav-bar" >

      < div class = "logo" >

        < href = "index.html" >

          < img

src = 01.png" alt = "" >

+ PhJn thứ hai, tOo ra thư m\c chính cho home của web , gồm các thẻ

<span> , <p> và < button> để giNi thiệu lược về trang web này

  < div class = "main" >

    < div class = "content-box" >

      < h2 >

        < span > TOP 10 Hà Nội </ span > - TOP CÁC ĐỊA ĐIỂ( M, DỊCH VỤ

UY TÍN TẠI HÀ NỘI

    </ div >

  </ div >

+ NZt <button> ( Xem thêm ) khi ta nhấp chu`t vào dòng lệnh <script>

  < script >

 var loadMoreBtn = document getElementById ( 'loadMoreBtn' );

loadMoreBtn addEventListener ( 'click' , function () {

  alert ( 'Button clicked! You can add your logic here.' );

  < div class = "content-menu" >

    < div class = "content-menu-title" >

 PhJn cuối trang: tOo ra m`t trang web vNi hai phJn chính: "Ẩm Thực" và

"Du Lịch" tOi Hà N`i, trong đó phJn "Ẩm Thực" hiển thị danh sách các địa điểm ẩm thực và liên quan, còn phJn "Du Lịch" hiển thị m`t địa điểm chính và danh sách các địa điểm du lịch ph\, mỗi địa điểm kèm theo m`t h`p chứa thông tin "DU LỊCH"

  < div class = "food" >

    < div class = "title" >

     

< span > _ </ span >

      < h2 > Ẩ( M THỰC </ h2 >

     

< span > _ </ span >

CHƯƠNG III: MÔ TẢ CÁC KỊCH BẢN SỬ DỤNG ĐỐI VỚI

WEBSITE ĐÃ XÂY DỰNG

3.1.Nhu cầu người dùng:

- Ngày nay, nhiều người mong muốn biXt về các địa điểm tOi Hà N`i, nhưng họ

có thể không biXt đXn địa điểm nào để thIm Có thể ghé xem ngay hôm nay tOiwebsite TOP 10 HANOI này

3.2.Hướng dẫn sử dụng website:

- Để xem n`i dung của trang web, bOn có thể mở thư m\c chứa các file HTML bằng cách sử d\ng tranh duyệt web hoTc tranh soOn thảo mã nguồn HoTc truy cập vào đường link: