SlideShare una empresa de Scribd logo
1 de 33
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
Review: Website Basics
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
d. Website Application
Z
Review: Website Basics
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
d. Website Application
Z
Review: Website Basics
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
Review: Website Basics
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
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>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</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>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</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>
<h3>Sub heading 3</h3>
<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>
<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 <!-- and end 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>
<!-- This is the Web page 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!

Más contenido relacionado

La actualidad más candente

Introduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSSIntroduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSS
Jussi Pohjolainen
 

La actualidad más candente (20)

HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
 
Lecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block BuildingLecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block Building
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Introduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSSIntroduction to XML, XHTML and CSS
Introduction to XML, XHTML and CSS
 
Web page concept final ppt
Web page concept  final pptWeb page concept  final ppt
Web page concept final ppt
 
Html5
Html5Html5
Html5
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
 
1. HTML
1. HTML1. HTML
1. HTML
 
Web design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introductionWeb design - HTML (Hypertext Markup Language) introduction
Web design - HTML (Hypertext Markup Language) introduction
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html 5
Html 5Html 5
Html 5
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
 
Introduction to Web Technology
Introduction to Web TechnologyIntroduction to Web Technology
Introduction to Web Technology
 
Week 6 Lecture
Week 6 LectureWeek 6 Lecture
Week 6 Lecture
 
html
htmlhtml
html
 
php 1
php 1php 1
php 1
 

Similar a How the Web Works Using HTML

Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
4_5926925443935505826.pptx
4_5926925443935505826.pptx4_5926925443935505826.pptx
4_5926925443935505826.pptx
Lusi39
 

Similar a How the Web Works Using HTML (20)

Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
Day1
Day1Day1
Day1
 
Basics of html for web development by software outsourcing company india
Basics of html for web development   by software outsourcing company indiaBasics of html for web development   by software outsourcing company india
Basics of html for web development by software outsourcing company india
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Html
HtmlHtml
Html
 
Understanding the Web Page Layout
Understanding the Web Page LayoutUnderstanding the Web Page Layout
Understanding the Web Page Layout
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
BITM3730Week3.pptx
BITM3730Week3.pptxBITM3730Week3.pptx
BITM3730Week3.pptx
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTML
 
4_5926925443935505826.pptx
4_5926925443935505826.pptx4_5926925443935505826.pptx
4_5926925443935505826.pptx
 

Más de Marlon Jamera

Más de Marlon Jamera (16)

JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional Statements
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
ICT in Society
ICT in SocietyICT in Society
ICT in Society
 
ICT in Business
ICT in BusinessICT in Business
ICT in Business
 
The Future of ICT
The Future of ICTThe Future of ICT
The Future of ICT
 
Trends in the Database
Trends in the DatabaseTrends in the Database
Trends in the Database
 
Trends in Database Management
Trends in Database ManagementTrends in Database Management
Trends in Database Management
 
Basic Concept of Database
Basic Concept of DatabaseBasic Concept of Database
Basic Concept of Database
 
Website Basics and Categories
Website Basics and CategoriesWebsite Basics and Categories
Website Basics and Categories
 
Trends In Telecommunications
Trends In TelecommunicationsTrends In Telecommunications
Trends In Telecommunications
 
Software Trends
Software TrendsSoftware Trends
Software Trends
 
Hardware Technology Trends
Hardware Technology TrendsHardware Technology Trends
Hardware Technology Trends
 
Familiarization with Web Tools
Familiarization with Web ToolsFamiliarization with Web Tools
Familiarization with Web Tools
 
Internet Applications
Internet ApplicationsInternet Applications
Internet Applications
 
Introduction to World Wide Web
Introduction to World Wide WebIntroduction to World Wide Web
Introduction to World Wide Web
 

Último

pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
JOHNBEBONYAP1
 
一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理
F
 
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girlsRussian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Monica Sydney
 
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu DhabiAbu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Monica Sydney
 
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
ydyuyu
 
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi EscortsRussian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Monica Sydney
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
F
 

Último (20)

pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
 
一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Mira Road Housewife Call Girls 07506202331, Nalasopara Call GirlsMira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac RoomVip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime BalliaBallia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
 
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girlsRussian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
 
Meaning of On page SEO & its process in detail.
Meaning of On page SEO & its process in detail.Meaning of On page SEO & its process in detail.
Meaning of On page SEO & its process in detail.
 
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu DhabiAbu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
 
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
 
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
Best SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency DallasBest SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency Dallas
 
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
 
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
 
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency""Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
 
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi EscortsRussian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
 

How the Web Works Using HTML

  • 1. Z Week 7: How the Web Works Using HTML Subject Code: COMP121 By: Marlon Jamera Email: mbjamera@ama.edu.ph
  • 2. Z How the Web Works Using HTML
  • 3. 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
  • 4. Z Review: Website Basics 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 d. Website Application
  • 5. Z Review: Website Basics 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 d. Website Application
  • 6. Z Review: Website Basics 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
  • 7. Z Review: Website Basics 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
  • 8. 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
  • 9. 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
  • 10. 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.
  • 11. Z How the Web Works? • WWW use classical client / server architecture • HTTP is a text based request-response protocol.
  • 12. Z How the Web Works? Page request Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) Server response HTTP HTTP
  • 13. 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.
  • 14. 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.
  • 15. 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.
  • 16. 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.
  • 17. 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.
  • 18. 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.
  • 19. <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> test.html First HTML Page
  • 20. <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </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
  • 21. First HTML Page: header <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML header
  • 22. 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>
  • 23. 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>
  • 24. 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>
  • 25. Headings and Paragraphs Example<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>
  • 26. <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>
  • 27. Comments: <!-- --> tag • Comments can exist anywhere between the <html></html> tags • Comments start with <!-- and end 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>
  • 28. <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> <!-- This is the Web page body --> </body> </html>
  • 29. 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
  • 30. 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
  • 31. 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>
  • 32. 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>
  • 33. Z Let’s call it a day, Thank you!

Notas del editor

  1. Left angle bracket < Right angle bracket >
  2. 07/16/96
  3. 07/16/96
  4. 07/16/96
  5. 07/16/96
  6. 07/16/96
  7. 07/16/96
  8. 07/16/96
  9. 07/16/96
  10. 07/16/96
  11. 07/16/96
  12. 07/16/96
  13. 07/16/96
  14. 07/16/96
  15. 07/16/96
  16. https://youtu.be/vzdA66d6xDs