Tự học thiết kết web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (221.31 KB, 28 trang )
Học seo | đào tạo seo | Gia sư | dạy kèm | game m
website
h
THIẾT KẾ WEBSITE > HỌC THIẾT KẾ WEB HTML >
Chương 1: HTML cơ bản
Bạn có muốn thử không?
Nếu bạn sử dụng Window hãy mở Notepad, nếu bạn sử dụng Mac mở ứng dụng Simp
TextEdit và thay đổi lựa chọn sau: Select (trong cửa sổ preference) > Plain Text thay vì
"Ignore rich text commands in HTML files". Việc này rất quan trọng bởi vì nếu bạn khôn
có thể không đúng.
Sau đó bạn gõ vào những dòng sau:
<title>Viet Photoshop</title>
www.vietphotoshop.com and www.bantayden.com. <b>Photoshop and web design resources </b>
registered trademark
©
©
®
®
×
×
÷
÷
HTML sử dụng siêu liên kết để liên kết những tài liệu khác nhau trên trang web.
Tạo đường siêu liên kết
Ví dụ này chỉ cho bạn cách tạo siêu liên kết như thế nào
Một tấm hình như là đường link
Ví dụ này hướng dẫn bạn cách dùng hình làm đường liên kết.
Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu khác.
Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng có thể là
tấm hình, một file nhạc, một bộ phim .v.v.
Cú pháp để tạo một thẻ anchor
<a href="url">Chữ bạn muốn ở đây</a>
Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc tính href đ
tài liệu sẽ được liên kết đến, và chữ ở xuất hiện ở giữa hai tag < và > sẽ được hiển thị
Điểm neo sau xác định liên kết đến diễn đàn của vietphotoshop.com
Thẻ anchor và thuộc tính tên
Thuộc tính tên được sử dụng để tạo một điểm neo đã được đặt tên. Khi sử dụng điểm
trước chúng ta có thể tạo ra những đường liên kết mà người đọc có thể nhảy trực tiếp
đó trên trang web, thay vì họ phải kéo xuống dưới để tìm thông tin. Một dạng như là bo
de HTML
ble> được sử
g để chia một
n của trang
nh hai cột.
cố tình để
ờng viền cho bạn
nhận thấy đây là
trúc bảng.
cho bạn có viết
nhiêu chữ đi
ng nữa, thì nõ
ngoan ngoãn
m trong cấu trúc
g bạn tạo ra nó.
de HTML
ble> được sử
g để chia một
n của trang
nh hai cột.
cố tình để
ờng viền cho bạn
Dưới đây là cú pháp của điểm neo được đặt tên trước:
<a name="Tên">Chữ bạn muốn hiển thị ở đây</a>
Thuộc tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có thể là bất cứ thứ g
Dòng code sau xác định điểm neo được đặt tên trước.
Chương 1: HTML cơ bản
Từ khóa tìm kiếm: định dạng văn bản trong html ; vietphotoshop.com ; tự động ẩn dòn
anchor trong html ; tieu lieu html co ban ; thể trong HTML ; tao lien ket nhay bang disig
khong nen dung the
trong html
;
selecct trong htm chon truoc 1 gia tri
;
làm thuộc tính liên kết của thẻ select
;
nhận thấy đây là
trúc bảng.
cho bạn có viết
nhiêu chữ đi
ng nữa, thì nõ
ngoan ngoãn
m trong cấu trúc
g bạn tạo ra nó.
làm khá đơn giản. Để cho bạn thực hành với nó, tôi đã tạo ra ví dụ này cho bạn.
án thành và sẽ bị loại bỏ ở những phiên bản HTML mới hơn. Dù cho rất nhiều người dùng nó, nhưng bạn nên cố gắng tránh dùng nó
hể kích cỡ và loại font cho trình duyệt
ương về HTML!!! ở những chương sau chúng tôi sẽ giải thích tại sao một vài thẻ như <font> lại bị loại bỏ từ HTML và làm cách nào đ
utorials
yển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet.
ệu HTML với thông tin style được thêm vào phần <head>.
g link không có gạch chân.
sheet "ngoại vi".
ẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML.
sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file
t ở phần head của mỗi trang.
thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style>
ốn dùng một style duy nhất cho một thành phần nào đó của trang.
tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách t
c hiển thị trong cửa sổ trình duyệt.
ường link trên một trang mở ở một cửa sổ mới.
ung, hay còn được gọi là meta-information về tài liệu. Meta có nghĩa là "thông tin về". Bạn có thể nói rằng meta-data có nghĩa rằng t
ược chính thức đặt trong phần head đó là: base>, <link>, <meta>, <title>, <style>, and <script>.
văn là
và
> hoặc
vào phần head như trên, hầu hết các trình duyệt sẽ hiển thị chúng thậm chí như thế là không hợp lệ.
g? chúng tôi không nghĩ thế! nhưng người ta lại cho thế là đúng!
đường liên kết
html>
i liệu.
hoá của tài liệu.
tên miền.
ần của head bao gồm những thông tin chung về tài liệu. HTML cũng có một thành phần meta và nằm trong phần head. Mục đích của
ấp thông tin liên quan đến trình duyệt hoặc những công cụ tìm kiếm như được miêu tả nội dung của tài liệu.
à nội dung của thẻ meta trong trang index của bạn.
Photoshop, thiết
ể miêu tả nội dung của trang. Tuy nhiên, bởi vì quá nhiều người đã lạm dụng thẻ meta để spam bằng cách lập đi lập lại từ khoá để c
sử dụng thẻ meta nữa.
own như sau
ó là một cái gì đó duy nhất cho trang hoặc cho tác giả của trang đó và nó có thể chẳng có gì liên quan đến bạn hết.
Resource Locator) HTML.
L như thế này: Trang Trước, một thẻ gạch chân <a> sẽ chỉ đến một nơi (một địa chỉ) trên Web với một giá trị thuộc tính href như:
có liên quan đến một trang web mà bạn đang lướt ở đó, và trình duyệt của bạn sẽ tạo ra một địa chỉ web đầy đủ như sau: http://www
u (hoặc dữ liệu khác) trên World Wide Web. Một địa chỉ đầy đủ sẽ như sau: và tuâ
http, ftp, gopher, news (USENET news), nntp (Network News Transfer Protocol), Telnet và WAIS (Wide Area Information Servers), v
ernet ví dụ như vietphotoshop.com
a, thì mặc định của host cho http là www.
g được bỏ qua. Số cổng mặc định của http là 80.
dẫn được bỏ qua, thì tài liệu phải được định vị tại thư mục gốc của trang web.
ủa một tài liệu có thể là default.asp hoặc index.html hoặc một cái gì đó phụ thuộc vào những cài đặt của server.
hất
TML Newsgroup.
ad WinZip</a>
d WinZip.
hông có giá trị.
oshop.com</a>
bạn là
ộng và có tính tương tác.
nh dạng với thẻ <script>. Chú ý rằng bạn phải sử dụng thuộc tính hạng loại để cụ thể hoá ngôn ngữ script của bạn.
pt">
m") </script>
thăm JavaScript School. Nếu có thời gian chúng tôi sẽ từ từ biên dịch tài liệu này.
ản cũ hơn.
<script> nó sẽ cho hiển thị nội dung của thẻ <script> như một dạng text trên trang. Để tránh việc này xảy ra, bạn nên ẩn script vào thẻ
ích và sẽ không cho hiển thị nội dung của thẻ script lên trang, trong khi đó trình duyệt mới sẽ hiểu rằng script đó phải được thực thi,
thích, bạn có thể thêm thẻ <noscript>. Thẻ <noscript> được sử dụng để xác định một lựa chọn cho text khi mà script đó KHÔNG đượ
ng hỗ trợ script, do vậy trình duyệt này sẽ hiển thị chữ được viết trong thẻ <noscript>.
cript>
pt>
hực
thế.
n, bạn phải xuất bản nó
ệu đó lên một web server
n nối mạng Internet
(Pesonal Web Server)
ndows.
WS)
thành một web server. PWS rất dễ cài đặt và rất lý tưởng cho việc phát triển và kiểm tra những ứng dụng Web. PWS đã được tối ưu
r. Nó cũng có thể chạy Active Server Pages (ASP) như là người anh cả của nó là IIS.
kiểm tra xem bạn đã cài đặt PWS chưa.
Windows.
và chạy nó.
g hỗ trợ tính năng biến computer thành PWS.
cho nó dễ dàng hơn để tạo ra những ứng dụng web lớn hơn và phức tạp hơn. Cả hai PWS và IIS đều bao gồm ASP, một dạng scrip
ng Windows NT.
ASP School. Hoặc học thêm về Microsoft's Internet Information Services
pload file của bạn nên một server
ều có thể host trang web của bạn
rnet Server cho mình.
Web Hosting Tutorial !!
HTML)
ce)
chèn
ột trang)
nhau
nhau
và đường biên)
t)
thứ tự
ợc)
chọn trước
r khác
duyệt không load được hình)
Chương 2: HTML nâng cao
đinh dang fon van bang bang html ; tạo đường viền table
n bao quanh 1 dòng chữ trong html ; tạo một đường link trên
ạo cột trống trong html ; tạo 2 table ngang nhau trong html ; thẻ
o tròn
%;background: #9BD1FA}
ock;background: #FFF}
y:block;height: 1px;
ound: #9BD1FA}
margin: 0 1px;height: 2px}
<body> hãy để ý phần css phía trên ở
div id="goctron".....> ở dưới đây
nter">
r1"></b><b class="r2"></b>
ay !!
ss="r4"></b><b class="r3"></b>
cách hiểu của FM nếu có gì sai mong
ách để insert những phần mình đã edit
g span. Nếu để ý các ban sẽ thấy các
sắp xếp liên tiếp nhau mà mỗi
top"
r1">
ống 3px từ "rtop"
ế, sắp xếp liên tiếp nhau sẽ tạo thành
thấy
ng có các góc bo tròn
Một số đoạn Script hay dùng trong Web
Cấm không cho bấm chuột Phải
Trích:
Trích:
<script LANGUAGE="JavaScript">
if (event.button==2) {
alert(''DO NOT STEAL!'');
}
}
document.onmousedown=click
// -->
</script>
Bật cửa Sổ Pop Up
Trích:
Trích:
<script LANGUAGE="JavaScript">
// -->
</script>
Bật cửa Sổ Pop Under
Trích:
<script LANGUAGE="JavaScript">
myWin = open('''', ''winin'',''toolbar=0,menubar=0, scrollbars=1,status=0,resizable=1,width=80,height= 430'');
myWin.blur();
myWin.location = '''';
var shut=true;
}
// -->
</script>
Bookmark tự động
Trích:
<a href="javascript:window.external.AddFavorite(''htt p://www.aptechitevn.com'', ''My Site Title'');">Bookmark this Site!</a>
Backforward eload
Trích:
Trích:
<a href="javascript:history.back(1)">Go Back</a>
Forward: <a href="javascript:history.forward(1)">Go Forward</a>
Refresh: <a href="javascript:location.reload(1)">Refresh</a>
In Trang
Trích:
<a href="javascript:window.print()">Print This Page</a>
MeNu
Trích:
<script LANGUAGE="JavaScript">
// -->
</script>
<form>
<select>
<option selected>-------------------
<option value="firstpage.html">One
<option value="secondpage.html">Two
</select>
<input type="button" value="Go" onClick="jumpBox(this.form.elements[0])">
</form>
Hiệu ứng chuột làm đối ảnh
Trích:
<script LANGUAGE="JavaScript">
// -->
</script>
Đây là đoạn script về lịch nó sẽ giúp trang web của bạn đẹp hơn
<SCRIPT LANGUAGE="JavaScript">
<!--Total Java Scripts 99 - Next Step Software-->
</SCRIPT>
- Chữ Chạy Dưới Thanh Status Bar
<body>
<script>
function scrollPlus(seed)
{
var msg = "[ Lam Gia Minh chúc bạn vui vẻ ]";
var out= " ";
var c = 1;
if (seed > 100){
seed--;
var cmd="scrollPlus(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}else if (seed <= 100 && seed > 0){
for (c=0; c < seed; c++){
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollPlus(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}else if (seed <= 0){
if (-seed < msg.length){
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollPlus(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}else{
window.status=" ";
timerTwo=window.setTimeout("scrollPlus(100)",75);
}
}
}
function clickMouse()
{
if ((event.button==2) || (event.button==3)){
return false;
}
}
function clickKey()
{
