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.
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
<!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.
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 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.
- 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.
- 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”/>
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 :
Syntax : <p style=”selector:value;”>Some text</p>
Some common selectors and values are :
background-image:some_image.jpg i.e. location of the image.
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.