HTML Tags Essentials

498 views

Published on

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.

Introductory concepts @ OxfordCambridge.Org all for free and free for all.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
498
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML Tags Essentials

  1. 1. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)HTML Essentials
  2. 2. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)HTML EssentialsKeyPoints 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!
  3. 3. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)Aim of publicationTo introduce the reader or the learner to HTMLessentials tags
  4. 4. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)• This presentation pack has been created to help anyone willing tounderstand the HTML and Web page designing at beginner level.• It covers topics ranging from the <HTML> </HTML> to Frames.Learning Objectives<HTML></HTML>
  5. 5. 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>
  6. 6. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)TITLE tag<HTML><HEAD><TITLE> My Title </TITLE></HEAD><BODY></BODY></HTML>
  7. 7. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)META NAME<HTML><HEAD><TITLE> My Title </TITLE><META NAME=" " CONTENT=" "></HEAD><BODY></BODY></HTML>
  8. 8. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)META NAME Classics<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY></BODY></HTML>
  9. 9. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)META Name used by Pink<META NAME=”DESCRIPTION” CONTENT="Pink Elephant aims to be the quality market leader in ITmanagement 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 inIT."><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, HumanResources, Annual, Report, Jaarverslag, Foundation, Library, Rowing Association, RDRA, Leliveld,Blaauw, Verburg, Noorder, Dierenpark, Zoo">
  10. 10. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)BODY tag<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY>This is a example paragraphthat goes between the Body tags</BODY></HTML>
  11. 11. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Paragraphs<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY><P> one paragraph.<P> a second paragraph.<BR> now line break here<BR> another line break there</BODY></HTML>
  12. 12. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Paragraphs: more<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY><p ALIGN="left"> Paragraph left justified </p><p> Also left justified</p><p ALIGN="center"> Paragraph centred </p><center><p> Also centred </p></center><center><p ALIGN="center"> Centred as well </p></center><p ALIGN="right">Paragraph right justified</p></BODY></HTML>
  13. 13. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Formatting Text<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY><h1> Heading No 1 </h1><h5> Heading No 5 </h5><i>Text in Italic </i> <BR><b>Text in Bold </b><BR><b><i> Text in Bold & Italic </i></b><BR><u>Text Underline </u></BODY></HTML>
  14. 14. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Text Colour<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY BGCOLOR="#FFFF000” TEXT="#FF0000">Text is in the default colour<BR><font COLOR="BLUE">This Text isblue</font> <BR>This <sup> Text </sup> is Super-Script <BR>This <sub> Text </sub> is Sub-Scrip t<BR>But <strike>this one</strike> is formatted with Strike-through <BR></BODY></HTML>
  15. 15. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Formatting Text: font face & colour<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY><font COLOR="#00FF00">Text is in the colour of Green</font> <BR><font COLOR="BLUE”> Blue Text</font> <BR><font FACE="ARIAL” COLOR="NAVY"> This Text is blue</font></BODY></HTML>
  16. 16. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Background Colour<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY BGCOLOR="#FFFF000">You can set the background to your favourite colour<P>You can also use a graphic as background (shown furtherdown)</BODY></HTML>
  17. 17. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Adding Graphics<HTML><HEAD><TITLE> My Title </TITLE></HEAD><BODY><IMG SRC="logo_pinkie.gif"><BR><IMG SRC="logo_pinkie.gif" alt=”The Elephant"><BR><IMG SRC="logo_pinkie.gif” HEIGHT=75 WIDTH=25></BODY></HTML>
  18. 18. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Adding Graphics: Alignment, more<HTML><HEAD><TITLE> My Title </TITLE></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 and30 pixels for horizontal space<BR></BODY></HTML>
  19. 19. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Adding Graphics: Alignment, even more<HTML><HEAD><TITLE> My Title </TITLE></HEAD><BODY><IMG SRC="logo_pinkie.gif” ALIGN=TOP>Text top<P><IMG SRC="logo_pinkie.gif” ALIGN=MIDDLE>Textmiddle<P><IMG SRC="logo_pinkie.gif” ALIGN=BOTTOM>Text bottom</BODY></HTML>
  20. 20. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Graphic: as Background<HTML><HEAD><TITLE> My Title </TITLE></HEAD><BODY BACKGROUND="Pink Elephant Blue lighter.gif"><b>You can set the background with a graphic: GIF, JPEG</b><P><b>You can also use a colour as background (shown before) </b></BODY></HTML>
  21. 21. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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 ownsite named: FRAME1.HTML</A><P><A HREF=” http://www.pinkelephant.com">This link takes you to a new Website on the WorldWide Web</A><P><A HREF=” http://www.pink.co.uk">This link takes you to another Website on the World WideWeb</A><P><A HREF=” http://www.pink.co.uk/About.htm ">This link takes you to a Webpage calledAbout.htm (HTML file), on a new Website on the World Wide Web</A></BODY></HTML>
  22. 22. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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 WorldWide Web</A><P><A HREF=”mailto:info@pink.co.uk">This link will open your email client and all you will have to dois to type your email body text.</A></BODY></HTML>
  23. 23. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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>
  24. 24. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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>
  25. 25. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Table: advanced sample
  26. 26. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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>
  27. 27. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)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>
  28. 28. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Lists: Definition List<HTML><HEAD><TITLE> </TITLE></HEAD><BODY><b>Here is an Unordered List</b><DL><DT>Human being<DD>a so called “intelligent” animal<DT>Tree<DD>something with branches and leaves</DL></BODY></HTML>
  29. 29. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)FRAMES: columns<HTML><FRAMESET COLS="25%, 75%"><FRAME SRC=”frame1.html"><FRAME SRC="frame2.html "></FRAMESET></HTML>
  30. 30. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)FRAMES: rows<HTML><FRAMESET ROWS="25%, 75%"><FRAME SRC=”frame1.html"><FRAME SRC="frame2.html "></FRAMESET></HTML>
  31. 31. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)Template for text and picture<HTML><HEAD><TITLE> My Title </TITLE><META NAME="Description” CONTENT=" text"><META NAME=" Keywords” CONTENT=" words"></HEAD><BODY BGCOLOR="#FFFF000"></BODY></HTML>
  32. 32. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Trinity College, Cambridge)
  33. 33. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgCurricula - Curriculum (This picture: Harcourt Hill, West Oxford)

×