HTML Tags Essentials

Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)
HTML Essentials

HTML Essentials
KeyPoints to develop in your own time!
Introductory concepts @ OxfordCambridge.Org all for free and free for all.
The information gathered here are under KeyPoints format and may be use:
- Either to give the reader an overview before deciding for a full scale study of the subject.
- Or to guide readers in expanding their knowledge on the given topic.
Some recommendations, perhaps:
- Identify all the KeyPoints on which you feel a need to expand your knowledge.
- Choose a good book or two and/or info from Internet.
- And then work towards gaining that knowledge.
Please enjoy!

Aim of publication
To introduce the reader or the learner to HTML
essentials tags

• This presentation pack has been created to help anyone willing to
understand the HTML and Web page designing at beginner level.
• It covers topics ranging from the <HTML> </HTML> to Frames.
Learning Objectives
<HTML>
</HTML>

Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)
Essential Tags: <HTML> <HEAD> <TITLE> <BODY>
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

TITLE tag
<HTML>
<HEAD>
<TITLE> My Title </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

META NAME
<HTML>
<HEAD>
<META NAME=" " CONTENT=" ">
</HEAD>
<BODY>
</BODY>
</HTML>

META NAME Classics
<HTML>
<HEAD>
<META NAME="Description” CONTENT=" text">
<META NAME=" Keywords” CONTENT=" words">
</HEAD>
<BODY>
</BODY>
</HTML>

META Name used by Pink
<META NAME=”DESCRIPTION” CONTENT="Pink Elephant aims to be the quality market leader in IT
management and the best company to work for. Quality market leadership in this field means:
excellence in translating knowledge into results. Think Pink. Different thinking and organizing in
IT.">
<META NAME=" KEYWORDS” CONTENT="Pink Elephant, Pink, Elephant, Elephants, Pinker, Pinkers,
Nederland, Netherlands, Zoetermeer, UK, United Kingdom, Canada, North America, Australia,
Sydney, US, USA, United States, Chicago, IT, Information, Technology, Informatietechnologie,
Think, ITIL, Prince2, Prince, 2, EFQM, Management, Beheer, IT-beheer, Project,
Projectmanagement, Automatisering, Infrastructure, Infrastructuur, Service, Services,
Education, Opleiding, Opleidingen, Course, Courses, Support, Ondersteuning, Implementation,
Implementatie, Migration, Migratie, Transformation, Transformatie, Outsourcing, Intranet,
Internet, Recruitment, Recruiting, People, Skills, Specialist, Specialists, Specialisten, Knowledge,
Communication, Communicatie, Innovation, Innovatie, Innovative, Innovatief, Event, Events,
Invoering, MS, Microsoft, Windows, Windows95, Windows98, 95, 98, NT, Desktop, HR, Human
Resources, Annual, Report, Jaarverslag, Foundation, Library, Rowing Association, RDRA, Leliveld,
Blaauw, Verburg, Noorder, Dierenpark, Zoo">

BODY tag
<HTML>
<HEAD>
</HEAD>
<BODY>
This is a example paragraph
that goes between the Body tags
</BODY>
</HTML>

Paragraphs
<HTML>
<HEAD>
</HEAD>
<BODY>
 one paragraph.
 a second paragraph.
 now line break here
 another line break there
</BODY>
</HTML>

Paragraphs: more
<HTML>
<HEAD>
</HEAD>
<BODY>
 Paragraph left justified 
 Also left justified
 Paragraph centred 
<center> Also centred </center>
<center> Centred as well </center>
Paragraph right justified
</BODY>
</HTML>

Formatting Text
<HTML>
<HEAD>
</HEAD>
<BODY>
<h1> Heading No 1 </h1>
<h5> Heading No 5 </h5>
Text in Italic 
Text in Bold 
 Text in Bold & Italic 
 Text Underline 
</BODY>
</HTML>

Text Colour
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFF000” TEXT="#FF0000">
Text is in the default colour 
This Text is
blue 
This Text is Super-Script 
This Text is Sub-Scrip t 
But <strike>this one</strike> is formatted with Strike-through 
</BODY>
</HTML>

