Chương III




Trình bày: Nguyễn Phú Trường
CÁC THẺ CƠ BẢN


Table với thuộc tính cellpadding

                                        Cellpadding :
                                        số khoảng
                                        trắng từ nội
                                        dung trong ô
                                        dữ liệu đến
                                        đường viền.




24/Oct/2009        2        Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Table với thuộc tính cellspacing


                                        Cellspacing :
                                        khoảng cách
                                        giữa các ô
                                        dữ liệu trong
                                        1 bảng.




24/Oct/2009        3        Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Table với số cột không bằng nhau




24/Oct/2009        4      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Dữ liệu trong Table




24/Oct/2009        5      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ danh sách (List)
        Có 3 dạng danh sách chính
               Danh sách có thứ tự (Ordered List) :           <ol>
               Danh sách không thứ tự (Unordered List) :      <ul>
               Danh sách định nghĩa (Definition Lists) :      <dl>
        Danh sách sẽ gồm nhiều phần tử
              • Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li>
              • Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>
        Ngoài ra còn có các dạng: <menu> và <dir>
        Có thể định nghĩa các danh sách lồng nhau

24/Oct/2009                              6              Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ danh sách (ví dụ)

                         Danh
                       sách có
                        thứ tự
                          với
                        nhiều
                         định
                         dạng
                         khác
                         nhau


24/Oct/2009        7             Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ danh sách (ví dụ)

                                                        Danh
                                                        sách
                                                       không
                                                       thứ tự
                                                         với
                                                       nhiều
                                                        định
                                                        dạng
                                                        khác
                                                        nhau


24/Oct/2009        8      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ danh sách (ví dụ)




24/Oct/2009        9      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


    Thẻ Form
               Lựa chọn dữ liệu nhập từ người sử dụng khi
                truy xuất Web,
               Thành phần trong Form: text fields, textarea
                fields, drop-down menus, radio buttons,
                checkboxes, etc.
               Form được đánh dấu bởi thẻ: <form> …. </form>
                 • VD : <form name=“Fname" action=“Form-Action”
                   method=“GET|POST"> …</form>



24/Oct/2009                              10              Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Text Field




24/Oct/2009          11      Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Radio Button




24/Oct/2009           12     Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Checkbox




24/Oct/2009         13     Bộ môn Mạng máy tính & Truyền thông
Ví dụ về Submit button




24/Oct/2009           14      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Form (ví dụ)




24/Oct/2009         15    Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Image
        Thêm vào trang web những hình ảnh dưới định
         dạng là *.gif hay *.jpg
        Thẻ đánh dấu là : <image src=“URL”>
        Các thuộc tính của thẻ Image
              Width = number pixels / number %
              Height = number pixels / number %
              Align = “left/right/top/middle/bottom”
              Alt=“Chuỗi đại diện khi không tải được hình”
        Thẻ <map> và <area>: chia hình ra làm nhiều phần
24/Oct/2009                         16            Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Image (ví dụ)




24/Oct/2009          17   Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Body - với thuộc tính
        Nền của trang Web có thể được định dạng
              Màu nền :
                – <body bgcolor="#000000">
                – <body bgcolor="rgb(0,0,0)">
                – <body bgcolor="black">
              Ảnh nền :
                – <body background="clouds.gif">
                – <body background=“http://www.diachi.net/hinh.jpg">
                – <body background=“/bkground.jpg">


24/Oct/2009                                18             Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Body - thuộc tính bgcolor




24/Oct/2009       19       Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Body - thuộc tính background




24/Oct/2009       20      Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN


Thẻ Head:
        Giữa cặp thẻ <head> và </head> : thông tin về tiêu
         đề, địa chỉ nền, styles, meta, font nền, …
        Thông tin khai báo trong thẻ Head không được thể
         hiện ra trong nội dung trang Web.
       VD :<head>
         •      <title> Tieu de trang Web </title>
         •      <link rel="stylesheet" type="text/css“
                      href="mystyle.css">
         •      <meta name="keywords" content="HTML">
         • </head>

24/Oct/2009                    21          Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ CƠ BẢN

Thẻ Title
        Cung cấp tên tiêu đề trên thanh tiêu đề của trình
         duyệt khi thể hiện trang Web.




24/Oct/2009                    22           Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO


Thẻ Meta:
        Cung cấp thông tin tổng quát về trang Web cho các
         Search Engine lưu trữ.
               Mô tả :
              • <meta name="description" content=“Trang chu cua Website Khoa
                CNTT – Truong DHCT">
               Từ khóa tìm kiếm :
              • <meta name="keywords" content=“University, Cantho,
                      Computer, Information Technology">
               Chỉ định khi hiện trang Web: mở trang Web URL sau 5s
              • <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn">


24/Oct/2009                                 23                Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Style
        Xu hướng dùng Style Sheet (CSS) để định dạng
         chung cho nhiều trang Web trong Website,
        Có thể định dạng trong file ở ngoài,
          VD : <link rel="stylesheet" type="text/css“ href=“abc.css">
        Có thể khai báo bên trong phần <head> trang Web,
              VD :      <style type="text/css">
                              body {background-color: red}
                              p {margin-left: 20px}
                        </style>
        Có thể sử dụng thẳng trong nội dung trang Web.
              VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p>
