How the Web Works Using HTML

Z

Week 7:How the Web Works

Using HTMLSubject Code: COMP121

By: Marlon JameraEmail: [email protected]

Z

How the Web WorksUsing HTML

Z

Review: Website Basicsand 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


• 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


• A web based application that runs on the web or host server.

a. Client-Side Application

b. Server-Side Application

c. Browser Application


Z


• 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


• 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

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


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 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><h3>Sub heading 3</h3>

<div style="background: skyblue;"> This is a div</div>

Headings and ParagraphsExample<html>

<head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3>

<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

Internet

html page

text color tag

text strike

enclosed text

italic text

tag closing tag

tags comments

html header