[6][A.Thông điệp][slider-top-big][nothing]
You are here: Home / , , HTML cơ bản

HTML cơ bản

| 2 Comments
Dù làm gì trên nền web thì html vẫn là cơ bản không thể không biết đối với dân lập trình web.

Vậy html là gì?
  • HTML là chữ viết tắt của Hyper Text Markup Language hay tiếng Việt gọi là Ngôn ngữ hiển thị siêu văn bản.
  • Một file HTML chứa những thẻ HTML
  • Những thẻ HTML sẽ hướng dẫn trình duyệt web trình bày thành phần của một trang web
  • Một file HTML phải có phần mở rộng là .html hoặc .htm
  • Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giản như Notepad
Tại sao lại phải biết html?

Rõ ràng html là rất đơn giản nhưng nó là cơ sở cho bạn học bất cứ thứ gì tiếp theo trên hành trình học lập trình web của bạn. Bạn sẽ không thể đi trên một con đường lạ một cách chính xác mà không có hướng dẫn hay bản đồ chỉ đường. 
Cho dù bạn có ý định sử dụng những phần mềm quản lý nội dung CMS để tạo ra trang web, thì bạn cũng phải có kiến thức cơ bản về HTML để chỉnh sửa và sửa lỗi khi có sự cố xảy ra. Nếu mở code lên mà ngay cả những thẻ cơ bản như <li>, <img>, <a href> … bạn đều không biết thì lúc đó sẽ rất khó khăn cho bạn quản lý trang web của mình.
Vậy thì chúng ta sẽ bắt đầu học html bằng các thẻ html cơ bản ngay bây giờ. Đầu tiên mình khuyên bạn nên sử dụng notepad cho công việc design của mình. Tất nhiên bạn cũng có thể sử dụng các phần mềm hỗ trợ code như dreamweaver hay frontpage nhưng mình khuyên bạn không nên dùng. Vì thói quen tự viết sẽ giúp bạn nhớ và hiểu rõ hơn.

Cấu trúc một trang web
<html>
<head>
    <title>Đây là tiêu đề trang</title>
</head>
<body>
    Đây là phần body
</body>
</html>

Cấu trúc một trang web khi hiển thị ở dạng html sẽ như trên
- Mọi thứ đều nằm trong thẻ mở và đóng        <html>  </html>
- Phần <head> </head> là phần bao gồm các title của trang, các CSS(sẽ giới thiệu phần sau), các Javascript...
- Phần body là phần chính của trang. Mọi thứ hiển thị trên trang web đều bắt đầu từ đây.



Ok. Khi bạn đã nắm vững cấu trúc của một trang. Chúng ta sẽ bắt đầu với các thẻ html cơ bản dưới đây:

Thẻ h1 đến h6 để hiển thị size chữ. Size chữ lớn nhất là h1, nhỏ nhất là h6. Đó là mặc định.
<h1>  Kích thước chữ h1 </h1>
<h2> Kích thước chữ h2  </h2>
<h6> Kích thước chữ h6  </h6>
Tuy vậy chúng ta cũng có thể chỉnh sửa kích cỡ chữ mặc định, màu chữ, font chữ theo ý muốn chúng ta đối với các thẻ này bằng cách sử dụng CSS. Ở phần sau mình sẽ giới thiệu chi tiết hơn. Thêm CSS vào trong <head></head> như sau:
<style type="text/css">
h1{font-size:11px; font-family:verdana; color:Green}
</style>
Mời bạn xem sự khác biệt:


Thẻ <p> </p>, <br/> dùng để xuống dòng, thẻ <br> không cần thẻ đóng.
<p>Xuống dòng</p> 
Thẻ ul, li dùng để tạo danh sách, menu...Trong <li></li> chúng ta cũng có thể thêm một ul li khác.
<ul>
<li>Thẻ li  </li>
<li>Thẻ li </li>
<li>Thẻ li </li>
<li>Thẻ li </li>
</ul>
Tạo đường kẻ bằng thẻ <hr>
Demo: 

Thẻ <center></center> dùng để căn giữa một bố cục, một div....
<center>Căn giữa dòng chữ này</center>
Demo:
Căn giữa dòng chữ này

