HTML (HyperText Markup Language) là một ngôn ngữ cơ bản nhất được sử dụng để tạo ra các trang web. Trong bài thực hành lập trình web html này, chúng ta sẽ học cách tạo các phần tử HTML cơ bản, chẳng hạn như tiêu đề, đoạn văn, hình ảnh và liên kết.
1. Đề bài
Bài 1: Sử dụng ngôn ngữ HTML để trình bày trang web với nội dung dưới đây:
a. Sử dụng các thẻ cơ bản của HTML: tiêu đề, định dạng văn bản, định dạng màu sắc, chèn hình ảnh, căn lề phù hợp.
KỸ NĂNG MỀM- CHÌA KHÓA ĐỂ THÀNH CÔNG!
Kỹ năng mềm (hay còn gọi là Kỹ năng thực hành xã hội) là liên quan đến trí tuệ xúc cảm dùng để chỉ các kỹ năng quan trọng trong cuộc sống con người như: kỹ năng sống, giao tiếp, lãnh đạo, làm việc theo nhóm, kỹ năng quản lý thời gian, thư giãn, vượt qua khủng hoảng, sáng tạo và đổi mới…
Top 10 kỹ năng cần có đối với sinh viên để thành công trong công việc
1. Kỹ năng đặt mục tiêu
2. Sáng tạo trong công việc
3. Biết lắng nghe và học tập những lời phê bình
4. Giao tiếp hiệu quả
5. Tự tin, năng động và biết lôi kéo người khác
6. Kỹ năng làm việc đồng đội
7. Kỹ năng khám phá và lãnh đạo bản thân
8. Kỹ năng tổ chức công việc và quản lý thời gian
9. Kỹ năng ra quyết định
10.Kỹ năng giải quyết vấn đề
Trong cuộc sống cũng như công việc không phải lúc nào cũng thuận lợi, suôn sẻ. Sẽ có những vấn đề phát sinh không thể lường trước được. Lúc này bắt buộc bạn phải có cách giải quyết vấn đề một cách khoa học để không làm ảnh hưởng đến thành quả công việc, đó chính là kỹ năng giải quyết vấn đề mà bạn cần phải có.
Vậy theo bạn, kỹ năng nào là cần thiết nhất đối với bạn. Mời bạn tham gia khảo sát bằng cách nhấp chuột vào liên kết sau: Tham gia khảo sát
Gợi ý: Bạn có thể trình bày như sau:
Yêu cầu: Khi người sử dụng nhấp chuột vào liên kết “Tham gia khảo sát” sẽ chuyển sang trang khảo sát ở câu b.
b. Sử dụng các thẻ HTML phù hợp để trình bày biểu mẫu sau trên trang web khảo sát:
2. Code tham khảo
2.1 Định dạng văn bản
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KỸ NĂNG MỀM- CHÌA KHÓA ĐỂ THÀNH CÔNG!</title>
<style>
h1{
color: red;
text-align: center;
}
h2{
font-style: italic;
color: blue;
}
.content{
display: flex;
}
.content ol li{
font-weight: bold;
}
</style>
</head>
<body>
<h1>KỸ NĂNG MỀM- CHÌA KHÓA ĐỂ THÀNH CÔNG!</h1>
<hr width=50%>
<p><b>Kỹ năng mềm</b> (hay còn gọi là Kỹ năng thực hành xã hội) là liên quan đến trí tuệ xúc cảm dùng để chỉ các kỹ năng quan trọng trong cuộc sống con người như: kỹ năng sống, giao tiếp, lãnh đạo, làm việc theo nhóm, kỹ năng quản lý thời gian, thư giãn, vượt qua khủng hoảng, sáng tạo và đổi mới...</p>
<h2>Top 10 kỹ năng cần có đối với sinh viên để thành công trong công việc</h2>
<div class="content">
<div> <img src="img-sucess.jpg" alt="Kỹ năng mềm - chìa khoá thành công" width="300px"></div>
<ol>
<li>Kỹ năng đặt mục tiêu</li>
<li>Sáng tạo trong công việc</li>
<li>Biết lắng nghe và học tập những lời phê bình</li>
<li>Giao tiếp hiệu quả</li>
<li>Tự tin, năng động và biết lôi kéo người khác</li>
<li>Kỹ năng làm việc đồng đội</li>
<li>Kỹ năng khám phá và lãnh đạo bản thân</li>
<li>Kỹ năng tổ chức công việc và quản lý thời gian</li>
<li>Kỹ năng ra quyết định</li>
<li>Kỹ năng giải quyết vấn đề</li>
</ol>
</div>
<p>Trong cuộc sống cũng như công việc không phải lúc nào cũng thuận lợi, suôn sẻ.
Sẽ có những vấn đề phát sinh không thể lường trước được. Lúc này bắt buộc
bạn phải có <b>cách giải quyết vấn đề</b> một cách khoa học để không làm ảnh hưởng đến thành quả công việc, đó chính là kỹ năng giải quyết vấn đề mà bạn cần
phải có.</p>
<p>Vậy theo bạn, kỹ năng nào là cần thiết nhất đối với bạn. Mời bạn tham gia khảo sát
bằng cách nhấp chuột vào liên kết sau: <a href="Thuchang1b.html">Tham gia khảo sát</a></p>
</body>
</html>
– Thẻ <hr> được dùng để tạo đường kẻ ngang trong trang HTML, nó thường dùng để phân tách giữa các đoạn văn, các phân đoạn nội dung để dễ đọc, dễ theo dõi.
– Thẻ <ol> (ordered list) dùng để tạo danh sách có thứ tự, mỗi phần tử trong danh sách được định nghĩa bằng thẻ <li>
– flexbox (Flexible Box Layout) để dàn trang một cách mềm dẻo. Flexbox cho phép bạn trải các phần tử con trong một phần tử chứa, sắp đặt thứ tự của chúng, căn chỉnh phân bố không gian quanh chúng. Bạn cũng có thể trải phần tử theo hướng ngang hay đứng. Trong CSS các thuộc tính liên quan đến flexbox gồm: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, align-self, flex-grow, flex-shrink, flex-basis, flex.
2.2 Sử dụng các thẻ HTML phù hợp để trình bày biểu mẫu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KHẢO SÁT Ý KIẾN</title>
<style>
.main-content {
display: flex;
padding-left: 56px;
}
.main-content .content ul li {
list-style-type: none;
}
.personal-information {
display: flex;
}
.personal-information .label-name {
width: 12%;
}
.personal-information .items {
margin-bottom: 20px;
}
.personal-information .items input {
outline: none;
border: 1px solid #ccc;
}
.personal-information .items select {
outline: none;
border: 1px solid #ccc;
}
.personal-information .img {
padding-left: 34%;
}
.inp-send {
padding-top: 8px;
}
.inp-send input {
height: 25px;
margin: 0 4px;
float: right;
outline: none;
border: 1px solid #ccc;
}
.inp-send input:hover {
background-color: #ccc;
}
.thank-you,
h1 {
text-align: center;
padding-top: 20px;
color: red;
}
</style>
</head>
<body>
<h1>KHẢO SÁT Ý KIẾN</h1>
<p style="text-align: center; color: red;">V/V: Các kỹ nẵng cần có đối với sinh viên để thành công trong công việc
</p>
<p style="font-weight: bold;">Theo bạn kỹ năng nào là cần thiết nhất đối với bạn trong số các kỹ năng sau:</p>
<form action="#" method="post">
<fieldset>
<legend>Kỹ năng cần có</legend>
<div class="main-content">
<div class="content">
<ul>
<li>
<input type="checkbox" name="muctieu" value="muctieu" id="muctieu"><label for="muctieu">Kỹ
năng đặt mục tiêu</label>
</li>
<li>
<input type="checkbox" name="sangtao" value="sangtao" id="sangtao"><label for="sangtao">Sáng
tạo trong công việc</label>
</li>
<li>
<input type="checkbox" name="langnghe" value="langnghe" id="langnghe"><label
for="langnghe">Biết lắng nghe và học tập những lời phê bình</label>
</li>
<li>
<input type="checkbox" name="giaotiep" value="giaotiep" id="giaotiep"><label
for="giaotiep">Giao tiếp hiệu quả</label>
</li>
<li>
<input type="checkbox" name="tutin" value="tutin" id="tutin"><label for="tutin">Tự tin, năng
động và biết lôi kéo người khác</label>
</li>
</ul>
</div>
<div class="content" style="padding-left: 56px;">
<ul>
<li>
<input type="checkbox" name="dongdoi" value="dongdoi" id="dongdoi"><label for="dongdoi">Kỹ
năng làm việc đồng đội</label>
</li>
<li>
<input type="checkbox" name="lanhdao" value="lanhdao" id="lanhdao"><label for="lanhdao">Kỹ
năng lãnh đạo và khám phá bản thân</label>
</li>
<li>
<input type="checkbox" name="tochuc" value="tochuc" id="tochuc"><label
for="tochuc"></label>Kỹ năng
tổ chức công việc và quản lý thời gian
</li>
<li>
<input type="checkbox" name="quyetdinh" value="quyetdinh" id="quyetdinh"><label
for="quyetdinh">Kỹ năng quyết định</label>
</li>
<li>
<input type="checkbox" name="vande" value="vande" id="vande"><label for="vande">Kỹ năng giải
quyết vấn đề</label>
</li>
</ul>
</div>
</div>
<label for="#" style="padding-left: 98px;">Ý kiến khác: </label>
<textarea name="ykien" id="ykien" cols="100"></textarea>
</fieldset>
<fieldset>
<legend>Thông tin các nhân</legend>
<div class="personal-information">
<div class="label-name">
<div class="items">
<label for="hoten">Họ và tên:</label>
</div>
<div class="items">
<label for="dotuoi">Độ tuổi:</label>
</div>
<div class="items">
<label for="nam">Giới tính:</label>
</div>
</div>
<div>
<div class="items">
<input type="text" id="hoten" name="hoten">
</div>
<div class="items">
<select name="dotuoi" id="dotuoi">
<option value="10-20"> 10-20</option>
<option value="21-30"> 21-30</option>
<option value="31-40"> 31-40</option>
</select>
</div>
<div class="items">
<input type="radio" name="nam" id="nam"><label for="nam">Nam</label>
<input type="radio" name="nam" id="nu"><label for="nu">Nữ</label>
</div>
</div>
<div class="img">
<img src="img-sucess.jpg" alt="" width="140px">
</div>
</div>
</fieldset>
<div class="inp-send">
<input type="button" value="Gửi khảo sát">
<input type="button" value="Làm lại">
</div>
</form>
<div class="thank-you">
<p>Cảm ơn ban đã tham gia khảo sát!</p>
</div>
</body>
</html>
– list-style-type: none: Xoá ký hiệu chỉ số cho phần tử.
– Tag <fieldset> được dùng để nhóm các thành phần bên trong <form> một cách hợp lý. Tag <fieldset> tạo đường bao ngoài bao quanh các thành phần trong <form>.
– Sử dụng kết hợp thẻ legend với thẻ fieldset để miêu tả rõ ràng nhóm các phần liên quan đã được nhóm bằng thẻ fieldset.
– Thẻ <ul> tạo danh sách không có thứ tự.
– Thẻ <label> dùng để tạo nhãn (title, label, caption) cho các thành phần HTML, chủ yếu là các điều khiển trong FORM HTML.
– Để liên kết phần tử <label>với một <input>phần tử, bạn cần phải cung cấp <input>một idthuộc tính. Sau <label>đó, cần một forthuộc tính giống với thuộc tính valuecủa đầu vào id. Khi nhân vào <label> cũng có thể điều khiển được <input>.
– Thẻ <input> là thẻ cơ bản hay sử dụng trong <form>, thẻ này tạo ra các loại điều khiển tùy vào giá trị thiết lập bởi thuộc tính type. Thẻ <input> trong html là thẻ rỗng (không có đóng thẻ), nó chỉ thiết lập qua các thuộc tính. Cú pháp cơ bản:
- <input name=”nameofcontrol” value=”default_value” type=”typeofcontrol” id=”controlid”/>
| name | Đặt tên control, cần có thuộc tính này mới tạo ra được trường dữ liệu gửi đi. |
| value | Tùy chọn, chứa giá trị dữ liệu mặc định ban đầu |
| type | Thiết lập loại control sẽ tạo ra như text, radio, file … |
| placehoder | Trong các kiểu tạo ra hộp để nhập, khi dữ liệu rỗng sẽ xuất hiện dòng chữ thiết lập bởi placeholder |
| id | Thuộc tính tùy chọn, thiết lập id của control, id giúp làm việc với JS, CSS và liên kết với <label> |
| disabled | Điều khiển có thuộc tính này sẽ không nhập dữ liệu nữa (tương tác với chuột, bàn phím …), nó hiện thị ở dạng bị mờ, sám. |
Như vậy, chúng ta đã học cách tạo các phần tử HTML cơ bản, định dạng văn bản và sử dụng các thuộc tính HTML để kiểm soát cách các phần tử được hiển thị trên màn hình. Cảm ơn bản đã tham khảo thực hành lập trình web trên ttnguyen.net.
