De cuong 1

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 6

LÝ THUYẾT

Câu 1: Bạn hãy cho biết khái niệm về URL là gì? Mô tả về đặc điểm và cấu trúc của một URL?
- Khái niệm: URL là viết tắt của Uniform Resource Locator, dịch sang tiếng Việt là hệ thống định vị tài
nguyên thống nhất. Mỗi URL hợp lệ sẽ trỏ đến một tài nguyên duy nhất trên Internet, tài nguyên đó có thể là
trang web, tài liệu CSS, hình ảnh,…URL đóng vai trò là địa chỉ chính xác của các nội dung được lưu trữ
trên internet, giúp người dễ dàng truy cập đến các nội dung đó.
- Cấu trúc URL:
- - Scheme: Giao thức truy cập tài nguyên
- Domain: Tên miền / tên máy chủ
- - Port: Cổng truy xuất (có thể bỏ qua)
- - Resource path: Đường dẫn đến tài nguyên
- - Query: Tham số truy vấn (có thể bỏ qua)
- - Fragment: Phân mảnh (có thể bỏ qua)
- Đặc điểm: URL thường bắt đầu bằng một giao thức như “http://” hoặc “https://”, sau đó là tên miền của
trang web, và cuối cùng là đường dẫn đến tài nguyên cụ thể.

Câu 2: Bạn hãy trình bày một cấu trúc cơ bản của tài liệu HTML? Hãy cho biết tác dụng của các cặp
thẻ được khai báo trong cấu trúc cơ bản trên của tài liệu HTML?
Cấu trúc cơ bản
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
</body>
</html>
Tác dụng của các cặp thẻ
<!DOCTYPE html> : Thẻ khai báo loại tập tin/tài liệu
<html></html> : Thẻ đóng và mở tài liệu HTML, định nghĩa phạm vi của văn bản HTML.
<head></head> : Phần đầu của trang, cặp tag chứa thông tin dữ liệu, không hiển thị ra trình duyệt, chủ yếu
chứa thông tin về tài liệu HTML (gọi là siêu văn bản) các quy tắc CSS, các mã kịch bản…
<title></title> : mô tả tiêu đề trang web, thông tin hiển thị trẻn tab của trang hoặc thanh tiêu đề của cửa sổ
trình duyệt.
<body></body> : xác định vùng thân của trang web, cặp tag chứa nội dung hiển thị trong cửa sổ trình duyệt.

Câu 3: Để biên tập một tài liệu HTML một cách đúng đắn, bạn cần phải tuân thủ các quy tắc biên
tập nào cho tài liệu HTML?
Quy tắc viết HTML
- - Một tài liệu HTML phải đáp ứng tối thiểu cấu trúc cơ bản (tốt nhất nên là cầu trúc chuẩn). Tài liệu không
nên bắt đầu bằng khoảng trắng hay dòng trống.
- - Phần từ nào không là nội dung được hiển thị trên trang không đặt trong cặp thẻ "body".
- - Các thẻ HTML có thể lồng vào nhau, các phần tử con nên áp dụng quy tắc thụt lề.
- - Các tên thẻ HTML và thuộc tỉnh không phân biệt HOA hay thường. Các tên thẻ được viết thường trong
toàn bộ tài liệu.
- - Các thuộc tỉnh của thẻ cách nhau tôi thiểu một khoảng trắng (và phân tách với giá trị của nó bởi dầu =).
- - Giá trị của thuộc tỉnh phải đặt trong cặp dầu nháy đồng dạng.
- - Các phần tử trong dòng không được bao các phần tử khối.
- - Ngôn ngữ HTML không có khái niệm "lỗi" (error), việc thiếu sót/sai cấu trúc thẻ chỉ dẫn đến việc trình bày
không đúng như ý muốn hoặc "vỡ bố cục" (break layout) trình bày nội dung.
- - Khai báo phiên bản HTML nên được viết là "<!DOCTYPE html".
- - Thẻ đơn nên có khoảng trắng và đầu chéo lên (/) trước dầu ngoặc nhọn cuối cùng.

Câu 4: Bạn hãy cho biết có bao nhiêu loại thẻ được trình bày trong tài liệu HTML và cách trình bày
loại thẻ đó ? Cho ví dụ minh họa.
- Thẻ HTML gồm có 2 loại là thẻ cặp và thẻ đơn.
+ Thẻ cặp có dạng như sau: <tên_thẻ> nội dung thẻ </tên_thẻ>.
Ví dụ: <p> Chung cư mini </p>, <h1> chung cư cao cấp </h1>,...
+ Thẻ đơn có dạng như sau: < tên_thẻ danh_sách_thuộc_tính />.
Ví dụ: <img src=" " />, <hr />,...

