Web Designing & Internet MarketingSession 2: Overview of HTML                               What we are gone cover in this...
Overview of HTML•   What is HTML?•   Hyper Text Markup Language     –   Specifically created to make World Wide Web pages ...
Introduction to HTML•   Creating an HTML file•   Notepad or Wordpad (PC) or SimpleText (Mac)•   First tag: <html>      – I...
Usage of HTML•   More than 100 Million web pages•   Supported by all major browsers•   Simple and Cheap•   Purpose of HTML...
General form of an HTML documentOpening tag                      <html>                    Displayed on                   ...
Tags•    surrounded with angle brackets like this      – <B> or <I>•   Most tags come in pairs      – exceptions: <P>, <br...
Creating Text in HTML                                         Index.html Example                                          ...
Text Example<html><head>    <title>IIPM, Cochin</title></head><body>    <h1>This is a big heading!</h1>    <h2>This is a s...
Switch back and forth between the Source and the HTML•   switch to Notepad with the Document Source•   make changes•   sav...
HTML Organization•   Spacing     – Spacing organizes your work!     – Spacing makes your files easy to read!     – Spacing...
How to make colors changes?•   Hexadecimal number :•   Color names : <Font color=white>•   Changing the Background color  ...
TablesExample:<table cellspacing="0" cellpadding="4" border="1" style="border-color:#000;">   <thead>      <td style="colo...
Tag List – Basic TagsStart Tag       Purpose<!DOCTYPE>      Defines the document type<html>          Defines an html docum...
Tag List – Character FormattingStart Tag                            Purpose<b>                                  Defines bo...
Tag List – LinksStart Tag                           Purpose<a>                                 Defines an anchor<link>    ...
Thank you !!!        Contact:maheshpanchal.1@gmail.com
Upcoming SlideShare
Loading in …5
×

Wd & im session a2 _overview of html_march 08,2010

