HTML 5 Programming and Web development/Print version
| This is the print version of HTML 5 Programming and Web development
You won't see this message or any elements not part of the book's content when you print or preview this page.
HTML 5 Elements
In HTML a tag is created by putting the tag names in angle brackets like this: <Tag> The word in brackets, in this case Tag, is the Tagname. HTML 5 along with the other versions of HTML, have special tag names that we will learn about throughout this book. An example of an HTML 5 tag is b.This tag creates a bold text and it is written like this.
The output would look like this:
An end tag is the tag that comes at the end of the element.In an end tag the element's name is preceded by a slash(/). An example of an end tag is the </b> tag used in the previous example. Reasons for using an end tag include:
- To signify the end of an element's content.
- To give the document the a good layout structure.
- To enable nested elements.
Empty tags are tags which have no content. For example.
This tag has no content in it so therefore it is an empty tag.A more appropriate way to write an empty tag is:
By omitting the end tag and putting the slash at the end of the start tag instead. The most commonly used empty tags in HTML are:
<br/>-linebreak <hr/>-horizantal rule <input/>-HTML 5 input element. <meta/>-meta information element
The HTML Element
The HTML Element is everything from the start tag to the end tag. HTML 5 has different kinds of elements that we will learn about throughout this course.
How to write an HTML Element
To write an HTML Element we first write the start tags
<title>. Then we write the content of the Elements
My first HTML Page.Then we write the end tag.
</title>. When you put it together you have an HTML element.
<title>My first HTML 5 page</title>
The content of an HTML element can be another element,when this happens it forms a nested element for example:
<head> <title>My first HTML tag</title> </head>
NB.New line character is ignored in HTML 5 So
<b> This is A multiline Line Text. </b>
Would actually render like this:
This is a multiline text
And would therefore be a single line text.To achieve multi line we actually use the line break
List of HTML 5 Elements
Note this is just a short list of elements:
Example of a well formed HTML document
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> </body> </html>
<!doctype html> is the Document type Definition which we will learn about subsequently.
HTML 5 Attributes
HTML 5 attributes are created using a name-value pair and are usually put alongside the tag name.
Name-value pairs are represented by a set of text strings in which
name="value" and are usually separated by commas,semicolons,space or newline character.
Writing HTML 5 Atrributes
HTML 5 attributes are written inside the element's tag and separated by spaces. For example:
<input type="text" value="hello Web"/>
In this code the attributes are type and value and their values are "text" and "hello Web" respectively.
What do Attributes do
Attributes give extra information about an element for example in the input element the attribute type gives the type of input, so if he had
type="button" we would get a button instead of a textbox.Attributes are very important to HTML and without them Web development would be probably much harder.
HTML 5 has some special attributes that I must point out.
The Id Attribute
<form id="htm_form"> </form>
The name Attribute
The name Attribute specifies a name for an element.Conventionally groups if elements can have the same name.
The class attribute
This specifies the style class under which an element falls. NB:An Attribute can also be called a property
HTML 5 Doctype
The HTML 5 Document Type Definition (Doctype) is used to identify the type of markup document. conventionally doctypes are written like this
<!doctype root-element PUBLIC [FPI] [URI]>
Where in this case the root-element would be HTML.FPI stands for formal public identifier.
However in HTML 5 the Doctype is just written
Example of doctype in HTML 5
<!doctype html> <html> <head> </head> <body> </body> </html>
The doctype must always be at the top of the document.
Document without doctype
Documents without doctype would work in most browsers ,but would not be classified as a valid document.(see Validation).
HTML 5 Comments
A comment in HTML is an area of text that ignored by the browser.In an HTML comment,you can write anything These are some examples of comment.
<!--This is a comment--> <!--I love HTML--> <!--London bridge is burning down>
Comments written in angle brackets with an exclamation mark at the start followed by two hyphens(minus sign) and ending with two hyphens.
Reasons for comments
Comments in HTML are conventionally used as.
- A directive to show viewers of the source code what it does
- To insert Information about the document that viewers of the source code should know such as license and author's information
Head and Body Elements
The HTML element
the HTML element is the root element of a document.Every other element in the document must be inside the HTML element. the HTML element is divided into two main elements. the head and body elements
The HTML head Element
The HTML head element is where content not visible on the page is stored these include:
- HTML title element
- HTML meta element
- HTML link element
- HTML style element
and lots more.
The HTML title element
The HTML title element is used to specify the title of the document.The syntax for the title element is:
HTML meta Element
The meta element is an example of an empty element it usually contain two attributes name and content. For example if I wanted to store the following in a meta tag
Then we would write the following:
<meta name="Author" content="WikiGuy"/>
The meta element can also contain other attributes such as charset and http-equiv that we will learn about subsequently
The HTML body element
The HTML body element is where every element visible to the user is kept.These include paragraphs,tables and other page content.
HTML 5 tables and Paragraphs
HTML 5 tables can be used in many ways, the most obvious of which is to order data. Tables are used in many webpages for many other reasons that are not very obvious.
<body> <table border="1"> <tr> <td>Name</td> <td>Business</td> </tr> <tr> <td>John Doe</td> <td>OrgoCo</td> </tr> <tr> <td>Mary Jane</td> <td>Simple inc</td> </tr> </table> </body>
The above was an example code for an HTML 5 table.and the following would be what it looks like.
|Mary Jane||Simple inc|
HTML 5 paragraphs are used for writing a group of sentences together in paragraph form.The output would look like any normal paragraph.
There are many elements that are used in HTML 5 this includes:
N.B:Even though audio is not a visual element it most be included in the body.
HTML 5 Paragraphs
In HTML 5 a paragraph is created using the
<p> tag.HTML paragraphs are used on almost all web pages .They have many purposes, the simplest of which is for writing paragraphs.
In HTML 5 and other related markup languages such as SGML and XML the ampersand(&) and the semicolon (;) is used to encode symbols not found on the keyboard such as sum(∑) and Greek letters such as α and β.
<p> This is the first sentence. This is the second sentence This is the third sentence. </p>
The output looks quite like this:
This is the first sentence. This is the second sentence This is the third sentence.
Bold and Italics
Bold and italics text in HTML are created using the
<i> respectively.These are used in paragraphs to make text bold and to italicized.
Bold text is usually used to emphasize text in a document.In any document it is often times important to emphasize important information such as important research topics ,very important names and just about anything you want to put emphasis on.
Italicized text are used for many purposes in word processing documents to get a Italitized text in HTML use the
Links and External Documents
HTML Documents are usually linked together. Links can be formed by clickable texts called Hyperlinks. A document can also be linked to external documents such as stylesheets using the <link> tag.
Hyperlinks are formed by using the <a> tag, The a tag has an attributed href, which is the URL of the link.
<a href="en.Wikipedia. org"> Wikipedia, the free Encyclopedia</a>
The code above provides a link to the Wikipedia page. It will display a link as follows. Wikipedia, the free encyclopedia The text with the tag is displayed on screen and the href has the URL.