Html html html html html html html html html

10. HTML page to know about ‘font’ tag with attributes size, font-face, color etc.
<!DOCTYPE html>
<body>
<h1>Font Tag Example</h1>
<p><font size="5">Larger font size</font></p>
<p><font face="Arial">Different font face</font></p>
<p><font color="red">Red color</font></p>
<p><font size="4" face="Verdana" color="blue">Size 4, Verdana font, blue color</font></p>
</body>
</html>

11. To be familiar about basefont tag.
<!DOCTYPE html>
<body>
<basefont size="5" face="Arial">
<h1>Basefont Example</h1>
<p>This text uses the base font settings.</p>
<p><font size="3" face="Verdana">Different font size and face.</font></p>
<p style="color: red;">Different color.</p>
</body>
</html>

12. HTML page to be familiar with tag ‘p’ and attributes align and values left, right ,center etc. Use ‘br’
tags.
<!DOCTYPE html>
<body>
<h1>Paragraph Alignment Example</h1>
<p align="left">Aligned left.</p><br>
<p align="center">Aligned center.</p><br>
<p align="right">Aligned right.</p><br>
</body>
</html>

13. HTML PAGE TO COMMENT CERTAIN PART.
<!DOCTYPE html>
</head>
<body>
<h1>HTML Page with Comment</h1>
p>This paragraph is visible.</p>

<p>This paragraph is visible.</p>
</body>
</html>

14. HTML PAGE TO know about ‘marquee’ tag with attributes behavior, direction,
bgcolor, height, loop, scroll amount, scrolldelay, vspace, width
<!DOCTYPE html>
<title>Marquee Tag Example</title>
</head>
<body>
<h1>Marquee Tag Example</h1>
<marquee behavior="alternate" direction="left" bgcolor="lightblue" height="50" loop="3"
scrollamount="5" scrolldelay="100" vspace="10" width="80%">This is a scrolling text.</marquee>
</body>
</html>

15.Use following list to create different numbering and bulleting styles. For
definition list(dl,dt,dd)
<!DOCTYPE html>
<body>
<h1>List Styles Example</h1>
<ol start="3" type="A">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
<ol>
<li>Main Item 1
<ul>
<li>Nested Item 1</li>
</ul>
</li>
<li>Main Item 2
<ol>
</ol></li></ol>
</body>
</html>

16. HTML page to know about ‘address’ tag.
<!DOCTYPE html>
<title>Address Tag Example</title>
</head>
<body>
<h1>Contact Information</h1>

<address>John Doe<br>123 Main Street<br>Cityville, State 12345<br><a
href="tel:+123456789">123-456-7890</a><br><a
href="mailto:john@example.com">john@example.com</a></address>
</body>
</html>

17. HTML page to be familiar with hyperlinks. Also talk about different
types(local/internal, external)
<!DOCTYPE html>
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Hyperlinks Example</h1>
<p><a href="#section1">Jump to Section 1</a></p>
<p><a href="https://www.example.com">Visit Example Website</a></p>
<h2 id="section1">Section 1</h2>
<p>This is Section 1.</p>
</body>
</html>

18. HTML page to create tables with different attributes such as align, bgcolor,
border, bordercolor, cellpadding, cellspacing, width, height.rowspan, colspan. Also
use tags th, tr, td ,caption etc.
<!DOCTYPE html>
<body>
<h1>Table Attributes Example</h1>
<table align="center" bgcolor="lightgray" border="1" cellpadding="10" cellspacing="0" width="80%">
<caption>Employee Information</caption>
<tr>
<th colspan="2">Employee Details</th>
<th rowspan="2">Department</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr><td>John Doe</td>
<td>30</td>
<td rowspan="2">IT</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>35</td></tr>
</table>
</body>
</html>

19.To be familiar with form tag with different elements: input type:
textbox,radio,checkbox,password,file,button,submit,reset,textarea,select.optgroup,fieldset,label
,email,color etc
<!DOCTYPE html>
<head>
<body>
<h1>Form Elements Example</h1>
<form action="/submit-form" method="post">
<label for="textbox">Textbox:</label>
<input type="text" id="textbox" name="textbox"><br><br>
<input type="radio" id="radio1" name="radio" value="option1">
<label for="radio1">Option 1</label><br>
<input type="radio" id="radio2" name="radio" value="option2">
<label for="radio2">Option 2</label><br><br>
<input type="checkbox" id="checkbox" name="checkbox"> Checkbox<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="file">File:</label>
<input type="file" id="file" name="file"><br><br>
<input type="button" id="button" value="Click me"><br><br>
<input type="submit" id="submit" value="Submit Form"><br><br>
<input type="reset" id="reset" value="Reset Form"><br><br>
<textarea id="textarea" name="textarea" rows="4" cols="50"></textarea><br><br>
<select id="select" name="select">
<optgroup label="Group 1">

<option value="option1">Option 1</option>
</optgroup>
<optgroup label="Group 2">
</optgroup>
</select><br><br>
<fieldset>
<legend>Fieldset Title</legend>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<input type="color" id="color" name="color">
</fieldset>
</form>
</body>
</html>

