• Like
  • Save
Bài 2 - Ngôn ngữ HTML - Học lập trình web cơ bản với Html, Css, Javascript
Upcoming SlideShare
Loading in...5
×
 

Bài 2 - Ngôn ngữ HTML - Học lập trình web cơ bản với Html, Css, Javascript

on

  • 323,817 views

Mục tiêu : ...

Mục tiêu :
Tạo trang HTML
Các định dạng trang web
Sử dụng hình ảnh trong trang web
Tạo form và các điều khiển trong form trên trang web

Xem đầy đủ tại http://www.hoclaptrinhweb.com

Statistics

Views

Total Views
323,817
Views on SlideShare
5,043
Embed Views
318,774

Actions

Likes
27
Downloads
0
Comments
4

6 Embeds 318,774

http://forum.hoclaptrinhweb.com 318744
http://htmlcomponentservice.appspot.com 13
http://static.wix.com 12
http://webcache.googleusercontent.com 3
http:/ 1
http://violet.vn 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • có bác nào chỉ e tải với use free với
    Are you sure you want to
    Your message goes here
    Processing…
  • k cho tải = use free ak?
    Are you sure you want to
    Your message goes here
    Processing…
  • hay
    Are you sure you want to
    Your message goes here
    Processing…
  • s k down dc z?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Thời lượng : 10 tiết
  • Giáo viên chuyển sang môi trường Dreamweaver minh họa phần Ví dụ
  • Minhoa_Bai02_slide38.html
  • Minhoa_Bai02_slide44.html
  • Ghi chú : Giáo viên minh hoạ thêm cho thuộc tính type Phần mở rộng : các danh sách lồng vào nhau Thực đơn Buổi sáng Bánh canh cua Bún bò Huế Hủ tíếu Nam vang Buổi trưa Cá lóc kho Thịt kho trứng Mục xào sa tế Chiều tối Mì gói Bánh ướt
  • Phần mở rộng : phân nhóm trong danh sách Ví dụ : tạo điều khiển dạng ComboBox có phân nhóm Tin học cơ bản Tin học văn phòng Nhập môn lập trình Kỹ thuật lập trình