Thẻ <b>In đậm</b>, <i>In nghiêng</i>, <u>Gạch chân</u>
Demo:
In đậm, In nghiêng, Gạch chân

Chú thích trong html ta dùng <!--Chú thích ở đây-->. 
Chú thích trong HTML dùng để diễn giải hoặc chú thích cho một thẻ HTML hoặc một đoạn mã HTML nào đó. Khi trình duyệt đọc đến dòng chú thích nó sẽ bỏ qua và không hiển thị lên trên trình duyệt. Đoạn chú thích được viết với cấu trúc nhau sau
<!--Chú thích-->

Tạo một đường link bằng thẻ <a href="link URL"></a>
<a href="http://www.erhay.com">Link tới trang Erhay</a>
Thêm thuộc tính target="_blank" để mở ở một tab mới
<a href="http://www.erhay.com" target="_blank">Link tới trang Erhay</a>
Bỏ gạch chân với link bằng một css với style="text-decoration:none" (sẽ giới thiệu phần sau):
<a style="text-decoration:none" href="http://www.erhay.com" target="_blank">Link tới trang Erhay</a>
 Hiển thị một ảnh ta dùng <img src="link tới ảnh"></img>
 <img src="link tới ảnh"></img>

Tất nhiên chúng ta có thể thêm một link tới ảnh bằng cách kết hợp với thẻ a như sau:
 <a href="http://www.erhay.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXsA2mDJLefwKCktaryAA1DZmbSzzuyZnJ3EdntJC84xWESuHMWFNg1s8yzMTydj1cwj6NiB5ULz6wRGfQgMx26rQDf_YgYp8Bj1KOzoQX3mzvamkqNaKVi678qAnHWPPXK7PeERYF3M/s96/blogger.gif"/></a>

 Dưới đây là code toàn bộ bài giới thiệu này, mọi người có thể copy vào notepad hoặc notepad++ và lưu ở định dạng uft-8 với đuôi .html hoặc .htm


<html>
<head>
<title>Ở đâu hay ở đó có erhay</title>
</head>
<body>
<!--Đây là html cơ bản -->
<b>Các cỡ chữ</b>
<h1>  Kích thước chữ h1 </h1>
<h2> Kích thước chữ h2  </h2>
<h6> Kích thước chữ h6  </h6>
<b>Tạo một ul, li<b>
<ul>
<li>Thẻ li  </li>
<li>Thẻ li </li>
<li>Thẻ li </li>
<li>Thẻ li </li>
</ul>
<p>Xuống dòng</p>
<center>Căn giữa dòng chữ này</center>
<b>In đậm</b>, <i>In nghiêng</i>, <u>Gạch chân</u></br><br>
<b>Tạo một link </b>
<a href="http://www.erhay.com">Link tới trang Erhay</a><br>
<a style="text-decoration:none" href="http://www.erhay.com" target="_blank">Link tới trang Erhay trong tab mới và không có gạch dưới</a>
<br><br>
<b>Hiển thị một ảnh</b>
<br>
<p>hiển thị một ảnh ko có link</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXsA2mDJLefwKCktaryAA1DZmbSzzuyZnJ3EdntJC84xWESuHMWFNg1s8yzMTydj1cwj6NiB5ULz6wRGfQgMx26rQDf_YgYp8Bj1KOzoQX3mzvamkqNaKVi678qAnHWPPXK7PeERYF3M/s96/blogger.gif"/>
<p>hiển thị một ảnh có link</p>
 <a href="http://www.erhay.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDXsA2mDJLefwKCktaryAA1DZmbSzzuyZnJ3EdntJC84xWESuHMWFNg1s8yzMTydj1cwj6NiB5ULz6wRGfQgMx26rQDf_YgYp8Bj1KOzoQX3mzvamkqNaKVi678qAnHWPPXK7PeERYF3M/s96/blogger.gif"/></a>
</body>
</html>


Cảm ơn bạn đã theo dõi bài viết tại Erhay, mọi thắc mắc bạn có thể gửi tại http://ask.erhay.com
Related Posts
  • Default comments
  • Facebook comments
Subscribe to: Post Comments ( Atom )