Members Login
Username 
 
Password 
    Remember Me  
 
Home -> Trang Chính -> Kỹ Thuật Tạo Web -> Lập tŕnh web với HTML
Post Info TOPIC: Lập tŕnh web với HTML
admin


Member

Status: Offline
Posts: 13
Date:
Lập tŕnh web với HTML
Permalink  

Lập tŕnh Web với HTML
( Only for beginner )
Một số chương tŕnh WEB DESIGN :
- Đơn giản nhất là notepad
- Microsoft Frontpage
- Macromedia MX 2004

Đây là một số chương tŕnh thiết kế web mà ḿnh biết, đặc biệt là Macromedia, cái này rất hay và hữu ích, có thể làm trực tiếp = cách đặt các pic, rùi link vào 1 trang web hoặc lập tŕnh = ngôn ngữ.

Tài liệu này ḿnh lấy từ sách nước ngoài nên có ŕ ko hiểu các bạn cứ thắc mắc, ḿnh sẽ cố hết sức để giải đáp.

Chương 1 : BASIC (X)HTML STRUCTURE

- Một trang Web bao giờ cũng gồm :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<Head>
<META http-equiv=content-type content="text/html; charset=UTF-8">
</Head>
<Body>
</Body>
</HTML>

- Đặt tiêu đề cho trang web :
<TITLE>[.:: KeyGenVN Forum ::.] -> Hack and Learn Hack</TITLE>
Ví dụ như vậy và được đặt trong <head></head>
- Tạo các tiêu đề : <hn>Learn HTML</hn>
với n từ 1 đến 6 quy định cỡ chữ của tiêu đề : cùng kiểu chữ là times new romans, in đậm và cỡ chữ lần lượt là 24,18,14,12,10 và 8
- Tạo một đoạn văn: <p>( đoạn văn của bạn ) </p>
- Tạo phân vùng : mục đích để set các styles. <div></div>
Bạn có thể đặt tên cho từng vùng, có thể dùng id=”name” hoặc class=”name” bằng cách : <div id=”demo”> hoặc <div class=”demo”> tất nhiên tên là do bạn chọn rùi.
- Tạo vùng nhỏ cho một câu văn hoặc trích dẫn, dùng <span></span>, có thể đặt tên như trên.
- Xuống ḍng <br />  cái này dễ nhất.
- Tạo các comment để đánh dấu những cái cần chú ư ( ko ảnh hưởng đến trang web)
<!-- comment của bạn -->
- Tạo các nhăn cho từng vùng : title=”label”, có thể áp dụng cho <p>,<h> nhiều kiểu khác nữa.


Chương 2 : Basic (X)HTML FORMATTING

- Đặt kiểu chữ :
o <i> hoặc <em> là chữ nghiêng
o <b> hoặc <strong> là chữ đậm
o <small> hoặc <big> là làm cho chữ có kích thước lớn hơn hoặc nhỏ hơn một chút.
- Một số kiểu set font khác như
o <tt> ~ typerwriter text : dạng chữ nhỏ hơn
o <code> : dạng các đoạn code trong C hay Perl
o <bkp> : dạng chỉ dẫn = bàn phím
o <sam> : dạng ví dụ
Mấy cái này thực ra cũng ko được sử dụng nh́u lắm trong các web site thông thường nhưng ḿnh cứ post lên cho mọi người nghiên cứu.
- Tạo một đoạn introduce được định dạng sẵn : <blockquote></blockquote>. Cái này ḿnh cũng ko hiểu phải giải thích thế nào cho rơ hơn nữa.
- Tạo chữ nhỏ ( như kiểu số mũ hoặc ŕ ŕ đó  ) : <sub> và <sup>.
Quên ko nhắc các bạn sau khi sử dụng xong kiểu nào th́ phải close lại, ví dụ </sub>
- Tạo giải thích khi đặt con trỏ vào một đoạn nào đó.
<abbr title=”explanation”></abbr>
hoặc <acronym …..



Chương 3 : USING IMAGES

- Tạo image trong trang web: <img src=”image. url” />. Trong đó image. url là đường dẫn đến image của bạn. Nếu ở trong thư mục khác th́ phải có đường dẫn từ đầu. C̣n nếu cùng một thư mục th́ chỉ cần tên image là đủ ( nếu và sâu bên trong th́ dùng luôn đường dẫn của nó)
ví dụ : Adela.jpg trong aa/abc/de chẳng hạn, c̣n file htm trong aa. Như vậy link sẽ là
Quote:
<img src=”abc/de/Adela.jpg”/>

+ Tạo nhăn cho img: alt=”label”
Quote:
<img src=”abc/de/Adela.jpg” alt=”label”/>

