Slides 2 - HTML

Introduction to:
HTML
Fundamental Concepts

July 17, 2012
Web training for Ph.D. Students
@Unicam

Agenda
• Getting Started with HTML
• How to create and view an HTML document?
• The HTML basic tags
• Background & naming documents
• Headings, font size, alignment
• Linking
• Images
• Tables
• XML
• Resource sites

HTML stands for…?
• HyperText Markup Language
– Hyper is the opposite of linear. HTML allows the
person viewing the Web page to go anywhere, any
time
– Text is what you will use
– Mark up is what you will do
– Language it's a language, really – but the language
is plain English

What is HTML?
• HTML works in a very simple and logical way
• Reads from top to bottom, left to right
• Tells the browser what to do and what props to use
• HTML is written with text and tags

• Tags are used to set certain sections apart and to
specify their format (e.g. bigger text, smaller text, bold
text, underlined text…)
– Learning HTML is learning the tag to perform whatever
command you want to do

HTML tags in a nutshell
• Tags…
– …are like commands!
– …are sorrounded with angle brackets
• <B> <I> <HEAD> …
– …come in pairs (in most cases):
• Exceptions: <br>, <li> …
– …turn an action on (opening tag) and then off (closing tag)
– …ending an action start with a forward slash:
• E.g. <B> text </B> make the "text" bold!
– …can be embedded:
• <HEAD><TITLE> your text</TITLE></HEAD> (order is often mandatory!)
– …are not case sensitive
– …can have attributes (most of them)
• E.g. <P align=«center"> centers the paragraph which follows the tag
– …can be supported in different ways by different browsers or cannot be
supported at all (basic tags are always supported!)

Tags – behind the scenes
<B>Unicam</B> loves <I> U </I>

– <B> is the beginning bold tag
– “Unicam" is the word being affected by the tag
– </B> is the end bold tag. Exactly the same as the
beginning tag, except of the slash
– The same goes for <I> which starts an italic section
– Unless you view the page source the code is hidden
from view!!

Unicam loves U

Combine tags
• Tags can affect text at the same time
– <B><I>Bold and Italic</I></B> gives you Bold and Italic

• When using more than one tag together:
– make sure to begin and end both (without
interleaving)!
– set the beginning and end tags at the same time
– always placing them on the farthest end of the item
being affected
– set commands at the farthest ends each time you add
them

Note that…
• Clearly, not everything on a web page needs to
have tags

• If you forget to add an end tag it will be obvious
when you view the document in your browser
– the entire document after the point where you forget
the end tag will be affected!
– to fix it, go back into the document, add the slash,
save, and then reload

Writing HTML
• By hand
– using tools such as NotePad on Windows
– OS X users can use TextEdit on the Mac

• using an HTML assistant program
– easier than by hand
– but harder to understand HTML because the
program does all work

Naming HTML documents
• Basic format — name and suffix
• Follow this format to name your document:
– Choose a name. Anything.
– Add a suffix. For all HTML documents, you will add
either ".htm" or ".html"
• .html tells the computer that this file is an
HTML document
• All files used on the Web will follow the
format of "name.suffix"

HTML annotations
• Web page authors may write notes or
describe what is happening within the HTML
document
– these notes show in the HTML source, not the
Web page display
– The format is the following:

•

Basic HTML document format
• Every HTML document starts with this tag:
<HTML>
– next tags will always be these:
<TITLE> and </TITLE> (text in between shows up in the
title bar at the top of the browser)

• Every page ends with the <HMTL> closing tag:
</HTML>

Basic HTML document format
• Every page starts with this tag to define the
version being used (here HTML5):
<!DOCTYPE html>

• Then it is followed by the tag:
<HTML>

• Every page ends with the closing tag:
</HTML>

Smallest example, ever!
<!DOCTYPE html>
<HTML>
<TITLE> MY TITLE </TITLE>
<B>THIS IS SOME BOLD TEXT!</B>
<I> THIS TEXT IS INSTEAD ITALIC! </I>
</HTML> Can you see something?
Yes.. However some important parts are
missing!!!
• Write a file with this HTML code, save it as .html
file and open it in your browser! 

Tidy up…
• HTML files are is structured into two sections
after tag <HTML>:
– HEAD
contains information about the document (e.g. the title,
scripts, meta information and more)

– BODY
contains the content to be displayed on the web page, i.e.
everything that must be displayed is inside the <BODY>
tags

Complete smallest example
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

• NB: indentation is not mandatory, but it is important to improve the
readability!

Tag attributes
• Attributes provide additional information about
HTML elements
• Attributes are always specified in the start tag
one after the other, without commas or other
punctuation
• Attributes come in name/value pairs
like: name="value" (values should always be
enclosed in quotes – double or single one!)
• Much like tags, attribute names and attribute
values are case-insensitive (recommended lower-
case though)

