How the Web Works Using HTML

Z
Week 7:
How the Web Works
Using HTML
Subject Code: COMP121
By: Marlon Jamera
Email: mbjamera@ama.edu.ph

Z
How the Web Works
Using HTML

Z
Review: Website Basics
and Categories
• It is a presentation tool; a way to
communicate; learning and teaching tool
and a marketing tool.
a. Website
b. Search Engine
c. Web Browser
d. Website Application

Z
and Categories
• It is an application on the WWW that run
on the user’s server or computer and are
executed by the browser installed on the
user’s computer.
a. Client-Side Application
b. Server-Side Application
c. Browser Application

Z
and Categories
• A web based application that runs on the
web or host server.
a. Client-Side Application
b. Server-Side Application
c. Browser Application

Z
and Categories
• A collection of information organized in
to records of information so a computer
program can quickly access and select
desired pieces of data.
a. CGI
b. Database
c. Web Apps
d. Storage

Z
and Categories
• A set of tags are used to mark up plain
text so that a browser application knows
how to display the text.
a. XHTML
b. HTML
c. CSS
d. CGI

Z
Scope of the Lesson
• Introduction to HTML
• HTML elements and tags
• Code with HTML
• Types of HTML tags
• Headings and Paragraphs
• Comments in HTML
• Text Formatting tags
• Background and Text Color tags

Z
Learning Outcomes
By the end of the lesson, you will be
familiar and know how the website works
using HTML.
• Discuss the basic coding of HTML.
• Understand the coding syntax of HTML.
• Explain thoroughly the coding styles and
techniques of the HTML.

Z
How the Web Works?
• WWW use classical client / server
architecture
• HTTP is a text based request-response
protocol.

Z
How the Web Works?
Page request
Client running a
Web Browser
Server running Web
Server Software
(IIS, Apache, etc.)
Server response
HTTP
HTTP

Z
What is a Web Page?
• Web Pages are text files containing
HTML.
• HTML – Hyper Text Markup Language
• A notation describing document structure
(semantic markup) and formatting
(presentation markup)
• The markup tags provide information
about the page content structure.

Z
Creating HTML Pages
• An html file must have an .htm or .html
file extension.
• HTML files can be created with text
editors: Notepad, Notepad++ and PSPad.
• Or HTML editors: Microsoft FrontPage,
Mcrodmedia Dreamweaver, Netscape
Composer and Expression Web.

Z
Introduction to HTML
• With HTML, we can create our own
website.
• HTML is not a programming language, it
is a markup language
• A markup language is a set of markup
tags.
• HTML uses markup tags to describe web
pages.
• HTML is not case sensitive language.

Z
HTML Elements and Tags
• A tag is always enclosed in angle
brackets (<>) like <html>
• HTML tags normally come in pairs like
<html> and </html>.
• Start tag = <html>
• End tag = </html>
• Start tags and closing tags are also called
opening tags and closing tags.

Z
About the Main Tags
• <html>
• Describe html web page that is to be
viewed by a web browser.
• <head>
• This defines the header section of the
page.
• <title>
• This shows the caption at the title bar of
the page.
• <body>
• This tag show contents of the web page.

Z
How to Start?
• Write html code in notepad.
• Save the File with (.html) extension.
• View the page in any browsers like
google chrome, mozilla firefox or safari.
• The purpose of these browsers is to read
html documents and display them as web
pages.

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
test.html
First HTML Page

<html>
<head>
</head>
<body>
</body>
</html>
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing tag and the content inside.
First HTML Page: tags

First HTML Page: header
<html>
<head>
</head>
<body>
</body>
</html>
HTML header

Types of HTML Tags
• Hyperlink Tags
• Image Tags
• Text Formatting Tags
<a href="http://www.ama.edu.ph/"
title=“AMA University">Link to AMA Website</a>
<img src="logo.jpeg" alt="logo" />
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>

Some Simple Tags: Example
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.ama.edu.ph/" title=
“AMA University">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em>
text.
</body>
</html>

Headings and Paragraphs
• Heading Tags (h1 – h6)
• Paragraph Tags
• Sections: div and span
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<div style="background: skyblue;">
This is a div</div>

Headings and Paragraphs
Example<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>

<head>Section: <title> tag
• Title should be placed between <head> and
</head> tags
• Used to specify a title in the window title bar
• Search engines and people rely on titles
<title>AMA University – 1st Trimester 2015
</title>

Comments:  tag
• Comments can exist anywhere between the
<html></html> tags
• Comments start with 
<!–- AMA University Logo (a JPG file) -->
<img src="logo.jpg" alt=“AMA Logo">
<!–- Hyperlink to the web site -->
<a href="http://ama.edu.ph/">AMA
University</a>

<body> Section: Introduction
• The <body> section describes the viewable
portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>

</body>
</html>

Text Formatting
• Text formatting tags modify the text
between the opening tag and the closing
tag
• Ex. <b> Hello </b> makes “Hello” bold
• EX. <i> Hello </i> makes “Hello” italicized
• Ex. <u> Hello </u> makes “Hello” underlined

Text Formatting
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

Text Formatting: Example<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0
transitional.<br />
Next line.</p>
</body>
</html>

Background and Text Color Tag
• The attribute bgcolor is used for changing the back
ground color of the page.
• <body bgcolor=“Green” >
• Text is use to change the color of the enclosed text.
• <body text=“White”>
<html>
<head><title>Test page</title></head>
<body bgcolor=“Green”>
<h2 style="color:red">I am Red</h2>
</body>
</html>

Z
Let’s call it a day,
Thank you!

How the Web Works Using HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a How the Web Works Using HTML

Semelhante a How the Web Works Using HTML (20)

Mais de Marlon Jamera

Mais de Marlon Jamera (16)

Último

Último (20)

How the Web Works Using HTML

Notas do Editor