Scribd
Upload
114 views

1 Intro To HTML

HTML is a markup language used to structure and present content on the web. It uses tags to give instructions to web browsers on how to display text, images, and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for the visible page content, and <a> for creating links. Learning HTML allows you to build web pages and understand how information is delivered on the internet.

Uploaded by

Bernie
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
114 views

1 Intro To HTML

HTML is a markup language used to structure and present content on the web. It uses tags to give instructions to web browsers on how to display text, images, and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for the visible page content, and <a> for creating links. Learning HTML allows you to build web pages and understand how information is delivered on the internet.

Uploaded by

Bernie
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Intro to HTML

The Basics
HTML

HTML means Hyper Text Markup Language.


HTML is a language that helps us to create web sites
in the Internet. HTML helps to coordinate human
and the computer. So we have to use some codes to
explain to computer what are we going to do.
Therefore we use HTML to give instructions to create
web sites.
Why We Learn HTML?
Tim Berners-Lee
(CERN physicist)
Creator of HTML &
WWW

CERN is an European
Organization for Nuclear
Research at Geneva
Beginning of HTML
• HTML is an evolving standard (as new
technology/tools are added)
 HTML 1 (Sir Tim Berners-Lee, 1989): very basic,
limited integration of multimedia
in 1993, Mosaic added many new features (e.g., integrated
images)

 HTML 2.0 (IETF, 1994): tried to standardize these &


other features, but late
in 1994-96, Netscape & IE added many new, divergent
features

 HTML 3.2 (W3C, 1996): attempted to unify into a


single standard
but didn't address newer technologies like Java applets &
streaming video
Beginning of HTML (cont.)
 HTML 4.0 (W3C, 1997): current standard (but moving
towards XHTML)
attempted to map out future directions for HTML, not just
react to vendors

 HTML 4.01(W3C, 1999):

 XHTML 1.0 (W3C, 2000): HTML 4.01 modified to


conform to XML standards

 XHTML 1.1 (W3C, 2001): “Modularization” of XHTML


1.0

 HTML 5 (Web Hypertext Application Technology


Working Group, W3C, 2006): New
HTML Tags

We use some codes to explain to computer


what are we going to do. These codes called
as “Tags”.
HTML tags must type in the angle
brackets(<>) ,it wants to type in a text editor
and save with .htm or .html extension. If we
use a tag we should close the tag. To close
the tag we use closing tags(</>).
Software & Text Editors
• What You See is What You Get(Software):
Dreamweaver, Microsoft FrontPage, Netscape Composer,
Adobe Page Mill, ,Hotdog
• Word (Save As Webpage)
• Text Editors
• Notepad
• Word pad
• Code View
• GEdit
• Nano Editor
• In HTML we use some essential tags. They are

• <html>
• <head> Heading Section
• <title></title>
• </head>
• <body></body>
• </html> Body Section
HTML Tags
• Tag – an HTML code that tells the browser
HOW to display something
• Opening Tag <h3>
• Closing Tag </h3>
• Example : <b>This will be bold</b>
• Tags will not appear in browsers
• All open tags must have corresponding
closing tag.
Attributes
Attributes provide additional display
information about a tag
Attributes appear within the opening tag
brackets
Attribute values must be contained in quotes
You can have more than one attribute in a
tag

<font size=“1” color=“green">This text would


be green and smaller</font>
HTML Tags
Basic Tags

<html></html>
Creates an HTML document
<head></head>
Sets off the title and other
information that isn't displayed on
the Web page itself
<body></body>
Sets off the visible portion of the
document
Header Tags

<title></title>
Puts the name of the document in
the title bar

Things in the header section do not appear


in the browser
Body Attributes

<body bgcolor=?>
Sets the background color, using name or
hex value
<body text=?>
Sets the text color, using name or hex value
<body background=url>
Specifies an image file to be used as
background
<body vlink=?>
Sets the color of followed links, using name
or hex value
<body alink=?>
Sets the color of links on click
Text Formatting Tags 1