Formatting Text: font face & colour
<HTML>
<HEAD>
</HEAD>
<BODY>
Text is in the colour of Green 
 Blue Text 
 This Text is blue
</BODY>
</HTML>

Background Colour
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFF000">
You can set the background to your favourite colour

You can also use a graphic as background (shown further
down)
</BODY>
</HTML>

Adding Graphics
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="logo_pinkie.gif">
 
<IMG SRC="logo_pinkie.gif" alt=”The Elephant">
 
<IMG SRC="logo_pinkie.gif” HEIGHT=75 WIDTH=25>
</BODY>
</HTML>

Adding Graphics: Alignment, more
<HTML>
<HEAD>
</HEAD>
<BODY>
Having text around the graphic
<IMG SRC="logo_pinkie.gif” VSPACE=5 HSPACE=30>
could be fun. Here we have 5 pixels forvertical space and
30 pixels for horizontal space
 
</BODY>
</HTML>

Adding Graphics: Alignment, even more
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="logo_pinkie.gif” ALIGN=TOP>Text top
<IMG SRC="logo_pinkie.gif” ALIGN=MIDDLE>Text
middle
<IMG SRC="logo_pinkie.gif” ALIGN=BOTTOM>Text bottom
</BODY>
</HTML>

Graphic: as Background
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="Pink Elephant Blue lighter.gif">
You can set the background with a graphic: GIF, JPEG

You can also use a colour as background (shown before) 
</BODY>
</HTML>

Adding Links: local, WWW
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<A HREF=”frame1.html">This link will take you to another Webpage (HTML file), on your own
site named: FRAME1.HTML</A>

<A HREF=” http://www.pinkelephant.com">This link takes you to a new Website on the World
Wide Web</A>

<A HREF=” http://www.pink.co.uk">This link takes you to another Website on the World Wide
Web</A>

<A HREF=” http://www.pink.co.uk/About.htm ">This link takes you to a Webpage called
About.htm (HTML file), on a new Website on the World Wide Web</A>
</BODY>
</HTML>

Adding Links: email
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<A HREF=”http://www.pinkelephant.com">This link takes you to a new Website on the World
Wide Web</A>

<A HREF=”mailto:info@pink.co.uk">This link will open your email client and all you will have to do
is to type your email body text.</A>
</BODY>
</HTML>

Table
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH> Him </TH> <TH> Her </TH>
</TR>
<TR>
<TD>Tom </TD> <TD> Alice </TD>
</TR>
<TR>
<TD>Hate </TD> <TD> Love </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Table: border
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TH> Him </TH> <TH> Her </TH>
</TR>
<TR>
<TD> Tom </TD> <TD> Alice </TD>
</TR>
<TR>
<TD>Hate </TD> <TD> Love </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Table: advanced sample

Lists: Ordered list
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Here is an Ordered List
<OL>
<LI>Car
<LI>Plane
<LI>Helicopter
<LI>Train
</OL>
</BODY>
</HTML>

Lists: Unordered list
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Here is an Unordered List
<UL>
<LI>Car
<LI>Plane
<LI>Helicopter
<LI>Train
</UL>
</BODY>
</HTML>

Lists: Definition List
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Here is an Unordered List
<DL>
<DT>Human being
<DD>a so called “intelligent” animal
<DT>Tree
<DD>something with branches and leaves
</DL>
</BODY>
</HTML>

FRAMES: columns
<HTML>
<FRAMESET COLS="25%, 75%">
<FRAME SRC=”frame1.html">
<FRAME SRC="frame2.html ">
</FRAMESET>
</HTML>

FRAMES: rows
<HTML>
<FRAMESET ROWS="25%, 75%">
<FRAME SRC=”frame1.html">
<FRAME SRC="frame2.html ">
</FRAMESET>
</HTML>

Template for text and picture
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFF000">
</BODY>
</HTML>

HTML Tags Essentials

Recomendados

Recomendados

Más contenido relacionado

Más de OxfordCambridge

Más de OxfordCambridge (20)

Último

Último (20)

HTML Tags Essentials