Tishk International University

Faculty of Engineering
Computer Engineering Department

Introduction to Web Programming

Musa M. Ameen
Web Programming I (CMPE 341)
1
Week 1
Fall 2024/25
Outline
✓ Introduction
✓ History
✓ Creating a Website (Tools)
✓ Web Hosting Service
✓ Parts of a URL
✓ Anatomy of a Web Page
✓ Structural Elements
✓ body Elements: hr,p,br,div

2
Objectives
✓ Learn the basics of creating a website.
✓ Learn the basics of HTML—elements, tags, attributes.
✓ Use structural elements (html, head, body) to form the framework of a web page.
✓ Fill in a head container with title and meta elements.
✓ Fill in a body container with h1, hr, p, br, and div elements.
✓ Learn the basics of Cascading Style Sheets.
✓ Learn how HTML, the Web, and web browsers originated.
✓ Use the W3C’s Markup Validation Service.

3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 1 Introduction to Web Programming

4
Introduction
Let’s start with a brief description of the Web, which is short for World Wide Web. Most
people say “Web” instead of “World Wide Web,” and we’ll follow that convention.
The Web is a collection of documents, called web pages, that are shared (for the most
part) by computer users throughout the world.
Different types of web pages do different things, but
at a minimum, they all display content on computer
screens. By “content,” we mean text, pictures, and
user input mechanisms like text boxes and buttons.

The web page address is the location where the

web page resides on the Internet. Speaking of the
Internet, what is it? It’s a collection of several billion
computers connected throughout the world.
Each web page is stored on one of those
5
computers.
Website sample
A typical web page.

6
History
In 1993, Tim Berners-Lee and Dan Connolly submitted the first formal proposal for
HTML to the Internet Engineering Task Force (IETF).
In 1994, Berners-Lee founded the World Wide Web Consortium (W3C) at the MIT, with
the W3C taking over the stewardship of the HTML standard.
By 1997, the HTML standard evolved to HTML4, with
HTML4’s last revision appearing in 2000 as HTML
4.01.
In 2009, W3C made a collaborative
relationship with the WHATWG (Web
Hypertext Application Technology
Working Group), using the Web Apps
1.0 standard as the basis for their
current HTML5 standard.
7
Creating a Website (Tools)
A website is a collection of related web pages that are normally stored on a single web
server computer. A web server is a computer system that enables users to access web
pages stored on the web server’s computer.
The term “web server” can refer to the web page-accessing software that runs on the
computer, or it can refer to the computer itself.
To create a website, you’ll need these things:
(1) a text editor or IDE (Brackets, Atom, Sublime Text, VS Code, Notepad++, …)
(2) an upload/publishing tool (FileZilla, WinSCP, Cyberduck, …)
(3) a web hosting service (GoDaddy, Bluehost, Amazon, Microsoft Azure, HostGator, ..)
(4) a browser (Google Chrome, Firefox, Opera, Edge, …)

8
Web Hosting Service
For a file upload tool such as (FileZilla or WinSCP) to work, you need to have a web
server computer on which to store the uploaded files.
For the uploaded files to be accessible as web pages on the Web, your web server
computer needs to have a web hosting service (like GoDaddy) in place.

Regardless of who’s in charge of the web

hosting service, all web hosting services need
to have a mechanism for receiving uploaded
files from a file upload tool.

Typically, that mechanism is an FTP (file

transfer protocol) server, which is a program
that runs on the web server computer.

9
Web Page Example
Before showing you the behind-the-scenes code for the Kansas City Weather page,
we first need to go over some preliminary concepts.

10
Parts of a URL
1. Identifies the protocol as “web” (HTTP)
2. Identifies the site by its domain name
3. Path through directories on the server to the target file

11
What’s Going On with Simple URLs
1. The protocol is implied and will be added by browser
2. Domain name is identified
3. If there is no path or filename, it means the URL is pointing to a default file (usually
index.html)

http://example.com/index.html

