User Tag List

+ Trả lời chủ đề
Trang 1/3 123 CuốiCuối
Hiện kết quả từ 1 tới 10 của 28

Chủ đề: Lập trình Web với HTML ( only for newbie )

  1. #1
    poor_gangster
    Guest

    Mặc định Lập trình Web với HTML ( only for newbie )

    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>
    <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 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)
    <!-- 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 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 đó.
    <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à
    <img src=”abc/de/Adela.jpg”/>
    + Tạo nhãn cho img: alt=”label”
    <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
    <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ụ :
    <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 :
    <a name=”anchorname”>name</a>
    và link đến anchor :
    <a href=”#anchorname”>name</a>
    Ví dụ
    <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 : name:password@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ụ
    <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 :
    <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
    <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 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>
    <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
    Lần sửa cuối bởi poor_gangster; 01-05-2004 lúc 11:21 PM

  2. #2
    poor_gangster
    Guest

    Mặc định

    Chương 5 : CREATING STYLES
    ( Hay nhất đây )

    - Đầu tiên hãy nói đến cấu trúc chung để tạo một style :
    selector{propertyalue}
    trong đó :
    selector ~ dạng của các yếu tố bạn muốn apply style ( tất cả sẽ được đề cập đến trong chương này )
    property ~ là các thuộc tính.
    Value ~ giá trị của thuộc tính đó

    Các bạn nhớ là phải đầy đủ tất cả, kể cả dấu “;”đấy nhé
    - Cấu trúc của selector :
    h1{color:red;} <--- h1 là tên của yếu tố

    h1 em{color:red;} <--- style color sẽ được apply cho thuộc tính “em” ( chữ nghiêng ) nằm trong yếu tố h1. Còn các phần khác sẽ ko bị ảnh hưởng. Nếu bạn đảo chỗ thì cũng ko có tác dụng nốt

    em.very{color:red;} <--- “em” ở đây lại là yếu tố, còn “very” là tên của class ( lớp ) đã được đặt. ( có dấu “.” giữa em và very, còn h1 và em thì ko )
    div#demo{color:red;} <--- div là yếu tố, còn “demo” là id( tên đơn thuần, khác class )
    a:link{color:red;} <--- link chưa click
    div[name] {color:red;} <--- apply style cho giá trị name của div.
    ví dụ : <div class=” … “> …………… </div>
    thì div[class] sẽ cho toàn bộ div sử dụng class có màu đỏ.

    Nếu muốn apply style cho toàn bộ một class hay id thì bạn chỉ việc bỏ phần yếu tố phía trước đi và giữ lại phần sau là được ( kể cả # và . )
    - Mở rộng cho apply kèm thuộc tính:
    div#demo p{color:red;} <--- cái này áp dụng cho toàn bộ <p> trong id=”demo”, kể cả các lớp và id phía trong id này
    div#demo>p{color:red;} <--- cái này chỉ áp dụng đối với <p> thuộc id=”demo”, ko áp dụng được cho các lớp và id con.
    - Mở rộng cho link :
    a:link{color:red;} ~~~ chuyển link chưa được click thành màu đỏ
    aisited{color:blue;} ~~~ cái này chắc các bạn tự hiểu được.
    a:focus{color:olive;} ~~~ chuyển màu link nếu link được chọn bằng bàn phím và sẵn sàng actived
    a:hover{color:yellow;} ~~~ chuyển màu link khi con trỏ đặt vào link.
    a:active{color:green;} ~~~ chuyển màu link khi click.
    - Mở rộng cho từng phần của yếu tố:
    p:first-line{color:red;} ~~~ dòng đầu của <p> có màu đỏ.
    P:first-letter{color:olive;} ~~~ tương tự.
    - Mở rộng cho giá trị của yếu tố :
    Đầu tiên là element[attribute
    Tiếp theo có 4 dạng lựa chọn :
    =”value” ~~~ attribute có giá trị là value : ví dụ id=”demo”
    ~=”value” ~~~ attribute có bao gồm giá trị là value
    l=”value” ~~~ attribute có giá trị bắt đầu bằng value
    -Một vài mở rộng khác như:
    h1,h2{color:red;}
    div#demo p em:first-letter{color:blue;}

    Chương 6 : APPLYING STYLES

    - Tạo dạng style = file css.
    + Đầu tiên là tạo file :
    file có đuôi là css, bạn có thể làm = notepad với nội dung tạo style đã nói ở phần trên
    ví dụ : demo.css img{color:red;border:solid;}
    +tạo link ( trong <head>) có dạng
    <link rel=”stylesheet type=”text/css” href=”…demo.css”/>
    Như vậy, toàn bộ img sẽ có viền đặc màu đỏ bao quanh.
    Bạn có thể dùng nhiều stylesheet cho người dùng lựa chọn kiểu của mình trong toolbar view của IE hoặc các trình duyệt web khác.
    [quote]
    <link rel=”alternate stylesheet” type=” .. “ href=” .. “ title=”label”/>

    - Tạo trực tiếp:
    <head> ….
    <style type=”text/css”>
    img{color : red; border:dashed;}
    </style>
    ..
    </head>
    border có 3 dạng là dashed, dotted và solid.

    - Một các nhập file css khác
    <style>
    @import ”demo.css”;
    <style>
    Cách này sử dụng hiệu quả hơn khi cần apply nhiều style khác trong <style>
    - Apply style cục bộ:
    Sử dụng như alt,id hay rì đó :
    style=”color:red;border:solid”
    Nếu bạn cùng apply 2 kiểu style cho cùng 1 dạng thì chỉ 1 loại là sử dụng được (khác với alternate stylesheet
    Ví dụ
    <link rel=”stylesheet” type=”text/css” href=”demo.css”/>
    <style> img{border:dashed;} </style>

    Trong trường hợp này, viền quang img sẽ có dạng dashed chứ ko phải solid.

  3. #3
    poor_gangster
    Guest

    Mặc định

    Chương 7 : FORMATTING WITH STYLES

    Ở chương 5 mnh đ đề cập đến cch dng selector nn ở đy mnh xin chỉ viết code của phần property. Nếu v dụ, mnh sẽ cố gắng đưa ra v dụ dễ hiểu nhất.

    - Chọn Font chữ:
    font-family:name,name2,name3
    name,name2, name3 ~~~ l tn cc font chữ, bạn c thể để 1 font hoặc 3 font như by giờ chẳng hạn.
    C một số font cơ bản l serif,sans-serif,cursive, fantasy v monospace. Theo mnh cc bạn nn design web = Macromedia2004, n support kh đầy đủ phần style v cho mnh chọn kiểu font rất trực quan .
    - Add thm font vo web:
    @font-face{font-family:demo; src: url(font.eof)}
    Khi đ bạn sẽ c thm font l demo trong list font.
    - Kiểu chữ:
    font-style:name
    name ~~~ italic, oblique, normal.
    - Nt chữ:
    font-weight:name
    name ~~~ bold, lighter, normal. ( c thể đnh số 100 -> 900 : 400 l normail, 700 l bold )
    - Cỡ chữ:
    font-sizexx
    xxx ~~~ 16px ( nếu chnh xc ) , 1.4em ( 140% )
    hoặc larger, smaller,xx-small,x-small,small,medium,large,x-large,xx-large.
    - Khoảng cch giữa cc dng:
    line-heightx
    xx ~~~ n ( số lần nhn ln ), p%, apx
    ======> Dng tất cả:
    font:
    + normal/italic/oblique
    + normal/bold/bolder/lighter/100( con số )
    + normal/small-caps ( xem phần dưới )
    + font-size ( g trực tiếp gi trị )
    + g /line-height ( line-height l gi trị trực tiếp sau / )
    + g font chữ trong ( tn của font chữ )
    - Mu chữ :
    color:colorname
    colorname ~~~ tn mu ( red, green ), #rrggbb ( r,g,b : k tự hexa cho mu; bạn sẽ hiểu r hơn nếu xi macromedia ). Rgb(r,g,b) <---- r,g,b l số từ 0-255. (cch ny t dng )
    - Chỉnh nền:
    background:
    + transparent/color ~~ color l gi trị mu như trn. Cn transparent th g y nguyn 
    + nếu muốn lm ảnh nền th g url(img.gif) ~~ đường dẫn đến file img, sau đ c 3 cch chọn ( họăc ko dng )
    g repeat, 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 fixed hoặc scroll nếu muốn img đi theo khi mnh ko trang web xuống ..
    g x y trong đ x,y l tọa độ đặt img ( gc trn tri ). Cũng c thể dng top, center, bottom cho x; right, center, left cho y.
    - Khoảng cch giữa cc chữ, cc từ :
    word-spacing:length ~~~ length : gi trị chnh xc ( 16px ) hoặc 0.4em (40%)
    letter-spacing:length ~~~ length : gi trị chnh xc ( 16px ) hoặc 0.4em (40%)
    sử dụng normal hoặc 0 để trở lại trạng thi bnh thường
    - Tạo khoảng trống đầu dng cho một đoạn văn( cho <p> chẳng hạn )
    text-indent:length ~~~ length tương tự như trn.
    - Tạo khoảng trống: ( ci ny mnh cũng ko r hiệu quả của n lắm )
    white-space:pre/nowrap/normal/inherit
    - Sắp xếp chữ :
    text-align:left/right/center/justify ~~ y như trong Word thui m
    - Chuyển chữ hoa - thường :
    text-transform:
    +capitalize( chữ đầu tin thnh chữ hoa )
    +uppercase( tất cả cc chữ thnh chữ hoa )
    +lowercase( tất cả cc chữ thnh chữ thường )
    +none ( đễ như bnh thường )

    - Sử dụng kiểu chữ ( mnh ko biết diễn tả ra sao nn cc bạn tự tm hiểu )
    font-variant:small-caps/none

    - Trang điểm cho chữ
    text-decoration:underline ( gạch chn )/overline/blink( nhấp nhy )/none

  4. #4
    obie
    Guest

    Mặc định

    Okie, thanks bạn đã có bài rất hay, hồi trước tìm đỏ mắt cũng chả thấy. Nhưng theo mình, cái gì không quan trọng nên dùng FrontPage hay DreamWeaver cho tiện, viết code HTML chỉ hợp khi có thêm lập trình web

  5. #5
    HUT's Student
    Tham gia ngày
    Feb 2004
    Bài gửi
    153

    Mặc định

    Các bạn có thể xem chi tiết ở đây
    Tôi cũng có tài liệu dạy HTMT bangwf tiếng Việt để hôm nào up lên cho mọi người
    Lần sửa cuối bởi duongtran; 14-05-2004 lúc 11:45 AM

  6. #6
    Độc Thân Bang Hội Avatar của Friday
    Tham gia ngày
    Oct 2002
    Bài gửi
    173

    Mặc định

    Một số chương trình WEB DESIGN :
    - Đơn giản nhất là notepad
    - Microsoft Frontpage
    - Macromedia MX 2004
    Tui nghĩ là phải xếp thứ tự ngược lại đấy bác à.
    Friday
    "To laugh is to risk appearing a fool.
    To weep is to risk appearing sentimental.
    To reach out for another is to risk involvement.
    To expose feelings is to risk rejection.
    To place your dreams before the crowd is to risk ridicule.
    To love is to risk not being loved in return.
    To go forward in the face of overwhelming odds is to risk failure
    ..."

  7. #7
    Quân Nhân Danh Dự Avatar của tinhyeumuonmang
    Tham gia ngày
    Oct 2002
    Bài gửi
    263

    Mặc định

    http://www.khoahocthanbi.net/benglan <=== tài liệu cũng tàm tạm...dủ xài..
    Tăng Ka liên tục!

  8. #8
    HUT's Student
    Tham gia ngày
    May 2003
    Bài gửi
    418

    Mặc định

    có ai có cái code tạo hiệu ứng cơn mưa tình yêu (trái tim rơi hoặc hoa hồng)trên trang web không nhỉ ? Cho tôi xin cái code đấy cho vào thể body cái.
    Can you paint with all the colors of the wind ?

  9. #9
    obie
    Guest

    Mặc định

    MU vào trang www.dynamicdrive.com => Mục document effect ấy, nhiều hiệu ứng hay lắm. Hay vào www.24fun.ch có rất nhiều hiệu ứng ĐỘC.

  10. #10
    thanh21
    Guest

    Mặc định

    em cũng đang học thiết kế bằng HTML có gì xin các bác chỉ giáo.

+ Trả lời chủ đề
Trang 1/3 123 CuốiCuối

Thông tin chủ đề

Users Browsing this Thread

Hiện có 1 người đọc bài này. (0 thành viên và 1 khách)

Chủ đề tương tự

  1. Free toàn tập.... ( để thực hành net - chỉ giành cho newbie)
    Gửi bởi why_not trong mục Webmaster Club
    Trả lời: 9
    Bài cuối: 30-06-2010, 05:28 PM
  2. New File Added: [eBook] HTML - CSS - Quick Reference Guide.pdf
    Gửi bởi Mr.vulh_bk trong mục Thế Giới Phần Mềm
    Trả lời: 0
    Bài cuối: 12-03-2007, 10:49 AM
  3. Newbie - Xin thọ giáo kinh nghiệm người đi trước
    Gửi bởi Thug4Lif3 trong mục Diễn đàn Học tập và Nghiên cứu KH Sinh viên
    Trả lời: 13
    Bài cuối: 23-08-2005, 10:33 AM
  4. upload file html co embbedded images
    Gửi bởi obboy trong mục Các vấn đề CNTT khác
    Trả lời: 7
    Bài cuối: 29-06-2004, 06:46 PM
  5. làm sao nhúng html vào IBF 1.2 vậy
    Gửi bởi kesitinh trong mục Các vấn đề CNTT khác
    Trả lời: 6
    Bài cuối: 06-03-2004, 02:39 PM

Từ khóa (Tag) của chủ đề này

Quyền viết bài

  • Bạn không thể gửi chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình


About svBK.VN

    Bách Khoa Forum - Diễn đàn thảo luận chung của sinh viên ĐH Bách Khoa Hà Nội. Nơi giao lưu giữa sinh viên - cựu sinh viên - giảng viên của trường.

Follow us on

Twitter Facebook youtube