Wd & im session a2 _overview of html_march 08,2010

Web Designing & Internet Marketing
Session 2: Overview of HTML

What we are gone cover in this session ?

Overview of HTML
Introduction to HTML
Creating an HTML Document

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


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 document's content and its
structure.


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


General form of an HTML document

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

Corresponding
Closing tag
</html>


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 won't 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 don't support the some tags and some attributes.


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>


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>

• Output

This is a big heading!
This is a smaller heading!

This is an example of a paragraph.


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


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
– “” ends it
• Ex

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>WENT'99</FONT>
– Image Background
• <BODY BACKGROUND=bgimg.gif >


Tables

Example:
<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><strong></td><td><strong>This text is bold</strong></td>
</tr>
<tr>
<td><em></td><td><em>This text is emphasized</em></td>
</tr>
<tr>
<td><small></td><td><small>This text is small</small></td>
</tr>
<tr>
<td><sub></td><td><sub>This text is subscripted.</sub> This text is not.</td>
</tr>
<tr>
<td><sup></td><td><sup>This text is superscripted.</sup> This text is not.</td>
</tr>
<tr>
<td><ins></td><td><ins>This text is inserted</ins></td>
</tr>
<tr>
<td><del></td><td><del>This text is deleted</del></td>
</tr>
</table>


Tag List – Basic Tags

Start 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

Tag List – Character Formatting

Start 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


Tag List – Links

Start Tag Purpose
<a> Defines an anchor
<link> Defines a resource reference


Thank you !!!

Contact:
maheshpanchal.1@gmail.com

Wd & im session a2 _overview of html_march 08,2010

Recommandé

Recommandé

Contenu connexe

Plus de Mahesh Panchal

Plus de Mahesh Panchal (9)

Dernier

Dernier (20)

Wd & im session a2 _overview of html_march 08,2010