ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB ĐỀ TÀI THIẾT KẾ WEBSITE QUẢNG BÁ LÀNG NGHỀ THỦ CÔNG MỸ NGHỆ

LỜI NÓI ĐẦUThủ công mỹ nghệ FM - Nghệ thuật Tinh tế, Sáng Tạo, và Mang Đậm Bản Sắc Việt Trong thế giới ngày nay, khi công nghệ đang phát triển vượt bậc, thủ công mỹ nghệvẫn giữ vững vị t

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN



-ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB

ĐỀ TÀI THIẾT KẾ WEBSITE

QUẢNG BÁ LÀNG NGHỀ THỦ CÔNG MỸ NGHỆ

Giảng viên hướng dẫn: Th.S Đặng Đức Trung

Sinh viên thực hiện : Trần Thu Phương-Nguyễn Quỳnh Thảo Chi MSSV : 2200000600

Lớp : 22DMK4B

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN



-ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB

ĐỀ TÀI THIẾT KẾ WEBSITE

QUẢNG BÁ LÀNG NGHỀ THỦ CÔNG MỸ NGHỆ

Giảng viên hướng dẫn: Th.S Đặng Đức Trung

Sinh viên thực hiện : Trần Thu Phương - Nguyễn Quỳnh Thảo Chi MSSV : 2200000571-

Lớp : 22DMK4B

Tp.HCM, ngày tháng 1 năm 2024

ii

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

TRUNG TÂM KHẢO THÍ HỌC KỲ III NĂM HỌC 2022 - 2023 KỲ THI KẾT THÚC HỌC PHẦN

PHIẾU CHẤM THI TIỂU LUẬN/BÁO CÁO

Môn thi: Thiết Kế Web Mã lớp học phần: 22DMK4B

Sinh viên thực hiện : Trần Thu Phương MSSV: 2200000571

: Nguyễn Quỳnh Thảo Chi MSSV:

Ngày thi: /01/2024 Phòng thi:………

Đề tài tiểu luận/báo cáo của sinh viên :

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

