Register   Login   About   Study   Enterprise   Share
AI / Internet Technology University (AITU)
Fast Login - available after registration







|

Top Links: >> 80. Technology >> Internet Technology Summit Program >> 4. Web Apps Frameworks
Current Topic: 4.2. HTML 5, CSS, Java Script, jQuery, Angular JS, and REACT
Sub-Topics: 4.2.1. HTML 5 | 4.2.2. HTML Forms | 4.2.3. CSS for Responsive pages and Bootstrap.css | 4.2.4. Java Script | 4.2.5. jQuery | 4.2.6. Angular JS | 4.2.7. REACT | 4.2.8. Web Front End Project
-- Scroll to check for more content below...
You have a privilege to create a quiz (QnA) related to this subject and obtain creativity score...
Similar to Structured Query Language (SQL), which was invented to standardize relational databases, Hypertext Markup Language (HTML) is the standard for Web pages. Web browsers understand this language and interpret its keywords (tags) into text and images, sound and video.
Here is a simple example.

HTML5Look and feel on a web page





Title of the document


HTML5


Example


image


 

 


Stock ticker$Price
IBM$172.50
Apple$132.34





HTML5


Example


image


Stock ticker$Price
IBM$172.50
Apple$132.34

HTML 5 is the latest standard for creating web pages. HTML 5 is filled with new elements, attributes, and behaviors. It is suitable to a larger set of technologies. Android and iOS devices have very good HTML5 support, although not all APIs are implemented yet.
The heading elements from h1 to h6 have a rank given by the number in the element name, where h1 has the highest rank, and h6 has the lowest rank.

In the example above you can see the heading element h1 and a table with two table rows, made with the tr elements, two table headers in the first row, made with the th elements and two table data cells in the second row, made with the td elements.

HTML elements are often called tags. HTML tags normally come in pairs like

and


The first tag in a pair is the start tag, the second tag is the end tag.
HTML 5 is greatly described with the W3C Introductory reference: http://www.w3schools.com/html/html5_intro.asp
The reference also describes Cascading Style Sheet (CSS) and Java Script. A web page usually has reference-links to one or more CSS and Java Script files. CSS defines common look and feel for several web pages and often even for a web site. Java Script library include numerous functions, which can be called from HTML code dynamically changing web pages on the client side. Java Script functions, such as XMLHttpRequest and similar, commonly named AJAX, can interact with the server side and bring important data collected by an intelligent server side applications.
Was it clear so far?


We will learn CSS and Java Script a bit later.

According to W3C, the most interesting new elements in HTML 5 are:
New semantic elements like header, footer, article, and section.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: svg and canvas.
New multimedia elements: audio and video.

HTML5 includes new APIs
The most interesting are:
? HTML Geolocation - get the geographical position of a user

? HTML Drag and Drop - In HTML5, drag and drop is part of the standard, and any element can be draggable

? HTML Local Storage - Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per domain. All pages, from one domain, can store and access the same data.

? HTML Application Cache - a web application can be cached, and accessible without an internet connection

? HTML Web Workers - a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.

? HTML SSE - Server-Sent Events - One Way Messaging, when a web page automatically gets updates from a server.

HTML 5 expand HTML elements with more precise semantics, for example with the section element.

New APIs include new ways of communication with the server and implements an interesting idea of storing data on the client-side and operating off-line.

HTML 5 provides 2D and 3D Graphics and adds features to video and audio improving presentation options.


Assignments:
1. Read several pages of HTML 5 introduction at W3C: http://www.w3schools.com/html/html5_intro.asp
2. Find one-two images for your web page (on the Internet or locally) and store the images for the web page in the folder c:/its-resources
3. Open Eclipse, create a Java project part4.2.html
4. In the project create a folder html and in the folder create an html file page1.html. This should be a web page with the tables and images.
5. Check the page by opening the page1.html with the web browser at the location: c:/ITS/part4.2.html/html/page1.html
5. Modify, improve the web page and check it again. Keep relative path to images, never use an absolute path, as it will not work in any other environment.
6. Email the page1.html together with the images (images can be in the same directory as html file or in a separate img directory) as a single zip file to dean@ituniversity.us
| Check Your Progress | Propose QnA | Have a question or comments for open discussion?
<br/><!DOCTYPE html>
<br/><html>
<br/><head>
<br/><meta charset="UTF-8">
<br/><title>Title of the document</title>
<br/></head>
<br/><body>
<br/><h1>HTML5</h1>
<br/><h3>Example</h3>
<br/><img style="max-width:100%" src="/BASE/images/image.png" alt="image">
<br/>
<br/><table border=2>
<br/> <tr><th>Stock ticker</th><th>$Price</th></tr>
 
