INTRODUCTION TO BASIC HTML
Welcome to Chapter 1 : intro to HTML
Part 1- HTML Structure Presentation
Part 2- Layout of an HTML file
Part 3- Working with Tables & List
Part 4- HTML Forms & Input
Part 5- Styling & Inline CSS
Part 1- Introduction to HTML
What is HTML?
Normally we can use any text editor to Execute the HTML tags and to Create the pages .. i prefer to use the Notepad ++ .
Click Here to Attachment Text Editor Software
HTML Uses Tag Elements :
Content is wrapped in an open and closing tag ,
HTML Document Layout
Block Elements
Block Level Elements:
Creates a large block of content
new lines before and after element
Consumes the whole width available
Examples
Inline Elements
Inline Level Elements :
Element Attributes
"href" is the name of the attribute of the anchor <a> (link) tag
"http://vidyarthiplus.com/vp" is the value of the "href" attribute of the <a> (link) tag
other common attributes :
Style - styling can be done via "style" attribute
Id & class - specifies identification to an element
title- adds extra info about the element. Also Displayed in a toottip in some browser
Sample Output :
Next Session will be continued later.
Welcome to Chapter 1 : intro to HTML
Part 1- HTML Structure Presentation
Part 2- Layout of an HTML file
Part 3- Working with Tables & List
Part 4- HTML Forms & Input
Part 5- Styling & Inline CSS
Part 1- Introduction to HTML
What is HTML?
- HTML is a Hypertext Markup Language
- HTML is not a Programming language
- Language of the Browser
- The World Wide Web Consortium Creates the Standards of HTML
- CSS is used to style HTML pages
Normally we can use any text editor to Execute the HTML tags and to Create the pages .. i prefer to use the Notepad ++ .
Click Here to Attachment Text Editor Software
HTML Uses Tag Elements :
Code:
<p>this is a Paragraph</p> - paragraph
<h1>this is a heading</h1> - heading
<i></i> - Italic
<b></b> - BoldContent is wrapped in an open and closing tag ,
Code:
<p>this is a Paragraph</p>
<h1>this is a heading</h1>HTML Document Layout
Code:
<!DOCTYPE html>
<html> //open tag of HTML
<head> //open tag of Head
<title>Page Title</title> //open and close tag of title
</head> //close tag of Head
<body> //open tag of body
<p>Hi Welcome to vidyarthiplus !! </p> //open and close tag of Paragraph
</body> //close tag of Body
</html> //close tag of HTMLBlock Elements
Block Level Elements:
Creates a large block of content
new lines before and after element
Consumes the whole width available
Examples
Code:
<h1> - <h6> Headings , ( h1 with Maximum font size and so on)
<form> - forms
<div> - div tagsInline Elements
Inline Level Elements :
- No new Lines
- Can be placed aside other elements
- Cannot define width
Code:
<a> - links (known as anchor tag)
<strong> & <b> - both indicates the Size of the font
<input/>- input
<span> - Span tagsElement Attributes
- Most of the attributes are Name-Value pairs Separated with an "="
- Attributes provide additional information about an element
- Attributes are always specified in the Start tag
"href" is the name of the attribute of the anchor <a> (link) tag
Code:
<a href="www.vidyarthiplus.com/vp">Vidyarthiplus</a>"http://vidyarthiplus.com/vp" is the value of the "href" attribute of the <a> (link) tag
other common attributes :
Style - styling can be done via "style" attribute
Code:
<h1 style="color:red"> This Heading will be red</h1>Id & class - specifies identification to an element
Code:
<p id="mypara">This paragraph has an ID</p>title- adds extra info about the element. Also Displayed in a toottip in some browser
Code:
<a href="www.vidyarthiplus.com/vp" title="click here to go V+">
This paragraph has an id</a>Sample Output :
Next Session will be continued later.
Share your Study Materials with us : 
![[Image: jRHNJwz.gif]](http://i.imgur.com/jRHNJwz.gif)
