# data[].attributes.body
1. Tòng Văn Hinh
2. Su Pha Ny Chạ Lơn Súc
3. Sụ Lỵ Ót Kẹo Păn Nha
4. Si Phon Kẹo Mi Xay

# data[].attributes.body
1. Bùi Sơn Hưng
2. Chít Tỵ Xay Phôm Ma
3. Phon Sạ Vẳn Chăn Thạ Vông
4. Khăm Lếc Xay NHạ Sẻng
5. Sả Khon Mun Tha

# data[].attributes.body
1. Sùng Bả So
2. Phùng Văn Linh
3.Sinh thon Sypha văn
4. Bunlat phằn Thạ chít

# data[].attributes.body
1. Lầu A Chìa
2. Lèo Văn Đông
3. Sỏn Phết Mạ Hả Lạt
4. Mùa A Ly

# data[].attributes.body
1. Dệ Xông Bua Da
2. On Sẻng Mạ Ni Chăn
3. Tòng Văn Thành
4. Mùa A Lừ
5. Dao Phết In Thạ Vông

# data[].attributes.body
- Thẻ <div> dùng để chia bố cục trang web.
- Để sử dụng thẻ: Bắt đầu sử dụng bằng cách mở thẻ <div> và kết thúc bằng thẻ đóng </div>
<div> .... </div>
Tòng Văn Hinh

# data[].attributes.body
Định nghĩa tiêu đề HTML
<h1> Tiêu đề 1 </h1>
Dệ Xông

# data[].attributes.body
Dùng để khai báo thêm một hàng trong Table row
Lèo Văn Đông

# data[].attributes.body
Liên két đến một trang HTML
<TR>
Ddimhj nghĩa một hàng trong một baản
Sụ Pha Ny

# data[].attributes.body
-Thẻ <del>  dùng để tạo một đường kẻ ngang lên văn bản
-cách sử dụng:
<!DOCTYPE html>
<html>
<body>
<p>Tài liệu học <del>Lập Trình Web</del> từ cơ bản đến nâng cao</p>
</body>
</html>
Sinh Thon

# data[].attributes.body
Định nghĩa siêu liên kết

<a href="http://daotao.utb.edu.vn">  tới trang chủ daotao.utb.vn </a>

Dệ Xông

# data[].attributes.body
Nếu muốn nhúng một hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ hình ảnh
cách dùng là:

<img src=..... >

Sùng Bả So

# data[].attributes.body
Chức năng: Định nghĩa một hình ảnh
Cách dùng:

<img src =" Đường dẫn của hình ảnh" alt = " Khai báo một đoạn văn bản thay thế" width = "chiều rộng" height = " chiều cao">

On Sẻng

# data[].attributes.body
Xác định một đoạn văn bản
Phùng Văn Linh

# data[].attributes.body
Chức năng: Thẻ định nghĩa một hình ảnh
Cách dùng: <img src="đường dẫn đến hình ảnh" alt="">
Ví dụ: <img src="../Thiết kế web trên lớp/laptrinhweb.gif" alt="">
Lầu A Chìa

# data[].attributes.attachment_link.readable_text
Có câu " một website đẹp phải có hình ảnh, bổ cục rõ ràng và nhiều hiệu ứng bắt mắt". Chỉ với câu nói này thôi đủ để chúng ta liệt kê những công nghệ phải sử dụng để tạo nên nó.

Tạo hình đẹp và tạo bổ cục => Sử dụng các thẻ HTML để xây dựng.

Bổ cục rõ ràng => Sử dụng CSS để phân chia layout.

Hiệu ứng bắt mắt => Sử dụng HTML5 và CSS3 hoặc các thư viên Javascript như jQuery.

Quá nhiều kiến thức phải không nào? Nhưng bạn đừng lo, chúng ta phải đi từ từ chứ không vội được nên trong bài này mình sẽ tìm hiểu dùng thẻ img trong HTML để tạo hình ảnh trước.

1. Sử dụng thẻ img để hiển thị hình ảnh

Để hiển thị hình ảnh lên web thì bạn sử dụng thẻ img với cú pháp sau:

