1 intro to html
TRANSCRIPT
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 1/30
Intro to HTML
The Basics
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 2/30
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 humanand the computer. So we have to use some codes toexplain to computer what are we going to do.Therefore we use HTML to give instructions to create
web sites.
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 3/30
Why We Learn HTML?
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 4/30
Tim Berners-Lee
(CERN physicist)
Creator of HTML &
WWW
CERN is an European
Organization for NuclearResearch at Geneva
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 5/30
• HTML is an evolving standard (as new
technology/tools are added) HTML 1 (Sir Tim Berners-Lee, 1989): very basic,
limited integration of multimediain 1993, Mosaic added many new features (e.g., integrated
images)
HTML 2.0 (IETF, 1994): tried to standardize these &
other features, but latein 1994-96, Netscape & IE added many new, divergent
features
HTML 3.2 (W3C, 1996): attempted to unify into a
single standardbut didn't address newer technologies like Java applets &
streaming video
Beginning of HTML
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 6/30
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 TechnologyWorking Group, W3C, 2006): New
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 7/30
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 closethe tag we use closing tags(</>).
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 8/30
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
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 9/30
• In HTML we use some essential tags. They are
• <html>
• <head> Heading Section
• <title></title>• </head>
• <body></body>
• </html> Body Section
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 10/30
HTML Tags
• Tag – an HTML code that tells the browserHOW 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.
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 11/30
Attributes
Attributes provide additional displayinformation about a tag
Attributes appear within the opening tagbrackets
Attribute values must be contained in quotes
You can have more than one attribute in atag
<font size=“1” color=“green">This text wouldbe green and smaller</font>
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 12/30
HTML Tags
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 13/30
Basic Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and otherinformation that isn't displayed onthe Web page itself
<body></body> Sets off the visible portion of thedocument
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 14/30
Header Tags
<title></title> Puts the name of the document inthe title bar
Things in the header section do not appear
in the browser
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 15/30
Body Attributes
<body bgcolor=?> Sets the background color, using name orhex 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 nameor hex value
<body alink=?> Sets the color of links on click
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 16/30
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
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 17/30
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
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 18/30
Paragraph Formatting Tags
<p></p> Creates a new paragraph
<p align=?> Aligns a paragraph to the left, right, orcenter
<br>
Inserts a line break<blockquote></blockquote>
Indents text from both sides
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 19/30
Ordered Lists –
this is a numberedlist, starts with <ol> and ends with
</ol>, each new item in list requires
the <li> tag
HTML Formatting
Sample code….
<ol> List Name
<li> list item 1<li> list item 2
<li> list item 3
<li> list item 4
</ol>
Browser view…
Yankees Starting Lineup
1. Johnny Damon2. Derek Jeter
3. Bobby Abreu
4. Robbie McGarry
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 20/30
Un-ordered Lists –
bulleted list of items, starts with <ul> tag and ends
with </ul> tag, and each list item
begins with <li>
HTML Formatting
Sample code….
<ul> List Name
<li> list item 1<li> list item 2
<li> list item 3
<li> list item 4
</ul>
Browser view…
Yankees Starting Lineup
•Johnny Damon•Derek Jeter
•Bobby Abreu
•Robbie McGarry
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 21/30
Definition Lists –
not a list of itemsbut a list of terms and explanations
or definitionsNote: inside a definition list (the <dd> tag) you can
put paragraphs, line breaks, images, links and
other lists
HTML Formatting
Sample code….
<dl><dt>Vocab Word 1
<dd>Definition 1
<dt>Vocab Word 2
<dd>Definition 2
</dl>
Browser view…
Rock
hard object, made..
Ball
round object….
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 22/30
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 apercentage of document width
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 23/30
How Tables Work
<tr> </tr>
<table>
</table>
<td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 24/30
Images
Img = image
src = source of the image
alt = stands for alternate and is used to name
the image, important for visually impairedusers (text to speech)
<img src =“nameoftheimage.jpg”
alt=“description”>
<img src =“nameoftheimage.gif”
alt=“description”>
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 25/30
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
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 26/30
Image as a Link
<a href=“url or file name”><img src =
“imagefile.jpg” alt=“description”></a>
Insert the img srctag in place of the
clickable text on a
normal link
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 27/30
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 HTMLpage, an image, a sound file, a movie, etc.
The correct Syntax of creating an anchor:
<a href="url">Text to be displayed</a>
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 28/30
Creating Absolute Links
<a href="url">Text to be displayed</a>
Anchor
Tag
Href
attribute
used to
address the
document to
link to
Where this
link will take
you
Text
hyperlink
that
appears in
browser
Closing
Anchor
Tag
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 29/30
Creating Relative Links
<a href=“nameofpage.html">Text to be
displayed</a>
AnchorTag
href attribute
used to
address the
document
to link to
Where this link will
take you (page
within website name
Text
hyperlink
that
appears in
browser
Closing
AnchorTag
7/31/2019 1 Intro to HTML
http://slidepdf.com/reader/full/1-intro-to-html 30/30
Link Tag Html Links :
Html links are defined with the <a> tag
Syntax : <a href="http://www.gmil.com">Gmail</a>
Example :<html><body>
<a href="http://www.gmail.com">Gmail</a>
</body></html>
GmailO/P :If we click this link it goes to gmail
account