Introduction to HTML Basics

0
810

I am here to help you to learn HTML5.

To learn to create a dynamic website, we need to learn:
   bullet-red-iconHTML4 basics and then the new advanced features of HTML5.
   bullet-red-iconCSS (Cascading Style Sheets) for applying styles to webpage, in which we will be learning    standard CSS and new CSS3 features.
   bullet-red-iconJavaScript – 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

bullet-go-iconWhat is HTML?

   bullet-red-iconHTML stands for Hypertext Markup Language.
   bullet-red-iconMarkup Language means a language having markup tags.
   bullet-red-iconHTML document has the extension “.html” or “.htm”.
   bullet-red-iconHTML document is also called as webpage.
   bullet-red-iconHTML 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.
   bullet-red-iconWorld Wide Web Consortium creates the standards for HTML.
   bullet-red-iconCSS is used to style the HTML pages.

bullet-go-iconTag Elements :

   bullet-red-iconHTML uses tag elements.
   bullet-red-iconTag elements are the keywords (tag names) enclosed in angle brackets.
   bullet-red-iconContent shown on the webpage is wrapped in an open and closing tag.
   bullet-red-icon For Eg see below: [code language=”html”]<h1>This is the header tag</h1>[/code]
[code language=”html”]<h1>—-</h1>[/code]    bullet-red-iconAbove tag is the heading tag. When you use it, the content will be shown in big size and in bold below

Introduction to HTML

   bullet-red-iconTags can be paired or unpaired.
   bullet-red-iconPaired 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

Heading tag


Italic tag

Bold tag

   bullet-red-iconUnpaired means, start tag do not have a closing tag.
   bullet-red-iconThese are also called as singleton tags or void elements.
          For Eg some of the unpaired tags are listed below

Break tag

Horizontal tag

Image tag

bullet-go-iconHTML Document Layout :
   bullet-red-iconLet’s see the layout of the HTML document.

   bullet-red-iconNow it’s time to understand this code.
   bullet-red-iconHTML document is divided into 2 sections: 1. Header section 2. Body section.
   bullet-red-icon <DOCTYPE html> is the first element on page.
   bullet-red-iconIt is not a tag. It’s just the instruction as to which version of html/xml/any other language is             used.
   bullet-red-icon <html> html is the first staring tag of the html document, indicates the start of html             document.
   bullet-red-icon <head>----</head> these tags form the header section of the html document.
   bullet-red-icon <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.
   bullet-red-iconIt is very useful in search engines, to search for particular information.
   bullet-red-icon <body>-------</body> next section is the body section, which contains the main content of             the webpage.
   bullet-red-icon </html> this tag indicates the end of html document.

bullet-go-iconBlock Elements & Inline Elements :

   bullet-red-iconNow 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.

1

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.

bullet-go-iconInline 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

2

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.

bullet-go-iconElement 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.

bullet-go-iconOther Common Attributes ::
Some more common and useful attributes are listed below

  1. 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>
  2. id and class – Specifies identification to an element.
  3. Eg : <p id="mypara">This paragraph has an id</p>

  4. 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>

The notepad file containing the code and the browser output is shown below :

3

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.

4
You can see “Google” in the output. When you click on it, you will be redirected to www.google.com

bullet-go-iconHow 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

  1. src – it gives the source of the image, the complete path of the image.
  2. 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.
5

6

bullet-go-iconSeparate 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.

is a block level tag and is an inline level tag which we have studied previously.

Let’s see an example of how to divide the content and consider it as one block.

Output is shown below :

7

bullet-go-iconStyle 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.