2. Một số thuộc tính của thẻ img

Sau đây là một số thuộc tính hay sử dụng với thẻ img.

src

Đây là thuộc tính chứa đường dẫn trỏ đến file hình. Có nhiều loại hình khác nhau như png, jpg, gif, ... và tất cả đều có thể hiển thị được trên website. Riêng đối với giá trị của URL phải ở một trong hai dạng đó là URL kèm domain hoặc URL ở ngay thư mục hiện tại.

Ví dụ:

https://freetuts.net/images/image-name.png là full URL

./images/image-name.png là ngay thư mục hiện tại

alt

Đây là thuộc tính sẽ hiển thị cho trường hợp bạn truyền URL image bị sai. Nghĩa là nó sẽ hiển thị đoạn text này thay vì hình ảnh nếu URL bạn truyền vào bị sai.

Width và Height

Đây là thuộc tính thiết lập chiều rộng ( width) và chiều cao ( height) cho hình ảnh.

Thông thường ta sẽ sử dụng CSS để thiết lập chiều rộng và chiều cao thay vì sử dụng hai thuộc tính trên, tuy nhiên vì chúng ta chưa học CSS nên bạn có thể sử dụng hai thuộc tính đó để thay thế.

3. Một số cách sử dụng thẻ img

Chúng ta có thể sử dụng thẻ img kết hợp với các thẻ khác để tạo giao diện website.

Kết hợp thẻ a để tạo link hình

Nếu bạn muốn khi người dùng click chuột vào hình của bạn thì nó chuyển đến một trang nào đó thì bạn sử dụng thêm một thẻ a bao quan cái hình đó là được.

Kết hợp thẻ map để gán link vào một vị trí nhỏ trong hình

Giả sử bạn có một hình ảnh vệ tinh trong đó có một góc nhỏ là ảnh mặt trời. Bạn muốn khi click vào góc nhỏ mặt trời trong hình đó thì nó sẽ chuyển tới hình full về mặt trời, cách làm như ví dụ dưới đây.

Giải thích:

Trong thẻ img có một thuộc tính là usemap="#planetmap" có ý nghĩa là chỉ định map được apply vào hình này, vì giá trị của nó là #planemap nên nó sẽ lấy thẻ map có name="planemap".

Trong thẻ map có định nghĩa một area với các thuộc tính

shape="rect" tức là rectangle

coords="0,0,82,126" tức là danh sách các tọa độ tạo thành area, lấy hình ảnh trên kia làm tiêu chuẩn để đo và được tính bằng pixel.

alt="sun" là khi hover chuột vào vị trí có tọa độ trên thì sẽ hiển thị title này

href="http://www.w3schools.com/images/sun.gif" là link khi click vào area này thì chuyển đến.

4. Lời kết

Trong bài mình đã giới thiệu cách sử dụng thẻ img để tạo hình ảnh đơn giản trong HTML, và mình có giới thiệu một số cách sư dụng thẻ img kết hợp với các thẻ khác như thẻ , thẻ map để làm những chức năng khá hữu ích. Thực tế khi các bạn làm thì phải kết hợp với CSS nữa thì giao diện mới đẹp và hiệu ứng mới bắt mắt.

# data[].attributes.attachment_link.title
Bài 07: Dùng thẻ img trong HTML để tạo hình ảnh

# data[].attributes.attachment_link.description
Có câu " một website đẹp phải có hình ảnh, bổ cục rõ ràng và nhiều hiệu ứng bắt mắt". Chỉ với câu nói này thôi đủ để chúng ta liệt kê những công nghệ phải sử dụng để tạo nên nó. Tạo hình đẹp và tạo bổ cục => Sử dụng các thẻ HTML để xây dựng.

# data[].attributes.body
Tạo một "trình phát nhạc" cho trang web
Phùng Văn Linh

# data[].attributes.body
chức năng dùng để chèn hình ảnh.
cách dùng mở <p> Văn bản...sau đó kết thúc </p>
Sùng Bả So

