Bài tập Design Website

Link:

http://tuananh.zz.vc/web02/

Posted By Unknown01:38

0

Continue Reading

Class và Div trong CSS. Định dạng vị trí cho các thành phần trong CSS

I. Class và div trong CSS

1. Class và id là gì:

- Class và id là hai thành phần rất quan trọng trong css. Nó giúp cho việc định dạng một hoặc một tập hợp các thẻ html có chung những thuộc tính như màu sắc, kích thước hay cỡ chữ... trở nên nhanh hơn và hiệu quả hơn. Việc sử dụng class và id trong css còn giúp cho việc quản lý code css trở nên dễ dàng hơn.

2. Phân biệt class và id:

- Class và id đều là các thuộc tính trong thẻ HTML, tuy nhiên chúng khác nhau về cách sử dụng: 
+ id: Đối với id trong một trang HTML thì chỉ xuất hiện duy nhất một lần. Trong một trang không có 2 thẻ id cùng tên. Id mang tính chất tuyệt đối và duy nhất trong một trang web.
+ class: class được gán cho mọi đối tượng có cùng class, các nhóm có cùng class thì sẽ chịu sự điều khiển của css cho class đó. Class sẽ được gán cho các thành phần sẽ lặp lại nhiều lần.

3. Cách viết:
- Class và id được viết trong các thẻ. Ví dụ:

<div id="head"></div><div class="menu"></div>

4. Bộ chọn CSS
- Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css. Ta có các bộ chọn sau:
+ * : chọn tất cả thành phần html. Ví dụ:

* {
    border: 1px solid black;
}

thì tất cả thành phần trong html sẽ có đường viền màu đen dày 1px.
+  tag : Chọn các thành phần cùng một loại. Ví dụ: p , h1, a....
+ tag1 tag2: Chọn tất cả thành phần <tag2> bên trong thành phần <tag1>. Ví dụ: div p, div div p,....
+ tag1 + tag2: Chọn tất cả các thành phần tag1 và tag2. Ví dụ: div + p
+ .class: Chọn tất cả thành phần có cùng tên class.
+ #id: Chọn tất cả thành phần của id đó.
+ :first-child: Chọn thành phần đầu tiên của thành phần chứa nó. Ví dụ ta có 3 dòng:

<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>

Muốn chọn dòng đầu tiên trong css viết:

p:first-child{
}

+ :nth-child(n):  Chọn thành phần thứ n. Ví dụ:

<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>

Muốn chọn dòng thứ 3 trong css viết:

p:nth-child(3){
}

+ :hover: Chọn các liên kết được hover (di chuyển chuột lên thành phần). Ví dụ:

a:hover{
    text-decoration: none;
    color: red;
}

Trong đoạn css trên, khi ta di chuyển chuột đến một link của trang HTML thì link đó sẽ mất gạch chân và chuyển màu chữ sang đỏ.
+ :link: Định dạng cho các liên kết khi chưa được click. Ví dụ:

a:link{
color: red;
}

Khi chưa được click, màu chữ sẽ có màu đỏ.
+ :visited: Định dạng cho các thành phần đã được click. Ví dụ:

a:visted{
color: yellow;
}

Khi link đã được click sẽ chuyển màu chữ sang vàng.

II. Định dạng vị trí cho các thành phần trong CSS

1. Thuộc tính display

- Thuộc tính display xác định loại hiển thị của thành phần.

+ display: block; Thành phần đứng 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ó.
+ display: inline; Thành phần sẽ hiển thị trong một dòng, đây là dạng mặc định.
+ display: inline-block; Thành phần sẽ hiển thị trong một dòng và không đè lên nhau.
+ display: none; Không hiển thị thành phần. 

2. Margin, border và padding

- margin: Thuộc tính margin canh lề cho các thành phần. Ví dụ:

margin: 10px 10px 10px 10px;

Cách viết ngắn gọn canh lên bên trên, phải, dưới, trái. Đơn vị có thể là px, em, %...
+ margin-top: canh lề bên trên
+ margin-right: canh lề phải
+ margin-bottom: canh lề dưới
+ margin-left: canh lề trái

- border: Thuộc tính border được dùng để định dạng đường viền cho các thành phần. Ví dụ:

border: 1px solid #FF0000;

Có các kiểu border như:
+ 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
+ hidden: đường viền bị ẩn, giống giá trị none nhưng thường được dùng cho table
+ double: đường viền là hai đường thẳng nét
+ inset: đường viền là đường bóng bên trong
+ outset: đường viền là đường bóng bên ngoài
...

- padding: Thuộc tính padding thêm khoảng không cho thành phần. Ví dụ:

padding: 10px 10px 10px 10px;

