World Wide Web (www) là một dịch vụ cho phép người sử dụng truy cập thông tin thông qua Internet.Một trang Web là một file chứa thông tin và các chỉ thị (instructions) hiển thị thông tin cho người dùng.Sự phát triển của Web được chia thành các giai đoạn:Web 1.0Web 2.0Semantic Web (Web có ngữ nghĩa).
Trang 1Session 1
Trang 2• World Wide Web (www) là một dịch vụ cho phép người
sử dụng truy cập thông tin thông qua Internet
• Một trang Web là một file chứa thông tin và các chỉ thị (instructions) hiển thị thông tin cho người dùng
• Sự phát triển của Web được chia thành các giai đoạn:
– Web 1.0
– Web 2.0
– Semantic Web (Web có ngữ nghĩa).
Trang 3• Web 1.0
– Các trang web ở dạng tĩnh (read-only format) với người đọc – Không có sự tương tác với người đọc
• Web 2.0
– Khả năng tương tác và tính năng phong phú.
– Sử dụng công nghệ AJAX , CSS cho phép tạo ra các trang web động, có thể hiển thị đa dạng thông tin hơn Nhờ vậy mà người đọc không những xem nội dung trang Web mà còn
tương với tác giả trang Web qua comment (lời bình, nhận xét), blog, rating (đánh giá)…vv.
Trang 4• Semantic Web
– Web có ngữ nghĩa là khái niệm mở rộng Web hiện tại và là thế hệ Web trong tương lai.
– Mục tiêu ban đầu của Semantic Web là để hỗ trợ người
dùng tìm kiếm thông tin trên mạng một cách nhanh chóng, chuẩn xác và thông minh hơn so với các công cụ tìm kiếm truyền thống.
– Semantic Web cung cấp một tập các tiêu chuẩn Web site
để thông tin được xuất bản theo một khuôn dạng (format), nhờ đó giúp các phần mềm máy tính có thể hiểu được
thông tin và tự động xử lý được những thông tin đó
Trang 5• HTML viết tắt của Hyper Text Markup Language, là một
ngôn ngữ đánh dấu được dùng chủ yếu để tạo và hiển thị các trang Web siêu văn bản trong bất kỳ trình duyệt nào
• Sử dụng các thẻ (tag) và các phần tử (element) HTML, ta
có thể:
– Điều khiển hiển thị và hình thức trình bày nội dung của trang.
– Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách chèn các liên kết vào tài liệu HTML
– Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch
Trang 6• Một trang HTML được lưu trữ với phần mở rộng html.
• Cấu trúc cơ bản của tài liệu HTML gồm có bốn phần tử cơ bản là:
– HTML: Phần tử gốc đánh dấu sự bắt đầu và kết thúc tài liệu HTML
– HEAD: phần tử cung cấp thông tin về trang Web như ngôn ngữ sử
dụng, từ khóa cho các bộ máy tìm kiếm.
– TITLE: phần tử cho phép đặt tiêu đề của trang Web.
– BODY: toàn bộ nội dung trang Web hiển thị trên trình duyệt được đặt trong cặp thẻ <BODY></BODY> Nội dung bao gồm văn bản, siêu liên kết, hình ảnh
Trang 7Giới thiệu
7
Trang 8Các trang Web tĩnh
8
Các trang Web tĩnh
Bao gồm văn bản, hình ảnh, video …
chỉnh sửa
Trang 9Các trang Web động
9
Các trang Web động
Dữ liệu luôn được cập nhật và đáng tin cậy
Sinh ra nội dung dựa trên nhu câu khi người dụng cung cấp đầu vào
Cho phép người dùng
tương tác
Cho phép sửa nội dung
và sự xuất hiện của chúng trên trình duyệt
Trang 10Các công nghệ
10
Trang 11Lịch sử phát triển 1-2
11
HTML đã được phát triển qua nhiều năm với nhiều sự cải tiến thông qua các phiên bản.
Trang 12• Phần tử gồm có các thẻ, thuộc tính và nội dung Các thẻ gồm có thẻ bắt đầu và kết thúc một phần tử HTML.
• Có hai loại phân tử:
– Phần tử chứa
– Phần tử rỗng
Trang 13• Mỗi thẻ của phần tử được đặt trong cặp ngoặc <>
• Thẻ kết thúc có thêm kí tự /
• Cung cấp các giá trị thích hợp tới thuộc tính
• Các phần tử phải nằm lồng nhau
Trang 14• Khai báo kiểu tài liệu (DOCTYPE) được đặt trên cùng của trang HTML,
nó cho biết phiên bản HTML và định nghĩa kiểu tài liệu (DTD-Document Type Definition).
Trang 15• Một siêu liên kết được xem
như là một link, nó liên kết
đến các trang Web khác
hoặc liên kêt đến một vùng
(section) trong cùng tài liệu
• Phần tử A (anchor) được sử dụng để tạo một siêu liên kết
Trang 16• Các dạng liên kết
– Liên kết trong là liên kết đến các phần trong cùng
tài liệu hoặc cùng một web site
– Liên kết ngoài là liên kết đến các trang trên các web
site khác hoặc máy chủ khác.
Trang 17
- - - -
Trang 18-• Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần :
– Địa chỉ đầy đủ hoặc URL của file được kết nối
– Điểm nóng cung cấp cho liên kết Điểm nóng này có thể là một dòng văn bản hoặc thậm chí là một ảnh.
• Các kiểu URL
– URL tuyệt đối
– URL tương đối
Trang 19• Cú pháp của HREF là :
<A HREF = protocol://host.domain:port/path/filename>
Hypertext </A>
• Protocol xác định loại giao thức
• Host.domain là địa chỉ Internet của máy chủ
• Port là cổng phục vụ của máy chủ đích
• HyperText là văn bản hay hình ảnh mà user cần nhấp vào để
kích hoạt liên kết
Trang 20• Liên kết đến tài liệu khác
– Đường dẫn tuyệt đối
– Đường dẫn tương đối
• Liên kết đến các phần trong cùng một tài liệu
• Liên kết đến một điểm xác định ở một tài liệu khác
• Sử dụng e-mail
Trang 21• Có 5 phần tử text cơ bản
– P
– BR
– H1, H2, H3, H4, H5, H6 – HR
– PRE
Trang 22• Phần tử Heading định nghĩa các tiêu đề cho văn bản và hình ảnh.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
Trang 23• Phần tử định dạng cho phép điều khiển nội dung trang Web được hiển thị trên trình duyệt theo nhiều kiểu dạng khác nhau.
Trang 24– DEL
– INS
– STRONG – SUB
– SUP
Trang 25• Phần tử <ADDRESS> được dùng khi cần hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu
HTML.Phần tử này thường đặt ở cuối trang và có thể chứa một hoặc một số phần sau:
– Liên kết đến trang chủ
– Đặc tính chuỗi tìm kiếm
– Thông tin bản quyền
Trang 26<HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD>
<BODY BGCOLOR = lavender>
<P> Another paragraph element
<ADDRESS>
ITPlus Academy - Viện Công nghệ thông tin - ĐHQG HN<Br>
Tầng 5, Nhà E3, ĐHQG HN, 144 Xuân Thủy, Cầu Giấy, Hà Nội
</ADDRESS>
</BODY>
</HTML>
Ví dụ ADDRESS
Trang 27• Một style (kiểu dáng) là cách để chỉ rõ hình thức trình bày nội dung trực quan như: màu sắc, font chữ, cỡ chữ,
Trang 28• Thuộc tính color của thuộc tính style được dùng để thiết lập màu cho văn bản hoặc màu nền trong trang Web.
• Giá trị màu có thể được dùng là tên màu, giá trị hệ Hexa, hoặc giá trị RGB
• Có 3 kiểu màu chính: RGB – Red(đỏ), Green(xanh), Xanh
da trời(Blue)
– Mỗi màu chính được xem như một bộ hai số của hệ 16.
#RRGGBB – Số thập lục phân 00: tương ứng với 0%, còn FF tương ứng với 100%
Trang 29• CITE
– Dùng cho những đoạn văn bản có nội dung như chỉ ra tài liệu tham khảo, nguồn thông tin (trong các bài báo)…
Trang 30• Dùng để chia văn bản thành khối thông tin logic
– <DIV>…</DIV>: Phần tử mức khối (block-level) dùng để định nghĩa một phân vùng(section) trên trang Web
– <SPAN>…</SPAN>: Dùng để định nghĩa nội dung mức dòng
Trang 31• IMG là phần tử rỗng được dùng để chèn ảnh vào trang Web.
• Phần tử IMG hỗ trợ các dạng ảnh:
– Ảnh GIF (Graphics Interchange Format) (.GIF)
• Định dạng GIF xen kẽ
• Ảnh GIF trong suốt – Ảnh JPEG (Joint Photographic Expert Group) (.JPEG)
– Ảnh PNG (Portable Network Graphics)
• Các thuộc tính của phần tử IMG
Trang 32• <IMG SRC=”URL”>
• <IMG ALIGN=position SRC=”PICTURE.GIF”>
• <IMG SRC=Flowers.jpg ALT=”Beautiful Flowers”>
• <BODY BACKGROUND=bgimage.gif>
• <BODY BACKGROUND=bgimage.gif
BGPROPERTIES=FIXED>
Trang 33• Phần tử EMBED cho phép bạn chèn một tập tin video vào tài liệu HTML.
– SRC: đường dẫn đến tập tin video.
– HEIGHT, WIDTH: kích thước cửa sổ khi hiển thị nội dung tập tin video.
<EMBED SRC= “…” WIDTH=“…” HEIGHT=“…”>
Trang 34• Phần tử BGSOUND“ LOOP=“positive number/infinite”>
– SRC: đường dẫn đến tập tin audio (.wav, midi, mp3)
– LOOP: xác định số lần âm thanh được lặp hay lặp cho đến khi chuyển sang trang khác hay cửa sổ browse bị đóng lại