12
Anatomy of a Web Page
The page you see in the browser window is nearly always made up of multiple files,
including:
➢ An HTML document (gives the content structure)
➢ Style sheets (describes how it should look)
➢ Images and other media (embedded on the page on the fly)
➢ Scripts (add behaviors and functionality)

13
A Web Page and Its Components

14
What Style Sheets Do?

Browser’s default rendering Simple style sheet applied

15
Web Page Assembly Process
1. Request a page using its URL
2. Browser sends HTTP request to server
3. Server returns the file (or a “404 Not
Found” message)
4. Browser looks at the HTML document. If
there are external files (like images or
style sheets), it contacts the server again
for each resource
5. The server returns the additional files,
and the browser assembles the final
page

16
HTML Tags
We’re going to describe how to implement elements for a web page. To implement an
element for a web page, you’ll need to use tags.
For example, if you want to implement a strong element (in order to put emphasis on
the element’s content and display using boldface), surround the content with <strong>
tags.
Caiden was <strong>very</strong> happy when her tooth finally came out.
The use of tags is the key characteristic of a markup language. Why is it called
“markup”?
A markup language “marks up” a document by surrounding parts of its content with
tags. Web pages are implemented with HTML (Hypertext Markup Language).
You already know what “markup” means. The “hyper” in “Hypertext” refers to HTML’s
ability to implement hyperlinks. A hyperlink (or link for short) is where you click on text
or an image in order to jump to another web page.
Visit this link to access latest HTML5 tags: https://www.w3.org/TR/2011/WD-html5-
20110405/ 17
Structural Elements
Executable code is generated from the source code with the help of something called
a compiler. As you learn HTML, there’s no need to worry about executable code
because it is generated automatically behind the scenes and you never see it.
HTML has 4 basic elements that constructs framework for all your web pages:
doctype, html, head, and body.
The html, head, and body elements form the basic structure of a web page, so we’ll
refer to those elements as structural elements.

18
Structural Elements
The first construct, <!DOCTYPE html>, tells the browser
what type of document the web page is.
html element. It’s a container, and it contains/surrounds
the rest of the web page. Its start tag includes lang="en",
which tells the browser that the web page is written in
English.
head and body elements are also containers. The head
element surrounds elements that provide information
associated with the web page as a whole.
The body element surrounds elements that display
content in the web page.

19
title Element
The head element contains three types of elements — meta, style, and title.
In your web pages, you should position them in the order shown below, meta, title, and
then style (will be discussed later).
The purpose of the title element: It provides documentation for someone trying to
maintain/use your web page, and it helps web search engines find your web page.
The meta elements provide information about the web page. The meta element is a
void element (not a container), so it does not have an end tag.
The name and content attributes go together. The name attribute’s value specifies the
type of thing that the content attribute’s value specifies.

20
body Elements: hr,p,br,div
The h1 element is used to implement a web page heading. They are h1,h2,h3,h4,h5,h6.
The hr element is used to render/display a horizontal line. The hr element is a void element,
so it uses just one tag, <hr>.
The p element is a container for a group of words that form a paragraph. Normally, browsers
will render a p element’s enclosed text with a blank line above the text and a blank line below
it.
A div element is also a container for a group of words, but it’s more generic, so the words
don’t have to form sentences in a paragraph. div stands for division because a division
can refer to a part of something
that has been divided.

There’s the br element, which is

used to render a new line.

21
body Elements: hr,p,br,div

22
Displaying a Web page Without a Web Server
Note the URL value in the browser window’s address bar — file:///D:/Web/Erbil.html
The “file” at the beginning of the URL is the protocol. When you see a “file” protocol,
that means the web page was generated by simply double clicking on its .html file from
within Microsoft’s File Explorer tool.

23
Firefox Browser Chrome Browser
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ Hickson, I. (2023, October). A vocabulary and associated APIs for HTML and
XHTML. https://www.w3.org/TR/2011/WD-html5-20110405/

24