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 :
- Phần mềm soạn thảo văn bản:
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)
Lưu tập tin html với mẫu như hình (bấm vào đây để xem ảnh rõ hơn) :
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:
Ok, xem hình sẽ rõ hơn :D :
Ngoài ra các bạn có thể thấy thẻ này:
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;
- Thẻ tạo danh mục, đánh số:
Sẽ thành:
Để 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 :
Khuyên các bạn nên dùng 2 cái dưới
- 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)
- Phần mềm soạn thảo văn bản:
OK, như vậy là đủ để đi "cày" HTML :))
- 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õ
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 (bấm vào đây để xem ảnh rõ hơn) :
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 :
<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:
Đánh số thì sao?
- Danh mục dòng 1
- Danh mục dòng 2
<ol> <li>Danh mục số 1</li><li>Danh mục số 2</li> </ol>
Sẽ thành:
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.
- Danh mục số 1
- Danh mục số 2
TruongAnh Blog
