Introduction to html Y.Ravindra Reddy
https://www.seoskills.in
HTML Overview
https://www.seoskills.in
HTML
Hyper Text Markup Language
https://www.seoskills.in
• HTML stands for Hyper Text Markup Language.
• It is developed by Tim Berner's Lee at W3C (World Wide WebConsortium).
• It is used to create Static Web pages.
• It is a global language i.e., it can be understood by all browsers.
• It is a markup language.
• It is not case-sensitive language.
• The latest version of HTML is HTML 5
• HTML documents are also called as web pages.
• HTML pages can run on any browser.
https://www.seoskills.in
• HTML documents are simply text documents with a specific form
• Documents comprised of content and markup tags
• Content: actual information being conveyed
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
https://www.seoskills.in
HTML Tags
https://www.seoskills.in
• HTML tags are used to mark-up HTML elements
• Surrounded by angle brackets < and >
• HTML tags normally come in pairs, like <tagname> (start tag) and </tagname>
(end tag)
• The text between the start and end tags is the element content
• Not case-sensitive
• Follow the latest web standards:
• Use lowercase tags
https://www.seoskills.in
Tag Attributes
https://www.seoskills.in
• Tags can have attributes that provide additional information to an HTML element
• Attributes always come in name/value pairs like: name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes. Double quotes are most
common.
• Also case-insensitive: however, lowercase is recommended
• <tagname a1=“v1” a2=“v2”></tagname>
• For example, <table border=“0”> is a start tag that defines a table that has no borders
https://www.seoskills.in
HTML Document Structure
https://www.seoskills.in
Entire document enclosed within <html> and </html> tags
Two subparts:
1. Head
Enclosed within <head> and </head>
Within the head, more tags can be used to specify title of the page, meta-information,
etc.
2. Body
Enclosed within <body> and </body>
Within the body, content is to be displayed
Other tags can be embedded in the body
https://www.seoskills.in
What We’ll Study?
https://www.seoskills.in
• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Formatting
• HTML Styles
• HTML Images
• HTML Tables
• HTML Lists
• HTML Forms
• HTML Colors
https://www.seoskills.in
HTML Layout
https://www.seoskills.in
One common way is to use HTML tables to format the layout of an HTML page
The trick is to use a table without borders, and maybe a little extra cell-padding
• Keep screen resolution in mind
• Use color to define spaces
• Align your images
• Balance the graphics and text on a page
• Think about text width – scan length 7 – 11 words
• Centering text is inadvisable
• Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm
https://www.seoskills.in
HTML Frames
https://www.seoskills.in
HTML frames are a means of having several browser windows open within a
single larger window
Each HTML document is called a frame
Disadvantages:
Must keep track of more HTML documents
Difficult to print the entire page
https://www.seoskills.in
HTML Page Structure
https://www.seoskills.in
HTML Page Structure
https://www.seoskills.in
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
https://www.seoskills.in
HTML Versions
https://www.seoskills.in
Since the early days of the web, there have been many versions of HTML
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
https://www.seoskills.in
The <!DOCTYPE> Declaration
https://www.seoskills.in
The <!DOCTYPE> Declaration
https://www.seoskills.in
The <!DOCTYPE> declaration helps the browser to display a web page orrectly.
There are many different documents on the web, and a browser can only display an
HTML page 100% correctly if it knows the HTML type and version used.
https://www.seoskills.in
Common Declarations
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">
https://www.seoskills.in
HTML code can be written in:
• Notepad
• Notepad++
• Microsoft Visual Studio
• Adobe Dreamweaver
• Microsoft Expression Web
• Edit Plus
• Text Pad
• Notepad++ etc.
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac). We believe using a simple text editor is a good way to learn HTML.
https://www.seoskills.in
HTML and XHTML Full References
https://www.seoskills.in
Full Reference from W3schools:
http://www.w3schools.com/tags/
Test your HTML
http://www.w3schools.com/html/html_whyusehtml4.asp
https://www.seoskills.in
https://www.seoskills.in

