Xây dựng giao diện người dùng cho trang web sử dụng html ,css và javascript

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN / TIN HỌC QUẢN LÝ Xây Dựng giao diện người dùng cho trang web sử dụng HTML ,CSS Javascript Đơn vị thực tập : 3t Design Giảng viên hướng dẫn : TS Phan Đình Vấn LỜI CẢM ƠN Sau thời gian học tập trường truyền đạt kiến thức, lời khuyên công việc định hướng sau giúp đỡ tận tình q thầy cơ, em có hội ngồi thực tập cơng ty, tiếp xúc với môi trường làm việc thực tế, tiếp xúc với công cụ quản lý dự án đại… Em xin gửi lời cảm ơn chân thành đến thầy cô khoa Thống kê-Tin học giúp đỡ em suốt thời gian thực tập cho em lời tư vấn, nhận xét đắn đề em có đủ hành trang kiến thức để tìm vị trí thực tập tốt hồn thành báo cáo Để hồn thành tập báo cáo em xin gửi lời cảm ơn sâu sắc tới công ty 3T Design nhận em vào thực tập anh chị tận tình giúp đỡ, hỗ trợ nhiệt tình, củng cố kiến thức, tạo điều kiện thuận lợi trình thực tập LỜI CAM ĐOAN “Em xin cam đoan đề tài: “Xây Dựng giao diện người dùng cho trang web sử dụng HTML CSS Javascript.” cơng trình nghiên cứu độc lập em hướng dẫn anh chị Mentors cơng ty Ngồi khơng có chép người khác Đề tài, nội dung báo cáo thực tập sản phẩm mà em nỗ lực nghiên cứu trình học tập trường tham gia thực tập công ty.” MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU DANH MỤC CÁC TỪ VIẾT TẮT LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN 1.1 Tổng quan công ty 1.2 Tổng quan lập trình Front End Chương CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ HTML 5 2.1.1 Giới thiệu HTML 2.1.2 Khái niệm phần tử thuộc tính HTML 2.1.3 Cách sử dụng thẻ , HTML 2.1.4 Chèn ảnh liên kết HTML 2.1.5 Thẻ tiêu đề (heading) đoạn văn (paragraph) HTML 2.1.6 Thuộc tính ID Class HTML 2.1.7 Thuộc tính Style HTML 2.1.8 Phần tử khối phần tử nội tuyến 2.2 Ngôn ngữ CSS 2.2.1 Giới thiệu CSS 2.2.2 Các cú pháp CSS 2.2.3 Cấu trúc phần tử CSS 10 2.2.4 Cách tạo đường viền (border) cho phần tử 10 2.2.5 Cách thiết lập vùng đệm (padding) CSS 10 2.2.6 Khoảng cách lề (margin) CSS 11 2.2.7 Thiết lập màu sắc CSS 11 2.2.8 Kích thước phần tử (width/height) 11 2.2.9 Thiết kế web hiển thị responsive 12 2.3 Javascript 13 2.3.1 Tổng quan javascript 13 2.3.2 Những ưu điểm javascript mang lại 14 2.3.3 Hạn chế javascript 14 2.3.4 Hoạt động ngôn ngữ javascript website 15 2.3.5 So sánh javascript với ngôn ngữ khác 15 CHƯƠNG 3: TRIỂN KHAI DỰ ÁN 16 3.1 Khảo sát thông tin cần thiết 16 3.2 Thiết kế giao diện 17 3.2.1 Mục tiêu thiết kế giao diện 17 3.2.2 Cài đặt công cụ 18 Chương Phát Triển Giao Diện 19 4.1 Giao diện trang Home 19 4.2 giao diện trang pages 21 4.3 giao diện project 22 4.4 giao diện blog 23 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 24 5.1 Kết đạt tập 24 5.2 Kết luận hướng phát triển giải pháp 24 CHECK LIST CỦA BÁO CÁO 25 PHỤ LỤC 25 DANH MỤC HÌNH ẢNH Hình 1.1 Logo cơng ty Hình Visual Studio Code Hình Ngơn ngữ HTML Hình Ngơn ngữ CSS Hình Ngơn ngữ JavaScript DANH MỤC CÁC TỪ VIẾT TẮT STT Kí hiệu chữ viết Chữ viết đầy đủ tắt HTML Hypertext Markup Language CSS Cascading Style Sheets JS JavaScript LỜI MỞ ĐẦU Mục tiêu nghiên cứu của đề tài ● Tiết kiệm thời gian: Template mẫu giúp tiết kiệm thời gian cho người dùng cách cung cấp cấu trúc sẵn để thực công việc Thay phải tạo từ đầu tài liệu mới, ● Đảm bảo tính quán: Template mẫu giúp đảm bảo tính quán cách viết định dạng tài liệu ● Tăng tính thẩm mỹ: Template mẫu giúp tăng tính thẩm mỹ tài liệu Những template mẫu thiết kế đẹp mắt chun nghiệp giúp tài liệu trơng chuyên nghiệp hơn, tạo ấn tượng tốt với độc giả ● Thuận tiện cho việc quản lý: Khi sử dụng template mẫu, người dùng quản lý tài liệu cách dễ dàng Thay phải lưu trữ nhiều tài liệu khác nhau, người dùng sử dụng template mẫu để tạo phiên tài liệu khác nhau, tất lưu trữ mục lục thư mục Nhiệm vụ của đề tài Nhiệm vụ đề tài front end tạo trang web có giao diện đẹp mắt, dễ sử dụng thân thiện với người dùng Front end developer sử dụng ngôn ngữ HTML, CSS JavaScript để tạo trang web với đầy đủ chức đáp ứng yêu cầu người dùng Phương pháp nghiên cứu - Nghiên cứu kiến thức sẵn có internet - Hướng dẫn mentor - Xây dựng demo để hiểu rõ học Đối tượng phạm vi của đề tài Đối tượng nghiên cứu: Trong đề tài này, đối tượng nghiên cứu mẫu thiết kế website Các mẫu sử dụng để xây dựng trang web chuyên nghiệp hiệu quả, đáp ứng nhu cầu người dùng nhiều lĩnh vực khác Phạm vi nghiên cứu ● Các ngôn ngữ HTML, CSS JavaScript ● Các công cụ thiết kế web Adobe Photoshop, Illustrator, Sketch, Figma ● Các kỹ thuật phát triển web responsive design, SEO, UX design Kết cấu của đề tài Chương 1: Tổng Quan Chương 2: Cơ sở lý thuyết Chương 3:Triển khai dự án Chương 4: Phát Triển Giao diện Chương 5: Kết luận hướng phát triển - CHƯƠNG TỔNG QUAN 1.1 Tổng quan công ty Hình 1.1 Logo cơng ty Trong năm, Viện Đồ Họa 3T Design cung cấp dịch vụ thiết kế truyền thơng trọn gói đơn lẽ cho hàng trăm doanh nghiệp, đối tác khắp đất nước, với ấn phẩm dự án truyền thông chất lượng, giúp doanh nghiệp tơi ưu hóa mãng Thương hiệu Marketing sở hữu đội ngủ làm việc chuyên nghiệp đến từ 3T Design Ngoài chúng tơi cung cấp chương trình đào tạo, cho 1000 học viên bao gồm công ty, doanh nghiệp, học viên tồn quốc, với khóa học online offline chất lượng với giáo trình viên soạn bản, theo lộ trình hướng dẫn tận tình đội ngủ 3T Design giàu kinh nghiệm suốt trình học đáp ứng nhu cầu học tập học viên Với sứ mệnh: Kiến tạo tảng, Khơi nguồn sáng tạo, Nâng tầm đẳng cấp Viện Đồ Họa 3T Design giúp học viên tiếp cận dể dàng với công cụ sáng tạo hàng đầu hãng Adobe Autodesk 3T Design lấy chữ Tâm, Tầm, Tài làm tảng kim nam để định hướng phát triển Đến với 3T Design để trải nghiệm chuyên nghiệp cần mẫn đội ngủ