Scribd Logo
Upload

Welcome to Scribd!

  • BTTH Web 02 Nhom4 Chuong4 Lop101

    Uploaded by

    haruly
    5 views6 pages

    Original Title

    btth_web_02_nhom4_chuong4_lop101

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views6 pages

    BTTH Web 02 Nhom4 Chuong4 Lop101

    Uploaded by

    haruly

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    HƯỚNG DẪN THỰC HÀNH

    THIẾT KẾ TRANG WEB ĐƠN GIẢN


    I. Mục đích
    Học sinh biết cách thiết kế 1 trang web tĩnh đơn giản bằng ngôn ngữ html.
    II. Nội dung
    THIẾT KẾ TRANG WEB ĐƠN GIẢN
    1. Yêu cầu:
     Mỗi hs thiết kế được 1 trang web về trường THPT Vũng Tàu
    2. Cách thực hiện:
     Bước 1: Tổ chức trang web.
     Ngôn ngữ HTML là ngôn ngữ cơ bản nhất cho phép ta lập 1 trang web
    tĩnh , trong đó có ảnh và nội dung (chữ) . Để làm web bằng html ta phải
    có văn bản soạn thảo (chèn ảnh,viết chữ...). Trong bài thực hành này, ta sẽ
    dùng notepad để thiết kế.
     Để mở Notepad ta vào: StartProgramAccessoriesNotepad
    ( Hoặc phím windows + R , điền notepad )
     Khi dùng Notepad để lưu trang web ta vào File->Save; phần File Name
    đánh tên web nhưng có đuôi là .html
    o Ví dụ: web.html.
    o Lưu ý: Để gõ tiếng việt ở Encoding ta chọn kiểu UTF-8.
    Sau đó nhìn lên trên có chữ Save In ta có thể Save ra Desktop hoặc My
    Documents.
     Bước 2: Cấu trúc cơ bản của 1 trang web html.
     Sau khi chạy trang web.html nếu muốn mở ra soạn tiếp thì ta vào
    ViewSource. Soạn đến đâu ta bấm CTLR+S hoặc vào FileSave để ghi
    lại nội dung vừa soạn vào.)
     Những thẻ cơ bản trong html:
    Những thẻ HTML cơ bản
    Tag Mô tả
    <html> </html> Xác định một văn bản dạng HTML
    <body> </body> Xác định phần than của tài liệu
    <h1> to <h6> Xác định header từ 1 đến 6
    <p> </p> Xác định một đoạn văn
    <br> </br> Chèn 1 dòng trắng
    <hr> </hr> Xác định một đường thẳng
    <!--> Xác định vùng chú thích.
    <b></b> Thẻ làm cho chữ đậm
    < i></i> Thẻ làm cho chữ nghiêng
    <u></u> Thẻ làm cho chữ gạch chân
    <strong></strong> Thẻ làm chữ đậm và to
    < body bgcolor =”chọn màu”> Màu nền của trang web
     Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng
    </html>. Mỗi thẻ đều có thẻ đóng, mở.
    o Ví dụ: <html> là thẻ mở  thẻ đóng là: </html>
     Chúng ta bắt đầu soạn thảo trang Web:
    Phần đầu (head): Tạo 1 tiêu đề (title) cho trang web.
    Code:
    < html>
    < head>
    < title> LỚP 10A1 < / title> [ Tạo tiêu đề cho trang web ]
    < /head>

    Phần Thân(Body).
     Một trang web trống, không có nội dung và có nền màu hồng sẽ được viết
    như sau:
    Code:
    <html>
    <body bgcolor= “pink”>
    </body>
    </html>
     Tạo nội dung cho trang web:
    a. Để tạo dòng chữ “TRƯỜNG TRUNG HỌC PHỔ THÔNG VŨNG TÀU”
    font Arial, cỡ chữ lớn và có màu đen, được canh giữa, ta làm như sau:
    Code:
    <html>
    <body bgcolor="pink">
    <center>
    <font face="Arial" color="black"
    <br>
    <h1><b> TRƯỜNG TRUNG HỌC PHỔ THÔNG VŨNG TÀU</b></h1>
    </center>
    </body>
    </html>

    Ví dụ:
    b. Tạo dòng chữ : “Giới thiệu về trường THPT Vũng Tàu” nhỏ hơn tựa đề ở
    trên, bôi đậm, font chữ: Times New Romen, màu xanh.
    Code: ta thêm vào phần body như sau
    <h2><b><font face="Times New Romen" color="blue"> Giới thiệu về
    trường THPT Vũng Tàu </b></h2>

    Ví dụ:

    c. Chèn đoạn văn bản với font chữ Arial, font size 100%, màu đen.
    Code:
    <p style="font-family:Arial font-size:100% color:black"> điền nội dung
    từng đoạn văn bản vào </p>

    Ví dụ:
    d. Tạo liên kết đến trang khác khi bấm vào dòng chữ “Những hình ảnh của
    trường”
    <a href="http://www.thpt-vungtau.edu.vn/vi/"><h2>Những hình ảnh của
    trường Bấm vào đây</h2></a>

    Ví dụ:

    e. Chèn hình ảnh: đưa ảnh vào trang web (img src), định dạng chiều cao
    (height), chiều rộng (width), khoảng cách đường bao quanh hình (space),
    khi rê chuột vào hình hoặc hình không hiển thị xuất hiện dòng chữ (title)
    <img align="middle" src="đường dẫn của file hình" hspace = 5 vspace=5
    width="580" height="385" title="mat cuoi" />

    You might also like