Thứ Hai, 3 tháng 6, 2019

Các đoạn HTML và CSS code hay dùng

Tags

top-html-and-css-codes

Có một số đoạn code HTML hay dùng, và đôi khi bạn không thể nhớ hết mọi cú pháp. Để nó lan man và mỗi khi dùng đến lại phải tìm kiếm thật là một cực hình. Vì vậy mình tập hợp lại tại đây cho bản thân cũng như minh họa cho các bạn cách tổ chức đơn giản các đoạn code hay dùng, không chỉ của HTML mà còn có thể CSS, các đoạn script,... nữa.

  1. Code HTML tạo Mục lục cho trang web
  2. Youtube Subscribe Link (URL)
  3. Chèn Text với Link
  4. Màu sắc cho Text
  5. Font mới cho Text
  6. Chèn No Follow cho Link
  7. Chèn ảnh (image)
  8. Chèn Table



1. Tạo mục lục


Như phần mục lục trong bài này. Đầu tiên bạn quét chọn đoạn cần chèn link, sau đó add vào link với cú pháp sau

URL của trang đó + "#" + tên của mục lục

Ví dụ: trang này có URL là http://www.itbinhdan.com/2018/11/cac-doan-html-code-hay-dung.html
Vậy link dẫn tới phần Tạo mục lục này sẽ là:

http://www.itbinhdan.com/2018/11/cac-doan-html-code-hay-dung.html#tao-muc-luc

chen hyperlink tao thu muc


Sau đó bạn tới phần Tạo mục lục, chuyển qua phần soạn thảo bằng HTML. Dán đoạn sau vào ngay đầu (hoặc cuối, hoặc giữa) dòng tiêu đề  Tạo mục lục

<a name="???"></a>

Vậy là xong. Khi người xem click vào phần mục lục ở trên, trình duyệt sẽ cuộn xuống đúng phần bạn đã cài bookmark tương ứng.

Ứng dụng này khá hay để trình bày một website có lớp có lang có bố cục.


2. Youtube Subcribe Link


http://www.youtube.com/channel/chebinhdan?sub_confirmation=1

Các bạn thay chebinhdan bằng tên kênh của mình, hoặc ID của kênh, ví dụ

https://www.youtube.com/channel/UCsAZPw8AzhiykdwG9o5mzZg?sub_confirmation=1

Khi đó, người xem click vào link như dưới đây chẳng hạn, sẽ được đưa đến trang chủ của kênh Youtube và hộp thoại Subcribe sẽ tự động bung ra và hỏi  Subscribe sẵn, rất tiện
Đăng ký kênh Youtube IT BinhDan

Chú ý là đừng nên lạm dụng cái này, vì nó có thể gây ra tác dụng ngược, khiến người click vào link khó chịu, nhất là với người... lớn tuổi.


3. Chèn Text với Link


Code có dạng như dưới, trong đó domainHERE là link, còn Text viết ở đây là dòng chữ bạn muốn hiển thị.

<a href="http://domainHERE/">Text viết ở đây</a>



4. Màu sắc cho Text


Ví dụ dòng dưới:

<span style="color: #ff6cc5;">Your text here</span>

Cho kết quả: Your text here



5. Font mới cho Text


Mặc định mọi thành phần của một trang web đã được định nghĩa màu sắc, kích thước,... và những thành tố con sẽ hưởng di truyền từ thành tố cha. Nếu bạn muốn dùng một font khác cho đoạn text nào đó, hãy dùng đoạn code sau:

<span style="font-family: georgia, serif;">Your text here</span>

Còn đây là kết quả: Your text here



6. Chèn No Follow cho Link


Bạn có biết là FTC yêu cầu những link dạng Affiliates hay Sponsored (tài trợ) phải đặt tag "No Follow" vào trong đó không? Điều này nhằm ngăn những trang web dạng đó được thêm "votes" cho những link dạng "kinh tế". Nếu blog của bạn chứa quá nhiều affiliate links và lại quên béng việc chèn  tag "No Follow" thì hãy cẩn thận, và dùng code sau:

<a href="LINK-affiliate" rel="nofollow">Tiêu đề link</a>


7. Chèn ảnh (image)


Code này hay dùng phết:

<img src="duong-link-cua-image">


8. Table


Chèn vào trong phần HTML của bài viết code table có dạng sau (code sẽ tính theo hàng, để các bạn dễ hình dung)

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>


Kết quả

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3

Kết quả ta có được từ cái table trên là bởi trong template hiện nay của blog tôi có dùng shortcode sẵn cho table. Bạn có thể tinh chỉnh lại màu sắc, giao diện trong HTML nếu muốn.

Các tham số thông dụng khác

<table style="width:100%">

Độ rộng của table so với độ rộng trang web đang hiển thị


Link học table html online:
https://www.w3schools.com/html/html_tables.asp
https://html.com/tables/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table





Trang blog itbinhdan này hiện đang dùng template Simplify 2 của Arlina, và có một số shortcode lẫn widget cài đặt khá hay. Tôi sẽ đi sâu phân tích và tùy biến lại ở bài sau. Trong khi đó bạn có thể tham khảo theo link dưới đây:

Shortcode/Widget hay: https://www.arlinadzgn.com/p/tips-blogger.html

Related Posts