Bài 3: HTML Cơ bản

1LẬP TRÌNH ỨNG DỤNG MẠNG Bài 3: HTML Cơ Bản ThS.Nguyễn Hữu Thể Lập trình ứng dụng mạng 2 Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các thẻ HMTL cơ bản Lập trình ứng dụng mạng 3 1. HTML − HTML là một ngôn ngữ để mô tả các trang web.
HTML là viết tắt của Hyper Text Markup Language
HTML không phải là một ngôn ngữ lập trình, nó là một ngôn ngữ đánh dấu
Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu (markup tags)
HTML sử dụng thẻ đánh dấu để mô tả các trang web Lập trình ứng dụng mạng 4 HTML - Trình soạn thảo − Nodepad, Notepad++, FrontPage, Eclipse, Macromedia Dreamweaver,… Lập trình ứng dụng mạng 5 HTML - Trình soạn thảo Lập trình ứng dụng mạng 6 Tải trình soạn thảo, Web server − Eclipse for PHP:
developers/heliosr Lập trình ứng dụng mạng 7 Tải trình soạn thảo, Web server − Web server: Xampp

Lập trình ứng dụng mạng 8 HTML – Trang web đầu tiên Lập trình ứng dụng mạng 9 2. Cấu trúc 1 tài liệu HTML Bắt đầu và Kết thúc của trang HTML Phần đầu trang HTML Nội dung trang HTML Tiêu đề Nội dung 1 Nội dung 2 Nội dung 3 Lập trình ứng dụng mạng 10 3. Các thẻ HMTL cơ bản
HTML Headings
HTML Paragraphs
HTML Links
HTML Images
HTML Elements
HTML Attributes
HTML Lines
HTML Comments
HTML Line Breaks
HTML Tags Formatting
HTML Fonts
HTML Styles
HTML Style Attribute
HTML Style - Font, Color, Size
HTML Style - Text Alignment Lập trình ứng dụng mạng 11 3. Các thẻ HMTL cơ bản
HTML Links
HTML Hyperlinks (Links)
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Frames
HTML Iframes
HTML Colors Lập trình ứng dụng mạng 12 HTML Headings − Định nghĩa với các thẻ từ đến . Lập trình ứng dụng mạng 13 HTML Paragraphs − Định nghĩa với thẻ . Tài liệu HTML được chia thành các đoạn (paragraphs). Lập trình ứng dụng mạng 14 HTML Links − HTML links được định nghĩa với thẻ Lập trình ứng dụng mạng 15 HTML Images − HTML images được định nghĩa với các thẻ Lập trình ứng dụng mạng 16 HTML Elements − Các tài liệu HTML được định nghĩa bởi phần tử HTML (elements). − Một phần tử HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc: − Thẻ bắt đầu được gọi là thẻ mở. − Thẻ kết thúc được gọi là thẻ đóng. Lập trình ứng dụng mạng 17 Cú pháp HTML Element − Một phần tử HTML bắt đầu với một thẻ tag mở − Một phần tử HTML kết thúc với một thẻ tag đóng − Các phần tử nội dung là tất cả mọi thứ giữa thẻ bắt đầu và thẻ kết thúc − Một số phần tử HTML có nội dung rỗng − Phần tử rỗng được đóng trong thẻ bắt đầu − Hầu hết các phần tử HTML đều có các thuộc tính Lập trình ứng dụng mạng 18 Các thẻ HTML lồng nhau − Các thẻ HTML có thể được lồng nhau. − Tài liệu HTML bao gồm các thẻ HTML lồng nhau. − Thẻ bắt đầu là và kết thúc là . − Thẻ là thân (body) của các tài liệu HTML. Nội dung sẽ hiển thị ra trình duyệt web, nhìn thấy được nội dung. − Thẻ xác định toàn bộ tài liệu HTML, bắt buộc phải có. Lập trình ứng dụng mạng 19 Các phần tử HTML rỗng − Các phần tử HTML không có nội dung:
Gọi là các phần tử rỗng (empty elements).
là một thẻ rỗng, không có thẻ đóng (thẻ dùng để xuống dòng). − Lưu ý: nên sử dụng Tags chữ thường. Lập trình ứng dụng mạng 20 Các thuộc tính trong thẻ HTML − Các thẻ HTML có thể có các thuộc tính − Các thuộc tính cung cấp thêm thông tin về một phần tử − Các thuộc tính luôn được xác định trong thẻ mở − Các thuộc tính trong name/value có dạng như: name="value" − Liên kết được định nghĩa với thẻ . − Địa chỉ liên kết được quy định trong thuộc tính href. Lập trình ứng dụng mạng 21 HTML Attributes − Danh sách thuộc tính được chuẩn hóa cho hầu hết các thẻ HTML: − (Xem chi tiết trong phần phụ lục) Lập trình ứng dụng mạng 22 HTML Lines − Thẻ tạo ra một dòng ngang trong một trang HTML. Lập trình ứng dụng mạng 23 HTML Comments − Được chèn vào trong mã HTML để ghi chú. − Comments được bỏ qua bởi trình duyệt, không hiển thị. Lập trình ứng dụng mạng 24 HTML Line Breaks − Thẻ dùng để ngắt dòng (xuống dòng mới) Lập trình ứng dụng mạng 25 Formatting HTML Tags − Thẻ , dùng định dạng văn bản in đậm hoặc in nghiêng. − Các thẻ HTML được gọi là thẻ định dạng (formatting tags). − Thẻ tương tự , và tương tự . Lập trình ứng dụng mạng 26 Formatting HTML Tags Lập trình ứng dụng mạng 27 Formatting HTML Tags − Ví dụ: văn bản định dạng sẵn (Preformatted text). Kiểm soát ngắt dòng và khoảng trắng với thẻ . Lập trình ứng dụng mạng 28 Formatting HTML Tags − Ví dụ: Viết tắt và từ viết tắt (Abbreviations and acronyms) Lập trình ứng dụng mạng 29 HTML Text Formatting Tags Lập trình ứng dụng mạng 30 HTML Citations, Quotations, Definition Tags Lập trình ứng dụng mạng 31 HTML Fonts − Thẻ dùng định nghĩa font chữ cho văn bản. Lập trình ứng dụng mạng 32 Style sheets − Nên sử dụng style sheets (CSS) để định dạng font chữ. Lập trình ứng dụng mạng 33 Style sheets − Thiết lập kích thước font chữ của văn bản Lập trình ứng dụng mạng 34 Style sheets − Thiết lập màu chữ của văn bản Lập trình ứng dụng mạng 35 HTML Styles - CSS − CSS được sử dụng để định dạng kiểu cho các phần tử HTML. Lập trình ứng dụng mạng 36 Tạo kiểu tài liệu HTML với CSS − CSS có thể được thêm vào HTML theo các cách:
Trong các file separate style sheet (file CSS)
Trong các style element trong phần đầu HTML
Trong các style attribute trong các thẻ HTML Lập trình ứng dụng mạng 37 Sử dụng các thuộc tính Style HTML − Sử dụng thuộc tính CSS lồng vào các thẻ HTML. Lập trình ứng dụng mạng 38 Sử dụng các thuộc tính Style HTML − Thuộc tính background-color mới làm cho thuộc tính bgcolor cũ lỗi thời. Lập trình ứng dụng mạng 39 HTML Style - Font, Color và Size − Các thuộc tính font-family, color và font-size xác định font chữ, màu sắc và kích thước của văn bản Lập trình ứng dụng mạng 40 HTML Style - Text Alignment − Thuộc tính text-align canh lề văn bản theo chiều ngang Lập trình ứng dụng mạng 41 HTML Style - Text Alignment − Thuộc tính text-align làm cho thẻ cũ lỗi thời Lập trình ứng dụng mạng 42 Các thẻ và thuộc tính bị phản đối − Trong HTML 4, nhiều thẻ và thuộc tính bị phản đối (deprecated). − Nó sẽ không được hỗ trợ trong phiên bản tương lai của HTML. Lập trình ứng dụng mạng 43 HTML Links − Giúp người dùng nhấp chuột để đi từ trang này sang trang khác. Lập trình ứng dụng mạng 44 HTML Hyperlinks (Links) − Một siêu liên kết (hoặc liên kết) là :
một từ, nhóm từ, hoặc hình ảnh
có thể click vào để chuyển đến một tài liệu mới hoặc một phần mới trong phạm vi các tài liệu hiện hành. − Khi ta di chuyển con trỏ trên một liên kết trong một trang Web, mũi tên sẽ biến thành một bàn tay nhỏ. − Liên kết được quy định bằng thẻ . − Thẻ có thể sử dụng trong hai cách: 1. Tạo một liên kết đến tài liệu khác, sử dụng thuộc tính href 2. Tạo một đánh dấu trang trong một tài liệu, sử dụng thuộc tính name Lập trình ứng dụng mạng 45 Cú pháp HTML Link − Mã lệnh HTML cho một liên kết đơn giản. Nó có dạng như sau: − Thuộc tính href xác định điểm đến của một liên kết. Ví dụ − Kết quả: Visit W3Schools − Nhấp vào liên kết Visit W3Schools sẽ liên kết đến trang W3Schools. Lập trình ứng dụng mạng 46 HTML Links – Thuộc tính target −Cú pháp : Linked content −Thuộc tính target của tag
name: tải trang web vào frame có tên NAME
_blank: tải trang web vào cửa sổ mới
_parent: tải trang web vào cửa sổ cha của nó
_self: tải trang web vào chính cửa sổ hiện hành
_top: tải trang web vào cửa số cao nhất −Ví dụ : Lập trình ứng dụng mạng 47 HTML Links – Thuộc tính target − Các thuộc tính target xác định nơi để mở tài liệu liên quan. − Ví dụ: mở tài liệu trong một cửa sổ trình duyệt mới hay một tab mới: Lập trình ứng dụng mạng 48 HTML Links – Thuộc tính name − Sử dụng để đánh dấu trang (bookmark) trong một tài liệu HTML.  Lưu ý:
HTML5 sử dụng thuộc tính id thay vì thuộc tính name để chỉ định tên của một neo (anchor). Thuộc tính id cũng hoạt động trong HTML4.
Bookmarks không được hiển thị, nó vô hình với người đọc.  Ví dụ: − Một anchor được đặt tên trong một tài liệu HTML: − Tạo một liên kết đến "Useful Tips Section" trong cùng một tài liệu: − Hoặc tạo ra một liên kết đến "Useful Tips Section" từ một trang khác: Lập trình ứng dụng mạng 49 Ví dụ − Tạo một liên kết bằng hình ảnh Lập trình ứng dụng mạng 50 Ví dụ: Liên kết với một vị trí trên cùng một trang Lập trình ứng dụng mạng 51 HTML Images − Chèn hình ảnh vào tài liệu HTML Lập trình ứng dụng mạng 52 HTML Images − Chèn hình ảnh động vào tài liệu HTML Lập trình ứng dụng mạng 53 HTML Images − Chèn hình ảnh từ địa chỉ trang web khác vào tài liệu HTML Lập trình ứng dụng mạng 54 HTML Images − Canh lề hình ảnh trong văn bản Lập trình ứng dụng mạng 55 HTML Images − Tạo một liên kết bằng hình ảnh Lập trình ứng dụng mạng 56 HTML Images − Tạo hình ảnh bản đồ, mỗi khu vực là một hyperlink Lập trình ứng dụng mạng 57 HTML Image Tags Lập trình ứng dụng mạng 58 HTML Tables − Tables được định nghĩa với thẻ − Một table được chia thành:
Các dòng (với thẻ ),
Mỗi dòng được chia thành các ô (với thẻ ).
td là viết tắt của "table data". Lập trình ứng dụng mạng 59 HTML Tables Lập trình ứng dụng mạng 60 HTML Tables - Border − Nếu không chỉ định thuộc tính border, table sẽ hiển thị mà không có border. Lập trình ứng dụng mạng 61 HTML Tables - Border Lập trình ứng dụng mạng 62 HTML Tables - th Lập trình ứng dụng mạng 63 HTML Tables - Caption − Table với chú thích (caption) Lập trình ứng dụng mạng 64 HTML Tables – tách + trộn dòng cột Lập trình ứng dụng mạng 65 HTML Tables – Cell padding − Tạo không gian trống giữa nội dung trong cell với border. Lập trình ứng dụng mạng 66 HTML Tables – Cell spacing − Sử dụng cellspacing để tăng khoảng cách giữa các cell. Lập trình ứng dụng mạng 67 HTML Tables – frame − Kiểm soát border quanh table. Lập trình ứng dụng mạng 68 HTML Table Tags Lập trình ứng dụng mạng 69 HTML Lists − Gồm danh sách được sắp xếp có thứ tự và không có thứ tự HTML Unordered list: danh sách không có thứ tự
Bắt đầu với thẻ .
Mỗi mục danh sách bắt đầu với thẻ .
Các mục danh sách được đánh dấu bullets (hình tròn nhỏ). Lập trình ứng dụng mạng 70 HTML Ordered list − Danh sách có thứ tự bắt đầu với thẻ .
Mỗi mục trong danh sách bắt đầu với thẻ .
Các mục danh sách được đánh dấu bằng con số. Lập trình ứng dụng mạng 71 HTML Definition Lists − Thẻ định nghĩa một danh sách tự định nghĩa. − Thẻ sử dụng kết hợp với:
(định nghĩa các mục trong danh sách)
(mô tả các mục trong danh sách): Lập trình ứng dụng mạng 72 HTML Forms − Truyền dữ liệu đến một máy chủ. − Form có thể chứa các thành phần đầu vào như: text fields, checkboxes, radio-buttons, submit buttons,... − Form cũng có thể chứa các thành phần: select lists, textarea, fieldset, legend, label. Lập trình ứng dụng mạng 73 HTML Forms and Input − Sử dụng để người dùng nhập kiểu dữ liệu đầu vào cho trang web. Text field: người dùng có thể viết văn bản trong một text field. Lập trình ứng dụng mạng 74 HTML Forms - The Input Element − Thành phần quan trọng nhất của form là input − input được sử dụng để chọn thông tin người dùng. − Thành phần input: textfield, checkbox, password, radio button,… Text Fields Lập trình ứng dụng mạng 75 HTML Forms - The Input Element Password Field Lập trình ứng dụng mạng 76 HTML Forms - The Input Element Radio Buttons Lập trình ứng dụng mạng 77 HTML Forms - The Input Element Checkboxes Lập trình ứng dụng mạng 78 HTML Forms - The Input Element Submit Button – Gửi form dữ liệu đến một máy chủ. – Dữ liệu được gửi đến trang được quy định trong thuộc tính action – file trong thuộc tính action sẽ xử lý các dữ liệu input nhận được Lập trình ứng dụng mạng 79 HTML Forms - The Input Element Drop-down list đơn giản Lập trình ứng dụng mạng 80 HTML Forms - The Input Element Drop-down list với giá trị chọn sẵn Lập trình ứng dụng mạng 81 HTML Forms - The Input Element Textarea: tạo điều khiển nhập liệu văn bản gồm nhiều dòng. Lập trình ứng dụng mạng 82 HTML Forms - The Input Element Button: tạo ra một nút Lập trình ứng dụng mạng 83 HTML Frames − Frames: giúp hiển thị nhiều trang HTML trong cùng một cửa sổ trình duyệt. − Mỗi trang HTML gọi là một frame, mỗi frame độc lập với những frame khác. − Khó khăn:
Frames không được hỗ trợ trong phiên bản tương lai của HTML.
Frames khó sử dụng (in toàn bộ trang là rất khó khăn).
Các nhà phát triển web phải theo dõi nhiều trang HTML. Lập trình ứng dụng mạng 84 HTML Frames Vertical frameset: khung thẳng đứng với ba trang khác nhau. Lập trình ứng dụng mạng 85 HTML Frames Horizontal frameset: khung ngang với ba trang khác nhau. Lập trình ứng dụng mạng 86 HTML Frames Nested framesets: ba file kết hợp trong các dòng và cột. Lập trình ứng dụng mạng 87 HTML Frames - Navigation frame − Tạo frame điều hướng chứa danh sách liên kết với frame thứ hai. − File là "tryhtml_contents.htm" chứa ba liên kết: − Frame thứ hai sẽ hiển thị các tài liệu liên quan Lập trình ứng dụng mạng 88 HTML Frames - Navigation frame − Khi click Fame b thì khung frame bên phải sẽ chuyển đến trang frame_b.htm Lập trình ứng dụng mạng 89 HTML Iframes − Hiển thị một trang web bên trong một trang web. − Cú pháp: − URL: trỏ tới vị trí của các trang riêng biệt.  Iframe - Height and Width − height và width xác định chiều cao và chiều rộng của iframe. − Giá trị được quy định là pixels hoặc phần trăm ("80%"). Lập trình ứng dụng mạng 90 HTML Iframes Lập trình ứng dụng mạng 91 Iframe - Remove the Border − Thuộc tính frameborder hiển thị hoặc không hiển thị đường viền. − Thiết lập giá trị thuộc tính là "0" để loại bỏ đường viền: Lập trình ứng dụng mạng 92 Iframe – link − Thuộc tính target tham chiếu đến thuộc tính name của iframe Lập trình ứng dụng mạng 93 HTML Colors − Màu sắc là sự kết hợp của ba màu RED, GREEN, BLUE. Color Values − Sử dụng ký hiệu thập lục phân (HEX) kết hợp của ba màu cơ bản Red, Green, Blue (RGB). − Giá trị thấp nhất của màu là 0 (HEX: 00). − Giá trị cao nhất là 255 (HEX: FF). − Giá trị HEX quy định là 3 cặp số hai chữ số, bắt đầu với dấu #. Lập trình ứng dụng mạng 94 HTML Colors - Color Values Lập trình ứng dụng mạng 95 HTML Colors - Color Values Lập trình ứng dụng mạng 96 HTML Colors - Color Values  16 Million Different Colors − Sự kết hợp của Red, Green, Blue có giá trị từ 0 đến 255, cung cấp cho hơn 16 triệu màu (256 x 256 x 256). − Xem bảng màu trong sách. 97 Stop!