Introduction to HTML Communication Skills

Introduction to
HTML
IS103 Communication Skills

Content Overview
• Introduction to HTML
• Origins of HTML
• HTML Tags and Document Structure
• Basic HTML Syntax
• Comments
• HTML Color Codes
• Setting HTML Document Properties : Page Background
and Text Colors
• Headings and Paragraphs in HTML
2

Introduction to HTML
• HTML is a language for describing Web pages.
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages
• HTML Tags
• HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle brackets like
<html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• Start and end tags are also called opening tags and closing tags 3

Origins of HTML
• HTML is based on SGML (Standardized General Markup
Language).
• HTML has, since, evolved into a presentation language.
4

Writing Tools
• HTML documents are text documents. Therefore, any text
editor can be used to create a HTML document, as long as it
can save your work on a disk in text file format.
• The standard Microsoft Windows text editor, Notepad or
Notepad ++ can be used.
5

HTML Document Structure
• HTML documents contain text (content of the page).
• HTML uses .html as the file extension or suffix.
• Embedded tags provide instruction for the structure, and
appearance of the content.
6

HTML Document Structure,
cont.
• The HTML document is divided into two major parts:
• HEAD – contains information about the document:
• Title of the page, which appears at the top of the browser window
• Meta tags, used to describe the content (used by search engines)
• BODY – contains the actual content of the document
• This is the part that will be displayed in the browser window.
7

Sample HTML Document
<HTML>
<HEAD>
<TITLE> My web page </TITLE>
</HEAD>
<BODY>
Content of the document
</BODY>
</HTML>
8

HTML Tags
• 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).
• Attributes are properties that extend or refine the tag’s
functions.
• According to the HTML standard, tag and attribute names are
not case-sensitive. 9

Basic Syntax
• Most (but not all!) HTML tags have a start tag and an end tag:
<H1> Hello, world! </H1>
• All HTML documents start with <HTML> and end with </HTML>.
• Standalone tags:
• 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> Horizontal Rule
10

HTML Tag Attributes
• Attributes are added within a tag to extend a tag’s action.
• Attributes belong after the tag name; each attribute should be
separated by one or more spaces.
• Most attributes take values which follow an equal sign “=“ after the
attribute’s name.
• Values are limited to 1, 024 character in length.
• If an attribute’s value is a single word or number (no spaces), you
may simply add it after the equals sign. All other attribute values
should be enclosed in single or double quotation marks, especially
those values that contain several words separated by spaces. 11

HTML and Browsers
• Browsers will ignore certain information such as:
• Tabs
• Multiple spaces will appear as a single space.
• For example:
“Hello,
How are you?”
The browser will ignore the blanks and new line:
Hello, How are you? 12

Comments 
• Comments are another type of textual content that appears in the
source HTML document but is not rendered by the user’s browser.
• Comments fall between the special  markup elements.
Browsers ignore the text between the comment character
sequences.
• You can put anything you like inside a comment.
• Here are some sample comments:
<!– This is a comment -->
<!– This is a
multiple-line comment
that ends on this line --> 13

Setting Document Properties
• Document properties are controlled by attributes of the
BODY element.
• For example, there are color settings for the background
color of the page, the document’s text and different
states of links.
14

16
More Color Codes
1. WHITE
2. BLACK
3. RED
4. GREEN
5. BLUE
6. MAGENTA
7. CYAN
8. YELLOW
9. AQUAMARINE
10. BAKER’S CHOCOLATE
11. VIOLET
12. BRASS
13. COPPER
14. PINK
15. ORANGE
1. #FFFFFF
2. #000000
3. #FF0000
4. #00FF00
5. #0000FF
6. #FF00FF
7. #00FFFF
8. #FFFF00
9. #70DB93
10. #5C3317
11. #9F5F9F
12. #B5A642
13. #B87333
14. #FF6EC7
15. #FF7F00

The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance.
• Here are the attributes of the BODY tag to control all the
levels:
TEXT="#RRGGBB" to change the color of all the text on
the page (full page text color.)
• This element contains information about the page’s
background color, the background image, as well as the
text and link colors. 17

Background Color
• It is very common to see web pages with their
background color set to white or some other colors.
• To set your document’s background color, you need to
edit the <BODY> element by adding the BGCOLOR
attribute.
• The following example will display a document with a
white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY> 18

Text Color
• The TEXT attribute is used to control the color of all the
normal text in the document. The default color for text is
black.
• The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“FF0000”></BODY>
In this example the document’s page color is white and
the text would be red.
19

