Chapter 01 Basics of HTML

Points covered in the Presentation.

1. Fundamental of World Wide Web

2. Introduction to web browser, web server.

3. Types of web sites

Static Websites
Dynamic Websites

4. Webpage Structure

5. Block Level Tags and Horizontal Rule

Heading
Paragraph
Break
Division
Block Quotes
Cantered text
Preformatted text
Address
Horizontal rule
Fundamental of World Wide Web(WWW)

 The World Wide Web is nothing more than a large number of interconnected client
and server computers.

 The World Wide Web (WWW), commonly known as the Web, is an information
system enabling documents and other web resources to be accessed over
the Internet.

 Documents and downloadable media are made available to the network

through web servers and can be accessed by programs such as web browsers.

 Servers and resources on the World Wide Web are identified and located through
character strings called uniform resource locators (URLs).

 The original and still very common document type is a web page formatted
in Hypertext Markup Language (HTML).

 This markup language supports plain text, images,

embedded video and audio contents, and scripts (short programs) that implement
complex user interaction.

 The information in the Web is transferred across the Internet using the Hypertext
Transfer Protocol (HTTP).
Web Browsers

 A web browser is an application for accessing websites.

 When a user requests a web page from a particular website, the browser retrieves its files from
a web server and then displays the page on the user's screen.

 Browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones.

 In 2020, an estimated 4.9 billion people have used a browser.

 The most used browser is Google Chrome, with a 65% global market share on all devices,
followed by Safari with 18%
Web Servers

 A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other
protocols to respond to client requests made over the World Wide Web.

 The main job of a web server is to display website content through storing, processing and
delivering webpages to users.

 Besides HTTP, web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File
Transfer Protocol), used for email, file transfer and storage.
Web Servers

Common and top web server software on the market

There are a number of common web servers available, some including:

•Apache HTTP Server. Developed by Apache Software Foundation, it is a free and open source
web server for Windows, Mac OS X, Unix, Linux, Solaris and other operating systems; it needs the
Apache license.

•Microsoft Internet Information Services (IIS). Developed by Microsoft for Microsoft

platforms; it is not open sourced, but widely used.

•Nginx. A popular open source web server for administrators because of its light resource
utilization and scalability. It can handle many concurrent sessions due to its event-driven
architecture. Nginx also can be used as a proxy server and load balancer.

•Lighttpd. A free web server that comes with the FreeBSD operating system. It is seen as fast
and secure, while consuming less CPU power.

•Sun Java System Web Server. A free web server from Sun Microsystems that can run on
Windows, Linux and Unix. It is well-equipped to handle medium to large websites.
Types of Websites

1. Static Website

 A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to
the user's web browser exactly as stored

 A static web page often displays the same information for all users, from all contexts

Features
a) Static websites are the simplest kind of website that you can build.
b) Every viewer will see the exactly same text, multimedia design or video every time he/she visits the
website until you alter that page’s source code.
c) Static websites are written with the help of HTML and CSS.
d) The only form of interactively on a static website is hyperlink.
e) Static website can be used for the information that doesn’t change substantially over months or even
years.
f) Static pages are easy and simple to understand, secure, less prone to technology errors and
breakdown and easily visible by search engines.
g) HTML was the first tool with which people had begun to create static web pages.
h) Static websites provide flexibility.
i) Lightweight .
j) Static websites perform faster and well than dynamic ones.
Types of Websites

1. Dynamic Website

Dynamic Website is a website containing data that can be mutable or changeable. It uses
client-side or server scripting to generate mutable content. Like a static website, it also contains
HTML data.

Dynamic websites are those websites that changes the content or layout with every request to
the webserver. These websites have the capability of producing different content for different
Features
visitors. of dynamic webpage:

•These websites are very flexible.

•In these websites the content can be quickly changed on the user’s computer without new page
request to the web browser.

•In these websites the owner have the ability to simply update and add new content to the site.

•These websites are featured with content management system, e-commerce system and
intranet or extranet facilities.

•Most of the dynamic web content, is assembled on the web using server-scripting languages.
What is HTML?

•HTML stands for Hyper Text Markup Language

•HTML is the standard markup language for creating Web pages

•HTML describes the structure of a Web page

•HTML consists of a series of elements

•HTML elements tell the browser how to display the content

•HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.
Structure of Webpage

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.
Structure of Webpage

•The <!DOCTYPE html> declaration defines that this document is an HTML5 document

•The <html> element is the root element of an HTML page

•The <head> element contains meta information about the HTML page

•The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)

•The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

•The <h1> element defines a large heading

•The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Editors
Learn HTML Using Notepad

 Web pages can be created and modified by using professional HTML editors.

 However, for learning HTML we recommend a simple text editor like Notepad (PC)

 We believe that using a simple text editor is a good way to learn HTML.

 Follow the steps below to create your first web page with Notepad.
Step 1: Open Notepad

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Write or copy the following HTML code into

Notepad:
Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" or “index.html” and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").

The result will look much like this:

Block Level Tags and Horizontal Rule

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading.

Example Rendering in Browser

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!DOCTYPE html>
<html> Rendering in Browser
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
 HTML <br> Tag

The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

The <br> tag is an empty tag which means that it has no end tag.

Insert single line breaks in a text:

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

Try it Yourself »
Example
<!DOCTYPE html>
<html> Rendering in Browser
<body>

<h1>A Poem</h1>

<p>Be not afraid of greatness.<br>

Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.</p>

<p><em>-William Shakespeare</em></p>

</body>
</html>
HTML <blockquote> Tag
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements (look at example below to see how to remove the indentation).

Example
<!DOCTYPE html>
<html> <blockquote
<head> cite="http://www.worldwildlif Rendering in Browser
<style> e.org/who/index.html">
blockquote { For 50 years, WWF has been
margin-left: 0; protecting the future of
} nature. The world's leading
</style> conservation organization,
</head> WWF works in 100 countries
<body> and is supported by 1.2
million members in the
<h1>Blockquote and United States and close to 5
CSS</h1> million globally.
</blockquote>
<p>Use CSS to remove the
indentation from the </body>
blockquote element.</p> </html>

<p>Here is a quote from

WWF's website:</p>
 HTML <center> Tag

The <center> tag was used in HTML4 to center-align text.;

Example Rendering in Browser

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>

</body>
</html>
HTML <pre> Tag

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line
breaks. The text will be displayed exactly as written in the HTML source code.
Example Rendering in Browser
<!DOCTYPE html>
<html>
<body>

<h1>The pre element</h1>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

</body>
</html>
 HTML <address> Tag
e <address> tag defines the contact information for the author/owner of a document or an article.

e contact information can be an email address, URL, physical address, phone number, social media handle, etc.

e text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> elem

Example Rendering in Browser

<!DOCTYPE html>
<html>
<body>

<h1>The address element</h1>

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
 HTML <hr> Tag
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or
define a change) in an HTML page.

Example Rendering in Browser

<!DOCTYPE html>
<html>
<body>

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web

pages. HTML describes the structure of a Web page, and
consists of a series of elements. HTML elements tell the
browser how to display the content.</p>
<hr>
</body>
</html>
End Of Unit I