Basics of HTML

Basics of HTML
What is HTML?
• means HyperText Markup Language
• it is based on Structured Generalized
Markup Language- SGML
• uses tags and texts
• HTML is interpreted by a browser
• it does not define precise layout (browsers
decide how the display HTML)
HTML Source- 1
• consists of ASCII text
• Use a simple text editor for learning HTML
(e.g. Microsoft Notepad)
• HTML editors automates the process
• Latest Office products produce HTML
directly
• File endings are .htm or .html
HTML Source - 2
• Start tag switches format on < >
• End tag switches format off </>
• For example, text 
- this switches italics on and off
Tag Syntax
• Tag names are not case sensitive (but use
uppercase!)
• Cannot have spaces after <
- not 
• Can have spaces and other text before >
• Start tags can have attributes
- <tag_name attribute name>
- <tag_name attribute name=“argument”>
• Tags can be intermixed with text
MAIN TAGS IN HTML
• <HTML> and </HTML> - used to delimit an
HTML document (the start tag informs the browser
that an HTML document follows)
• <HEAD> AND </HEAD> - marks off
information about the whole document
• <BODY> AND </BODY> - defines the body or
text of a page (all that is intended to be read goes
here)
• <TITLE> AND </TITLE> - denotes the title of the
web page
General Web Page Structure
<HTML>
<HEAD>
<TITLE> title text goes here </TITLE>
</HEAD>
<BODY>
The text of the page goes here
</BODY>
</HTML>
Example 1
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
This is my first web page
</BODY>
</HTML>
Types of Tags
• Relative Tags:
browser can interpret meaning
• Fixed Tags:
- browser must supply the exact formatting
- these include those formatting types that
are possible even on a simple text terminal
Fixed Tags
• - applies an italic format
• - makes the browser
underline the text
• - makes the text appear
bold
Example 2
<HTML>
<HEAD>
</HEAD>
<BODY>
This is my first web page
The next two words are bold
This text is underlined 
Now back to unformatted text
</BODY>
</HTML>
Controlling Line Spacing
• Browsers do not recognize source line
layout
• Use explicit line spacing tags:
 and 
- causes a line break in output
- can use just 
• and : causes a paragraph format
Example 3
<HTML>
<HEAD>
</HEAD>
<BODY>
This is my first web page
The next two words are bold 
This text is underlined 
</BODY>
</HTML>
Headings
• <H1> </H1> The most prominent heading
• <H2> </H2>
• <H3> </H3>
• <H4> </H4>
• <H5> </H5>
• <H6> </H6> The least prominent heading
• All heading types add a line break after
end tag
Example 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1> Example HTML Source </H1>
</BODY>
</HTML>
More relative Style Tags
• <STRIKE> - adds strike out
• <BIG> and </BIG> - puts text in a big font
• and - puts text in a
small font
• and - use subscripts
• and - use superscripts
Example 5
<HTML>
<HEAD>
</HEAD>
<BODY>
emphasisemphasis and strong
<STRIKE>emphasis, strong and strikeout
</STRIKE>
</BODY>
</HTML>
RULES
• <HR>- draws a horizontal line across the page
• <HR WIDTH=“width”> - defines the width of the
rule
• WIDTH=“250” - as width in pixels
• WIDTH=“75%” - as width as a percentage
• <HR ALIGN=“alignment” WIDTH=“width”>
- alignment (left, center or right) and width
Example 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR ALIGN=left WIDTH =“75%”>
emphasisemphasis and strong
<STRIKE>emphasis, strong and strikeout
</STRIKE>
</BODY>
</HTML>
Comments
• 
• The browser will not display these texts

Font Styles
• <BASEFONT SIZE=number>
-specifies the normal font size
-number=1..7
-no end tag
• 
-specifies font size and color
-colorname=red,green,blue,etc
-US spelling of color
Example 7
<BASEFONT SIZE=4>
This paragraph shows some of the font styles available 
size1
size7 
Back to the base font size 
red
blue
green 
Back to base font
</BODY>
</HTML>
MISCELLANEOUS TAGS
• <BLOCKQUOTE> </BLOCKQUOTE>
- indents text
• <PRE> </PRE>
- includes text as is
• <CENTER> </CENTER>
- centers the text
Example 8
<BASEFONT SIZE=4>
<BLOCKQUOTE>
This should be indented
</BLOCKQUOTE>

