Presented by
Yogita solanki
Cse 5th sem
 Introduction of html
 Structure of html
 Basic html tags
 Versions of html
 Doctype declaration
 Html heading
 Text formatting
 Html link
 Html image
 Html tables
 Html input tags
 Extra markups
 Css
 Html stands for hypertext markup language.
 Html is derived from a language SGML(standard
generlised markup language).
 A markup language is a set of markup tags.
 Html is not case sensitive language.
 HTML documents are described by HTML tags.
 Opening tag can carry attributes.
 Attributes require name and values.
 HTML tags are keywords (tag names) surrounded
by angle brackets:
 <tagname>content</tagname>
 The start tag is often called the opening tag. The
end tag is often called the closing tag
 HTML tags normally come in pairs like <p> and
</p>
 The first tag in a pair is the start tag, the second
tag is the end tag
 The end tag is written like the start tag, but with
a slash before the tag name
 Html code is in blue.
 Write html code in notepad or any text editor.
 Save the file by (.html)/(.htm) extension.
 View the page in any web browser.
 The purpose of web browser is to read html
document and display them as web page.
 Container element–container tags contain
start tag and end tag i.e
<html>……</html>.
 Empty element-empty tag contain start tag
i.e <br>.
 <html>
 <head>
 <title>Page title</title>
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 </body>
 </html>
 The DOCTYPE declaration defines the document type to be HTML. It help
the browser to display web page correctly.
 The text between <html> and </html> describes an HTML document.
 The text between <head> and </head> provides information about the
document.
 The text between <title> and </title> provides a title for the document
 The text between <body> and </body> describes the visible page
content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
 Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
 HTML5
<!DOCTYPE html>
 HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
 Heading element –there are six heading