Cách viết ngắn gọn thêm vào khoảng không bên trên, phải, dưới, trái cho thành phần. Đơn vị có thể là px, em, %...
+ padding-top: thêm khoảng không bên trên
+ padding-right: thêm khoảng không bên phải
+ padding-bottom: thêm khoảng không bên dưới
+ padding-left: thêm khoảng không bên trái

- Phân biệt margin và padding:
Margin là khoảng cách giữa thẻ đó và các thẻ bên cạnh khác, còn padding là khoảng cách từ nội dung của chính thẻ đó và đường viền của nó. 

3. Floating

- float: Thuộc tính float quyết định một thành phần có được trôi (float) hay không
+ 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: Thuộc tính clear xác định hai bên left, right của phần từ, ngăn cản thành phần không được float trái, phải hoặc cả hai
+ 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. Thuộc tính position

- Thuộc tính position xác định loại của phương pháp định vị trí cho thành phần
+ position: static; Thành phần sẽ nằm theo thứ tự. Đây là dạng mặc định
+ position: relative; Nếu bạn muốn di chuyển một đối tượng khỏi vị trí thông thường của nó thì có thể sử dụng position: relative và các thuộc tính top, bottom, left, right. Ví dụ:

#id-one{position: relative;left: 10px;}

Ở ví dụ trên, #id-one đã được di chuyển, cách bên trái một khoảng 10px.
+ position: absolute;  Khi thiết lập giá trị position: absolute, đối tượng sẽ được đặt tại bất kỳ vị trí nào bạn chỉ ra tại các thuộc tính top, bottom, left, right. Ví dụ: 

#id-one{
position: absolute;
top: 30px;
left: 20px;
}

Ở ví dụ trên, #id-one sẽ được đặt ở vị trái cách top 30px và cách left 20px.
+ position: fixed: cho kết quả tương tự như position: absolute, chỉ khác là khi kéo thanh cuộn ngang, dọc thì vị trí của đối tượng được giữ nguyên không thay đổi. Thuộc tính hay hay được sử dụng để tạo các thành phần như quảng cáo, nút bấm,....

Bài tập: 

Posted By Unknown00:46

0

Continue Reading

Giới thiệu về CSS

I. CSS là gì

- Như chúng ta đã biết, HTML dùng để tạo nên khung xương cho trang web, hiển thị các nội dung chính của trang web như các đoạn văn, hình ảnh, video.... Nhưng nếu chỉ có vậy thì website hiển thị ra sẽ không được bắt mắt.
- CSS là ngôn ngữ quy định cách trình bày của các thẻ HTML trên trang web, nó giúp chúng ta trang trí lại trang web, sắp xếp, căn chỉnh, quy định font chữ, màu chữ, màu nền.... CSS là một phần không thể thiếu để trang web đẹp và dễ nhìn hơn.

II. Các loại CSS cơ bản

- Có 3 loại CSS cơ bản như sau:

- Inline CSS: Là cách viết các thuộc tính luôn trong thẻ. Ví dụ:

<p style="color: red;">Xin chao</p>

- Nhược điểm: + Phải viết đi viết lại nhiều lần và nếu code dài thì nhìn sẽ rất rối.
                        + Khi muốn chỉnh sửa thì ta phải chỉnh sửa từng dòng một, rất mất thời gian.
Vì vậy các trang web hiện nay đều thường không sử dụng cách viết này.

- Embed CSS: Là cách viết nhúng CSS vào phần head của HTML. Ví dụ:

<html>
<head>
     <style type="text/css">
          p{color: red;
          }
     </style>
</head>
<body>
     <p>Welcome to my website</p>
</body>
</html>

- Ưu điểm: Không phải viết lại nhiều lần như cách inline.
- Nhược điểm: Phạm vi sử dụng chỉ trong một file HTML, không thể sử dụng ở những trang khác.

- External CSS:  Là cách viết CSS ra một file riêng. Đây là cách viết được sử dụng nhiều nhất hiện nay vì nó rất tiện dụng và linh hoạt. Giả sử, website của bạn có rất nhiều trang HTML, khi muốn chỉnh sửa giao diện cho website, thay vì phải chỉnh sửa trong từng trang HTML, ta chỉ cần sửa một file css bên ngoài.
- Cú pháp:

<link rel="stylesheet" type="text/css" href="đường dẫn đến file .css" />

Thẻ này được đặt trong thẻ <head>

Bài tập INTRODUCTION TO CSS:

Posted By Unknown00:15

0

Continue Reading

HTML Structure: Lists, tables, divs and spans

I. Danh sách trong HTML

- Danh sách (lists) là một phần không thể thiếu của mỗi trang web.  Để tạo một danh sách, chúng ta có thể dùng các thẻ sau:
+ Thẻ <li> : Để hiện thị danh sách các item
+ Thẻ <ol> : Để tạo một danh sách có thứ tự. Ví dụ:

