Chương I: TỔNG QUAN VỀ CÔNG NGHỆ I. Tổng quan về HTML5/CSS3/JS 1. Sơ lược về HTML5 1. Tổng quan về HTML a.
Định nghĩa HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.
Sau đó, các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web. HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày. Cấu trúc Cấu trúc cở bản và các câu lệnh của HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> </body> </html> Các thẻ cơ bản hay sữ dụng trong HTML <div> : Xác định một phân chia khu vực hay một vùng trong văn bản.
<h1> tới <h6>: Xác định tiêu đề html. <img >: Hiển thị một image. <input >: Xác định một điều khiển nhập. <label>: Tạo một nhãn cho thành phần input.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC 14 1 <button>: Xác định một button. <hr >: Tạo một đường ngang. <i>: Hiển thị chữ in nghiên. <li>: Xác định danh sách item.
<ul>: Định nghĩa một danh sách không có thứ tự. <ol>: Định nghĩa một danh sách có thứ tự. <a>: Định nghĩa một đường liên kết link tới trang khác. <b>: Định nghĩa một từ được in đậm.
<u>: Định nghĩa một từ được gạch chân. <br> : Thẻ xuống dòng. <span>: Định nghĩa một khối văn bản. Form: Tag <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng,được dùng để truyền dữ liệu lên máy chủ.Tag <form> không nên dùng để điều khiển layout.
Cấu trúc: Trong <form> bắt buộc phải có tham số action. <form action=""></form> một <form> có thể chứa thành phần <input>, <select>, <texarea>, <fieldset>, <legend>, <label>, có thể chứa các tag khác. Vídụ: <form action="#"> <ul> <li>Họ tên: <input type="text" size="30" /></li> <li>Email: <input type="text" size="30" /></li> <li>Ngày sinh: <input type="text" size="10" /></li> </ul> <p><input type="submit" value="Gửi" /></p> </form> + Frame: <frame > định nghĩa một cửa sổ riêng (khung - frame) trong một <frameset>. Cấu trúc: tag <frame> đươc viết bên trong thành phần <frameset> <html> <frameset> <frame src = "frame.html"></frame> </frameset > </html> + Table: Tag <table> dùng để tạo một bảng trong html <tr> xác định hàng của table.
<th> xác định phần tử tiêu đề của table. <td> xác định phần tử nội dung của table. SVTH: Lê Nho Thắng – Lớp: 17CNTTC 15 1 1.2 Tổng quan về HTML5 HTML ngày nay được gọi là HTML4, được xuất bản lần đầu tiên vào năm 1997. Đến khoảng năm 2000, ngôn ngữ đánh dấu song song được gọi là XHTML bắt đầu được phát triển và được sử dụng trong nhiều năm qua.
Mặc dù XHTML và HTML4 khá giống nhau, tuy nhiên XHTML tuân thủ các chuẩn nghiêm ngặt hơn. HTML4 giới hạn chức năng. Nó phải được mở rộng thông qua các plugin như Flash để cung cấp các văn bản và hình ảnh đơn giản hơn. Với tất cả plugin sẽ trở nên khó khăn để duy trì các chuẩn phù hợp.
Giải pháp lý tưởng nhất là mỗi trình duyệt hiển thị các trang web theo cùng một cách để mang lại trải nghiệm tương tự cho người dùng HTML4 hoạt động khá tốt, nhưng vấn đề ở đây là nó giới hạn chức năng. Nhóm phát triển HTML5 đã bổ sung thêm các tính năng cao cấp trong phiên bản HTML tiếp theo, tức là HTML5 phải được xây dựng dựa trên các nguyên tắc: - Ít phụ thuộc vào plugin chức năng. - Script nên được thay thế bằng markup bất cứ khi nào có thể. - Tính độc lập của thiết bị (nghĩa là có sẵn trên tất cả các thiết bị và cung cấp trải nghiệm kết thúc tương tự).
- Quá trình phát triển công cộng để mọi người có thể nhìn thấy những gì đang diễn ra. HTML5 đã bổ sung thêm rất nhiều các thẻ đánh dấu (markup) mới: Các thẻ <header> và <footer> giúp bạn tách các phần trên và dưới của các block nội dung. Để có thể sử dụng nhiều lần trên một trang duy nhất. Thẻ <article> giúp xác định một phần cụ thể về nội dung, ví dụ, một bài blog hoặc một bình luận của độc giả.
Thẻ <nav> để xác định những phần nào được coi là khối điều hướng. Thẻ <section> cho phép bạn xác định một phần nội dung nào đó; tương tự như các thẻ <div> hiện nay. Các thẻ <audio> và <video> để đánh dấu những nội dung bao gồm âm thanh hoặc video. Thẻ <canvas> cho phép bạn vẽ đồ họa sử dụng một ngôn ngữ kịch bản riêng biệt.
Thẻ <embed> dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang web. HTML5 cũng bỏ đi một số thẻ: <acronym>, <applet>, <font>, <frame>, <frameset>, <noframes>, và một số thẻ khác. SVTH: Lê Nho Thắng – Lớp: 17CNTTC 16 1 1.3 Sự khác biệt giữa HTML và HTML5 SVG, canvas và những hình dạng vector đều được hỗ trợ bởi HTML5, khi HTML nếu muốn sử dụng hình vector chỉ có thể dùng nó trong một công nghệ khác như, Flash, VML và silver light. HTML5 sử dụng web SQL databases, application cache để lưu dữ liệu tạm, trong khi đó, HTML chỉ có cache của trình duyệt được dùng cho mục đích này.
Một khác biệt nữa giữa HTML và HTML5 đáng nhắc đến là HTML không cho phép JavaScript chạy trong web browser (thay vì vậy nó chạy trong interface thread của browser), trong khi đó HTML5 hỗ trợ hoàn toàn cho JavaScript để chạy nền (nhờ vào JS web worker API của HTML5). HTML5 không dựa trên SGML, cho phép nó tăng luật parsing, có thể tương thích mạnh mẽ hơn Trong HTML5, inline MathML và SVG có thể được dùng trong văn bản nơi mà không được hỗ trợ trong HTML. Một số elements lỗi thời đã bị loại bỏ hoàn toàn là: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt. HTML5 hỗ trợ nhiều loại điều khiển form, ví dụ: ngày giờ, email, số lượng, khoảng, số điện thoại, URL, tìm kiếm, vâng vâng Có nhiều element được giới thiệu trong HTML.
Một vài trong số chúng là quan trọng nhất: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track. Sơ lược về CSS3 CSS là chưc viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức Word Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh CSS sẽ định dạng một thành phần nhật định của tài liệu HTML như màu sắc, font chữ… CSS tách riêng phần định dạng ra khỏi nội dung trang web giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất, tiết kiệm được nhiều thời gian trong chỉnh sửa, đặc biệt là các dự án lớn được kết cấu từ nhiều trang HTML. Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, giúp bạn thuận tiện hơn trong việc chỉnh sửa giao diện.
Kích thước của file .html cũng được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều lần (cache), do đó giúp trang web được load nhanh hơn. CSS có nhiều kiểu nhưng gom lại thì sẽ có các thể loại thông dụng như sau: - Background : CSS tùy chỉnh hình nền. - Text : CSS tùy chỉnh cách hiển thị text.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC 17 1 - Font : CSS tùy chỉnh kích thước, kiểu chữ. - Link : CSS tùy chỉnh link. - List CSS tùy chỉnh danh sách. - Table : CSS tùy chỉnh bảng.
- Box model : Mô hình box model kết hợp padding, margin, border. - … Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là: - CSS cục bộ : viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo. <p style=”font-size: 16bt; color: blue”>Đoạn văn này sẽ bị ảnh hưởng khi khai báo CSS cục bộ</p> - CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt trong phần <head> của tài liệu HTML. Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file khác trong cùng một website.
<style> h1,h2,h3 {font-size: 14px;} p {color: blue;} </style> - CSS ngoại tuyến: • Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế, và cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khoải tài liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ. • Nó có phạm vi ảnh hưởng toàn bộ đến website chứ không chỉ có một file .html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này thay vì chỉnh sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết và hiệu quả mà CSS mang lai.
Để khai báo CSS ngoại tuyến, ta chỉ cần tạo ra một file style.css chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của trang web. <link href=”style.css” rel=”stylesheet” type=”text/css” media=” screen” > Thứ tự ưu tiên trong Css: Css cục bộ >> Css nội tuyến >> Css ngoại tuyến >> Css mặc định của trình duyệt. SVTH: Lê Nho Thắng – Lớp: 17CNTTC 18 1 Chúng ta cần phân biệt rõ giữa CSS và Style trong HTML. Nếu như Style được dùng để định dạng nội dung trong HTML thì CSS là một file chứa Style.
Sơ lược về Js (JavaScript) JavaScript (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính năng của một ngôn ngữ lập trình động mà khi nó được áp dụng vào một tài liệu HTML, nó có thể đem lại khả năng tương tác động trên các trang web. Cha đẻ của ngôn ngữ này là Brendan Eich, đồng sáng lập dự án Mozilla, quỹ Mozilla, và tập đoàn Mozilla. Bản thân Javascript là một ngôn ngữ linh động. Các nhà phát triển đã viết ra một số lượng lớn các công cụ thuộc top của core Javascript, mở ra một lượng lớn tính năng bổ sung với ít nỗ lực nhất.