SlideShare a Scribd company logo
1 of 22
Giới thiệu và siêu liên kết

        Chương 1
Mục tiêu bài học
   Khái quát về Internet
   Khái quát về HTML
   Viết một tài liệu HTML đơn giản
   Sử dụng siêu liên kết trong tài liệu HTML
   Sử dụng thẻ <META>
   Sử dụng các ký tự đặc biệt trong tài liệu
    HTML


                                 Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 2 of 22
World Wide Web
   Internet là mạng máy tính lớn nhất trên thế
    giới
   Internet được xem là mạng của các mạng
   World Wide Web là một tập con của
    Internet
   World Wide Web gồm các Web Servers có
    mặt khắp mọi nơi trên thế giới


                                 Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 3 of 22
Giới thiệu HTML
   HTML là một ngôn ngữ đánh dấu
   Sử dụng các thẻ và các phần tử HTML, ta có
    thể :
      Điều khiển hình thức và nội dung của trang

      Xuất bản các tài liệu trực tuyến và truy

       xuất thông tin trực tuyến bằng cách chèn
       các liên kết vào tài liệu HTML
      Tạo các biểu mẫu trực tuyến để thu thập

       thông tin về người dùng, quản lý các giao
       dịch .....
                                Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 4 of 22
Cú pháp HTML
<HTML>
  <HEAD>
      <TITLE>Welcome to HTML</TITLE>
  <HEAD>
  <BODY>
      <H3>My first HTML document</H3>
  </BODY>
</HTML>


                           Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 5 of 22
Hiển thị trang




                   Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 6 of 22
Trình duyệt và trình soạn thảo
     Trình duyệt
        Netscape's Navigator

        Microsoft's Internet Explorer

     Trình soạn thảo
        Microsoft FrontPage

        Notepad




                            Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 7 of 22
Các thẻ HTML
   Thẻ HTML được sử dụng để đánh dấu sự bắt
    đầu và kết thúc của tài liệu HTML
         <HTML> . . . </HTML>
   Một thẻ HTML bao gồm :
         <ELEMENT ATTRIBUTE = value>
       Element – Nhận dạng thẻ
       Attribute – Mô tả thẻ
       Value – Giá trị được thiết lập cho thuộc tính


                                       Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 8 of 22
Cấu trúc của một tài liệu HTML
Phần HTML
Phần tiêu đề
Phần thân

   <HTML>
     <HEAD>
      <TITLE>Welcome to the world of HTML</TITLE>
     </HEAD>
     <BODY>
      <P>This is going to be real fun</P>
     </BODY>
   </HTML>

                                Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 9 of 22
Đoạn
<HTML>
  <HEAD>
     <TITLE>Welcome to HTML</TITLE>
  </HEAD>
  <BODY BGCOLOR = lavender>
     <P>This is going to be real fun
     <P> Another paragraph element
  </BODY>
</HTML>



                         Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 10 of 22
Thẻ ngắt
<HTML>
  <HEAD>
     <TITLE>Welcome to HTML</TITLE>
  </HEAD>
  <BODY BGCOLOR = lavender>
     <P>This is going to be real fun
     <BR>
     <P> Another paragraph element
  </BODY>
</HTML>
                          Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 11 of 22
Canh lề cho văn bản
  Giá               Mô tả
  trị
Left   Văn bản được canh lề trái

Center Văn bản được canh giữa

Right   Văn bản được canh phải

Justify Văn bản được canh đều hai bên




                          Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 12 of 22
Sử dụng các ký tự đặc biệt
   Lớn hơn (>)
      &gt;

   Nhỏ hơn (<)
      &lt;

   Trích dẫn (“ “)
      &quot;

   Ký tự & (&)
      &amp;


                        Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 13 of 22
Siêu liên kết




                 Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 14 of 22
Giới thiệu siêu liên kết
   Các dạng liên kết
       Liên kết trong là liên kết đến các phần
        trong cùng tài liệu hoặc cùng một web site
       Liên kết ngoài là liên kết đến các trang
        trên các web site khác hoặc máy chủ khác.




                                   Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 15 of 22
Liên kết trong và liên kết ngoài
        -----
        --
-----
                                           -----
--
                                           --



-----
        -----
--
        --                    -----            -----          -----
                              --               --             --

