» » Tự học lập trình Website/Blog phần 2 : Tạo trang web HTML đơn giản

Tự học lập trình Website/Blog phần 2 : Tạo trang web HTML đơn giản

Tiếp nối bài viết trước, hôm nay mình xin hướng dẫn các bạn tạo một trang web bằng HTML đơn giản. Bài viết này mình sẽ giới thiệu về cấu trúc của một trang HTML, các thẻ(tag) cần thiết nhất để sau này các bạn có thể áp dụng được vào với Blogger-Blogspot.

Để bắt đầu chúng ta cũng cần "tư liệu sản xuất" ( yêu triết quá :D):
- Trình duyệt web :
  •  là  IE( Internet Explorer) - Cái này mặc định Windown XP đã có sẵn
  • là Google Chrome ( cái này mình ưng phết)
  • là FireFox (cái này mình cũng hay dùng :D và cũng rất nhiều coder dùng)
Khuyên các bạn nên dùng 2 cái dưới
- Phần mềm soạn thảo văn bản:
  • Notepad
    • : là phần mềm đã có sẵn, rất tiện sử dụng
  • Notepad ++
    • : Nâng cao hơn Notepad, có phân biệt màu để coder nhìn rõ
OK, như vậy là đủ để đi "cày" HTML :))
Một file HTML có dạng tổng quát như sau:
(Các bạn có thể copy nhưng mình khuyên là nên gõ để nhớ lâu hơn)
<html><!-- Mở đầu 1 tập tin HTML-->
<head>
<title>Trang Web đầu tiên của tôi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1> Tiêu đề có kích thước lớn nhất</h1>
<h2>Tiêu đề có kích thước heading2</h2>
...
<h6>Tiêu đề có kích thước nhỏ nhất h6</h6>
<p>Đoạn văn bản</p>
</body><!--Kết thúc thẻ body-->
</html><!--Kết thúc thẻ html-->

Lưu tập tin html với mẫu như hình


Một cặp thẻ HTML thường có dạng <thẻ>Nội dung</thẻ>
Ở ví dụ trên ta thấy có mấy cặp thẻ sau:
<html></html> : Định nghĩa cho trình duyệt biết đây là tập tin HTML
<head></head>: Đây là cặp thẻ khai báo phần đầu tệp tin HTML
<title></title>: Cặp thẻ hiển thị tiêu đề của trang web trên trình duyệt.
<body></body>: Đây là cặp thẻ khai báo phần thân của tập tin HTML
<h1></h1>...<h6></h6> : Thẻ tiêu đề, h1 là lớn nhất, h6 là nhỏ nhất.
<p></p>: Cặp thẻ này sẽ hiển thị đoạn văn bản.
<!--Nội dung chú thích Code--> : Nội dung nằm trong cặp thẻ <!-- --> sẽ không hiển thị, chỉ giúp cho người lập trình dễ nắm bắt đc cấu trúc của trang web.

Ok, xem hình sẽ rõ hơn :D :


Ngoài ra các bạn có thể thấy thẻ này:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
thẻ này giúp khai báo cho trình duyệt biết trang HTML ta tạo ra sử dụng kiểu mã hóa UTF-8, phải khai báo như thế thì khi bạn gõ tiếng Việt bằng Vietkey hay Unikey thì văn bản đã được mã hóa theo chuẩn nào đó
nó kết thúc thẻ bằng /> không cần phải </meta>
một số thẻ dạng này:
<hr /> : nằm trong cặp thẻ body, tác dụng : Kẻ 1 đường thẳng
<br /> : nằm trong cặp thẻ body, tác dụng : Xuống 1 dòng.

Một số thẻ thường dùng trong BLOGGER/BLOGSPOT:
- Thẻ dùng để định dạng văn bản;
<b></b>: Chữ tô đậm hay thường gọi là chữ béo ^^! (tiếng anh nó là Bold)
VD: Đây là chữ tô đậm. 
<i>Chữ nghiêng phải</i> ==>> Chữ nghiêng phải
<u>Chữ gạch chân</u>==> Chữ gạch chân(Mình đang dùng thẻ b để tô đậm thẻ i, u cho các bạn rõ đây ^^)
<span style="font-family: 'Courier New', Courier, monospace;">Kiểu chữ Courier New</span> ==> Kiểu chữ Courier New
<center></center>: Những phần văn bản, hình ảnh, video... nằm trong cặp thẻ này sẽ được cho vào chính giữa trang web.

- Thẻ tạo danh mục, đánh số:
<ul>
<li>Danh mục dòng 1</li>
<li>Danh mục dòng 2</li>
</ul>
Sẽ thành:
  • Danh mục dòng 1
  • Danh mục dòng 2
Đánh số thì sao?
<ol>
<li>Danh mục số 1</li>

<li>Danh mục số 2</li>
</ol>


Sẽ thành:
  1. Danh mục số 1
  2. Danh mục số 2
Bài viết do mình tự tìm hiểu và học hỏi nên chỉ trình bày cho các bạn những điều cần thiết mà mình biết, nên còn thiếu sót nhiều, rất mong được các bạn góp ý ! Thân.
Tổng Hợp Internet

0 nhận xét trong bài "Tự học lập trình Website/Blog phần 2 : Tạo trang web HTML đơn giản"

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)