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
97 trang |
Chia sẻ: lylyngoc | Lượt xem: 1627 | Lượt tải: 1
Bạn đang xem trước 20 trang tài liệu Bài 3: HTML Cơ bản, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trê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!