Scribd
Upload
16 views

Unit 2-Web Technologies - HTML

Uploaded by

Dhaval Telang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Unit 2-Web Technologies - HTML

Uploaded by

Dhaval Telang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

CHAPTER 3

WEB TECHNOLOGIES
INTRODUCTION

• Web Technology refers to the various tools and techniques that are utilized in the process
of communication between different types of devices over the internet. A web browser is
used to access webpages. Web browsers can be defined as programs that display text,
data, pictures, animation, and video on the Internet. Hyperlinked resources on the World
Wide Web can be accessed using software interfaces provided by Web browsers.
• Web Technology can be classified into the following sections:
World Wide Web (WWW): The World Wide Web is based on several different technologies : Web browsers,
Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).

• Web Browser: The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and requests to the server for web documents and services.
• Web Server: Web server is a program which processes the network requests of the users and serves them with
files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).
• Web Pages: A webpage is a digital document that is linked to the World Wide Web and view able by anyone
connected to the internet has a web browser.
• Web Development: Web development refers to the building, creating, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It is the creation of
an application that works over the internet i.e. websites.
STATIC AND DYNAMIC WEB PAGES
• Static Web pages:
Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS, etc. For static
web pages when a server receives a request for a web page, then the server sends the response to the client
without doing any additional process. And these web pages are seen through a web browser. In static web
pages, Pages will remain the same until someone changes it manually.
• Dynamic Web Pages:
Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc. In dynamic web
pages, the Content of pages is different for different visitors. It takes more time to load than the static web
page. Dynamic web pages are used where the information is changed frequently, for example, stock prices,
weather information, etc.
HTML INTRODUCTION
• HTML stands for HyperText Markup Language. It is used to design web pages using a markup language.
HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web
pages. A markup language is used to define the text document within tag which defines the structure of web
pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it
and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses
tags to define what manipulation has to be done on the text.
• HTML is a markup language used by the browser to manipulate text, images, and other content, in order to
display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of
HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1999.
• Features of HTML:
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
• Why learn HTML?
• It is a simple markup language. Its implementation is easy.
• It is used to create a website.
• Helps in developing fundamentals about web programming.
• Boost professional career.
• Advantages:
• HTML is used to build websites. It’s highly flexible and user friendly
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript, etc.
HTML PAGE STRUCTURE
• 1) Comment section: <DOCTYPE! html>: This is the document type declaration (not technically a
tag). It declares a document as being an HTML document. The doctype declaration is not case-
sensitive.
• <html>: This is called the HTML root element. All other elements are contained within it.
• 2) Head section: <head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the
<head> element include:
• <style> , <title> ,<base> ,<noscript> , <script>,<meta>,<link>
• 3) Body Section: <body>: The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front-end.
• An HTML document can be created using any text editor. Save the text file using .html or .htm. Once
saved as an HTML document, the file can be opened as a webpage in the browser.
WORKING OF HTML

• Creating Your First HTML Document

Let's walk through the following steps. At the end of this tutorial, you will have made an
HTML file that displays "Hello world" message in your web browser.
• Step 1: Creating the HTML file
• Open up your computer's plain text editor(Notepad) and create a new file.
• Step 2: Save the file giving some name eg. “Pro1.html”
• Step 3: Go to the folder where you have saved the file and then double click on the file
to display the output
Example

Try this code »


<!DOCTYPE html>
<html>
<head> <title>
A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
EXPLANATION OF CODE
•The first line <!DOCTYPE html> is the
document type declaration. It instructs the web browser
that this document is an HTML5 document. It is case-
insensitive.
•The <head> element is a container for the tags that provides
information about the document, for example, <title> tag
defines the title of the document.
•The <body> element contains the document's actual content
(paragraphs, links, images, tables, and so on) that is rendered in
the web browser and displayed to the user.
HTML <H1> TO <H6> TAGS
• Example
• The six different HTML headings:
• <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
• Output: https: Biggest to small sized heading
• (www.w3schools.com/tags/tag_hn.asp)
HTML TAGS
• Syntax
• <tag> content </tag>
• Types of tags in HTML
1. Paired Tags (Opening and Closing Tags)
Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening tag,
and the other one is the closing tag. The closing tag has a / slash, it means that the tag is closed
now. It is necessary to close a paired tag.
Syntax: <tag> Content </tag>