( chú ư chữ hoa & chữ thường )
- Tạo kích thước cho img : dùng như alt, với width=”x” và length=”y”
- Tạo link đến img để xem riêng :
<a href=”image. url”>  cái này là img với kích thước chuẩn.
<img src=”img. url” alt=”…”/>
</a>
- Đặt vị trí cho img :
<img src=”img. url” align=”pos”/> trong đó pos là left hoặc right.
+ Nếu muốn viết kèm chữ bạn dùng <p> hoặc <hn> để viết sang bên cạnh của img.
VD Quote:
<img src=”img. url” align=”left”/>
<h2>demo</h2>
<p> this is just a test paragraph for U</p>

Như vậy chữ sẽ được xếp ngay bên phải của img.
+ Nếu bạn muốn viết hẳn xuống phía dưới img( bỏ qua phần trống phía bên cạnh ) bạn có thể sử dụng <br clear=”pos” />  trùng với pos của img 
- Tạo vùng khoảng trống quanh img : sử dụng như width hay length
hspace=”x”  ch́u ngang
vspace=”y”  ch́u dọc
- Tạo một thanh màu : <hr size=”n” width=”w” align=”dir” noshade/>
n : độ dày của thanh
w : độ dài của thanh
dir : center, right or left.
Noshade : tạo thanh đặc.



Chương 4 : LINKS

- Tạo một link đến một trang web khác : <a href=”url/page.htm”></a>
Ví dụ : Quote:
<a href=http://thanhlam. org > my webpage </a>

Khi đó click vào “my webpage” sẽ link sang thanhlam.org
( cũng tương tự khi link sang một trang web khác trong cùng một host )
- Tạo các table :
Quote:
<a name=”anchorname”>name</a>

và link đến anchor : Quote:
<a href=”#anchorname”>name</a>

Ví dụ
Quote:

<body>
<div class=”content”>
<h2> Table of Contents </h2>
<a href=”#one”>Part one</a>
<a href=”#chorus”>Chorus</a>
<a href=”#end”>End</a>
</div>

<h2><a name=”one”>Part one</a></h2>
<pre> 2a.m. and the rain is falling
here we are at the crossroads once again
you're tellin me you're so confused
you can't make up your mind
is this meant tobe
you're asking me</pre>

<h2><a name=”chorus”>Chorus</a></h2>
<pre>but only love can say-try again or walk away
but i believe for you and me
the sun will shine one day
so i'll just play my part
and pray you'll have a chance of heart
but i can't make you see it through
that's something only love can do
in your arms as the dawn is breaking
face to face and a thousand miles apart
i've tried my best to make you see
there's hope beyond the pain
if we give enough-if we learn to trust
</pre>

<h2><a name=”end”>End</a></h2>
<pre>chorus

i know if i could find the words
to touch you deep inside
you'd give our dream just one more chance
don't let this be our last good-bye

chorus
</pre>
</body>




+ anchor có thể link sang một trang khác :
Quote:
<a href=”url/page.htm#anchorname”>

- Tạo chế độ click vào link sẽ mở một cửa sổ mới :
sử dụng target=”_blank”
-Một số dạng link khác:

<a href=”
+ file có phần mở rộng khác htm : http://url/file.ext trong đó ext là dạng của file như exe, com, txt ……….
+ vào ftp : ftp://ftp.site.com/path  có thể xài pass ftp trực tiếp : nameassword@ftp.site.com
+ mail : mailto:name@site.com  thường là contact us
+ telnet : telnet://site


- Tạo các tab : tabindex=”n” trong đó n là số theo thứ tự ưu tiên. Nghĩa là n=1 được ưu tiên từ trên xuông dưới khi ấn tab sẽ zô đó trước, sau đó đến các tab với n=2 ( dù là n=2 ở trên cùng )
Ví dụ
Quote:
<a href=”tab1.htm” tabindex=2> order 1 </a>
<a href=”tab2.htm” tabindex=1> order 2 </a>
<a href=”tab3.htm” tabindex=1> order 3 </a>
<a href=”tab4.htm” tabindex=1> order 4 </a>
<a href=”tab5.htm” tabindex=2> order 5 </a>
<a href=”tab6.htm” tabindex=3> order 6 </a>
<a href=”tab7.htm” tabindex=2> order 7 </a>
<a href=”tab8.htm” tabindex=1> order 8 </a>



( thú thật cái này ḿnh thấy ko hiệu quả lắm )
- Tạo link qua img :
Quote:
<a href=”link.htm><img src=”img” border=”n”></a>

