Scribd Logo
Upload

Welcome to Scribd!

  • Bai 2 - Lythuyet

    Uploaded by

    thepooha9
    369 views9 pages

    Original Title

    bai 2_lythuyet

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    369 views9 pages

    Bai 2 - Lythuyet

    Uploaded by

    thepooha9

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    Baøi 1

    NGÔN NGỮ HTML


    Giới thiệu
    Cấu trúc trang HTML
    Cú pháp chung của tag HTML
    Các tag – thẻ lệnh thông dụng
    Kết hợp thuộc tính style định dạng các thẻ HTML
    1 . GIỚI THIỆU
    - Dùng để soạn thảo các trang tài liệu web.
    - Chứa các thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị một
    trang Web.
    - Một trang web thông thường gồm có 2 thành phần chính:
    - Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)
    - Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên
    trình duyệt.
    2 . CẤU TRÚC TRANG HTML

    3 . CÚ PHÁP CHUNG CỦA TAG HTML


    <Tên thẻ thuộc tính1=”giá trị” thuộc tính2=”giá trị” … thuộc tínhn=”giá trị”> ĐỐI
    TƯỢNG NHẬN LỆNH
    </tên thẻ>

    - Thẻ HTML được bao quanh bởi hai ký tự “<“ và “>”


    - Thẻ HTML thường có một cặp: Thẻ thứ nhất là thẻ mở đầu, thẻ thứ hai là thẻ kết thúc
    và dòng chữ ở giữa hai thẻ bắt đầu và kết thúc chính là nội dung.

    Ví dụ: <H1> Tiêu đề 1 </H1>

    - Thẻ HTML không phân biệt in HOA và viết thường.


    - Một số thẻ HTML có thêm các thuộc tính giúp bạn xác định thêm thông tin về thẻ. Mỗi
    thuộc tính đều có dạng tên_thuộc_tính=giá_trị. Nếu thẻ có nhiều thuộc tính thì phải liệt kê
    từng thuộc tính, cách nhau bằng khoảng trắng.

    Ví dụ: <HR align=“center” width=“50%”/>

    4 . KẾT HỢP CSS ĐỊNH DẠNG CÁC THẺ HTML


    INLINE Style:
    - Sử dụng css bằng cách viết trực tiếp chung trong thẻ html thông qua thuộc tính style

    <tên thẻ style=”thuộc tính 1: giá trị ; thuộc tính 2: giá trị ; thuộc tính n: giá trị “>
    ĐỐI TƯỢNG NHÂN LỆNH
    </tên thẻ>

    5 . CÁC THẺ LỆNH THÔNG DỤNG


    <BODY>: Thẻ định dạng trang web
    - <BODY style="background-color:#000; color:#CCC; font-family:Arial; font-size:14px;
    margin-top:0"> </BODY>
    - Lệnh trên dùng để định dạng mặc định cho toàn trang web với:
    o background-color: màu nền trang :màu đen( #000)
    o color : màu chữ : màu trắng xám (#ccc)
    o font-family: arial : font chữ
    o font-size: 14px: cỡ chữ
    o margin-top:0 : canh lề trên

    <H1>: Thẻ định dạng tiêu đề Heading


    - <H1 align=center> nội dung </H1>
    - Lệnh trên dùng để định dạng tiêu đề cho văn bản
    - Có 6 mức độ tiêu đề - heading từ <h1> đến <h6>, được mặc định từ lớn đến nhỏ.
    - Tuy nhiên nếu kết hợp CSS qua thuộc tính style thì có thể định dạng tùy ý
    Ví dụ:
    <h1 style="text-align:center; text-decoration:none; color:#ccc; font-size:24px"> TRUNG TÂM
    TIN HỌC ĐAI HỌC KHOA HỌC TỰ NHIÊN TP. HỒ CHÍ MINH </h1>

    - KẾT QUẢ

    <P>: định dạng đoạn văn bản

    <P style=”color: #FF0; font-family: arial; font-size: 12px; text-align:center”>nội dung </P>

    - Lệnh trên dùng để định dạng cho văn bản trong đoạn văn - paragraph, khoảng cách giữa
    các đoạn mặc định là 6px
    color : màu chữ : màu vàng
    font-family: arial : font chữ
    font-size: 14px: cỡ chữ
    text-align: canh chữ vào giữa .

    Ví dụ:
    <p style=" color:#FF0; font-size:14px; margin-left:20px"> CHƯƠNG TRÌNH ĐỒ HỌA RED -
    APPLE</p>

    - Kết quả:

    <BR/>: Thẻ ngắt dòng trong đoạn văn


    - Đây là thẻ đơn, không cần thuộc tính

    Ví dụ:
    <h1 style="text-align:center; text-decoration:none; color:#ccc; font-size:24px"> TRUNG TÂM
    TIN HỌC<br/>
    ĐAI HỌC KHOA HỌC TỰ NHIÊN<br/>
    TP. HỒ CHÍ MINH </h1>

    - Kết quả:

    <Span>: Thẻ định dạng cục bộ nhóm text trong đoạn ..


    - SPAN dùng định dạng 1 nhóm văn bản trong 1 đọan , mà không tạo sự ngắt đoạn ( xuống
    dòng).

    ví dụ:
    <p style=" color:#FF0; font-size:14px.; margin-left:20px">
    CHƯƠNG TRÌNH ĐỒ HỌA
    <span style="color:#900; font-size:18px; font-weight:bold; text-decoration: underline"> RED -
    APPLE</span>
    </p>

    - Kết quả:

    <OL><LI>: Danh sách có thứ tự

    <OL type=”kiểu danh sách” start =”n”>


    <li> danh sách thứ nhất</li>
    …
    <li> danh sách thứ n</li>
    </OL>

    - Các thuộc tính:


    type: kiểu danh sách: 1, a, A, i, I
    start: thứ tự bắt đầu

    Ví dụ:
    <OL type="1" start="1">
    <LI> Thiết kế Đồ họa </LI>
    <LI> Thiết kế nội thất </LI>
    <LI>Thiết kế Album</LI>
    <LI>Thiết kế Web</LI>
    </OL>

    Kết quả:

    <UL><LI>: Danh sách không thứ tự:


    <UL type=”kiểu danh sách”>
    <li> danh sách thứ nhất</li>
    …
    <li> danh sách thứ n</li>
    </UL>
    - Các thuộc tính:
    type: kiểu danh sách: Circle/Disc/Square

    Ví dụ:
    <ul>
    <li>Đồ họa căn bản</li>
    <li>Thiết kế & in ấn</li>
    <li>Thiết kế web</li>
    <li>3D & kỹ xảo truyền hình</li>
    </ul>

    - Kết quả:

    <IMG/>: THẺ LIÊN KẾT HÌNH ẢNH VÀO TRANG WEB,


    - Thuộc tính
    src: đường dẫn tập tin
    alt: ghi chú
    align: gióng hàng giữa hình ảnh và văn bản
    border: khung ảnh
    width/height: chiều rộng, chiều cao của hình ảnh
    vspace/hspace: khoảng cách chiều cao và rộng giữa hình và văn bản
    lowsrc: ảnh có độ phân giải thấp

    Ví dụ: chèn tập tin “picture.gif” vào trang web, không có đường biên:
    <IMG src=“picture.gif” border=“0” />

    <A>: THẺ TẠO LIÊN KẾT GIỬA CÁC TRANG WEB, EMAIL, HAY ĐịA CHỉ URL
    - Thuộc tính:
    href: địa chỉ URL
    target: chế độ mở Browser (“_blank”, ”_top”, ”_parent”, ”_self”)
    name: tên điểm dừng (anchor)
    - Các loại liên kết:
    Nội: href=“ten_tap_tin.html”
    Ngoại: href=“http://www...”
    Email: href=mailto:multi@hcmuns...
    Điểm dừng: href=[ten_tap_tin.html]#ten_diem_dung
    Rỗng: href=“#”

    Ví du:
    <p> Để biết thêm chi tiết xin vào trang web của trung tâm tin học<a
    href="http://www.t3h.vn"> www.t3h.vn</a> </p>
    <p> Hoặc gởi mail tới bộ phận tư vấn <a href=" tuvan@hcmuns.edu.vn">
    tuvan@hcmuns.edu.vn</a> để được tư vấn thêm.</p>

    - Kết quả:

    TABLE:
    - Tạo bảng, các cặp thẻ <TABLE>/ bảng, <TR>/ dòng, <TD>/ ô thường, <TH> ô tiêu đề, với
    các thuộc tính:
    o caption: tiêu đề bảng
    o align: gióng hàng giữa bảng và trang hay nội dung trong dòng, cột
    o bgcolor: màu nền
    o background: hình nền
    o width/height: chiều rộng, cao
    o cellSpacing: khoảng cách giữa các ô
    o cellPadding: khoảng cách với nội dung ô
    o border: đường biên
    o bordercolor: màu biên
    o colspan/rowspan: nối cột, nối dòng
    Ví dụ:
    <table width="800" border="0" cellspacing="1" style="background-color:#99C; margin-
    left:20px">
    <caption>
    <h3> ĐĂNG KÝ TƯ VẤN ONLINE </h3>
    </caption>
    <tr>
    <th bgcolor="#000000">THỨ HAI</th>
    <th bgcolor="#000000">THỨ BA</th>
    <th bgcolor="#000000">THỨ TƯ</th>
    <th bgcolor="#000000">THỨ NĂM</th>
    <th bgcolor="#000000">THỨ SÁU</th>
    <th bgcolor="#000000">THỨ BẢY</th>
    </tr>
    <tr>
    <td colspan="3" align="center" bgcolor="#000000">Ms Minh Yến<br />
    0903 4445698</td>
    <td align="center" bgcolor="#000000">Mr Hữu Tài<br /> 0903 666 9874
    online</td>
    <td colspan="2" align="center" bgcolor="#000000">Ms Thủy Tiên<br />
    0903 555 6987</td>
    </tr>
    </table>

    Kết quả:

    <DIV>:
    - viết tắt của từ division (phân chia ra từng phần): là phần tử html dùng để chứa các phần
    tử khác ( p, span,div, img, table...), thường được dùng để làm layout cho website thay cho
    cách dùng table-base truyền thống. Ưu điểm của phương pháp này là mã của thẻ div thì
    rất ngắn, thông tin định dạng của nó nằm trong CSS mà thông tin này được trình duyệt
    cache nên tốc độ load trang nhanh hơn. Hơn nữa khi làm layout bằng div thì rất dễ thay
    đổi giao diện của website, chỉ cần thay định dạng CSS mà không cần viết lại mã HTML
    nên thậm chí có thể thay giao diện vào lúc chạy (runtime).
    - Ví dụ:

    <Div style="width: 600px;margin: 10px auto; padding: 20px; border: 1px solid #666;
    background: #ccc"; color:#333>
    <p><img src=”images/about.jpg” align=”left” hspace=”10”/>
    VYNGỌC_flowershop.com<br/>
    Chuyên Thiết kế, trang trí hoa tươi, hoa chúc mừng, khai trương,sự kiện, trang trí hoa văn
    phòng, khách sạn, đại sảnh.... </p>

    <p>Dịch vụ điện hoa VY NGỌC_flower shop là cầu nối tình cảm của bạn đến người thân,
    gia đình và bè bạn . Bằng những bó hoa tươi thắm mang nhiều thông điệp ý nghĩa mà bạn
    gửi đến cho người thân (hoa sinh nhật, hoa tình yêu, hoa chúc mừng, đặc biệt là hoa cưới)
    sẽ chuyển tải niềm hạnh phúc lớn lao đến họ nhanh nhất. </p

    <p>Dịch vụ điện hoa VY NGỌC_flowershop giúp bạn giao lưu với mọi người ở khắp nơi mà
    không tốn nhiều thời gian và chi phí cực thấp. Chỉ cấn 1 cú phone, bạn sẽ hoàn toàn yên
    tâm đã đem đến niềm vui cho gia đình bè bạn...</p>
    </Div>

    Kết quả:
    THỰC HÀNH BÀI 2: TẠO TRANG WEB SAU:

    You might also like