HTML5 and CSS3 Fundamentals – Page Basics
INTRODUCTION
HTML5 technologies are the latest version of Hyper Text Mark Up Language (HTML), which has been made official by the World Wide Web Consortium (W3C) to be the new standards for the Internet and the future of both personal computing and mobile computing. The core reasons as to why HTML5 has been official standard for new both personal and mobile computing include:
- It supports the multimedia content with the provision of features that permits the scriptable rendering of 2D shapes. The HTML5 technologies aims at substituting Rich Internet Application (RIA) technologies, such as the Adobe Flash technology.
- You dont have to install the plugins or player applications, as was the case with previous HTML technologies, to access and view multimedia content on your browser.
- HTML5 content can run on any type computer system. This technology can help you run content on any mobile device—whether it is an an iPhone, an Android devices, an iPad, a tablets or any smartphones– which cannot run Flash applications.
- It is easy to use as it provides an interactive platform to help in the creation of presentations and websites that can be designed with minimal effort.
What about CSS3?
Well,CSS3 is the latest version of Cascading Style Sheets(CSS). CSS is a style sheet language that describes the presentation of a document written which is written in HTML. The CSS3 technology helps in the development of more visually engaging web pages and applications that can run on modern browsers.
So, do you want to learn more about HTML5 and CSS3? Let’s dive in and find out more about these technologies.
BASIC HTML
Page Basics
Any HTML document that you’ll create must begin with some text. It can be a new text—that you enter when creating the new document—or, it can be an existing test—for which you are converting to HTML format.
The basic HTML document has the following structure:
<!DOCTYPE html> <HTML> <HEAD> <TITLE>Your Page Title Goes Here </TITLE> </HEAD> <BODY> <H1> An example of a tag</H1> <P>An example of a tag</P> </BODY> </HTML>
Here is what you need to know about the significance of each of the above structure:
- The DOCTYPE declaration shows that the document type we are creating is an HTML document. This declaration will help your web page to be displayed correctly by the web browser.
- Your content that you wish to display in a web browser is inserted between the <HTML> and </HTML>.
- The content that is inserted between <HEAD> and </HEAD> gives information about the web page. This content is not displayed in a web browser.
- The content that is inserted between <TITLE> and </TITLE> indicates the title of the page.
- The text that is inserted between the <BODY> and </BODY> is what will be shown in a web page.
- The text that is inserted between <H1> and </H1> indicates a heading
The main function of HTML tranforms a simple document that can be viewed in a web browser. This is achieved by the use of tags. The HTML tags indicates to the browser where to begin and end the special formatting. In other words, the tags are used to provide “mark ups” on the web browser.
HTML tags are bracketed commands that uses the “less than” and “greater than” signs (< and >). For instance the tag to begin a paragraph is <P>. To show or mark up the end of paragraph formatting, the same tag is used with a slash (/)after the first bracket. The end of the paragraph will be </P>. The start tag is often referred to as the opening tag while the end tag is referred to as the closing tag.
So, how do you write HTML pages? Well, HTML pages can be created and edited using an editor. Example of Editors that you can use include:
- Notepad (For Windows OS)
- Text Edit (For Mac OS)
- Microsoft WebMatrix
- Sublime Text
- Notepad (For Windows OS) and Text Edit (For Mac OS) are the most commonly used Editors for creating and editing HTML contents for learning purposes. To use Notepad of Text Edit, here are the steps that you need to follow:
- Open your Notepad or Text Edit application.
- Write your HTML content in the Notepad or Text Edit.
- Save the HTML page using the .html file extension.
- View the HTML page in your browser.
Text Basics
Now that you’ve learnt the basic structure of all HTML documents, it’s now time to dig in and find out more about HTML tags. The main function of HTML tags is to indicate to the browser where to begin and end the special formatting. In other words, the tags are used to provide “mark ups” on the web browser.
What is written between the starting and ending tag is called HTML element. For instance, the code:
<p>This is a paragraph.</p> has “This is a paragraph” as an HTML element.
Sometimes HTML elements can be nested. Nested HTML elements are elements that contain other elements. It is important to note that all the HTML documents always contain nested HTML elements. For instance the HTML code below contains nested HTML Element:
<!DOCTYPE HTML> <HTML> <BODY> <H1>This is Heading 1</H1> <P>This is a paragraph.</P> </BODY> </HTML>
The table below shows the most commonly used tags and their functions:
Tag | Description |
<!–…–> | Describes a comment |
<!doctype> | Describes the document type |
<a> | Describes a hyperlink |
<abbr> | Describes an abbreviation or an acronym |
<address> | Describes the contact information for the author when used in an HTML document |
<area> | Describes the area inside the image-map |
<article> | It provides a description of the article when used in HTML page |
<aside> | It provides a description of the content from the page when used for the content in HTML page |
<audio> | Describes the sound content |
<b> | Describes a bold text |
<bdo> | It overrides the current text direction |
<blockquote> | Describes a section which is quoted from another source |
<body> | Describes the document’s body |
<br> | Describes the single line break |
<button> | Describes a clickable button |
<canvas> | It is used to draw graphics, on the fly, via scripting (usually JavaScript) |
<caption> | It describes a framework for the table caption |
<cite> | Describes the title of a a given work |
<code> | Describes a piece of the computer code |
<div> | Describes a section in a document |
<dl> | Describes a description list |
<dt> | Describes a term/name in a description list |
<em> | Describes emphasized text |
<embed> | Describes a container for an external (non-HTML) application |
<fieldset> | It describes the groups for the related elements in a form |
<figcaption> | Describes a caption for a <figure> element |
<figure> | Specifies self-contained content |
<footer> | Describes the footer for a document or section |
<form> | Describes an HTML form for user input |
<h1> to <h6> | Describes HTML headings |
<head> | Describes information about the document |
<header> | Describes a header for a document or section |
<hr> | Describes a thematic change in the content |
<html> | Describes the root of an HTML document |
<i> | Describes the part of a text using an alternate voice |
<iframe> | Describes an inline frame |
<img> | Describes an image |
<input> | Describes an input control |
<ins> | Describes a text that has been inserted into a document |
<kbd> | Describes keyboard input |
<keygen> | Describes a key-pair generator field (for forms) |
<label> | Describes a label for an <input> element |
<legend> | Describes a caption for the <fieldset> element |
<li> | Describes a list item |
<link> | Describes the relationship between a document and an external resource |
Text Formatting
All HTML text elements have a default style. This can range from a text color, to text size or font. Changing the HTML element from a default style to a style of your choice can be done using two methods. These methods are:
-Using HTML text formatting
-Using the style attribute
Using HTML text formatting
There are special element for formatting the text in HTML. These can be achieved by the following:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
For instance, the HTML <i> element is used to define an italic text.
The example below illustrates the use of Style attribute with font-size property:
<i>This text in this paragraph has been italicized</i>
Using the Style Attribute
The HTML style attribute has the following syntax:
style="property:value"
In this case, the property is a CSS property while the value is a CSS value. The color property describes the text color that is to be used for an HTML element:
The example below illustrates the use of Style attribute with color property:
<H1 style=”color:blue”>This is heading 1 whose color is blue</H1> <P style=”color:red”>Another paragragh whose color is red.</P>
The font-family property describes the font that is to be used for an HTML element:
The example below illustrates the use of Style attribute with font-family property:
<H1 style=”font-family:verdana”> This is heading 1 whose font is verdana</H1> <P style=”font-family:courier”> Another paragragh whose font is courier.</P>
The font-size property describes the text-size that is to be used for an HTML element:
The example below illustrates the use of Style attribute with font-size property:
<H1 style=”font-size:300%”>The font size in this heading should be 300% more than the default</H1> <P style=”font-size:160%”>This paragragh has 1.6 more of its font-size than the default.</P>
The text-align property describes the horizontal text alignment that is used for an HTML element:
The example below illustrates the use of Style attribute with font-size property:
<H1 style=”text-align:center”>This is an example of a centered heading</H1>
Lists
HTML lists can be grouped into 3 categories. These are:
- Unordered lists. These lists are used to group a set of related items in unodered format.
- Ordered lists. These lists are used to group a set of related items using a specific order.
- Description lists. These are lists that describes the items in a web page.
All the unordered lists in HTML starts with the <UL> tag. Once the <UL> tag has been defined, each of the list item will start with the <LI> tag.
The example below illustrates how unordered lists can be defined in HTML.
<UL> <LI>Georgia</LI> <LI>California</LI> <LI>New York </LI> </UL>
The ordered lists can be specified by using a type attribute that is added to the <OL> tag. The type attribute can assume either “A”, “a” and “1” for Upper case listing, small case listing, numbers listing respectively.
The example below illustrates how ordered lists can be defined in HTML.
<OL type=”1″> <LI>Georgia</LI> <LI>California</LI> <LI>New York </LI> </OL>
The description lists can be specified by the tag <DL> tag and the <dt> tag which describes the term and the <DD> tag which describes each term.
The example below illustrates how description lists can be defined in HTML.
<DL> <DT>San Diego</DT> <DD> A town in USA</DD> <DT>California</DT> <DD>A state in USA </DD> </DL>
Image Preparation
You’ve written HTML content and your website looks more convincing to the user. However, you’d like to add some images to make it more appealing. How do you proceed? Well, before you can insert any image in your HTML, you must first prepare that image.
Here is how you can prepare an image to be inserted in a web page:
- Copy the image that you’d like to use in your website to the same directory as the HTML file that you’ve created.
- Make sure the file format for that image is consistent with the browser that will open that web page.
- Use the <IMG> tag to insert the image in your HTML page.
Inserting Images
The <IMG> tag is used to insert images in a HTML page. The <IMG> tag has the following attributes:
- it is a text that describes an alternate text for the image that has been inserted in a web page.
- use-credentials. It allow images from third-party web-sites that can cross-origin access levels to be used with the canvas.
- It describes the height of the image
- It describes the image as a server side image-map
- It is the URL of the image
- It describes the width of the image
The example below illustrates how an image can be defined in HTML.
<IMG src=”peter namisiko.gif” alt=”Mr. Peter Namisiko” height=”50″ width=”45″>
Website Project
Create a professional website for an Online Classmate System. This website should have the following components:
- The title
- A portfolio for each user
- Links with the rollovers
- Should provide an aesthetic choices for the user
- A clear focal point
- Creativity
- Appropriateness for the purpose
Your site should have a minimum of 6 HTML pages.
CSS BASICS
Upto this point, we have learnt how HTML can help us create websites. Both HTML and CSS are essential in helping us to create websites. While HTML defines the structure of the web page, CSS defines the layout of the web page to be viewed on a variety of devices. CSS helps to separate the content from presentation when creating web pages.
This has the following advantages that include:
- It helps to keep the style in for a limited number of style sheets. This promotes the process of editing a portion or a section of a website.
- It helps to save on the bandwidth for the site owner as well as the visitor’s website since it improves the performance of the website.
- It makes it easier for the site owners to reuse their content that they have developed for other purposes. These content can be re-used as RSS feeds or text to speech conversion systems.
Now that you’ve understood the significance of CSS in HTML, it’s time to dive in and learn more about how to use CSS.
The CSS syntax set consists of a selector and a declaration block. The CSS declaration must always end in a semi-colon. For instance, all the <P> elements in the example below will be center-aligned and a red text color.
P { color: red; text-align: center; }
The main function of a CSS selector is to enable you to select and manipulate the HTML elements in your web page. For instance, in the above example, all <P> elements will be aligned at the center with a red text color.
The selectors can be grouped to minimize the code.
The example below illustrates how the selectors can be grouped.
H1 { text-align: right; color: red; } H2 { text-align: left; color: blue; } P { text-align: center; color: cyan; }
CSS Font Styles
The CSS font properties are used to describe the font family, the boldness of the text, the size, and the style of a text.
The text font is set with the font-family property. When using the font-family property, several font names can be used as a contingency measure such that when the browser cannot support the first font, then it tries the next font. The example below illustrates how the font-family property can be defined in HTML.
H1 { font-family: "Arial", Helvetica, sans serif; }
The font-style property is used to specify an italicized text in CSS where the property can assume either normal, italic or oblique. The example below illustrates how the font-style property can be defined in HTML.
H1.normal { font-style: normal; } H1.italic { font-style: italic; }
The font-size property is used to set the size of the text. The font-size value is either absolute or relative. In the absolute case, the font-size is set to fixed specified size while in the relative case, the font-size is set relative to other elements in HTML. The example below illustrates how the font-size property can be defined in HTML using absolute and relative methods.
H1 { font-size: 40px; } H1 { font-size: 200%; }
Colors
In HTML, the colors are defined using the RGB system (combination of Red, Green and Blue colrs). The color values for expressed in Hexadecimal numbering notation. The Hexadecimal values are written inform of 3 double digit numbers that starts with the # sign. For instance the Hexadecimal value “#000000” represents black color while the Hexadecimal value “#FFFFFF” denotes white color.
Based on the RGB color combinations, 16 million colors can be generated. The Hexadecimal color is specified with the Hexadecimal value: #RRGGBB, where the RR denotes the red color, GG denotes the Green color and and BB denotes the blue color. The example below illustrates how the font-size property can be defined in HTML.
H1 {background-color: #ff0000;} H2 {background-color: #00ff00;} H3 {background-color: #0000ff;}
The background color can be set for different elements in a HTML page. For instance the example below illustrates how the background color for the entire page can be set, with the elements <H1> and <P> having different settings:
BODY { background-color: #23DD22; } H1 { background-color: #00ff00; } P { background-color:#FFAA32; }
Link Styles
The CSS hyperlinks can be styled using property of CSS that include the color, the font-family and the background. The example below illustrates how the color property of CSS can be used to style a hyperlink.
A { color: #FF22CC; }
The text-decoration property of CSS is used to eliminate the underlines from the hyperlinks as illustrated in the example below:
A:link { text-decoration: underline; } A:visited { text-decoration: none; } A:hover { text-decoration: none; } A:active { text-decoration: none; }
The background-color property of CSS is used to indicate the background color for the hyperlinks. The example below illustrates how the background-color property can be used with hyperlinks:
A:link { background-color: #22FFDD; } A:visited { background-color: #F002C5; }
Website Project
Create a web site using the knowledge you have learnt in CSS. Your web site should contain least five, but no more than eight content pages including the home page. Use a style sheet that configures the text, the color, and page layout for your website. Your website should capture the following:
- The title
- A portfolio for each user
- Links with the rollovers
- Should provide an aesthetic choices for the user
- A clear focal point
- Creativity
- Appropriateness for the purpose
GET YOUR FREE HTML5 & CSS3 EBOOK!