Uploaded by mohammedkhaliffarah

chapter 1 HTML

advertisement
Getting Started with HTML 5
Instructor: Lul Farah
SIMAD UNIVERSITY
Faculty of Computing
Basics of Web Design
• Fifth Edition
• Chapter 1
• Internet & Web Basics
Key Concepts
Copyright © 2019 Pearson Education, Inc. All Rights
Reserved
Learning Outcomes
• Describe the evolution of the Internet and the Web
• Explain the need for web standards
• Identify benefits of accessible web design
• Identify reliable resources of information on the
Web
• Identify ethical use of the Web
3/31/2021
3
Learning Outcomes
• Describe the purpose of web browsers and web
servers
• Identify Internet protocols
• Define U R I s and domain names
• Describe H T M L
• Create your first web page
• Use the body, head, title and meta elements
• Name, save, and test a web page
3/31/2021
4
The Evolution of the Internet
• Internet
– Interconnected network of computer networks
– AR PAnet
• Advanced Research Project Agency
• 1969 – four computers connected
– N S F net
• National Science Foundation
– Use of the Internet was originally limited to
government, research and academic use
– 1991 Commercial ban lifted
3/31/2021
5
The World Wide Web
The graphical user interface to information stored
on some of the computers connected to the Internet.
3/31/2021
6
Convergence of
Technologies
3/31/2021
7
Web Standards and the W3C
Consortium
W3C – World Wide Web Consortium
 Develops recommendations and prototype technologies
related to the Web
 Produces specifications, called Recommendations, in an
effort to standardize web technologies
 WAI – Web Accessibility Initiative
3/31/2021
8
Network Overview
Network
two or more computers connected together for
the purpose of communicating and sharing
resources
3/31/2021
9
The Client/Server
Model
 Client/Server can describe a relationship between
two computer programs – the "client" and the
"server".
 Client
requests some type of service (such as a file or
database access) from the server.
 Server
fulfills the request and transmits the results to the
client over a network
3/31/2021
10
The Client/Server Model
• The Internet Client/Server Model
– Client: Web Browser
– Server: Web Server
3/31/2021
11
Internet Protocols
Protocols
Rules that describe the methods used for clients and
servers to communicate with each other over a
network.
There is no single protocol that makes the Internet and
Web work.
A number of protocols with specific functions are
needed.
3/31/2021
12
Common Internet
Protocols
 Official Communication Protocol: TCP/IP
 Specialized Protocols:
File Transfer: FTP
E-mail: SMTP, POP3, IMAP
Websites: HTTP, HTTP/2
3/31/2021
13
HTTP Hypertext Transfer
Protocol
 A set of rules for exchanging files such as text,
graphic images, sound, video, and other multimedia
files on the Web.
 Web browsers send HTTP requests for web pages
and their associated files.
 Web servers send HTTP responses back to the web
browsers.
3/31/2021
14
IP Address
• Each device connected to the Internet has a
unique numeric IP address.
• These addresses consist of a set of four groups
of numbers, called octets.
216.58.194.46 will get you Google!
• An IP address may correspond to a domain
name.
3/31/2021
15
Domain Name
 Locates an organization or other entity on the Internet
 Domain Name System
