Nhập môn HTML 1

  • 4,499 views
Uploaded on

Lập trình web

Lập trình web

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,499
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
312
Comments
3
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Chương III Trình bày: Nguyễn Phú Trường
  • 2. NỘI DUNG Giới thiệu HTML Thành phần của HTML Thẻ HTML cơ bản Thẻ HTML nâng cao Tóm tắt 24/Oct/2009 2 Bộ môn Mạng máy tính & Truyền thông
  • 3. GIỚI THIỆU HTML Mô hình Web Trang Trình duyệt Web (Browser)  file1.htm Web Server User 24/Oct/2009 3 Bộ môn Mạng máy tính & Truyền thông
  • 4. HTML LÀ GÌ?  Ngôn ngữ đánh dấu siêu văn bản (Hyper Text Markup Language)  Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994.  File HTML là 1 text file (file văn bản) có chứa các thẻ (tag) đánh dấu.  Thẻ - tag dùng để định dạng văn bản, và được hiển thị bởi trình duyệt Web (Web Browser)  Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp, kết quả hiển thị không đúng với dự định. 24/Oct/2009 4 Bộ môn Mạng máy tính & Truyền thông
  • 5. SOẠN THẢO TRANG HTML  Trang HTML có phần mở rộng (đuôi) là .HTM hoặc .HTML  Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào (Notepad, EditPlus, Turbo Pascal,…)  Có nhiều trình soạn thảo HTML cho phép NSD soạn thảo trực quan, kết quả sinh ra HTML tương ứng như:  Microsoft FrontPage  Macromedia Dreamweaver  … 24/Oct/2009 5 Bộ môn Mạng máy tính & Truyền thông
  • 6. CẤU TRÚC TÀI LIỆU HTML <html> <head> <title> Tieu de cua trang </title> </head> <body> Day la trang Web dau tien. <b> Day la doan van ban in dam</b> </body> </html> 24/Oct/2009 6 Bộ môn Mạng máy tính & Truyền thông
  • 7. CÁC THÀNH PHẦN HTML Thẻ - tag trong HTML  Dùng để định dạng tài liệu,  Tên thẻ không phân biệt ký tự HOA hay thường,  Thuộc tính của để bổ sung thêm thông tin cho nội dung,  Văn bản cần định dạng phải nằm giữa thẻ bắt đầu và thẻ kết thúc gọi là thành phần nội dung,  Thẻ có thể lồng vào trong thẻ khác, nhưng không có sự CHÉO lẫn nhau 24/Oct/2009 7 Bộ môn Mạng máy tính & Truyền thông
  • 8. CÁC THÀNH PHẦN HTML Thẻ - tag trong HTML  Dạng thẻ Thẻ đơn: chỉ có thẻ bắt đầu Ví dụ: <BR> <image src=“”> Thẻ kép: có thẻ bắt đầu và có thẻ kết thúc <B> Văn bản được in đậm</B> 24/Oct/2009 8 Bộ môn Mạng máy tính & Truyền thông
  • 9. CÁC THÀNH PHẦN HTML Địa chỉ tuyệt đối và địa chỉ tương đối  Địa chỉ tuyệt đối: địa chỉ đầy đủ đến 1 tài liệu trên Internet hay trong máy tính cục bộ. • VD : http://www.cit.ctu.edu.vn/thongbao.htm  Địa chỉ nền: địa chỉ bắt đầu của trang Web đó. • VD : <base href="http://www.cit.ctu.edu.vn/htmt_tt/">  Địa chỉ tương đối: địa chỉ được tính từ vị trí hiện tại của trang HTML hay tính từ địa chỉ nền (nếu có). • VD : <img src=“hinhnen/smile.gif"> • <a href=“./nextpage.htm"> Trang ke tiep </a> 24/Oct/2009 9 Bộ môn Mạng máy tính & Truyền thông
  • 10. CÁC THẺ CƠ BẢN  <html> : định nghĩa 1 trang Web  <head> : phần đầu của trang Web  <body> : phần thân của trang Web  <h1> ... <h6> : các đề mục kích thước từ 1 đến 6  <p> : một đoạn (paragraph)  <br> : xuống hàng  <hr> : vẽ 1 hàng ngang  <!-- --> : chú thích  Thuộc tính : align = “left / right / center” 24/Oct/2009 10 Bộ môn Mạng máy tính & Truyền thông
  • 11. CÁC THẺ CƠ BẢN 24/Oct/2009 11 Bộ môn Mạng máy tính & Truyền thông
  • 12. THẺ ĐỊNH DẠNG VĂN BẢN  <b> : in đậm  <code>: computer code  <u> : gạch dưới  <kbd>: keyboard  <i> : in nghiêng  <samp>: sample  <strong> : nhấn mạnh  <tt> : teletype text  <em> : làm nổi bật  <var> : variable  <big> : chữ lớn  <pre> : có dạng giống  <small> : chữ nhỏ như phần soạn thảo.  <sup> : chỉ số trên  <strike>, <s>, <del> :  <sub> : chỉ số dưới gạch giữa 24/Oct/2009 12 Bộ môn Mạng máy tính & Truyền thông
  • 13. CÁC THẺ CƠ BẢN 24/Oct/2009 13 Bộ môn Mạng máy tính & Truyền thông
  • 14. CÁC THẺ CƠ BẢN 24/Oct/2009 14 Bộ môn Mạng máy tính & Truyền thông
  • 15. CÁC THẺ CƠ BẢN Định dạng ký tự đặc biệt:  &nbsp; khoảng trắng  &quot; ký tự “  &lt; ký tự <  &copy; ký tự ©  &gt; ký tự >  &reg; ký tự ®  &amp; ký tự &  &yen; ký tự ¥ 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ẻ tạo liên kết:  Liên kết ngoài : <a href=“URL"> Text đại diện </a> ………………… ………………… ………………… Click ………………… ………………… chuột ………………… Text đại diện ………………… ………………… ………………… ………………… Trang có địa chỉ xác định từ URL Trang hiện tại 24/Oct/2009 16 Bộ môn Mạng máy tính & Truyền thông
  • 17. CÁC THẺ CƠ BẢN Ví dụ tạo liên kết ngoài: 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ẻ tạo liên kết (link):  Liên kết trong : • <a name=“TenViTri">Vi tri bat dau </a> • <a href=“#TenViTri"> Text đại diện </a> ………………… Vi tri bat dau Nội ………………… .…abcdefgh… Nội Text đại diện Click ...01234567… dung ………………… chuột .………………… dung trang ………………… .………………… trang khi ………………… .………………… khi chưa ………………… .………………… bấm Vi tri bat dau .………………… liên .…abcdefgh… .………………… liên kết ...01234567… .………………… kết .………………… 24/Oct/2009 18 Bộ môn Mạng máy tính & Truyền thông
  • 19. CÁC THẺ CƠ BẢN Ví dụ tạo liên kết trong: 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ẻ tạo liên kết(link):  Kết hợp liên kết ngoài và liên kết trong : <a name=“TenViTri">Vi tri bat dau </a> <a href=“URL#TenViTri"> Text đại diện </a> ………………… Vi tri bat dau ………………… ………………… .…abcdefgh… ………………… Click Nội ………………… ...01234567… Text đại diện chuột .………………… dung Vi tri bat dau ………………… .…abcdefgh… .………………… trang ...01234567… ………………… .………………… ………………… khi .………………… .………………… ………………… .………………… bấm Trang có địa chỉ .………………… liên xác định từ URL Trang hiện tại .………………… kết 24/Oct/2009 20 Bộ môn Mạng máy tính & Truyền thông
  • 21. CÁC THẺ CƠ BẢN Ví dụ tạo liên kết kết hợp ngoài - trong 24/Oct/2009 21 Bộ môn Mạng máy tính & Truyền thông
  • 22. CÁC THẺ CƠ BẢN Tạo liên kết (link) mở rộng  Mở thêm 1 trang mới từ liên kết <a href=“URL" target="_blank"> Text </a>  Đến 1 trang dưới dạng toàn trình duyệt <a href=“URL" target="_top"> Text </a>  Đến chương trình Mail Client : <a href=“mailto : xyz@abc.com“> Text </a>  Từ 1 hình ảnh <a href=“Url1“> <img src=“Url2”> </a> 24/Oct/2009 22 Bộ môn Mạng máy tính & Truyền thông
  • 23. CÁC THẺ CƠ BẢN Ví dụ tạo liên kết mở rộng 24/Oct/2009 23 Bộ môn Mạng máy tính & Truyền thông
  • 24. CÁC THẺ CƠ BẢN Thẻ Frame  Trình bày nhiều tài liệu HTML trong cùng 1 trang  Mỗi tài liệu HTML đó gọi là frame.  Mỗi frame sẽ độc lập với nhau.  Thẻ <frameset> dùng để chia màn hình ra nhiều frame, mỗi frame định nghĩa 1 tập các dòng,cột. • VD : <frameset cols="25%,75%"> • <frame src="frame_a.htm"> • <frame src="frame_b.htm"> • </frameset> 24/Oct/2009 24 Bộ môn Mạng máy tính & Truyền thông
  • 25. CÁC THẺ CƠ BẢN Ví dụ tạo Frame trong HTML 24/Oct/2009 25 Bộ môn Mạng máy tính & Truyền thông
  • 26. CÁC THẺ CƠ BẢN Thẻ Table  Một bảng được định nghĩa bởi thẻ <table>  Một bảng được chia làm nhiều dòng ( với thẻ <tr> )  Mỗi dòng được chia làm nhiều ô dữ liệu ( thẻ <td> )  Nội dung thông tin trong mỗi ô trong bảng :  Text, hình ảnh, đường thẳng(hr)  Danh sách (list)  Form  Table con, … 24/Oct/2009 26 Bộ môn Mạng máy tính & Truyền thông
  • 27. CÁC THẺ CƠ BẢN Ví dụ tạo table trong HTML 24/Oct/2009 27 Bộ môn Mạng máy tính & Truyền thông
  • 28. CÁC THẺ CƠ BẢN Ví dụ tạo table trong HTML 24/Oct/2009 28 Bộ môn Mạng máy tính & Truyền thông
  • 29. CÁC THẺ CƠ BẢN Table với ô dữ liệu trống 24/Oct/2009 29 Bộ môn Mạng máy tính & Truyền thông
  • 30. CÁC THẺ CƠ BẢN Table với thuộc tính border 24/Oct/2009 30 Bộ môn Mạng máy tính & Truyền thông