Ngôn ngữ lập trình Java - Bài 1: Internet – Web – HTML Siêu liên kết – Danh sách – Bảng

LTM1 – Bài 1 - 1/35 Bài 1: Internet – Web – HTML Siêu liên kết – Danh sách – Bảng GV: ĐOÀN THIỆN NGÂN dngan2003@gmail.com – ngan@ueh.edu.vn LTM1 – Bài 1 - 2/35 Tài liệu tham khảo online 1. www.w3schools.com 2. 3. 4. www.w3.org 5. HTML5 - WHATWQ www.whatwg.org JavaScript Web Applications, Alex MacCaw, O’Reilly, 2011 LTM1 – Bài 1 - 3/35 Phần 1: Tổng quan trang web tĩnh –Tổng quan ứng dụng web –HTML –CSS –Javascript –XHTML –HTML 5 LTM1 – Bài 1 - 4/35 Tổng quan • Phân loại tài liệu – WYWIWYG: What You Want Is What You Get. Groff, Troff, Tex, Latex, SGML, XML, HTML, – WYSIWYG: What You See Is What You Get. Ms Word, • HTTP ─ Hypertext Transfer Protocol – Web Server: IIS, Apache, Tomcat, Glassfish, Wamp. Xamm, – Web Browser: IE (Internet Explorer), Firefox, Safari, Chrome, Opera, LTM1 – Bài 1 - 5/35 HTML Editors • Dreamweaver (4, 8, CS3, CS4, CS5, CS6) • Microsoft – Frontpage 2003, – SharePoint Designer 2007, 2010 – WebMatrix – Expression Web 4 (free) • Free softwares: Kompozer, Aptana, SeaMonkey, Netbeans, • CoffeeCup HTML Editor • PSPAD LTM1 – Bài 1 - 6/35 Tổng quan – Ứng dụng Web • Trang Web tĩnh: htm, html – Kết hợp client─side scripting (Javascript, Vbscript, ) – Không cần Web server lúc thử nghiệm – Hầu hết các trình duyệt hỗ trợ • Trang Web động (server─side scripting): rất đa dạng như cgi, asp, aspx, jsp, jsf, php, – Thường đi với Cơ sở dữ liệu – Bắt buộc phải có web server - httpd lúc chạy để sinh HTML code trả về client LTM1 – Bài 1 - 7/35 Static Web pages Một vài nhận xét về trang web tĩnh: 1. Tác giả viết trang Web dùng HTML và lưu thành tập tin .htm (.html) trên Web server. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang .htm (hay .html) và chuyển nó về dạng HTML. 4. Web server gởi trang HTML qua mạng về trình duyệt. 5. Trình duyệt xử lý trang HTML và hiển thị lên trang web. LTM1 – Bài 1 - 8/35 Client─Side Scripting Web Pages Client-Side Scripting Web Pages 1. Tác giả viết một tập lệnh để tạo trang Web và lưu thành tập tin .htm trên Web server. Tập lệnh này có thể trong những dạng ngôn ngữ khác nhau và lưu riêng biệt hay chung trong tập tin HTML. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang .htm và những trang liên hệ chứa tập lệnh (nếu có) 4. Web server gởi trang HTML và tập lệnh tương ứng qua mạng về trình duyệt. 5. Trình duyệt xử lý trang HTML và tập lệnh hiển thị lên trang web. LTM1 – Bài 1 - 9/35 LTM1 – Bài 1 - 10/35 Server─Side Dynamic Web pages Server-Side Dynamic Web Pages 1. Tác giả viết một tập lệnh để tạo trang Web và lưu thành tập tin trên Web server. 2. Sau đó một user nhập URL vào trình duyệt và một yêu cầu (request) được gởi từ trình duyệt đến Web server 3. Web server xác định trang chứa tập lệnh 4. Web server xử lý tập lệnh tạo ra trang HTML 5. Web server gởi trang HTML qua mạng về trình duyệt. 6. Trình duyệt xử lý trang HTML và hiển thị lên trang web. asp; aspx; jsp; jsf; php; cfm; LTM1 – Bài 1 - 11/35 LTM1 – Bài 1 - 12/35 HTML • Trang web tĩnh *.htm, *.html • Chạy thử trực tiếp trong trình duyệt, không cần web server • Tập tin văn bản với các thẻ lệnh quy chuẩn ─ WYWIWYG (Tools cho thấy định dạng WYSIWYG) • Cấu trúc, thẻ lệnh căn bản, định dạng, liên kết, bảng dữ liệu, frame, (Chương 1, 2 và 3 giáo trình Lập trình mạng 1) LTM1 – Bài 1 - 13/35 CSS • Cascading Style Sheets ─ CSS • CSS định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML • CSS được thiết kế với mục đích tách biệt phần nội dung (viết bằng ngôn ngữ HTML) với phần trình bày (viết bằng ngôn ngữ CSS) của tài liệu • Sự tách biệt làm: – tăng khả năng truy xuất nội dung tài liệu, – tăng tính uyển chuyển và đơn giản cấu trúc – giảm bớt sự lặp lại các thẻ định dạng LTM1 – Bài 1 - 14/35 Sử dụng CSS trong HTML Ba cách sử dụng CSS • Inline CSS: – Bên trong một thẻ HTML • Internal CSS: – Trong phần đầu tài liệu HTML (head), nằm trong khối . • External CSS: – Trong tập tin riêng, có thể dùng chung cho nhiều trang HTML ─ tập tin *.css (Chương 4, 5 giáo trình Lập tình mạng 1) LTM1 – Bài 1 - 15/35 JavaScript • Ngôn ngữ kịch bản (Scripting language) • Không phải là ngôn ngữ Java • Tạo nội dung động (có thể thay đổi) cho trang web tĩnh (DHTML ─ Dynamic HTML) • Javascript là ngôn ngữ kịch bản ở phía client, chủ yếu được dùng để bổ sung tính tương tác cho Website: – kiểm tra dữ liệu nhập, – xử lý các biến cố xảy ra trên trang, (chương 6, 7, 8 giáo trình Lập trình mạng 1) LTM1 – Bài 1 - 16/35 Sử dụng code Javascript • Trong trang web, đoạn mã HTML sử dụng được khai báo thông qua thẻ . 1. Chèn trực tiếp đoạn code Javascript vào giữa cặp thẻ trong tập tin HTML. 2. Sử dụng tập tin Javascript riêng (*.js), và dùng thẻ để kết nối với trang HTML. LTM1 – Bài 1 - 17/35 XHTML • Trình duyệt có cách xử lý khác nhau • Cú pháp HTML lõng lẻo, trình duyệt này chạy nhưng trình duyệt khác không chạy. • XML (Extensible Markup Language) chặt chẻ và chính xác. • XML + HTML ≈ XHTML • XHTML đảm bảo chuẩn mực để các trình duyệt đều có thể chạy được. LTM1 – Bài 1 - 18/35 HTML 5 • Giới hạn của HTML 4 (1998). • W3C: XHTML 1.0 (1998), 1.1 (2000─2004) 2.0 (2006─2009) ? • HTML5 (2009): WHATWG (Web Hypertext Application Technology Working Group, www.whatwg.org) mở rộng HTML 4, đưa vào nhiều tag mới, nhiều khái niệm mới. • Chú ý: Nhiều trình duyệt chưa hỗ trợ tất cả các tính năng mới của HTML5. LTM1 – Bài 1 - 19/35 Phần 2 THẺ HTML – HTML TAGS LTM1 – Bài 1 - 20/35 Nội dung • Chương 1: Internet – Web – HTML – Internet – Web – HTML • Chương 2: Siêu liên kết – Danh sách – Bảng – Siêu liên kết – Danh sách – Bảng LTM1 – Bài 1 - 21/35 Giới thiệu Internet • Internet và WWW (World Wide Web) • Các dịch vụ Internet: E-Mail, Telnet, SSH, FTP, SFTP, Chatting, WWW, • WWW: – HTML – Hypertext Markup Language – HTTP – HyperText Transfer Protocol – Địa chỉ URL - Uniform resource locator – Web pages, Web Server, Website – Web Client, Web Browser LTM1 – Bài 1 - 22/35 HTML - Hypertext Markup Language • HTML: Ngôn ngữ trình bày tài liệu (document-layout) và chỉ định siêu liên kết (hyperlink-specification) • HTML TAG: Thẻ HTML – mã đặc biệt dùng để xác định cách hiển thị cho nội dung trong trang web • Thẻ HTML không phân biệt dạng chữ hoa – thường (case-insensitive) • Bài này chú trọng các thẻ HTML 4. LTM1 – Bài 1 - 23/35 HTML TAG • Thẻ HTML thường được phân thành hai loại: – Thẻ chứa (container tag): , • Thẻ mở • Thẻ đóng – Thẻ rỗng (empty tag): , , • Thuộc tính của thẻ <tên_thẻ thuộc_tính_1=giá_trị thuộc_tính_2=giá_trị > BIS LTM1 – Bài 1 - 24/35 Cấu trúc của tài liệu HTML • Tài liệu HTML bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng • Phần nội dung được chia thành hai phần: Phần đầu – header và phần thân – body • Phần đầu – header: Chứa title: • Phần thân – body: – Thuộc tính: background, bgcolor, text, alink, vlink, link – Màu sắc trong thiết kế trang Web: Tên tiếng Anh, Giá trị #RRGGBB LTM1 – Bài 1 - 25/35 Thẻ HTML cơ bản - Định dạng Thẻ định dạng gồm 2 loại: 1. Thẻ định dạng mức khối • Tiêu đề (H1 đến H6) • Đoạn văn bản (P) • Phần tử trong danh sách (LI) 2. Thẻ định dạng mức văn bản hay trong dòng • EM, I, B và FONT (nhấn mạnh ký tự) • A (liên kết) • IMG ( hình ảnh) • HR, BR (ngắt dòng) LTM1 – Bài 1 - 26/35 Thẻ HTML cơ bản • Thẻ : khối văn bản trích dẫn thụt vào một đoạn so với những nội dung khác. • Thẻ : định dạng in nghiêng khối văn bản trích dẫn. • Thẻ : Văn bản đã định dạng trước • Phân chia nội dung trang Web thành những khối thông tin logic và kết hợp với định dạng CSS – Thẻ : phần tử định dạng mức khối – Thẻ : phần tử định dạng trong dòng LTM1 – Bài 1 - 27/35 Thẻ HTML cơ bản • Hình ảnh: Thẻ • Âm thanh: Thẻ chèn âm thanh (đoạn nhạc) vào trang Web. Âm thanh này sẽ khởi động mỗi khi người dùng mở trang Web. • Thẻ : Tạo đối tượng chạy tự động trên trang web, • Thẻ : chú thích • Ký tự đặc biệt: > (> lớn hơn), < (< nhỏ hơn), " (" nháy kép), & (&), LTM1 – Bài 1 - 28/35 Liên kết trong trang web • Siêu liên kết – Hyperlink: thể hiện sự kết nối của tài liệu hiện tại với một tài liệu HTML hoặc file khác (đồ hoạ, âm thanh, ), hoặc đến một vị trí khác trong cùng tài liệu. – Internal Hyperlink (Liên kết cục bộ) là liên kết đến một vùng trong cùng tài liệu hoặc liên kết các trang trong cùng một website. – External Hyperlink (Liên kết ngoài) là liên kết đến các trang hay vùng thuộc một website khác. – URL tuyệt đối: – URL tương đối: dhkt/tuyensinh/VB2.htm LTM1 – Bài 1 - 29/35 Thẻ tạo siêu liên kết trong trang HTML • Thẻ : <a href="url" name="name" title=title target=_blank/_self > văn bản liên kết • Bookmark: nội dung nội dung • Liên kết đến một địa chỉ email văn bản LTM1 – Bài 1 - 30/35 Danh sách - List • Danh sách không thứ tự (unorder list): Thẻ (disc - mặc định, circle, square) Mục 1 Mục 2 • Danh sách có thứ tự (order list): Thẻ (1 - mặc định, a, A, i, I) Mục 1 Mục 2 • Có thể tạo danh sách lồng nhau (VD-2.10) LTM1 – Bài 1 - 31/35 Danh sách định nghĩa • Danh sách định nghĩa dùng để khai báo các thuật ngữ và phần diễn giải tương ứng. Tiêu đề định nghĩa 1 Định nghĩa 1 VD-2.11 LTM1 – Bài 1 - 32/35 Bảng - Table • Định nghĩa bảng: • Định nghĩa tiêu đề bảng: • Định nghĩa tiêu đề cột: • Định nghĩa dòng của bảng: • Định nghĩa ô của dòng: (VD- 2.12) • Thuộc tính của bảng: height, width, align, cellspacing, cellpadding, border, bordercolor, background, bgcolor. • Thuộc tính của ô: height, width, align, valign, border, bordercolor, background, bgcolor. LTM1 – Bài 1 - 33/35 Mở rộng hàng/cột trong bảng • Để gom n ô trong cùng cột thành một, ta dùng thuộc tính colspan • Để gom n ô trong cùng dòng, ta dùng thuộc tính rowspan VD-2.14 LTM1 – Bài 1 - 34/35 Các bảng lồng nhau – Nested tables • Ta có thể thêm bảng vào trong một ô của bảng cha bên ngoài. Đây là trường hợp các bảng lồng nhau. VD-2.16 LTM1 – Bài 1 - 35/35 ??? • Trang web (webpage) – Trang web tĩnh (client-side scripting) – Trang web động (server-side scripting) • Html, CSS, Javascript – Các thẻ lệnh html - tag – CSS là gì? – Cách sử dụng CSS – Javascript là gì? – Cách sử dụng Javascript – XHTML, HTML 5