2. Hypertext Markup Language
• HTML stands for HyperText Markup Language
• Hyper refers to creating linked and
nonlinear structures of information.
• Text refers to the words on the computer
screen that we are marking up.
3. Hypertext Markup Language
• Markup is the process of preparing the text to
define how it displays when viewed as pages on
the WWW by marking them with formatting
directions conveyed by notations called ―tags.
• Language is a system of signs used for
communication—written and oral.
4. Hypertext Markup Language
• HTML is a document-layout and hyperlink
specification language.
• HTML is a set of logical codes (markup) in
parentheses that constitute the appearance of
a web document and the information it
contains.
5. Hypertext Markup Language
Example:
<B>This text would appear bold in the browser</B>
• HTML is platform independent.
• The basic syntax and semantics of HTML are
defined in the HTML standard.
6. Text Editor
• Notepad from Microsoft is the common HTML
Text Editor.
• Microsoft Word and WordPerfect can also be used
to create HTML document.
• HTML documents has a file extension .html
or .htm
7. Elements of a Web Page
• Title : A Web page’s title identifies the subject or
purpose of the page.
• Body : The body of the Web page contains
information that displays in the browser window.
• Normal text : It is the text that makes up the
main content of a Web page.
8. Elements of a Web Page
• Headings : is a component of an HTML document that
tells a web browser how to structure and interpret a part
of the HTML document.
• Image : It is another important element of a Web page
such as an icon, bullet, line, photo, illustration or other
picture.
• Hyperlink : It serve as a primary way to navigate
between pages.
9. Web Page Document Structure
• The easiest way to create and develop a document is to type the
required elements in as a starting point.
• In Notepad you would start with:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
• Although, HTML is not case sensitive, it is a standard practice to
always
10. The <HTML> TAG
• The <HTML> and </HTML> tags serve to delimit the beginning
and ending of an HTML document.
<HTML>
• Function: Delimits a complete HTML document
• Attributes: VERSION
• End tag:
</HTML>; may be omitted
• When the <HTML> tag appears without the version attribute, the
HTML document server and browser assume the version of HTML
used in this document is supplied to the browser by the server.
11. The <HEAD> TAG
• The <HEAD> tag specifies that the lines within the
beginning and ending points of the tag are the prologue to
the rest of the file.
• The <HEAD> tag has no attributes and serves only to
encapsulate the other header tags.
<HEAD>
• Function: Defines the document header
• Attributes: None
• End tag:
</HEAD>; rarely omitted
12. The <TITLE> TAG
• The <TITLE> tag defines the title for your document.
<TITLE>
• Function: Defines the document title
• Attributes: None
• End tag:
</TITLE>; never omitted
• Example:
<HTML>
<HEAD>
<TITLE>Web Development</TITLE>
</HEAD>
</HTML>
13. The <BODY> TAG
• The document body is where you put the contents of your document.
<BODY>
• Function: Defines the document body
• Attributes:
ALINK (Netscape only), BACKGROUND(extension),
BGCOLOR (extension),
BGPROPERTIES (Internet Explorer only),
LEFTMARGIN (Internet Explorer only), LINK (extension),
TEXT (extension), TOPMARGIN (Internet Explorer only),
and VLINK (extension)
• End tag:
</BODY>; may be omitted
14. The <BODY> ATTRIBUTES
• Background Color: use the BGCOLOR attribute to set document’s background
color.
<BODY BGCOLOR="#FFFFFF"></BODY>
• Text Color: use TEXT attribute to control the color of all the normal text in the
document.
This will affect all of the text within the document that is not being colored
by some other element, such as a link.
<BODY BGCOLOR="#FFFFFF“ TEXT="#FF0000"></BODY>
15. The <BODY> ATTRIBUTES
• LINK, VLINK, and ALINK: These attributes control the colors of the different
link states:
• LINK - initial appearance – default = Blue
• VLINK - visited link – default = Purple
• ALINK - active link being clicked – default = Red
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000“ LINK="#0000FF"
VLINK="#FF00FF“ ALINK="FFFF00">
• Image Background: use BACKGROUND attribute to set an image background
for the document.
Background images are "tiled" in the web browser.
• <BODY BACKGROUND="logo.gif“ BGCOLOR="#FFFFFF">
16. HTML ATTRIBUTES
• An element is a fundamental component of the structure of a text
document.
• It is the first word or character that appears inside the "<" opening
bracket.
• To denote the various elements in an HTML document, you use tags.
• HTML tags consist of a left angle bracket (<), a tag name, and a right angle
bracket (>).
• Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag
instruction.
• The end tag looks just like the start tag except a slash (/) precedes the text
within the brackets.
• Words that follow the element and are contained inside the ">" bracket of
the opening tag are called attributes.
17. TYPES OF HTML TAGS
• There are two types of tags: container and empty.
• Container tags have both an opening and a closing and are used to
surround the text within your document for presentation by the tag.
• The closing tag name is preceded by a forward slash.
E.g. <TITLE>Welcome to my homepage</TITLE>
• Empty tags use only an opening and tell the browser to perform an
instruction such as breaking to the next line, inserting a horizontal
line or inserting an image.
i.e. <BR>, <HR>, <IMG src=“name”>
18. HEADINGS
• HTML defines six levels of headings that can be used to structure a
text flow into a more readable, more manageable document.
• Inside the BODY element, heading elements H1 through H6 are
generally used for major divisions of the document.
• Headings are used in order of importance, not based on how they
render in the browser.
• H1 is the most important; H6 is the least important.
• The size of the text surrounded by a heading element varies from
very large in an <H1> tag to very small in an <H6> tag.
E.g. <H1> Web Development </H1>
20. EXERCISE
What would be the output of the following HTML code?
<HTML>
<HEAD>
<TITLE>Car Debugging</TITLE>
</HEAD>
<BODY>
<H1>Engine Tune-Up</H1>
<H2>Change The Oil</H2>
<H2>Change the Spark Plugs</H2>
<H3>Prepare the New Plugs</H3>
<H4>Remove the Guards</H4>
<H4>Check the Gap</H4>
</BODY>
</HTML>
22. PARAGRAPH
• One of the most commonly used tags in HTML is the paragraph marker, which is used to
break apart blocks of text into separate paragraphs.
• Each paragraph starts with <P> and ends with the corresponding </P> tag.
Example:
<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
white space between the two paragraphs. </P> This is the last paragraph in the
example.
</BODY>
24. LINE BREAK <BR>
• Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
• A <BR> is an Empty Element, which may contain
attributes but it does not contain any content.
• The <BR> element does not have a closing tag because it
marks a position and does not contain any content.
25. LINE BREAK <BR>
Example:
<BODY>
This is the first paragraph, at the very beginning of the body of this document. <BR> 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 white space between the two
paragraphs. <BR> This is the last paragraph in the example.
</BODY>
26. HORIZONTAL RULE
• The <HR> element causes the browser to display a horizontal line (rule) in your
document.
• Horizontal rules give you a way to visually separate sections of your document.
Example:
<BODY>
This text is directly above the rule. <HR> And this text is immediately below.
<P> Whereas this text will have space before the rule. <P><HR><P> And this
text has space after the rule.
</BODY>
29. CHARACTER FORMATTING
Character formatting elements allows you to:
• Specify the appearance of individual characters (bold, italic,
typewriter)
• Include special characters (characters with accents, copyright
and registration marks, and so on)
• Create preformatted text (text with spaces and tabs retained)
• Align text left, right, justified, and centered
• Change the font, size, and color
• HTML provides two general ways to apply formatting to text, the
physical style and logical style.
30. PHYSICAL TAGS
• Physical style tags indicate exactly the way text is to be formatted.
• This tag indicates a specific change in appearance.
• Below is the list of physical tags; they can be combined to create other effect.
• <B> Bold
• <I> Italic
• <TT> Monospaced typewriter font
• <U> Underline
• <S> Strike through
• <BIG> Bigger print than the surrounding text
• <SMALL> Smaller print
• <SUB> Subscript
• <SUP> Superscript
E.g.
• <B><I>Text that is both bold and italic</I></B>
31. PHYSICAL TAGS
<I>Italic</I>
• To create italic text, insert an <I> tag in the document, followed by a </I> tag.
• Any text between these two tags will be displayed in italics when viewed in a browser.
E.g. <I>This is Italic text.</I>
This is Italic text.
<B>Bold</B>
• To create bold text, insert <B> and </B> tags.
• Any text falling between these two tags will appear in boldface type.
E.g. <B>This is Bold text.</B>
This is Bold text.
32. PHYSICAL TAGS
<TT>monospaced</TT>
• To create text that is displayed in a monospaced font (such as Courier), use the <TT> and
</TT> tags.
• Text falling between these two tags will be displayed in a fixed-width font, similar to the
output from a teletype machine or typewriter.
E.g. <TT>Teletype appears monospaced</TT>
Teletype appears monospaced
<S>Strike-through</S>
• To create strike-through text, which is text with a single horizontal line running through it,
use the <S> and </S> tags.
E.g. <S>Strike-through text</S>
Strike-through text
33. PHYSICAL TAGS
<U>underline</U>
• Use <U> and </U> tag pair to underline text/s.
• You should use these tags only when absolutely necessary, as underlined text is
not widely supported by Web browsers.
E.g. <U>Underlined text</U>
Underlined text
<BIG></BIG> and <SMALL></SMALL>
• Using the <BIG> and </BIG> tags will increase the size of the indicated text
relative to the default size.
• <SMALL> and </SMALL> will make the text smaller.
E.g.
<BIG>Big is not small</BIG>
<SMALL>Small is not big</SMALL>
34. PHYSICAL TAGS
<SUP>superscript</SUP> and <SUB>subscript</SUB>
• Texts can be formatted as either superscript or subscript; text that appears slightly
above or below the current line, respectively.
• Numbers are usually in these forms for mathematical equations or to indicate
footnotes.
• Use <SUP> and </SUP> tags to mark text as superscript.
• Use <SUB> and </SUB> tags to mark text as subscript.
Examples:
• Superscript text appears <SUP>above</SUP>
• Subscript text appears <SUB>below</SUB>
Superscript text appears above
Subscript text appears below
35. LOGICAL TAGS
• Logical style tags take the approach that what's really
important is the type of information being displayed,
rather than exactly how it is displayed.
• These are similar to the common element tags for
paragraphs or headings.
• They don't indicate how the text is to be formatted, just
how it is to be used in a document.
• Logical style tags might, for example, indicate a definition,
a snippet of code, or an emphasized word.
36. LOGICAL TAGS
<EM>emphasis</EM>
• These tag adds emphasis to the inserted texts.
• Using the <EM> and </EM> tags will usually display the indicated
text in italics.
• However, remember that with logical tags, the actual appearance of
the text is determined by the end user's Web browser, not your
HTML document.
Example:
<P>Say it with <EM>emphasis</EM></P>
Say it with emphasis
37. LOGICAL TAGS
<STRONG>strong emphasis</STRONG>
• To mark text/s as a very important note, use <STRONG> and </STRONG> tags.
• Most browsers tend to display strongly emphasized text in boldface.
Example:
<P>Say it with <STRONG>emphasis</STRONG></P>
Say it with emphasis
<CITE>citation</CITE>
• Use <CITE> and </CITE> to insert a citation: to give credit for a short quotation in the body of the document.
• Citations are typically displayed in italics.
Example:
<P>A citation gives credit where it’s due.
<CITE>Anonymous, 2003</CITE></P>
• A citation gives credit where it’s due.
• Anonymous, 2003
38. PREFORMATTED TAGS
• Preformatted text allows you to break away from the normal rules of
HTML and quickly specify exactly how a section of text will appear
in the reader's Web browser.
• When you're using preformatted text, there is no need to use the
HTML markup tags.
the text will appear exactly as you've typed it, complete with
spaces, line breaks, and empty lines.
• Preformatted text is always displayed in a monospaced, fixed-width
font.
• The PRE tag (stands for preformatted), consists of the beginning
and ending tags <PRE> and </PRE>, allows you to format the text
the way you want it.
40. FONT ELEMENT
• <FONT> tag lets you change the size, style, and color of text.
• It must be used like any other physical or logical style tag for changing the appearance of a short
segment of text.
<FONT>
Function: Set the font size for text
Attributes: COLOR (extension), FACE (Internet Explorer) and SIZE (extension)
End Tag:
</FONT>, always used
Example:
<FONT SIZE=5 COLOR="purple">This text will be big and purple.</FONT>
This text will be big and purple.
41. 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.
• The RGB color value, denoted by a preceding hash mark (#), is a six-digit
hexadecimal number.
For example, to create basic yellow text, you might use:
<P>Here comes the <FONT color="#FFFF00"> sun</FONT>!</P>
Here comes the sun!
43. FACE ATTRIBUTE
• The font face displayed by the browser depends on which fonts are available on
the individual user's system.
• The browser parses the list of font names, one after the other, until it matches one
with a font name supported by the user's system.
• If none match, the text display defaults to the font style set by the user in their
browser’s Preferences.
Example:
<P>This text is in the default font. But,<FONT face="Braggadocio, Machine">
heaven only knows </FONT> what font face is this one?</P>
This text is in the default font. But, heaven only knows what font face is this one?
45. SIZE ATTRIBUTE
• The <FONT> tag is also use to change the size of the font for a
character, word, phrase, or on any range of text.
• The <FONT>...</FONT> tags enclose the text, and the SIZE
attribute indicates the size to which the font is to be changed.
• The values of SIZE are 1 to 7, with 3 being the default size.
Example:
<P>Bored with your plain old font? <FONT SIZE=5>Change it.</FONT></P>
Bored with your plain old font? Change it.
47. TEXT ALIGNMENT
• This is the ability to arrange a block of text such as a heading or a
paragraph so that it is aligned against the left margin (left
justification – the default), aligned against the right margin (right
justification), or centered.
• Use the ALIGN attribute to that HTML element.
• ALIGN has three values: LEFT, RIGHT, or CENTER.
Example:
• <H2 align=LEFT>Who We Are</H2>
• <H2 align=RIGHT>What We Do</H2>
• <H2 align=CENTER>How To Reach Us</H2>
51. WRITING COMMENTS
• HTML comments describe the page itself or provide some kind of
indication of the status of the page.
• Some source code control programs can put page status into
comments, for example.
• Text in comments is ignored when the HTML file is parsed.
• Comment tags consist of a beginning and ending sequence of
characters ("<!--" and "-->").
Example:
<!-- This is a comment -->
