Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
448 views

Introduction To Web Programming

This document provides an introduction to web programming and HTML. It discusses the basic components needed to create a website, including text editors, publishing tools, web hosting services, and browsers. It also covers HTML tags, elements like <head> and <body>, attributes, and structural elements. The document concludes with a brief history of HTML and an overview of the governing bodies W3C and WHATWG.

Uploaded by

Tâm Nguyễn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
448 views

Introduction To Web Programming

This document provides an introduction to web programming and HTML. It discusses the basic components needed to create a website, including text editors, publishing tools, web hosting services, and browsers. It also covers HTML tags, elements like <head> and <body>, attributes, and structural elements. The document concludes with a brief history of HTML and an overview of the governing bodies W3C and WHATWG.

Uploaded by

Tâm Nguyễn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

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

You might also like