[Lab 01]

Discussion in 'Lập trình web' started by phongnt.1999, Nov 6, 2018.

  1. phongnt.1999

    phongnt.1999 New Member

    Joined:
    Sep 26, 2018
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    vn

    NGÔN NGỮ HTML




    MỘT SỐ KHÁI NIỆM VÀ THIẾT KẾ MỘT WEB ĐƠN GIẢN



    1. Trang web.
    Trang web là một trang thông tin giống như một trang báo, nhưng súc tích hơn vì có đủ các dạng thông tin: chữ, hình , âm thanh, video.

    2. HTML.
    HTML là viết tắt của HyperText Markup Language. Chức năng chính là dung để bố trí thông tin trong trang web.

    3. CSS.
    Dùng để định dạng thông tin (màu sắc, căn trái căn phải, kích thước, viền…).

    4. Javascrift.
    Tạo hiệu ứng cho trang web .

    5. Hyperlink.
    Hyperlink là một liên kết chỉ đến một trang web khác. Một trang web có thể chứa nhiều link.

    6. HTTP.
    Là cách thức giao tiếp giữa máy của người dùng và webserver. Người dùng sẽ sử dụng 1 phần mềm đặc biệt để xem các trang web .dduowjc gọi là Browser. Mọi Browser ddeefu hiểu HTTP,HTML, CSS, Javascrift.

    7. Web tĩnh.
    Là một trang web có đuôi là HTML hoặc HTM. Tĩnh là tĩnh về nội dung.

    8. Web động.
    Wed động là động về nội dung.

    9. Thiết kế một trang web.
    Cấu trúc đơn giản của một trang web viết bằng HTML sẽ bắt đầu bằng thẻ <html> và và kết thúc bằng thẻ </html>.

    • Dùng Notepad++ chỉ cần lưu file với phần mở rộng là *.html.

    • Dùng Dreamweaver File > New > </> HTML.
    Dưới đây là cấu trúc của một trang web:
    Code:
    <!DOCTYPE html>
    <!-- Nội dung này sẽ bị bowser bỏ qua-->
    <html> <--!phần sau này không cần phải ghi vào-->
        <head>
            <title>SVUIT</title>
            <style> <--!cặp thẻ <stype></stype> dùng để đụnh dạng cho các đối tượng được đặt trong nó-->
                body { background-image:url(Best-Website-Background-Images6.jpg)} <--! tag body để chỉ nội dung trong phần body-->>
                h1 { color:#006699; <--!màu sắc của đói tượng, ở đây là chữ-->
                    background-color:#FFFFFF; <--!màu nền-->
                    width: 500px; <--!chiều rộng tối thiểu-->
                    margin: auto; <--!thuộc tính căn lề cho thành phần-->
                    padding: 15px 15px 15px 15px;<--!khoảng không quanh thành phần theo thứ tự trên-phải-dưới-trái-->
                    border: 5px double; <--!viền khung cho thành phần-->
                    text-transform: uppercase; <--!kiểu gạch chân cho văn bản-->
                    line-height:200%; <--!chiều cao giữa caxc dòng-->
                    margin-bottom: 50px;
                    word-spacing: 6px; <--!khoảng cách các từ trong văn bản-->
                    }
                h2 { color: #CC3366;
                    background-color: #98A69F;
                    width: 85%;
                    text-indent: 3%; <--!Thuộc tính text-indent ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản-->
                    padding: 5px 0px;
                    border: 4px double#000099;
                    border-radius: 7px; <--!độ cong góc của khung viền-->
                    line-height: 120%;
                    background-image: url(file:///D:/PHP+MySQL/WebTinh-Source/HinhNho/plus.gif); <--!chèn hình nền cho đối tượng-->
                    background-repeat: no-repeat; <--!xác định hình ảnh nền được lặp như thế nào-->
                    background-position: 1% 50%; <--!xác định vị trí hình ảnh nền cho thành phần-->
                    }
                #d1 { font-size: 1.2em; <--!cỡ chữ xác định theo kích cỡ font hiện tại-->
                      font-style: italic} <--!xác định loại chữ-->
                #d2 { font-size: 1.2em}
                a { text-decoration: none; <--!thiết lập các trang trí thêm cho text, có gạch chân, gạch trên, gạch giữa,... ở đây là kiểu bình thường-->
                text-align: center; <--!sắp xếp các nội dung theo chiều ngang-->
                    text-transform: uppercase; <--!thiết lập các ký tự viết hoa cho văn bản-->
                    font-style: oblique;
                    margin: auto}
                a:hover { color: yellow;}  <--! a:hover xác định thuộc tính khi rê chuột lên thành phần-->
                a:active { color: red;} <--! a:active khi click chuột vào-->
            </style>
        </head>
        <body>
            <h1 align="center">Trang web của SVUIT</h1
            <h2>Giới thiệu</h2>
                <blockquote><p id="d1">Svuit.vn là một website về công nghệ, không chỉ cung cấp tin tức công nghệ cho các bạn đa mê yêu thích công nghê.<br>
                SVUIT.VN còn là một cộng đồng, một nơi mọi người có thể chia sẽ kiến thức của mình cho mọi người thông qua forum svuit.vn. Chúng tôi rất mong nhận được sự đóng góp từ các bạn.<br> Chân thành cảm ơn mọi người đã quan tâm.</p></blockquote> <--! blockquote bowser sẽ căn lề cho nội dung cho tag này-->
            <h2>Hình ảnh</h2>
                <a href="http://microsoft.com" <--!xác định siêu liên kết-->
                   target="_blank"> <--! mở ra một của sổ mới-->
                    <img src="logo1.jpg" <--!chèn ảnh-->
                         alt="microsoft"
                         style="border: 2px solid  #000000; margin: 20px">
                </a>
                <a href="http://Dell.com" target="new">
                    <img src="logo2.jpg"
                         alt="dell"
                         style="border: 2px solid  #000000; margin: 20px">
                </a>
                <a href="http://hp.com" target="_blank">
                    <img src="logo3.jpg"
                         alt="hp"
                         style="border: 2px solid  #000000; margin: 20px">
                </a>
                <a href="http://intel.com" target="new">
                    <img src="logo4.jpg"
                         alt="intel"
                         style="border: 2px solid  #000000; margin: 20px">
                </a>
        <h2>Địa chỉ</h2>
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1679.8441770828463!2d106.67726751079661!3d10.798013406509348!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528d64cfa405d%3A0xbeccda81079d8d04!2sTabalo+Coffee!5e0!3m2!1svi!2s!4v1541393445392" width="100%" height="600" frameborder="0" style="border: 2px solid #000000" allowfullscreen></iframe> <--!Chèn thêm bản đồ vào trang web-->
            <a href="https://goo.gl/maps/axGeaJMXjw42" target="new">
                <blockquote>
                <p style="font-size: 20px; background-color: aliceblue; padding: 7px; width: 90px; margin: 20px; border: 2px solid #000000">
                    Chi tiết
                </p>
                </blockquote>
            </a>
            <h2>Liên hệ</h2>
            <ul id="d2">
            <li><p>Email:abc.svuit.vn</p></li>
            <li><p>SĐT:01234567899</p></li>
            <li><p>Địa chỉ: Số A, Đường B, Phường C, Quận D, TP.E </p></li>
            </ul>
        </body>
    
    </html>
    Sau khi viết xong chúng ta chạy thử trang web, trang web vừa tạo sẽ như hình dưới.

    [​IMG]
     

Share This Page