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
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.
5
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.
6
Web Hosting Service (2)
7
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)
• …
8
Web Page Example
9
HTML
HTML = HyperText Markup Language
10
HTML Tags
<tagname>Content goes here...</tagname>
Start tag End tag
11
Structural Elements
<!DOCTYPE html>
<html>
<head>…</head>
<body>…</body>
</html>
12
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
13
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
14
head Element
§ The head element contains two types of elements—
meta and title
15
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.
§ 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.
16
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.
17
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"
18
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.
19
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.
20
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.
21
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.
22
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.
23
References
§ W3 Schools – w3schools.com
§ Web Programming with HTML5, CSS, and
JavaScript – John Dean – Jones & Bartlett
Publishers, 2019.
24