# data[].attributes.body
Chức năng: Định nghĩa chữ in đậm
Cách dùng:  <b> đoạn văn in đậm </b>
Thành

# data[].attributes.body
Tạo một "trình xem phim" cho trang web
Phùng Văn Linh

# data[].attributes.body
Tạo một liên kết đến một tài liệu nào đó
(khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)
Phùng Văn Linh

# data[].attributes.body
Chức năng: Xác định danh mục trong danh sách. phải đặt bên trong <UL> hoặc <OL>
Cách dùng:  <li> Danh mục </li>
Dệ Xông

# data[].attributes.body
Chức năng: dùng để định nghĩa một link tới một tài liệu nào đó
Cách dùng:

<link rel="stylesheet" href="style/style.css">

Lầu A Chìa

# data[].attributes.body
- Thẻ dùng hiển thị các mục danh sách, danh sách sẽ được đánh dấu bắt đầu bằng dấu "."
- Cách dùng:  Thẻ <li> nằm trong danh sách thẻ <ul>, bằng cách mở thẻ <li> và đóng thẻ </li>
Tòng Văn Hinh

# data[].attributes.body
Chèn một bản phụ đề vào video
Phùng văn Linh

# data[].attributes.body
chức năng:dùng để khai báo các ô tiêu đề
<th>leo van dong</th>
lèo văn Đông

# data[].attributes.body
-Chức năng là để xá định văn bản quan trong, có nghĩa là văn bản sẽ được bôi đậm.
-Cách dùng: <strong> Những điều rất quan trọng bạn muốn nói...</strong>
-Sùng Bả So

# data[].attributes.body
Chức năng: Định nghĩa một ngắt dòng đơn
Cách dùng: <br> một đoạn </br>
Dệ Xông

# data[].attributes.body
Chức năng: dùng để tạo một danh sách được dùng kèm với <li>
Cách dùng:
<ul>
<li>html</li>
</ul>
Lầu A Chìa

# data[].attributes.body
Chức năng: Sử dụng để phân tách các phần nội dung trong HTML
Cách dùng:
<p>Đoạn văn thứ nhất năm ở bên trên</p>
<hr />
<p>Đoạn văn thứ hai nằm ở bên dưới</p>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng: Định nghĩa vùng  bên trong của một ánh xạ hình ảnh
Cách dùng:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng: Dùng để xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng.
Cách dùng :
<em>Văn bản được nhấn mạnh</em>
Khi đó, màn hình trình duyệt sẽ hiển thị:
Văn bản được nhấn mạnh

Bùi Sơn Hưng

# data[].attributes.body
Chức năng: Cho phép nhúng các tài liệu, các trang html khác vào trang html hiện tại
Cách dùng:
<iframe src="https://tuhoctin.net/thiet-ke-web/co-ban/hoc-html.html"></iframe>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng: Định nghĩa văn bản định dạng sẵn(Hiển thị những gì ta đã viết)
Cách dùng:
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng: dùng để xác định một đoạn văn bản
cách dùng:<p>văn bản một</p>

Lèo Văn Đông

# data[].attributes.body
chức năng : dung để xác định một đoạn văn bản kiểu chữ in nghiêng
cách dùng:
<p> tài liệu<i>lâp trình web<i>từ cơ bản đến nâng cao</P>

Lèo Văn Đông

# data[].attributes.body
chức năng :
-xác định một "danh sách có thứ tự"
-tuy nghiên,để tạo các danh sách trong thư múc sách thì phải sử dụng kết hợp với thwe <li>
-thẻ <li> phải được đẳ trong bên trong  phần tử <ol>
cách  dùng:
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
Lèo Văn Đông

# data[].attributes.body
chức năng:
được sử dụng để hiện thị dữ liêu ở dạng bảng(hàng+Cột) có thể có nhiều cột trong một hàng

Lèo Văn Đông

# data[].attributes.body
<FOOTER>
Thẻ có chức năng xác định phần chân trang cho một tài liệu html
Cách dùng
<footer > bên trong là các phần tử tài liệu html </footer>

Tòng Văn Hinh

