Trang chủ \ \ \

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
  • Google Chrome ( cái này mình ưng phết)
  • 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 (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 :


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.
TruongAnh Blog

+1 để chia sẻ

DMCA.com Protection Status

14

nhận xét

Rất căn bản nhưng hơi dài, đối với người mới tìm hiểu sẽ hơi bị nản.

Mình đề nghị ngắt làm hai, ở cuối mỗi bài có một bài tập nhỏ. Như vậy người học sẽ hứng thú hơn..

Trả lời Xóa

Nhớ lại lúc mới đầu tập tành làm website
Những code đầu tiên của mình :D

Trả lời Xóa

@Hồng Hòa Vi Cảm ơn bác đã qua góp ý, em viết văn còn kém nên phần trình bày bài viết chưa được hay lắm :D

Sẽ cập nhật và bổ sung ý kiến của bác.
Chân thành cảm ơn bác ! ^^! Chúc bác vui.
Mà hình như bác cũng đang xây dựng trang web học thiết kế web phải không?

Trả lời Xóa

vừa mới làm cách đây chừng tuần :) chủ yếu chía sẻ kinh nghiệm thôi... :)

Trả lời Xóa

Khá chi tiết đó BTA. Nội dung bài viết này là nền tảng để thiết kế ra 1 template riêng rùi. Mà template hiện tại BTA dùng tốc độ load kinh thiệt. Khâm phục

Trả lời Xóa

@Võ Quốc An Hj. Temp này mình đang test thử nên đang rối ren, chèn lung tung nên nó chậm thế :)

Trả lời Xóa

ti�u d? c� k�ch thu?c l?n nh?t
title 2
title 3
...
ti�u d? c� k�ch thu?c min

Try your best

bản của tớ bị lỗi font cậu ạ

Trả lời Xóa

@Khactrinhdk Cậu dùng bản notepad hay notepad ++? Mình gõ bằng notepad >> vào Format chọn Font Courier New rồi gõ bình thường đấy :)

Trả lời Xóa

Yêu cầu:
1. Dựa vào hình ảnh được cung cấp. Sử dụng HTML và External CSS để thiết kế trang web như hình 01.
2. Khi mới mở trang web, mặc định Mùa Xuân sẽ được chọn và hiển thị các hình ãnh của mùa xuân.
3. Khi click chọn mùa nào sẽ hiển thị các hình ãnh tương ứng của mùa đó.

em cần giải bài tập như thế giúp e với...1

Trả lời Xóa

Yêu cầu:
1. Dựa vào hình ảnh được cung cấp. Sử dụng HTML và External CSS để thiết kế trang web như hình 01.
2. Khi mới mở trang web, mặc định Mùa Xuân sẽ được chọn và hiển thị các hình ãnh của mùa xuân.
3. Khi click chọn mùa nào sẽ hiển thị các hình ãnh tương ứng của mùa đó.

em cần giải bài tập như thế giúp e với...1

Trả lời Xóa

Chào bạn!
1, Để dựng lại trang web khi có mẫu ảnh (template) bằng photoshop không thể nói trong 1 vài dòng mà có thể làm được, bạn có thể tham khảo và học hỏi theo các video với từ khóa "PSD to HTML", ở đây mình xin giời thiệu izwebz

2 + 3, Mình không rõ câu hỏi lắm, ý bạn là thay đổi hình nền hay là sao?

Trả lời Xóa

ko dc
nó cứ ra cái trang google

Trả lời Xóa

hi bạn cần phải tạo bằng nodepad hoặc 1 trình soạn thảo nào đấy, gõ đoạn code mình cho sau đó lưu vs tên bất kì (đuôi là .html) > Bấm đúp vào file vừa lưu đấy là sẽ đc mà bạn. Nếu muốn nhanh bạn có thể copy đoạn code trên để chạy thử tại đây .

Trả lời Xóa

Tình yêu với Lập trình, cảm ơn bạn nhé

Trả lời Xóa

Đăng nhận xét :

Hủy trả lời

Cảm ơn bạn đã đọc bài viết, nếu có góp ý vui lòng gõ tiếng Việt có dấu, dễ đọc và tỏ ra tôn trọng tiếng Việt nhé !
Mọi ý kiến hay khúc mắc riêng các bạn có thể gửi về Trang Liên hệ Hoặc qua email của mình: buitruonganh.tk@gmail.com nhé !
Hân hạnh được làm quen! Bùi Trường Anh

Thư mục

Nhận xét mới

↑ top | RSS | Policy | © Copyright