Introduction to html course digital markerters

  • 1.
    Introduction to htmlY.Ravindra Reddy https://www.seoskills.in
  • 2.
  • 3.
    HTML Hyper Text MarkupLanguage https://www.seoskills.in
  • 4.
    • HTML standsfor Hyper Text Markup Language. • It is developed by Tim Berner's Lee at W3C (World Wide WebConsortium). • It is used to create Static Web pages. • It is a global language i.e., it can be understood by all browsers. • It is a markup language. • It is not case-sensitive language. • The latest version of HTML is HTML 5 • HTML documents are also called as web pages. • HTML pages can run on any browser. https://www.seoskills.in
  • 5.
    • HTML documentsare simply text documents with a specific form • Documents comprised of content and markup tags • Content: actual information being conveyed • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor https://www.seoskills.in
  • 6.
  • 7.
    • HTML tagsare used to mark-up HTML elements • Surrounded by angle brackets < and > • HTML tags normally come in pairs, like <tagname> (start tag) and </tagname> (end tag) • The text between the start and end tags is the element content • Not case-sensitive • Follow the latest web standards: • Use lowercase tags https://www.seoskills.in
  • 8.
  • 9.
    • Tags canhave attributes that provide additional information to an HTML element • Attributes always come in name/value pairs like: name=“value” • Attributes are always specified in the start tag • Attribute values should always be enclosed in quotes. Double quotes are most common. • Also case-insensitive: however, lowercase is recommended • <tagname a1=“v1” a2=“v2”></tagname> • For example, <table border=“0”> is a start tag that defines a table that has no borders https://www.seoskills.in
  • 10.
  • 11.
    Entire document enclosedwithin <html> and </html> tags Two subparts: 1. Head Enclosed within <head> and </head> Within the head, more tags can be used to specify title of the page, meta-information, etc. 2. Body Enclosed within <body> and </body> Within the body, content is to be displayed Other tags can be embedded in the body https://www.seoskills.in
  • 12.
  • 13.
    • HTML Elements •HTML Headings • HTML Paragraphs • HTML Formatting • HTML Styles • HTML Images • HTML Tables • HTML Lists • HTML Forms • HTML Colors https://www.seoskills.in
  • 14.
  • 15.
    One common wayis to use HTML tables to format the layout of an HTML page The trick is to use a table without borders, and maybe a little extra cell-padding • Keep screen resolution in mind • Use color to define spaces • Align your images • Balance the graphics and text on a page • Think about text width – scan length 7 – 11 words • Centering text is inadvisable • Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm https://www.seoskills.in
  • 16.
  • 17.
    HTML frames area means of having several browser windows open within a single larger window Each HTML document is called a frame Disadvantages: Must keep track of more HTML documents Difficult to print the entire page https://www.seoskills.in
  • 18.
  • 19.
  • 20.
    Below is avisualization of an HTML page structure: <html> <body> <h1>This a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> https://www.seoskills.in
  • 21.
  • 22.
    Since the earlydays of the web, there have been many versions of HTML Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 https://www.seoskills.in
  • 23.
  • 24.
  • 25.
    The <!DOCTYPE> declarationhelps the browser to display a web page orrectly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. https://www.seoskills.in
  • 26.
    Common Declarations HTML5 <!DOCTYPE html> HTML4.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"> https://www.seoskills.in
  • 27.
    HTML code canbe written in: • Notepad • Notepad++ • Microsoft Visual Studio • Adobe Dreamweaver • Microsoft Expression Web • Edit Plus • Text Pad • Notepad++ etc. However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. https://www.seoskills.in
  • 28.
    HTML and XHTMLFull References https://www.seoskills.in
  • 29.
    Full Reference fromW3schools: http://www.w3schools.com/tags/ Test your HTML http://www.w3schools.com/html/html_whyusehtml4.asp https://www.seoskills.in
  • 30.