<hl></hl>
Creates the largest header
<h6></h6>
Creates the smallest header
<b></b>
Creates bold text
<i></i>
Creates italic text
Text Formatting Tags 2

<strong></strong>
Emphasizes a word (with italic or bold)
<font size=“?”></font>
Sets size of font
<font color=“?”></font>
Sets font color, using name or hex value
<font face=“?”></font>
Set font style like Comic Sans MS
Paragraph Formatting Tags

<p></p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or
center
<br>
Inserts a line break
<blockquote></blockquote>
Indents text from both sides
HTML Formatting
Ordered Lists –this is a numbered
list, starts with <ol> and ends with
</ol>, each new item in list requires
the <li> tag

Sample code…. Browser view…


<ol> List Name Yankees Starting Lineup
<li> list item 1 1. Johnny Damon
<li> list item 2 2. Derek Jeter
<li> list item 3 3. Bobby Abreu
<li> list item 4 4. Robbie McGarry
</ol>
HTML Formatting
Un-ordered Lists –bulleted list of
items, starts with <ul> tag and ends
with </ul> tag, and each list item
begins with <li>

Sample code…. Browser view…


<ul> List Name Yankees Starting Lineup
<li> list item 1 •Johnny Damon
<li> list item 2 •Derek Jeter
<li> list item 3 •Bobby Abreu
<li> list item 4 •Robbie McGarry
</ul>
HTML Formatting
Definition Lists –not a list of items
but a list of terms and explanations
or definitions
Note: inside a definition list (the <dd> tag) you can
put paragraphs, line breaks, images, links and
other lists

Sample code…. Browser view…


<dl>
<dt>Vocab Word 1 Rock
<dd>Definition 1 hard object, made..
<dt>Vocab Word 2 Ball
<dd>Definition 2 round object….
</dl>
Table Formatting Tags
 <table></table>
Creates a table
 <tr></tr>
Sets off each row in a table
 <td></td>
Sets off each cell in a row
 <table border=#>
Sets width of border around table cells
 <table width=“ ? %” or height=“ ? %”>
Sets width and height of table - in pixels or as a
percentage of document width
How Tables Work

<table>

<tr> <td> </td> <td> </td> <td> </td> </tr>

<tr> <td> </td> <td> </td> <td> </td> </tr>

<tr> <td> </td> <td> </td> <td> </td> </tr>


</table>
Images
Img = image
src = source of the image
alt = stands for alternate and is used to name
the image, important for visually impaired
users (text to speech)
<img src =“nameoftheimage.jpg”
alt=“description”>
<img src =“nameoftheimage.gif”
alt=“description”>
Images
Aligning Images can be done with the
“align=“ tag. Place this inside of your image
source code. You can only align to the right
or to the left with this tag.

<img src=“name.jpg” alt=“description”


align=“right”>
*Note <img….> tag is an empty tag with no
</img> tag necessary
Image as a Link
<a href=“url or file name”><img src =
“imagefile.jpg” alt=“description”></a>

Insert the img src


tag in place of the
clickable text on a
normal link
Creating Links
Two types of links

1. absolute: link to an outside website


2. relative: link to another page within your
website
HTML uses the <a> (anchor) tag to create a link to
another document
An anchor can point to any resource on the Web: an HTML
page, an image, a sound file, a movie, etc.
The correct Syntax of creating an anchor:

<a href="url">Text to be displayed</a>


Creating Absolute Links
Closing
Where this Anchor
Anchor link will take Tag
Tag you

<a href="url">Text to be displayed</a>

Href
attribute Text
used to hyperlink
address the that
document to appears in
link to browser
Creating Relative Links
Where this link will
Anchor take you (page
Tag within website name

<a href=“nameofpage.html">Text to be
displayed</a>

Closing
href Anchor
attribute Tag Text
used to hyperlink
address the that
document appears in
to link to browser
Link Tag
Html Links :

Html links are defined with the <a> tag


Syntax : <a href="http://www.gmil.com">Gmail</a>
<html>
Example : <body>

<a href="http://www.gmail.com">Gmail</a>

</body>
</html>

If we click this link it goes to gmail


O/P : Gmail account

You might also like