Week 1 - HTML

HTML
WHAT IS HTML?
• HTML IS A MARKUP LANGUAGE FOR DESCRIBING WEB DOCUMENTS

(WEB PAGES).
• HTML STANDS FOR HYPER TEXT MARKUP LANGUAGE
• A MARKUP LANGUAGE IS A SET OF MARKUP TAGS
• HTML DOCUMENTS ARE DESCRIBED BY HTML TAGS
• EACH HTML TAG DESCRIBES DIFFERENT DOCUMENT CONTENT
HTML EXAMPLE
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>PAGE TITLE</TITLE>
</HEAD>
<BODY>
<H1>MY FIRST HEADING</H1>
<P>MY FIRST PARAGRAPH.</P>
</BODY>
</HTML>
HTML TAGS
• HTML TAGS ARE KEYWORDS (TAG NAMES) SURROUNDED BY ANGLE

BRACKETS:
• <TAGNAME>CONTENT</TAGNAME>
• HTML TAGS NORMALLY COME IN PAIRS LIKE <P> AND </P>
• THE FIRST TAG IN A PAIR IS THE START TAG, THE SECOND TAG IS THE
END TAG
• THE END TAG IS WRITTEN LIKE THE START TAG, BUT WITH A SLASH
BEFORE THE TAG NAME
WEB BROWSERS
• THE PURPOSE OF A WEB BROWSER (CHROME, IE, FIREFOX, SAFARI) IS
TO READ HTML DOCUMENTS AND DISPLAY THEM.
• THE BROWSER DOES NOT DISPLAY THE HTML TAGS, BUT USES THEM
TO DETERMINE HOW TO DISPLAY THE DOCUMENT:
HTML PAGE STRUCTURE
• BELOW IS A VISUALIZATION OF AN HTML PAGE STRUCTURE:
Only the <body> area (the

white area) is displayed by the
browser.
Only the <body> area (the white area) is displayed by the browser.
THE <!DOCTYPE> DECLARATION
• THE <!DOCTYPE> DECLARATION HELPS THE BROWSER TO DISPLAY A
WEB PAGE CORRECTLY.
• THERE ARE DIFFERENT DOCUMENT TYPES ON THE WEB.
• TO DISPLAY A DOCUMENT CORRECTLY, THE BROWSER MUST KNOW
BOTH TYPE AND VERSION.
• THE DOCTYPE DECLARATION IS NOT CASE SENSITIVE. ALL CASES ARE
ACCEPTABLE:
HTML VERSIONS
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
HTML EDITORS
• WRITE HTML USING NOTEPAD OR TEXTEDIT
• HTML CAN BE EDITED BY USING A PROFESSIONAL HTML EDITOR LIKE:
• ADOBE DREAMWEAVER
• MICROSOFT EXPRESSION WEB
• COFFEECUP HTML EDITOR
• HOWEVER, FOR LEARNING HTML WE RECOMMEND A TEXT EDITOR LIKE
NOTEPAD (PC) OR TEXTEDIT (MAC).
• WE BELIEVE USING A SIMPLE TEXT EDITOR IS A GOOD WAY TO LEARN
HTML.
• FOLLOW THE 4 STEPS BELOW TO CREATE YOUR FIRST WEB PAGE WITH
NOTEPAD.
STEP 1: OPEN NOTEPAD
• TO OPEN NOTEPAD IN WINDOWS 7 OR EARLIER:

• CLICK START (BOTTOM LEFT ON YOUR SCREEN). CLICK ALL
PROGRAMS. CLICK ACCESSORIES. CLICK NOTEPAD.
• TO OPEN NOTEPAD IN WINDOWS 8 OR LATER:
• OPEN THE START SCREEN (THE WINDOW SYMBOL AT THE BOTTOM
LEFT ON YOUR SCREEN). TYPE NOTEPAD.
STEP 2: WRITE SOME HTML
WRITE OR COPY SOME HTML INTO NOTEPAD.
<!DOCTYPE HTML>
<HTML>
<BODY>
<H1>MY FIRST HEADING</H1>
<P>MY FIRST PARAGRAPH.</P>
</BODY>
</HTML>
STEP 3: SAVE THE HTML PAGE
• SAVE THE FILE ON YOUR COMPUTER.
• SELECT FILE > SAVE AS IN THE NOTEPAD MENU.
• NAME THE FILE "HOME.HTM" OR ANY OTHER NAME ENDING WITH HTM.
• UTF-8 IS THE PREFERRED ENCODING FOR HTML FILES.
• ANSI ENCODING COVERS US AND WESTERN EUROPEAN CHARACTERS