24/Oct/2009                                   24                Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO


Thẻ script
        Có thể nhúng vào trang Web những đoạn Script
         viết bằng các ngôn ngữ như : JavaScript, VBScript,




24/Oct/2009                   25           Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO

Thẻ Font
        Định font cho cả trang Web bằng thẻ <basefont>
        Định font cho 1 đoạn văn bản bằng thẻ <font>




24/Oct/2009                   26          Bộ môn Mạng máy tính & Truyền thông
CÁC THẺ NÂNG CAO


Thẻ Font
        Thường sử dụng thuộc tính style để định dạng font
         thay cho các tag cũ.




24/Oct/2009                   27          Bộ môn Mạng máy tính & Truyền thông
KẾT LUẬN

 Nhiều thẻ HTML được định nghĩa,
 Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ
  cũ bằng các định dạng khác,
 Có thể tham khảo từ :               http://www.w3.org
 Hiện nay, còn nhiều định dạng khác được sử dụng rất
  nhiều trên Internet, chẳng hạn như :
              • XML, XHTML
              • WML
              • Các kỹ thuật DHTML, CSS, ...

 Ngày nay, thường sử dụng thuộc tính style để định dạng
  font thay cho các tag cũ.
24/Oct/2009                               28         Bộ môn Mạng máy tính & Truyền thông
Nhập môn HTML 2