Câu 5: Bạn hãy cho biết khái miện về phần tử? Cho ví dụ minh họa.
- Khái niệm: Một cặp thẻ và nội dung mà chúng bao được gọi là phần tử, sử dụng để xác định và cung cấp
cấu trúc cho các phần của một trang web. Một số phần tử thuộc trường hợp đặc biệt, chúng không có nội
dung và không có thẻ đóng, chúng thường được gọi là phần tử rỗng.
Theo quy tắc hiển thị, mỗi phần tử có thể thuộc một trong hai loại:
- Các phần tử cấp khối (gọi tắt là phần tử khối) xuất hiện trên màn hình như thể chúng có dấu xuống dòng
hoặc dấu ngắt dòng trước và sau chúng. Tất cả các phần tử khối đều bắt đầu trên dòng mới của riêng
mình và bất cứ thứ gì theo sau chúng cũng xuất hiện trên dòng mới của chính nó.
- Các phần tử cấp nội dòng (gọi nôm na là phần tử trong dòng) có thể xuất hiện trong các câu và không
cần xuất hiện trên các dòng mới của chính chúng.
- Ví dụ:
- Phần tử <h1> chào ngày mới </h1>
- phần tử <p> xin chào </p>
- phần tử <br>
- phần tử <hr>
-
<p>
<strong>Môn lập trình Thương mại điện tử</strong>
</p>
-
- <p> ...</p>: hiển thị đoạn văn bản trên trang web,
- <strong>...</strong>: in đậm đoạn văn bản được nó bao lại.

Câu 6: Hãy trình bày một số phần tử thông dụng mà bạn biết? Cho biết rõ tên phần tử và sự hiển thị
của chúng trên trình duyệt?
<!DOCTYPE html> : Thẻ khai báo loại tập tin/tài liệu
<html></html> : Thẻ đóng và mở tài liệu HTML, định nghĩa phạm vi của văn bản HTML.
<head></head> : Phần đầu của trang, cặp tag chứa thông tin dữ liệu, không hiển thị ra trình duyệt, chủ yếu
chứa thông tin về tài liệu HTML (gọi là siêu văn bản) các quy tắc CSS, các mã kịch bản…
<title></title> : mô tả tiêu đề trang web, thông tin hiển thị trẻn tab của trang hoặc thanh tiêu đề của cửa sổ
trình duyệt.
<body></body> : xác định vùng thân của trang web, cặp tag chứa nội dung hiển thị trong cửa sổ trình duyệt.
<h1> </h1>đến <h6> </h6>: Tiêu đề cấp độ 1 đến cấp độ 6, với <h1> là lớn nhất và <h6> là nhỏ nhất.
<p> </p>: Định dạng đoạn văn bản.
<a> </a>: Liên kết (hyperlink) đến một trang web khác
<img />: Hiển thị hình ảnh.
<ul> </ul>: Danh sách không thứ tự.
<ol> </ol>: Danh sách có thứ tự.
<li> </li>: Mục trong danh sách.

Câu 7: Bạn hãy cho biết các phương pháp triển khai CSS cho tài liệu HTML? Với các phương pháp
trên thường sẽ được sử dụng trong các trường hợp nào? Hãy trình bày cụ thể cách triển khai của
từng phương pháp trên?
Các phương pháp triển khai CSS:
- CSS nội tuyến
- Css cục bộ
- CSS bên ngoài
- CSS nội tuyến: sử dụng khi muốn thay đổi cho 1 phần tử nào đó trong 1 trang và chỉ duy nhất phần tử đó,
ko có tính lặp lại. Can thiệp trực tiếp vào thẻ mở của thẻ cần thay đổi.
- CSS cục bộ: sử dụng khi muốn áp dụng cùng 1 thay đổi cho nhiều phần tử trong 1 trang, được lặp lại
nhiều lần trong 1 trang. Khai báo trong thuộc tính:
<head>
<style type= “text/css”>
.tên bộ trang trí {khai báo giá trị css}
</style>
</head>
- CSS bên ngoài: sử dụng khi muốn áp dụng 1 thay đổi cho nào đó không lặp nhiều trong 1 trang mà lặp lại
trong nhiều trang khác. Ta triển khai tương tự CSS cục bộ nhưng sử dụng phần tử <link/> đi kèm với
“href” để chỉ ra URL/ đường dẫn đến một tài liệu CSS. Và tài liệu CSS này sẽ được biên soạn giống như
cách mà ta biên tập nội dung trong phần tử <style>.

