HTML 5 Programming and Web development/Print version

From Wikibooks, open books for an open world
Jump to navigation Jump to search


HTML 5 Programming and Web development

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/HTML_5_Programming_and_Web_development

Permission is granted to copy, distribute, and/or modify this document under the terms of the Creative Commons Attribution-ShareAlike 3.0 License.


HTML 5 Elements

HTML Tags[edit]

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.

<b>Bold text</b>

The output would look like this:
Bold Text

End Tag[edit]

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[edit]

Empty tags are tags which have no content.For example.

<b></b>

This tag has no content in it so therefore it is an empty tag.A more appropriate way to write an empty tag is:

<b/>

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[edit]

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[edit]

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>

Nested Elements[edit]

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 <br/>

List of HTML 5 Elements[edit]

Note this is just a short list of elements:

  • <p>
  • <input>
  • <table>
  • <body>
  • <header>
  • <nav>
  • <article>

Example of a well formed HTML document[edit]

about:blank

<!doctype html>
<html>
  <head>
 <meta charset="utf-8"/>
  <title></title>
  </head>
  <body>
  </body>
</html>

The <!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[edit]

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[edit]

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[edit]

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.

Special Attributes[edit]

HTML 5 has some special attributes that I must point out.

The Id Attribute[edit]

The Id attribute is a unique Identifier for the element.The Id property becomes very useful when using CSS and JavaScript.An example of the Id Attribute.

<form id="htm_form">
</form>

The name Attribute[edit]

The name Attribute specifies a name for an element.Conventionally groups if elements can have the same name.

The class attribute[edit]

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 <!doctype html>

Example of doctype in HTML 5[edit]

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

The doctype must always be at the top of the document.

Document without doctype[edit]

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[edit]

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[edit]

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[edit]

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[edit]

The HTML title element is used to specify the title of the document.The syntax for the title element is: <title>Document title</title>

HTML meta Element[edit]

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

Author:WikiGuy

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[edit]

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[edit]

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.

Name Business
John Doe OrgoCo
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.

Other Elements[edit]

There are many elements that are used in HTML 5 this includes:

  • hyperlink
  • images
  • textbox
  • button
  • marquee
  • span
  • div
  • section
  • canvas
  • video
  • audio

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 β. Example:

<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[edit]

Bold and italics text in HTML are created using the <b> and <i> respectively.These are used in paragraphs to make text bold and to italicized.

Bold text[edit]

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[edit]

Italicized text are used for many purposes in word processing documents to get a Italitized text in HTML use the <i> tag.



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[edit]

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.