ĐỒ Á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Ệ

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

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNHKHOA CÔNG NGHỆ THÔNG TIN 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ÀNHKHOA CÔNG NGHỆ THÔNG TIN 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 :

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 - 2023KỲ 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):

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: 22DMK4BTê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à đặc biệ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 trong thị 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ững ngườ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ẩm thủ 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ồn quê, 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 Qua từ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ển nhữ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

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

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ục tiê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ín củ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ập củ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ẩn mớ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ăn bả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

 Phần tử <p> xác định một đoạn văn

Hình 1.6 Một tài liệu HTML đơn giản 1.2 Phần tử HTML là gì ?

Hình 1.7 HTML Elements

- Phần tử HTML được xác định bởi thẻ bắt đầu, một nội dung nhất định và một thẻ kết thúc: <tagname> Tiêu đề của tôi </tagname>

<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 HTML Thuộ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 HTML

Image 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ần thiế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 HTML Thuộ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ều chỉ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ấm nú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:

1.6.4 Video tag – Video, hoạt cảnh : Cú pháp:

Hình 1.18 Cú pháp tag video HTML Thuộ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 video hoặc hoạt cảnh sẽ cung cấp cho video 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ều chỉnh âm thanh,…)

- width: quy định độ rộng của video (đơn vị tính bằng chấm điểm - Pixel) - height: quy định chiều cao của video (đơn vị tính bằng chấm điểm - Pixel)

Minh họa Video tag:

Hình 1.19 Minh họa cho việc sử dụng Video tag

18