ONLY.
STEP 4: VIEW HTML PAGE IN YOUR
BROWSER
• OPEN THE SAVED HTML FILE IN YOUR FAVORITE BROWSER. THE RESULT
WILL LOOK MUCH LIKE THIS:
<HTML> </HTML>
• INDICATES THE START OR END OF AN HTML DOCUMENT

<HEAD> </HEAD>
• INDICATES THE START AND END OF A SECTION OF THE DOCUMENT

USED FOR THE TITLE AND OTHER DOCUMENT HEADER INFORMATION.
<TITLE> </TITLE>
• INDICATES THE START AND END OF THE TITLE. THE TITLE DOES NOT
APPEAR IN THE BODY OF THE WEB PAGE, BUT APPEARS ON THE TITLE
BAR OF THE BROWSER
<BODY> </BODY>
• INDICATES THE START AND END OF THE WEB PAGE BODY

<HN> </HN>
• INDICATES THE START AND END OF THE TEXT SECTION CALLED A

HEADING. SIZES RANGE FROM <H1> TO <H6>
<P> </P>
• INDICATES THE START OF A NEW PARAGRAPH; INSERTS A BLANK LINE

ABOVE THE NEW PARAGRAPH
<UL> </UL>
• INDICATES THE START AND END OF AN UNORDERED (BULLETED) LIST

• ATTRIBUTES
• TYPE=“DISC”
• TYPE=“SQUARE”
• TYPE=“CIRCLE”
<OL> </OL>
• INDICATES THE START AND END OF AN ORDERED (BULLETED) LIST

• ATTRIBUTES
• TYPE=“1”
• TYPE=“A”
• TYPE=“A”
• TYPE=“I”
• TYPE=“I”
<LI> </LI>
• INDICATES THAT THE ITEM THAT FOLLOWS THE TAG IS AN ITEM

WITHIN A LIST
<HR />
• INSERTS A HORIZONTAL RULE

<BR />
• INSERTS A LINE BREAK AT THE POINT WHERE THE TAG APPEARS

OPEN NOTEPAD AND TYPE EVERY TEST IN
THE NEXT SLIDE
<!DOCTYPE html
<html>
<head>
<title>Intra-Wall Manang Chicken Sample Website</title>
</head>
<body>
<h1>Hello! Welcome to the official website of Intramuros famous Manang
Chicken!</h1>
<p>Manang Chicken is opened for business since 1890. Manang Chicken is the
famous restaurant mentioned in the book of Jose Rizal the Noli Me Tangere
wherein he mentioned that this restaurant provides the most delicious chicken
ever tasted by the Spaniards which triggered their plan of conquering the
Philippines. Many professors from different universities around the world tried to
conduct an interview with Manang to verify this statement but they always refuse
to be interviewed. Up to the present, the statements is still a mystery. </p>
<p>Call 922-2222 for delivery</p>
<h2>Menu of the day</h2>
<ul type="disc">
<li>Chicken single</li>
</ul>
<ul type="square">
<li>Chicken double</li>
</ul>
<ol type="A">
<li>Lechon single</li>
<li>Lechon double</li>
</ol>
</body>
</html>
WEB PAGE IMAGES
• IMAGE TYPE
• GIF
• JPEG
• PNG
<IMG />
• IMAGE TAG
WEB PAGE IMAGES
 IMAGE ATTRIBUTES
