GIÁO TRÌNH HTML CƠ BẢN pptx

KHOA CNTT - TUD KHOA CNTT - TUD HTML HTML Trần Khải Hoàng Khoa CNTT – TỨD. ĐH Tôn Đức Thắng Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 2 Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 3 Giới thiệu HTML • HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản • File HTML là 1 file văn bản chứa các các thẻ đánh dấu • Các thẻ đánh dấu sẽ báo cho trình duyệt biết cách hiển thị trang HTML • File HTML phải có đuôi HTML hoặc HTM • File HTML có thể được tạo sử dụng 1 trình soạn thảo văn bản hoặc 1 trình soạn thảo HTML WYSIWYG (What You See Is What You Get) Ví dụ HTML • Mở notepad++, gõ đoạn văn bản sau và lưu lại dưới tên hello.html : • Để xem kết quả, nhấn đúp vào file hello.html <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. This text is bold </body> </html> Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 6 HTML Elements • HTML là văn bản bao gồm các HTML Element • HTML Element được đánh dấu bởi các HTML Tag • Mỗi tag có 1 tên, được bao giữa 2 kí tự < và > • Tag thường đi theo cặp. Ví dụ • Thẻ đầu tiên gọi là thẻ mở (), thẻ sau gọi là thẻ đóng () • Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Element • HTML tag không phân biệt hoa thường. giống Ví dụ về HTML Elements • Đây là 1 HTML Element • Trong đó : – b là tên thẻ đánh dấu bắt đầu và kết thúc element – Thẻ mở – Thẻ đóng – Nội dung của HTML Element là : This text is bold – Khi hiển thị trên trình duyệt : This text is bold – Mục đích của thẻ b là in đậm văn bản nằm trong nó This text is bold Ví dụ về HTML Tag (tt) • Đây cũng là 1 HTML Element • Trong đó – body là tên thẻ – Thẻ mở <body> , thẻ đóng </body> – Nội dung : – Mục đích thẻ body là chứa tất cả các Element nội dung trong trang HTML <body> This is my first homepage. This text is bold </body> This is my first homepage. This text is bold Chú ý Mặc dầu thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa. Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web ta sẽ sử dụng chữ thường cho tất cả các thẻ HTML [...]...Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 11 Cấu trúc trang HTML Title... đóng, thẻ mở) Thẻ br demo This is a paragraph with line breaks Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 23 HTML Attributes • Bên cạnh tên, HTML Tag có thể có thêm các thuộc tính Hello World Tên thuộc tính Thuộc tính element...  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 31 HTML Formats • HTML cung cấp nhiều thẻ dùng để định dạng văn bản • Có 2 loại thẻ chính : – Thẻ định dạng vật lý : là các thẻ chỉ định trình duyệt phải hiển thị đoạn văn bản như thế nào font to hay font nhỏ, đậm hay lợt, nghiêng hay bình thường – Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản. .. đoạn văn bản Trình duyệt tự do hiển thị theo cách của mình Thẻ định dạng vật lý Element Meaning Notes … … … In nghiêng In đậm Dạng máy đánh chữ … Gạch dưới Bị loại bỏ trong các phiên bản mới HTML và XHTML … Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML … Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML …... không theo chuẩn • Cấu trúc trang HTML đơn giản • Cấu trúc 1 trang HTML đơn giản không DOCTYPE Title here < /html> • Cách xem mã nguồn của 1 trang web : Click chuột phải , nhấn view source Thẻ html • Thẻ html là thẻ gốc phải có trong mọi trang HTML • Thẻ html chứa nhiều nhất 1 thẻ head... chương trình chỉnh sửa ảnh như Photoshop Dùng tính năng Eye Drop ( ) – Là web : Dùng add-on ColorZilla của Firefox (Download tại colorzilla.com) Sau khi install, click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu – Một cách khác là vào trang http://colorpicker.com Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML. .. http-equiv="content-type" content="text /html; charset=UTF-8" /> < /html> Thẻ DOCTYPE • Mọi trang HTML đều nên bắt đầu bằng 1 thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng • Trong ví dụ trên ta dùng XHTML 1.0 Transitional • DOCTYPE sẽ cho trình duyệt biết nên render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render... trọng nhất) • Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất • Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản Thẻ h demo • Trình duyệt sẽ tự động thêm dòng trống trước và sau 1 heading Heading... Heading Heading < /html> 1 2 3 4 5 6 Đoạn văn – Thẻ p • Thẻ p dùng để đánh dấu một đoạn văn (paragraph) • Trình duyệt sẽ tự động thêm 1 dòng trống trước và sau mỗi đoạn văn • Ví dụ This is a paragraph This is another paragraph Thẻ p demo This is a paragraph This is another paragraph < /html> Lưu ý • Nhớ đóng thẻ... đỏ Ví dụ HTML Attribute • Canh giữa heading My page • Giá trị align : – center : canh giữa – left : canh trái – right : canh phải Ví dụ HTML Attribute • Đặt màu nền và màu chữ cho trang web : Hello World • bgcolor qui định màu nền, text qui định màu chữ • Màu có thể là chữ (red,yellow) hoặc số (Ví dụ #FF0000, #FFFF00 ) HTML color . Link  HTML Image  HTML Table  Bài tập 2 Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML. < /html& gt; Nội dung  Giới thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 6 HTML. thiệu HTML  HTML Elements  HTML Basic Tags  HTML Attributes  HTML Formats  HTML Entitties  HTML Lists  HTML Link  HTML Image  HTML Table  Bài tập 11 Cấu trúc trang HTML <!DOCTYPE html