Introduction to Web Technology and Web Page Development

2
Topics
 Web Terminology
 HTML
 What is HTML
 Parts of an HTML Document
 HTML Tags
 Required
 Common

3
Internet vs. WWW
 The Internet is a vast, international network, made up of
computers and the physical connections (wires, routers,
etc.) allowing them to communicate.
 The World Wide Web (WWW or just the Web) is a
collection of software that spans the Internet and enables
the interlinking of documents and resources.
 Provides a way of accessing information on the Internet.
 For more information about the history of the Internet and
WWW:
http://en.wikipedia.org/wiki/Internet

4
Web Servers and Clients
 A Web server is a computer that is
programmed to send files to browsers on other
computers connected to the Internet.
 The Web browser, such as Firefox or Internet
Explorer, is the client that sends a request for
a Web page.
 The Web server answers the request and
delivers the requested page to the browser so
you can view it.

5
HTTP
 Stands for HyperText Transfer Protocol
 Allows computers on the WWW to
communicate with one another.
 Handles the “request” sent to the Web server
and the “response” received from the Web
server.

7
URLs
 Stands for Uniform Resource Locator
 Also called the Web page’s address
 You typically type it into your Web browser’s location
bar when you want to view a Web page
http://www.umbc.edu
Name of
Web server
Protocol needed to
communicate with
Web server

Types of Web Applications
Type Best for Industries Benefits
Static Web Apps •Book publishing company
•Works really well in offline mode
•No need to install 3rd party software to
access the web app
Dynamic Web
Apps
•Social media
•IT Industry
•Healthcare
•Retail & E-commerce
•Transportation & logistics
•On-demand
•Manage the website directly to change and
update the information
•Easy user management to protect your
server and manage all the users on the
website
Single Page Apps
•Email service
•Communication industry
•Allows optimized routing and navigation
experience
•Helps to keep the consistent visual structure
of the web application using presentation
logic
8

Multiple Page
Apps
•Enterprise industries
•E-commerce industries
•Allows optimizing each page for search engines
•Lets users access different pages with the click of
their mouse
Animated Web
Apps
•Animation
•Education
•Game
•Hold people’s attention for a long time because of
its unique design and attractive approach
•Aspect ratios, portrait, and landscape orientations,
as well as different pixel densities and viewing
distances, are considered
Content
Management
System
•Blogging Platforms
•Marketing and Sales
Platform
•News Portals
•Organizes the website content easily
•Offers user and group functionality
•Get the group and user functionalities
•Easy language integration and support
9

E-commerce
Apps
•E-commerce businesses
•Allows businesses to sell goods using a single
platform
•Expand your business globally by reaching
maximum audience
Portal Web
Apps
•Student or faculty portal
•Government portals
•All the documents and information is
centralized
•Easily search and authorize the permission
according to your preference
•Manage your courses and other educational
materials from your portal account
Progressive
Web Apps
•On-demand
•Retail & E-commerce
•Transportation & logistics
•Social media
•Healthcare
•IT industry
•Responsive and allow browser compatibility
•Easy to work in online and offline mode
•Update itself without any user interaction
10

11
HTML
 Stands for HyperText Markup Language
 Used to create a Web page
 Made up of tags that specify the structure of the document
 It consists of different elements which we use to structure a web page.
 An excerpt from a sample HTML document:
<html>
<head>
<title>Bhargavi’s Web page</title>
</head>
<body>
<h1>This is my first Web page</h1>
</html>

14
HTML Tags
 Most HTML tags work in pairs.
 There is an opening and a closing tag.

15
Required Tags
 All HTML documents should have html, head and body
tags, along with the DOCTYPE identifier.
 !DOCTYPE – Tells the browser which set of standards the page
adheres to.
 The declaration is not an HTML tag. It is an "information" to the
browser about what document type to expect. In HTML 5, the
declaration is simple.
 <!DOCTYPE html>

16
Basic HTML Template
<!DOCTYPE html>
<html>
<head>
<title>CMSC104 HTML Template</title>
</head>
<body>
This is just a basic HTML template to be used in CMSC104.
</body>
</html>
Example file: template.html

17
Some Common HTML Tags
and Their Meanings
 <p>…</p> -- Creates a paragraph
 <br /> -- Adds a line break
 <hr /> -- Separates sections with a horizontal
rule
 <h1>…</h1> -- Displays a heading (h1-h6)
  -- Inserts a comment
 <ol>…</ol> -- Creates an ordered list
 <ul>…</ul> -- Creates an unordered list
 <img /> -- Inserts an image into the document
 <a>…</a> -- Inserts a link into the document

 But the question is: how do we know which ones
are block-level elements and which ones are
inline elements? Well, unfortunately you need to
remember them.
 The easiest way is to remember which are inline
elements – and the rest are block elements.
20

Common HTML elements
 There are in total more than 100 elements. But 90% of
the time you will only use around 20 of the most
common.
 Categorized into 5 groups:
1. Section elements - <div>, <span>, <header>, <footer>, <nav>,
<main>, <section>
2. Text content - <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>
3. Forms - <form>, <input>, <button>, <label>, <textarea>
4. Images and Links - <img>, <a>
5. Others - <br>, <hr> 21

How to create an HTML
document
 First, let's open Visual Studio Code (or your
favorite code editor).
 In the folder of your choice, create a new file
and name it index.html.
 In the index.html file, type ! (exclamation
mark) and press enter. You will see
something like this:
22

23
Paragraph Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and pseudocode
questions. You cannot use a calculator.
</p>
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p>

24
Paragraph Example
Screenshot

25
Line Break Example
<p>
Roses are Red. <br />
Violets are Blue. <br />
You should study for Exam 1. <br />
It will be good for you!
</p>

26
Line Break Example
Screenshot

27
Horizontal Rule Example
<p>
The exam next week will consist of T/F,
multiple choice, short answer and
pseudocode questions. You cannot use a
calculator.
</p>
<hr />
<p>
After the exam, we will learn JavaScript.
It should be fun!!
</p>

28
Horizontal Rule Example
Screenshot

29
Heading Example
<h1>This is heading 1</h1>

31
Comment Example

<p>
Here is my paragraph.
</p>

33
Ordered List Example
<ol>
<li>Print Review Questions for Exam 1.</li>
<li>Work on Review Questions for Exam 1.</li>
</ol>

35
Unordered List Example
<ul>
<li>country music</li>
<li>monday mornings</li>
<li>brussels sprouts</li>
</ul>

37
Link Example
<a href="http://www.cs.umbc.edu/104/">CMSC104 Main page</a>

39
Image Example
<img src="linux-tux.png" alt="Tux the Penguin" />

41
Working Example
 To see an example page that uses all of the
tags we discussed today, visit
http://userpages.umbc.edu/~dblock/lecture6.html

Cascading Style Sheets (CSS)
 CSS is the language we use to style an HTML document.
 CSS describes how HTML elements should be displayed.
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
 External style sheets are stored in CSS files.
 Now check this -
https://www.w3schools.com/css/css_intro.asp
42

Why Use CSS?
 CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
 CSS Example
 body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
} 43

Task to perform for the Lab
 Experiment No 1 :
 Design an html form for displaying information
using interactive css including images, tables.
44

Introduction to Web Technology and Web Page Development

Recommended

Recommended

More Related Content

Similar to Introduction to Web Technology and Web Page Development

Similar to Introduction to Web Technology and Web Page Development (20)

Recently uploaded

Recently uploaded (20)

Introduction to Web Technology and Web Page Development