This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Monday, 2 April 2018

Season 3: HTML Tutorial


I. HTML Comments

Dùng để chèn đoạn nhận xét vào tài liệu HTML, hoặc có thể dùng để ẩn đi đoạn code không được sử dụng
<!-- Write your comments here -->



II. HTML Colors

Color Names


HTML hỗ trợ 140 màu ở dạng color name và rất rất nhiều màu ở dạng hex, rgb,...

<!DOCTYPE html>
<html>

<body>
    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
    <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="background-color:Gray;">Gray</h1>
    <h1 style="background-color:SlateBlue;">SlateBlue</h1>
    <h1 style="background-color:Violet;">Violet</h1>
    <h1 style="background-color:LightGray;">LightGray</h1>
</body>

</html>
Xem chi tiết 140 màu tại đây

Background Color 


Chỉ định màu nền cho thành phần
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color 


Chỉ định màu chữ
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color 


Chỉ định màu viền
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values 


Như đã trình bày các giá trị cho màu có thể là chữ, HEX, RGB, HSL, HSLA, RGBA
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB Value


Màu này được xác định rgb(red, green, blue) tức đỏ, xanh lục và xanh nước biển, khoảng giá trị cho từng thành phần biến thiên từ 0 tới 255, số càng lớn thì cường độ màu càng mạnh và ngược lại



HEX Value


Đây gọi là màu thập lục phân sử dụng 6 chữ số để xác định màu theo form #rrggbb. Tương tự như màu RGB


HSL Value


Màu này sử dụng sắc, độ bão hòa và độ sáng theo công thức hsl(hue, saturation, lightness)
  • Hue trong khoảng 0 tới 360, 0-đỏ, 120-xanh, 240-xanh da trời
  • saturation từ 0% tới 100%, 0% có nghĩa là một bóng của màu xám, và 100% là màu sắc đầy đủ
  • lightness cũng tương tự, 0% là màu đen, 50% không sáng hoặc tối, 100% trắng

RGBA Value


Màu này tương tự như RGB nhưng được bổ xung thêm thuộc tính A (Alpha) chỉ độ trong suốt của màu. A biến thiên từ 0 tới 1, càng tiến về 0 độ trong suốt càng tăng


HSLA Value


Tương tự được bổ sung thêm A để chỉnh độ trong suốt


III. HTML CSS

CSS là viết tắt của Cascading Style Sheets, nó mô tả các phần tử HTML được hiển thị như thế nào trên màn hình. Nói nôm na HTML là nội thất bên trong, CSS là mặt tiền bên ngoài

Trong HTML CSS có thể gọi đến bằng 3 cách

  • Inline - bằng cách sử dụng thuộc tính style trong các phần tử HTML
  • Nội bộ - bằng cách sử dụng thuộc tính style cho mỗi phần tử
  • Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài


Inline CSS


Được sử dụng bằng cách thêm style làm thuộc tính cho thẻ

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS


Sử dụng <style> bên trong cặp thẻ <head>

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS


Gọi file CSS từ bên ngoài vào bằng thẻ <link>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Fonts


Thuộc tính color xác định màu văn bản sẽ được sử dụng.
Thuộc tính font-family định nghĩa phông chữ sẽ được sử dụng.
Thuộc tính font-size xác định kích thước văn bản sẽ được sử dụng.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Tải tài nguyên css


Bạn có thể tải css từ nguồn trang khác thông qua thẻ link. Ví dụ
/* Tải tài nguyên từ nguồn khác */
<link rel="stylesheet" href="https://site.com/html/styles.css">

/* Tải tài nguyên local với file css và html cùng 1 thư mục */
<link rel="stylesheet" href="styles.css">

Đón đọc bài viết tiếp theo...
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js