21. HTML 5 elements/tags :
21.1 Audio, video, object, embed etc with attributes src, data, type etc
21.2 canvas tag with attributes id, width, height etc.
21.2 'svg' tag with attributes height, width.
[Note: Let's give any two examples of canvas and svg.]
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Media Elements Example</title>
</head>
<body>
<h1>HTML5 Media Elements Example</h1>
<audio controls src="audio.mp3">Your browser does not support the audio element.</audio>
<video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">Your browser does not support the video element.
</video>
</body>
</html>

22. short view on elements :<footer>,<section>,<header>,<div> etc.
 <header>: Represents introductory content typically containing navigation links,
headings, logos, etc. It's usually placed at the top of a document or a section.
 <footer>: Represents footer content typically containing copyright information,
contact details, links to related pages, etc. It's usually placed at the bottom of a
document or a section.
 <section>: Represents a thematic grouping of content typically with a heading. It's
used to structure content and can contain other semantic or non-semantic elements.
 <div>: Represents a generic container for grouping elements. It's commonly used for
styling purposes or as a container for JavaScript functionality.
22.CSS Introduction
 CSS, or Cascading Style Sheets, is a styling language used to control the presentation
and layout of HTML documents. It allows web developers to define styles for
elements on web pages, including fonts, colors, spacing, positioning, and more.
Here's a brief introduction to CSS:
Syntax:
CSS uses selectors to target HTML elements and declarations to define their styles.
The basic syntax is:
selector {
property: value;
}

2.CSS can be applied to HTML documents using three different
methods: inline, internal, and external.
1. Inline CSS:
Inline CSS is applied directly to individual HTML elements using the
style attribute. It's useful for applying styles to specific elements
without affecting other elements on the page.
Here's an example:. CSS working methods (inline, internal and
external)
<p style="color: red; font-size: 16px;">This is a paragraph with inline
CSS.</p>
2. Internal CSS:
Internal CSS is defined within a <style> tag in the <head> section of an
HTML document. It allows you to apply styles to multiple elements on
the same page. Here's an example:
<!DOCTYPE html>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal
CSS.</p>
</body>
</html>

3. External CSS:
External CSS is defined in a separate CSS file and linked to the HTML document using the
<link> tag. This method is ideal for applying styles consistently across multiple pages of a
website. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with external CSS.</p>
</body>
</html>
3. CSS syntax with selectors (id, element, class, grouping, universal)
1. Element Selector:
Selects elements based on their tag name.
Syntax: element_name { property: value; }
Example: p { color: red; }
2. ID Selector:
Selects an element with a specific ID attribute.
Syntax: #id_name { property: value; }
Example: #header { background-color: blue; }
3. Class Selector:

Selects elements with a specific class attribute.
Syntax: .class_name { property: value; }
Example: .highlight { font-weight: bold; }
4. Grouping Selector:
Selects multiple selectors and applies the same style to all of them.
Syntax: selector1, selector2, ... { property: value; }
Example: h1, h2, h3 { color: green; }
5. Universal Selector:
Selects all elements on the page.
Syntax: * { property: value; }
Example: * { margin: 0; padding: 0; }

1. HTML page to view following lines in browser.
‘We are learning web page.’
<html>
<body>
<h1>We are running a web page</h1>
</body>
</html>

2. HTML page with body attributes: top margin, bottom margin, bgcolor, text etc.
<!DOCTYPE html>
<html>
<style>
p{
margin-top: 100px;
background-color: aqua;
}
</style>
<p>A paragraph with no margins specified.</p>
</body>
</html>

3. HTML page with body attributes: top margin, bottom margin, bgcolor, text etc.
<!DOCTYPE html>
<html>
<style>
p{
background-image: url('taylor.png');
}
</style>
<p>Computer is data storage and processing device, that was once seen as a luxury has become a
necessity these days. It is used to carry out various tasks at home as well as offices and other commercial
spaces.You will find below a number of short and long paragraphs on Computer. We hope these
Computer paragraphs will help students in completing their school assignments. These will also help
children to write and read out paragraphs with simple words and small sentences. Students can select
any paragraph on Computer according to their particular requirement./p>
</body>
</html>

1. HTML page to insert any two images using tag <img> with attributes width,
height, alt, title etc.
<!DOCTYPE html>
<html>
<body>
<img src="helloworld.png" >
<img src="taylor.png" alt="Taylor Guitars" title="Guitars Acoustic" width="700px"
height="500px">
</body>
</html>

5.HTML page to play am audio sound using ‘object’ tag.
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>

6. HTML page to play an audio file using tag ‘audio’ and attributes ‘src’,
type
<!DOCTYPE html>
<body>
<h1>Audio Player</h1>
<audio controls>
<source src="your_audio_file.mp3" type="audio/mpeg">
</audio>
</body>
</html>

7. HTML page to know about different heading tags (h1, h2, h3, h4, h5 and
h6) with attributes align.
<html>
<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>

8. HTML page to know about following formatting tags.
B,I, U, sup, sub, strike, del, mark, strong, em, small, big, ins, pre etc.
<!DOCTYPE html>
<title>Formatting Tags</title>
</head>
<body>
<h1>Formatting Tags</h1>
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <sup>superscript</sup> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <strike>strikethrough</strike> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <mark>marked</mark> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <em>emphasized</em>
text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <big>big</big> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<pre>This is preformatted text.</pre>
</body>
</html>

Html html html html html html html html html

Recommended

More Related Content

Similar to Html html html html html html html html html (20)

Recently uploaded (20)

Html html html html html html html html html