<ol>

<li>HTML</li>

<li>CSS</li>

</ol>

- Kết quả:

1. HTML

2. CSS

+ Thẻ <ul> : Để tạo một danh sách không có thứ tự. Ví dụ:

<ul>

<li>HTML</li>

<li>CSS</li>

</ul>

- Kết quả:

• HTML
• CSS

 II. Định dạng font trong HTML

- Các thuộc tính định dạng cho text thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline.
Ví dụ: <p style="font-size: 10px">
- Các thuộc tính của font chữ trong html:
+ Thuộc tính màu sắc: color
+ Thuộc tính xác định định dạng font chữ: font-family
+ Thuộc tính cỡ chữ: font-size
+ Thuộc tính màu nền cho text: background-color
+ Thuộc tính căn chỉnh đoạn text: text-align: center/left/right
+ Thuộc tính nhấn mạnh word: <strong> hoặc <em>

III. Bảng trong HTML

- Bảng (table) là một phần không thể thiếu của mỗi trang web
- Một tag <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td>, trong đó:
+ <tr>: xác định hàng của table.
+ <th>: xác định phần tử tiêu đề của table
+ <td>: xác định nội dung của table
Ví dụ: 

<table>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Kết quả:

A	B
1	2
3	4

III. Thẻ div, spans trong HTML
+ Thẻ div
- Thẻ div (viết tắt của division) trong HTML dùng để phân chia, xác định một khối trong html. Ví dụ khi ta viết:

<div style="width:50px; height:50px; background-color:red"></div>

thì trình duyệt sẽ hiển thị ra một vùng có chiều rộng 50px, chiều dài 50px và có màu đỏ.
+ Thẻ span
- Ta có thể dùng span để thay đổi định dạng một phần nội dung trong văn bản HTML
Ví dụ: 

<p>Welcome to my <span color="red">website</span></p>

 Bài tập HTML basics II và HTML basics III:

Posted By Unknown05:53

0

Continue Reading

HTML Basics

I. HTML là gì
- HTML là viết tắt của HyperText Markup Language, nghĩa là "Ngôn ngữ Đánh dấu Siêu văn bản". HTML giúp chuyển những kí tự dạng text hiển thị ra hình ảnh, liên kết, đoạn văn....
- HTML là ngôn ngữ dùng để tạo nên các trang web, tất cả các trang web hiện nay đều được viết bằng ngôn ngữ HTML
- HTML tạo nên khung xương cho trang web.
II. Cấu trúc cơ bản
- Một document HTML đều được bắt đầu bằng <html> và kết thúc bằng </html>
- Như vậy cấu trúc của một trang web được viết bằng HTML như sau:

<html>
<body>
         <!-- Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. -->
</body>
</html> 

III. Các thẻ trong HTML
- Thẻ <head>: là nơi chứa tất cả các phần tử đầu vào của văn bản HTML. Trong thẻ <head> có thể bao gồm các thẻ:
+ Thẻ <title> : là thẻ định nghĩa tiêu đề cho trang web.

<!DOCTYPE html>
<html>
<head>
<title>Trang HTML đầu tiên</title>
</head>
</html>

+  Thẻ <meta> : cung cấp các dữ liệu cho văn bản HTML.
+ Thẻ <style> : dùng để định nghĩa kiểu cách cho một văn bản HTML.
+ Thẻ <link> : định nghĩa mối quan hệ giữa một văn bản và một tài nguyên bên ngoài. Ví dụ, thẻ <link> dùng để liên kết đến một file css:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
</head>
</html> 

- Thẻ <body>: định nghĩa nội dung chính của trang web, bao gồm tất cả các thành phần của trang HTML, như text, liên kết, hình ảnh, bảng, danh sách,...Trong thẻ <body> có thể bao gồm các thẻ:
+ Thẻ <a> : Xác định một liên kết.
+ Thẻ <p> : Xác định một đoạn văn
+ Thẻ <b> : In đậm đoạn văn
+ Thẻ <i>: In nghiêng đoạn văn
+ Thẻ <u>: gạch chân đoạn văn
+ Thẻ <em> : Xác định text nhấn mạnh.
+ Thẻ <strong> : Hiển thị text đậm (mục đích nhấn mạnh)
+ Thẻ <br /> : xuống dòng
+ Thẻ <h1> đến <h6> : Xác định tiêu đề html
+ Thẻ <img> : Chèn một hình ảnh
+ Thẻ <ol> : Xác định danh sách có thứ tự
+ Thẻ <ul> : Xác định danh sách không thứ tự
+ Thẻ <li> : Xác định danh sách item

Bài tập HTML Basics:

Posted By Unknown04:46

0

Continue Reading