Tiêu chí (theo

Điểm tối đa

Điểm đạt được

BM-ChT-TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

(Sinh viên phải đóng tờ này vào cuốn báo cáo)

Họ và tên sinh viên: MSSV:

Họ và tên sinh viên: MSSV:

Email: SĐT:

Chuyên ngành: Quản Trị Kinh Doanh Lớp: 22DMK4B

Tên đề tài: Xây dựng website giới thiệu làng thủ công mỹ nghệ

Giảng viên giảng dạy: Th.S Đặng Đức Trung

Thời gian thực hiện: từ ngày / /2023 đến /01/2024

LỜI CẢM ƠN

Trước hết, em muốn bày tỏ lòng biết ơn sâu sắc và chân thành nhất đến nhà trường và đặcbiệt là Thầy Đức Trung từ Khoa CNTT Thầy đã tạo điều kiện và hỗ trợ em một cách tận tâm trong suốt quá trình học tập và nghiên cứu đề tài này

Trong thời gian em thực hiện đồ án, em nhận được sự quan tâm và giúp đỡ đáng kể từ Thầy cùng các bạn bè Lời hướng dẫn và dạy bảo của Thầy Đức Trung đã đóng góp quan trọng, giúp đỡ em hoàn thiện đề tài một cách xuất sắc

Bước đầu chân vào thực tế, em nhận thức được mình còn hạn chế và gặp nhiều khó khăn Mong muốn nhận được những ý kiến đóng góp quý báu từ Thầy để cải thiện kiến thức và nâng cao ý thức của mình trong lĩnh vực này Em chân thành mong đợi những góp ý xây dựng từ Thầy để cùng nhau phát triển

Cuối cùng, em xin kính chúc Thầy Đức Trung năm mới 2024 đầy sức khỏe và công việc suôn sẻ Xin chân thành cảm ơn!

TP.HCM, ngày tháng 1 năm 2024

Ký tên

Trần Thu Phương – Nguyễn Quỳnh Thảo Chi

vi

LỜI NÓI ĐẦU

Thủ công mỹ nghệ FM - Nghệ thuật Tinh tế, Sáng Tạo, và Mang Đậm Bản Sắc Việt

Trong thế giới ngày nay, khi công nghệ đang phát triển vượt bậc, thủ công mỹ nghệvẫn giữ vững vị thế của mình, là nguồn cảm hứng không ngừng và là điểm độc đáo trongthị trường nghệ thuật Và giữa những tinh túy đó, Thủ công mỹ nghệ FM tỏa sáng nhưmột ngôi sao, đem đến không gian lưu giữ và phát triển nền văn hóa thủ công Việt

Thủ công mỹ nghệ FM không chỉ là sản phẩm, mà là biểu tượng của sự tinh tế vàsáng tạo Các nghệ nhân tại FM không chỉ là những người làm nghề mà còn là nhữngngười truyền cảm hứng, giữ gìn và phát triển những giá trị truyền thống Các sản phẩmthủ công tại FM không chỉ đẹp mắt với đường nét tinh tế, mà còn mang theo chút hồnquê, chất liệu tự nhiên, và câu chuyện của từng sáng tạo

Thủ công mỹ nghệ FM đặc biệt giới thiệu đến khách hàng không chỉ là sản phẩm màcòn là trải nghiệm nghệ thuật Tại FM, khách hàng sẽ không chỉ là người mua hàng mà lànhững người đồng hành, đồng cảm với nghệ sĩ và câu chuyện mà sản phẩm mang lại

Chúng tôi tự hào là người bảo tồn và phát triển nghệ thuật thủ công Việt Nam Quatừng sản phẩm, chúng tôi muốn truyền đạt cái đẹp của nền văn hóa, giữ gìn và phát triểnnhững giá trị truyền thống Thủ công mỹ nghệ FM - Nơi sự tinh tế và sáng tạo gặp gỡ,nơi câu chuyện nghệ thuật được kể bằng đôi bàn tay khéo léo và trái tim đam mê

NHẬN XÉT CỦA GIẢNG VIÊN

Sinh viên thực hiện

Trần Thu Phương – Nguyễn Quỳnh Thảo Chi

viii

MỤC LỤC

CHƯƠNG I: TỔNG QUAN ĐỀ TÀI 1

I Lý do chọn đề tài: 1

II Mục tiêu của đề tài 1

III Công cụ hỗ trợ 1

CHƯƠNG II: NHỮNG KIẾN THỨC ĐÃ HỌC 2

I Tổng quan về Internet & Web: 2

2 CSS (Cascading Style Sheets): 19

3 Bootstrap Framework: 20

4 Javascript: 25

5 Jquery: 26

6 Thiết kế giao diện web: 27

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

I Cấu trúc lưu trữ: 29

II Cấu trúc trang & Cấu trúc các thành phần ở mỗi trang: 29

1 Thiết kế các chức năng 29

2 Giao diện trang chủ (index.html) 30

3 Giao diện trang Giới thiệu (about.html) 32

4 Giao diện trang bộ sưu tập (gallery.html) 33

5 Giao diện trang chi tiết bộ sưu tập (gallery-single.html) 35

6 Giao diện trang dịch vụ (services.html) 36

DANH MỤC TỪ VIẾT TẮT

ARPANET Advanced Research Project Agency

x

CHƯƠNG I: TỔNG QUAN ĐỀ TÀI

I Lý do chọn đề tài:

- Nằm ở sự mong muốn góp phần bảo tồn và phát triển di sản văn hóa, giúp thế giới hiểu rõ hơn về những giá trị văn hóa và nghệ thuật độc đáo của Việt Nam Quảng bá thủ công mỹ nghệ không chỉ là việc giới thiệu sản phẩm, mà còn là việc kể chuyện vềlịch sử, truyền thống và tâm huyết của những nghệ nhân đằng sau từng tác phẩm

- Đồng thời, nghiên cứu về quảng bá thủ công mỹ nghệ có thể mang lại cái nhìn sâu sắc về thị trường nghệ thuật hiện đại và làm nổi bật vị thế của Việt Nam trong cộng đồng quốc tế Điều này không chỉ tạo cơ hội thị trường mới cho người làm nghệ thuật

mà còn giúp đẩy mạnh kinh tế văn hóa của đất nước

- Như vậy, lựa chọn đề tài quảng bá thủ công mỹ nghệ không chỉ là việc theo đuổi đam mê cá nhân mà còn là sứ mệnh bảo tồn và tôn vinh giá trị văn hóa, làm nổi bật vịthế của nghệ nhân và thủ công mỹ nghệ Việt Nam trên bản đồ nghệ thuật thế giới

II Mục tiêu của đề tài

Mục tiêu của việc quảng bá thủ công mỹ nghệ là tạo ra một hình ảnh mạnh mẽ và tích cực về nghệ thuật thủ công Việt Nam trên trường quốc tế Chúng ta đặt ra mụctiêu tăng cường nhận thức về giá trị văn hóa, sự sáng tạo và độ tinh tế của thủ công

mỹ nghệ Việt Nam

Ngoài ra, chúng ta muốn mở rộng thị trường cho thủ công mỹ nghệ Việt Nam, tạo

cơ hội kinh doanh cho các nghệ nhân và doanh nghiệp Mục tiêu này không chỉ giúp phát triển nền kinh tế văn hóa mà còn tạo ra nguồn thu nhập ổn định cho cộngđồng nghệ nhân

Quảng bá cũng nhằm mục đích tạo ra trải nghiệm tuyệt vời cho khách hàng quốc

tế, khuyến khích sự tương tác và hiểu biết sâu sắc hơn về quá trình sản xuất và ý nghĩa văn hóa của từng sản phẩm Mục tiêu cuối cùng là duy trì và nâng cao uy tíncủa thương hiệu, làm cho thủ công mỹ nghệ Việt Nam trở thành lựa chọn đáng tin cậy trên thị trường quốc tế."

III Công cụ hỗ trợ

- Visual Studio Code

2

CHƯƠNG II: NHỮNG KIẾN THỨC ĐÃ HỌC

I Tổng quan về Internet & Web:

1 Giao thức HTTP :

Hình 1.1 Giao thức HTTP

- HTTP: là giao thức thuộc lớp ứng dụng web, dựa trên mô hình client-server

Trình duyệt của client thực hiện gửi yêu cầu, nhận và hiển thị đối tượng web (HTML, hình ảnh, video, âm thanh ) còn web server chịu trách nhiệm nhận, xử lýyêu cầu từ client và gửi trả lời

4

2 Internet :

Hình 1.2 Độ bao phủ của Internet

- Internet là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm

các mạng máy tính được liên kết với nhau Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng

đã được chuẩn hóa (giao thức IP) Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân và các chính phủ trên toàn cầu

- Có thể nói Internet là mạng máy tính khổng lồ được tạo thành dựa trên sự giá nhậpcủa rất nhiều mạng máy tính của các doanh nghiệp, các viện nghiên cứu, các trường đại học, các tổ chức chính phủ, và của các cá nhân (người dùng) trên toàn thế giới

2.1 Lịch sử phát triển :

Hình 1.3 Lịch sử Internet

- ARPANET – (Advanced Research Projects Agency- ARPA) – 7/1969 được hình

thành từ năm 1969, từ một dự án nghiên cứu của Bộ quốc phòng Mỹ Lúc đó Internet chỉ liên kết 4 địa điểm:

 Viện nghiên cứu Stanford

 Đại học California – Los Angeles

 Đại học Utah

 Đại học California – Santa Barhara

- Thuật ngữ “Internet” xuất hiện lần đầu vào khoảng năm 1974 (tại thời điểm này,

tên gọi chính thức vẫn được gọi là ARPANET) Cho đến năm 1983, giao thức TCP/IP chính thức được coi như một tiêu chuẩn đối với ngành quân sự Mỹ, và tất

cả các máy tính thực hiện kết nối với ARPANET đều bắt buộc phải sử dụng chuẩnmới này

6

- Giao thức TCP/IP ngày càng thể hiện những ưu điểm của nó, và quan trọng nhất làkhả năng liên kết các hệ thống mạng khác nhau một cách dễ dàng Chính điều này cùng với các chính sách mở cửa đã cho phép các hệ thống mạng dùng cho mục đích nghiên cứu và thương mại có thể kết nối được với ARPANET.

- Internet được sử dụng trong mọi lĩnh vực, từ Thương mại, Chính trị, Quân sự, cho đến Nghiên cứu, Giáo dục, Văn hoá, Xã hội Chính vì thế, các dịch vụ trên

Internet không ngừng phát triển, tạo ra cho nhân loại một thời kỳ mới: kỷ nguyên

thương mại điện tử.

2.2 Một số khái niệm:

- ISP (Internet Service Provider)

- IP Address

- Domain name

- Hosting: Web hosting, Email hosting, File hosting,…

- Web page – Website

- Web Browser: Google Chrome, Safari, Firefox, Opera, Microsoft Edge,…

- Search Engine: Google, Bing, Yahoo search, …

- Social network: Facebook, Google +, Twitter, pinterest, …

3 World Wide Web (WWW) :

Hình 1.4 World Wide Web

- World Wide Web còn được gọi tắt là Web (hay WWW), được xem là “không gian thông tin toàn cầu” mà mọi người có thể truy cập qua các máy tính có kết nối với mạng Internet

- 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

8

II Ngôn ngữ: HTML – CSS – Bootstrap – Javascript – Jquery:

1 HTML – Ngôn ngữ trình bày giữ liệu web:

Hình 1.5 Ngôn ngữ HTML

- HTML (HyperText Markup Language) là một ngôn ngữ trình bày dữ liệu dựa trên nguyên tắc “đánh dấu”, được thiết kế ra để tạo nên các trang web với các mẫu thông tin trình bày trên World Wide Web

- Để tạo một tập tin HTML, người ta có thể sử dụng bất cứ phần mềm soạn thảo vănbản nào để biên tập nội dung theo cú pháp trình bày của ngôn ngữ HTML Các tập

- HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức của HTML là HTML 4.01 được công bố vào năm 1999.

1.1 Cấu trúc của một tài liệu HTML :

- Luôn tồn tại một “cặp thẻ” <html> và </html>

- Thường gồm có 2 phần: Head và Body

 Head: là sử dụng cho mục đích khai báo thông tin về trang HTML:

 Tiêu đề, loại dữ liệu để hiển thị trong trang, các thành phần hỗ trợ cho định dạng, các script (kịch bản),…

 Body: là phần thể hiện nội dung của trang HTML (người dùng có thể thấy được thông tin của phần này) Thường bao gồm:

- Minh họa một tài liệu HTML đơn giản:

 Các <!DOCTYPE html> tuyên bố xác định rằng tài liệu này là một tài liệu HTML5

 Phần tử <html> là phần tử gốc của một trang HTML

 Phần tử <head> chứa thông tin meta về trang HTML

 Phần tử <title> chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)

 Phần tử <body> xác định nội dung của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách,…

 Phần tử <h1> xác định một tiêu đề lớn

