Hướng dẫn HTML/CSS căn bản và nhúng các tiện ích vào blogspot

Việc thiết kế hoặc tùy biến được một giao diện website ưng ý, mang lại những trải nghiệm tốt nhất cho người dùngkhông phải chuyện một sớm một chiều mà phải có thời gian, nhất là với những người không biết lập trình là gì. Sau đây mình sẽ hướng dẫn cho các bạn các thẻ HTML căn bản thường xuyên được sử dụng trong thiết kế website/ blogspot.

Phần 1: HTML căn bản.

1. HTML là gì ?

HTML viết tắt của Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn bản). HTML có các thẻ (tag) sẽ quy định các thành phần tạo nên bố cục của một website. Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu "<" và dấu ">", qua đó trình duyệt biết cách thức hiển thị đoạn kí tự bên trong thẻ HTML đó.

Ví dụ:

Cần hiển thị chữ in đậm thì dùng thẻ <b>:

1

<b>A</b>
Hay chữ in nghiêng bằng thẻ <i>:

1

<i>A</i>

Lưu ý:

Thẻ HTML thường đi theo cặp mở và đóng. ví dụ: <i> là thẻ mở báo cho trình duyệt biết được "bắt đầu in nghiêng". Nội dung kể từ sau thẻ này đến khi gặp thẻ </i> (thẻ đóng) sẽ được viết in nghiêng.
Một số thẻ không có thẻ đóng như <br/>, <img/>, <input/>,... thì cú pháp như sau: <loại thẻ/>
Cẩn thận gặp lỗi khi đóng thẻ, mở thẻ trong trường hợp có nhiều thẻ lồng nhau. Đây là 1 ví dụ sai:

1

<p><h1>Tiêu đề</p></h1>

Các thẻ đóng - mở con sẽ phải nằm gọn trong thẻ đóng mở cha.

Bạn có thể học chi tiết về HTML căn bản ở Izwebz với series hướng dẫn qua video rất đầy đủ và dễ hiểu.

2. Cấu trúc của 1 file html cơ bản:

<html>

<head>

 <title>Đây là thẻ đánh dấu tiêu đề trang web</title>

 <!-- Comment: Các thông tin khai báo, các thông tin ẩn -->

 </head>

 <body>

 <!-- Comment: Nội dung trang web mà người dùng sẽ thấy -->

 <b>Đây là dòng chữ in đậm</b>

 <i>Đây là dòng chữ in nghiêng</i>

 </body>

</html>

Lưu ý:

Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên.
Thẻ<html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.
Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.
Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.
Mọi kí tự nằm giữa dấu <!– và –> sẽ được xem là thẻ comment và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.

3. Các thẻ HTML cần biết cho 1 blogger/ quản trị web:

Các thẻ heading (đề mục), có 6 cấp độ giảm dần về kích thước (font-size) và độ nhấn mạnh từ <h1> đến <h6>. Việc tối ưu hóa các thẻ heading này rất quan trọng trong SEO (Search Enginee Optimize) - Tối ưu hóa bộ máy tìm kiếm, cụ thể là gã khổng lồ Google. Ví dụ:

1

2

3

4

5

6

<h1>Tiêu đề bài viết</h1>

<h2>Phần 1</h2>

<h3>Chương 1.1</h3>

<h4>Tiểu mục 1.1.1</h4>

<h5>Đề mục 1.1.1.1</h5>

<h6>Đề mục con 1.1.1.1.1</h6>
Các thẻ định dạng Text (chữ)

1

2

3

4

<b>Tô đậm</b>

<i>In nghiêng</i>

<u>Gạch chân</u>

<strong>Tô đậm theo chuẩn web ngữ nghĩa</strong>

<em>In nghiêm theo chuẩn web ngữ nghĩa</em>

Các thẻ Paragraph (phân đoạn văn bản)

<!-- Comment: thẻ p dùng để đánh dấu đoạn văn,

tách riêng với những đoạn text bình thường-->

<p>Đoạn văn bản</p>

<!-- Comment: br là thẻ đơn, nên bạn không cần thẻ đóng -->

Xuống dòng với <br/>

 <!-- Comment: trích dẫn từ nguồn khác -->

<blockquote>"Tôi chuẩn man"</blockquote>

Các thẻ list (danh sách): có 2 loại là danh sách có đánh số thứ tự <ol> và danh sách không đánh số thứ tự <ul>. Bên trong các thẻ danh sách này, các phần tử được đánh dấu với thẻ <li>.

<!-- Comment: Danh sách có sắp xếp thứ tự -->