Body attributes
• The body tag can have the following attributes:
– bgcolor: It can used for changing the background color
– background: It is used for specify the image to be
displayed
– link: It indicates the color of the hyperlinks , which have
not been visited
– alink: It indicates the color of active Hyperlinks, An active
link is the one on which the mouse button is pressed
– vlink: It indicates the color of the hyperlinks after the
mouse click on it
– text: It is used for specifying the color of the text displayed
on the page

Colorise…
• Colors are defined using a hexadecimal
notation (HEX) for the combination of
(primary colors) Red, Green and Blue (RGB)

• The lowest value for a color is 0 (in HEX: 00);
the highest is 255 (in HEX: FF).
– E.g.: FF FF FF (white), 00 00 00 (black), FF 00 00
(red), FF FF 00 (yellow) and so on...

Color names
• All the browsers supports also color names
which can be used in place of hex.
• 147 color names are defined in the HTML
color specification. 16 are basic colors
• Basic colors are:
– aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white
and yellow

Smallest example, recolored
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> My page </TITLE>
</HEAD>
<BODY bgcolor="black" text="#ffff00">
</BODY>
</HTML>

Headings
• Heading commands are used to create headings
for sections and sub-sections in the document
– there are six (6) heading commands: <H1> through
<H6>
– <H1> is the largest and <H6> is the smallest
– heading commands create nice, bold text with a
simple H# and /H# command
• When using a heading command you set the text
alone
– Browsers automatically add some empty space (a
margin) before and after each heading

Heading (cont.)
• Use HTML headings for headings only. Don't use
headings to make text BIG or bold.

• Since users may skim your pages by its headings,
it is important to use headings to show the
document structure.

• H1 headings should be used as main headings,
followed by H2 headings, then the less important
H3 headings, and so on.

Paragraphs
• HTML documents are divided into paragraphs
• Paragraphs are defined with the <P>…</P> tags
• Browsers automatically add an empty line before
and after a paragraph
• To add a linebreak inside a paragraph use the tag
<BR/>
• BR is an empty tag, hence it has no end tag (and a
final slash)

Formatting tags
• Some of the most important tags in the <body>. Permits to format the
text.
• Most important are:
– <b> bold text
– <big> big text
– <del> deleted text (strikethrough text and underline inserted)
– <em> emphasized text
– <i> italic text
– <ins> inserted text
– <small> small text
– <sub> subscripted text
– <sup> superscripted text
– <u> underline text (Deprecated! Text can be confused with
hyperlinks!)
– <address> contact information for the author/owner of a document
– <code> computer code text

Smallest example, improved
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR ="blAck" TEXT="#FFFF00">
<H1> My Ideas</H1>
<B> Unicam </B> is <I>my</I> university.<BR/>
<P> I think that it is also the university I <DEL>hate</DEL>
ehr...<B><I>love</B></I> the most! :) </P>
<H2> Question</H2>
<P>Do you think that I can love another University??</P>
</BODY>
<HTML>

Font names and sizes
• HTML provides the flexibility of changing font
size, color, etc.
• Every browser has a default font setting that
governs the default font name, size and color
• HTML provides the <FONT> tag with
attributes:
– face: specifies the font family used
– color: specifies the color of the text
– size: specifies the size of the text

