HTML là gì ?

HTML LÀ GÌ ?

  • HTML là chữ viết tắt Hypertext Markup Language ( Ngôn Ngữ đánh dấu Siêu Văn Bản )
    • Dùng để viết layout cho website, web – app…
    • Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví <strong> dụ </strong> và ). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
    • Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html
  • Sử dụng Adobe Dreamweaver để soạn thảo:
  • Bố cục layout
    • Bao gồm: Header, Body, Footer
  • Cấu trúc HTML cơ bản:
<!doctype html>  <!--Thông báo trình duyệt HTML5-->
<html> <!--Môi trường HTML-->
<head></head> <!--Thẻ chứa thông tin ( Không hiển thị)-->
<body></body> <!--Hiển thị trên trình duyệt-->
</html>
  • Giới thiệu một số thẻ trong <head>:
    • <title>: Tiêu đề Website
    • <meta>: Thẻ thông tin cho website ( không có thẻ đóng )
      • <meta charset = “UTF-8”> — Khai báo mã hóa ký tự UTF-8
      • <meta name=”author” content=”Tran Cuong Tien”> — Khai báo tên tác giả
      • <meta http-equiv=”refresh” content=”2”> — tự động tải lại sau 2s
      • Tham khảo thêm: https://www.w3schools.com/tags/tag_meta.asp
    • <link>: liên kết các tệp bên ngoài, thường liên kết với style sheet ( k có thẻ đóng )
      • <link rel="stylesheet" type="text/css" href="style.css">
  • Giới thiệu một số thẻ cơ bản trong <body>:

See the Pen
DEMO HTML 1
by Cuong Tien (@cuongtien)
on CodePen.

Note: Đừng quên đóng thẻ. Các thẻ có thể lồng vào nhau

HTML Attributes ( thuộc tính )

Một số thuộc tính cơ bản

    • lang: khai báo ngôn ngữ sử dụng của trang web
  • Ví dụ:
<html lang=”vi”>
<head></head>
<body>
</body>
</html>
    • Title : sử dụng được tất cả các thẻ trong html kể cả thẻ <html>
  • Ví dụ:

  <p title=”this is tooltip”>this is paragraph</p>

 

 

 

    • Thuộc tính của thẻ <img>
  • src: đường dẫn đến tệp tin hình ảnh
  • width: chiều rộng
  • height: chiều cao
  • align: vị trí của hình ảnh
  • alt: dùng để chỉ định văn bản cho hình ảnh nếu hình ảnh không hiển thị

See the Pen
DEMO IMG TAG
by Cuong Tien (@cuongtien)
on CodePen.

  • href: đường dẫn cụ thể đến một liên kết

Ví dụ:

See the Pen
DEMO HREF
by Cuong Tien (@cuongtien)
on CodePen.

DEMO:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SEO</title>

</head>
<body>
	<center><h1>This is heading</h1></center>
	<p style="color: blue;">This is paragraph <b>this is bold</b> <span style="color:red;font-size: 20px">This is Span</span></p>
	<b>This is bold</b>
	<i>This is Italic</i>
	<u>This is underline</u>
	<img src="img/logo.png" alt="logo" title="logo123" align="left">
	<h1>KHOA HỌC <span style="color: #FFFF00">LIGHT ROOM</span></h1>
	<hr>
	<h2>Tai sao blabala</h2>
	<p>Tai sao blabalaTai sao blabalaTai sao blabala <br>Tai sao blabalaTai sao blabala</p>
	<i style="font-size: 25px;">Tai sao blabalaTai Tai sao blabalaTai Tai sao blabalaTai</i>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
	</ul>
	
	<ol>
		<li>List 1</li>
		<li>List 2</li>
	</ol>
	<u>HOTLINE</u>
	<a href="tel:09123456789"><b>09123456789</b></a>
	<a href="mailto:cuongtiendx@gmail.com">arena@vn.com</a>
	<a href="https://cuongtien.com/html-la-gi-2/">Google</a>
</body>
</html>

 

Bai tap:

Bai 1:

Tai nguyen: https://drive.google.com/open?id=1k0rgInwilz0-7aUGqWorkqhYgzxDTeZ5
CODE DEMO:

 

<!doctype html> 
<html> 
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
	
<body>
	<img src="logo.png" width="100px" alt="logo">
	<span style="font-size: 30px;">
		Khoa hoc <span style="color: aqua">Light Room</span>
	</span>
	<hr>
	<img src="https://img2.thuthuatphanmem.vn/uploads/2018/12/30/anh-background-cuc-dep_110341116.jpg" height="300px">
	<br>
	<b>Lorem Ipsum là gì?</b>
	<p>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công</p>
	<i>Tại sao lại sử dụng nó?</i>
	<ul>
		<li>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả</li>
		<li>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả</li>
	</ul>
	<u>HOTLINE: </u>
	<ol>
		<li><a href="tel:0988888">0988888</a>(Ms.A)</li>
		<li><a href="tel:0988888">0988888</a>(Ms.A)</li>
	</ol>
	<p>Email: <a href="mailto:cuongtiendx@gmail.com">Cuongtien mail</a></p>
	<b>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả: <a href="https://cuongtien.com/html-la-gi-2/">https://cuongtien.com/html-la-gi-2/</a></b>
	
</body>
</html>

 

Bai 2:

Tai nguyen: https://drive.google.com/drive/folders/17nckaZZSG4jm9s0_9OG-P4H2BHPAwBZ-?usp=sharing

Bai 3:

Tai nguyen: https://drive.google.com/drive/folders/1UwI4s1TfPzD9u-J-f_vStcrLk45wGvjA?usp=sharing

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bai 2</title>
</head>

<body>
	
	<center>
		<img src="img/fotografia-logo-png-1.png" width="100px" alt="logo">
		<h1>Lorem Ipsum là gì?</h1>
		<hr width="500px">
	</center>
	<b style="color: orange; font-size: 20px;">Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn</b>
	<p><span style="color: orange; font-weight: bold">Lorem Ipsum đã được sử dụng như một văn bản chuẩn</span> cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo thành một bản mẫu văn bản. Đoạn văn bản này không những đã tồn tại năm thế kỉ, mà khi được áp dụng vào tin học văn phòng, nội dung của nó vẫn không hề bị thay đổi</p>
	
	<ul>
		<li><b><a style="color: red; text-decoration: none;" href="#">Lien thong quoc te</a></b></li>
		<li>list 2</li>
		<li>list 3</li>
	</ul>
	
	<ol>
		<li>list 1</li>
		<li>list 2</li>
		<li>list 3</li>
	</ol>
	
	
</body>
</html>

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *