Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet,chúng có thể là một trang HTML, một tấm hình, một file nhạc, một bộphim ...v.v.Cú pháp để tạo một thẻ anchorlink te
Trang 1KHOA KỸ THUẬT – CÔNG NGHỆ THÔNG TIN
- &
& -TÊN ĐỀ TÀI:
“XÂY DỰNG TRANG WEB BÁN HÀNG”
Giảng viên hướng dẫn:
Họ và tên sinh viên:
Mã sinh viên:
Lớp:
TS Trần Văn Cường Trần Thanh Tùng 21V216018
ĐHCNTT K63 (VB2)
Đồng Hới, ngày 28 tháng 04 năm 2024
Trang 2NHẬN XÉT VÀ CHO ĐIỂM CỦA GIẢNG VIÊN Cán bộ chấm thi 1
(Ký và ghi rõ họ tên)
Cán bộ chấm thi 2
(Ký và ghi rõ họ tên)
ĐIỂM BẰNG SỐ ĐIỂM BẰNG CHỮ CHỮ KÝ CBCT1 CHỮ KÝ CBCT2
Trang 3
MỤC LỤC
PHẦN MỞ ĐẦU 5
PHẦN NỘI DUNG 6
CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ HTML 6
1.1 Định nghĩa HTML 6
1.2 Các thành phần của HTML 6
1.3 Cơ bản về các thẻ HTML: 7
CHƯƠNG 2: TỔNG QUAN VỀ CSS 16
2.1 CSS là gì? 16
2.2 Bố cục và cấu trúc một đoạn CSS 16
2.3 Tại sao sử dụng CSS? 17
2.4 Cách nhúng CSS vào website 18
CHƯƠNG 3: WORDPRESS 21
3.1 WordPress là gì? 21
3.2 Các thành phần của Wordpress 22
3.3 Cấu trúc cơ bản của bộ quản trị WordPress 22
3.4 Lợi ích của việc sử dụng WordPress 23
3.5 Phân biệt giữa WordPress.com và WordPress.org 24
CHƯƠNG 4: KẾT QUẢ 25
CHƯƠNG 5: KẾT LUẬN 28
TÀI LIỆU THAM KHẢO 29
Trang 4DANH MỤC BẢNG BIỂU VÀ HÌNH VẼ
Hình 1: Logo chính thức của HTML5, phiên bản mới nhất của HTML 6
Hình 2: Thẻ Heading 8
Hình 3: Thẻ xuống dòng 8
Hình 4: Ví dụ về bảng 11
Hình 5: Ví dụ về Text field 12
Hình 6: Ví dụ về Radio button 13
Hình 7: Ví dụ về check box 13
Hình 8: Ví dụ về nút Submit 14
Hình 9: Logo chính thức của CSS, phiên bản mới nhất của CSS 16
Hình 10: Logo của Wordpress 21
Trang 5PHẦN MỞ ĐẦU
Lập trình web đang nổi lên là một công việc được các bạn trẻ ưa chuộng.Xuất phát từ việc internet đang ngày càng chi phối mạnh mẽ đến cuộc sống conngười ngày nay, lập trình web bỗng dưng trở thành một công việc lý tưởng chocác lập trình viên
HTML, CSS và Javascript được xem là bộ ba ngôn ngữ rất cần thiết đối vớimọi lập trình viên web Dù cho bạn muốn xây dựng nên một sản phẩm đơn giảnhay phức tạp thì cũng đều không thể thiếu đi sự "góp mặt" của chúng
Trong tiểu luận này chúng ta sẽ tìm hiểu những kiến thức cơ bản và cầnthiết nhất về HTML và CSS qua đó làm một website dựa trên nền tảngWORDPRESS
Trang 6PHẦN NỘI DUNG CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ HTML 1.1 Định nghĩa HTML
HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trangweb
- Hyper Text Markup langue chính là HTML.
- Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực
không phải như vậy, nó là một ngôn ngữ đánh dấu
- Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu.
- Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML
Hình 1: Logo chính thức của HTML5, phiên bản mới nhất của HTML
1.2 Các thành phần của HTML
- Các dạng thẻ HTML
<b> và <B> đều như nhau
- Thành phần HTML
Thành phần của HTML bắt đầu với thẻ: <b> Nội dung của nólà:web design resources
Trang 7 Mục đích của thẻ <b> là để xác định một thành phần của HTML phảiđược thể hiện dưới dạng in đậm.
Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc </body> Mục đích của thẻ<body> là xác định thành phần của HTML bao gồm nộidung của tài liệu
- Các thuộc tính của thẻ HTML
Những thẻ HTML đều có những thuộc tính riêng Những thuộc tính nàycung cấp thông tin về thành phần HTML của trang web Tag này xác định thànhphần thân của trang HTML: <body> Với một thuộc tính thêm vào là bgcolor, cóthể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giốngnhư sau: <body bgcolor="red"> hoặc <body bgcolor="#E6E6E6"> (#E6E6E6
là giá trị hex của màu) Thẻ này sẽ xác định dạng bảng HTML:<table> với mộtthuộc tính đường viền (border), có thể báo cho trình duyệt biết rằng bảng sẽkhông có đường viền: <table border="0">
Thuộc tính luôn luôn đi kèm một cặp như name/value:name="value"(tên="giá trị") thuộc tính luôn luôn được thêm vào thẻ mởđầu của thành phần HTML Dấu ngoặc kép, "red" hoặc 'red'
Giá trị thuộc tính nên được đặt trong dấu trích dẫn " và " Kiểu ngoặc képnhư vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng
Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đãmang dấu ngoặc kép rồi, thì việc sửdụng ngoặc đơn là cần thiết
Trang 8Hình 2: Thẻ Heading
Đoạn văn –paragraphs
Paragraphs được định dạng bởi thẻ<p>
<p> Đây là đoạn văn </p>
<p> Đây là đoạn văn khác </p>
Line Breaks -xuống dòng
Thẻ <br> được sử dụng khi muốn kết thúc một dòng nhưng lại không muốnbắt đầu một đoạn văn khác Thẻ <br> sẽ tạo ra một lần xuống dòng khi viết nó
<p> Đây <br> là một đo <br> đoạn văn với the # xuố' ng hàng </p>
Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt:
<! Chú thích ở # trong này >
Cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu lớnhơn
Hình 3: Thẻ xuống dòng
Trang 9Các ký tự đặc biệt trong HTML
Một vài ký tự tương tựnhư dấu nhỏ hơn < có một ý nghĩa đặc biệt trongHTML, và do đó không thể được sử dụng như là chữ được Do vậy để hiển thịđược dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt.Bởi vì dấu < xác định điểm bắt đầu của một thẻ HTML Nên nếu muốn trìnhduyệt hiển thị ký tự đó phải thêm và code của nó thêm những ký tự đặc biệt.Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tựhoặc một dấu # và mộtdãy số và cuối cùng là dấu chấm phẩy;
Để hiển thị được dấu nhỏ hơn trong HTML phải viết là < hoặc <Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơnnhiều Nhưng cái dở lại là không phải trình duyệt nào cũng hỗ trợ những tên mớinày, trong khi đó hầu hết các trình duyệt đều có thể nhận ra nó ở dạng số Nênchú ý ký tự đặc biệt phân biệt chữ hoa và chữ thường
Non-breaking space
Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (non-breakingspace) Thường thì HTML cắt bớt khoảng trống trong chữ Ví dụ nếu viết 10 chỗtrống trong text thì HTML sẽ loại bỏ 9 trong số đó Để thêm khoảng trống vàochữ phải sử dụng ký tự đặc biệt là
Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệukhác Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet,chúng có thể là một trang HTML, một tấm hình, một file nhạc, một bộphim v.v
Cú pháp để tạo một thẻ anchor
<a href="url"> link text</a>
Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộctính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xuất hiện
ở giữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết
Thuộc tính đích đến
Với thuộc tính đích đến, có thể xác định liên kết đến tài liệu khác sẽ được
mở ra ở đâu Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổtrình duyệt mới
<a href ="https://amthucnhabap.000webhostapp.com"> Mời vào trang
web cu #a Ha #i Lý </a>
Thẻ anchor và thuộc tính tên
Trang 10Thuộc tính tên được sử dụng để tạo một điểm neo đã được đặt tên Khi sửdụng điểm neo đã được đặt tên trước chúng ta có thể tạo ra những đường liên kết
mà người đọc có thể nhảy trực tiếp đến một phần cụ thể nào đó trên trang web,thay vì họ phải kéo xuống dưới để tìm thông tin Một dạng như là bookmarkvậy Dưới đây là cú pháp của điểm neo được đặt tên trước:
<a name="Tên">Chữ hiê# n thị ở # đây</a>
Thuộc tính tên được sử dụng để tạo điểm neo Tên của điểm neo có thể làbất cứ thứ gì Dòng code sau xác định điểm neo được đặt tên trước
<a name="Hướng dâ? n mới ">Tâ' t ca # Hướng dâ? n ở # đây</a>
Có thể nhận ra rằng thẻ anchor được đặt tên trước được hiển thị không có
gì đặc biệt Để trực tiếp liên kết phần Bài viết, chỉ phải thêm dấu # và tên củađiểm neo và cuối cùng của một URL Xem ví dụ sau:
<a href="http://www.amthucnhabap.000webhostapp.com/#baiviet">
Quay lại trang Bài viê' t </a>
Một đường liên kết đến phần ‘Quay lại trang Bài viết’:
<a href="#baiviet">Quay lại trang Bài viê' t</a>
Điểm neo được đặt tên thường được sử dụng để tạo Mục Lục tại trang đầutiên của một tài liệu nhiều trang Môi chương trong tài liệu đó được cho mộtđiểm neo, và liên kết đến mỗi một điểm neo này sẽ được đặt ở trên cùng của tàiliệu Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quaylên phần trên cùng của tài liệu
Thẻ frameset
Thẻ <frameset> xác định sẽ chia cửa sổ trình duyệt thành những frame nhưthế nào Môi một frame xác định một tập hợp các hàng hoặc cột Giá trị củahàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm
Trang 11chia ra làm nhiều cột dữ liệu với thẻ <td> Chữ td là chữ viết tắt của "table data",
là nội dung của cột dữ liệu Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danhsách, đoạn vắn, form và bảng v.v Đoạn code trên sẽ hiển thị như thế này trongcửa sổ trình duyệt:
HTML form và trường nhập liệu
HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau củangười dùng
Trang 12Một form là một vùng mà nó bao gồm những thành phần của form Thànhphần của form là những thành phần cho phép người dùng có thể điền thông tinnhư là trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form.Một form được xác định bởi thẻ <form>
<form>
<input type ="text" id ="fname" name ="fname">
<input type ="text" id ="lname" name ="lname">
</form>
Nhập liệu
Thẻ form được sử dụng nhiều nhất là thẻ <input> Loại dữ liệu nhập vào sẽđược xác định bởi thuộc tính của nó Những trường nhập liệu được sử dụngnhiều nhất được giải thích ở dưới đây
Text field
Text field được sử dụng khi đánh chữ, số v.v vào một form
<form>
<label for ="fname"> First name: </label><br>
<input type ="text" id ="fname" name ="fname"><br>
<label for ="lname"> Last name: </label><br>
<input type ="text" id ="lname" name ="lname">
<input type ="radio" id ="html" name ="fav_language" value ="HTML">
<label for ="html"> HTML </label><br>
<input type ="radio" id ="css" name ="fav_language" value ="CSS">
<label for ="css"> CSS </label><br>
<input type ="radio" id ="javascript" name ="fav_language" value =" JavaScript">
Trang 13<label for ="javascript"> JavaScript </label>
<label for ="vehicle1"> I have a bike </label><br>
<input type ="checkbox" id ="vehicle2" name ="vehicle2" value ="Car
">
<label for ="vehicle2"> I have a car </label><br>
<input type ="checkbox" id ="vehicle3" name ="vehicle3" value ="Boa t">
<label for ="vehicle3"> I have a boat </label>
đó được xác định trong thuộc tính hoạt động của form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được
<form action ="/action_page.php">
<label for ="fname"> First name: </label><br>
<input type ="text" id ="fname" name ="fname" value ="John"><br>
<label for ="lname"> Last name: </label><br>
<input type ="text" id ="lname" name ="lname" value ="Doe"><br><br>
Trang 14<input type ="submit" value ="Submit">
<img src="url">
Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tàiliệu Nếu muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thịđoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai
Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình Bởi vì nếu hình
đó không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết.Giá trị của thuộc tính alt là một dòng chữ như sau:
<img src="chef.jpg" alt="Cheft">
Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi màtrình duyệt không load được hình đó Trình duyệt sau đó sẽ hiển thị dòng chữthay vì hình ảnh Nên tạo thói quen thêm thuộc tính "alt" vào mỗi tấm hình trênmột trang, để tăng khả năng hiển thị và giúp những người lướt web mà khôngdùng hình ảnh
HTML Background
Một background đẹp có thể làm cho trang nhìn đẹp mắt hơn
Backgrounds
Trang 15Thẻ <body> có hai thuộc tính có thể chọn loại background cho mình.Background có thể là một màu hoặc là một tấm hình.
Bgcolor
Thuộc tính bgcolor thiết lập hình nền là một màu Giá trị của thuộc tính này
là hệ số hexadecimal, một giá trị màu RGB hoặc một tên màu
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
Địa chỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đốinhư là ở dòng thứ 2
Trang 16CHƯƠNG 2: TỔNG QUAN VỀ CSS 2.1 CSS là gì?
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được
sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánhdấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web Bạn
có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trênwebsite như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúpchúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắctrang, đổi màu chữ, font chữ, thay đổi cấu trúc…
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm
1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.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ùngchọ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 đó
Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữmarkup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạonên giao diện website), chúng là không thể tách rời
Hình 9: Logo chính thức của CSS, phiên bản mới nhất của CSS
- Border: Là đường liền nằm ngay bên ngoài phần đệm.
- Margin: Là khoảng cách xung quanh bên ngoài của phần tử.
Trang 17Cấu trúc của một đoạn CSS
Một đoạn CSS bao gồm các 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ẽ luôn 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ủaCSS Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗimột dòng khai báo thuộc tính sẽ luôn 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
Định nghĩa của các phần này như sau:
Bộ chọn (Selector): là mẫu để chọn phần tử HTML mà bạn muốn định
nghĩa phong cách Các selector được áp dụng cho các trường hợp sau:
- Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1.
- Thuộc tính id và class của các phần tử.
- Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân
cấp tài liệu
Khai báo (Declaration): Khối khai báo chứa một hoặc nhiều khai báo,
phân tách với nhau bằng các dấu chấm phẩy Mỗi khai báo gồm tên và giá trịđặc tính CSS, phân tách bằng dấu phẩy Khai báo CSS luôn kết thúc bằng dấuchấm phẩy, khối khai báo nằm trong các dấu ngoặc móc Trong ví dụ dưới đây,các phần tử <p> sẽ được căn giữa, chữ màu đỏ
p { color: red; text-align: center; }
- Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một
phần tử HTML (Với trường hợp này thì color được xem là một trongnhững thuộc tính của phần tử p) Chính vì vậy, với CSS thì bạn chỉ cầnlựa chọn thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắccủa mình
- Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng
ta sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiệnnhiều lần để có thể cho một thuộc tính cụ thể nào đó
2.3 Tại sao sử dụng CSS?
Đây là ba lợi ích chính của CSS:
1 Giải quyết một vấn đề lớn