Font names and sizes (cont.)
• There are twelve (12) font size commands
available: +6 through +1 and -1 through -6
– +6 is the largest (it's huge!!);
– -6 is the smallest (it's a little too small…)
• Faces are not supported by browsers in the
same way and should be avoided
• Generally speaking, the <font> tag is
deprecated: CSS must be used in place of it!

Font tag, an extended example
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Font Tag </TITLE>
</HEAD>
<BODY bgcolor =“#FFFFFF”>
Welcome to <font face="Calibri" size="1">Unicam</font><br/>
Welcome to <font face="Monospace" size=«6" color="red"> Unicam
</font><br/>
Welcome to <font face="arial" size="2">Unicam</font><br/>
</BODY>
</HTML>

Aligning text
• Default alignment is left-justified
• To center text you surround the text you want
centered with simple <CENTER> and
</CENTER> commands
• To align text on the right, set the text aside as
a separate paragraph using the <P> command
plus an attribute:
• <P ALIGN="right">Text in the paragraph is
pushed to the right</P>.

Special characters
• Certain characters have special meaning in HTML
– E.g. < > delimit tags

• Such characters can be displayed in the page as
simple “less than” or “greater than” characters
but you have to take care that the characters are
not interpreted as the special ones!
– The < character can be specified as &It
– The > character can be specified as &gt
– The & character can be specified as &amp

Creating a link
<A href="URL">text displayed on the web page</A>

• Links to another page are a set of tag format
– A stands for Anchor. It begins the link to another page
– href stands for Hypertext REFerence. That says to the
browser, "This is where the link is going to go.“
– URL of the web site is the FULL ADDRESS of the link
Also notice that the address has an equal sign in front
of it and is enclosed in quotes (it is an attribute)
– text displayed on the web page is where you write
the text you want to appear on the page

Adding an e-mail link
<A href="mailto:e-mail">text displayed</A>
• Known as mailto command
• Follows the same coding scheme as a link: on
click a piece of e-mail is sent to you
• same format as a link except you write "mailto:"
in place of the “http://” and your e-mail address
in place of the page address
– still need the </A> tag at the end
– note there is NO SPACE between the colon and the e-
mail address

Images
<IMG src="filename.gif“/>
– IMG stands for "image" and tells the browser that an
image will go here on the page wherever you write in
the image tag
– src stands for "source", an attribute that tells the
browser where to go to find the image
– filename.gif is the name of the image, and this file
name follows the same format as HTML docs:
• name (of the image file) then a dot
• then there is a suffix (gif) or .jpg or .bmp
• Similarly to BR it is an empty tag (trailing slash)

Image info
• Place image files in the same directory as the
page
– you can call for the image by name alone
• Otherwise adds directories and subdirectories to
the SRC attribute to correctly link the picture
– some place all their images in an image directory; that
can cut down on the confusion
• In general, be consistent on where you locate
images or else the image won’t display!!

(Other) Image attributes
• width: this is used specify the desired width of the image
(default, in pixels)
• height: this is used to specify the desired height of the
image (default, in pixels)
– It is a good practice to specify both the height and width. If set,
the space required for the image is reserved on page loading
• border: specifies the width of the border of the image. By
default value is 0. i.e there is no border
• alt: displayed or used when the user is using a browser that
does not display images (text only browsers or voice
browsers); it follows the src attribute:
<IMG src="UpArrow.gif" alt="short description of the pic.">

Image file types
• three basic image formats on the Web and they
have different suffixes
– .gif This is generally pronounced "gif" (hard "G"), an
acronym for Graphics Interchange Format that
browsers can handle quite easily
– .jpeg or .jpg (pronounced "j-peg") an acronym for
Joint Photographic Experts Group, and this format
uses compression after it's been created
– .bmp (pronounced "bimp") or a "bitmap". Internet
Explorer browsers allow images as bitmaps (images a
computer produces and places for you, such as a
counter)

Clickable images
• An image where if you click on it you activate
a hypertext link to another web page
• The format is:
• <A HREF="http://URL of the web
page"><IMG SRC="filename.gif"></A>
• Places an image tag where normally there
would be words
• entire image is “clickable,” or active

Lists of items
• The most common HTML lists are ordered and
unordered lists:
An ordered list: An unordered list:
1.The first list item •List item
2.The second list item •List item
3.The third list item •List item

• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.

Lists of items, an example
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Font Tag </TITLE>
</HEAD>
<BODY>
<P> We need to buy the following items
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>The</li>
<li>More coffee!!!</li>
</ul>
</P>
</BODY>
</HTML>

Tables
• Very useful for presentation of tabular
information
• Useful to creative HTML authors who use the
table tags to present their regular Web pages
– tables can control page layout
• A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the
<td> tag)
• A border attribute can be added to show a border
around cells

Table format
<TABLE border=“1”>

<CAPTION> caption contents </CAPTION>

<TR>

<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR>

<TR>

<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR>
</TABLE>

HTML Block Elements
• Most HTML elements are defined as block
level elements or as inline elements.
• Block level elements normally start (and end)
with a new line when displayed in a browser
– E.g.: <h1>, <p>, <ul>, <table>
• Inline elements are normally displayed
without starting a new line
– E.g.: <b>, <td>, <a>, <img>

The div tag
• The HTML <div> element is a block level element that
can be used as a container for grouping other HTML
elements
• The <div> element has no special meaning. Since it is a
block level element, the browser will display a line
break before and after it
• When used together with CSS, the <div> element can
be used to set style attributes to large blocks of
content
• Another common use of the <div> element, is for
document layout. The style attribute can be used to
specify the inline style for an element

Final example
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="yourimage.jpg" ALT="there is no image!!" ALIGN="BOTTOM"> </CENTER>
<a href="http://somegreatsite.com">Link Name</a> is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
Send me mail at <a href="mailto:support@yourcompany.com">support@yourcompany.com</a>.
<P> This is a new paragraph!</P>
<P> <B>This is a new paragraph!</B> <BR/>
<B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
</P>
</BODY>
</HTML>

Resource sites
• http://www.w3schools.com/tags/default.asp
– Contains a list of all the tags. It provides also a lot
of examples to improve your knowledge of the
language

• http://html-color-codes.info/
– Permits to generate the HEX number associated to
the chosen color

Slides 2 - HTML

More Related Content

What's hot

Similar to Slides 2 - HTML

Recently uploaded

Slides 2 - HTML