Đọc truyện kingboomb7-html1

Chào các bạn! Truyen4U chính thức đã quay trở lại rồi đây!^^. Mong các bạn tiếp tục ủng hộ truy cập tên miền Truyen4U.Com này nhé! Mãi yêu... ♥

kingboomb7-html1

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

Lập trình web với HTML

Lập trình Web với HTML

( Only for beginner )

Một số chương trình WEB DESIGN :

- Đơn giản nhất là notepad

- Microsoft Frontpage

- Macromedia MX 2004

Đây là một số chương trình thiết kế web mà 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 trình = ngôn ngữ.

Tài liệu này mình lấy từ sách nước ngoài nên có rì ko hiểu các bạn cứ thắc mắc, mì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>

</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 dò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)

- 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 mì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 mì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 rì rì đó  ) : <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 đó.

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:

+ Tạo nhãn cho img: alt=”label”

Quote:

( 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.

</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:

<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:

và link đến anchor : Quote:

Ví dụ

Quote:

<body>

<h2> Table of Contents </h2>

<a href=”#chorus”>Chorus</a>

</div>

<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>

<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:

- 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 : [email protected]

+ mail : mailto:[email protected]  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 mình thấy ko hiệu quả lắm )

- Tạo link qua img :

Quote:

-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

info là thông tin về link mình sẽ click vào

type : kiểu của vùng, gồm có : rect ( vuông ) circle ( tròn ) poly (khác trò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 rì cả.

Có thể sử dụng phẩn này nhiều lần để phân vùng img.

</map>

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: Fri Dec 10 9:38 PM, 2004

Chương 7 : FORMATTING WITH STYLES

Ở 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ữ

Bạn đang đọc truyện trên: Truyen4U.Com

Trước Sau

Tags: #kingboomb