Download pptx - HTML Tags Essentials

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

The Seeds Of LearningOxfordCambridge.Org

The Seats of Learning‘knowledge can free the mind’

Welcome!

HTML Essentials

mailto:[email protected]?subject=Feedback%20to%20OxfordCambridge%20Dot%20Org

http://www.oxfordcambridge.org/index1.htm



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

mailto:[email protected]?subject=Feedback%20from%20OxfordCambridge.Org%20site



TITLE tag<HTML>

<HEAD>

<TITLE> My Title </TITLE>

</HEAD>

<BODY>

</BODY></HTML>




META NAME<HTML>

<HEAD>

<TITLE> My Title </TITLE><META NAME=" " CONTENT=" ">

</HEAD>

<BODY>

</BODY></HTML>




META NAME Classics<HTML>

<HEAD>

<TITLE> My Title </TITLE>

<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><TITLE> My Title </TITLE>

<META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words">

</HEAD>

<BODY>

This is a example paragraph that goes between the Body tags

</BODY></HTML>




Paragraphs<HTML>



</HEAD>

<BODY>

 one paragraph. a second paragraph. now line break here another line break there

</BODY></HTML>




Paragraphs: more<HTML>



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

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

Text is in the colour of Green Blue Text 

 This Text is blue</BODY>

</HTML>




Background Colour<HTML>



</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><TITLE> My Title </TITLE></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>


<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><TITLE> My Title </TITLE></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>


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


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

<A HREF=”mailto:[email protected]">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>


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


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


Here is an Ordered List

<OL>

<LI>Car<LI>Plane<LI>Helicopter<LI>Train

</OL>

</BODY></HTML>




Lists: Unordered list<HTML>


Here is an Unordered List

<UL>

<LI>Car<LI>Plane<LI>Helicopter<LI>Train

</UL>

</BODY></HTML>




Lists: Definition List<HTML>


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><BODY BGCOLOR="#FFFF000">

</BODY></HTML>





‘knowledge can free the mind’

Thank you for your interest!






The Seats of Learning

Information Gathering Links



http://www.google.co.uk/

http://www.yahoo.com/

http://www.dogpile.com/

http://www.altavista.com/

http://www.webcrawler.com/

http://www.lycos.com/

http://www.mamma.com/

http://www.ask.com/

http://www.wikipedia.org/

http://www.bing.com/