2. Unpaired Tags (Singular Tag)


Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags. These
are also called non-container tags because they do not contain any content.
For example: <br />.
HTML ATTRIBUTES

• HTML attribute defines the characteristics of any HTML element. These attributes provide
additional information to the browser about the element like, its size, color, behaviour, etc.
• <!DOCTYPE html>
<head>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font>
</body>
</html>
BASIC HTML TAGS
Tag Description
<!DOCTYPE> It defines the document type
<html> It is the root of HTML document
<head> It defines the head of an HTML document that contains non-
visible data like metadata and other information. Head tag
must include title of the document

<body> It defines the body of a webpage and contains everything that


you see on the webpage

<title> To declare the title and is usually displayed in browser’s title


bar
HTML: <BODY> TAG

Attribute Description HTML Compatibility


Depreciated in HTML 4.01,
alink Color of text for selected hyperlinks
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
background Image to be used a background
Obsolete in HTM L5, use CSS
Depreciated in HTML 4.01,
bgcolor Background color
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
link Color of text for unvisited hyperlinks
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
text Foreground color of text
Obsolete in HTML5, use CSS
Depreciated in HTML 4.01,
vlink Color of text for visited hyperlinks
Obsolete in HTML5, use CSS
EXAMPLE

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example by
www.techonthenet.com</title>
</head>
<body>
<h1>Heading</h1>
<p>This is the content.</p>
</body>
</html>
HTML FORMATTING ELEMENTS
Formatting elements were designed to display special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
(https://www.w3schools.com/html/html_formatting.asp)
HTML COMPUTER CODE ELEMENTS

Tag Description

<code> Defines programming code

<kbd> Defines keyboard input

<samp> Defines computer output

<var> Defines a variable

<pre> Defines preformatted text

(https://www.w3schools.com/html/html_computercode_elements.asp)
HTML CITATION, QUOTATION, DEFINITION TAGS

• https://www.geeksforgeeks.org/html-quotations/
• https://www.javatpoint.com/html-cite-tag
• https://www.w3schools.com/tags/tag_dfn.asp
BLOCK LEVEL HTML TAGS
1)<! ------> comments
2) Heading <h1>to<h6>
3)<p>
4)<centre>

