HTML

HTML
…becomes easy!
1
Quick guide to use basic HTML in Blackboard Learn

Definitions
HTML – Hyper Text Markup Language – The
Language of Web Pages on the World Wide Web.
HTML is a text formatting language.
“Normal text” surrounded by bracketed tags
that tell browsers how to display web pages.
2

Editors
HTML can be edited by using a professional
editors like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
3

Simple Editors: Using Notepad
4

Simple Editors: Using Notepad++
5

HTML Page main parts
HEAD (Not covered here):
 contains information about the document:
oTitle of the page (which appears at the top of the browser
window).
oMeta tags: used to describe the content (used by Search
engines).
oJavaScript and Style sheets.
6

HTML Page main parts
BODY:
 Contains the actual content of the document
oThis is the part that will be displayed in the browser
window.
 Manages color settings for the background color of the
page, images and the document’s text and different
states of links.
7

Basic Structure
8
<HTML>
<HEAD>
<TITLE>Cleveland State University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

Tags (1)
9
 Codes enclosed in brackets
 Usually paired
<TITLE>My Web Page</TITLE>
 Not case sensitive
<TITLE> = <title> = <TITLE>

Tags (2)
• All HTML tags are made up of a tag name and
sometimes they are followed by an optional list
of attributes which all appear between angle
brackets < >
• Nothing within the brackets will be displayed by
the browser (unless the HTML is incorrectly
written and the browser interprets the tags as
part of the content).
10

There are a few HTML tags which do not
use an end tag and are used for standalone
elements on the page:
• <img> To display an image
• <BR> Line break
• <HR> Creates a horizontal line
11
Standalone Tags

This is Information which the
browser will ignore
Tabs.
multiple spaces will appear as a single
space.
12

Headings Element – code (1)
14

Headings Element – code (2)
15

Headings Element
Headings elements H1 through H6 are generally used for
major divisions of the document. Headings are permitted to
appear in any order, but for best results follow the
following:
 H1: should be used as the highest level of heading, H2 as the
next highest, and so forth.
 You should not skip heading levels: e.g., an H3 should not
appear after an H1, unless there is an H2 between them.
 Don’t use headings to make text Bold or BIG, search engines
will use the text within headings to index your page.
16

Paragraph Element – code (1)
17

Paragraph Element – code (2)
18

Paragraph Element
 Paragraphs allow you to add text to a
document.
 Each line of text will stretch the entire
length of the window.
19

Break Element <br> - code(1)
20

Break Element <br> - code(2)
21

Text Formatting – code (2)
22

Text Formatting – code (2)
23

Text formatting
 Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
Today, all major browsers render strong as bold and em as italics.
However, if a browser one day wants to make a text highlighted
with the strong feature, it might be cursive for example and not
bold!
24
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be
rendered in a way that the user understands as
"important".

Character Formatting
<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1 to 7 or as a
relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to
+4).
<B> Bold </B>
 <I> Italic </I>
<U> Underline </U>
25

Link Element
 The HTML <a> and </a> tags defines a hyperlink.
The <a> tells where the link should start and the </a>
indicates where the link ends.
Everything between these two will work as a link.
29

Link Element – Target attribute
The target attribute specifies where to open the linked
document.
30

31
Link Element – Appearance
 LINK: Initial appearance – default = Blue.
 VLINK: Visited link – default = Purple.
 ALINK: Active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY TEXT=“#FF0000” LINK=“#0000FF” VLINK=“#FF00FF”
ALINK=“FFFF00”>

32
Email Element
The type of service is identified as the mail client
program, it will launch the users mail client.
<a href=“mailto:bob@gmail.com”>Contact me</A>

Image Element - attributes
<IMG>: Defines a graphic image on the page.
Image File (SRC : source): This value will be a URL (location of the
image).
Alternate Text (ALT): This is a text field that describes an image or
acts as a label, It is displayed when they position the cursor over a
graphic image or when the image is not available.
Alignment (ALIGN): This allows you to align the image on your
page.
35

Image Element
Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in pixels.
Border (BORDER): Border around the image, specified in
pixels.
HSPACE: is for Horizontal Space on both sides of the image
specified in pixels. A setting of 5 will put 5 pixels of invisible
space on both sides of the image.
VSPACE: is for Vertical Space on top and bottom of the
image specified in pixels. A setting of 5 will put 5 pixels of
invisible space above and bellow the image.
36

List Element
The most common HTML lists are ordered and
unordered lists:
Unordered List: Starts with the <ul> tag. Each list item starts
with the <li> tag.
37

List Element –
Sorted vs. Unsorted
<ul>
<li> Coffee…</li>
<li> Milk…</li>
</ul>
<ol>
<li> Coffee…</li>
<li> Milk…</li>
</ol>
38

List Element – Description List
DL: Definition List. This kind of list is different from
the others. Each item in a DL consists of one or
more Definition Terms (DT elements), followed by
one or more Definition Description (DD elements).
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
39

List Element – List items format
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
42
The type attribute can be used to specify the kind of marker to use in the
list, in the cases where that matters (e.g. because items are to be
referenced by their number/letter).
The start attribute lets us set a list’s first counter.

Table Element
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for
table row).
 A row is divided into data cells with the <td> tag. (td stands
for table data).
A row can also be divided into headings with the <th> tag.
(th stands for table heading).
 The <td> elements are the data containers in the table.
 The <td> elements can contain all sorts of HTML elements like
text, images, lists, other tables, etc.
43

Table Element – with borders
45

Table Element – with headers
46

Colors
 Background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
Text color (All page):
<BODY TEXT=“#FF0000”></BODY>
 Font color :
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
For more colors please refer to:
http://www.w3schools.com/html/html_colors.asp
47

Alignment
 Some elements have attributes for alignment (ALIGN) e.g.
Headings, Paragraphs and Horizontal Rules.
 The Three alignment values are: LEFT, RIGHT, CENTER.
<CENTER></CENTER> Will center elements.
<DIV ALIGN=“value”></DIV> Represents a division in the
document and can contain most other element type. The
alignment attribute of the DIV element is well supported.
<TABLE></TABLE> Inside a TABLE, alignment can be set for
each individual cell.
48

Special Characters
49
Special Character Entity
Name
Special Character Entity
Name
Ampersand & & Greater-than sign > >
Asterisk &lowast; ∗∗ Less-than sign < <
Cent sign ¢ ¢ Non-breaking space  
Copyright © © Quotation mark " "
Fraction one qtr ¼ ¼ Registration mark ® ®
Fraction one half ½ ½ Trademark sign ™ ™

HTML

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to HTML (20)

HTML