I am here to help you to learn HTML5.
To learn to create a dynamic website, we need to learn:
HTML4 basics and then the new advanced features of HTML5.
CSS (Cascading Style Sheets) for applying styles to webpage, in which we will be learning standard CSS and new CSS3 features.
JavaScript – used for processing of the site.
Here HTML5 is used for the markup purpose i.e. the layout and presentation .CSS is used for styling purpose and JavaScript is used for functioning of the webpage. For eg: it may be used for some calculation or some processing to be done.
Considering that you know basic html, let us discuss some HTML BASICS
HTML stands for Hypertext Markup Language.
Markup Language means a language having markup tags.
HTML document has the extension “.html” or “.htm”.
HTML document is also called as webpage.
HTML is not a programming language, but is the language only used to create a layout or a presentation of a webpage. For processing of a web page other languages are used.
World Wide Web Consortium creates the standards for HTML.
CSS is used to style the HTML pages.
HTML uses tag elements.
Tag elements are the keywords (tag names) enclosed in angle brackets.
Content shown on the webpage is wrapped in an open and closing tag.
For Eg see below: [code language=”html”]<h1>This is the header tag</h1>[/code]
[code language=”html”]<h1>—-</h1>[/code] Above tag is the heading tag. When you use it, the content will be shown in big size and in bold below
Introduction to HTML
Tags can be paired or unpaired.
Paired means, start tag have a closing tag with a trailing slash “/” before the keyword.
For Eg some of the paired tags are listed below
Paragraph tag
<p>------</p>
Heading tag
<h1>---------</h1>
Italic tag
<i>-----------</i>
Bold tag
<b>-------</b>
Unpaired means, start tag do not have a closing tag.
These are also called as singleton tags or void elements.
For Eg some of the unpaired tags are listed below
Break tag
<br>
Horizontal tag
<hr>
Image tag
<img>
HTML Document Layout :
Let’s see the layout of the HTML document.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>Hello World!</p> </body> </html>
Now it’s time to understand this code.
HTML document is divided into 2 sections: 1. Header section 2. Body section.
<DOCTYPE html> is the first element on page.
It is not a tag. It’s just the instruction as to which version of html/xml/any other language is used.
<html> html is the first staring tag of the html document, indicates the start of html document.
<head>—-</head> these tags form the header section of the html document.
<title>—-</title> these tags are in the header section which contains the page title. This “Page Title” is the title given to the webpage and is shown on the browser tab or on the title bar, when the webpage is browsed.
It is very useful in search engines, to search for particular information.
<body>——-</body> next section is the body section, which contains the main content of the webpage.
</html> this tag indicates the end of html document.
Block Elements & Inline Elements :
Now let us discuss the concept of block elements and inline elements.
What are Block Elements?
Block level elements creates a large block of content.• Block level elements creates a large block of content. Whenever these elements are used, the content between them always starts on a new line, and again a line is left after the content. The content also consumes the whole width available. I will explain this with a simple example.
See the html document code here and then the output below it.
<html> <head> <title>Block Element</title> </head> <body> <h1>This is h1 header tag</h1> <h2>This is h2 header tag</h2> <h3>This is h3 header tag</h3> <h4>This is h4 header tag</h4> <h5>This is h5 header tag</h5> <h6>This is h6 header tag</h6> </body> </html>
Here you can see, in above code, we have used six header tags in the body section, without using any brake tag <br> in between to leave the line. Still every header line has been started on a new line. Next observation is that, each header consumes the whole width available.
Other examples are : <p> Paragraph tag, <form> Form tag etc.
Inline Elements
Inline elements are totally opposite to block elements. The content in these tags do not start on a new line. These tags can be placed aside other element. They do not occupy the whole available width. Let us study it with an example. Just view the code and output below
<html> <head> <title>Inline Element</title> </head> <body> <h1>Welcome to HTML5</h1> <br><br><br> <b><i><font color="red">This is example for inline tags</font></i></b> </body> </html>
Here the line, “This is example for inline tags” in the output is highlighted in bold format. At the same time, it is red in color and also in italic format. More than one tags are applied to this line and in the same line as shown in code. No new line is required.
Element Attributes :
Attributes are the properties given to the tag elements. Attributes provide additional information about an element. Attributes are always specified in the start tag. Most attributes are name-value pairs separated with an “=”. For Example <font face=”Times”, color=”red”>Attributes</font>
Attributes will look like this: Attributes
face and color are the attributes of the and “Times” and “red” are there values respectively.
Other Common Attributes ::
Some more common and useful attributes are listed below
- style – Styling can be done via “style” attribute. We will learn it in detail later.
Eg : <p style=”color:red”> This paragraph will be red</p> - id and class – Specifies identification to an element.
- You can identify any element using the “id” attribute. In above case you can identify a paragraph.
title – Adds extra information about an element. It is also displayed as tooltip in some browsers.Eg : <a href=”http://google.com” title=”Click to go to Google”> Google</a>
Eg : <p id=”mypara”>This paragraph has an id</p>
The notepad file containing the code and the browser output is shown below :
In these code, <p>——–</p> is paragraph tag, <a>———</a> is the anchor tag used to create hyperlinks. “href” and “title” are the attributes of anchor tag and “http://google.com” and =”Click to go to Google” are there values respectively.
You can see “Google” in the output. When you click on it, you will be redirected to www.google.com
How to show images in HTML?
To show image in HTML document, you have to use <img> tag. <img> is a singleton tag i.e. without ending tag. <img> has attributes like below
- src – it gives the source of the image, the complete path of the image.
- alt – it is the alternative text to be shown. It is shown in the situation, in which, there is some problem in showing the image.
For example : <img src=”D:Documents and SettingsShriDesktopdownloadMusicgroup_music.jpg” alt=”group-music”/>
The notepad file having code and the browser output is shown below.
Separate and style your HTML :
You can style your HTML documents with “style” attribute or by using CSS (Cascading Style Sheets). CSS is preferred for styling, but in this tutorial, we will use inline style attribute. For styling the any content, we love to give different styles to different information. For styling HTML content we have to separate the content to apply different styles. Content in an HTML document can be separated using <div> tag or <span> tag.
Let’s see an example of how to divide the content and consider it as one block.
<div style=”padding:5px; background-color:black; color:white;”> <h1>Your Heading</h1> <p>This is your paragraph</p> </div>
Output is shown below :
Style Attribute Selectors
First of all, we will learn the general syntax for style attribute. Since, it is an attribute; it has to be used with any tag. We will learn it using paragraph tag.
Syntax : <p style=”selector:value;”>Some text</p>
Some common selectors and values are :
color:red;
background-color:blue;
background-image:some_image.jpg i.e. location of the image.
padding:5px;
margin:5px;
display:block;
border-style:solid;
border-color:black;
border-width:1px;
Note: You can use border-style, border-color and border-width in a short hand way like this:
border:solid black 1px;
This indicates that, the border-style is solid, border-color is black and border-width is 1px.