Web Design in HTML Empowerment Technologies

WEB DESIGN-HTML
What is Hypertext Markup Language?

• HTML-is a set of words, symbols and rules over the
use of these words and symbols, under which web
pages are designed and displayed.
• Web pages are created using hypertext markup
language (or HTML), which is a set of special
instructions called tags or markups that specify links
to other documents, as well as how the page is
displayed.
HTML History
• HTML was invented in 1990 by a scientist called
Tim-Berners-Lee. He developed a collection of
tags that described how a document should look
when viewed in a browser. Berners-Lee’s system
of tags became known as HTML and created the
use of hyperlinks that now define the World
Wide Web.
What does HTML stand for?
•Hyper – is the opposite of linear.

•Text- is self-explanatory
•Mark-up- is what you do with the text.
•Language- is what HTML is.
• HTML is a language for describing web pages.
• HTML is a mark up language
• A mark-up language is a set of mark-up tags
• The tags describe document content
• HTML documents contain HTML tags and plain
text
• HTML documents are also called web pages
• Element – a complete tag , having an opening <tag> and a
closing </tag>
• Attribute – used to modify the value of the HTML element.
• HTML Tags
• HTML mark-up tags are usually called HTML tags
• - HTML tags are keywords(tag names) surrounded by angle
brackets like <html>
• -HTML tags normally come in pairs like and 
• HTML ELEMENTS
• An HTML element is everything between
the start tag and the end tag, including the
tags:
• HTML Element:
• This is a paragraph
Basic HTML Tags
TEXT FORMATTING TAGS IN HTML
Example:
• <html>
• <body>
• <h1>This a Heading</h1>
• This is a paragraph.
• This is another paragraph.
• </body>
• </html>
Using Line Breaks
• Line breaks-created using the tags.
• Example:
• <html><head></head>
• <body>
• Mc Loren Dayrit Tarlac National High School-
SMC
• </body>
• </html>
Horizontal Lines to Divide Sections
Paragraph Effect Example
align=(left,right,justi Aligns the line across <hr align=left
fy,center) the page width=60%>
Color=red Specifies the color <hr color=red>
of the line
Size=”n” Specifies the <hr size=10>

thickness of the line
Width=”n” Specifies the length <hr width=60%>
of the line.
• Example:
• <html>
• <head>
• </head>
• <body>
• Mc Loren Dayrit 
Sapang Tagalog 
• <hr align=center width=80% size=30 color=blue>
• </body>
• </html>
Formatting Text
TAG PURPOSE EXAMPLE
 To italicize text. Hello World!
 To emphasize text, to be displayed in Hello World!
italics
<pre> To display text in mono-spaced font. <pre> Hello World!</pre>
 To boldface text Hello World!
 To strongly emphasize text, to be Hello World!
displayed in bold 
<s> Strikethrough text <s> Hello World!</s>
 Underline text Hello World!
 Defines subscripted text Hello World!
 Defines superscripted text Hello World!
• Example:
• <html>
• <head></head><body>
• This text used the I tag 
• This text used the em tag 
• <pre> This text used the pre tag</pre> 
• This text used the b tag 
• This text used the strong tag 
• <s> This text used the s tag</s> 
• This text used the u tag 
• This text used the sub tag 
• This text used the sup tag 
</body></html>
Text Commands
Attribute Effect Example
Size=(size) Specifies the size of the 

text
Color=(color) Specifies the color of the 
font
face =”Font value” Indicates that the font to 

be used in the text
Example:
<html>
<head>
</head>
<body>
 This text is size 8 
This text used Arial font 
 This text used red as color

</body>
</html>
HTML IMAGES
• HTML images are defined with the <img> tag.
• Example:
• <img src="Koala.jpg" width="104" height="142">
Common Attribute to the <body> tag
Attribute Effect Example
background=”url” Specifies the relative or absolute <body

location of an image file that is used as background=”c:\images\face.gif”>
a background.
Bgcolor=(color) Specifies the color of a document’s <body bgcolor=blue>
background
Bgproperties=”fixed” Indicates that the background image <body bgproperties=”fixed”>
remains displayed even if the page is
scrolled
Leftmargin=”n” Specifies the width(pixels) of the <body leftmargin=30>
margin of a white space along the left
edge of the entire document.
Scroll=(yes,no) Turn on/off scrolling of document. <body scroll=no>
Text=(color) Specifies the color of normal text <body text=green>
Top margin=”n” In pixels, specify the margin of white <body topmargin=10>

space along the top edge of the page.
• Example:
• <html>
• <head>
• </head>
• <body background=“Desert.jpg” topmargin=”10” text=white>
Sample text
• </body>
• </html>
• Text Hyperlinks
• Hyperlinks are created using the anchor tag denoted by <a> and
</a>.This tag contain two components:
• The text(or image) that symbolizes the link
• The URL of the actual resource
• Example:
• <html>
• <head>
• </head>
• <body>To see more about space exploration, click <a
href=http://www.nasa.gov>NASA</a>
• </body>
• </html>
Using Pictures
• <html>
• <head>
• </head>
• <body>To see more about space exploration, click <a
href=http://www.nasa.gov><img src=”salogon.jpg” width=”80”
height=”100”> </a>
• </body>
• </html>

Web Design in HTML Empowerment Technologies

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design in HTML Empowerment Technologies

Uploaded by

Copyright:

Available Formats

WEB DESIGN-HTML

What is Hypertext Markup Language?

•Hyper – is the opposite of linear.

Size=”n” Specifies the <hr size=10>

Size=(size) Specifies the size of the <font size =”5”>

face =”Font value” Indicates that the font to <font face=”Georgia”>

background=”url” Specifies the relative or absolute <body

Scroll=(yes,no) Turn on/off scrolling of document. <body scroll=no>

Text=(color) Specifies the color of normal text <body text=green>

Top margin=”n” In pixels, specify the margin of white <body topmargin=10>

You might also like