-Tạo một link trên 1 img, nghĩa là trên img, click vào mỗi nơi sẽ được 1 link khác nhau
Quote:
<map name=”label” id=”label”> label là tên của kiểu phân vùng này
<area alt=”info” shade=”type” coords=” … “ href=”url.htm” />
info là thông tin về link ḿnh sẽ click vào
type : kiểu của vùng, gồm có : rect ( vuông ) circle ( tṛn ) poly (khác tṛn và vuông)
Coords : tọa độ : coords=”x1,y1,x2,y2” ứng với rect + poly
Coords=”x,y,r” ứng với circle
Href : nơi link đến, hoặc dùng nohref th́ click vào sẽ ko xảy ra cái ŕ cả.
Có thể sử dụng phẩn này nhiều lần để phân vùng img.
</map>
<img src=”image.gif” usemap=”#label” />
Cái này là đưa file img lên web và định dạng cho nó thuộc vào map label
đường dẫn đầy đủ : usemap=”url.htm#label”  sử dụng map của webpage khác
__________________


__________________
admin


Member

Status: Offline
Posts: 13
Date:
Chương 7 : FORMATTING WITH STYLES
Permalink  

Ở chương 5 m쮨 đ㠦#273;ề cập đến cᣨ d?elector nꮠở đ⹠m쮨 xin chỉ viết code của phần property. Nếu v�ụ, m쮨 sẽ cố gắng đưa ra v�ụ dễ hiểu nhất.

- Chọn Font chữ:


Quote:
font-family:name,name2,name3
name,name2, name3 ~~~ l࠴ꮠcᣠfont chữ, bạn c��ể để 1 font hoặc 3 font như b⹠giờ chẳng hạn.
C��#7897;t số font cơ bản l࠳erif,sans-serif,cursive, fantasy v࠭onospace. Theo m쮨 cᣠbạn nꮠdesign web = Macromedia2004, n��pport khᠦ#273;ầy đủ phần style vࠣho m쮨 chọn kiểu font rất trực quan .



- Add thꭠfont v௠web:


Quote:
@font-face{font-family:?demo?; src: url(font.eof)}
Khi đ��#7841;n sẽ c��ꭠfont lࠓdemo? trong list font.



- Kiểu chữ:


Quote:
font-style:name
name ~~~ italic, oblique, normal.



- N鴠chữ:


Quote:
font-weight:name
name ~~~ bold, lighter, normal. ( c��ể đᮨ số 100 -> 900 : 400 l࠮ormail, 700 lࠢold )



- Cỡ chữ:


Quote:
font-sizexx
xxx ~~~ 16px ( nếu ch� xᣠ) , 1.4em ( 140% )
hoặc larger, smaller,xx-small,x-small,small,medium,large,x-large,xx-large.



- Khoảng cᣨ giữa cᣠd��


Quote:
line-heightx
xx ~~~ n ( số lần nh⮠lꮠ), p%, apx



======> D?ất cả:


Quote:
font:
+ normal/italic/oblique
+ normal/bold/bolder/lighter/100( con số )
+ normal/small-caps ( xem phần dưới )
+ font-size ( g?ực tiếp giᠴrị )
+ g?ine-height ( line-height lࠧiᠴrị trực tiếp sau / )
+ g?nt chữ trong ? ? ( tꮠcủa font chữ )



- Mൠchữ :


Quote:
color:colorname
colorname ~~~ tꮠmൠ( red, green ), #rrggbb ( r,g,b : k?921; hexa cho mൻ bạn sẽ hiểu r?#417;n nếu x੠macromedia ). Rgb(r,g,b) <---- r,g,b l࠳ố từ 0-255. (cᣨ n๠�d?



- Chỉnh nền:


Quote:
background:
+ transparent/color ~~ color lࠧiᠴrị mൠnhư trꮮ C��ransparent th젧?nguyꮠ
+ nếu muốn lୠảnh nền th젧?l(img.gif) ~~ đường dẫn đến file img, sau đ�� 3 cᣨ chọn ( họăc ko d?
? g?peat, repeat-x, repeat-y nếu muốn ảnh lặp lại theo chiều ngang hoặc dọc hoặc cả 2
? g?xed hoặc scroll nếu muốn img đi theo khi m쮨 k鯠trang web xuống ..
? g?y trong đ��y l࠴ọa độ đặt img ( g��rꮠtr᩠). Cũng c��ể d?op, center, bottom cho x; right, center, left cho y.



- Khoảng cᣨ giữa cᣠchữ, cᣠtừ :


Quote:
word-spacing:length ~~~ length : giᠴrị ch� xᣠ( 16px ) hoặc 0.4em (40%)
letter-spacing:length ~~~ length : giᠴrị ch� xᣠ( 16px ) hoặc 0.4em (40%)
sử dụng normal hoặc 0 để trở lại trạng th᩠b쮨 thường



- Tạo khoảng trống đầu d��cho một đoạn văn( cho <p> chẳng hạn )


Quote:
text-indent:length ~~~ length tương tự như trꮮ



- Tạo khoảng trống: ( c᩠n๠m쮨 cũng ko r?ệu quả của n��#7855;m )


Quote:
white-spacere/nowrap/normal/inherit



- Sắp xếp chữ :


Quote:
text-align:left/right/center/justify ~~ y như trong Word thui m༢r />


- Chuyển chữ hoa - thường :


Quote:
text-transform:
+capitalize( chữ đầu tiꮠthந chữ hoa )
+uppercase( tất cả cᣠchữ thந chữ hoa )
+lowercase( tất cả cᣠchữ thந chữ thường )
+none ( đễ như b쮨 thường )




- Sử dụng kiểu chữ ( m쮨 ko biết diễn tả ra sao nꮠcᣠbạn tự t쭠hiểu )


Quote:
font-variant:small-caps/none




- Trang điểm cho chữ


Quote:
text-decoration:underline ( gạch ch⮠)/overline/blink( nhấp nhṠ)/none

Chúc các bạn thành công ! Nếu có không hiểu th́ hăy nhắn tin cho Minkyu nha. Cảm ơn các bạn đă đọc bài này !
__________________
T́nh Yêu là vĩnh hằng!


__________________
admin


Member

Status: Offline
Posts: 13
Date:
công cụ để làm web
Permalink  

1. Page Plus 5

Là một chương tŕnh dùng để thiết kế, dàn trang và để tạo các ấn phẩm rất chuyên nghiệp. Đi kèm với phần mềm là 119 mẫu thiết kế sẵn và 116 clipart images dùng để tạo các ấn phẩm theo các chủ đề sau: Ad & Brochures, Newsletter, Posters, Danh thiếp, Thông báo, Phong b́ thư, Menu, Thiệp mời, Thiệp chúc mừng, v.v... Tải về tại đây.
http://freeserifsoftware.com/serif/pp/pp5/index.asp
2. Draw Plus 4

Đây là công cụ dùng để vẽ h́nh cực mạnh. Draw Plus hỗ trợ tốt cho việc vẽ h́nh vector (loại chuẩn phổ biến được dùng trong hầu hết các software chuyên nghiệp như Corel Draw, Flash MX...). Với DrawPlus bạn có thể tạo ra được những: h́nh ảnh chất lượng cao, h́nh vector, Gif động, Logo. Tải về tại đây.
http://freeserifsoftware.com/serif/dp/dp4/index.asp

3. Photo Plus 5.5

Phần mềm này không chỉ dùng để sửa chửa h́nh, mà c̣n vẽ được thêm vào h́nh của ḿnh. Nó hỗ trợ nhiều các công cụ từ cơ bản cho đến nâng cao y như trong Photoshop. Có hỗ trợ scanner và có thêm t́nh năng cũng khá thú vị là hồi phục những tấm h́nh cũ (như mấy tiệm chụp h́nh của VN hay làm). Tải về tại đây.
http://freeserifsoftware.com/serif/ph/ph5/index.asp

4. 3D Plus

Tạo những văn bản, logo, hay những đoạn phim 3D một cách dễ dàng. Bạn chỉ việc lựa chọn văn bản hay h́nh ảnh, thêm vào một số hiệu ứng, chọn h́nh nền, điều chỉnh độ sáng, chỉnh lại các góc cạnh, thêm những clipart có sẵn và thế là đă có được một sản phẩm 3D vừa ư. Tải về tại đây.
http://freeserifsoftware.com/serif/3d/3d2/index.asp

5. Web Plus 6

Với phần mềm này bạn có thể thiết kế được những trang web bắt mắt mà không cần đ̣i hỏi phải có nhiều kiến thức về thiết kế web. Bạn chỉ việc thiết kế nội dung cho trang web, phần c̣n lại Web Plus sẽ hoàn tất cho bạn. Tải về tại đây.
http://freeserifsoftware.com/serif/wp/wp6/index.asp

__________________
Page 1 of 1  sorted by
 
Quick Reply

Please log in to post quick replies.
Home -> Trang Chính -> Kỹ Thuật Tạo Web -> Lập tŕnh web với HTML
Tweet this page Post to Digg Post to Del.icio.us


Create your own FREE Forum
Report Abuse 		Powered by ActiveBoard