# data[].attributes.body
<INPUT>
Dùng để xác định một trường dữ liệu "đầu vào".
Tòng Văn Hinh

# data[].attributes.body
Chức năng: Tạo một trình phát nhạc cho trang web.
Cách dùng:
<audio controls>
<source src = " Đường dẫn đến file nhạc" >
</audio>
src: Xác định đường dẫn tập tin âm thanh mà muốn phát.
controls: Xác định việc trình phát nhạc sẽ được hiển thị trên màn hình.
Dệ Xông

# data[].attributes.body
Chức năng: Tạo một trình xem phim cho trang web.
Cách dùng:
<video controls>
<source src = " Đường dẫn đến file video mà muốn phát" >
</video>
Dệ Xông

# data[].attributes.body
Chức năng: Xác định phần tử là một cái bảng
Cách dùng:  Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>  trong đó:
<tr> xác định phần tử là một hàng trong bảng.
<td> Xác định phần tử là một ô trong hàng.
<th> Xác định phần tử là một ô tiêu đề trong hàng.
Dệ Xông

# data[].attributes.body
Chức năng: Xác định một đoạn văn bản được định nghĩa kiểu chữ in nghiêng
Cách dùng:
<p> Tài liệu học <em> lập trình web </em> từ cơ bản đến nâng cao </p>
Khi đó màn hình trình duyệt sẽ hiện thị: Tài liệu học lập trình web từ cơ bản đến nâng cao
Dệ Xông

# data[].attributes.body
chức năng:
định nghĩa căn bản cần đánh dấu
cách dùng:
<p>Tài liệu  <mark>Lập Trình Web</mark>
Lèo Văn Đông

# data[].attributes.body
Chức năng :Định nghĩa một phần trong một tài liệu
Cách dùng :
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng:

Tag <style> được sử dụng để định dạng HTML văn bản.

Bên trong <style> phần, bạn định dạng như thế nào, mà HTML văn bản sẽ hiển thị trên trình duyệt trên trình duyệt như thế.

Cách dùng:
<html>
<head>
<style type = "text / css">
p {color: red; }
</style>
</head>
<body>
<p> Xin chào tôi tên là Hưng. </p>
</body>
</html>
Trình duyệt sẽ hiển thị:
Xin chào tôi tên là Hưng (dòng chữ này is red color)

Bùi Sơn Hưng

# data[].attributes.body
Chức năng :
Định nghĩa một bài báo
Cách dùng :
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng :  Thẻ <li> dùng để xác định một "danh mục" trong danh sách.
Thẻ <li> phải được đặt bên trong phần tử <ul> hoặc phần tử <ol>.
Cách dùng
<p> Phần tử ol xác định một danh sách có thứ tự: </p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p> Phần tử ol xác định một danh sách không có thứ tự: </p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng : Thẻ <main> xác định phần thân của trang, nó thường được dùng để chứa các nội dung chính của trang web.
Cách dùng :
http://webcoban.vn/html/the-main-trong-html.html

Bùi Sơn Hưng

# data[].attributes.body
Chức năng : Thẻ <source> thường được dùng để chỉ định tài nguyên (tập tin audio, tập tin video) cho trình nghe nhạc hoặc trình xem phim trong trang web.
- Thẻ <source> phải được đặt bên trong phần tử <audio> hoặc <video>.
- Trong một phần tử <audio> hoặc <video> có thể có nhiều thẻ <source>.
Cách dùng :
<audio controls>
<source src="../file/bell.ogg">
<source src="../file/bell.mp3">
</audio>

Bùi Sơn Hưng

# data[].attributes.body
Chức năng :
Định nghĩa nội dung mô tả như chú thích, bình luận, hoặc các loại văn bản khác cho các tập tin đa phương tiện (<video> và <audio>)
Cách dùng :
<video controls>
<source src="../file/bunny.mp4">
<track src="../file/phude_vi.vtt" label="Tiếng Việt" default>
<track src="../file/phude_en.vtt" label="Tiếng Anh">
</video>

Video sẽ hiện ra 2 phụ đề là tiếng việt và tiếng anh

Bùi Sơn Hưng