Câu 8: Để kiểm soát phần đệm và đường viền trong kỹ thuật CSS chúng ta sử dụng thuộc tính gì? Và
cho ví dụ minh họa.
Kiểm soát phần đệm: Để thiết lập phần đềm cho 4 cạnh của hộp, ta sử dụng thuộc tính “padding” kết hợp
với tên của mỗi cạnh, như: “padding-top”, “padding-bottom”, “padding-left”, “padding-right”.
.example {
padding-right: 15px;
padding-left: 15px;
}
Ta có thể viết tắt thuộc tính cho phần đệm này chỉ bằng một thuộc tính duy nhất “padding”. Lúc này, ta cũng
tuân thủ nguyên tắc của việc cung cấp tổ hợp giá trị.
.example {
padding: 15px;
padding: 15px 0px;
padding: 15px 0px 15px 0px;
}
Giá trị của thuộc tính “padding” thường được chỉ định bằng pixel. Tuy nhiên, nó có thể sử dụng đợn vị độ
dài, tỷ lệ phần trăm hoặc từ khóa “inherit”.
Kiểm soát đường viền: Để thiết lập đường viền cho các phần tử, chúng ta dùng ba thuộc tính được liệt kê
sau:
- border-width (độ dày viền): Giá trị độ dài.
- border-style (kiểu viền): none, solid, dotted, dashed, double,…
- border-color (màu viền): Giá trị màu sắc.
Mỗi một hộp phần tử luôn có bốn cạnh. Với mỗi cạnh, chúng ta sẽ sử dụng ba thuộc tính nêu trên kết hợp
với tên của mỗi cạnh để kiểm soát viền. Ví dụ: áp dụng với cạnh trên (top), ta sẽ có ba thuộc tính tương ứng
là "border-top- width", "border-top-style" và "border-top-color".
.example {
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
}
Nếu viết một cách đầy đủ cho cả bốn cạnh của hộp phần tử, chúng ta sẽ viết đến mười hai dòng thuộc tính.
Có một cách viết khác ngắn gọn hơn (viết tắt) là chỉ cần dùng ba thuộc tính, và mỗi thuộc tính phải chỉ định
được một tổ hợp gồm bốn giá trị (cách nhau bởi khoảng trắng) cho bốn cạnh, bắt đầu từ cạnh trên và xoay
theo chiều kim đồng hồ.
.example {
border-width: 1px 2px 3px 4px;
border-style: solid dotted dashed double;
border-color: red pink green blue;
}
Nếu như cả ba thuộc tính “border-width”, “border-style”, “border-color” đều chỉ một thông số giá trị cho
mỗi thuộc tính, ta có thể viết với một thuộc tính duy nhất là “border”
.example {
border: 1px solid red;
}

Câu 9: Xây dựng website TMĐT


- Xác định mục tiêu thiết lập website TMDT: phải lựa chọn mục tiêu cụ thể như giới thiệu sản phẩm dịch
vụ, quảng bá thương hiệu, thúc đẩy hoạt động bán hàng,… Việc xác định các mục tiêu sẽ ảnh hưởng đến
loại hình và phương thức xây dựng wedsite, cách thức vận hành và các tính năng cần thiết.
- Xác định mô hình website TMDT: cần các định mô hình là wedsite bán hàng, website thông tin hay sàn
tmđt. Đây là bước quan trọng ảnh hưởng đến toàn bộ quá trình xây dựng thiết kế và vần hành website.
- Xác định các yêu cầu cho website TMDT: đây là cơ sở để xáy dựng các tính năng phù hợp và giúp việc
thiết kế, xây dựng wedsite đạt hiệu quả cao nhất.
- Lựa chọn và đăng kí tên miền: nên chọn các tên ngắn gọn, dễ nhớ. Sau đó đăng kí tên miền với đơn vị
cung cấp tên miền. Bước này quan trọng vì ảnh hưởng đến việc quảng bá cho sản phẩm và dịch vụ trên
website.
- Lựa chọn đơn vị thiết kế(cung cấp dịch vụ) wedsite TMDT: lựa chọn và tìm kiếm đội ngũ thiết kế , lập
trình wed chuyên nghiệp ở bên trong và ngoài doanh nghiệp. Lựa chọn thiết kế chuẩn SEO để giúp trang
web được đánh giá cao trên công cụ tìm kiếm. Lưu ý các yếu tố sau: bảo mật cho hệ thống, sử dụng ngôn
ngữ lập trình đáy ứng các tiêu chí mới nhất của các trình duyệt và công nghệ, có thể nâng cấp và phá triển hệ
thống liên tục, có khả năng xây dựng các tính năng theo yêu cầu và phù hợ với chiến lược kinh doanh, công
cụ SEO đáp ứng các tiêu chí của trình duyệt.
- Mua (thuê) Hosting storage: nguồn và Dữ liệu website TMDT cần được lưu trữ trên một hệ thống máy
chủ nếu như mã nguồn, cơ sở dữ liệu lớn và nguồn tài chính dồi dào và đủ điều kiện vận hành máy chủ thì
chúng ta có thể mua hoặc xây dựng máy chủ riêng của chúng ta.
- Trỏ tên miền về wedsite TMDT: Sau khi lựa chọn được phương thức vận hành máy chủ, chúng ta tiến
hàng trỏ tên miền về website TMDT thông qua phương thức ánh xạ DNS hoặc IP.
- Xây dựng nội dung và triển khai quảng bá website TMDT: xây dựng nội dung cho website từ các
thông tin của doanh nghiệp và sản phẩm dịch vụ chúng ta cung cấp: giới thiệu doanh nghiệp, thông tin liên
hệ, bài viết định hướng. Cần chú ý đến việc xây dựng thành hệ thống với những nội dung liên kết và đáp
ứng cái tiêu chí về SEO để nội dung website có thể tiếp cận gần với khách hàng trên công cụ tìm kiếm.
- Liên tục nâng cấp và phát triển website TMDT: sau khi quảng bá website TMDT cần thường xuyên
nghiên cứu xây dựng và cập nhật thông tin phù hợp để giữ chân khách hàng và gia tăng sức mạnh SEO cho
trang wed. Cần nghiên cứu thêm các kỹ thuật lập trình và công nghệ mới để nâng tầm hệ thống mã nguồn,
tăng cường bảo mật và tối ưu hóa cấu trúc wedsite.