HTML Headings
• Users have a hard enough time reading what’s displayed
on a screen. A long flow of text, unbroken by title,
subtitles , and other headers, crosses the eyes and
numbs the mind, not to mention the fact that it makes it
nearly impossible to scan the text for a specific topic.
• There are six levels of HTML headings that you can use to
structure a text flow into a more readable. More
manageable document.
20

Heading Tags
• The six heading tags – written as <h1>, <h2>, <h3>, <h4>,
<h5>, <h6> - indicate the highest (<h1>) to lowest (<h6>)
precedence a heading may have in the document.
• Always include the appropriate heading end tags in your
document, as the browser will not insert them automatically.
21
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Function Define one of six levels of headers
End tag </h1>, </h2>, <h/3>, </h4>, <h/5>, </h6>
Contains text
Used in body content

The Align Attribute
• The default heading alignment for most browsers is left.
• The align attribute can change the alignment to left,
center, right, or justify.
• Below is the common syntax of a heading tag including
alternative alignments:
<h1 align=right>Right over here!</h1>
<h2 align=left>Slide back left.</h2>
<h3 align=center>Smack in the middle.</h3>
23

Appropriate Use of Headings
• It is often good form to repeat your document’s title in the first
heading tag because the title you specify in the <head> of your
document doesn’t appear in the user’s main display window.
• The following HTML segment is a good example of repeating the
document’s title in the header and in the body of the document:
<html>
<head>
<title> My First HTML Document </title>
</head>
<body>
<h3> My first HTML Document</h3>
</body>
</html> 25

The <font>Tag
• The <font> tag lets you change the size, style, and color of
text.
26
<font>
Function Sets the font size for text
End tag </font>
Attributes color, face, size

The Size Attribute
• The value of the size attribute must be one of the virtual
sizes (1-7). This value is preceded by a plus or minus (+
or -) sign to define a relative font size that the browser
adds to or subtracts from the base font size.
• The basic syntax used for changing the size attribute of a
font is:
<font size=+5> Crazy Frog</font>
27

The Color Attribute
• The color attribute for the <font> tag sets the color of the
enclosed text. The value of the attribute may be
expressed in either of two ways:
• As the red, green and blue (RGB) components of the
desired color, or
• As a standard color name.
• Enclosing quotes are recommended but not required.
28

The Color Attribute in Use
• For example, to create basic yellow text, you might use:
Here comes the <font color=#FFFF00>sun</font>!
• Alternatively, you can set the enclosed font color using any
one of the many standard color names. For instance, you
could have made the previous sample text yellow with the
following source:
Here comes the <font color=yellow>sun</font>!
29

The Face Attribute
• The quote-enclosed value of face is one or more display
font names separated with commas.
• The font face displayed by the browser depends on
which fonts are available on the individual user’s system.
The browser attempts to match the name specified with
a font name supported by the user’s system.
• If none matches, the text display defaults to the font
style the user set in the browser’s preferences.
30

The Face Attribute in Use
• The basic syntax used to set font faces in HTML is as
follows:
<font face=“courier new”> This text
would be displayed using font type
“courier new”</font>
31

The <p> Tag
• The <p> tag signals the start of a paragraph. Each
paragraph should start with the paragraph tag <p> and
end with the corresponding </p> end tag.
32
<p>
Function Defines a paragraph of text
End tag </p>; often omitted in HTML
Contains text

The <p> Tag in Use
<body>
This is the first paragraph, at the very
beginning of the body of this document.
<p>
The tag above signals the start of this
second paragraph. When rendered by a
browser, it will begin slightly below the
end of the first paragraph, with a bit of
extra whitespace between the two
paragraphs.
<p>
This is the last paragraph in the example.
</body> 33

Summary
• Introduction to HTML
• Origins of HTML
• HTML Tags and Document Structure
• Basic HTML Syntax
• Comments
• HTML Color Codes
• Setting HTML Document Properties : Page Background
and Text Colors
• Headings and Paragraphs in HTML
34

References
C. Musciano & B. Kennedy. (2006). HTML & XHTML : The
Definitive Guide, 6th Edition. United States of America:
O’Reilly,Inc., 1005 Gravenstein Highway North,
Sebastopol, CA 95472
Gary P. Schneider & J. Evans. (2007). The Internet, 6th Edition.
United States of America: Thomson Course Technology.
35

Introduction to HTML Communication Skills

Recommended

Recommended

More Related Content

Similar to Introduction to HTML Communication Skills

Similar to Introduction to HTML Communication Skills (20)

Recently uploaded

Recently uploaded (20)

Introduction to HTML Communication Skills

Editor's Notes