Hello There, Guest! RegisterLogin with Facebook
Login with Facebook

New Anna University Nov / Dec 2016 Examination Important Questions
New Anna University (UG / PG) Nov/Dec 2016 and Jan 2017 Theory , Practical Exam Timetable
>>> Anna University Sixth Semester Question Bank Collection (R2013) ECE,MECH,CSE,IT,EEE,CIVIL,EIE
>>> Anna University November/December 2015 Examination Question Papers
>>> Anna University Study Materials for all Departments
>>> Anna University Question Papers : April May June 2015 Question Papers | Nov Dec 2014 and Jan 2015 Question Papers

Register or Login to Submit Study Materials , Shoutbox and also to access Many Features !!

Vidyarthiplus Shop :: Handwritten Premium Lecture Notes
Share your Study Materials with us
Share your Study Materials with us : Click Here

HTML INTRODUCTION TO BASIC HTML
#1


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?
  • 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 
Where to type these HTML Codings?? 

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> - Bold


Content 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 HTML


Block 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 tags



Inline Elements

Inline Level Elements :
  • No new Lines 
  • Can be placed aside other elements 
  • Cannot define width
Examples


Code:
<a> - links (known as anchor tag)


<strong> & <b> - both indicates the Size of the font


<input/>- input


<span> - Span tags


Element 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 
Example : 

"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. Smile

“Work hard in silence, let your success be your noise...”


Reply
#2

Good Job bro.. +2 Reputed

New Share your Study Materials with us : Click Here


Reply
#3


Voila...Pelao
Will do more! Bro...... +2 Reputed

[Image: jRHNJwz.gif]
Interest-Involvement-Implementation
Share-Learn-Respect-Repute-Thank


Reply

Subscribe


Recommend on Google