Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng

Chủ Nhật, 3 tháng 3, 2013

Tại sao không nên dùng Table trong thiết kế website ?


Sau đây là những lý do thiết kế web nên từ bỏ việc sử dụng table và chuyển sang dùng CSS:

   + Table làm gia tăng kích thước của site dẫn đến việc tiêu tốn băng thông không cần thiết.
   + Tiêu tốn thời gian hiệu chỉnh hơn so với việc dùng CSS nếu website có thay đổi.
   + Những người khiếm thị hoặc những người truy cập website bằng DTDD hay PDA sẽ không được hiển thị đúng.
Cuối cùng, tiêu chuẩn web theo W3C hiện tại là sử dụng CSS và tin tốt lành là tất cả các trình duyệt đều hỗ trợ chuẩn này.

Tại sao CSS tốt hơn?

Thiết kế web thiết kế layout với CSS có một số thuận lợi đối với việc SEO Web, điển hình là việc có thể đặt nội dung trước các mã lệnh khác bằng thẻ DIV ( luôn nhớ rằng việc bố trí những  nội dung quan trọng bao gồm từ khóa lên phần đầu của trang web luôn làm gia tăng sự nổi bật của từ khóa ).
Thiết kế web CSS giúp giảm bớt kích thước của trang web và khách tham quan (visitor) không cần phải tải về những dữ liệu mang tính chất trình bày khi xem mỗi trang vì chúng đã được lưu trong bộ nhớ tạm (cache) của trình duyệt.

Những thuận lợi khi dùng CSS

    + Đồng bộ định dạng và dùng chung cho tất cả các trang.
    + Vẫn có thể dùng CSS ngoài mục đích SEO Web.
    + Website sẽ được tổ chức chặt chẽ và dễ bảo trì.
Tóm lại, việc thiết kế web dùng thẻ DIV nói riêng hay CSS nói chung thay thế cho các table lồng nhau sẽ làm giảm đáng kể kích thước trang, tổ chức website được chặt chẽ hơn, dễ bảo trì hơn và gia tăng tính khả dụng.
Một điểm không thuận lợi khi sử dụng CSS là chúng ta phải học về nó, tuy nhiên, điều này không quá khó cho các webmaster.
Cả hai phương pháp, table lồng nhau và CSS đều được quan tâm khi nói về SEO Web. Nhưng chúng ta đã biết, các robot sẽ quét qua toàn bộ mã trong các trang web mà chúng viếng thăm, tuy nhiên, nếu  số lượng mã quá lớn, các robot có thể không tiếp cận trọn vẹn, từ đó, việc bố trí nội dung sao cho các robot có thể tiếp cận là một điều khá quan trọng và điều này chắc chắn việc dùng CSS sẽ làm tốt hơn.
Bây giờ chúng ta sẽ xem qua vài bước thực tế về việc sử dụng thẻ DIV so với table để nâng cao sức hấp dẫn cho các công cụ tìm kiếm ( SEO Web ).

Tối ưu hóa trang web dựa trên table

Khi một trang web được tạo ra khi dùng table, thông thườngng phần nội dung chính sẽ nằm ở ô dưới cùng bên phải của table. Các robot quét 1 trang web theo chiều từ trái sang phải và từ trên xuống dưới sẽ đi qua rất nhiều đoạn mã trước khi tiếp cận được nội dung này. Để tránh điều này, chúng ta phải bố trí nội dung vào những ô đầu tiên nằm ở phần trên của table và cách tốt nhất là đưa nội dung lên trên mã HTML bằng cách dịch chuyển phần menu từ trái sang phải (menu thường được bố trí bên trái).
- See more at: http://lmt.com.vn/home/php/tim-hieu-php/item/717-tai-sao-khong-nen-dung-table-trong-thiet-ke-website.html#sthash.iNXwyeL4.dpuf

Thứ Hai, 25 tháng 2, 2013

Làm thẻ div có thanh cuộn


 Dùng thuộc tính: overflow:auto;

#thediv_scroll{
height:300px;
width:300px;
margin-left:300px;
border:1px #999999 solid;
padding: 5px 5px 5px 5px;/* canh chinh noi dung va le the div*/
overflow:auto; /* thuoc tinh nay lam xuat hien thanh cuon*/

}

<body>
<div id="thediv_scroll">

Khi bạn đưa nội dung dài hơn chiều cao và chiều rộng của thẻ div thì trình duyệt sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame. Kỹ thuật này hiện có khá nhiều Website sử dụng để có cách thể hiện nội dung riêng biệt của mình.
sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame.

</div>
</body>

Ký tự đặc biệt trong HTML, HTML Cheatsheet


Special Characters in 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 &die; ¨
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

Cách nhúng google map vào website


Mở cửa sổ mới

<a href="http://google.com/" onclick="window.open(this.href, 'popupwindow',
  'width=400,height=300,scrollbars,resizable');
  return false;">      

Tao favicon cho website


Chèn trang HTML vào bài viết

<iframe src="http://ld.me.zing.vn" height="500" width="800" scrolling=yes frameborder="0"></iframe>

Không cho nhập kí tự (chữ) vào ô textbox sử dụng javasrcipt


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function keyPhone(e)
{
var keyword=null;
    if(window.event)
    {
    keyword=window.event.keyCode;
    }else
    {
        keyword=e.which; //NON IE;
    }
   
    if(keyword<48 || keyword>57)
    {
        if(keyword==48 || keyword==127)
        {
            return ;
        }
        return false;
    }
}

</script>
</head>

<body>
Nhap so dien thoai :
<input name="phone" type="text" onkeypress="return keyPhone(event);"/>
</body>
</html>

Tích hợp GOOLE DOCUMENT VIEW VÀO WEBSITE




<body>
<div>
<iframe id="" src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:700px;height:600px"></iframe>
</div>
</body>

       
Copy bỏ vào file html và chạy thử