501 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
501
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wd & im session a2 _overview of html_march 08,2010

  1. 1. Web Designing & Internet MarketingSession 2: Overview of HTML What we are gone cover in this session ? Overview of HTML Introduction to HTML Creating an HTML Document
  2. 2. Overview of HTML• What is HTML?• Hyper Text Markup Language – Specifically created to make World Wide Web pages – Telling the browser what to do, and what props to use. – A series of tags that are integrated into a text document. – Created by Tim Berners-Lee• HTML files – Text files – Contain mark-up tags – Tags direct how page is to be displayed by browser – Can be created from a simple text editor – File extension .htm or .html Web Designing & Internet Marketing
  3. 3. Introduction to HTML• Creating an HTML file• Notepad or Wordpad (PC) or SimpleText (Mac)• First tag: <html> – Indicates that you are starting an HTML document• Last tag: </html> – Indicates that you are ending an HTML document – *Note* the open & close structure to HTML – Fictional example: <sleep> and </sleep>• Save file as index.html – This is a typical default title for home pages – Windows may seem to prefer .htm but .html will also work just fine.Relationship with SGML• SGML (Standard Generalized Markup Language) was created by the folks at IBM in the 1960’s.• SGML can truly be called the parent of HTML.• SGML is an International Standard that describes the relationship between a documents content and its structure. Web Designing & Internet Marketing
  4. 4. Usage of HTML• More than 100 Million web pages• Supported by all major browsers• Simple and Cheap• Purpose of HTML – Rich enough to support multimedia embedding in documents – Flexible enough to support hypertext linking Web Designing & Internet Marketing
  5. 5. General form of an HTML documentOpening tag <html> Displayed on The title bar of <head> A page!!! Head <title> Title of the document </title> Section </head> Title is not A heading!!! Body <body> Section Content of the page goes here </body>CorrespondingClosing tag </html> Web Designing & Internet Marketing
  6. 6. Tags• surrounded with angle brackets like this – <B> or <I>• Most tags come in pairs – exceptions: <P>, <br>, <li> tags …• The first tag turns the action on, and the second turns it off• The second tag(off switch) starts with a forward slash. – For example ,<B> text </B>• can embedded, for instance, to do this: – <HEAD><TITLE> Your text </HEAD></TITLE> it wont work. – The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>• not case sensitivity.• Many tags have attributes. – For example, <P ALIGN=CENTER> centers the paragraph following it.• Some browsers dont support the some tags and some attributes. Web Designing & Internet Marketing
  7. 7. Creating Text in HTML Index.html Example <html> </html>• Header information Body Tags – <head> to begin, and </head> to end <body> and </body> – Gives information about the page that is *Note* that all text that not displayed on the page itself appears on the page must be• Page Title encapsulated within the – <title> to begin, and </title> to end body tags – Example: <title>IIPM, Cochin</title> Text headings <h1> and </h1> There are six defined heading sizes <h1> (largest) through <h6> (smallest) Paragraphs <p> and </p> Web Designing & Internet Marketing
  8. 8. Text Example<html><head> <title>IIPM, Cochin</title></head><body> <h1>This is a big heading!</h1> <h2>This is a smaller heading</h2> <p>This is an example of a paragraph.</p></body></html>• OutputThis is a big heading!This is a smaller heading!This is an example of a paragraph. Web Designing & Internet Marketing
  9. 9. Switch back and forth between the Source and the HTML• switch to Notepad with the Document Source• make changes• save the document again• switch back to Browser• click on RELOAD and view the new HTML Document• switch to Notepad with the Document Source...... Web Designing & Internet Marketing
  10. 10. HTML Organization• Spacing – Spacing organizes your work! – Spacing makes your files easy to read! – Spacing makes no functional difference to your web browser• Comments – Comments are notes in your HTML file – Comments make no functional difference to your web browser – “<!--” begins a comment, and “ -->” ends it• Ex <!-- This is an example of a comment.--> Web Designing & Internet Marketing
  11. 11. How to make colors changes?• Hexadecimal number :• Color names : <Font color=white>• Changing the Background color – <BODY BGCOLOR=#19378a>• Changing Text color• <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff> – Spot color• <FONT COLOR=#66ffcc>WENT99</FONT> – Image Background• <BODY BACKGROUND=bgimg.gif > Web Designing & Internet Marketing
  12. 12. TablesExample:<table cellspacing="0" cellpadding="4" border="1" style="border-color:#000;"> <thead> <td style="color:#FFFFFF; background-color:#993333; font-weight:bold">Tag Name</td> <td style="color:#FFFFFF; background-color:#993333; font-weight:bold">Example</td> </thead> <tr> <td>&lt;strong&gt;</td><td><strong>This text is bold</strong></td> </tr> <tr> <td>&lt;em&gt;</td><td><em>This text is emphasized</em></td> </tr> <tr> <td>&lt;small&gt;</td><td><small>This text is small</small></td> </tr> <tr> <td>&lt;sub&gt;</td><td><sub>This text is subscripted.</sub> This text is not.</td> </tr> <tr> <td>&lt;sup&gt;</td><td><sup>This text is superscripted.</sup> This text is not.</td> </tr> <tr> <td>&lt;ins&gt;</td><td><ins>This text is inserted</ins></td> </tr> <tr> <td>&lt;del&gt;</td><td><del>This text is deleted</del></td> </tr></table> Web Designing & Internet Marketing
  13. 13. Tag List – Basic TagsStart Tag Purpose<!DOCTYPE> Defines the document type<html> Defines an html document<head> Defines the header element<title> Defines the page title<body> Defines the body of the page<h1> to <h6> Defines the body element<p> Defines header 1 to header 6<br /> Defines a paragraph<hr /> Inserts a single line break<!--...--> Defines a comment Web Designing & Internet Marketing
  14. 14. Tag List – Character FormattingStart Tag Purpose<b> Defines bold text<font> Deprecated<i> Defines italic text<em> Defines emphasized text<big> Defines big text<strong> Defines strong/bold text<small> Defines small text<sup> Defines superscripted text<sub> Defines subscripted text<u> Deprecated Web Designing & Internet Marketing
  15. 15. Tag List – LinksStart Tag Purpose<a> Defines an anchor<link> Defines a resource reference Web Designing & Internet Marketing
  16. 16. Thank you !!! Contact:maheshpanchal.1@gmail.com

×