Website first test

https://757420aaf6c8a567dd1b659c218b22e1f143c920.googledrive.com/host/0BykpEUVFfhahY2J3el9jc3pSdjg/

CSS CLASSES, IDS and ELEMENT POSITIONING

I.ID và Class.
1.ID
-Hay viết tắt của  "index" dùng để xác định một đối tượng duy nhất trong văn bản HTML, mỗi đối tượng trong HTML chỉ được phép có một id, nếu không thì văn bản sẽ lỗi.
-Sử dụng ID cho những đối tượng có tính chất duy nhất trong trang web (menu chính,...).
-Cách dùng: thêm "#"  đằng trước đối tượng mà ta đặt tên id.
2.Class
-Dùng để xác định một 'lớp' các đối tượng có thuộc tính giống nhau, có thể kế thừa nhau. Một trang web html có thể có rất nhiều các đối tượng chung thuộc tính, và chúng ta sẽ sử dụng class rất nhiều.
-Cách dùng: thêm ". "đằng trước đối tượng mà ta đặt tên class.

II.Selector( Bộ chọn).
-Là mẫu chọn dùng để chọn các thành phần muốn định dạng.
 +tag : chọn các thành phần có cùng loại
       VD: p{
                       color:red;
                   }
---> Tất cả các <p> đều in ra màu đỏ.
 +tag1 tag2 : chọn tất cả các thành phần tag2 được chứa trong tag1.
        VD: div p{
                        color: Yellow;
                      }
---> Tất cả các <p> bên trong <div></div> đều được in ra màu vàng.
 +.class: chọn tất cả thành phần được đặt chung tên class
        VD: .classBurn
 +#id: chọn tất cả các thành phần chung tên ID
         VD: #idWorld
 +tag1 > tag 2: chọn tất cả thành phần tag2 là con của tag1.
 +:link: định dạng cho liên kết chưa được click vào
 +:visited: định dạng cho các thành phần đã được click.
 +:hover: định dạng cho các thành phần, liên kết được di trỏ chuột tới.
 +first-child: định dạng cho thành phần 'con' đầu tiên của một thành phần 'cha mẹ'.
        VD ;  p:first-child{
                          font-family: cursive;
                        }
----><p> đầu tiên sẽ được in ra font chữ 'cursive'.
 +nth-child(n): định dạng cho thành phần 'con' thứ n(thay giá trị cần vào ngoặc)
         VD: p:nth-child(2){
                        font-family: Tahoma;
                    }
                 p:nth-child(3){
                        color:#cc0000;
                    }
                 p:nth-child(4){
                        background-color:#00ff00;
                    }
                 p:nth-child(5){
                        font-size: 22px;
                    }
---> lần lượt các p số 2,3,4,5 sẽ được in ra theo mỗi code đã được cho sẵn.
III.Element Positioning.
-Nôm na là định dạng cho các thuộc tính điều khiền nội dung của văn bản HTML.
1.Display: xác định loại hiển thị của thành phần. Gồm một số giá trị sau:
  +block: Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.
  +inline: Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định.
  +inline-block: Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.
  +none: Thành phần không hiển thị.
2.Margins, Borders, Padding.
  +margin: thuộc tính canh lề cho thành phần, đơn vị bao gồm px, em, %,...
    .)margin-top : canh lề trên.
    .)margin-bottom: canh lề dưới.
    .)margin-right: canh lề phải.
    .)margin-canh lề trái.
  +border: thuộc tính dùng để định dạng đường viền.
   .)solid: đường viền là thẳng nét.
   .)dashed: đường viền là gạch ngang.
   .)dotted: đường viền là dấu chấm.
   .)none: không hiển thị đường viền.

  +padding: thêm vào khoảng không cho thành phần, đơn vị bao gồm px, em, %,...

   .)padding-top: thêm khoảng bên trên.

   .)padding-bottom: bên dưới.

   .)padding-right: bên phải.

   .)padding-left: bên trái.