<PRE>This should be shown as is </PRE>

 <CENTER>
This should be shown at the center of the window
</CENTER>
Character Encoding
• HTML should be platform independent
• How to display unusual characters?
• Character entities
- &keyword;
- &#ascii_equivalent;
• Need closing semicolon
Example 9
<HTML>
<HEAD>
<TITLE>My Web Page </TITLE>
</HEAD>
<BODY>
<HR ALIGN=left WIDTH=“75%”>
<BASEFONT SIZE=4>
This should be a pound currency symbol £ 
This should be a French A grave À
</BODY>
</HTML>
Displaying lists of data
Unordered lists: the list items will be
indented and start with a bullet
• <UL>
• <LI> first list item
• <LI> second list item etc.
• </UL>
• Note: <LI> does not need an end tag
• <UL TYPE=“type”>
- type can be disc, square or circle
Example 10
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL TYPE=“square”>
<LI> point 1
<LI> point 2
</UL>
</BODY>
</HTML>
Ordered Lists
• Numbered automatically by browser

and indented
• <OL>
• <LI> first list item
• <LI> second list item etc.
• </OL>
Ordered List Formatting
• Numbering formats can be obtained by adding
attributes to the <OL> tag
• <OL Type=“type” START=number
• Type can be:
- 1 uses numbers
- a uses lower case letters in sequence
- A uses upper case letters in sequence
- i uses lower case Roman numbering i.e. i, ii,
iii…
- I uses upper case Roman numbering i.e. I, II,
III…
• Number defines the starting number or letter
for the sequence
Example 11
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL TYPE=“I” START=3>
<LI> first list item
<LI> second list item etc.
</OL>
</BODY>
</HTML>
Definition Lists
• <DL>
• <DT> first term
• <DD> definition of the first term
• <DT> second term
• <DD> definition of the second term etc
• </DL>
• DT and DD items appear in pairs with the
definition indented from the term
Example 12
<HTML>
<HEAD>
</HEAD>
<BODY>
<DL>
<DT> first term <DD> first definition
<DT> second term <DD> second definition
</DL>
</BODY>
</HTML>
Hyperlinks
• Hyperlinks are essential for building effective
web sites
• Links can be based on text or graphics
• Text link must be made obvious to the user;
rendering it in blue and underlined
• It is possible to create a link to:
- another place in the same document
- another document
- a specific place in another document
• There are different ways of creating links using
anchor tags
Anchor Tags
• <A NAME=“anchor_name”>
- creates a target location that can be jumped to
by a link
• <A HREF=“#anchor_name”>
- creates a link to a named target location in the
same document. The anchor name must have
been previously marked with
<A NAME=“anchor_name”>
• <A HREF=“url”> - This creates a link to
another resource. It would start at the beginning
of resource
• <A HREF=“url#anchor_name”> - creates a link
to a specific target in another resource. The
target must be marked
Example 13
<HTML>
<HEAD>
</HEAD>
<BODY>
 this is my text 
 <A HREF=“test2.htm”>this is a link to test2.htm </A>

 <A HREF=“http://www.w3.org/TR/REC-
html32.html”>this a link to a previous HTML standard
</A>
</BODY>
</HTML>
Example 14
<HTML>
<HEAD>
<TITLE> My Second Web Page </TITLE>
</HEAD>
<BODY>
 This web page demonstrates how links work 
 <A HREF=“test1.htm”>this is a link back to test1.htm
</A> 
</BODY>
</HTML>

Basics of HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Basics of HTML

Caricato da

Copyright:

Formati disponibili

Basics of HTML

• The browser will not display these texts

• Numbered automatically by browser

Potrebbero piacerti anche