10

<p> Đoạn văn muốn trình bày </p>

- Các thẻ HTML hoàn toàn có thể sử dụng lồng nhau (Nested tags)

- Để tăng khả năng nhận biết cũng như trình bày dữ liệu, có thể sử dụng thuộc tính (attributes) cho Tags

- Nhớ rằng thuộc tính sử dụng trong thẻ lệnh, luôn tồn tại theo từng cặp ở dạng key=value.

- Chỉ nên sử dụng chữ thường đối với tên của tag, không sử dụng chữ in hoa

- Chỉ sử dụng ký tự hoặc ký số để đặt tên cho tập tin html, không sử dụng dấu tiếng việt và các ký tự đặc biệt khác

1.5 Trình bày & định dạng văn bản:

- Sử dụng cho tiêu đề (Headings): <h1>, <h2>, … <h6>

- Mô tả đoạn văn bản <p>, <br>

- Mô tả một phần văn bản <span>

- Giữ nguyên nội dung <pre>

- Tạo đường kẻ ngang <hr>

- Dùng cho định dạng <u>, <i>, <b>, <sub>, <sup>

- …

1.5.1 Kiểu HTML

- Style thuộc tính HTML được sử dụng để thêm kiểu vào một phần tử, chẳng hạn

như màu sắc phông chữ, kích thước,