◦ Divides the Internet into logical groups and
understandable names
◦ Associates unique computer IP Addresses with the textbased domain names you type into a web browser
◦
Browser: http://google.com
◦
IP Address: 216.58.194.46
3/31/2021
16
TLD: Top-Level Domain Name
• A top-level domain (TLD) identifies the rightmost part of the domain name.
• Some generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia,
.cat, .jobs, .name, .biz, .museum, .info, .coop, .pro,
.travel
3/31/2021
17
URI: Uniform Resource
Indicator
URL
Uniform Resource Locator
Represents the address of a resource on the Internet.
3/31/2021
18
Markup Languages
• SGML – Standard Generalized Markup Language
• A standard for specifying a markup language or
tag set
• HTML – Hypertext Markup Language
• The set of markup symbols or codes placed in a
file intended for display on a web browser.
• Element or tag – individual markup code
• Attribute – modifies the purpose of a tag
3/31/2021
19
Markup Languages
• X H T M L – eXtensible Hypertext Markup
Language
– Developed by the W 3 C as the reformulation of
H T M L 4.0 as an application of X M L.
– It combines the formatting strengths of HT M L
4.0 and the data structure and extensibility
strengths of X M L.
3/31/2021
20
• H T M L 5 – Recommendation Status 2014
– The successor to HT M L 4
• Replaces X H T M L
• Incorporates features of both HT M L and X HT M L
• Adds new elements
• Eliminates some elements
• Intended to be backward compatible
• Constantly evolving…
• H T M L 5.1 – Recommendation Status 2016
• HT M L 5.2 – Recommendation Status 2017
3/31/2021
21
Overview of HTML
• HTML is the most widely used language on Web
to develop web pages.
• HTML was created by Berners-Lee in late 1991
but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
3/31/2021
22
Overview of HTML
• HTML 4.01 was a major version of HTML and it was
published in late 1999.
• Though HTML 4.01 version is widely used but
currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was
published in 2012
3/31/2021
23
Overview of HTML
• HTML is a collection of styles (indicated by markup
tags) that define the various elements of a World
Wide Web document.
• HTML document can be read and displayed by many
different browsers running on different types of
computers – platform independent
3/31/2021
24
What HTML is ?
• 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.
3/31/2021
25
What HTML is ?
• Originally, HTML was developed with the intent of
defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers.
• Now, HTML is being widely used to format web
pages with the help of different tags available in
HTML language.
3/31/2021
26
What HTML 5 is ?
• HTML5 will be the new standard for HTML,
XHTML, and the HTML DOM.
• The previous version of HTML came in 1999.
• The web has changed a lot since then.
• HTML5 is still a work in progress.
• However, most modern browsers have some HTML5
support.
3/31/2021
27
Programming vs. Markup Language
• HTML is not a programming language. The
"M" stands for "Markup". It uses tags to
identify page content.
• Generally, a programming language tells the
computer to do and how to do it, whereas
HTML is a way of adding context and
structure to text.
3/31/2021
28
Programming vs. Markup Language
• Markup codes are interpreted programming
codes are compiled
• HTML errors are ignored
• programming errors stop the execution of
the program
3/31/2021
29
How Did HTML5 Get Started?
• HTML5 is a cooperation between the World Wide
Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group
(WHATWG).
• WHATWG was working with web forms and
applications, and W3C was working with XHTML
2.0. In 2006, they decided to cooperate and create a
new version of HTML.
3/31/2021
30
Write HTML Using Notepad or Text Edit
• Web pages can be created and modified by using
professional HTML editors.
• However, for learning HTML we recommend a
simple text editor like Notepad (PC) or Text Edit
(Mac).
• We believe using a simple text editor is a good
way to learn HTML.
3/31/2021
31
HTML Tags
• HTML tags are keywords (tag names)
surrounded by angle brackets:
• <tag name>content goes here...</tag name>
• 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 forward slash inserted before the tag
name.
3/31/2021
32
3/31/2021
33
HTML Tags
• As told earlier, HTML is a markup language
and makes use of various tags to format the
content. These tags are enclosed within angle
braces <Tag Name>. Except few tags, most of
the tags have their corresponding closing tags.
For example, <html> has its closing
tag</html> and <body> tag has its closing tag
</body> tag etc.
• Above example of HTML document uses the
following tags:
3/31/2021
34
Basic HTML Document
•
•
•
•
•
•
•
•
•
•
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>Wada sheekeysi</h1>
<p>Aslamcaleykum .....</p>
<p>wacaleykuma salaam.....</p>
<p>Seetahey .....</p>
</body>
3/31/2021
</html>
35
.HTM or .HTML Extensions
• When you save an HTML file, you can use
either the .htm or .html extension.
• .htm extension is a habit from the past, when
the software only allowed three letters in file
extension.
• In most cases, it is perfectly safe to use .html
3/31/2021
36
Tags
Description
<!DOCTYPE.. This tag defines the document type and HTML version.
.>
<HTML>
This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
<head>
This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
<title>
The <title> tag is used inside the <head> tag to mention the
document title.
<body>
This tag represents the document's body which keeps other
HTML tags like <h1>, <div>, <p> etc.
<h1>
This tag represents the heading.
<p>
This tag represents a paragraph.
3/31/2021
37
HTML Tags
• To learn HTML, you will need to study
various tags and understand how they behave,
while formatting a textual document. Learning
HTML is simple as users have to learn the
usage of different tags in order to format the
text or images to make a beautiful webpage.
• World Wide Web Consortium (W3C)
recommends to use lowercase tags starting
from HTML 4.
3/31/2021
38
Declaration Tag
• We will study all the header and body tags in
subsequent chapters, but for now let's see what
is document declaration tag.
• The <!DOCTYPE> declaration tag is used by
the web browser to understand the version of
the HTML used in the document. Current
version of HTML is 5 and it makes use of the
following declaration:
• <!DOCTYPE html>
3/31/2021
39
Declaration Tag
There are many other declaration types which
can be used in HTML document depending on
what version of HTML is being used. We will
see more details on this while discussing
<!DOCTYPE...> tag along with other HTML
tags.
3/31/2021
40
Under the Hood of a Web Page
•
•
•
DTD – describes the markup language syntax
HTML element– contains the web page
document
Head element – contains the head section
The head section contains information that
describes the web page document.
• Title element – Text displays in title bar of
window
• Meta element – describes the character
encoding
• Body element – contains the body section
The body section contains the text and
elements that display in the browser
viewport.
3/31/2021
41
Download