3.Float, Clear.

 +float: xác định có hay không một thành phận được trôi nổi.

  .)float: left; Thành phần được trôi qua bên trái

  .)float: right; Thành phần được trôi qua bên phải.
  .)float: none; Thành phần không được trôi qua bên trái hay phải. Đây là giá trị mặc định
  .)float: inherit: Xác định thừa hưởng thuộc tính từ thành phần bao ngoài.

 +clear: xác định khoảng 2 bên của phần tử, và phần float không được cho phép ở đó.

  .)clear: left; Bên trái của thành phần không được float

  .)clear: right; Bên phải của thành phần không được float
  .)clear: both; Bên phải và trái của thành phần đều không được float
  .)clear: none; Bên phải và trái của thành phần đều được float
  .)clear: inherit; Xác định thừa hưởng thuộc tính của thành phần bao ngoài.

4.Position.

 +position: là thuộc tính dùng định dạng loại phương pháp định vị cho thành phần, thường dùng kèm với top, bottom, left, right.

 .)static: dạng mặc định, dạng này thì thành phần sẽ nằm theo thứ tự.

 .)absolute: định vị thành phần tuyệt đối theo thành phần bao bên ngoài.

 .)relative: định vị thành phần tuyệt đối.

 .)fixed: định vị thành phần tương đối theo cửa sổ trình duyệt,

IV.Bài tập.

Introduction to CSS

                                                          Giới thiệu về CSS

I.Khái quát

-CSS là viết tắt của Cascading Style Sheets, là ngôn ngữ quy định cách trình bày các thẻ html trên trang web, được sử dụng phổ biến và rộng rãi trong lĩnh vực Thiết kế Website.

II.Các loại CSS

-Hay còn gọi là cách chèn CSS vào trang HTML và đưa nội dung của CSS vào trang web-Hiện nay có 3 loại phổ biến:  1.Inline CSS: Chèn trực tiếp CSS vào các thẻ mở như cặp <p>.</p>         

Ví du: < p style="Nội dung CSS ở đây, cách nhau bằng khoảng trắng">
  

 +Nhược điểm: dài dòng,khó sửa.  

2.Embed CSS: Chèn CSS bằng cách viết vào cặp <style></style> trong phần <head></head> của trang.
 Ví dụ:

<head>    

       <title>Chen CSS-Cách 1</title>

         <! Chen CSS vào giữa cặp thẻ sau: >

         <style type="text/css">

              Nội dung CSS đặt bên trong đây  

        </style>

     </head>

Ưu điểm : Ngắn gọn

Nhược điểm: Bị hạn chế phạm vi tác động   

3.Eternal CSS: Liên kết với một file CSS khác có đuôi (*.css). Đây là cách phổ biến nhất bây giờ, đối với website có nhiều page, thay vì chỉnh sửa từng dòng code như Inline CSS, nay chỉ cần sửa ở file đuôi CSS, tất cả các page của bạn có thể sửa lại một cách toàn diện. Cách này ta chèn nội dung file CSS mới vào thẻ <link> (không có </link>) trong phần head  

 Ví dụ:         <link rel="stylesheet" href="Đường dẫn đên file .css" type="text/css" />

III.Bài tập

HTML STRUCTURE: USING LISTS, TABLES, DIVS, AND SPANS

                                               Cấu trúc một văn bản HTML
I.Danh sách (List)
-Dùng để liệt kê các phần tử trong trang web dưới dạng danh sách
-Có 2 loại thẻ List:
  +<ol>:Viết tắt của Ordered lists, là loại danh sách được đánh dấu bằng số trước nội dung mỗi thẻ <li>.
  +<ul>:Viết tắt của Unordered lists, chỉ khác là không được đánh dấu.
-Thay vì dùng <p> để ghi các nội dung ký tự, ta dùng <li>
-Mở đầu bằng một <h1> hoặc <h2>,<h3>,... ta có thể tạo nhiều list dưới mỗi thẻ heading.
-Có thể đặt list trong list bằng cách chèn một thẻ <ol> hoặc <ul> trong <li>,</li> của một list như một danh sách con.
II.Các định dạng trong văn bản HTML
  Các định dạng trong html thường đặt trong <p style="">, trong ngoặc kép có thể là :
   1.Định dạng cỡ chữ: p style="font-size : "
    2.Định dạng màu sắc: p style="color : "
    3.Định dạng loại chữ: p style="font-family: "
    4.Định dạng màu sắc nền: p style="background-color: "
    5.Định dạng căn lề: p style="text-align: "
    6.Định dạng dáng chữ: <strong>: In đậm(Bold)
                                           <em>:In nghiêng(italicize)
