Scribd
Upload
29 views31 pages

Web Development Lec 2

Uploaded by

Dost Muhammad
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
29 views31 pages

Web Development Lec 2

Uploaded by

Dost Muhammad
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/ 31

Web Development

Instructor Name: Amber Ayub


What is HTTP?

 HTTP stands for Hyper Text Transfer Protocol


 WWW is about communication between web clients and servers
 Communication between client computers and web servers is done by
sending HTTP Requests and receiving HTTP Responses.
World Wide Web Communication

 The World Wide Web is about communication between web clients and
web servers.
 Clients are often browsers (Chrome, Edge, Safari), but they can be any type
of program or device.
 Servers are most often computers in the cloud(refers to servers that are
accessed over the Internet, and the software and databases that run on those
servers).
HTTP Request / Response

 Communication between clients and servers is done


by requests and responses:
 A client (a browser) sends an HTTP request to the web
 A web server receives the request.
 The server runs an application to process the request.
 The server returns an HTTP response (output) to the browser.
 The client (the browser) receives the response.
What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for Web pages
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by <> tags
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.
HTML Elements and Tags

 HTML uses predefined tags and elements that tell the browser how to display
the content. HTML elements include an opening tag, some content, and a
closing tag.
 Remember to include closing tags. If omitted, the browser applies the effect
of the opening tag until the end of the page.
HTML Page Structure

 The basic structure of an HTML page is shown below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and
body elements) upon which all web pages are created.
HTML History

 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
1995.
 Currently, we are using HTML, which is the latest and most recent version of
HTML.
HTML Elements

 An HTML element is a start tag and an end tag with content in between:
<h1>This is a Heading</h1>

Start tag Element content End tag

<h1> This is a Heading </h1>

<p> This is paragraph. </p>


Web Browsers

 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
 A browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Editors

 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) or TextEdit (Mac).
A Simple HTML Document

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

•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
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and


helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML
tags).
The <!DOCTYPE> declaration is not case sensitive.
HTML Documents

 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is
between <body> and </body>.
HTML Headings

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


 <h1> defines the most important heading. <h6> defines the least important heading:
Example

 <h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs

 <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Never Skip the End Tag

 Some HTML elements will display correctly, even if you forget the end tag:
 <html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
 However, never rely on this! Unexpected results and errors may occur if
you forget the end tag!
Empty HTML Elements

HTML elements with no content are called empty elements.


The <br> tag defines a line break, and is an empty element without a closing
tag:
Example

 <!DOCTYPE html>
 <html>
 <body>

 <p>This is a <br> paragraph with a line break.</p>

 </body>
 </html>
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,
HTML Tag Reference

Tag Description
<html> Defines the root of an HTML
document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Attributes

 HTML attributes provide additional information about HTML elements.


 HTML Attributes:
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example:
<a href="">Name of the website</a>
The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.
Example:
<p style="color:red;">This is a red paragraph.</p>
HTML Headings

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


<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
 HTML
<h3>Heading headings are titles or subtitles that you want to display
3</h3>
on a4</h4>
<h4>Heading webpage.
<h5>Heading 5</h5>
 Example:
<h6>Heading 6</h6>
Headings Are Important

Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

You might also like