element.
(<H1>,<H2>,<H3>,<H4>,<H5>,<H6>
 <h1> will print largest heading.
 <h6> will print smallest heading.
 <!DOCTYPE html>
 <html>
 <head><title>HEADING<title></head>
 <body>
 <h1>HELLO WORLD</h1>
 <h2>HELLO WORLD</h2>
 <h3>HELLO WORLD</h3>
 <h4>HELLO WORLD</h4>
 <h5>HELLO WORLD</h5>
 <h6>HELLO WORLD</h6>
 <body>
 <html>
View page
 <b> Defines bold text
 <em> Defines emphasized text
 <i> Defines italic text
 <small> Defines small text
 <strong> Defines strong text
 <sub> Defines subscript text
 <super> Defines superscript text
 <strike> Defines strike text
 <ins> Defines inserted text
 <del> Defines deleted text
 <tt> Defines teletype text
 <u> Defines underline text
 <html>
 <head><title></title></head>
 <body>
 <b>this text is bold</b>
 <br><i><s>this text is italic</s></i>
 <br><em><int>this text is emphasized<int></em>
 <br><small><del>this text is small</del></small>
 <br><strong>this text is strong</strong>
 <br><sub>this text is subscript</sub>
 <br><super>this text is superscript</super>
 <br><tt>this text is teletype</tt>
 <br><u>this text is underlined</u>
 <br><strike><q>this text is strike</q></strike>
 <abbr title=“automatic teller mmachine”>ATM</abbr>
 </body>
 </html> view page
 This element is used to format the size ,
typeface and color of the enclosed text.
 The size attribute on font tag take values
from 1 to 7.
 The commonly used font in web page is Arial
, Arial black ,Impact , courier new , verdana ,
Arial narrow, Times new roman.
 The attribute bgcolor is use to change the
background color of page.
<body bgcolor=“green”>
 Text is used to change the color of enclosed
text.
<body text=“black”>
 A hyperlink is a reference(an address) to the
resourse on the web.
 hyperlink can point to any resourse on web:
html page , image ,video etc.
 The html anchor element <a> define both
hyperlinks and anchors
 <a href=“url”>link text<a>
 href attribute defines a link address.
 mailto:
 To display an image on page we need to use
src attribute.
 Src stands for “source”. The value of the src
attribute is the url of image.
 It is empty tag.
 <img src=“url”>
 <img> Defines an image
 <src> Display an image on page src
stand for source.
 <alt> Define ‘alternate text’ for image
 <width> Defines width of image
 <height> Defines height of image
 <border> Defines border of image
 <hspace> horizontal space of image
 <vspace> vertical space of image
 <align> align an image within the text
 <background> add a background image
 <table> used to create table
 <tr> table is divided into rows
 <td> each row is divided into data cells
 <th> headings on the table
 <caption> caption to the table
 <colgroup> defines group of table columns
 <col> define attriute value for one or more
column .
 <thead> defines a table head
 <tbody> defines a table body
 <tfoot> defines a table footer
 <cellspacing> amount of space between table cells
 <cellpadding> space around the edges of each cell
 <colspan> no. of column working with will span
 <rowspan> no. of row working with will span
 <border> defines border of table
 <html>
 <head><title>table without borders
</title></head>
 <body>
 <table border=“1”>
 <tr><th>name</th>
 <th>loan no</th>
 <th>amount</th></tr>
 <tr><td>john</td>
 <td>s-1</td>
 <td>6000</td></tr>
 </table>
 </body>
 </html> view
 <ul>(unordered list),<ol>(ordered list) tags
are used and type attribite is used.
 Each item in the list placed between
<li></li>,li stands for list item.
 Defination list is created with <dl> tag ,
inside <dl> tag you will usually see the pair
of <dt> and <dd>.
 <dt> stands for defination term is used to
contain the term being defined.
 <dd> this contain the defination.
 Lists can be nested inside one another.
i.e <html>
<body>
<h1>ordered list</h1>
<ol=“A”>
<li>apple</li>
<li>mango</li></ol>
<ul>
<li>orange</li>
<li>apple</li></ul>
<dl>
<dt>coffee</dt>
<dd>black hot drink</dd></dl>
</body>
</html> view
 <form> form controls contain form
content
 action ulr for page on server that will
receive info
 method
 <input> different form controls
 Type text , password ,radio
,checkbox, submit
 <textarea> used to take mutiline textinput
 checked used to select by default value
 <select>,<option>,<label>,<fieldset>,
<legend>
 <span>
 <div>
 comments <!....>
 <iframe>
 Id attribute
 Css associates style rules with html elements.
 Css rules contains 2parts selector and
declaration
 eg. P {font-color:yellow;} here p is selector &
font-color:yellow is declaration
 External css use <link href=“”>
 Internal css use <style>
 universal selector - *{}
 type selector- h1,h2 {}
 Id selector- #id{}
 Adjacent sibling selector- h1+p{}
 General sibling selector-h1-p{}
 Child selector-li>a{}
Html5 tags
 <video>
 <audio>
 <source>
 <svg>
 <canvas>
 <autoplay>
 <controls>
THANK YOU

HTML

  • 1.
  • 2.
     Introduction ofhtml  Structure of html  Basic html tags  Versions of html  Doctype declaration  Html heading  Text formatting  Html link  Html image  Html tables  Html input tags  Extra markups  Css
  • 3.
     Html standsfor hypertext markup language.  Html is derived from a language SGML(standard generlised markup language).  A markup language is a set of markup tags.  Html is not case sensitive language.  HTML documents are described by HTML tags.  Opening tag can carry attributes.  Attributes require name and values.
  • 4.
     HTML tagsare keywords (tag names) surrounded by angle brackets:  <tagname>content</tagname>  The start tag is often called the opening tag. The end tag is often called the closing tag  HTML tags normally come in pairs like <p> and </p>  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, but with a slash before the tag name  Html code is in blue.
  • 5.
     Write htmlcode in notepad or any text editor.  Save the file by (.html)/(.htm) extension.  View the page in any web browser.  The purpose of web browser is to read html document and display them as web page.
  • 6.
     Container element–containertags contain start tag and end tag i.e <html>……</html>.  Empty element-empty tag contain start tag i.e <br>.
  • 7.
     <html>  <head> <title>Page title</title>  </head>  <body>  <h1>This is a heading</h1>  <p>This is a paragraph.</p>  <p>This is another paragraph.</p>  </body>  </html>
  • 8.
     The DOCTYPEdeclaration defines the document type to be HTML. It help the browser to display web page correctly.  The text between <html> and </html> describes an HTML document.  The text between <head> and </head> provides information about the document.  The text between <title> and </title> provides a title for the document  The text between <body> and </body> describes the visible page content  The text between <h1> and </h1> describes a heading  The text between <p> and </p> describes a paragraph
  • 9.
     Version Year HTML1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014
  • 10.
     HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">
  • 11.
     Heading element–there are six heading element. (<H1>,<H2>,<H3>,<H4>,<H5>,<H6>  <h1> will print largest heading.  <h6> will print smallest heading.
  • 12.
     <!DOCTYPE html> <html>  <head><title>HEADING<title></head>  <body>  <h1>HELLO WORLD</h1>  <h2>HELLO WORLD</h2>  <h3>HELLO WORLD</h3>  <h4>HELLO WORLD</h4>  <h5>HELLO WORLD</h5>  <h6>HELLO WORLD</h6>  <body>  <html> View page
  • 13.
     <b> Definesbold text  <em> Defines emphasized text  <i> Defines italic text  <small> Defines small text  <strong> Defines strong text  <sub> Defines subscript text  <super> Defines superscript text  <strike> Defines strike text  <ins> Defines inserted text  <del> Defines deleted text  <tt> Defines teletype text  <u> Defines underline text
  • 14.
     <html>  <head><title></title></head> <body>  <b>this text is bold</b>  <br><i><s>this text is italic</s></i>  <br><em><int>this text is emphasized<int></em>  <br><small><del>this text is small</del></small>  <br><strong>this text is strong</strong>  <br><sub>this text is subscript</sub>  <br><super>this text is superscript</super>  <br><tt>this text is teletype</tt>  <br><u>this text is underlined</u>  <br><strike><q>this text is strike</q></strike>  <abbr title=“automatic teller mmachine”>ATM</abbr>  </body>  </html> view page
  • 15.
     This elementis used to format the size , typeface and color of the enclosed text.  The size attribute on font tag take values from 1 to 7.  The commonly used font in web page is Arial , Arial black ,Impact , courier new , verdana , Arial narrow, Times new roman.
  • 16.
     The attributebgcolor is use to change the background color of page. <body bgcolor=“green”>  Text is used to change the color of enclosed text. <body text=“black”>
  • 17.
     A hyperlinkis a reference(an address) to the resourse on the web.  hyperlink can point to any resourse on web: html page , image ,video etc.  The html anchor element <a> define both hyperlinks and anchors  <a href=“url”>link text<a>  href attribute defines a link address.  mailto:
  • 18.
     To displayan image on page we need to use src attribute.  Src stands for “source”. The value of the src attribute is the url of image.  It is empty tag.  <img src=“url”>
  • 19.
     <img> Definesan image  <src> Display an image on page src stand for source.  <alt> Define ‘alternate text’ for image  <width> Defines width of image  <height> Defines height of image  <border> Defines border of image  <hspace> horizontal space of image  <vspace> vertical space of image  <align> align an image within the text  <background> add a background image
  • 20.
     <table> usedto create table  <tr> table is divided into rows  <td> each row is divided into data cells  <th> headings on the table  <caption> caption to the table  <colgroup> defines group of table columns  <col> define attriute value for one or more column .  <thead> defines a table head  <tbody> defines a table body  <tfoot> defines a table footer  <cellspacing> amount of space between table cells  <cellpadding> space around the edges of each cell  <colspan> no. of column working with will span  <rowspan> no. of row working with will span  <border> defines border of table
  • 21.
     <html>  <head><title>tablewithout borders </title></head>  <body>  <table border=“1”>  <tr><th>name</th>  <th>loan no</th>  <th>amount</th></tr>  <tr><td>john</td>  <td>s-1</td>  <td>6000</td></tr>  </table>  </body>  </html> view
  • 22.
     <ul>(unordered list),<ol>(orderedlist) tags are used and type attribite is used.  Each item in the list placed between <li></li>,li stands for list item.  Defination list is created with <dl> tag , inside <dl> tag you will usually see the pair of <dt> and <dd>.  <dt> stands for defination term is used to contain the term being defined.  <dd> this contain the defination.  Lists can be nested inside one another.
  • 23.
  • 24.
     <form> formcontrols contain form content  action ulr for page on server that will receive info  method  <input> different form controls  Type text , password ,radio ,checkbox, submit  <textarea> used to take mutiline textinput  checked used to select by default value  <select>,<option>,<label>,<fieldset>, <legend>
  • 25.
     <span>  <div> comments <!....>  <iframe>  Id attribute
  • 26.
     Css associatesstyle rules with html elements.  Css rules contains 2parts selector and declaration  eg. P {font-color:yellow;} here p is selector & font-color:yellow is declaration  External css use <link href=“”>  Internal css use <style>
  • 27.
     universal selector- *{}  type selector- h1,h2 {}  Id selector- #id{}  Adjacent sibling selector- h1+p{}  General sibling selector-h1-p{}  Child selector-li>a{}
  • 28.
    Html5 tags  <video> <audio>  <source>  <svg>  <canvas>  <autoplay>  <controls>
  • 29.