5) The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.
(https://www.w3schools.com/html/html_blocks.asp)
6) The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but style, class and id are common
(https://www.w3schools.com/html/html_blocks.asp)
CONTI….

7) The <hr> tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page to divide or separate
document sections. The <hr> tag is an empty tag, and it does not require an end
Attribute
tag Value Description
Align left center right Used to specify the alignment of the horizontal rule.
noshade noshade Used to specify the bar without shading effect.
size pixels Used to specify the height of the horizontal rule.
width pixels Used to specify the width of the horizontal rule.
HTML LINKS - HYPERLINKS

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
The link text is the part that will be visible to the reader.
https://www.w3schools.com/tags/tag_a.asp
Image tag
(https://www.w3schools.com/html/html_images.asp)

Tables tag
(https://www.w3schools.com/html/html_tables.asp)
Lists tag
(https://www.w3schools.com/html/html_lists.asp)
Forms tag
(https://www.w3schools.com/html/html_forms.asp)
EMBEDDING MULTIMEDIA

(HTTPS://CODEDEC.COM/TUTORIALS/EMBEDDING-MULTIMEDIA-IN-HTML/)
2_3_2024
INTRODUCTION TO XML TO XML ATTRIBUTES

XML attributes :
(https://www.tutorialspoint.com/xml/xml_overview.htm)
(https://www.tutorialspoint.com/xml/xml_syntax.htm)

XML Related Technologies


(https://www.javatpoint.com/xml-related-technologies)
INTRODUCTION TO CSS

• Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended
to simplify the process of making web pages presentable.
• CSS handles the look and feel part of a web page. Using CSS, you can control the color of
the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, layout designs, variations in display
for different devices and screen sizes as well as a variety of other effects.
(https://www.tutorialspoint.com/css/what_is_css.htm)
CSS can be added in following ways
https://www.w3schools.com/html/html_css.asp
WHAT IS CSS?

• CSS ("Cascading Style Sheets") determines how the elements


in our XHTML documents are displayed and formatted.
• By using CSS, we separate the content of a web page from the
presentation (format and styling) of that content.
• CSS enables us to make all pages of our website look similar
and consistent.
• The power of CSS is that it allows us to make site-wide
formatting changes by making edits to a single file.

In this course, we will be learning version 2.1 of CSS. A newer version, known as
CSS3, is being increasingly adopted by web designers and web browser
manufacturers.
THERE ARE A NUMBER OF BENEFITS OF CSS,
INCLUDING:
• 1) Faster Page Speed
• More code means slower page speed. And CSS enables you to use less code. CSS allows
you to use one CSS rule and apply it to all occurrences of a certain tag within an HTML
document.
• 2) Better User Experience
• CSS not only makes web pages easy on the eye, it also allows for user-friendly
formatting. When buttons and text are in logical places and well organized, user
experience improves.
CONT…
• 3) Quicker Development Time
• With CSS, you can apply specific formatting rules and styles to multiple pages with one
string of code. One cascading style sheet can be replicated across several website pages. If,
for instance, you have product pages that should all have the same formatting, look, and feel,
writing CSS rules for one page will suffice for all pages of that same type.
• 4) Easy Formatting Changes
• If you need to change the format of a specific set of pages, it’s easy to do so with CSS.
There’s no need to fix every individual page. Just edit the corresponding CSS stylesheet and
you’ll see changes applied to all the pages that are using that style sheet.
• 5) Compatibility Across Devices
• Responsive web design matters. In today’s day and age, web pages must be fully visible and
easily navigable on all devices. Whether mobile or tablet, desktop, or even smart TV, CSS
combines with HTML to make responsive design possible.
THREE WAYS TO USE CSS

We can add CSS code in any combination of three different


ways:
1. Inline Style - CSS code is placed directly into an XHTML element within
the <body> section of a web page.
2. Internal Style Sheet - CSS code is placed into a separate, dedicated area
within the <head> section of a web page.
3. External Style Sheet - CSS code is placed into a separate computer file and
then linked to a web page.

Let's take a look now at examples of each of these methods.


1) INLINE STYLE
To define an inline CSS style, we simply add the style attribute to an
XHTML element with the CSS declaration as the attribute value:
<h2 style="color:red;">CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>

An inline style declaration is highly


specific and formats just one
element on the page. No other
elements, including other <h2>
elements on the page, will be
affected by this CSS style.

Since inline styles have limited scope and do not separate content from presentation,
their use is generally discouraged. We won't be using inline styles much in this class.
INLINE STYLES
• Inline styles
• Individual element’s style declared using the STYLE attribute
• Each CSS property followed by a colon and the value of that attribute
• Multiple properties separated by semicolons
<P STYLE = “font-size: 20 pt; color: #0000FF”>
• Inline styles override any other styles
• Not suitable for site maintenance
• Only really useful for
• Quick and dirty effect testing
• Sizes of images
Outline

1. STYLE attribute

1.1 Separate multiple styles with a


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
semicolon
2 <HTML>
3
4 <!-- Fig. 14.1: inline.html -->
5 <!-- Using inline styles -->
6
7 <HEAD><TITLE>Inline Styles</TITLE></HEAD>
8
9 <BODY>
10
11 <P>Here is some text</P>
12
13 <!-- The STYLE attribute allows you to declare inline -->
14 <!-- styles. Separate multiple styles with a semicolon. -->
15 <P STYLE = "font-size: 20pt">Here is some more text</P>
16 <P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P>
17
18 </BODY>
19 </HTML>
INLINE STYLES
2) INTERNAL STYLE SHEET
To use an internal CSS style sheet, we add a <style> section within the
<head> of the page. All our CSS declarations go within this section:
<head>
...
<style type="text/css">
h2 {color:red;}
</style>
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

Styles declared in the internal style sheet affect all matching elements on the
page. In this example, all <h2> page elements are displayed in the color red.

Since formatting declarations are entirely in the <head> section, away from the actual
page content, internal CSS style sheets do a much better job than inline styles at
separating content from presentation.
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3
4<!-- Fig. 14.2: declared.html -->
5<!-- Declaring a style sheet in the header section. -->
6
7<HEAD>
8<TITLE>Style Sheets</TITLE>
9
10<!-- This begins the style sheet section. -->
11<STYLE TYPE = "text/css">
12
13 EM { background-color: #8000FF;
14 color: white }
15
16 H1 { font-family: Arial, sans-serif }
17
18 P { font-size: 18pt }
19
20 .blue { color: blue }
21
22</STYLE>
23</HEAD>
24
25<BODY>
26
27<!-- This CLASS attribute applies the .blue style -->
28<H1 CLASS = "blue">A Heading</H1>
29<P>Here is some text. Here is some text. Here is some text.
30Here is some text. Here is some text.</P>
31
32<H1>Another Heading</H1>
33<P CLASS = "blue">Here is some more text. Here is some more text.
34 Here is some <EM>more</EM> text. Here is some more text.</P>

35
Outline
36 </BODY>
3. Page rendered by browser
37 </HTML>
EXTERNAL STYLE SHEET
To use an external CSS style sheet, we create a new file (with a .css
extension) and write our style declarations into this file. We then add a
<link> element into our HTML file, right after the opening <head> tag:
style.css (separate file):
h2 {color:red;}

example.html file:
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
...
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

The <link> element instructs the browser to load the external file specified by
the href attribute and to apply the CSS style declarations contained there.
BENEFIT OF EXTERNAL STYLE SHEET
The real power of using an external style sheet is that multiple web
pages on our site can link to the same style sheet:
style.css :
h2 {color:red;}

page1.html page2.html page3.html

Styles declared in an external style sheet will affect all matching elements on
all web pages that link to the style sheet. By editing the external style sheet,
we can make site-wide changes (even to hundreds of pages) instantly.
INTERNAL VS. EXTERNAL STYLE
SHEETS
Internal Style Sheets:
• are appropriate for very small sites, especially those that have just a single
page.
• might also make sense when each page of a site needs to have a completely
different look.
External Style Sheets:
 are better for multi-page websites that need to have a uniform look
and feel to all pages.
 make for faster-loading sites (less redundant code).
 allow designers to make site-wide changes quickly and easily.
External style sheets create the furthest separation between content and
presentation. For this reason - and the others listed above - we'll consider
external style sheets to be the best option when creating a new site.
PROGRAMMING LANGUAGES

• A computer program (also commonly called an application) is a set of


instructions that the computer can perform in order to perform some task.
The process of creating a program is called programming. Programmers
typically create programs by producing source code (commonly shortened
to code), which is a list of commands typed into one or more text files.
• Types of languages:
(https://codescracker.com/computer-fundamental/types-of-computer-languages.htm)
OBJECTIVES

Characteristics of file-based systems.


Problems with file-based approach.
Meaning of the term database.
Some common uses of database systems.
Meaning of the term Database Management System
(DBMS).

You might also like