REVISED: Monday, January 13, 2014
CONTENTS:
I. INTRODUCTION TO CREATING YOUR FIRST WEBPAGE USING HTML5, CSS3 AND AJAX
II. TEXT EDITOR AND BROWSER
III. BASIC ELEMENTS
IV. TITLE TAG
V. EMPTY ELEMENTS
VI. ATTRIBUTES
VII. COMMON HTML5 AND CSS3 ELEMENTS
VIII. INTRODUCTION TO INLINE CSS3
IX. DO NOT CONFUSE THE BROWSER
X. HTML5 AND CSS3 EXAMPLE SOURCE CODE
XI. HTML5 AND CSS3 EXAMPLE OUTPUT
YOU WILL LEARN:
1. HTML5 elements.
2. HTML5 tags.
3. HTML5 empty elements.
4. HTML5 and CSS3 Forms.
5. Inline CSS3.
6. How to create your first Web page!
I. INTRODUCTION TO CREATING YOUR FIRST WEB PAGE USING HTML5, CSS3 AND AJAX
Welcome to the “Create Your First Web Page Using HTML5, CSS3 and AJAX Tutorial.”
This tutorial walks you through the step by step process of building your first web page. You will be using the Hypertext Markup Language (HTML5), Cascading Style Sheets (CSS3) and AJAX.
HTML5 is the successor to HTML. HTML5 extends HTML, and makes it XML compliant. Using HTML5 encourages you to be more precise and express yourself clearly so browsers do not have to do as much guessing as they would if your Web page was written only in HTML.
HTML5 is the successor to HTML. HTML5 extends HTML, and makes it XML compliant. Using HTML5 encourages you to be more precise and express yourself clearly so browsers do not have to do as much guessing as they would if your Web page was written only in HTML.
The emphasis of HTML was presentation. The emphasis of HTML5, which is a subset or application of XML, is: presentation, structure and compatibility.
HTML5 and CSS3 used together reduce the need for third-party plugins. Therefore, people who visit your Website; do not have to download the latest versions of plugins.
The example program included in this tutorial has a link at both the top and bottom to the W3C Markup Validation Service Web page. Click the “Validate By Direct Input” tab at this Web page and you can “copy paste” your HTML5 into the Validation Service program and see if it passes the W3C validation check.
The goal of this tutorial is to help you have fun creating Web pages.
II. TEXT EDITOR AND BROWSER
STEP 1
"Right mouse click" on your "Desk Top"; select "New"; select "Folder"; rename the "New Folder" "Web Page".
STEP 2
Open any text editor. If you are using Windows you can click:
STEP 2
Open any text editor. If you are using Windows you can click:
Start > Programs > Accessories > Notepad
I use Notepad++. You can use any text editor; however, do not use a Word processor, a Word processor is not a text editor.
After you open the text editor type what you want displayed on your first web page, for example, “Hello world!" "Left mouse click": "File", then “Save As”, then “Desktop”, then look for and select the "file folder" you created named "Web Page". By "File name:" name the file you just created "index”. By "Save as type:" select "Hyper Text Language Markup file (*.html)". "Left mouse click" "Save" and your index.html file will be saved to the "Web Page" file folder on your Desktop.
STEP 3
Open any Internet browser, for example, “Mozilla Firefox” or “Windows Internet Explorer.” Minimize the browser window so you can see both the desktop and your browser window. Drag and drop the file you just created onto the browser window and your browser will create an icon on your Desktop named "index" for your index.html file. "Double left mouse click" the "index icon" on your Desktop and the browser will display your web page.
Congratulations, you have created your first Web page!
STEP 4
All browsers are not the same; therefore, if your file is not HTML5 compliant there will be minor differences in what and how the browser displays. If you are creating a web page for yourself, browser selection and HTML5 compliance might not be a problem. However, if you plan to create web pages which will be used by other people, you need to be aware web page "look and feel" might be different on different browsers. To help prevent this difference we are using HTML5 and showing you how to test to see if you are HTML5 compliant.
STEP 4
Open the index.html file you created. Now you can start making changes to your web page by editing your file. After you have made changes left click “Save” to save the file or simultaneously depress the control key and the letter “s” key, (CTRL+s), which also saves the file. Then refresh your browser by pressing “F5” and your browser will display the changes you made to your web page.
The rest of this tutorial talks about ways to improve the presentation, structure and compatibility of your Web page.
A. PRESENTATION
Presentation means if you have a restaurant you do not want advertisements that show you selling a steak; you want advertisements that show you selling the steak’s sizzle. In other words, you want potential customers to become hungry for your steak, and think about the steak’s sizzle until they become so hungry they have to come to your restaurant.
B. STRUCTURE
Structure refers to the syntax of your HTML5. You want your HTML5 to be compliant with industry standards. Run the example program and you will see the example has passed the industry standard test. While you are learning HTML5, I highly recommend using the validity test facility located at the link at the top and bottom of the example.
C. COMPATIBILITY
Compatibility means being able to run your HTML5 on any and all browsers, including mobile telephone browsers.
B. STRUCTURE
Structure refers to the syntax of your HTML5. You want your HTML5 to be compliant with industry standards. Run the example program and you will see the example has passed the industry standard test. While you are learning HTML5, I highly recommend using the validity test facility located at the link at the top and bottom of the example.
C. COMPATIBILITY
Compatibility means being able to run your HTML5 on any and all browsers, including mobile telephone browsers.
III. BASIC ELEMENTS
A container element consists of two tags, an opening start tag and a closing end tag. Tags are enclosed in angle brackets “< and >.” The forward-slash “/” is used to end an element. HTML5 is case sensitive and all HTML5 elements must be in lower case. Container elements can be nested, which means container elements can contain other container elements.
The <html> container element would start and end as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
As shown below, within the beginning and ending of the <html> container element place all the other elements which make up the Web page. For example, the <head> container element and the <body> container element. Order counts, think of <html> as a container box, inside the <html> container box you place both the <head> container box and the <body> container box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY FIRST WEB PAGE!</title>
</head>
<body>
<p>Hello world! This is my first Web page!</p>
</body>
</html>
The <head> container element will contain the Title, the Java Script, the Cascading Style Sheets (CSS), the titles, icons, etc.
All HTML5 documents must have one <body> container element. The <body> element contains the visible content of the Web page. (Always wrap text shown in the body. For example, the <p></p> paragraph wrapper is used above.) These three container elements: <html>, <head>, and <body> are the basic container elements that make up the general structure for every Web page.
IV. Title TAG
The <title> element is placed inside the <head> container element and is used to display a browser window title. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SECOND WEB PAGE!</title>
</head>
<body>
<p>Hello world! This is my second Web page!</p>
</body>
</html>
After typing the <title> element as shown above, simultaneously depress the control key and the letter “s” key, (CTRL+s), to save the text editor file. Refresh your browser by pressing “F5” and your browser will display the new browser window title.
All HTML5 documents must have a <head> container element that must contain one <title> element.
V. EMPTY ELEMENTS
Not all elements use the “<…> and </…>” start tag and end tag format. Empty elements simultaneously open and close. For example, the <br /> element is a single tag used to insert a line break. Notice there is a single space before the forward slash ( /).
VI. ATTRIBUTES
Attribute values must always be quoted.
VII. COMMON ELEMENTS YOU WILL WANT TO USE
<code></code>
Code for a computer program, will be rendered in a fixed-width font.
Comments will not be visible to the reader.
<del></del>
Delete text
<div></div>
Division, places content in its own area on a page.
<em></em>
Emphasize, italic print.
<form></form>
Used to create a HTML5 push button link; for example:
<FORM>
<INPUT TYPE="BUTTON" VALUE="C TUTORIALS " ONCLICK="window.location.href='http://www.elcric1circle.blogspot.com/'">
</FORM>
Used to create the following button:
As shown above, it is very easy to create Web forms when you use HTML5 and CSS3.
<img src="avatar.gif" width="100" height="100" />
Image, for example icons or pictures.
I assumed you are a beginner; therefore, for this tutorial the avatar.gif was located on my desktop. To use this feature on your beginner Web page, copy and paste any .gif picture to your desktop, and replace the avatar.gif in the example above, with your .gif name.
When you feel comfortable with Web page design you do not want to continue using the above beginner approach to images. You want to graduate to uploading your images to a Web site and referencing the URL of that Web site as shown below:
<img alt="Oops no avatar.gif!" src="https://sites.google.com/site/elcricottocircle/TUTORIAL-TOPICS/images/avatar.gif" />
Insert text
<p></p>
Paragraph wrapper used to wrap text in the body.
<pre></pre>
Preformatted, fixed-width font, preserves spaces and carriage returns; they will be rendered exactly as you type them.
Bold print.
<title></title>
Every HTML document needs a title.
VIII. INTRODUCTION TO INLINE CSS3
CSS3 stands for Cascading Style Sheets and is used to control the style and layout of Web pages. HTML5 is for content. CSS3 is for presentation.
There are three ways to use CSS3.
External when you want style and layout to apply to an entire Web site. For external the CSS3 is placed inside a CSS3 file.
Internal when you want style and layout to apply to one Web page. For internal the CSS3 is placed inside the Head section of a HTML5 Web page.
Inline when you want style and layout to apply to a single HTML5 tag. For inline the CSS3 is placed inside a HTML5 element.
For this CSS3 introduction I will only be using inline examples; for example:
<br />
<div style="color: blue; font-family: times; font-size: 15px;">A very small paragraph.</div><br />
<br />
<div style="text-align:center;">"something"</div><br />
IX. DO NOT CONFUSE THE BROWSER
A. XML DECLARATION AND DOCTYPE
The following XML declaration and doctype must preceed each of your html files.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Notice the last line shown above opens the <html> element. The last line of your Web page will be the closing tag </html>.
B. NESTING
Always properly nest text-level tags within block-level tags. Block-level tags include h tags, paragraph tags, and list tags which force content that follows them to a new line. Text-level tags include font, strong, b, em, and i which are used to add formatting to sections of text.
C.
HTML5 SPECIAL CHARACTERS AND SYMBOLS
Do not use "less than" (<) , "greater than"(>) , or "ampersand" (&) signs in your text; the browser will think they are HTML5 tags. (If your browser is showing a strange symbol for the ampersand refer to the ampersand link for an explanation. There are at least two different symbols commonly used for an ampersand.) Also, Google Blogger "Compose" does not display the same results as "View", which can drive you crazy until you get used to it.
The following is a description of some of the more commonly used "HTML5 special characters and symbols" you have to type "in your HTML", not in your "text":
Use when you want a non-breaking space.
Use < when you want the (<) "less than" symbol;
Use > when you want the (>) "greater than" symbol;
Use & when you want the ampersand;
Use " when you want the quotation mark.
Notice, the ampersand (&) means beginning a special character.
And, the semicolon (;) means ending a special character.
The letters between the ampersand (&) and the semicolon (;) abbreviate what the special character does.
To display a less than sign you can also type <
To display a greater than sign you can also type >
To display a ampersand sign you can also type &
To display a cent sign type ¢ or ¢
To display a copyright sign type © or ©
To display a registered trademark sign type ® or ®
To display a trademark sign type ™ or ™
Notice the placement of the semicolon (;) it must appear as shown in the examples above.
D.
LOWER CASE
Type all element and attribute names in lower case letters.
E.
QUOTES
Attribute values must be quoted.
F. OPEN TAGS AND CLOSE TAG
Always use both the left open tag angle bracket (<) and the right close tag angle bracket (>) with each of the container tags in an element and the single tag empty element. When you open a container tag you must close the container tag and when you open an empty element you must close the empty element.
G.
ALWAYS WRAP HTML5
Do not put HTML5 directly in the body of your document, always wrap HTML5 in a container element; e.g., <p></p> or <div></div>.
X. HTML5 SOURCE CODE EXAMPLES
The HTML5 source code, shown below, are examples of some of the coding techniques discussed in this tutorial.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY TITLE</title>
</head>
<body style="background-color:PowderBlue;">
<br />
<p>
<a href="http://validator.w3.org/check"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
<p><img src="avatar.gif" width="100" height="100" alt="Oops no avatar.gif" /></p>
<br />
<p><strong>Elcric Otto Circle</strong></p>
<br />
<p><em>THE SKY IS FALLING!</em></p>
<br />
<p><strong>RUN FOR YOUR LIFE!</strong></p>
<br />
<p><cite>The cat said, "The mouse did it!"</cite></p>
<br />
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
<br />
<p>We need to know the <abbr title="standard operating procedure">SOP</abbr> </p>
<br />
<p>
<a href="http://www.w3schools.com/tags/ref_colornames.asp">
Link to a HTML color chart.</a></p>
<br />
<p>
<a href="http://www.w3schools.com/tags/ref_colornames.asp">Link to a HTML color chart.</a> This is a link to a HTML color chart.
</p>
<br />
<p>©</p>
<br />
<p>Never use a &lt; or an & directly in your content.</p>
<br />
<p>Never use a &#60; or an & directly in your content.</p>
<br />
<!-- This comment is not visible to the reader. -->
<br />
<p>My first Web page.</p>
<br />
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<br />
<h1 style="text-align:center;">Center-aligned heading</h1>
<br />
<!-- This is a comment
spread over two lines. -->
<br />
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p>The symbol for water is H<sub>2</sub>0.</p>
<br />
<p>E=MC<sup>2</sup></p>
<br />
<div style="color:#FF00FF">
<h1>Header 1<br />
My first Web page.</h1>
<h2>Header 2.<br />
My first Web page.</h2>
<h3>Header 3.<br />
My first Web page.</h3>
<h4>Header 4.<br />
My first Web page.</h4>
<h5>Header 5.<br />
My first Web page.</h5>
<h6>Header 6.<br />
My first Web page.<br /></h6>
<p>A paragraph.</p>
</div>
<br />
<p>
<a href="http://validator.w3.org/check"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
XI. TEXT CREATED BY THE ABOVE HTML5 SOURCE CODE
Remember what I said about:
<img src="avatar.gif" alt="Oops no Avatar.gif!"/>
For this tutorial the avatar.gif was located on my desktop.
To use this feature on your Web page copy and paste any .gif picture to your desktop and replace the avatar.gif in the example above with your .gif name. If you forget, instead of my handsome picture, you will end up with an empty box.
To use this feature on your Web page copy and paste any .gif picture to your desktop and replace the avatar.gif in the example above with your .gif name. If you forget, instead of my handsome picture, you will end up with an empty box.
Elcric Otto Circle
THE SKY IS FALLING!
RUN FOR YOUR LIFE!
The cat said, "The mouse did it!"
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
We need to know the SOP
©
Never use a < or an & directly in your content.
My first Web page.
A paragraph.
Center-aligned heading
This is subscript and superscript
The symbol for water is H20.
E=MC2
Header 1. My first Web page.
Header 2. My first Web page.
Header 3. My first Web page.
Header 4. My first Web page.
Header 5. My first Web page.
Header 6. My first Web page.
A paragraph
A very small paragraph.
YOU HAVE LEARNED:
1. HTML5 elements.
2. HTML5 tags.
3. HTML5 empty elements.
4. HTML5 and CSS3 Forms
5. Inline CSS3.
6. How to create your first Web page!
Elcric Otto Circle
1. HTML5 elements.
2. HTML5 tags.
3. HTML5 empty elements.
4. HTML5 and CSS3 Forms
5. Inline CSS3.
6. How to create your first Web page!
Elcric Otto Circle
-->
-->
-->
How to Link to My Home Page
It will appear on your website as:"Link to: ELCRIC OTTO CIRCLE's Home Page"
