[Lab 01]

phongnt.1999

Internship/Fresher
Sep 26, 2018
7
0
1
24
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.

XFKMgKUaH9FfEUx_AWV0njqTwn15JO7irsopAC_JSikafdEXKF1I9LdT0he3NzuO_kVqz2Z7ad51oV_14idXaYAR3N7NPw1A2mr2U_5Jvst7nWGrugS3M4C_y8mPKsBAELORF0GH
 

About us

  • Securityzone.vn là một trang web chuyên về an ninh mạng và công nghệ thông tin. Trang web này cung cấp các bài viết, tin tức, video, diễn đàn và các dịch vụ liên quan đến lĩnh vực này. Securityzone.vn là một trong những cộng đồng IT lớn và uy tín tại Việt Nam, thu hút nhiều người quan tâm và tham gia. Securityzone.vn cũng là nơi để các chuyên gia, nhà nghiên cứu, sinh viên và người yêu thích an ninh mạng có thể trao đổi, học hỏi và chia sẻ kiến thức, kinh nghiệm và giải pháp về các vấn đề bảo mật trong thời đại số.

Quick Navigation

User Menu