Nhập môn HTML 2

  • 1.
    Chương III Trình bày:Nguyễn Phú Trường
  • 2.
    CÁC THẺ CƠBẢN Table với thuộc tính cellpadding Cellpadding : số khoảng trắng từ nội dung trong ô dữ liệu đến đường viền. 24/Oct/2009 2 Bộ môn Mạng máy tính & Truyền thông
  • 3.
    CÁC THẺ CƠBẢN Table với thuộc tính cellspacing Cellspacing : khoảng cách giữa các ô dữ liệu trong 1 bảng. 24/Oct/2009 3 Bộ môn Mạng máy tính & Truyền thông
  • 4.
    CÁC THẺ CƠBẢN Table với số cột không bằng nhau 24/Oct/2009 4 Bộ môn Mạng máy tính & Truyền thông
  • 5.
    CÁC THẺ CƠBẢN Dữ liệu trong Table 24/Oct/2009 5 Bộ môn Mạng máy tính & Truyền thông
  • 6.
    CÁC THẺ CƠBẢN Thẻ danh sách (List)  Có 3 dạng danh sách chính  Danh sách có thứ tự (Ordered List) : <ol>  Danh sách không thứ tự (Unordered List) : <ul>  Danh sách định nghĩa (Definition Lists) : <dl>  Danh sách sẽ gồm nhiều phần tử • Mỗi phần tử trong danh sách được đánh dấu bởi thẻ <li> • Còn trong danh sách định nghĩa (dl) là : <dt> và <dd>  Ngoài ra còn có các dạng: <menu> và <dir>  Có thể định nghĩa các danh sách lồng nhau 24/Oct/2009 6 Bộ môn Mạng máy tính & Truyền thông
  • 7.
    CÁC THẺ CƠBẢN Thẻ danh sách (ví dụ) Danh sách có thứ tự với nhiều định dạng khác nhau 24/Oct/2009 7 Bộ môn Mạng máy tính & Truyền thông
  • 8.
    CÁC THẺ CƠBẢN Thẻ danh sách (ví dụ) Danh sách không thứ tự với nhiều định dạng khác nhau 24/Oct/2009 8 Bộ môn Mạng máy tính & Truyền thông
  • 9.
    CÁC THẺ CƠBẢN Thẻ danh sách (ví dụ) 24/Oct/2009 9 Bộ môn Mạng máy tính & Truyền thông
  • 10.
    CÁC THẺ CƠBẢN Thẻ Form  Lựa chọn dữ liệu nhập từ người sử dụng khi truy xuất Web,  Thành phần trong Form: text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.  Form được đánh dấu bởi thẻ: <form> …. </form> • VD : <form name=“Fname" action=“Form-Action” method=“GET|POST"> …</form> 24/Oct/2009 10 Bộ môn Mạng máy tính & Truyền thông
  • 11.
    Ví dụ vềText Field 24/Oct/2009 11 Bộ môn Mạng máy tính & Truyền thông
  • 12.
    Ví dụ vềRadio Button 24/Oct/2009 12 Bộ môn Mạng máy tính & Truyền thông
  • 13.
    Ví dụ vềCheckbox 24/Oct/2009 13 Bộ môn Mạng máy tính & Truyền thông
  • 14.
    Ví dụ vềSubmit button 24/Oct/2009 14 Bộ môn Mạng máy tính & Truyền thông
  • 15.
    CÁC THẺ CƠBẢN Thẻ Form (ví dụ) 24/Oct/2009 15 Bộ môn Mạng máy tính & Truyền thông
  • 16.
    CÁC THẺ CƠBẢN Thẻ Image  Thêm vào trang web những hình ảnh dưới định dạng là *.gif hay *.jpg  Thẻ đánh dấu là : <image src=“URL”>  Các thuộc tính của thẻ Image Width = number pixels / number % Height = number pixels / number % Align = “left/right/top/middle/bottom” Alt=“Chuỗi đại diện khi không tải được hình”  Thẻ <map> và <area>: chia hình ra làm nhiều phần 24/Oct/2009 16 Bộ môn Mạng máy tính & Truyền thông
  • 17.
    CÁC THẺ CƠBẢN Thẻ Image (ví dụ) 24/Oct/2009 17 Bộ môn Mạng máy tính & Truyền thông
  • 18.
    CÁC THẺ CƠBẢN Thẻ Body - với thuộc tính  Nền của trang Web có thể được định dạng Màu nền : – <body bgcolor="#000000"> – <body bgcolor="rgb(0,0,0)"> – <body bgcolor="black"> Ảnh nền : – <body background="clouds.gif"> – <body background=“http://www.diachi.net/hinh.jpg"> – <body background=“/bkground.jpg"> 24/Oct/2009 18 Bộ môn Mạng máy tính & Truyền thông
  • 19.
    CÁC THẺ CƠBẢN Thẻ Body - thuộc tính bgcolor 24/Oct/2009 19 Bộ môn Mạng máy tính & Truyền thông
  • 20.
    CÁC THẺ CƠBẢN Thẻ Body - thuộc tính background 24/Oct/2009 20 Bộ môn Mạng máy tính & Truyền thông
  • 21.
    CÁC THẺ CƠBẢN Thẻ Head:  Giữa cặp thẻ <head> và </head> : thông tin về tiêu đề, địa chỉ nền, styles, meta, font nền, …  Thông tin khai báo trong thẻ Head không được thể hiện ra trong nội dung trang Web. VD :<head> • <title> Tieu de trang Web </title> • <link rel="stylesheet" type="text/css“ href="mystyle.css"> • <meta name="keywords" content="HTML"> • </head> 24/Oct/2009 21 Bộ môn Mạng máy tính & Truyền thông
  • 22.
    CÁC THẺ CƠBẢN Thẻ Title  Cung cấp tên tiêu đề trên thanh tiêu đề của trình duyệt khi thể hiện trang Web. 24/Oct/2009 22 Bộ môn Mạng máy tính & Truyền thông
  • 23.
    CÁC THẺ NÂNGCAO Thẻ Meta:  Cung cấp thông tin tổng quát về trang Web cho các Search Engine lưu trữ.  Mô tả : • <meta name="description" content=“Trang chu cua Website Khoa CNTT – Truong DHCT">  Từ khóa tìm kiếm : • <meta name="keywords" content=“University, Cantho, Computer, Information Technology">  Chỉ định khi hiện trang Web: mở trang Web URL sau 5s • <meta http-equiv="Refresh“ content="5; url=http://www.cit.ctu.edu.vn"> 24/Oct/2009 23 Bộ môn Mạng máy tính & Truyền thông
  • 24.
    CÁC THẺ NÂNGCAO Thẻ Style  Xu hướng dùng Style Sheet (CSS) để định dạng chung cho nhiều trang Web trong Website,  Có thể định dạng trong file ở ngoài, VD : <link rel="stylesheet" type="text/css“ href=“abc.css">  Có thể khai báo bên trong phần <head> trang Web, VD : <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>  Có thể sử dụng thẳng trong nội dung trang Web. VD : <p style="color: red; margin-left: 20px"> Paragraph1 </p> 24/Oct/2009 24 Bộ môn Mạng máy tính & Truyền thông
  • 25.
    CÁC THẺ NÂNGCAO Thẻ script  Có thể nhúng vào trang Web những đoạn Script viết bằng các ngôn ngữ như : JavaScript, VBScript, 24/Oct/2009 25 Bộ môn Mạng máy tính & Truyền thông
  • 26.
    CÁC THẺ NÂNGCAO Thẻ Font  Định font cho cả trang Web bằng thẻ <basefont>  Định font cho 1 đoạn văn bản bằng thẻ <font> 24/Oct/2009 26 Bộ môn Mạng máy tính & Truyền thông
  • 27.
    CÁC THẺ NÂNGCAO Thẻ Font  Thường sử dụng thuộc tính style để định dạng font thay cho các tag cũ. 24/Oct/2009 27 Bộ môn Mạng máy tính & Truyền thông
  • 28.
    KẾT LUẬN  Nhiềuthẻ HTML được định nghĩa,  Thẻ HTML được thay đổi, thêm mới và loại bỏ một số thẻ cũ bằng các định dạng khác,  Có thể tham khảo từ : http://www.w3.org  Hiện nay, còn nhiều định dạng khác được sử dụng rất nhiều trên Internet, chẳng hạn như : • XML, XHTML • WML • Các kỹ thuật DHTML, CSS, ...  Ngày nay, thường sử dụng thuộc tính style để định dạng font thay cho các tag cũ. 24/Oct/2009 28 Bộ môn Mạng máy tính & Truyền thông