You have a privilege to create a quiz (QnA) related to this subject and obtain creativity score...
4.2.1. HTML 5
All HTML documents must start with a type declaration:
While teaching a proper HTML structure, I have to disclose that current browsers can forgive omission of this line and much more… With HTML standards W3C recently introduced XHTML standards. XHTML is pretty strict. XHTML validator will not be as forgiving as the current browsers.
HTML tags are not case sensitive, but W3C recommends to use low case for the tags.
The HTML document begins with the tag html and ends with /html displaying the part of the HTML document between the tags body and /body.
Here is an example:
Heading 1
Paragraph 1
Heading 3
Paragraph 2
Heading 1
Paragraph 1
Heading 3
Paragraph 2
HTML heading 1, h1 is the biggest and the heading 6, h6 is the smallest.
HTML paragraphs are defined with the p tags.
How are HTML links and images defined? HTML links are defined with the a tag and the address is specified in the href attribute
HTML images are defined with the img tag with the attributes:
src - reference to the image source file
alt - alternative text, which is visible if image is not found, and also when mouse is over the image.
It is a good idea to provide the alt attribute. This attribute adds more meaning to the page and helps better indexing by semantic tools and search engines.
width - instructs the page how much horizontal space you would like to provide for the image
height - instructs the page how much vertical space you would like to provide for the image
Example:
alt="faceBehindTheGlass" width="100" height="80">
Style in HTML Every HTML element has a default style, for example background color is white and text color is black.
Using the style attribute we can change the default style. For example, we set background to green and we also set one of the headers to red color:
Background is green
This header is red.
Background is green
This header is red.
The HTML style attribute has the following syntax:
style="property:value" The property and value must be known in Cascade Style Sheet (CSS) vocabulary. We will learn more about CSS later.
In the next sample we can combine several style attributes for the header: color, family and size. We also instruct the header to be placed in the center of the page.
Check the look and feel.
This header is red and centered.
Was it clear so far? Highlight the text in question
Or
Check the look and feel.
This header is red and centered.
HTML style can be embedded directly into HTML elements as we can see from the samples above.
It makes more sense to include a block of the STYLE code in the beginning of an HTML page to reuse the same style attributes for multiple HTML elements.
HTML Style with CSS
Welcome to HTML study
This is an example of CSS
Changing style in HTML Header
HTML Headers reuse the style attributes
HTML Style with CSS
Welcome to HTML study
This is an example of CSS
Changing style in HTML Header
HTML Headers reuse the style attributes
In the sample above style a web page reused HTML Header style attributes. Each time reading another HTML header a browser associated the header with its style provided in the style block in the beginning of the page. This is the way to make a consistent look and feel on the web page.
To expand a consistent look and feel to all web pages across a web site, we usually collect all style attributes in a file, for example, main.css and provide a reference to this file in each web page.
HTML and CSS
…HTML content ….
Check a complete set of CSS properties here: http://www.w3schools.com/cssref/default.asp Besides what we just learned together, you will find very interesting categories, such as animation, speech, user interface (navigation), media, and more. Enjoy!
Web pages can be projected to desktops and viewed on mobile devices. They must be Responsive to the size of devices. How do we make Responsive web pages?
The answer is coming in one of the next sections…
One of the most important function of HTML is delivering data to the server side. Data can be delivered as parameters in the URL or with the HTML form. From HTTP perspectives the first way with URL is the GET method and HTML forms represent the POST method.
Assignments: 1. In Eclipse in the project part4.2.html create the css folder and open a new file main.css.
2. In the main.css file provide style properties for headers 1, 2, 3, 4.
3. In the main.css file provide style properties links and tables.
4. In Eclipse, project part4.2.html – folder html open a new HTML file MyHtmlStyle.html.
5. In the head section provide a link-reference to the main.css file:
MyHtmlStyle
…HTML content ….
6. In the body section create headers, tables and links.
7. Provide the links to 5-6 sections in this tutorial.
8. Add content, create two more pages like that (each refers to the same CSS file) and connect all three pages with the links.
9. Email css and html files to dean@ituniversity.us
We invite you to create your own questions and answers (QnA) to increase your rank and win the Top Creativity Prize!
While teaching a proper HTML structure, I have to disclose that current browsers can forgive omission of this line and much more… With HTML standards W3C recently introduced XHTML standards. XHTML is pretty strict. XHTML validator will not be as forgiving as the current browsers.
HTML tags are not case sensitive, but W3C recommends to use low case for the tags.
The HTML document begins with the tag html and ends with /html displaying the part of the HTML document between the tags body and /body.
HTML images are defined with the img tag with the attributes:
src - reference to the image source file
alt - alternative text, which is visible if image is not found, and also when mouse is over the image.
It is a good idea to provide the alt attribute. This attribute adds more meaning to the page and helps better indexing by semantic tools and search engines.
width - instructs the page how much horizontal space you would like to provide for the image
height - instructs the page how much vertical space you would like to provide for the image
Style in HTML Every HTML element has a default style, for example background color is white and text color is black.
Using the style attribute we can change the default style. For example, we set background to green and we also set one of the headers to red color:
<br/><body style="background-color:green">
<br/><h1>Background is green</h1>
<br/><h2 style="color:red">This header is red.</h2>
<br/></body>
Background is green
This header is red.
The HTML style attribute has the following syntax:
style="property:value" The property and value must be known in Cascade Style Sheet (CSS) vocabulary. We will learn more about CSS later.
In the next sample we can combine several style attributes for the header: color, family and size. We also instruct the header to be placed in the center of the page.
<br/><body style="background-color:lightgrey">
<br/>Check the look and feel.
<br/><h2 style="color:red;font-family:verdana;font-size:10;text-align:center">
<br/>This header is red and centered.</h2>
<br/></body>
<br/>
Was it clear so far? Highlight the text in question
Or onclick="window.location.href='/BASE/jsp/chat.jsp?issueID=78&ur=f'">
Check the look and feel.
This header is red and centered.
HTML style can be embedded directly into HTML elements as we can see from the samples above.
It makes more sense to include a block of the STYLE code in the beginning of an HTML page to reuse the same style attributes for multiple HTML elements.
<html><head><style>
<br/>h1{font-size: 20;color: #4396D8;letter-spacing: 1px}
<br/>h2{font-size: 14pt;color: #FFF}
<br/>h3{font-size:12pt; margin:0px;background: #9999cc;color: #FFFFFF}
<br/>h4{font-size:10pt; margin:0px;background: #9999cc;color: #FFFFFF}
<br/></style></head>
<br/><body style= "background:lightgrey">
<br/><h1>HTML Style with CSS</h1>
<br/><h2>Welcome to HTML study</h2>
<br/><h3>This is an example of CSS</h3>
<br/><h4>Changing style in HTML Header</h4>
<br/><h4>HTML Headers reuse the style attributes</h4>
<br/></body></html>
<br/>
HTML Style with CSS
Welcome to HTML study
This is an example of CSS
Changing style in HTML Header
HTML Headers reuse the style attributes
In the sample above style a web page reused HTML Header style attributes. Each time reading another HTML header a browser associated the header with its style provided in the style block in the beginning of the page. This is the way to make a consistent look and feel on the web page.
To expand a consistent look and feel to all web pages across a web site, we usually collect all style attributes in a file, for example, main.css and provide a reference to this file in each web page.
Check a complete set of CSS properties here: http://www.w3schools.com/cssref/default.asp Besides what we just learned together, you will find very interesting categories, such as animation, speech, user interface (navigation), media, and more. Enjoy!
Web pages can be projected to desktops and viewed on mobile devices. They must be Responsive to the size of devices. How do we make Responsive web pages?
The answer is coming in one of the next sections…
One of the most important function of HTML is delivering data to the server side. Data can be delivered as parameters in the URL or with the HTML form. From HTTP perspectives the first way with URL is the GET method and HTML forms represent the POST method.
Assignments: 1. In Eclipse in the project part4.2.html create the css folder and open a new file main.css.
2. In the main.css file provide style properties for headers 1, 2, 3, 4.
3. In the main.css file provide style properties links and tables.
4. In Eclipse, project part4.2.html – folder html open a new HTML file MyHtmlStyle.html.
5. In the head section provide a link-reference to the main.css file:
6. In the body section create headers, tables and links.
7. Provide the links to 5-6 sections in this tutorial.
8. Add content, create two more pages like that (each refers to the same CSS file) and connect all three pages with the links.
9. Email css and html files to dean@ituniversity.us
We invite you to create your own questions and answers (QnA) to increase your rank and win the Top Creativity Prize!
alt="faceBehindTheGlass" width="100" height="80">
