Web Technologies-I
(CS-353)
Chapter 1:
Introduction to HTML, HTTP and PHP
BY:- SWAPNIL SUGARAJ JADHAVRAO
HTML : An Overview
HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means we use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
Some Important Tags
Tag Description
<!DOCTYPE...> Defines the document type and HTML version. (Optional)
Encloses the complete HTML document and mainly comprises of
<html>
<head> and <body> sections.
Represents the document's header; can contain tags like <title>,
<head>
<link>, etc.
Used inside the <head> tag to specify the document's title (displayed
<title>
in the browser tab).
Represents the document's body; contains tags like <h1>, <div>, <p>,
<body>
etc.
<h1> Represents the main heading of the page.
Our First HTML Program <title>
<!DOCTYPE html>
<html>
<head>
<title> Our First Program </title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Program <head> & <body>
<html>
<head>
Document header related tags
</head>
<br>
<body>
Document body related tags
</body>
</html>
HTML Program :Paragraph <p>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Program : Head tag <h1>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Program : Break line<BR>
<html>
<body>
<p>This is <br> a paragraph <br> with line breaks.</p>
</body>
</html>
HTML Program : Poem Problem
<html>
<body>
<p>In HTML, spaces and new lines are
ignored:</p>
<p>
I love my country, proud and free.
It’s full of beauty for all to see.
Rivers flow and mountains rise,
Under the wide and open skies.
</p>
</body>
</html>
HTML Program : Solution on Poem Problem
<html>
<body>
<p>The pre tag preserves both spaces and line
breaks:</p>
<pre>
I love my country, proud and free.
It’s full of beauty for all to see.
Rivers flow and mountains rise,
Under the wide and open skies. .
</pre>
</body>
</html>
HTML Program : Styles Background
<html>
<body bgcolor="cyan">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Program : Font Styles
<html>
<body>
<h1 style="font-family:Arial;">This is a heading</h1>
<p style="font-family:Times New Roman;">
This is a paragraph.
</p>
</body>
</html>
HTML Program : font Styles (Color)
<html>
<body>
<font color="blue">This text is blue.</font><br>
<font color="red">This text is red.</font><br>
<font color="green">This text is green.</font><br>
<font color="purple">This text is purple.</font><br>
</body>
</html>
HTML Program : font Styles (Size&Color)
<html>
<body>
<font color="red" size="3">This is red text with size 3.
</font><br>
<font color="blue" size="5">This is blue text with size 5.
</font><br>
<font color="green" size="7">This is green text with size 7.
</font>
</body>
</html>
HTML Program : <sub>
<html>
<body>
ax + ax <sub>2</sub> + ax <sub>3</sub> + ax<sub>4</sub>
</body>
</html>
HTML Program : <sup>
<html>
<body>
ax + ax <sup>2</sup> + ax <sup>3</sup> + ax<sup>4</sup>
</body>
</html>
HTML Program : List: <ul>&<ol>
<html>
<body> <h2>An Ordered HTML List</h2>
<h2>An Unordered HTML List</h2> <ol>
<li>Coffee</li>
<ul> <li>Tea</li>
<li>Coffee</li> <li>Milk</li>
<li>Tea</li> </ol>
<li>Milk</li>
</ul> </body>
</html>
HTML Program : <img>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src=“myimage.jpg width="104" height="142">
</body>
</html>
Thank you
