Website #01: HTML cơ bản
-
Upload
clbinternetinfo -
Category
Education
-
view
160 -
download
5
description
Transcript of Website #01: HTML cơ bản
![Page 1: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/1.jpg)
Website #01: HTML cơ bản
http://clbinternet.info
Lương Thành Lợi
![Page 2: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/2.jpg)
I. Cấu trúc cơ bản của một trang html
II. Cấu trúc cơ bản của một thẻ html
III. Các thẻ cơ bản trong html
IV Một số ký tự đặc biệt
![Page 3: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/3.jpg)
I. Cấu trúc cơ bản của một trang HTML
![Page 4: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/4.jpg)
![Page 5: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/5.jpg)
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example:
![Page 6: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/6.jpg)
![Page 7: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/7.jpg)
Ứng với mỗi versioncách khai báo DOCTYPE khác nhau
![Page 8: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/8.jpg)
II. Cấu trúc cơ bản của một thẻ HTML
![Page 9: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/9.jpg)
Một số ví dụ:
<p>This is a paragraph </p>
<a href="google.com"> Google </a>
<br>
<hr>
![Page 10: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/10.jpg)
Tóm lại:
<tagname> content </tagname>
![Page 11: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/11.jpg)
III. Các thẻ cơ bản trong HTML
![Page 12: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/12.jpg)
1. Các thẻ định dạng văn bản:- In đậm:
<b> Chữ này được in đậm </b>- In nghiêng:
<i> Nghiêng nghiêng </i> - Highlight:
<p> <mark>Highlight là như thế này </mark> </p> - Đoạn văn bản:
<p>Trong này là đoạn văn bản </p> - Tiêu đề:
<h1> Tiêu đề lớn </h1>
<h2> Tiêu đề nhỏ hơn chút h1 xíu</h2>
![Page 13: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/13.jpg)
2. Thuộc tính của thẻ html:
Vd:
Thẻ liên kết trang:
<a href="url"> link text </a>
Thẻ hình ảnh:
<img src=“tèo.jpg" width=“105" height=“105">
![Page 14: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/14.jpg)
3. Định dạng danh sách:
//Danh sách không sắp xếp<ul>
<li>Sam sung</li><li>Apple</li><li>Nokia</li><li>Sony</li>
</ul>
//Danh sách được sắp xếp<ol>
<li>Sam sung</li><li>Apple</li><li>Nokia</li><li>Sony</li>
</ol>
![Page 15: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/15.jpg)
Sự khác nhau:
<ul> <ol>
![Page 16: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/16.jpg)
4. Định dạng bảng:
Chẳng giống
bảng gì cả!!
![Page 17: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/17.jpg)
Thêm border:
<table style="width:50%" border="1px solid black">…
![Page 18: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/18.jpg)
Rowspan:
![Page 19: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/19.jpg)
Colspan:
![Page 20: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/20.jpg)
IV. Một số kí tự đặt biệt trong HTML
![Page 21: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/21.jpg)
Nguồn: http://www.w3schools.com/tags/default.asp
![Page 22: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/22.jpg)
CẢM ƠN MỌI NGƯỜI
ĐÃ LẮNG NGHE
![Page 23: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/23.jpg)
THẢO LUẬN & BÀI TẬP
![Page 24: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/24.jpg)
Bài tâp 1:
Dùng định dạng văn bản để soạn một đoạn thơ, 1 bài văn. Trong đó thể hiện được thụt dòng, in đậm, nghiêng, trang trí hoa văn...
![Page 25: Website #01: HTML cơ bản](https://reader034.fdocuments.in/reader034/viewer/2022042700/558e74fc1a28abd8478b45e5/html5/thumbnails/25.jpg)
Bài tập 2:
Dùng định dạng bảng để tạo nên một trang HTML có giao diện bao gồm
- Banner, Menu, Content Body,Content Header, Footer
- Trong đó:
+ Banner thể hiện hình ảnh
+ Menu thể hiện các liên kết trang
+ Content Body là một đoạn văn bản sử dụng các tag định dạng văn bản, hình ảnh, video...
+ Content Header thể hiện thông tin cá nhân người làm
+ Footer thể hiện thông tin CLB