III.Bảng, thẻ div, thẻ span
 1.Bảng: Là một công cụ hữu ích để sắp xếp các thông tin trong trang web thành dạng liệt kê bảng theo hàng và cột, sử dụng thẻ <table> để bắt đầu và </table> để kết thúc. Trong <table> thường bao gồm:
+<tr>: Viết tắt Table row, dùng để xác định hàng của bảng.
+<td>: Viết tắt Table Data, dùng để xác định nội dung, hoặc cột của bảng.
+<th>: Viết tắt Table head, dùng để xác định tiêu đề của hàng.
+<thead>: Được hiểu là thẻ chứa thông tin sơ bộ về bảng.
+<tbody>: Chính là phần thân của bảng bao gồm các thẻ <tr>,<td>,<th> bên trong.
2.Thẻ div: Viết tắt của Divison, có nghĩa phân chia ra từng khu để xử lý.
-Nếu viết <div style="background-color:yellow;width:50px; height:50px;"> thì trình duyệt sẽ đưa ra 1 khu có chiều dài 50px, rộng 50px và nền vàng.
3.Thẻ span: Cho phép người dùng thay đổi một phần nhỏ về định dạng trong page, ví dụ là về text.
-Nếu viết  <p>This text is black, except for the word <span style="color:red">red</span>!</p> thì trình duyệt sẽ hiện ra dòng "This text is black, except for the word red!" và chỉ có ký tự "red" được in màu đỏ.
IIII.Bài tập

HTML basic

                                                             HTML basic
I.Khái niệm.
-HTML gọi là "ngôn ngữ đánh dấu siêu văn bản" được sử dụng chủ yếu để tạo nội dung, hình ảnh cho một website và thiết kế cho nó.
-Thành phần của một trang HTML bao gồm các liên kết, hình ảnh hoặc các nút dẫn tới link, ảnh, bảng thống kê.
II.Cấu trúc.
-Văn bản HTML bao gồm các thẻ mang từ khóa đc gói trong một cặp dấu "<'từ khóa'>" và các thẻ được thực hiện khi gồm thêm một cặp </'từ khóa'> nữa.
-Mở đầu nội dung văn bản HTML luôn là thẻ <html> và kết thúc là thẻ </html>
-Trước thẻ <html> còn có thể có <!DOCTYPE html> nhưng đây không phải là một thẻ trong cấu trúc, nó chỉ là chỉ dẫn phiên bản html được sử dụng.

*Các thẻ thông thường hay sử dụng : 

.<head> : phần "đầu" của văn bản, là thẻ "mẹ" chứa các thẻ "con" có những tính chất mở đầu ( tiêu đề, giới thiệu, ...)
.<title> : thẻ dùng ghi tiêu đề, nằm trong cặp <head>,</head>

.<body> : phần "thân" của văn bản, cũng là một thẻ "mẹ", thuộc dạng thân bài, chủ yếu mang những nội dung chèn link ảnh, link website.
.<p> : viết tắt của paragraph, thẻ dùng để viết các ký tự, chữ số,...
.<h> : viết tắt của heading, thẻ dùng để viết tiêu đề, đầu mục, gồm 6 thẻ : h1,h2,...,h6   cỡ chữ giảm dần
.<a> : thẻ chèn link, thẻ mở <a> đi cùng hậu tố href (để dẫn tới link chèn vào) thành <a href ="liên kết">'tiêu đề'</a>
.<img> : thẻ chèn ảnh, thẻ mở <img> đi cùng hậu tố src thành <img src ="link">
.<br / > : thẻ dùng để xuống dòng
.<b> : thẻ dùng im đậm chữ
.<i> : thẻ dùng in nghiêng chữ.
III.Bài tập.