HTML Tags Essentials

The Seeds Of LearningOxfordCambridge.Org

The Seats of Learning‘knowledge can free the mind’

Welcome!

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>

Essential Tags: <HTML> <HEAD> <TITLE> <BODY>

</HEAD>

<BODY>

</BODY></HTML>

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>

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

BODY tag<HTML>

<HEAD><TITLE> My Title </TITLE>

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

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

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>

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

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

<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

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

</BODY></HTML>

Lists: Unordered list<HTML>

Here is an Unordered List

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

</BODY></HTML>

Lists: Definition List<HTML>

Here is an Unordered List

<DT>Human being<DD>a so called “intelligent” animal<DT>Tree<DD>something with branches and leaves

</BODY></HTML>

FRAMES: columns<HTML>

</FRAMESET>

</HTML>

FRAMES: rows<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

HTML Tags Essentials

Technology

HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Tags Explained

Html Tags

static dynamic html tags

Apostila- html e css - · PDF file1. o que são tags html? as tags html É a estrutura onde serÁ montada nossas pÁginas html. as tags sÃo responsÁveis pelo navegador interpretar

[Basic HTML/CSS] 3. html - table tags

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

[Basic HTML/CSS] 2. html - list tags

Essentials of HTML

HTML Semantic Tags

HTML Companion. Lecture Objectives Learn about HTML. Know basic HTML tags

Html TAGS 2

HTML Basic Tags

HTML tags and attributes

HTML Dasar : #3 Tags

Html tags slides 2016

Web html table tags

Html table tags

[Basic HTML/CSS] 1. html - basic tags

basic introduction of html tags