Do đó nhóm em đã lựa chọn đề tài “Thiết kế web thời trang” nhằm mục đích tìm hiểu và nghiên cứu về sự vận hành và các chức năng của Website cũng như trau dồi, họchỏi thêm các kiến thức v
Tổng quan về html, mối quan hệ HTML, CSS, JS
Lịch sử của HTML
Vào cuối năm 1991, Tim Berners-Lee đã công khai phiên bản HTML đầu tiên mang tên HTML Tags, với thiết kế đơn giản và 18 phần tử Đến năm 1995, IETF hoàn thành "HTML 2.0", và tiếp theo là phiên bản HTML 4.01 được công bố vào năm 1999.
Đến năm 2000, các phiên bản HTML đã được thay thế bởi XHTML, và vào năm 2014, HTML5 ra đời với nhiều cải tiến đáng kể Sự nâng cấp này được thể hiện qua việc bổ sung nhiều thẻ vào markup, giúp xác định rõ ràng hơn nội dung thuộc các thể loại khác nhau.
HTML là gì?
HTML, hay còn gọi là Hypertext Markup Language, là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo và cấu trúc các phần trong trang web và ứng dụng Nó giúp phân chia các đoạn văn, tiêu đề, liên kết và blockquotes Tuy nhiên, HTML không phải là một ngôn ngữ lập trình, mà chỉ là một ngôn ngữ đánh dấu, do đó, nó không thể thực hiện các chức năng "động" Nói cách khác, HTML tương tự như phần mềm Microsoft Word, chủ yếu có tác dụng định dạng các thành phần có trong website.
HTML hoạt động như thế nào?
HTML (Ngôn ngữ Đánh dấu Siêu văn bản) hoạt động thông qua việc sử dụng các thẻ và thuộc tính để định dạng và hiển thị các phần tử trên trang web Một trang HTML bao gồm các thẻ HTML cùng với nội dung được đặt giữa các thẻ đó.
Thẻ “p” đại diện cho đoạn văn bản trong một đoạn,
Thẻ “img” đại diện cho hình ảnh,…
Thẻ “a” đại diện cho một liên kết,….
Mỗi thẻ HTML sẽ có tác dụng và cú pháp riêng, được đặt giữa các ký tự
Các thẻ HTML được xác định bằng ký tự "", với nội dung nằm giữa thẻ mở và thẻ đóng, được phân cách bởi dấu "/" Chẳng hạn, để tạo một đoạn văn bản, bạn sử dụng thẻ "p" như sau:
Nội dung ở đây
.
Đây là một đoạn văn bản.
Ngoài ra, HTML còn sử dụng các thuộc tính để định dạng và tùy chỉnh các phần tử trên trang web.
Thuộc tính “href” được sử dụng để chỉ định đường dẫn của liên kết,
Thuộc tính “src” được dùng để chỉ định đường dẫn của video hoặc hình ảnh,….
Khi trình duyệt web hiển thị một trang HTML, nó tải và phân tích các thẻ cùng thuộc tính để hiển thị các phần tử trên trang web theo định dạng được mã hóa trong HTML.
Các tag thông dụng của HTML
: Thẻ mở đầu của trang HTML - none
: Thẻ chứa các thẻ trong phần đầu của trang HTML - none
: Tiêu đề trang web - none
: Mô tả tổng quát về nội dung trang web - none
: Dùng để nhúng một tập tin nào đó vào trang web - none
: Dùng để nhúng các tập tin javascript - none
: Dùng để bao bọc một nội dung về css - none
: Thẻ chứa nội dung chính của website - block level
: Thẻ để hiện tiêu đề của một vấn đề nào đó - block level
: Thẻ này thường dùng để chứa nội dung - block level
: Thẻ chứa nội dung - inline
: Thẻ chứa nội dung (đoạn văn) - block level
: Thẻ canh giữa các đối tượng nằm bên trong - block level
: Thẻ dùng để hiển thị một hình ảnh nào đó - inline
: Thẻ hiển thị những phần tử trong form nhập liệu - block level
: Thẻ xuống hàng - block level
: Thẻ tạo đường kẻ ngang - block level
: Tạo bảng - block level
: Tạo frame - block level
: Tạo chữ gạch dưới - inline
: Tạo chữ gạch cắt ngang - inline
: Tạo kiểu chứ - inline
: Mộ tả một phần của trích dẫn - block level
: Tạo kiểu chữ cho phần mô tả mã nguồn - block level
: Định dạng nội dung - block level
Ưu và nhược điểm của HTML
HTML là chuẩn mực Internet do tổ chức W3C (World Wide Web Consortium) duy trì
Có mã nguồn mở, cho phép dữ liệu được công khai và miễn phí sử dụng.
Dễ dàng tìm hiểu và sử dụng nên HTML trở nên rất phổ biến, nhờ đó có được nguồn tài nguyên phong phú.
Tất cả các trình duyệt hiện nay đều hỗ trợ ngôn ngữ HTML, được cài đặt mặc định trong mọi cửa sổ, vì vậy người dùng không cần phải mua thêm phần mềm hỗ trợ nào khác.
Đánh dấu (Markup) ngắn gọn và đồng nhất.
Có thể tích hợp được với nhiều ngôn ngữ khác (PHP, Node.js,…) một cách dễ dàng.
HTML chủ yếu được dùng trong thiết kế các trang web tĩnh, vì vậy nó sẽ không hữu ích khi sử dụng để tạo các trang web động.
Để tạo một trang web đơn giản vẫn phải viết rất nhiều mã, trong đó có thể chứa các mã phức tạp để xử lý.
Tính năng bảo mật của HTML không quá cao nên rất dễ bị tin tặc tấn công.
Các trang web được lập trình riêng biệt với nhau nên sẽ không có tính tập trung.
HTML, CSS và JavaScript liên quan với nhau như thế nào?
Trong quá trình xây dựng nên một website hoàn chỉnh, bộ 3 HTML, CSS và JavaScript sẽ đảm nhận các công việc sau:
HTML có nhiệm vụ xây dựng nội dung, cấu trúc cơ bản trong các trang web.
Còn CSS được sử dụng nhằm kiểm soát hiệu quả trình bày, định dạng và bố cục nội dung.
Và cuối là JavaScript sẽ được dùng để kiểm soát hành vi của các yếu tố khác nhau trong quá trình xây dựng website.
Có thể xem HTML, CSS và JavaScript là bộ 3 kiến thức nền tảng mà mọi lập trình viên bắt buộc phải nắm vững.
Chi tiết các trang
Đăng nhập
Đăng ký
Header
Footer
3.6 Trang Hàng Nam Mới Về
Trang chi tiết sản phẩm hàng nam mới về 1
Hình 14 Chi tiết sản phẩm hàng nam mới về 1
Trang chi tiết sản phẩm hàng nam mới về 2
Hình 15 Chi tiết sản phẩm hàng nam mới về 2
Trang chi tiết sản phẩm thịnh hành cho nam 1
Hình 18 Sản phẩm thịnh hành cho nam 1
Trang chi tiết sản phẩm thịnh hành cho nam 2
Hình 19 Sản phẩm thịnh hành cho nam 2
Trang chi tiết sản phẩm quần nam 1
Hình 22 Chi tiết sản phẩm quần nam 1
Trang chi tiết sản phẩm quần nam 2
Hình 23 Chi tiết sản phẩm quần nam 2
Trang sản phẩm mới về dành cho nữ
Hình 25 Sản phẩm mới về cho nữ
Trang chi tiết sản phẩm mới về cho nữ 1
Hình 26 Chi tiết sản phẩm mới về cho nữ 1
Trang chi tiết sản phẩm mới về cho nữ 2
Hình 27 Chi tiết sản phẩm mới về cho nữ 2
Trang chi tiết sản phẩm mới về cho nữ 3
Hình 28 Chi tiết sản phẩm mới về cho nữ 3
Trang chi tiết sản phẩm mới về cho nữ 4
Hình 29 Chi tiết sản phẩm mới về cho nữ 4
Trang chi tiết sản phẩm mới về cho nữ 5
Hình 30 Chi tiết sản phẩm mới về cho nữ 5
Trang chi tiết sản phẩm mới về cho nữ 6
Hình 31 Chi tiết sản phẩm mới về cho nữ 6
Trang chi tiết sản phẩm mới về cho nữ 7
Hình 32 Chi tiết sản phẩm mới về cho nữ 7
Trang chi tiết sản phẩm mới về cho nữ 8
Hình 33 Chi tiết sản phẩm mới về cho nữ 8
Trang sản phẩm thịnh hành của nữ
Hình 34 Sản phẩm thịnh hành của nữ
Trang chi tiết sản phẩm thịnh hành cho nữ 1
Hình 35 Chi tiết sản phẩm thịnh hành cho nữ 1
Trang chi tiết sản phẩm thịnh hành cho nữ 2
3.31 Trang chi tiết sản phẩm thịnh hành cho nữ 3
Hình 37 Chi tiết sản phẩm thịnh hành cho nữ 3
3.32 Trang sản phẩm quần jeans nữ
Hình 38 Sản phẩm quần jeans nữ
3.33 Trang chi tiết sản phẩm quần jeans nữ 1
Hình 39 Chi tiết sản phẩm quần jeans nữ 1
3.34 Trang chi tiết sản phẩm quần jeans nữ 2
Hình 40 Chi tiết sản phẩm quần jeans nữ 2
3.35 Trang chi tiết sản phẩm quần jeans nữ 3
Hình 41 Chi tiết sản phẩm quần jeans nữ 3
3.36 Trang sản phẩm mới về cho trẻ em
Hình 42 Sản phẩm mới về cho trẻ em
3.37 Trang sản phẩm đồ dành cho bé trai
Hình 43 Sản phẩm cho bé trai 3.38 Trang sản phẩm đồ dành cho bé gái
Hình 44 Sản phẩm cho bé gái
Trang chi tiết sản phẩm quần jeans nữ 2
Hình 39 Chi tiết sản phẩm quần jeans nữ 1
Trang chi tiết sản phẩm quần jeans nữ 3
Hình 40 Chi tiết sản phẩm quần jeans nữ 2
3.35 Trang chi tiết sản phẩm quần jeans nữ 3
Hình 41 Chi tiết sản phẩm quần jeans nữ 3
3.36 Trang sản phẩm mới về cho trẻ em
Hình 42 Sản phẩm mới về cho trẻ em
3.37 Trang sản phẩm đồ dành cho bé trai
Hình 43 Sản phẩm cho bé trai 3.38 Trang sản phẩm đồ dành cho bé gái
Hình 44 Sản phẩm cho bé gái
Trang sản phẩm đồ dành cho bé gái
Hình 43 Sản phẩm cho bé trai 3.38 Trang sản phẩm đồ dành cho bé gái
Hình 44 Sản phẩm cho bé gái
Trang About Us
₋ Xác nhận mật khẩu trùng với định dạng yêu cầu
Hình 46 Chức năng đăng kí tài khoản
₋ Mô tả: khi người dùng nhập password và click vào nút “mắt” ở bên cạnh mật khẩu sẽ chuyển từ trạng thái ẩn sang hiện.
Hình 47 Chức năng ẩn hiện password
Chi tiết các chức năng
Chức năng đăng kí
₋ Xác nhận mật khẩu trùng với định dạng yêu cầu
Hình 46 Chức năng đăng kí tài khoản
Ẩn hiện password
₋ Mô tả: khi người dùng nhập password và click vào nút “mắt” ở bên cạnh mật khẩu sẽ chuyển từ trạng thái ẩn sang hiện.
Hình 47 Chức năng ẩn hiện password
Chức năng Slider của trang chủ
₋ Mô tả: khi người dùng dừng ở trang chủ, trong 5s thì các slide sẽ tự chuyển tiếp
Có thể thao tác thủ công bằng cách click vào dấu chấm tròn phía dưới slide.
Chức năng Dropdown của các item trong menu
₋ Mô tả: khi người dùng ấn vào các menu bên trái thì các menu con sẽ xuất hiện.
Thanh Menu
₋ Mô tả: khi di chuột vào thì hiện lên các menu con
Chức năng xem chi tiết sản phẩm
₋ Mô tả: khi ấn vào ảnh sản phẩm phụ thì ảnh phụ sẽ thay thế ảnh chính.
Hình 51 Chức năng xem chi tiết sản phẩm
₋ Mô tả: khi người dùng di chuột vào giỏ hàng sẽ xem được các sản phẩm đã mua.