- Thiết lập kiểu của một phần tử HTML, có thể được thực hiện với Style thuộc tính.

Style thuộc tính có cú pháp như sau:

Hình 1.13 Minh họa việc sử dụng kiểu HTML (nguồn: w3schools.com)1.6 Hình ảnh, liên kết, âm thanh và video :

1.6.1 Links – Liên kết

Cú pháp:

Hình 1.14 Cú pháp tag link HTMLThuộc tính:

- href: là thuộc tính cho phép chỉ ra liên kết cần chuyển tới thông qua url (Uniform Resource Locator) được sử dụng như giá trị cho thuộc tính này

- target: Đây là thuộc tính cho phép quy định nơi sẽ mở liên kết khi người dùng click vào Có khá nhiều giá trị quy ước, có thể sử dụng cho thuộc tính này Tuy nhiên chúng ta chỉ cần thiết ghi nhớ 2 giá trị này để sử dụng

o _self: Mở liên kết ngay trong cửa sổ hiện hành

o _blank: Mở liên kết trong một cửa sổ tài liệu mới (hoặc tab mới) của trình duyệt

1.6.2 Image – hình ảnh :

Cú pháp:

Hình 1.14 Cú pháp tag image HTMLImage có 4 thuộc tính, trong đó có 2 thuộc tính bắt buộc phải sử dụng

