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

01. Introduction to Web Programming

The document provides an introduction to web programming, covering essential topics such as creating a website, HTML structure, and various HTML elements and attributes. It outlines the necessary tools for web development, including text editors, publishing tools, and web hosting services. Additionally, it traces the history of HTML from its inception to the current HTML5 standard.

Uploaded by

Vector Tran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

01. Introduction to Web Programming

The document provides an introduction to web programming, covering essential topics such as creating a website, HTML structure, and various HTML elements and attributes. It outlines the necessary tools for web development, including text editors, publishing tools, and web hosting services. Additionally, it traces the history of HTML from its inception to the current HTML5 standard.

Uploaded by

Vector Tran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

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

You might also like