TRẮC NGHIỆM
Câu 1: Phát biểu sai về khái niệm website: Trang web tĩnh không được xem là website.
Câu 2: Tại sao tên miền được sử dụng: Cả 3 đáp án trên đều đúng.
Câu 3: Lựa chọn đúng nhất về “phần tử cấp khối”: Phần tử xuất hiện, nó đánh dấu xuống dòng các nội
dung (phần tử) trước và sau nó.
Câu 4: Để tạo một liên kết tài nguyên: Sử dụng phần tử thẻ “a” và thuộc tính “href”.
Câu 5: Các phần tử thuộc nhóm cấp khối: Phần tử chứa trong thẻ <div></div>.
Câu 6: Các thuộc tính đại diện cho VIỀN: Border, border-color, border-top.
Câu 7: Thuộc tính “Padding” dùng để: Thiết lập khoảng cácch phần đệm giữa nội dung hộp và đường
viền hộp.
Câu 8: Thuộc tính để kiểm soát cách thức hiển thị các phần tử HTML: Sử dụng thuộc tính “display” và
“visibility”.
Câu 9: Nguyên tắc viết đúng thuộc tính và giá trị của một tài liệu CSS: Color: #5555;
Câu 10: Để triển khai CSS nội tuyến: Khai báo cặp thẻ <style></style> trong cặp thẻ <head></head>
trong tài liệu HTML.

TÌNH HUỐNG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Yến baby</title>
<style type="text/css">
.canhgiua {text-align: center;}
.nutnhan {
border:yellow 1px solid;
border-radius:10px ;
background-color:brown;
color:yellow;
padding: 10px 15px;
font-size: 20px;}
.nutnhan:hover {
color: brown;
border: brown 1px solid;
background-color:yellow;}
a {text-decoration: none;}
p {text-align: justify;}
</style>
</head>
<body>
<h1 class="canhgiua">
Hộp yến baby cao cấp bổ sung dinh dưỡng, hương vị ngọt thanh-hộp 50gram
</h1>
<p class="canhgiua">
<img src="https://hutech.edu.vn/sanpham1.webp" title=" " alt=" ">
</p>
<p>
<strong>Yến baby</strong> hay còn gọi là yến viên là loại yến được làm từ các mảnh yến vụn được
rơi ra từ tổ yến bởi quá trình vận chuyển hoặc thu hoạch bị vở mà tạo ra thành, vì vậy, yến baby có kích
thước rất nhỏ gọn vầ vẫn đảm bảo được các chất dinh dưỡng cần thiết. <i>Loại sản phẩm này có thể bổ sung
thêm dưỡng chất cho trẻ em và còn mang lại khẩu vị phù hợp cho các bé.</i>
</p>
<p>
<strong> <i> Tác dụng:</i> </strong>
<ul>
<li>1</li>
<li>2</li>
</ul>
</p>
<div>
<p style="text-align: center;">
<a href="https://www.hutech.edu.vn/" class="nutnhan">Đặt hàng</a>
</p>
</div>
</body>
</html>

You might also like