Introduction
to
Web Programming
Presented by
Nguyễn Đức Thái
Ho Chi Minh City University of Technology
Outline
§ Introduction
§ Creating a Website
§ Web Page Example
§ HTML Tags
§ Structural Elements
§ title Element
§ meta Element
§ HTML Attributes
§ body Elements: hr, p, br, div
§ History of HTML
2
Creating a Website
§ A website is a collection of related web pages that
are normally stored on a single web server computer.
§ A web server: refer to the web page-accessing
software that runs on the web server computer.
§ To create a website, you’ll need these things:
• (1) a text editor,
• (2) an upload/publishing tool,
• (3) a web hosting service,
• (4) a browser.
3
Text Editor
§ Plain text editor: such as Microsoft’s Notepad
§ There are many different text editors, with varying
degrees of functionality.
§ Another feature common to all web authoring tools is
WYSIWYG, pronounced “wizeewig”.
§ It stands for “What You See Is What You Get”.
§ WYSIWYG means that as you’re editing your text, you
can see what your text will look like after it’s
eventually uploaded to a website.
§ Good Text Editors: Dreamweaver, Sublime Text 3,
…
4
WYSIWYG Editor
5
Upload / Publishing Tools
§ Publishing means that you upload your web page to
a web server computer so other users can access it on
the Web.
§ Some IDEs (Integrated Development Environment), like
Dreamweaver, provide built-in uploading capabilities,
but other IDEs, like Visual Studio, do not.
§ You could use a separate file upload tool, example
WinSCP.
6
Web Hosting Service
§ Need to have a web server computer on which to
store the uploaded files.
§ Web server computer needs to have a web hosting
service in place.
7
Web Hosting Service (2)
8
Browsers
§ A browser is a piece of software that enables a user to
retrieve and view a web page.
• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari (for Mac devices)
• Opera (for Android devices)
• …
9
Web Page Example
10
HTML
HTML = HyperText Markup Language
11
HTML Tags
<tagname>Content goes here...</tagname>
Start tag End tag
12
Structural Elements
<!DOCTYPE html>
<html>
<head>…</head>
<body>…</body>
</html>
13
HTML Structure
<!DOCTYPE html> Declaration of HTML5 document
<html> root element of an HTML page
<head> meta information about the
<title>Page Title</title>
HTML page
</head> element defines a large heading
<body> container for all the visible
contents
<h1>This is a Heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
element defines a paragraph
14
HTML is Not Case Sensitive
§ HTML tags are not case sensitive: <P> means the
same as <p>.
§ The HTML standard does not require lowercase tags,
but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types
like XHTML
15
head Element
§ The head element contains two types of elements—
meta and title
16
title Element
§ First element in the head section.
§ The text between the <title> and </title> tags will
appear in the title bar of the browser window.
§ This title text is accessed when web pages are
bookmarked and printed.
17
title Element
§ Search engines, such as Google, use the title text to
help determine keyword relevance and even display
the title text on the results page of a search.
§ A descriptive title that includes the website or
organization name is a crucial component for
establishing a brand or presence on the Web.
18
meta Element
§ The meta elements provide information about the
web page.
§ There are many different types of meta elements—
some you should always include, but most are just
optional.
§ The meta element: NO end tag.
19
HTML Attributes
§ HTML attributes provide additional information
about HTML elements.
§ All HTML elements can have attributes
§ Attributes are always specified in the start tag
§ Attributes usually come in name/value pairs
like: name="value"
20
HTML Attributes
§ Element
• Container elements: provide information between their start and end tags
• Void elements: have no end tags, so they can’t provide information that way
§ Void elements provide information using attributes.
§ For example, charset is an attribute for a meta
element:
<meta charset="utf-8">
§ Most attributes have a value assigned to them.
21
meta name Element
§ Most of the meta elements use the name attribute to
specify the type of information that’s being provided.
§ Common values for the meta name attribute are
author, description, and keywords.
§ Example: <meta name="author" content=”David Johnson ">
§ The name and content attributes go together.
22
meta name Element (2)
§ In the following examples, the name attribute uses
the values “description” and “keywords”:
<meta name="description" content="Kansas City weather conditions”>
<meta name="keywords" content="KC, weather, meteorology, forecast”>
§ The meta description element and also the meta
keywords element help web search engines find
your web page.
23
body Elements: hr, p, br, div
§ <hr> èhorizontal line.
§ <p>…</p> è for a group of words, form a paragraph
(Whenever enclosed text is greater than one line, you should put
the start and end tags (p, div) on separate lines and indent the
enclosed text)
§
§ <br> è break line
§ <div>…</div> èdivision.
24
CSS Preview
25
History of HTML
1991 HTML first published
1995 HTML 2.0
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2
1999 HTML 4.01 XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it
2012 HTML5
has been in development since 2004.
26
HTML Governing Bodies
§ W3C
§ WHATWG
§ W3C “formed a collaborative relationship with the
WHATWG.”
§ That was way back in 2009; so did the W3C
eventually merge with the WHATWG
§ There are still two separate organizations even
though their roles overlap.
§ They both maintain their own HTML standard.
§ That’s a lot of overlap!
27
W3C
§ The W3C’s mission statement says, “To lead the World
Wide Web to its full potential by developing protocols
and guidelines that ensure the long-term growth of the
Web.”
28
WHATWG
§ The WHATWG’s mission is narrower in scope than
the W3C’s mission.
§ WHATWG’s home page simply says that they
“maintain and evolve HTML.”
§ Maintaining and evolving HTML is a big undertaking.
§ They consider “HTML” to be an umbrella that
includes HTML5 (which they refer to as just
“HTML”), CSS, and the Document Object Model
(DOM), and they provide specifications for each of
them.
§ The W3C also provides specifications for HTML5, CSS,
and the DOM.
29
W3C vs. WHATWG
§ So, what’s the difference between the two
organizations?
§ The WHATWG’s standard is deemed “living,” which
means the WHATWG is free to make updates at any
time, and they don’t bother to assign new version
numbers to their standard when they do so.
§ That’s different from the W3C, which publishes new
versions, with version numbers, only after they feel
their updates are stable.
30
References
§ W3 Schools – w3schools.com
§ Web Programming with HTML5, CSS, and
JavaScript – John Dean – Jones & Bartlett
Publishers, 2019.
31
