HTML Intro:
What Is HTML?
HTML is markup language used to create WEB Pages.It was invented in 1990.
HTML stands for : Hyper Text Mark Up Language.
How It Works:
HTML consists of a series of short codes typed into a text-file by the site author — these are the tags.
The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape
Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the
page as the author had intended.
Tags in HTML
1) HTML tags are keywords surrounded by angle brackets like
2)HTML tags normally come in pairs like and
3)The first tag in a pair is the start tag, the second tag is the end tag
4)Start and end tags are also called opening tags and closing tags.
Example:
Welcome to our first HTML Programme
This is our HTML Paragraph Tag
HTML Forms
HTML forms are way to pass data to server.HTML forms increase interactivity.
How it works:
Every form has some fields.Form fields are objects that allow the user to enter their information - for
example text boxes, drop-down menus or radio buttons.
When the user clicks a submit button, the content of fields of the form is usually sent to a program that
runs on the server.
Every HTML form has some elements like text fields,radio buttons,checkbox,submit button etc. and each
and every should be enclosed within the opening and closing
tags like this:
The input elements go here….
Method: either GET or POST through whichdata will pass.
Action: attribute points to the server side script (PHP,ASP etc) that handles the form submission
Input Elements of form:
Text Fields
defines a one-line input field that a user can enter text into:
Here Type: type signifies type of element like text,radio,submit etc.
Name: Name signifies here name of that element through which value of that particular field will pass
on submission.
First name:
Last name:
How the HTML code above looks in a browser:
First name:
Last name:
Password Field:
defines a password field:
Password:
How the HTML code above looks in a browser:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons:
defines a radio button. Radio buttons let a user select ONLY ONE one of a limited
number of choices:
married
unmarried
How the HTML code above looks in a browser:
○ married
○ unmarried
Male
Female
Checkboxes
defines a checkbox. Checkboxes let a user select ONE or MORE options of a
limited number of choices .
India
America
How the HTML code above looks in a browser:
□ India
□ America
I have a Dog
I have a Cat
Submit Button:
defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute.
Username:
If you type some characters in the text field below, and to click the "Submit" button, the browser will
send your input a page called “ form_action.php". The page will show you the received input.
Example: Try This
Form Page: sampleform
Sample form page
Name:
Email:
HTML img
To insert an image into a Web page in HTML, we use tag.Like
and must set its src attribute equal to the URL of the image or location of the image.
Example: Try This
Image Example
Here firstimage.jpg is your image lacated at same location of your html file. suppose if your image is in
different folder of same directory named images so you will define it Like:
// here images is image folder.
Relative path of Image:
“ Relative path” means the file path to where the image is located "relative" to the HTML page.
"../" tells the browser to go up one folder from where the HTML page is located
Absolute Path of Image :
Absolute paths are a different than Relative paths in that it doesn't matter where the image files are
located relative to your web pages:
using relative path is good parctice.
Set Height and Width of an Image: You can set hight of width of an image within tag like :
HTML List
HTML List is used to contain all list information.All lists must contain one or more list elements.
List may contain :
1) Unordered data
2) Ordered data
3) Definitions.
Definition:
Unordered List created using and within this unordered list we can cretae list using tag.
Example:
unordered data
ordered data
Definitions.
ordered list can be created using tag and list data using tag.
Example: Try This
Unordered information.
Ordered information.
Definitions.
Definition List is list which describe each and every data of List
Example: try This
description
this is description of your data
Easier to understand
we have describe each and every point it's much easier to understand!
good for all
you can try this to create defination list.
HTML Style
HTML Style is use to make our web page attractive by using different styles like color,size,images etc.
To define style we use tag. There are three ways to use the style in our pages:
1)Inline style
2)External stylesheet.
3)Internal stylesheet
Inline Style:
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
Example: Try This
hi this html style
External Style sheet:
In External style sheet a new css file is created and using this we make change in whole website.
Each page must link to the style sheet using the tag.
The tag goes inside the section:
// mystyle.css is css file
Internal Stylesheet:
An internal style sheet can be used if one single document has a unique style.
Internal styles are defined in the section of an HTML page, by using the
tag, like this:
body {
background-color:yellow
}
p{
color:blue
}
Getting started with basic HTML Programming
In this Lesson we are going to introduce about HTML Heading,Paragraph images and Links :
1)HTML Heading
A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of
(heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6).
Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.
Never use headings in Html to show your Text Bold and Big .Headings are use to show web page
structure.Search engines use your headings to index the structure and content of your web pages
H1 headings should be used as main headings, followed by H2 headings, then the less important H3
headings, and so on.
Example:
This is first heading
This is second heading
This is third heading
2)HTML Paragraph
HTML paragraph are used when we want to dispaly our text in paragraph.we can create HTML
paragraph using tag
Example:
This is my first paragraph
In paragraph we can use tag. tag is used for a line break Like:
This is my first paragraph //
There is no closing tag for .
Let's look at HTML Links:
3) HTML Link
A hyperlink (or link) is a word, group of words, or image which can link you with other document,page
etc. by clicking on it you jump to a new document or a new section within the current document.
In HTML we create link by using tag .Here stands for anchor tag.
Example:
url">Link text
visit webinstitute site
Here href is used to link that particular mentioned url.This will show visit webinstitute in your webpage.
on clicking this you can visit this site.
Attributes of Link
1) Target Attribute: In Link you can set you your target Like :
visit webinstitute site
Here Target specifies where to open the linked document.
2) Name Attribute: you can apply name attribute like this:
Useful Tips Section
HTML Tables
Tables are used to represent tabular relationships between data.and a way to make data organized on
web page.
To create table we use tag
Each table is divided into rows and columns.and each row is again divided in cells.
Example: Try This
firstname
Lastname
ram
shrivastava
siddharth
goyal
Here is used to create table, is to create table row, tag is for table heading
(firstname,lastname),
is to create table cells(ram,siddharth).
HTML Frames
HTMLFrames are use to divide the web page/screen into separate windows. Frames allow you to divide
the page into several rectangular areas and to display a separate document in each rectangle.this
rectangle area called a frame.
The frameset element holds more one frame elements.
Note that frames are only one particular window or area in a web page while Frameset contain all
frames in a web page.
Example: Try This:
First Example of Frames
using frames you can divide your webpage in multiple window of different size.
HTML Formatting
In this Lesson we are going to introduce HTML text formatting and color.
In HTML you can write your text within tag. And it will appear on web page but how it will look or
proper way it should look define using text formatting in HTML.
In HTML Text formatting, when you give the browser instructions on how your text should look. These
instructions come in the form of tags.
Example: Try This
1)Bold:This text is bold. This text is strongly marked up. .
2)Italics: This text is italicised.
3) This text is emphasized..
4)Underline: This text is underlined.
5)Center: hi this is HTML
Example: Try This
This text is bold, italic, and underlined text
Text Formatting Tags:
Tag
Description
Defines bold text
Defines big text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
HTML COLORS
Want to use HTML color codes?
With HTML color codes you can set the color of web site background, color of text, cells in tables and
much more.
HTML color codes for web site background color:
HTML color codes for setting font/text color:
HTML color codes for table background color:
HTML color code for link color:
THEORY OF COLOR CODES
HTML Codes format:
Each HTML COLOR code contains symbol "#" at the starting of the code and 6 letters or numbers. These
numbers are in hexadecimal number system. For example "FF" in hexadecimal represents number 255 in
Decimal.
Meaning of symbols:
The first two symbols in HTML COLOR CODES represent the intensity of red color. 00 is the least and
FF is the most intense. The third and fourth represents intensity of green and fifth and sixth represents the
intensity of blue. So with combining the intensity of red, green and blue we can mix almost any color that
our heart desire.
Examples:
#FF0000 - This HTML COLOR code shows GREEN. The result is:
#00FF00 - This HTML COLOR code shows GREEN. The result is:
#0000FF - This HTML COLOR code shows BLUE. The result is:
#FFFF00 - This HTML COLOR code shows YELLOW.. The result is:
#CCEEFF - This HTML COLOR code shows SKY BLUE The result