Bài giảng Cơ bản về HTML

 nguyên định dạng PRE (PREserved) và Trình duyệt hiển thị với định dạng giống như trong file trên trình soạn thảo Thẻ giữ nguyên định dạng CODE và Giống PRE, chỉ khác là không có xuống dòng cuối cùng Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Các ký tự đặc biệt Ký tự trống không ngắt - non-breaking space   ký tự trống đi liền với ký tự liền trước kể cả khi xuống dòng Dấu nhỏ hơn hay dấu mở ngoặc nhọn > (greater than) Dấu và & & (ampersand) Dấu nháy kép “ " (quotation mark) Dấu nháy đơn ‘ ' (apostrophe) Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Các thẻ định dạng danh sách Danh sách không có thứ tự - unordered list và Mỗi mục của danh sách được đánh dấu bằng cặp thẻ và (list item) Mỗi mục của danh sách có thể là một đoạn paragraph, line break, ảnh, liên kết ... Thuộc tính của thẻ type = {disc | square | circle} kiểu ký hiệu đánh dấu khoản mục Các thẻ định dạng danh sách Danh sách có thứ tự - ordered list và Mỗi mục của danh sách được đánh dấu bằng cặp thẻ và Mỗi mục của danh sách có thể là một đoạn paragraph, line break, ảnh, liên kết ... Thuộc tính của thẻ type = {A | a | I | i | 1} kiểu đánh số thứ tụ của danh sách start = n - số thứ tự bắt đầu Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ xác lập liên kết - link và Thuộc tính name = “tên” - tên của thành phần liên kết href = “url” - địa chỉ đích của liên kết target = {_blank | _self | _parent | _top} - xác định nơi mở địa chỉ đích _blank: mở trên cửa sổ mới _self: mở cùng frame với liên kết _parent: mở trong frame cha của frame chứa liên kết _top: mở ở thân (body) của cửa sổ Thẻ tạo liên kết - link Tạo liên kết gửi thư điện tử Send mail Tạo liên kết đến đến vị trí trong trang Top of the page Chapter 1 Go to top Chapter 2 Go to top Chapter 3 Go to top Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ hiển thị ảnh không có thẻ đóng Thuộc tính src = “url” - địa chỉ lưu trữ file ảnh, có thể là địa chỉ tương đối hoặc địa chỉ tuyệt đối alt = “text” (alternative) - đoạn văn bản hiển thị thay thế khi trình duyệt không thể hiển thị được ảnh align = {left | center | right | justify} - căn lề height = {n pixels | n%} - chiều cao của ảnh width = {n pixels | n%} - chiều rộng của ảnh usemap = “url” - kết hợp với thẻ và thẻ để tạo ra các vùng trên ảnh Thẻ hiển thị ảnh Thiết lập liên kết cho ảnh 	 Xác lập phần ảnh có thể kích chuột vào với bộ thẻ và thẻ 	... 	 thuộc tính của thẻ alt = “text” shape = {rect | rectangle | circ | circle | poly | polygon} coords - tọa độ của vùng ảnh href = “url” target = {_blank | _self | _parent | _top} - xác định nơi mở địa chỉ đích Thẻ hiển thị ảnh Hay kich chuot vao tung hanh tinh de co the nhin no gan hon: Note: Chung ta su dung ca 2 thuoc tinh id va name trong the map boi vi mot so phien ban cua Netscape khong hieu thuoc tinh id. Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ tạo bảng Table Mỗi bảng được đánh dấu bằng cặp thẻ và Mỗi bảng gồm nhiều hàng, mỗi hàng được đánh dấu bằng cặp thẻ và Mỗi hàng gồm nhiều ô, mỗi ô được đáng dấu bởi cặp thẻ và Để tạo tiêu đề cho hàng, cột trong bảng ta dùng cặp thẻ và Thẻ tạo bảng Thuộc tính thẻ align = {left | center | right | justify} height = {n pixels | n%} width = {n pixels | n%} bgcolor = {rgb(x,x,x) | #xxxxxx | colorname} background = “url” border = n pixels - độ dầy đường biên Thẻ tạo bảng Thuộc tính thẻ bgcolor = {rgb(x,x,x) | #xxxxxx | colorname} align = {left | center | right | justify} - căn lề văn bản trong ô của bảng valign = {top | middle | bottom | baseline} - căn văn bản theo chiều thẳng đứng trong ô Thẻ tạo bảng Thuộc tính thẻ bgcolor = {rgb(x,x,x) | #xxxxxx | colorname} align = {left | center | right | justify} - căn lề văn bản trong ô của bảng valign = {top | middle | bottom | baseline} - căn văn bản theo chiều thẳng đứng trong ô colspan = n - số lượng cột mà ô này chứa rowspan = n - số lượng hàng mà ô này chứa Thẻ tạo bảng Tiêu đề của bảng - Heading ngang Thẻ tạo bảng Tiêu đề của bảng - Heading dọc Thẻ tạo bảng Nối các cột - thuộc tính colspan Thẻ tạo bảng Nối các hàng - rowspan Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ tạo frame Cho phép hiển thị nhiều trang web một cách độc lập với nhau trong cùng 1 cửa sổ trình duyệt Mỗi frame được đánh dấu bởi thẻ Mỗi cửa sổ được chia thành nhiều frame được gọi là frameset, được đánh dấu bởi cặp thẻ và Mỗi frameset lại có thể chứa một hay nhiều frameset Thẻ tạo frame Thuộc tính thẻ frameset frameborder = {0 | 1 | yes | no} cols = “width1, width2, …” width – độ rộng của các frame, có thể nhận giá trị pixel % - tỷ lệ % với độ rộng frameset * - tỷ lệ tương đối giữa các độ rộng rows = “height1, height2, …” Thẻ tạo frame Thuộc tính thẻ frame name = “text” – tên của frame frameborder = {0 | 1 | yes | no} src = “url” – địa chỉ trang web hiển thị noresize = {true | false} scrolling = {auto | yes | no} Cặp thẻ và Xác lập vùng không chứa frame cho các trình duyệt không hỗ trợ điều khiển frame Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ tạo form và HTML form được dùng để thu thập các loại dữ liệu vào của người sử dụng Các thành phần form có thể là text box, dropdown box, radio button, checkbox ... Các thành phần form được đánh dấu bằng thẻ Các thuộc tính của thẻ form action = “url” - chỉ ra đích gửi dữ liệu name = “text” - tên của form method = {get | post} target = {_blank | _self | _parent | _top} - xác định nơi mở địa chỉ đích TextBox - Text Field Được dùng để người sử dụng nhập vào 1 dòng văn bản (các chữ, số) 	Ho: 	 	Ten: 	 Ô điền mật khẩu 	Username: 	 	Password: Vùng soạn thảo - Textarea Thuộc tính cols=number - số cột trong vùng soạn thảo rows=number - số hàng trong vùng soạn thảo Radio button – Option button Cho phép người dùng lựa chọn một trong số hữu hạn các lựa chọn Gioi tinh: Nam Nu Check box Cho phép người dùng chọn một hoặc nhiều trong số hữu hạn các lựa chọn Toi co xe dap Toi co xe may Hộp kéo thả - Dropdown box thẻ và các mục trong danh sách đổ xuống được đánh dấu bởi cặp thẻ Hộp kéo thả Dropdown box Hộp kéo thả theo nhóm Nút lệnh – (Command) Button Nút kiểu Submit và Reset Submit - Xác nhận gửi các thông tin trên form (trên các điều khiển) đến Server Reset - thiết lập lại giá trị trên các điều khiển về mặc định 	 	 	   	 Nút Submit và thuộc tính action của form Khi người sử dụng nhấn vào nút submit, nội dung của form sẽ được đưa tới một file khác được chỉ ra ở thuộc tính action của form File này có thể tiến hành một số xử lý với dữ liệu nhận được. Nếu bạn đánh vào textfield ở trên một vài ký tự, sau đó nhấn vào nút Submit, bạn sẽ gửi các ký tự này tới trang “url”. Ở trang này, bạn có thể lấy dữ liệu để làm một vài xử lý nào đó, thí dụ hiển thị lên màn hình chẳng hạn…. Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ kịch bản - Script Cho phép đưa vào trang HTML các đoạn script để tăng tính động và khả năng tương tác Cặp thẻ và Vị trí chèn script Trong phần HEAD: được thực hiện ngay khi trang web được load Trong phần BODY: được thực hiện khi phần nội dung trang web được load hoặc khi có lời gọi Cặp thẻ và Thẻ kịch bản - Script Thuộc tính thẻ script type = {text/javascript | text/vbscript | 	text/xml …} : xác định lọai ngôn 	ngữ kịch bản src = “url”: xác định địa chỉ đến file chứa script, tránh phải chèn trực tiếp nội dung đoạn script vào mã nguồn file HTML language = {javascript | vbscript …} runat = server Cơ bản về HTML Giới thiệu về HTML Thẻ HTML Các thẻ HTML cấu trúc Các thẻ định dạng văn bản (text) Các ký tự đặc biệt Các thẻ định dạng danh sách (list) Thẻ xác lập liên kết Thẻ hiển thị ảnh Thẻ tạo bảng Thẻ tạo frame Thẻ tạo form Thẻ kịch bản - script Thẻ định kiểu - style Thẻ định kiểu - style Định dạng kiểu hiển thị cho đoạn văn bản trong trang web Các lọai: Inline: thẻ style được đưa trực tiếp vào thành phần HTML Internal: thẻ style được định nghĩa trước trong phần HEAD của trang External: kiểu hiển thị được định nghĩa trong một file tách riêng – style sheet Thẻ style Inline: chỉ có hiệu lực trong 1 thành phần abc Thẻ style Internal: có hiệu lực trong 1 file 	mystyle { 	FONT-WEIGHT: bolder; 	FONT-SIZE: 23pt; 	TEXT-TRANSFORM: capitalize; 	COLOR: red; 	FONT-STYLE: italic; 	FONT-FAMILY: Arial; 	TEXT-DECORATION: underline overline line-through} Thẻ style External: có hiệu lực trên nhiều file