-----           -----
--              --




                        Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 16 of 22
Tạo siêu liên kết
   Để tạo siêu liên kết, chúng ta cần phải xác định hai
    thành phần :
       Địa chỉ đầy đủ hoặc URL của file được kết nối
       Điểm nóng cung cấp cho liên kết. Điểm nóng này có thể là
        một dòng văn bản hoặc thậm chí là một ảnh.
   Các kiểu URL
       URL tuyệt đối
       URL tương đối




                                          Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 17 of 22
HREF
   Cú pháp của HREF là :
    <A HREF =
     protocol://host.domain:port/path/filename>
     Hypertext </A>
        Protocol xác định loại giao thức

        Host.domain là địa chỉ Internet của máy chủ

        Port là cổng phục vụ của máy chủ đích

        HyperText là văn bản hay hình ảnh mà user

         cần nhấp vào để kích hoạt liên kết

                                Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 18 of 22
Liên kết
   Liên kết đến tài liệu khác
      Đường dẫn tuyệt đối

      Đường dẫn tương đối

   Liên kết đến các phần trong cùng một tài liệu
   Liên kết đến một điểm xác định ở một tài liệu
    khác
   Sử dụng e-mail


                                Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 19 of 22
Điều hướng quanh Web Site
    Trình bày tuyến tính
    Trình bày theo phân cấp
    Bản đồ ảnh
    Siêu liên kết
    Các trang con
    Bảng mục lục
    Nút Back and Forward


                            Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 20 of 22
Trình bày tuyến tính
   Theo cấu trúc tuyến tính
   Một chuỗi liên kết liên tục giữa các trang

    ----------   ----------   ----------                  ----------
    ----------   ----------   ----------                  ----------
    ------       ------       ------                      ------




                                  Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 21 of 22
Trình bày theo phân cấp
   Trang chủ liên kết với nhiều trang khác
   Mỗi trang đều có liên kết về trang chủ.

                 ---------       ---------                           ---------
                 ---------       ---------                           ---------
                 ---------       ---------                           ---------



---------
---------
---------
                                 ---------                            ---------
                                 ---------                            ---------
                                 ---------                            ---------




                                Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 22 of 22

More Related Content

Viewers also liked (6)

OFFRE POUR RESSORTISSANTS CROATES: ETUDES DOCTORALES REMUNEREES EN FRANCE
OFFRE POUR RESSORTISSANTS CROATES: ETUDES DOCTORALES REMUNEREES EN FRANCEOFFRE POUR RESSORTISSANTS CROATES: ETUDES DOCTORALES REMUNEREES EN FRANCE
OFFRE POUR RESSORTISSANTS CROATES: ETUDES DOCTORALES REMUNEREES EN FRANCE
 
Auto entrepreneur et assedic
Auto entrepreneur et assedicAuto entrepreneur et assedic
Auto entrepreneur et assedic
 
Ittlgc1
Ittlgc1Ittlgc1
Ittlgc1
 
Session 11
Session 11Session 11
Session 11
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post Formats
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 

Similar to Session 01 Final

Session 05 Final
Session 05 FinalSession 05 Final
Session 05 Final
SamQuiDaiBo
 
Html và thiết kế web[bookbooming.com]
Html và thiết kế web[bookbooming.com]Html và thiết kế web[bookbooming.com]
Html và thiết kế web[bookbooming.com]
bookbooming1
 
Session 04 Final Sua
Session 04 Final SuaSession 04 Final Sua
Session 04 Final Sua
SamQuiDaiBo
 
Lập trình web đại học tài nguyên môi trường
Lập trình web   đại học tài nguyên môi trườngLập trình web   đại học tài nguyên môi trường
Lập trình web đại học tài nguyên môi trường
Kiên Thỏ
 
Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01
Ta Hormon
 
Java script dh bk share-book.com
Java script dh bk   share-book.comJava script dh bk   share-book.com
Java script dh bk share-book.com
phongbk1609
 
Giao trinh java_script
Giao trinh java_scriptGiao trinh java_script
Giao trinh java_script
nmphuong91
 
Slide Web Service
Slide Web ServiceSlide Web Service
Slide Web Service
ask bills
 

Similar to Session 01 Final (20)