◦ ALIGN – CONTROLS ALIGNMENT (BOTTOM, MIDDLE, TOP, LEFT,
RIGHT)
◦ ALT – ALTERNATIVE TEXT TO DISPLAY WHEN AN IMAGE IS
BEING LOADED
◦ BORDER – DEFINES BORDER WIDTH
◦ HEIGHT – DEFINES THE HEIGHT OF THE IMAGE
◦ HSPACE – DEFINES THE HORIZONTAL SPACE THAT SEPARATES
THE IMAGE FROM THE TEXT
◦ SRC – DEFINES THE URL OF THE IMAGE TO BE LOADED
◦ VSPACE – DEFINES THE VERTICAL SPACE THAT SEPARATES THE
IMAGE FROM THE TEXT
◦ WIDTH – DEFINES THE WIDTH OF THE IMAGE
<!DOCTYPE html
<html>
<head>
</head>
<body>
<img src=“picname.extname” width=“500” height=“80” alt=“logo” />
Chicken!</h1>
ATTRIBUTES FOR BACKGROUND COLOR
• <BODY BGCOLOR=“ COLOR HERE “>

• SILVER •White
• GRAY •Black
• MAROON •Red
• GREEN •Lime
• NAVY •Blue
• PURPLE •Magenta
• OLIVE •Yellow
• TEAL •Cyan
<!DOCTYPE html
<html>
<head>
</head>
<body bgcolor=“cyan”>
<img src=“picname.extname” width=“500” height=“80” alt=“logo” />
Chicken!</h1>
CENTERING THE HEADING
• USE THE ALIGN ATTRIBUTES

• LEFT
• CENTER
• RIGHT
<HR />
• HORIZONTAL RULE TAG

• ATTRIBUTES SIZE=“NUMBER”
• NOSHADE
<!DOCTYPE html
<html>
<head>
</head>
<body bgcolor="red">
<hr/>
<h2>Menu of the day</h2>
<hr/ size="2">
<ul type="disc">
<li>Chicken single</li>
</ul>
<ul type="square">
<hr/ size="10">
<li>Chicken double</li>
</ul>
<ol type="A">
<li>Lechon single</li>
<hr/ size="10" noshade>
<li>Lechon double</li>
</ol>
</body>
</html>
ACTIVITY 1
CREATE A WEBPAGE OF PERSONAL INFORMATION, LISTING ITEMS SUCH

AS YOUR DESCRIPTION ABOUT YOURSELF, HOBBIES, INTEREST, FRIENDS
AND FAMILY. IN ORDER TO MAKE YOUR WEBSITE INTERESTING,
SEARCH THE WEB FOR IMAGES THAT REFLECT YOURSELF.
SAVE YOUR FILE ON DRIVE D:
SURNAME_FIRSTNAME_CS1.HTML
REFERENCES
• HTTP://WWW.W3SCHOOLS.COM/HTML

Week 1 - HTML

Uploaded by

Document Information

Original Title

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

Week 1 - HTML

Uploaded by

Copyright:

Available Formats

HTML

• HTML IS A MARKUP LANGUAGE FOR DESCRIBING WEB DOCUMENTS

<H1>MY FIRST HEADING</H1>

<P>MY FIRST PARAGRAPH.</P>

• HTML TAGS ARE KEYWORDS (TAG NAMES) SURROUNDED BY ANGLE

Only the <body> area (the

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

• TO OPEN NOTEPAD IN WINDOWS 7 OR EARLIER:

<H1>MY FIRST HEADING</H1>

<P>MY FIRST PARAGRAPH.</P>

• ANSI ENCODING COVERS US AND WESTERN EUROPEAN CHARACTERS

• INDICATES THE START OR END OF AN HTML DOCUMENT

• INDICATES THE START AND END OF A SECTION OF THE DOCUMENT

• INDICATES THE START AND END OF THE WEB PAGE BODY

• INDICATES THE START AND END OF THE TEXT SECTION CALLED A

• INDICATES THE START OF A NEW PARAGRAPH; INSERTS A BLANK LINE

• INDICATES THE START AND END OF AN UNORDERED (BULLETED) LIST

• INDICATES THE START AND END OF AN ORDERED (BULLETED) LIST

• INDICATES THAT THE ITEM THAT FOLLOWS THE TAG IS AN ITEM

• INSERTS A HORIZONTAL RULE

• INSERTS A LINE BREAK AT THE POINT WHERE THE TAG APPEARS

• <BODY BGCOLOR=“ COLOR HERE “>

• USE THE ALIGN ATTRIBUTES

• HORIZONTAL RULE TAG

CREATE A WEBPAGE OF PERSONAL INFORMATION, LISTING ITEMS SUCH

You might also like