Scribd
Upload
10 views6 pages

Prog Lecture1

The document contains 5 HTML files (prog1-prog5) that demonstrate various HTML elements and formatting. Prog1 shows headings, paragraphs, and links. Prog2 styles headings. Prog3 links an external style sheet. Prog4 demonstrates images and links. Prog5 shows formatting elements like bold, italics, small, mark, del, ins, sub, and sup.

Uploaded by

Ashish Kumar Bhowmik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

Prog Lecture1

The document contains 5 HTML files (prog1-prog5) that demonstrate various HTML elements and formatting. Prog1 shows headings, paragraphs, and links. Prog2 styles headings. Prog3 links an external style sheet. Prog4 demonstrates images and links. Prog5 shows formatting elements like bold, italics, small, mark, del, ins, sub, and sup.

Uploaded by

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

<!—prog1.

html →

<!DOCTYPE html>

<html>

<head>

<title>Web Designing (BCAC202)</title>

</head>

<body>

<CENTER>

<h1>My First Heading</h1>

</CENTER>

<p>My first paragraph. <br>

My second paragrahp <br>

My Third Paragraph</p>

<a href="https://google.com">This is a link</a>

<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>

<CENTER>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<h2 style="color:Tomato;">Hello World</h2>

</CENTER>
<h1 style="text-align:center">This is heading 1</h1>

<h2 style="text-align:left">This is heading 2</h2>

<h3 style="text-align:right">This is heading 3</h3>

<h4 style="text-align:justify">This is heading 4</h4>

</body>

</html>

<!—prog2.html -->

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

display: block;

font-size: 2em;

margin-top: 0.67em;

margin-bottom: 0.67em;

margin-left: 20;

margin-right: 0;

font-weight: bold;

color:Tomato;

background-color:DodgerBlue;

}
p{

color:blue;

</style>

</head>

<body>

<p>An h1 element is displayed like this: <br>

We are using different HTML tags</p>

<h1>This is heading 1</h1>

<p>Change the default CSS settings to see the effect.</p>

</body>

</html>

<!—prog3.html -->

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>
<h1>I am formatted with a linked style sheet</h1>

<p>Me too!</p>

</body>

</html>

<!—styles.css -->

h1 {

display: block;

font-size: 1em;

margin-top: 0.67em;

margin-bottom: 0.67em;

margin-left: 20;

margin-right: 0;

font-weight: bold;

color:Tomato;

p{

color:blue;

}
<!—prog4.html -->

<!--The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to -->

<a href="https://www.w3schools.com">Visit W3Schools</a><br><br><br>

<img src="pic2.jpg" width="150" height="150">

<!-- The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user uses a screen reader. -->

<br><br>

<br>

<img align="middle" src="pic1.jpg" width="150" height="150" alt="Nature1"> <br>

<br>

<center> <img src="pic1.jpg" width="100" height="100" alt=""> </center>

<br>

<br>

<br>

<center> <img src="pic3.jpg" width="150" height="150" alt="Nature1"> </center>


<!—prog5.html -->

<!--HTML Formatting Elements -->

<html>

<body>

<b>This text is bold</b> <br> <br>

<strong>This text is important!</strong> <br> <br>

<i>This text is italic</i> <br> <br>

<small>This is some smaller text.</small> <br> <br>

<p>Do not forget to buy <mark>milk</mark> today.</p>

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

</body>

</html>

You might also like