<ol>

       <li>Phần tử 1</li>

        <li>Phần tử 2</li>

</ol>

<!-- Comment: Danh sách không sắp xếp thứ tự -->

<ul>

        <li>Phần tử 1</li>

        <li>Phần tử 2</li>

</ul>

Thẻ liên kết

1

2

3

<a href="địa chỉ liên kết" title="chữ hiển thị khi di chuột vào">Đây là một liên kết</a>

<a href="địa chỉ liên kết" target="_blank">Liên kết này sẽ mở ở cửa sổ mới</a>

<a href="địa chỉ liên kết" ref="nofollow">Liên kết này không cho bot của google đi theo</a>

Thẻ ảnh

1

<img src="đường dẫn đến ảnh" alt="chú thích cho ảnh"/>

Sau khi nắm được 1 số thẻ HTML căn bản thì các bạn có thể bắt tay vào phần tiếp theo:

Phần 2: Code dùng để nhúng các plugin mạng xã hội vào website/ blogpsot.

Theo thống kê của Facebook đến tháng 5/2014, tại Việt Nam đã có hơn 20 triệu tài khoản hoạt động thường xuyên. Rất nhiều website đã tận dụng sức mạnh của mạng xã hội lớn nhất thế giới này để lan truyền nội dung và kéo lượng truy cập vào website của mình, và các bạn cũng không muốn bỏ qua công cụ miễn phí này chứ ?

Chèn nút Like Facebook (nút thích của Facebook): Các bạn có thể tự thiết lập và lấy code tại đây (chuyển qua tab IFRAME và Copy).

1	<iframe src="//www.facebook.com/plugins/like.php?href=link_bai_viet_de_like;width=do_rong&layout=button&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:80px;" allowTransparency="true"></iframe>

Chèn nút Share Facebook (nút chia sẻ): các bạn có thể tự thiết lập và lấy code tại đây
Chèn nút Follow Facebook (nút theo dõi): các bạn có thể tự thiết lập và lấy code tại đây
Chèn comment Facebook vào Blogspot : các bạn có thể tự thiết lập và lấy code tại đây

Chèn like box Facebook vào Blogspot: các bạn có thể tự thiết lập và lấy code tại đây hoặc copy code sau:

1

Chèn bài viết Facebook vào Blogspot: các bạn có thể tự cấu hình và lấy code tại đây

Đứng sau mạng xã hội Facebook với hơn 1,28 tỷ người dùng là mạng xã hội Google + với 540 triệu người dùng. Và cũng giống như Facebook, Google cũng phát triển các plugin tạo điều kiện cho người dùng chia sẻ nội dung lên mạng xã hội này.

Chèn nút Google+ vào Blogspot: các bạn có thể tự thiết lập tại đây

1

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript">
window.___gcfg = {lang: 'vi'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

8. Chèn nút share của Google+ vào Blogspot: các bạn có thể tự thiết lập tại đây

1

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript">
window.___gcfg = {lang: 'vi'};

Văn Hải (tổng hợp)

Chào mừng và rất vui các bạn đến với blog chia sẻ mình!

Tham quan du ngoạn từ Nam chí Bắc:

An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái

|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||

Bộ sưu tập ảnh hot:

Album nghệ thuật Dương Quốc Định Full || Albums Quang Linh || Ảnh chỉ có Việt Nam || Ảnh cưới Collection || Ảnh đẹp Phương Tây || Ảnh đẹp Victoria’s Sceret tổng hợp || Ảnh độc cười ra nước mắt || Ảnh giải trí Châu Á || Ảnh giải trí Hàn Quốc || Ảnh giải trí Nhật Bản || Ảnh giải trí Thái Lan || Ảnh giải trí Trung Quốc || Ảnh nền PC || Ảnh nghệ thuật 3D || Ảnh Nude || Hoa đẹp bốn mùa nên xem || Hoa hậu thế giới Collection || Hoa hậu Việt Nam Collection || Hoa Phong Lan || Thư viện ảnh || Thời sự qua ảnh || Tranh đẹp của họa sĩ nổi tiếng

|| || || || || || || || || || || || || || || || || ||

Like bài viết nếu bạn thấy hay và có ích :

Admin: Haitaynamkg

Thích ngắm biển chiều hoàng hôn Tây Nam (Rạch Giá - Kiên Giang) và viết lách blog để chia sẻ kiến thức của nhân loại cùng mọi người. Sống thì phải lao động dù điều đó có thể đem lại cho bạn bao buồn vui... mệt mỏi... nghỉ ngơi chỉ để dành cho những người die thui...