Bài 2 - Ngôn ngữ HTML - Học lập trình web cơ bản với Html, Css, Javascript Bài 2 - Ngôn ngữ HTML - Học lập trình web cơ bản với Html, Css, Javascript Presentation Transcript

  • 11HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/
  • 22HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Mục tiêuMục tiêu• Tạo trang HTML• Các định dạng trang web• Sử dụng hình ảnh trong trang web• Tạo form và các điều khiển trong formtrên trang web
  • 33HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 44HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− HTML (HyperText Markup Language)là một ngôn ngữ đánh dấu siêu văn− Sử dụng tập ký hiệu đánh dấu gọi là tag để thiết kế trang web,các tag này còn được gọi là Element− Là một chuẩn Internet do tổ chức W3C (World Wide WebConsortium) duy trì− Trang HTML được lưu với phần mở rộng là .htm hoặc .html− Để tạo các trang HTML, bạn có thể sử dụng bất kỳ chươngtrình soạn thảo văn bản nào, như Notepad, MS FrontPagehoặc Dreamweaver, Visual Studio 2010 …Bài 2: Ngôn ngữ HTMLGiới thiệu ngôn ngữ HTML
  • 55HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 66HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các thành phần trong trang HTMLCác thành phần trong trang HTML• Cấu trúc của trang HTML• Cú pháp chung của tag• Ví dụ
  • 77HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc của trang HTMLBài 2: Ngôn ngữ HTMLCác thành phần trong trang HTML<html><head><title> ... </title></head><body>Nội dung của trang web</body></html>Đầu trangĐầu trangThân trangThân trang
  • 88HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các thành phần trong trang HTMLCác thành phần trong trang HTML• Cấu trúc của trang HTML• Cú pháp chung của tag• Ví dụ
  • 99HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cú pháp chung của tag− Tag không có nội dung gọi là tag rỗng (empty tag) và cócú pháp như sau:Bài 2: Ngôn ngữ HTMLCác thành phần trong trang HTML<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” ... >Nội dung</Tên tag><Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” ... />
  • 1010HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cú pháp chung của tag− Các đặc điểm:• Tên tag không phân biệt chữ HOA/thường• Trình duyệt chỉ nhận 1 khoảng trắng trong Nội dung và bỏqua dấu ngắt xuống dòngBài 2: Ngôn ngữ HTMLCác thành phần trong trang HTMLVí dụ:<body><div align="center" style="font-style:italic; background-color:#FFFFCC; color:#0000FF“ >Công cha như núi Thái sơn <br>Nghĩa mẹ như nước trong nguồn chảy ra</div></body>
  • 1111HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các thành phần trong trang HTMLCác thành phần trong trang HTML• Cấu trúc của trang HTML• Cú pháp chung của tag• Ví dụ
  • 1212HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 1313HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 1414HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định nghĩa cấu trúc trang HTML− <html></html>: xác định phần bắt đầu và kết thúc củatrang HTML (HTML Document)− <head></head>: chứa các thông tin tổng quát về trangweb (meta-information) và không thể hiện trên cửa sổtrình duyệt.− <body></body>: nội dung chính của trang web, đượcthể hiện trong màn hình của trình duyệtBài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 1515HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 1616HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các tag tiêu đề - Headings− Dùng để định dạng khổ chữ có dạng tiêu đề (giống chứcnăng Style của MS Word)− Gồm các tag <h1>, <h2>, <h3>, <h4>, <h5>,<h6>− HTML sẽ tự động thêm một dòng trống vào trước và saudòng định dạng là headingBài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 1717HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các tag tiêu đề - HeadingsBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><h1>Đây là dòng heading 1</h1><h2>Đây là dòng heading 2</h2><h3>Đây là dòng heading 3</h3><h4>Đây là dòng heading 4</h4><h5>Đây là dòng heading 5</h5><h6>Đây là dòng heading 6</h6></body>
  • 1818HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 1919HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Phân đoạn - Paragraphs− Sử dụng tag <p> để phân biệt các đoạn văn bản− Tag <p> không cần tag đóng− HTML sẽ tự động thêm một dòng trắng trước và sauđoạn văn bảnBài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 2020HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Phân đoạn - ParagraphsBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><p>Một nhóm các nhà khoa học Australia tin rằng quá ít axit béoomega-3, có trong cá và hải sản, và quá nhiều axit béo omega-6, có trong dầuchế biến và quả hạch, sẽ gia tăng nguy cơ bị trầm cảm ở lứa tuổi dậy thì.<p>Gần 1.000 dân Sydney tuổi từ 14 đến 17 sẽ được chiêu mộ đểtham gia cuộc nghiên cứu tìm hiểu tác động của thức ăn đối với tâm trạng.Việc ăn ít hải sản cũng đã được xác định có liên quan tới sự gia tăng khả năngtrầm cảm ở người lớn. Nghiên cứu sẽ nhằm khẳng định nó tác động tới thiếuniên theo cách tương tự hay không.<p>... </body>
  • 2121HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 2222HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Ngắt dòng – Line Break− Sử dụng tag <br> để chuyển sang một dòng mới nhưngkhông kết thúc đoạn văn bản− Tag <br> không cần tag đóngBài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 2323HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Ngắt dòng – Line BreakBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><p align="center">Ai ơi bưng bát cơm đầy<br>Dẻo thơm một hạt đắng cay muôn phần<p align="center">Ăn quả nhớ kẻ trồng cây<br> Ăn khoai nhớ kẻ cho dây mà trồng</body>
  • 2424HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 2525HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tag <div> - Division− Dùng để định nghĩa một section riêng trong trang web− Có thể chứa các tag khác như tag <h1> đến <h6>,<p>, ...Bài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 2626HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tag <div> - DivisionBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><div align="center" style="color:red“ ><h2> Học Lập Trình Web</h2><h3>Học lập trình web từ cơ bản đến nâng cao</h2></div></body>
  • 2727HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 2828HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tag <hr> - Horizontal rule− Dùng để tạo ra một đường kẻ ngang− Thuộc tính size và width dùng để thay đổi độ rộng vàchiều dài đường kẻBài 2: Ngôn ngữ HTMLCác tag cơ bản
  • 2929HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tag <hr> - Horizontal ruleBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><div align="center" style="color:red"><h2> HocLapTrinhWeb.com</h2><h3> Học lập trình web cơ bản đến nâng cao</h3><hr width="200px" size="5px" color="red"></div></body>
  • 3030HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Các tag cơ bảnCác tag cơ bản• Định nghĩa cấu trúc trang HTML• Các tag tiêu đề - Headings• Phân đoạn - Paragraphs• Ngắt dòng – Line Break• Tag <div> - Division• Tag <hr> - Horizontal rule• Tag <!-- --> - Comment
  • 3131HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tag <!-- --> - Comment− Dùng để ghi chú trong trang HTML, nội dung trong phầnghi chú không được thể hiện trên trình duyệtBài 2: Ngôn ngữ HTMLCác tag cơ bảnVí dụ:<body><div align="center" style="color:red"><!-- hai dòng sau có màu đỏ --><h3> HocLapTrinhWeb.com</h3><h2 style="font-size:6px">Học lập trình web cơ bản đến nângcao</h2><div></body>
  • 3232HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 3333HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Định dạng trang HTMLĐịnh dạng trang HTML• Màu nền, màu chữ• Hình ảnh nền
  • 3434HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Sử dụng các thuộc tính của tag <body> để định dạngchung cho trang web. Phần định dạng gồm có:• Màu nền, màu chữ• Hình ảnh làm nền cho trang webBài 2: Ngôn ngữ HTMLĐịnh dạng trang HTML
  • 3535HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Màu nền, màu chữ− Thuộc tính bgcolor : tô màu nền− Thuộc tính text : tô màu chữBài 2: Ngôn ngữ HTMLĐịnh dạng trang HTMLVí dụ:<body bgcolor="#1CEE11" text="#F98504"><H1 align="center">Sunday</H1></body>
  • 3636HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Định dạng trang HTMLĐịnh dạng trang HTML• Màu nền, màu chữ• Hình ảnh nền
  • 3737HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hình ảnh nền− Thuộc tính backgroundBài 2: Ngôn ngữ HTMLĐịnh dạng trang HTMLVí dụ:<body text="#FF3399" background="heart.jpg"><H1 align="center">TUỔI THƠ CỦA BÉ ...</H1></body>
  • 3838HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hình ảnh nền− Thuộc tính Style kết hợp với các thông tin chi tiết, gồm:• background-image: khai báo tập tin hình ảnh• background-repeat: dạng lặp lại hình ảnh nền (no-repeat /repeat / repeat-x / repeat-y )• background-attachment: hình ảnh cuộn theo nội dung trangweb hay ở vị trí cố định (scroll / fixed)• background-position: xác định vị trí xuất hiện hình ảnh(bottom / center / left / right / top)Bài 2: Ngôn ngữ HTMLĐịnh dạng trang HTMLMinh họaMinh họa
  • 3939HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 4040HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Định dạng văn bảnĐịnh dạng văn bản• Các tag định dạng• Thuộc tính style
  • 4141HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các tag định dạng− <b></b> - bold : in đậm− <i></i> - italic : in nghiêng− <u></u> - underline : gạch dướiBài 2: Ngôn ngữ HTMLĐịnh dạng văn bảnVí dụ:<body ><b>Dòng in đậm </b> <br><i> Dòng in nghiêng </i> <br><u>Dòng gạch dưới </u></body>
  • 4242HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các tag định dạng− <sub></sub> - subscript : chữ dưới− <sup></sup> - superscript : chữ trên− <pre></pre> - preformatted: giữ nguyên định dạng trongtrang HTMLBài 2: Ngôn ngữ HTMLĐịnh dạng văn bảnVí dụ:<body><pre>ax<sup>2</sup> + bx + choặcH<sub>2</sub>O</pre></body>
  • 4343HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Định dạng văn bảnĐịnh dạng văn bản• Các tag định dạng• Thuộc tính style
  • 4444HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Thuộc tính style− font-size : khổ chữ− font-style : kiểu chữ− font-family : tên font chữ− font-weight : nét chữ ( đậm hoặc chọn kích thước)− color : màu chữ− text-decoration: gạch dưới, gạch trên, gạch bỏ hoặc bỏhết các định dạng− background-color: màu nền− border-color : màu đường viền− border-style : kiểu đường viềnBài 2: Ngôn ngữ HTMLĐịnh dạng văn bảnMinh họaMinh họa
  • 4545HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 4646HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Hiển thị các ký tự đặc biệtHiển thị các ký tự đặc biệt− Các ký tự đặc biệt: <, >, &, ©, ®, ...− HTML cung cấp các giá trị đặc biệt tương ứng với cácký tự này− Có 3 thành phần để tạo ra ký tự đặc biệtVí dụ: &copy; hoặc &#169;  ©Dấu &Tên đại diệnDấu ;
  • 4747HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 4848HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Hình ảnh - ImagesHình ảnh - Images• Chèn hình ảnh vào trang web• Định dạng hình ảnh
  • 4949HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn hình ảnh vào trang web− Dùng tag <img> và thuộc tính src để khai báo URLchứa tập tin hình ảnh− Thuộc tính alt : xuất câu thông báo nếu tập tin hìnhkhông tồn tạiBài 2: Ngôn ngữ HTMLHình ảnh - ImagesVí dụ:<body><p><img src="tomcang.jpg" alt="Hình con tôm càng">Tôm là món hải sảncó vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chếbiến xong món tôm rất ngon này.</body>
  • 5050HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Hình ảnh - ImagesHình ảnh - Images• Chèn hình ảnh vào trang web• Định dạng hình ảnh
  • 5151HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định dạng hình ảnh− width, height: độ rộng và chiều cao hình, tính bằng pixel(mặc định) hoặc %.− align: định vị trí xuất hiện của hình so với đọan văn bảnmột cách tương đối (left, right, … )Bài 2: Ngôn ngữ HTMLHình ảnh - ImagesVí dụ:<body><p><img src="tomcang.jpg" alt="Hình con tôm càng“align="right" width="100"height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cầnmươi phút là có thể chế biến xong món tôm rất ngon này.</body>
  • 5252HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 5353HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Danh sách - ListsDanh sách - Lists• Tạo danh sách có thứ tự - Ordered Lists• Tạo danh sách không có thứ tự - Unordered List• Thay đổi ký hiệu đầu dòng trong danh sách
  • 5454HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo danh sách có thứ tự - Ordered Lists− Dùng tag <li> kết hợp với tag <ol>, cú pháp như sau:Bài 2: Ngôn ngữ HTMLDanh sách - Lists<ol><li> ..... </li><li> ..... </li>...</ol>Ví dụ:<body><h3 style="color:#663333">Thực đơn giải khát </h3><ol><li> Cafe đá </li><li> Coca cola </li><li> Chanh muối </li></ol></body>
  • 5555HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Danh sách - ListsDanh sách - Lists• Tạo danh sách có thứ tự - Ordered Lists• Tạo danh sách không có thứ tự - Unordered List• Thay đổi ký hiệu đầu dòng trong danh sách
  • 5656HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo d.sách không có thứ tự - UnOrdered Lists− Dùng tag <li> kết hợp với tag <ul>, cú pháp như sau:Bài 2: Ngôn ngữ HTMLDanh sách - Lists<ul><li> ..... </li><li> ..... </li>...</ul>Ví dụ:<body><h3 style="color:#663333">Thực đơn giải khát </h3><ul><li> Cafe đá </li><li> Coca cola </li><li> Chanh muối </li></ul></body>
  • 5757HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Danh sách - ListsDanh sách - Lists• Tạo danh sách có thứ tự - Ordered Lists• Tạo danh sách không có thứ tự - Unordered List• Thay đổi ký hiệu đầu dòng trong danh sách
  • 5858HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Thay đổi ký hiệu đầu dòng trong danh sách− Thuộc tính type của tag <ul> và <ol>, bảng giá trị nhưsau:Bài 2: Ngôn ngữ HTMLDanh sách - Lists
  • 5959HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 6060HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Liên kết - LinksLiên kết - Links• Liên kết đến một trang web• Liên kết trong cùng một trang• Liên kết đến địa chỉ email
  • 6161HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Liên kết đến một trang− tag <a> kết hợp với thuộc tính href (Hyperlink Reference)Bài 2: Ngôn ngữ HTMLLiên kết - Links<a href = "địa chỉ URL" > Nội dung tag </a>Ví dụ:<body>Click vào đây để chuyển đến trang<a href="http://www.hoclaptrinhweb.com">Tự học web</a></body>
  • 6262HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Liên kết - LinksLiên kết - Links• Liên kết đến một trang web• Liên kết trong cùng một trang• Liên kết đến địa chỉ email
  • 6363HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Liên kết trong cùng một trang− Đánh dấu vị trí cần chuyển đến: dùng thuộc tính name− Dùng tag <a> và thuộc tính href để tạo liên kết đếnBài 2: Ngôn ngữ HTMLLiên kết - Links<a name="#<tên bookmark> "> Nội dung tag </a>Ví dụ:<body><a name="#dautrang">Phần đầu trang</a><p>....<p>Nội dung trang web<p>....<p><a href="#dautrang">Về đầu trang</a></body>
  • 6464HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Liên kết - LinksLiên kết - Links• Liên kết đến một trang web• Liên kết trong cùng một trang• Liên kết đến địa chỉ email
  • 6565HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Liên kết đến địa chỉ emailBài 2: Ngôn ngữ HTMLLiên kết - Links<a href=“mailto:Địa chỉ email"> Nội dung tag </a>Ví dụ:<body><a href="mailto:webhoclaptrinh@gmail.com"> Liên hệ</a></body>
  • 6666HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 6767HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bảng biểu - TablesBảng biểu - Tables• Tạo bảng biểu• Trộn dòng, cột trong Table• Định dạng Table
  • 6868HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo bảng biểu− Bộ tag <table>, <tr>(table row) và <td> (table data)Bài 2: Ngôn ngữ HTMLBảng biểu - Tables<table><tr> <td> nội dung </td> <td> nội dung </td> </tr><tr> <td> nội dung </td> <td> nội dung </td> </tr>… … … …</table>
  • 6969HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo bảng biểuBài 2: Ngôn ngữ HTMLBảng biểu - TablesVí dụ:<body><table border="1"><tr><td>Dòng 1, cột 1</td><td>Dòng 1, cột 2</td></tr><tr><td>Dòng 2, cột 1</td><td>Dòng 2, cột 2</td></tr></table></body>
  • 7070HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo bảng biểuBài 2: Ngôn ngữ HTMLBảng biểu - TablesVí dụ:<body><table border="1" width="500"><tr><td width="300">Dòng 1, cột 1</td><td width="200">Dòng 1, cột 2</td></tr><tr><td>Dòng 2, cột 1</td><td>Dòng 2, cột 2</td></tr></table></body>
  • 7171HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bảng biểu - TablesBảng biểu - Tables• Tạo bảng biểu• Trộn dòng, cột trong Table• Định dạng Table
  • 7272HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Trộn dòng, cột trong Table− colspan: kết hợp nhiều cột thành một cột− rowspan: kết hợp nhiều dòng thành một dòng− width : độ rộng của dòng, cột− height : chiều cao của dòng, cộtBài 2: Ngôn ngữ HTMLBảng biểu - TablesVí dụ: trộn cột<body><table border="1" width="500"><tr> <td width="20%" >Tên</td><td colspan="2" >Phạm Ngọc Thiên Thanh</td></tr>…</table></body>
  • 7373HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Trộn dòng, cột trong TableBài 2: Ngôn ngữ HTMLBảng biểu - TablesVí dụ: trộn dòng<body><table border="1" width="500"><tr> <td width="50%" >Tên </td> <td> Điện thoại </td> </tr><tr> <td rowspan="2"> Phạm Ngọc Thiên Thanh </td><td> 8351056 </td> </tr> <tr> <td> 0909039999 </td> </tr></table></body>
  • 7474HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bảng biểu - TablesBảng biểu - Tables• Tạo bảng biểu• Trộn dòng, cột trong Table• Định dạng Table
  • 7575HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định dạng TableSử dụng các thuộc tính của tag <table>− Tạo khoảng cách giữa các cell• cellpadding: khoảng cách từ biên của cell tới nội dungtrong cell• cellspacing: khoảng cách giữa các cellBài 2: Ngôn ngữ HTMLBảng biểu - Tables
  • 7676HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định dạng TableSử dụng các thuộc tính của tag <table>− Tạo khoảng cách giữa các cellBài 2: Ngôn ngữ HTMLBảng biểu - TablesDòng 1, cột 1 Dòng 1, cột 2 Dòng 1, cột 3… … …CellsapcingCellpadding
  • 7777HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định dạng TableSử dụng các thuộc tính của tag <table>− Tạo tiêu đề, canh lề và tô màu nền cho table• Tag <caption>: tạo tiêu đề, phải đặt ngay sau tag <table>• align : canh lề cho table• bgcolor : tô màu nền• background : hình làm nềnBài 2: Ngôn ngữ HTMLBảng biểu - Tables
  • 7878HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Định dạng TableSử dụng các thuộc tính của tag <table>− Tạo đường viền• border : độ rộng của đường viền• bordercolor : màu đường viềnBài 2: Ngôn ngữ HTMLBảng biểu - TablesVí dụ:<body><table align="center" cellspacing="5" cellpadding="15" border="5"width="500" bgcolor="#DFFDC4" bordercolor="#0E721F"><caption style="font-weight:bold; font-size:18px"> Thông tin cánhân</caption><tr><td width="60%" align="center">Tên</td><td align="center">Điện thoại</td></tr><tr><td rowspan="2">Phạm Ngọc Thiên Thanh</td><td >8351056</td></tr><tr><td >0909039999</td></tr></table></body>
  • 7979HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML1. Giới thiệu ngôn1. Giới thiệu ngônngữ HTMLngữ HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML2. Các thành phần2. Các thành phầnTrong trang HTMLTrong trang HTML 3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản3. Các tag cơ bản4. Định dạng4. Định dạngtrang HTMLtrang HTML4. Định dạng4. Định dạngtrang HTMLtrang HTML5. Định dạng5. Định dạngvăn bảnvăn bản5. Định dạng5. Định dạngvăn bảnvăn bản6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt6. Hiển thị các6. Hiển thị cácký tự đặc biệtký tự đặc biệt7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image7. Hình ảnh-Image 8. Danh sách-List8. Danh sách-List8. Danh sách-List8. Danh sách-List 9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links9. Liên kết-Links10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table10. Bảng biểu-Table 11. Form và các11. Form và cácđiều khiểnđiều khiển11. Form và các11. Form và cácđiều khiểnđiều khiển
  • 8080HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Form và các điều khiển trên formForm và các điều khiển trên form• Tạo form• Các điều khiển cơ bản – Tag <input>• Một số điều khiển khác• Các sự kiện cơ bản• Xử lý hiển thị kết quả lên trang web
  • 8181HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Tạo form− Dùng bộ tag sau:Bài 2: Ngôn ngữ HTMLForm và các điều khiển trên form<form name="tên form" ><input ><select></select><textarea></textarea>...</form>Các tag tạora điều khiểntrên form
  • 8282HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Form và các điều khiển trên formForm và các điều khiển trên form• Tạo form• Các điều khiển cơ bản – Tag <input>• Một số điều khiển khác• Các sự kiện cơ bản• Xử lý hiển thị kết quả lên trang web
  • 8383HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các điều khiển cơ bản− Tag <input> : tạo các điều khiển TextFields, Button, …• type : xác định loại điều khiểnBài 2: Ngôn ngữ HTMLForm và các điều khiển trên form<input type=“loại điều khiển” name=“tên điều khiền” value=“giátrị” id=”định danh”>
  • 8484HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các điều khiển cơ bảnBài 2: Ngôn ngữ HTMLForm và các điều khiển trên formVí dụ:<body><form name="nhap" ><table><tr><td>Mã đăng nhập</td><td><input type="text" name="ma" value=""></td></tr><tr><td>Mật khẩu</td><td><input type="text" name="matkhau" value=""></td></tr><tr><td colspan="2" align="center"><input type="submit" name="dn" value="Đăng nhập"></td></tr></table></form></body>
  • 8585HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Form và các điều khiển trên formForm và các điều khiển trên form• Tạo form• Các điều khiển cơ bản – Tag <input>• Một số điều khiển khác• Các sự kiện cơ bản• Xử lý hiển thị kết quả lên trang web
  • 8686HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số điều khiển khác− Nhãn – tag <label>: có khả năng liên quan đến một điềukhiển khác (tag <input>)• for : liên kết với điều khiển khácBài 2: Ngôn ngữ HTMLForm và các điều khiển trên formVí dụ:<body><p>Nhấn chuột vào "Nam" hoặc "Nữ" để chọn giới tính<br><input type="radio" name="phai" id="nam“ checked=“checked” /><label for="nam"> Nam</label><br /><input type="radio" name="phai" id="nu" /><label for="nu"> Nữ</label></body>
  • 8787HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số điều khiển khác− Vùng nhập liệu – tag <textarea>: giống Text fieldsnhưng cho phép nhập trên nhiều dòng• Cols : xác định số ký tự trên 1 dòng• Rows: xác định số dòng nhìn thấy trên điều khiểnBài 2: Ngôn ngữ HTMLForm và các điều khiển trên formVí dụ:<body><form name="nhap" >Lý lịch:<textarea cols="50" rows="5"> </textarea></form></body>
  • 8888HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số điều khiển khác− Drop-down List – tag <select>: có dạng ComboBox hoặcListBoxBài 2: Ngôn ngữ HTMLForm và các điều khiển trên form<select id=" … " ><option value=" … " selected="selected" >Mục chọn 1</option><option value=" … "> Mục chọn 2 </option><option value=" … "> Mục chọn 3 </option>…</select>
  • 8989HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số điều khiển khác− Drop-down List – tag <select>: có dạng ComboBox hoặcListBoxBài 2: Ngôn ngữ HTMLForm và các điều khiển trên formVí dụ: tạo điều khiển dạng ComboBox<body><select id="momhoc"><option value="1" selected="selected"> Lập trình web1 </option><option value="2"> Lập trình web2 </option><option value="3"> Đồ án thực tế </option></select></body>
  • 9090HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số điều khiển khác− Drop-down List – tag <select>: có dạng ComboBox hoặcListBoxBài 2: Ngôn ngữ HTMLForm và các điều khiển trên formVí dụ: tạo điều khiển dạng ListBox<body><p>Hãy chọn phim mà bạn yêu thích, được phép chọn nhiều phim </p><select id="phim" size ="5" multiple="multiple" style="width:200"><option value="1" selected="selected">Anh hùng xạ điêu</option><option value="2">Thập diện mai phục </option><option value="3">Báu vật hoàng cung</option><option value="4">Anh em nhà bác sĩ</option><option value="5">Ông bà Smith</option><option value="6">Mùa đu đủ xanh</option></select></body>
  • 9191HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Form và các điều khiển trên formForm và các điều khiển trên form• Tạo form• Các điều khiển cơ bản – Tag <input>• Một số điều khiển khác• Các sự kiện cơ bản• Xử lý hiển thị kết quả lên trang web
  • 9292HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các sự kiện cơ bản− onload: xảy ra khi trang HTML được load, áp dụng chotag <body> và <frameset>− onclick: xảy ra khi nhấn chuột lên điều khiển, thường ápdụng cho các nút nhấn− onchange: xảy ra khi thay đổi giá trị của điều khiển,thường áp dụng cho điều khiển Drop-down List.Bài 2: Ngôn ngữ HTMLForm và các điều khiển trên form
  • 9393HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Form và các điều khiển trên formForm và các điều khiển trên form• Tạo form• Các điều khiển cơ bản – Tag <input>• Một số điều khiển khác• Các sự kiện cơ bản• Xử lý hiển thị kết quả lên trang web
  • 9494HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Xử lý hiển thị kết quả lên trang web− Thường dùng tag <div> hoặc <label>, có 2 thuộc tính cơbản dùng để hiển thị kết quả:• innerText : không nhận dạng chuỗi tag HTML có trong nộidung xuất raLưu ý: FireFox không hiểu thuộc tính innerText• innerHTML: nhận dạng chuỗi tag HTMLVí dụ: dùng innerText<body><form name="nhap" ><label id="cauchao" style="color:#FF0000"> </label><p><input type="button" name="kt" value="Kết thúc"onClick="cauchao.innerText=Chúc mừng các bạn đã kết thúc bài học về<b><u>form</u></b> "><form name="nhap" ></body>Bài 2: Ngôn ngữ HTMLForm và các điều khiển trên formClickClick
  • 9595HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Xử lý hiển thị kết quả lên trang web− Thường dùng tag <div> hoặc <label>, có 2 thuộc tính cơbản dùng để hiển thị kết quả:Ví dụ: dùng innerHTML<body><form name="nhap" ><label id="cauchao" style="color:#FF0000"> </label><p><input type="button" name="kt" value="Kết thúc"onClick="cauchao.innerHTML=Chúc mừng các bạn đã kết thúc bài học về<b><u>form</u></b> "><form name="nhap" ></body>Bài 2: Ngôn ngữ HTMLForm và các điều khiển trên formClickClick
  • 9696HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bài 2: Ngôn ngữ HTMLHẾTHẾT