<br/> <tr><td>IBM</td><td>$172.50</td></tr>
 
<br/> <tr><td>Apple</td><td>$132.34</td></tr>
<br/></table>
<br/></body>
<br/></html>
<br/>


HTML5


Example


image


Stock ticker$Price
IBM$172.50
Apple$132.34

HTML 5 is the latest standard for creating web pages. HTML 5 is filled with new elements, attributes, and behaviors. It is suitable to a larger set of technologies. Android and iOS devices have very good HTML5 support, although not all APIs are implemented yet.
The heading elements from h1 to h6 have a rank given by the number in the element name, where h1 has the highest rank, and h6 has the lowest rank.

In the example above you can see the heading element h1 and a table with two table rows, made with the tr elements, two table headers in the first row, made with the th elements and two table data cells in the second row, made with the td elements.

HTML elements are often called tags. HTML tags normally come in pairs like
<p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag.
HTML 5 is greatly described with the W3C Introductory reference: http://www.w3schools.com/html/html5_intro.asp
The reference also describes Cascading Style Sheet (CSS) and Java Script. A web page usually has reference-links to one or more CSS and Java Script files. CSS defines common look and feel for several web pages and often even for a web site. Java Script library include numerous functions, which can be called from HTML code dynamically changing web pages on the client side. Java Script functions, such as XMLHttpRequest and similar, commonly named AJAX, can interact with the server side and bring important data collected by an intelligent server side applications.





Was it clear so far?



We will learn CSS and Java Script a bit later.

According to W3C, the most interesting new elements in HTML 5 are:
New semantic elements like header, footer, article, and section.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: svg and canvas.
New multimedia elements: audio and video.

HTML5 includes new APIs
The most interesting are:
? HTML Geolocation - get the geographical position of a user

? HTML Drag and Drop - In HTML5, drag and drop is part of the standard, and any element can be draggable

? HTML Local Storage - Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per domain. All pages, from one domain, can store and access the same data.

? HTML Application Cache - a web application can be cached, and accessible without an internet connection

? HTML Web Workers - a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.

? HTML SSE - Server-Sent Events - One Way Messaging, when a web page automatically gets updates from a server.

HTML 5 expand HTML elements with more precise semantics, for example with the section element.

New APIs include new ways of communication with the server and implements an interesting idea of storing data on the client-side and operating off-line.

HTML 5 provides 2D and 3D Graphics and adds features to video and audio improving presentation options.


Assignments:
1. Read several pages of HTML 5 introduction at W3C: http://www.w3schools.com/html/html5_intro.asp
2. Find one-two images for your web page (on the Internet or locally) and store the images for the web page in the folder c:/its-resources
3. Open Eclipse, create a Java project part4.2.html
4. In the project create a folder html and in the folder create an html file page1.html. This should be a web page with the tables and images.
5. Check the page by opening the page1.html with the web browser at the location: c:/ITS/part4.2.html/html/page1.html
5. Modify, improve the web page and check it again. Keep relative path to images, never use an absolute path, as it will not work in any other environment.
6. Email the page1.html together with the images (images can be in the same directory as html file or in a separate img directory) as a single zip file to dean@ituniversity.us

| Check Your Progress | Propose QnA | Have a question or comments for open discussion?

Have a suggestion? - shoot an email
Looking for something special? - Talk to me
Read: IT of the future: AI and Semantic Cloud Architecture | Fixing Education
Do you want to move from theory to practice and become a magician? Learn and work with us at Internet Technology University (ITU) - JavaSchool.com.

Technology that we offer and How this works: English | Spanish | Russian | French

Internet Technology University | JavaSchool.com | Copyrights © Since 1997 | All Rights Reserved
Patents: US10956676, US7032006, US7774751, US7966093, US8051026, US8863234
Including conversational semantic decision support systems (CSDS) and bringing us closer to The message from 2040
Privacy Policy