Chuong 1 tongquanve web&amp;htm-lcanban
Chuong 1  tongquanve web&amp;htm-lcanban Chuong 1  tongquanve web&amp;htm-lcanban
Chuong 1 tongquanve web&amp;htm-lcanban
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Html coban
Html coban Html coban
Html coban
 
Session 05 Final
Session 05 FinalSession 05 Final
Session 05 Final
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban
 
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban
 
Java script
Java scriptJava script
Java script
 
Html và thiết kế web[bookbooming.com]
Html và thiết kế web[bookbooming.com]Html và thiết kế web[bookbooming.com]
Html và thiết kế web[bookbooming.com]
 
Session 04 Final Sua
Session 04 Final SuaSession 04 Final Sua
Session 04 Final Sua
 
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can banToilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
 
Lập trình web đại học tài nguyên môi trường
Lập trình web   đại học tài nguyên môi trườngLập trình web   đại học tài nguyên môi trường
Lập trình web đại học tài nguyên môi trường
 
Bài giảng thiết kế website - truongkinhtethucpham.com
Bài giảng thiết kế website - truongkinhtethucpham.comBài giảng thiết kế website - truongkinhtethucpham.com
Bài giảng thiết kế website - truongkinhtethucpham.com
 
Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01Chuong3a html-091030201256-phpapp01
Chuong3a html-091030201256-phpapp01
 
Java script dh bk share-book.com
Java script dh bk   share-book.comJava script dh bk   share-book.com
Java script dh bk share-book.com
 
JavaScript (Tieng viet)
JavaScript (Tieng viet)JavaScript (Tieng viet)
JavaScript (Tieng viet)
 
Giao trinh java_script
Giao trinh java_scriptGiao trinh java_script
Giao trinh java_script
 
Slide Web Service
Slide Web ServiceSlide Web Service
Slide Web Service
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon html
 

More from SamQuiDaiBo (20)

Test
TestTest
Test
 
T3
T3T3
T3
 
T2
T2T2
T2
 
Bai Tap Thuc Hanh Javascript
Bai Tap Thuc Hanh JavascriptBai Tap Thuc Hanh Javascript
Bai Tap Thuc Hanh Javascript
 
Hangman Game
Hangman GameHangman Game
Hangman Game
 
Session 10 Final
Session 10 FinalSession 10 Final
Session 10 Final
 
Session 09 Final
Session 09 FinalSession 09 Final
Session 09 Final
 
Session 08 Final
Session 08 FinalSession 08 Final
Session 08 Final
 
Session 07 Final
Session 07 FinalSession 07 Final
Session 07 Final
 
Session 06 Final
Session 06 FinalSession 06 Final
Session 06 Final
 
Session 03 Final
Session 03 FinalSession 03 Final
Session 03 Final
 
Session 02 Final
Session 02 FinalSession 02 Final
Session 02 Final
 
Html overview
Html overviewHtml overview
Html overview
 
Ittlgc2
Ittlgc2Ittlgc2
Ittlgc2
 
Ittlgc3
Ittlgc3Ittlgc3
Ittlgc3
 
Ittlgc
IttlgcIttlgc
Ittlgc
 
Baitap C
Baitap CBaitap C
Baitap C
 
Epc Assigment2
Epc Assigment2Epc Assigment2
Epc Assigment2
 
Epc Assignment1
Epc Assignment1Epc Assignment1
Epc Assignment1
 
Epc Assignment1 Vn
Epc Assignment1 VnEpc Assignment1 Vn
Epc Assignment1 Vn
 

