TRƯỜNG ĐẠI HỌC ĐẠI NAM
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO BÀI TẬP LỚN
MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End
TÊN ĐỀ TÀI
Thiết kế, lập trình Fron-End Website giày
Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện
Sinh viên thực hiện:
1. 1571020179: Dương Văn Môn
2. 1571020226: Phan Văn Sơn
3. 1571020209: Trần Trường Phước
4. 1571020206: Hoàng Minh Phụng
Hà Nội, tháng 12 năm 2022
TRƯỜNG ĐẠI HỌC ĐẠI NAM
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO BÀI TẬP LỚN
MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End
TÊN ĐỀ TÀI
Thiết kế, lập trình Fron-End Website giày
Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện
Sinh viên thực hiện:
1. 1571020179: Dương Văn Môn
2. 1571020226: Phan Văn Sơn
3. 1571020209: Trần Trường Phước
4. 1571020206: Hoàng Minh Phụng
Hà Nội, tháng 12 năm 2022
MỞ ĐẦU
-
Giới thiệu mơn học: Lập trình Front end là việc sử dụng các ngôn ngữ HTML,
CSS hay ngôn ngữ lập trình Javascript để các lập trình viên thiết kế ra các giao
diện ứng dụng hoặc trang web cho người dùng. Những gì bạn nhìn thấy, “chạm”,
“lướt”, tương tác trên màn hình chính là kết quả của lập trình Front end
-
Lý do chọn đề tài: Trong những năm gần đây, cùng với sự nâng cao của chất
lượng cuộc sống con người, nhu cầu mua sắm trang phục, phụ kiện, đặc biệt là
giày càng được đề cao và coi trọng. Giờ đây, chúng ta không chỉ coi giày là
phương tiện để di chuyển mà cịn được coi như một cơng cụ để thể hiện cá tính
và phong cách thời trang của bản thân. Nhất là lúa tuổi thanh thiếu niên, những
người năng động và mạnh mẽ, họ cần có cho mình những đôi giày thật đẹp để
mang lại sự tự tin và thoải mái khi bước đi. Như chúng ta đã thấy trong thị
trường hiện nay thì việc cạnh tranh về kinh doanh ngày trở nên quyết liệt và hầu
hết những cửa hàng vừa và lớn đều chú tâm đến việc làm khách hàng thỏa mãn
và tiện lợi một cách tốt nhất. Biết được những nhu cầu đó, đề tài “Xây dựng
website bán bán giày thể thao MSP” được xây dựng nhằm đáp ứng cho mọi
người tiêu dùng khắp cả nước và thơng qua hệ thống website này họ có thể đặt
mua các mặt hàng hay sản phẩm cần thiết. Không những thế nó cịn giúp cửa
hàng có thể quản lý tốt việc mua bán giúp mang lại lợi ích kinh doanh hiệu quả
hơn.
-
Nội dung ứng dụng các nội dung đã học vào đề tài: HTML, CSS, JS
-
Danh sách thành viên: Dương Văn Mơn, Phan Văn Sơn, Trần Trường Phước,
Hồng Minh Phụng
-
Phân công nhiệm vụ: Dương Văn Môn (Trang chủ + Word), Phan Văn Sơn +
Trần Trường Phước (Admin+Sản phẩm) , Hoàng Minh Phụng (Giới thiệu + Liên
hệ)
LỜI CẢM ƠN
Lời đầu tiên, em xin gởi lời cảm ơn chân thành đến giáo viên hướng dẫn
ThS. Nguyễn Đức Thiện. Trong suốt thời gian học và làm bài tập lớn đã tận
tình hướng dẫn, định hướng và giúp đỡ cho em trong suốt quá trình thực hiện bài
tập lớn này.Đồng thời, em cũng xin cảm ơn các quý thầy cô trong trường Đại
Học Đại Nam đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý
báu cho em trong thời gian em học tập để em có thể thực hiện tốt bài tập này.
Trong quá trình thực hiện bài tập, do kiến thức và thời gian thực hiện cịn hạn
chế nên khơng thể tránh khỏi những sai sót và thiếu sót. Vì vậy em mong q
thầy cơ thơng cảm và góp ý để em có thể hồn thiện bài tập. Và những lời góp ý
đó là những bước đệm để em có thể phát triển hơn sau này.
Em xin kính chúc tồn thể q thầy,cơ trường Đại Học Đại Nam lời chúc sức
khỏe và thành công trong công tác giảng dạy và học tập.
Em xin chân thành cảm ơn!
Hà Nội, Tháng 12, Năm 2022
Sinh viên thực hiện
Dương Văn Mơn
Trần Trường Phước
Phan Văn Sơn
Hồng Minh Phụng
I.
Chương 1 : Cơ sở lý thuyết về lập trình web Front-End
HTML
1. HTML là gì?
HTML (HyperText Markup language) là ngôn ngữ đánh dấu siêu văn bản , dung
để tạo ra các trang web .
HTML bao gồm một số tập hợp các thẻ dùng để :
Định nghĩa cấu trúc của trang web.
Định nghĩa nội dung của trang web
Tạo các siêu liên kết để liên kết đến nhưng trang web khác.
Chèn âm thanh, hình ảnh, video ,…. vào trang web.
2. Tập tin HTML là gì?
Tập tin HTML là một loại tin text có chứa các thẻ HTML(tập tin có phần
mở rộng là .html hoặc .htm).
Tập tin HTML còn được gọi là một trang web.
Nếu cú pháp có bị sai thì trình duyệt vẫn khơng báo lỗi , nó chỉ hiển thị
khơng như ý muốn.
3. Cấu trúc cơ bản của HTML:
Một tài liệu HTML ln được gói trong cặp tag <html> và </html>
Cặp tag <body> và </body> sẽ là nơi mô tả những gì có thể nhìn thấy của trang.
Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau:
<html>
<body>
Phầ
n trình bày nội
dung </body>
</html>
Ngồi phần body cịn có phần head, được viết bởi cặp tag <head></head>.
Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó
là <title></title>. Giữa <title> và </title> là tên của trang web được hiển thị phía
trên cùng của menubar. Như vậy một trang web với lúc này sẽ có cấu trúc như sau:
<head>
<title>Tiêu đềcủa trang
web</title> </head>
<body>
Phầ
n trình bày nội
dung </body>
</html>
4. Thẻ trong HTML.
Mỗi thẻ là một từ khóa được bao quanh bởi ngoặc nhọn (vd: <html>;
<head> ;<body>).
Mỗi thẻ HTML thường bao gồm 1 cặp :thẻ mở (bắt đầu định dạng), thẻ đóng (kết
thúc định dạng).
Thẻ đóng giống thẻ mở , nhưng ở thẻ đóng thì có thêm dấu gạch chéo “/”trước tên
thẻ (vd: </html>;</head>;</body>).
Văn bản cần định dạng được đặt giữa thẻ đóng và thẻ mở:
Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua.
Có 2 loại thẻ :
Thẻ đơn : Các thẻ chỉ có 1 thẻ mở ( vd: <img>)
Thẻ kép là một cặp thẻ đóng và mở ( vd:
;<i></i> ).
Các thẻ được lồng vào nhau nhưng không chéo nhau.
Vd đúng :
Tôi là <b>sinh</b>viên
Vd sai:
Tơi là <b>sinh
viên</b>
Một số thẻ có thêm các thuộc tính.
Dùng để chỉ định một số thuộc tính khác liên quan đến thẻ .
Nếu có , sẽ được khai báo trong thẻ mở.
Vd:
(color là một thuộc tính dùng chỉ màu sắc văn bản.)
II.
CSS
1. CSS là gì?
– CSS là viết tắt của cụm từ “Cascading Style Sheet”, nó là một ngơn ngữ quy định
cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng
rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách
mạng. Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển
thị khơng giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải
quyết bài toán này.
– CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần
như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó. Phương
thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là
tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp
dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Hình 1. Giới thiệu CSS
2. Tại sao phải học CSS?
– Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn chỉnh màu
nền,đường viền,đổ bóng... cho các thẻ html . Nếu 1 website mà chỉ làm bằng html
khơng sử dụng css thì website đó nhìn sẽ rất thơ xơ. Bạn có thể tưởng tượng nó
như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngồi chỉ cịn lại mỗi bộ khung
và máy.
– CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho các đối tượng với
sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả.
– Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.
3. Cấu trúc CSS.
Một đoạn CSS bao gồm 4 phần như thế này:
vùng chọn {
thuộc tính: giá trị;
thuộc tính:giá trị;
}
Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị
sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có một giá trị
riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS.
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một
dịng khai báo thuộc tính sẽ ln có dấu chấm phẩy ở cuối. Một vùng chọn có thể
sử dụng khơng giới hạn thuộc tính.
VD:
.product-related-title p {
font-family: var(--main-textfont); font-size: 14px;
font-weight:
bold; color:
#333333;
}
4. Cách chèn CSS vào HTML.
Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn css vào website:
– Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong phần
<head></head> của trang web.
<!DOCTYPE html>