- src: thuộc tính này cho phép bạn chỉ ra một đường dẫn cùng với tên của hình cần thể hiện Đường dẫn ở đây có thể là một url chứa hình thuộc website hiện tại (trong tình huống này bạn buộc phải sử dụng đường dẫn tương đối, tức là kí hiệu / hoặc để để mô tả vị trí)

- alt: thuộc tính này cho phép gõ vào chuỗi kí tự diễn giải cho ý nghĩa trong của hình Thuộc tính này rất hữu dụng cho việc định hướng tìm kiếm hình ảnh trên website của chúng ta, giúp các search engine tìm thấy hình ảnh cầnthiết khi người dùng nhập từ khóa để tìm kiếm dưới dạng ngôn ngữ Trong trường hợp không tồn tại (có thể bị mất hoặc đường chỉ dẫn sai) thì trình duyệt sẽ tự động dùng chuỗi kí tự này để mô tả

- width: quy định độ rộng của hình

- height: quy định chiều cao của hình

Minh họa anchor & img tag:

Hình 1.15 họa Minh cho việc sử dụng A tag và Img tag

16

1.6.3 Audio tag – Âm thanh

Cú pháp:

Hình 1.16 Cú pháp tag audio HTMLThuộc tính:

- src: thuộc tính này cho phép bạn chỉ ra đường dẫn trỏ đến tập tin âm thanh

sẽ cung cấp cho tag hoạt động

- controls: đây là thuộc tính cho phép hiển thị giao diện điều khiển đối với

âm thanh mà bạn muốn nhúng vào trang web (VD: các nút play, pause, điềuchỉnh âm thanh,…)

- autoplay: nếu sử dụng thuộc tính này, file âm thanh sẽ tự động chạy khi trang web được mở ra, nếu ko dùng thuộc tính này, người dùng sẽ phải bấmnút play trên giao diện điều khiển mới có thể nghe âm thanh được

- loop: cho phép tự động lặp lại quá trình phát âm thanh mỗi khi kết thúc (VD: tự động chơi lại bài nhạc mà không cần bấm nút play)

- muted: thuộc tính này quy định mặc nhiên sẽ không phát âm thanh mặc dù file audo vẫn được phát trên trang web của bạn

Minh họa Audio tag: