Thuộc tính | Mô tả | Giá Trị |
---|---|---|
Background | ||
background | Thuộc tính rút gọn cho tất cả các thuộc tính nền. | background-color background-image background-repeat background-attachment background-position |
background-color | Thiết lập màu nền cho đối tượng. | <color> transparent |
background-image | Thiết lập ảnh nền cho đối tượng. | url none |
background-repeat | Thiết lập chế độ lặp ảnh nền. | repeat repeat-x repeat-y no-repeat |
background-attachment | Thiết lập ảnh nền cuộn/cố định. | scroll fixed |
background-position | Thiết lập vị trí thể hiện ảnh nền. | top left top center top right center left center center center right bottom left bottom center bottom right x% y% x y |
Font | ||
font | Thuộc tính ngắn cho tất cả các thiết lập về font. | font-style font-variant font-weight font-size font-family |
font-style | Thiết lập chế độ in nghiêng, xiên hay bình thường. | normal italic oblique |
font-variant | Thiết lập font bình thường hay small-caps | normal small-caps |
font-weight | Thiết lập in đậm, thường. | normal bold bolder lighter 100 – 900 |
font-size | Thiết lập kích cỡ font. | xx-small x-small small medium large x-large xx-large smaller larger <length> % |
font-family | Thiết lập loại font hiển thị trang web/ đối tượng web. | family-name generic-family |
Text | ||
color | Thiết lập màu chữ. | <color> |
text-indent | Thiết lập khoảng thụt đầu dòng. | <length> % |
text-align | Thiết lập chế độ canh văn bản. | left right center justify |
letter-spacing | Thiết lập khoảng cách giữa các ký tự. | normal <length> |
text-decoration | Thêm hiệu ứng đặc biệt cho văn bản. | none underline overline line-through blink |
text-transform | Change case văn bản. | none upper lower capitalize |
Pseudo-classes | ||
:link | Liên kết chưa thăm. | |
:hover | Mouse over 1 thành phần. | |
:visited | Liên kết đã thăm. | |
:active | Kích hoạt 1 thành phần | |
Margin | ||
margin | Thuộc tính ngắn cho các thiết lập margin. | margin-top margin-right margin-bottom margin-left |
margin-top | Thiết lập canh lề trên cho một thành phần. | auto <length> % |
margin-right | Thiết lập canh lề phải cho một thành phần. | auto <length> % |
margin-bottom | Thiết lập canh lề dưới cho một thành phần. | auto <length> % |
margin-left | Thiết lập canh lề trái cho một thành phần. | auto <length> % |
Padding | ||
padding | Thuộc tính ngắn cho các thiết lập padding. | padding-top padding-right padding-bottom padding-left |
padding-top | Thiết lập đệm trên cho một thành phần. | <length> % |
padding-right | Thiết lập đệm phải cho một thành phần. | <length> % |
padding-bottom | Thiết lập đệm dưới cho một thành phần. | <length> % |
padding-left | Thiết lập đệm trái cho một thành phần. | <length> % |
Border | ||
border | Thuộc tính ngắn cho tất cả các thiết lập border cho một thành phần. | border-width border-color border-style |
border-width | Thiết lập độ rộng đường viền. | thin medium thick <length> |
border-color | Thiết lập màu cho đường viền. | <color> |
border-style | Thiết lập kiểu đường viền. | none hidden solid dotted dashed double groove ridge inset outset |
border-top-width | Thiết lập độ rộng viền phía trên. | <border-width> |
border-top-color | Thiết lập màu viền phía trên. | <border-color> |
border-top-style | Thiết lập kiểu viền phía trên. | <border-style> |
border-right-width | Thiết lập độ rộng viền phải. | <border-width> |
border-right-color | Thiết lập màu viền phải. | <border-color> |
border-right-style | Thiết lập kiểu viền phải. | <border-style> |
border-bottom-width | Thiết lập độ rộng viền bên dưới. | <border-width> |
border-bottom-color | Thiết lập màu viền bên dưới. | <border-color> |
border-bottom-style | Thiết lập kiểu viền bên dưới. | <border-style> |
border-left-width | Thiết lập độ rộng viền trái. | <border-width> |
border-left-color | Thiết lập màu viền trái. | <border-color> |
border-left-style | Thiết lập kiểu viền trái. | <border-style> |
Width | ||
width | Thiết lập chiều rộng đối tượng. | auto <length> % |
max-width | Thiết lập chiều rộng tối đa cho đối tượng. | none <length> % |
min-width | Thiết lập chiều rộng tối thiểu cho một đối tượng. | <length> % |
Height | ||
height | Thiết lập chiều cao cho một đối tượng. | auto <length> % |
max-height | Thiết lập chiều cao tối đa cho một đối tượng. | none <length> % |
min-height | Thiết lập chiều cao tối thiểu cho một đối tượng. | <length> % |
Layout Position | ||
float | Cố định đối tượng. | left right none |
clear | Cách thức xử sự của một đối tượng liên quan với đối tượng floated. | left right both none |
position | Định vị đối tượng | static relative absolute fixed inherit |
top | Thiết lập tọa độ đỉnh đối tượng. | auto <length> % |
right | Thiết lập tọa độ bên phải đối tượng. | auto <length> % |
bottom | Thiết lập tọa độ đáy đối tượng. | auto <length> % |
left | Thiết lập tọa độ bên trái đối tượng. | auto <length> % |
z-index | Định lớp đối tượng. | auto number |
Thứ Hai, 25 tháng 8, 2014
Phụ Lục: Bảng Thuộc Tính & Giá Trị Thuộc Tính
Bài 16: Web Standards
Trong công việc thiết kế web thì một trong những vấn đề quan trọng đó là làm sao đảm bảo trang web của bạn có thể hiển thị tốt trên hầu hết các trình duyệt. Hiểu rõ vấn đề này W3C (World Wide Web Consortium) – một tổ chức có nhiệm vụ quản lý và đặc ra các tiêu chuẩn web cùng với các đối tác khác như Microsof, Mozilla Foundation,… đã đặt ra các tiêu chuẩn về mã cho web. Nó cho phép nhà phát triển web có thể tự tin hơn khi thực hiện dự án cũng như đảm bảo cho các trang web thỏa mãn tiêu chuẩn có thể hiển thị tốt ở nhiều trình duyệt.
Để dễ dàng hơn. Trong CSS, W3C đã tạo ra một công cụ gọi là CSS Validator để đọc và thẩm định tính hợp chuẩn cho CSS của bạn.
Đầu tiên, các bạn truy cập vào địa chỉ sau click here.
Đọc thêm
Để dễ dàng hơn. Trong CSS, W3C đã tạo ra một công cụ gọi là CSS Validator để đọc và thẩm định tính hợp chuẩn cho CSS của bạn.
Đầu tiên, các bạn truy cập vào địa chỉ sau click here.
Đọc thêm
Bài 15: Layers
CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu tiên, chúng ta đã được nhìn thấy trong các bài học trước. Trong bài học này, chúng ta sẽ được học về cách đặt các thành phần web ở các lớp khác nhau với thuộc tính z-index. Nói đơn giản hơn thì đó là cách bạn đặt một thành phần này lên trên một thành phần khác.
Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.
Đọc thêm
Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.
Đọc thêm
Bài 14: Position
✦ Nguyên lý hoạt động của position:
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.
Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:
Đọc thêm
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.
Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:
img { position:absolute; top:70px; left:90px }
Đọc thêm
Thứ Ba, 19 tháng 8, 2014
Bài 13: Float & Clear
1. Thuộc tính float
- Là thuộc tinh sử dụng để cố định thành phần của website về 1 phía: trái (left) hay phải (right).
- Thường sử dụng trong việc dàn trang, chia cột cho website.
- Giá trị :
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
Ví dụ: thực hiện float ảnh logo sang trái.
Đọc thêm
- Là thuộc tinh sử dụng để cố định thành phần của website về 1 phía: trái (left) hay phải (right).
- Thường sử dụng trong việc dàn trang, chia cột cho website.
- Giá trị :
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
Ví dụ: thực hiện float ảnh logo sang trái.
#logo { float:left; }
Đọc thêm
Bài 12: Height & Width
1. Thuộc tính width
- Dùng để quy định chiều rộng cho một thành phần web.
Ví dụ:
2. Thuộc tính max-width
- Dùng để quy định chiều rộng tối đa cho một thành phần web.
3. Thuộc tính min-width
- Dùng để quy định chiều rộng tối thiểu cho một thành phần web.
Đọc thêm
- Dùng để quy định chiều rộng cho một thành phần web.
Ví dụ:
p { width:700px; }
2. Thuộc tính max-width
- Dùng để quy định chiều rộng tối đa cho một thành phần web.
3. Thuộc tính min-width
- Dùng để quy định chiều rộng tối thiểu cho một thành phần web.
Đọc thêm
Bài 11: Border
Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…
1. Thuộc tính border-width
- Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
2. Thuộc tính border-color
- Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
3. Thuộc tính border-style
- Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu vàng).
Đọc thêm
1. Thuộc tính border-width
- Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
2. Thuộc tính border-color
- Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
3. Thuộc tính border-style
- Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu vàng).
Đọc thêm
Bài 10: Margin & Padding
1. Thuộc tính margin
- Thuộc tính margin trong css dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.
Ví dụ: Canh lề cho 1 trang web
- Thuộc tính margin trong css dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.
Ví dụ: Canh lề cho 1 trang web
body {Hoặc gọn hơn chúng ta sẽ viết như sau:
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000
}
body {Đọc thêm
margin:80px 30px 40px 50px;
border:1px dotted #FF0000
}
Chủ Nhật, 17 tháng 8, 2014
Bài 9: Box Model
Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.
Đọc thêm
Đọc thêm
Bài 8: Span & Div
1. Nhóm phần tử với thẻ <span>
Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.
Ví dụ:
Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ <span> vào đoạn HTML như sau:
Đọc thêm
Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.
Ví dụ:
<p>Không có gì quý hơn độc lập, tự do.</p>
Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ <span> vào đoạn HTML như sau:
<p>Không có gì quý hơn <span class="nhanmanh">độc lập</span>, <span class="nhanmanh">tự do</span>.Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:
.nhanmanh { font-weight:bold }
Đọc thêm
Thứ Bảy, 16 tháng 8, 2014
Bài 7: Class & ID
1. Nhóm các phần tử với class
Ví dụ chúng ta có một đoạn mã HTML sau đây :
Đọc thêm
Ví dụ chúng ta có một đoạn mã HTML sau đây :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li>Hà Nội</li>
<li>TP. Hồ Chí Minh</li>
<li>Đà Nẵng</li>
<li>Thừa Thiên Huế</li>
<li>Khánh Hòa</li>
<li>Quãng Ninh</li>
<li>Tiền Giang</li>
</ul>
Đọc thêm
Bài 6: Pseudo-classes For Links
Pseodu ( hay dịch là Phần tử giả ): Là 1 phần quan trọng mà hầu hết các website đều có trong các liên kết ( Links) dùng để quy định cách hiển thị cho liên kết khi thực thi 1 hành động nào đó.
1. Hover
- Như đã nói bên trên do Pseodu áp dụng với liên kết nên trước tiên chúng ta cần phải xác định thành phần tác động đến là thẻ <a>
Ví dụ:
Tức là: Khi di chuột qua liên kết thì nội dung bên trong cặp thẻ {…} sẽ hoạt động, cụ thể : Khi di chuột qua liên kết sẽ có màu đỏ, nền trắng và nháy.
Đọc thêm
1. Hover
- Như đã nói bên trên do Pseodu áp dụng với liên kết nên trước tiên chúng ta cần phải xác định thành phần tác động đến là thẻ <a>
Ví dụ:
a:hover{ color: red; background: white; text-decoration: blink;}
Tức là: Khi di chuột qua liên kết thì nội dung bên trong cặp thẻ {…} sẽ hoạt động, cụ thể : Khi di chuột qua liên kết sẽ có màu đỏ, nền trắng và nháy.
Đọc thêm
Thứ Sáu, 15 tháng 8, 2014
Bài 5: Text
1. Màu chữ (thuộc tính color)
- Định dạng màu chữ trong CSS
- Giá trị :
+ Tên màu tiếng Anh: gray, blue, green,…
+ Bảng mã màu hệ16: Gồm ký tự # và chuỗi 6 ký tự liền kề. Vídụ: #FF7692
+ Mã màu RBG.
Ví dụ:
Đọc thêm
- Định dạng màu chữ trong CSS
- Giá trị :
+ Tên màu tiếng Anh: gray, blue, green,…
+ Bảng mã màu hệ16: Gồm ký tự # và chuỗi 6 ký tự liền kề. Vídụ: #FF7692
+ Mã màu RBG.
Ví dụ:
body {
color:#000
}
h1 {
color:#0000FF
}
h2 {
color:#00FF00
}
Đọc thêm
Bài 4: Font chữ
1. Thuộc tính font-family
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.
Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families.
+ Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
+ Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…
Đọc thêm
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.
Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families.
+ Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
+ Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…
Đọc thêm
Bài 3: Background
Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.
1. Màu nền (thuộc tính background-color)
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.
Đọc thêm
1. Màu nền (thuộc tính background-color)
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam.
body {
background-color:cyan
}
h1 {
background-color:red
}
h2 {
background-color:orange
}
Đọc thêm
Thứ Năm, 14 tháng 8, 2014
Học lập trình WEB
Bài viết được tham khảo qua nhiều nguồn tài liệu được chia sẻ trên internetPHẦN I: HTML
1. HTML cơ bản
Bài 1: HTML và cấu trúc của một tài liệu HTML
Bài 2: Một số thẻ cơ bản
Bài 3: Hình ảnh và liên kết
Bài 4: Tạo bảng trong HTML
Bài 5: Danh sách (list)
Bài 6: Biểu mẫu (form)
Bài 7: Frame
Bài 8: Các thẻ đặc biệt
Bảng ký tự đặc biệt trong HTML
*Nguồn: VIETSOURCE.NET & CLB TIN HỌC- ICTU của Vũ Công Tịnh (- Tải về -)
Đọc thêm
Thứ Ba, 12 tháng 8, 2014
Bài 2: Một số quy ước về cách viết CSS
1. Cú pháp CSS
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.
Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau:
+ Trong HTML: <body bgcolor="#00BFF3">
+ Trong CSS: body { background-color:#00BFF3; }
Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS. Đó là một chút lợi thế của câu chuyện hành trình mà Pearl đã nói ở bài trước. Nhưng không sao cả, bây giờ hãy nhìn vào ví dụ của chúng ta và các bạn xem nó có giống với cấu trúc sau không nhé.
Cú pháp CSS cơ bản:
Selector { property:value; }
Đọc thêm
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.
Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau:
+ Trong HTML: <body bgcolor="#00BFF3">
+ Trong CSS: body { background-color:#00BFF3; }
Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS. Đó là một chút lợi thế của câu chuyện hành trình mà Pearl đã nói ở bài trước. Nhưng không sao cả, bây giờ hãy nhìn vào ví dụ của chúng ta và các bạn xem nó có giống với cấu trúc sau không nhé.
Cú pháp CSS cơ bản:
Selector { property:value; }
Đọc thêm
Bài 1: Giới thiệu
1. CSS là gì ?
Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
Đọc thêm
Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
Đọc thêm
Bảng ký tự đặc biệt trong HTML
left single quote | ‘ | ‘ | |
right single quote | ’ | ’ | |
single low-9 quote | ‚ | ‚ | |
left double quote | “ | “ | |
right double quote | ” | ” | |
double low-9 quote | „ | „ | |
dagger | † | † | |
double dagger | ‡ | ‡ | |
per mill sign | ‰ | ‰ | |
single left-pointing angle quote | ‹ | ‹ | |
single right-pointing angle quote | › | › | |
black spade suit | ♠ | ♠ | |
black club suit | ♣ | ♣ | |
black heart suit | ♥ | ♥ | |
black diamond suit | ♦ | ♦ | |
overline, = spacing overscore | ‾ | ‾ | |
leftward arrow | ← | ← | |
upward arrow | ↑ | ↑ | |
rightward arrow | → | → | |
downward arrow | ↓ | ↓ | |
trademark sign | ™ | ™ | ™ |
unused | �-  | ||
horizontal tab | 	 | ||
line feed | | ||
unused |  | ||
space |   | ||
exclamation mark | ! | ! | |
double quotation mark | " | " | " |
number sign | # | # | |
dollar sign | $ | $ | |
percent sign | % | % | |
ampersand | & | & | & |
apostrophe | ' | ' | |
left parenthesis | ( | ( | |
right parenthesis | ) | ) | |
asterisk | * | * | |
plus sign | + | + | |
comma | , | , | |
hyphen | - | - | |
period | . | . | |
slash | / | ⁄ | / |
digits 0-9 | 0- 9 | ||
colon | : | : | |
semicolon | ; | ; | |
less-than sign | < | < | < |
equals sign | = | = | |
greater-than sign | > | > | > |
question mark | ? | ? | |
at sign | @ | @ | |
uppercase letters A-Z | A- Z | ||
left square bracket | [ | [ | |
backslash | \ | \ | |
right square bracket | ] | ] | |
caret | ^ | ^ | |
horizontal bar (underscore) | _ | _ | |
grave accent | ` | ` | |
lowercase letters a-z | a- z | ||
left curly brace | { | { | |
vertical bar | | | | | |
right curly brace | } | } | |
tilde | ~ | ~ | |
unused | - • | ||
en dash | – | – | – |
em dash | — | — | — |
unused | ˜- Ÿ | ||
nonbreaking space |   | | |
inverted exclamation | ¡ | ¡ | ¡ |
cent sign | ¢ | ¢ | ¢ |
pound sterling | £ | £ | £ |
general currency sign | ¤ | ¤ | ¤ |
yen sign | ¥ | ¥ | ¥ |
broken vertical bar | ¦ | ¦ or &brkbar; | ¦ |
section sign | § | § | § |
umlaut | ¨ | ¨ or ¨ | ¨ |
copyright | © | © | © |
feminine ordinal | ª | ª | ª |
left angle quote | « | « | « |
not sign | ¬ | ¬ | ¬ |
soft hyphen | ­ | ­ | |
registered trademark | ® | ® | ® |
macron accent | ¯ | ¯ or &hibar; | ¯ |
degree sign | ° | ° | ° |
plus or minus | ± | ± | ± |
superscript two | ² | ² | ² |
superscript three | ³ | ³ | ³ |
acute accent | ´ | ´ | ´ |
micro sign | µ | µ | µ |
paragraph sign | ¶ | ¶ | ¶ |
middle dot | · | · | · |
cedilla | ¸ | ¸ | ¸ |
superscript one | ¹ | ¹ | ¹ |
masculine ordinal | º | º | º |
right angle quote | » | » | » |
one-fourth | ¼ | ¼ | ¼ |
one-half | ½ | ½ | ½ |
three-fourths | ¾ | ¾ | ¾ |
inverted question mark | ¿ | ¿ | ¿ |
uppercase A, grave accent | À | À | À |
uppercase A, acute accent | Á | Á | Á |
uppercase A, circumflex accent | Â | Â | Â |
uppercase A, tilde | Ã | Ã | Ã |
uppercase A, umlaut | Ä | Ä | Ä |
uppercase A, ring | Å | Å | Å |
uppercase AE | Æ | Æ | Æ |
uppercase C, cedilla | Ç | Ç | Ç |
uppercase E, grave accent | È | È | È |
uppercase E, acute accent | É | É | É |
uppercase E, circumflex accent | Ê | Ê | Ê |
uppercase E, umlaut | Ë | Ë | Ë |
uppercase I, grave accent | Ì | Ì | Ì |
uppercase I, acute accent | Í | Í | Í |
uppercase I, circumflex accent | Î | Î | Î |
uppercase I, umlaut | Ï | Ï | Ï |
uppercase Eth, Icelandic | Ð | Ð | Ð |
uppercase N, tilde | Ñ | Ñ | Ñ |
uppercase O, grave accent | Ò | Ò | Ò |
uppercase O, acute accent | Ó | Ó | Ó |
uppercase O, circumflex accent | Ô | Ô | Ô |
uppercase O, tilde | Õ | Õ | Õ |
uppercase O, umlaut | Ö | Ö | Ö |
multiplication sign | × | × | × |
uppercase O, slash | Ø | Ø | Ø |
uppercase U, grave accent | Ù | Ù | Ù |
uppercase U, acute accent | Ú | Ú | Ú |
uppercase U, circumflex accent | Û | Û | Û |
uppercase U, umlaut | Ü | Ü | Ü |
uppercase Y, acute accent | Ý | Ý | Ý |
uppercase THORN, Icelandic | Þ | Þ | Þ |
lowercase sharps, German | ß | ß | ß |
lowercase a, grave accent | à | à | à |
lowercase a, acute accent | á | á | á |
lowercase a, circumflex accent | â | â | â |
lowercase a, tilde | ã | ã | ã |
lowercase a, umlaut | ä | ä | ä |
lowercase a, ring | å | å | å |
lowercase ae | æ | æ | æ |
lowercase c, cedilla | ç | ç | ç |
lowercase e, grave accent | è | è | è |
lowercase e, acute accent | é | é | é |
lowercase e, circumflex accent | ê | ê | ê |
lowercase e, umlaut | ë | ë | ë |
lowercase i, grave accent | ì | ì | ì |
lowercase i, acute accent | í | í | í |
lowercase i, circumflex accent | î | î | î |
lowercase i, umlaut | ï | ï | ï |
lowercase eth, Icelandic | ð | ð | ð |
lowercase n, tilde | ñ | ñ | ñ |
lowercase o, grave accent | ò | ò | ò |
lowercase o, acute accent | ó | ó | ó |
lowercase o, circumflex accent | ô | ô | ô |
lowercase o, tilde | õ | õ | õ |
lowercase o, umlaut | ö | ö | ö |
division sign | ÷ | ÷ | ÷ |
lowercase o, slash | ø | ø | ø |
lowercase u, grave accent | ù | ù | ù |
lowercase u, acute accent | ú | ú | ú |
lowercase u, circumflex accent | û | û | û |
lowercase u, umlaut | ü | ü | ü |
lowercase y, acute accent | ý | ý | ý |
lowercase thorn, Icelandic | þ | þ | þ |
lowercase y, umlaut | ÿ | ÿ | ÿ |
Alpha | Α | Α | |
alpha | α | α | |
Beta | Β | Β | |
beta | β | β | |
Gamma | Γ | Γ | |
gamma | γ | γ | |
Delta | Δ | Δ | |
delta | δ | δ | |
Epsilon | Ε | Ε | |
epsilon | ε | ε | |
Zeta | Ζ | Ζ | |
zeta | ζ | ζ | |
Eta | Η | Η | |
eta | η | η | |
Theta | Θ | Θ | |
theta | θ | θ | |
Iota | Ι | Ι | |
iota | ι | ι | |
Kappa | Κ | Κ | |
kappa | κ | κ | |
Lambda | Λ | Λ | |
lambda | λ | λ | |
Mu | Μ | Μ | |
mu | μ | μ | |
Nu | Ν | Ν | |
nu | ν | ν | |
Xi | Ξ | Ξ | |
xi | ξ | ξ | |
Omicron | Ο | Ο | |
omicron | ο | ο | |
Pi | Π | Π | |
pi | π | π | |
Rho | Ρ | Ρ | |
rho | ρ | ρ | |
Sigma | Σ | Σ | |
sigma | σ | σ | |
Tau | Τ | Τ | |
tau | τ | τ | |
Upsilon | Υ | Υ | |
upsilon | υ | υ | |
Phi | Φ | Φ | |
phi | φ | φ | |
Chi | Χ | Χ | |
chi | χ | χ | |
Psi | Ψ | Ψ | |
psi | ψ | ψ | |
Omega | Ω | Ω | |
omega | ω | ω | |
password dot | ● | ● | |
bullet | • | • |
Bài 8: Các thẻ đặc biệt
1.Meta tags
- Mọi thẻ meta đều đặt trong cặp thẻ <head></head>
- Cung cấp thông tin về website cho trình duyệt và các Search Engine
a)Keyword
- Tạo từ khóa cho website, cung cấp cho các search engine
- Cú pháp: <meta name="keywords" content="các từ khóa cách nhau bởi dấu phảy" />
b) Description
- Thẻ mô tả về website, cung cấp thông tin về web
- Cú pháp: <meta name="description" content="mô tả ngắn gọn về website" />
Đọc thêm
- Mọi thẻ meta đều đặt trong cặp thẻ <head></head>
- Cung cấp thông tin về website cho trình duyệt và các Search Engine
a)Keyword
- Tạo từ khóa cho website, cung cấp cho các search engine
- Cú pháp: <meta name="keywords" content="các từ khóa cách nhau bởi dấu phảy" />
b) Description
- Thẻ mô tả về website, cung cấp thông tin về web
- Cú pháp: <meta name="description" content="mô tả ngắn gọn về website" />
Đọc thêm
Thứ Hai, 11 tháng 8, 2014
Bài 7: Frame
- Mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền hiển thị thành nhiều vùng
- Vùng được chia gọi là frame, có đặc điểm sau:
+ Có thể truy cập đến URL độc lập với frame khác
+ Có thể thay đổi kích thước khung nhìn, hoặc không cho phép thay đổi đối với user
- Trong trang đã dùng frame thì không có tag body
Cú pháp của Frame
<HTML>
<HEAD> </HEAD>
<FRAMESET> <frame ...> </FRAMESET>
</HTML>
Đọc thêm
- Vùng được chia gọi là frame, có đặc điểm sau:
+ Có thể truy cập đến URL độc lập với frame khác
+ Có thể thay đổi kích thước khung nhìn, hoặc không cho phép thay đổi đối với user
- Trong trang đã dùng frame thì không có tag body
Cú pháp của Frame
<HTML>
<HEAD> </HEAD>
<FRAMESET> <frame ...> </FRAMESET>
</HTML>
Đọc thêm
Chủ Nhật, 10 tháng 8, 2014
Bài 6: Biểu mẫu (form)
- Biểu mẫu ( form) là một thành phần thường gặp và quan trọng trong mỗi website, form tạo nên tính tương tác giữa website và người dùng qua những phần nhập, truy xuất dữ liệu cũng như gửi dữ liệu. Như: form đăng ký, đăng nhập, tìm kiếm, gửi email liên hệ,…
1. HTML Form
- Cú pháp: <form></form>
Đọc thêm
1. HTML Form
- Cú pháp: <form></form>
Thuộc tính | Ý nghĩa |
---|---|
action="url" | Địa chỉ của trang web/chương trình xử lý dữ liệu được nhập trên form |
method="get"| "post" | Phương thức HTTP dùng để gửi dữ liệu đến địa chỉ URL được xác định trong thuộc tính action. Nếu không chỉ rõ phương thức gửi dữ liệu, mặc định sử dụng phương thức "get" |
name="form_name" | Tên của form |
target="frame_name"| "_blank"| "_self" | Chỉ định cửa sổ hiển thị kết quả (trong một frame, của sổ mới hay trong cửa sổ hiện tại) |
enctype="application/x-www-form-urlencoded"| "text/plain"| "multipart/form-data" | Quy định cách định dạng dữ liệu trước khi gửi. Nếu không xác định rõ, enctype mặc định sẽ là "application/x-www-form-urlencoded" |
Thứ Sáu, 8 tháng 8, 2014
Bài 5: Danh sách (list)
Mã HTML | Ý nghĩa |
---|---|
<ul> <li>Item 1</li> <li>Item 2</li> </ul> | Tạo danh sách không đánh số thứ tự, dạng:
|
<ol> <li>Item 1</li> <li>Item 2</li> </ol> | Tạo danh sách có đánh số thứ tự, dạng:
|
<dl> <dt>HTML ( Hypertext Markup Language)</dt> <dd>Là ngôn ngữ đánh dấu siêu văn bản</dd> </dl> | Tạo danh sách định nghĩa, dạng:
|
Đọc thêm
Thứ Tư, 6 tháng 8, 2014
Bài 4: Tạo bảng trong HTML
Cấu trúc tổng quát :
Kết quả:
Đọc thêm
<table border="2">
<tr><th>Cột 1</th><th>Cột 2</th></tr>
<tr><td>Cột 1, dòng 1</td><td>Cột 2, dòng 1</td></tr>
<tr><td>Cột 1, dòng 2</td><td>Cột 2, dòng 2</td></tr>
</table>
Kết quả:
Cột 1 | Cột 2 |
---|---|
Cột 1, dòng 1 | Cột 2, dòng 1 |
Cột 1, dòng 2 | Cột 2, dòng 2 |
Đọc thêm
Thứ Ba, 5 tháng 8, 2014
Bài 3: Hình ảnh và liên kết
1. Thẻ hình ảnh
- Cú pháp: <img src="url" />
Đọc thêm
- Cú pháp: <img src="url" />
Thuộc tính | Ý nghĩa |
---|---|
src="url" | URL đến tập tin ảnh |
alt="description" | Định nghĩa mô tả ngắn gọn cho hình, mô tả này sẽ được hiển thị khi di chuyển chuột trên ảnh hay khi trình duyệt bị tắt chức năng duyệt ảnh |
width=" " height=" " | Đặt kích thước hình theo chiều rộng (width) và chiều cao (height) |
align="top"| "middle"| "bottom"| "left"| "right" | Căn lề theo văn bản xung quanh |
border=" " | Đặt kích thước đường viên bao quanh ảnh |
hspace=" " vspace=" " | Định khoảng trống xung quanh ảnh theo phía trái phải (hspace), trên dưới (vspace) (tính theo pixel) |
title=" " | Tiêu đề của ảnh (Khi di chuột qua ảnh sẽ hiển thị tiêu đề) |
Đọc thêm
Thứ Hai, 4 tháng 8, 2014
Bài 2: Một số thẻ cơ bản
1.Thẻ định dạng trang
Một số thuộc tính của thẻ body
Đọc thêm
Một số thuộc tính của thẻ body
Thuộc tính | Ý nghĩa | Ví dụ |
---|---|---|
bgcolor="color" | Thiết lập màu nền cho trang web | <body bgcolor="#000000"> |
background="url" | Thiết lập ảnh nền cho trang web | <body background="image.jpg"> |
leftmargin=" " topmargin=" " | Thiết lập lề trái và lề trên cho trang web | <body leftmargin="0" topmargin="0"> |
text="color" | Thiết lập màu chữ của văn bản, kể cả các đề mục | <body text="#000000"> |
alink="color" vlink="color" link="color" | Xác định màu sắc cho các siêu liên kết trong văn bản ( active link, visited link, link) | <body alink="#0000FF" vlink="#FF0000" link="#0000FF"> |
Bài 1: HTML và cấu trúc của một tài liệu HTML
1. Giới thiệu về HTML
- HTML( Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, đưa vào chuẩn web năm 1994.
- HTML là 1 ngôn ngữ đánh dấu chứ không phải 1 ngôn ngữ lập trình, nhằm tạo ra các trang web tĩnh dựa trên các thẻ đánh dấu( tags), dựa vào các thẻ đánh dấu để trình duyệt xác định cách hiển thị.
2. Cấu trúc của một tài liệu HTML
Đọc thêm
- HTML( Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, đưa vào chuẩn web năm 1994.
- HTML là 1 ngôn ngữ đánh dấu chứ không phải 1 ngôn ngữ lập trình, nhằm tạo ra các trang web tĩnh dựa trên các thẻ đánh dấu( tags), dựa vào các thẻ đánh dấu để trình duyệt xác định cách hiển thị.
2. Cấu trúc của một tài liệu HTML
<html>
<head>
<title>Cấu trúc của một tài liệu HTML</title>
</head>
<body>
Nội dung hiển thị của website
</body>
</html>
Đọc thêm
Đăng ký:
Bài đăng
(
Atom
)