Session 01 Final

  • 1. Giới thiệu và siêu liên kết Chương 1
  • 2. Mục tiêu bài học  Khái quát về Internet  Khái quát về HTML  Viết một tài liệu HTML đơn giản  Sử dụng siêu liên kết trong tài liệu HTML  Sử dụng thẻ <META>  Sử dụng các ký tự đặc biệt trong tài liệu HTML Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 2 of 22
  • 3. World Wide Web  Internet là mạng máy tính lớn nhất trên thế giới  Internet được xem là mạng của các mạng  World Wide Web là một tập con của Internet  World Wide Web gồm các Web Servers có mặt khắp mọi nơi trên thế giới Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 3 of 22
  • 4. Giới thiệu HTML  HTML là một ngôn ngữ đánh dấu  Sử dụng các thẻ và các phần tử HTML, ta có thể :  Điều khiển hình thức và nội dung của trang  Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách chèn các liên kết vào tài liệu HTML  Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch ..... Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 4 of 22
  • 5. Cú pháp HTML <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <HEAD> <BODY> <H3>My first HTML document</H3> </BODY> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 5 of 22
  • 6. Hiển thị trang Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 6 of 22
  • 7. Trình duyệt và trình soạn thảo  Trình duyệt  Netscape's Navigator  Microsoft's Internet Explorer  Trình soạn thảo  Microsoft FrontPage  Notepad Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 7 of 22
  • 8. Các thẻ HTML  Thẻ HTML được sử dụng để đánh dấu sự bắt đầu và kết thúc của tài liệu HTML <HTML> . . . </HTML>  Một thẻ HTML bao gồm : <ELEMENT ATTRIBUTE = value>  Element – Nhận dạng thẻ  Attribute – Mô tả thẻ  Value – Giá trị được thiết lập cho thuộc tính Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 8 of 22
  • 9. Cấu trúc của một tài liệu HTML Phần HTML Phần tiêu đề Phần thân <HTML> <HEAD> <TITLE>Welcome to the world of HTML</TITLE> </HEAD> <BODY> <P>This is going to be real fun</P> </BODY> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 9 of 22
  • 10. Đoạn <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun <P> Another paragraph element </BODY> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 10 of 22
  • 11. Thẻ ngắt <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun <BR> <P> Another paragraph element </BODY> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 11 of 22
  • 12. Canh lề cho văn bản Giá Mô tả trị Left Văn bản được canh lề trái Center Văn bản được canh giữa Right Văn bản được canh phải Justify Văn bản được canh đều hai bên Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 12 of 22
  • 13. Sử dụng các ký tự đặc biệt  Lớn hơn (>)  &gt;  Nhỏ hơn (<)  &lt;  Trích dẫn (“ “)  &quot;  Ký tự & (&)  &amp; Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 13 of 22
  • 14. Siêu liên kết Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 14 of 22
  • 15. Giới thiệu siêu liên kết  Các dạng liên kết  Liên kết trong là liên kết đến các phần trong cùng tài liệu hoặc cùng một web site  Liên kết ngoài là liên kết đến các trang trên các web site khác hoặc máy chủ khác. Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 15 of 22
  • 16. Liên kết trong và liên kết ngoài ----- -- ----- ----- -- -- ----- ----- -- -- ----- ----- ----- -- -- -- ----- ----- -- -- Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 16 of 22
  • 17. Tạo siêu liên kết  Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần :  Địa chỉ đầy đủ hoặc URL của file được kết nối  Điểm nóng cung cấp cho liên kết. Điểm nóng này có thể là một dòng văn bản hoặc thậm chí là một ảnh.  Các kiểu URL  URL tuyệt đối  URL tương đối Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 17 of 22
  • 18. HREF  Cú pháp của HREF là : <A HREF = protocol://host.domain:port/path/filename> Hypertext </A>  Protocol xác định loại giao thức  Host.domain là địa chỉ Internet của máy chủ  Port là cổng phục vụ của máy chủ đích  HyperText là văn bản hay hình ảnh mà user cần nhấp vào để kích hoạt liên kết Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 18 of 22
  • 19. Liên kết  Liên kết đến tài liệu khác  Đường dẫn tuyệt đối  Đường dẫn tương đối  Liên kết đến các phần trong cùng một tài liệu  Liên kết đến một điểm xác định ở một tài liệu khác  Sử dụng e-mail Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 19 of 22
  • 20. Điều hướng quanh Web Site  Trình bày tuyến tính  Trình bày theo phân cấp  Bản đồ ảnh  Siêu liên kết  Các trang con  Bảng mục lục  Nút Back and Forward Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 20 of 22
  • 21. Trình bày tuyến tính  Theo cấu trúc tuyến tính  Một chuỗi liên kết liên tục giữa các trang ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ------ ------ ------ ------ Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 21 of 22
  • 22. Trình bày theo phân cấp  Trang chủ liên kết với nhiều trang khác  Mỗi trang đều có liên kết về trang chủ. --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- Web Page Programming with HTML,DHTML & JavaScript/Session 1/ 22 of 22