Cấu trúc HTML:Tables, divs và spans.
+. Tạo bảng.
- Cấu trúc của mã lệnh tạo bảng là: <table></table>.
+.Tạo hàng ngang, dãy.
- Cấu trúc của mã lệnh tạo hàng, dãy là: <tr></tr>.
- Lưu ý là hãng, dãy luôn nằm trong bảng.
+. Tạo cột, hàng dọc.
- Cấu trúc của mã lệnh tạo cột, hàng dọc là: <td></td>.
- Chúng ta dùng thẻ <th></th> để đặt trên cùng của cột, hàng và ký tự trong ô này sẽ được in đậm.
- Lưu ý là cũng nằm trong bảng.
- Cấu trúc của mã lệnh tạo bảng là: <table></table>.
+.Tạo hàng ngang, dãy.
- Cấu trúc của mã lệnh tạo hàng, dãy là: <tr></tr>.
- Lưu ý là hãng, dãy luôn nằm trong bảng.
+. Tạo cột, hàng dọc.
- Cấu trúc của mã lệnh tạo cột, hàng dọc là: <td></td>.
- Chúng ta dùng thẻ <th></th> để đặt trên cùng của cột, hàng và ký tự trong ô này sẽ được in đậm.
- Lưu ý là cũng nằm trong bảng.
+. Thêm cột thứ hai.
- Chúng ta sẽ lồng thẻ <td></td> vào thẻ <tr></tr> thì sẽ tạo ra một hàng ngang và hai cột dọc.
- Ví dụ như: <tr>
<td>King Kong</td>
<td>1933</td>
</tr>
+. Chứa thông tin của bảng.
- Chúng ta dùng thẻ <thead></thead> để chứa thông tin của bảng.
- Chúng ta dùng thẻ <tbody></tbody> để chứa thông tin các hàng, cột.
+. Tiêu đề của bảng.
- Cấu trúc của mã lệnh là: colspan="(khoảng cách)" được đặt trong thẻ lệnh. Khoảng cách 1 là xa nhất.
- Ví dụ như: <th colspan="3">Famous Monsters by Birth Year</th>.
+. Phân chia các mảng.
- Chúng ta sử dụng thẻ <div></div> để phân chia các mảng trong đoạn mã của mình.
- Cấu trúc của thẻ: <div style="width:(số)px; height:(số)px; background-color:(màu theo tiếng Anh)"></div>.
- Ví dụ như: <div style="width:50px; height:50px; background-color:red"></div>. Ở đây width là chiều rộng, height là chiều cao, background mà màu nền, các số 50 là kích thước của mảng và red là màu đỏ theo tiếng Anh.
+. Thay đổi màu sắc của cả một đoạn ký tự.
- Chúng ta sử dụng thẻ <span></span> để định dạng màu sắc của cả một đoạn ký tự.
- Cấu trúc của thẻ: <span style="color:(màu theo tiếng Anh)"><p>(nội dung(</span></p>
- Ví dụ như: <span style="color:red"><p>This text is black, except for the word red!</span></p>. Ở đây red là màu đỏ theo tiếng Anh, <p> là thẻ đoạn văn.
+. Vào một trang ảnh.
Sử dụng kiến thức đã học từ những phần trước tạo bảng, cột dọc, hàng ngang, thẻ <thead> chứa thông tin, chèn liên kết ảnh vào những cột, hàng ngang có sẵn và chèn địa chỉ website của liên kết ảnh vào.
------------------------------------------------------------------------------------------------------------------
INTRDUCTION TO CSS
+.CSS: Cái nhìn tổng quát.
- Ở bài này, chúng ta sẽ dùng tab stylesheet.css để học về css.
- Dùng mã lệnh <link type="text/css" rel="stylesheet" href="stylesheet.css"/> để tích hợp mã lệnh từ tab stylesheet.css vào tab index.html.
+. CSS là gì ?
- CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ đc sử dụng để mô tatr sự xuất hiện và định dạng HTML của bạn (như kiểu font chữ, màu sắc, khoảng cách vv..).
- CSS có thể chỉnh sửa cả một đoạn văn hay chỉ một ký tự.
- CSS có thể chỉnh sửa nhiều thẻ cùng loại một cách đơn giản mà không phải làm từng thẻ một.
+ CSS có 3 loại cơ bản:
- Inline CSS: Viết các thuộc tính quy định luôn trong attribute style.
- Ưu điểm: có khả năng sử dụng lại.
- Nhược điểm: phải viết code nhiều.
+ Nên dùng khi chỉ muốn thay đổi một thẻ html thì sẽ sử dụng inline css.
+ Ví dụ: <h1 style="color:green">Màu xanh của sự sống</h1>
- Embbed CSS (CSS nhúng): Viết luôn CSS trong phần head của file html, phạm vi sử dụng trong một file html.
- Ví dụ: <html>
<head>
<title> Embbed CSS</title>
<style type="text/css'>
<!-- p {color:green; font-size:10pt; font-family: Verdana;}h1{color:green;} -->
</style>
</head>
<body bgcolor="#FFFFFF">
<h1>Màu xanh lá cây</h1>
<p> Màu xanh, 10pt. và Garamond.</p>
</body>
</html>
- External CSS: CSS đc viết ra một file riêng, có thể sử dụng trong nhiều file html trong cùng website.
+ Muốn sử dụng lại css thì đưa link liên kêt, ví dụ: <link href="newcss.css" type="text/css" rel="stylesheet" /> trong đó:
+ href là địa chỉ file css (thay đổi tùy vào website).
+ type="text/css" loại dự liệu là text và css (giữ nguyên).
+ rel="stylesheet" loại áp dụng là thẻ quy định đặc điểm (giữ nguyên).
+ Ví dụ: p {
font-family:Verdana;
font-color:green;
color:purple;
background-color:white;
}
+ Cú pháp trong CSS.
- Mẫu cú pháp chung: selector {
property: value;
}
+ Selector là một nguyên tố bất kỳ trong HTML, như là <p>, <img> hoặc là <table>, nhưng nhớ là bỏ dấu "<>" đi.
+ Property là một kiểu tính chất của Selector (nguyên tố), như là font-family, color hoặc là font-size của đoạn ký tự trên trang web.
+ Value là một giá trí của Property (tính chất), như là color có thể là red (đỏ), blue (xanh dương) hoặc bất kỳ màu nào, font-size có thể là 10px hay bất kỳ cỡ nào.
+ Bạn cần phải kết thúc một property-value bằng một dấu chấm phẩy ";"
- Ví dụ như làm cho đoạn văn có màu đỏ: p {
color: red;
}
- Bạn có thể thêm nhiều tính chất cho một nguyên tố, ví dụ như:
p {
font-family: Arial;
color: blue;
font-size: 24px;
}
- Nếu bạn vừa chỉnh sửa font-size và height nhưng nó ko hoạt động thì hãy gõ Command+0 hoặc là Ctrl+0 để làm lại mã.
- Hãy luôn nhớ rằng có một dấu chấm phẩy sau mỗi propety-value và property-value thì luôn nằm trong dấu {}.
- Mã lệnh bình luận trong CSS là: /* Bình luận */.
- Chúng ta có thể chỉnh sửa màu sắc trong tab stylesheet.css bằng hex color, nó được viết bằng một dấu thăng, theo sau là 6 chữ ( không phân biệt hoa hay thường) và số, ví dụ như: #FFC125.
- Để biết được mỗi màu sắc có mã lệnh như thế nào thì chúng ta phải tìm hiểu thông qua các phần mềm và internet, từ khóa tìm kiếm là hex color palette hoặc hex color picker.
- Có 3 loại phông chữ mới, đó là: serif, sans-serif và cursive.
- Mã lệnh tạo đường viền trong CSS là: selector {
border: (số)px solid (màu);
}
- Ví dụ như: selector {
border: 2px solid red;
}
- Mã lệnh tạo đường gạch chân đoạn ký tự:
selector {
text-decoration:(màu theo tiếng Anh hoặc cũng cỏ thể chọn none là không màu);
}
+ Thiết kế nút cho trang web.
Dựa vào những kiến thức đã học về thẻ <div></div>, đường viền border, vị trí text-align, thẻ <span></span>, font-family, size, thẻ ảnh <img> và thẻ liên kết <a> để tạo một nút bấm mà khi người xem click vào đó sẽ dẫn đến trang web của bạn.
- Chúng ta sẽ lồng thẻ <td></td> vào thẻ <tr></tr> thì sẽ tạo ra một hàng ngang và hai cột dọc.
- Ví dụ như: <tr>
<td>King Kong</td>
<td>1933</td>
</tr>
+. Chứa thông tin của bảng.
- Chúng ta dùng thẻ <thead></thead> để chứa thông tin của bảng.
- Chúng ta dùng thẻ <tbody></tbody> để chứa thông tin các hàng, cột.
+. Tiêu đề của bảng.
- Cấu trúc của mã lệnh là: colspan="(khoảng cách)" được đặt trong thẻ lệnh. Khoảng cách 1 là xa nhất.
- Ví dụ như: <th colspan="3">Famous Monsters by Birth Year</th>.
+. Phân chia các mảng.
- Chúng ta sử dụng thẻ <div></div> để phân chia các mảng trong đoạn mã của mình.
- Cấu trúc của thẻ: <div style="width:(số)px; height:(số)px; background-color:(màu theo tiếng Anh)"></div>.
- Ví dụ như: <div style="width:50px; height:50px; background-color:red"></div>. Ở đây width là chiều rộng, height là chiều cao, background mà màu nền, các số 50 là kích thước của mảng và red là màu đỏ theo tiếng Anh.
+. Thay đổi màu sắc của cả một đoạn ký tự.
- Chúng ta sử dụng thẻ <span></span> để định dạng màu sắc của cả một đoạn ký tự.
- Cấu trúc của thẻ: <span style="color:(màu theo tiếng Anh)"><p>(nội dung(</span></p>
- Ví dụ như: <span style="color:red"><p>This text is black, except for the word red!</span></p>. Ở đây red là màu đỏ theo tiếng Anh, <p> là thẻ đoạn văn.
+. Vào một trang ảnh.
Sử dụng kiến thức đã học từ những phần trước tạo bảng, cột dọc, hàng ngang, thẻ <thead> chứa thông tin, chèn liên kết ảnh vào những cột, hàng ngang có sẵn và chèn địa chỉ website của liên kết ảnh vào.
------------------------------------------------------------------------------------------------------------------
INTRDUCTION TO CSS
+.CSS: Cái nhìn tổng quát.
- Ở bài này, chúng ta sẽ dùng tab stylesheet.css để học về css.
- Dùng mã lệnh <link type="text/css" rel="stylesheet" href="stylesheet.css"/> để tích hợp mã lệnh từ tab stylesheet.css vào tab index.html.
+. CSS là gì ?
- CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ đc sử dụng để mô tatr sự xuất hiện và định dạng HTML của bạn (như kiểu font chữ, màu sắc, khoảng cách vv..).
- CSS có thể chỉnh sửa cả một đoạn văn hay chỉ một ký tự.
- CSS có thể chỉnh sửa nhiều thẻ cùng loại một cách đơn giản mà không phải làm từng thẻ một.
+ CSS có 3 loại cơ bản:
- Inline CSS: Viết các thuộc tính quy định luôn trong attribute style.
- Ưu điểm: có khả năng sử dụng lại.
- Nhược điểm: phải viết code nhiều.
+ Nên dùng khi chỉ muốn thay đổi một thẻ html thì sẽ sử dụng inline css.
+ Ví dụ: <h1 style="color:green">Màu xanh của sự sống</h1>
- Embbed CSS (CSS nhúng): Viết luôn CSS trong phần head của file html, phạm vi sử dụng trong một file html.
- Ví dụ: <html>
<head>
<title> Embbed CSS</title>
<style type="text/css'>
<!-- p {color:green; font-size:10pt; font-family: Verdana;}h1{color:green;} -->
</style>
</head>
<body bgcolor="#FFFFFF">
<h1>Màu xanh lá cây</h1>
<p> Màu xanh, 10pt. và Garamond.</p>
</body>
</html>
- External CSS: CSS đc viết ra một file riêng, có thể sử dụng trong nhiều file html trong cùng website.
+ Muốn sử dụng lại css thì đưa link liên kêt, ví dụ: <link href="newcss.css" type="text/css" rel="stylesheet" /> trong đó:
+ href là địa chỉ file css (thay đổi tùy vào website).
+ type="text/css" loại dự liệu là text và css (giữ nguyên).
+ rel="stylesheet" loại áp dụng là thẻ quy định đặc điểm (giữ nguyên).
+ Ví dụ: p {
font-family:Verdana;
font-color:green;
color:purple;
background-color:white;
}
+ Cú pháp trong CSS.
- Mẫu cú pháp chung: selector {
property: value;
}
+ Selector là một nguyên tố bất kỳ trong HTML, như là <p>, <img> hoặc là <table>, nhưng nhớ là bỏ dấu "<>" đi.
+ Property là một kiểu tính chất của Selector (nguyên tố), như là font-family, color hoặc là font-size của đoạn ký tự trên trang web.
+ Value là một giá trí của Property (tính chất), như là color có thể là red (đỏ), blue (xanh dương) hoặc bất kỳ màu nào, font-size có thể là 10px hay bất kỳ cỡ nào.
+ Bạn cần phải kết thúc một property-value bằng một dấu chấm phẩy ";"
- Ví dụ như làm cho đoạn văn có màu đỏ: p {
color: red;
}
- Bạn có thể thêm nhiều tính chất cho một nguyên tố, ví dụ như:
p {
font-family: Arial;
color: blue;
font-size: 24px;
}
- Nếu bạn vừa chỉnh sửa font-size và height nhưng nó ko hoạt động thì hãy gõ Command+0 hoặc là Ctrl+0 để làm lại mã.
- Hãy luôn nhớ rằng có một dấu chấm phẩy sau mỗi propety-value và property-value thì luôn nằm trong dấu {}.
- Mã lệnh bình luận trong CSS là: /* Bình luận */.
- Chúng ta có thể chỉnh sửa màu sắc trong tab stylesheet.css bằng hex color, nó được viết bằng một dấu thăng, theo sau là 6 chữ ( không phân biệt hoa hay thường) và số, ví dụ như: #FFC125.
- Để biết được mỗi màu sắc có mã lệnh như thế nào thì chúng ta phải tìm hiểu thông qua các phần mềm và internet, từ khóa tìm kiếm là hex color palette hoặc hex color picker.
- Có 3 loại phông chữ mới, đó là: serif, sans-serif và cursive.
- Mã lệnh tạo đường viền trong CSS là: selector {
border: (số)px solid (màu);
}
- Ví dụ như: selector {
border: 2px solid red;
}
- Mã lệnh tạo đường gạch chân đoạn ký tự:
selector {
text-decoration:(màu theo tiếng Anh hoặc cũng cỏ thể chọn none là không màu);
}
+ Thiết kế nút cho trang web.
Dựa vào những kiến thức đã học về thẻ <div></div>, đường viền border, vị trí text-align, thẻ <span></span>, font-family, size, thẻ ảnh <img> và thẻ liên kết <a> để tạo một nút bấm mà khi người xem click vào đó sẽ dẫn đến trang web của bạn.
Comments
Post a Comment