HTML course

 DAY 1

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>day 1</title>

<meta name="description" content="prepare well">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="">

</head>

<body>

<b>bold</b>

<i>italic</i>

<u>underline</u>

<h1>main heading</h1>

<h6>small heading</h6>

<p>paragraph</p>

<br>to break line<br>

^{superscript x2 square}

_{sub script x2 base}<br>

<ol type="A">ordered list</ol>

<ul type="circle">Un ordered list</ul>

<ol>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

  </ol>

 

  <ul>

    <li>Coffee</li>

    <li>Tea</li>

    <li>Milk</li>

  </ul>

<blockquote>text in quaotes like vission and mission of company</blockquote>

<marquee direction="left">move the text in left direction</marquee>

<a href="https://www.google.com">google</a>

<img src="image path">

<p style="color:red">This is a paragraph.</p>

<p style="color:blue">This is another paragraph.</p>

<audio controls>

    <source src="horse.ogg" type="audio/ogg">

    <source src="horse.mp3" type="audio/mpeg">

    Your browser does not support the audio tag.

  </audio>

  <details>

    <summary>Epcot Center</summary>

    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

  </details>

  <video width="320" height="240" controls>

    <source src="movie.mp4" type="video/mp4">

    Your browser does not support the video tag.

  </video>

</body>    

</html>

 DAY 2

HTML Entities

GIT HUB projects

 

SCAN this QR code to connect with git hub projects

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Table tag

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

<h1>The table element</h1>

<table>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$80</td>

  </tr>

</table>

</body>

</html>

<th> Table head

<tr> Table row

<td> Table data

IFRAME

<!DOCTYPE html>
<html>

<head>
    <title>HTML iframe Tag</title>
</head>

<body style="text-align: center">
    <h2>HTML iframe Tag</h2>
    <iframe src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206111438/uni2.html"
            height="370"
            width="400">
    </iframe>
</body>

</html>

To add MAP in website

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d948.4817018003682!2d79.55044786983642!3d18.028600100776902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1739606832612!5m2!1sen!2sin" width="600" height="450" " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

FORMS

<html>

<body>

<form action="form.php">

    <div>Name: <input type="text" name="myname" /></div>

    <div>Email: <input type="email" name="myemail"

    /></div>

    <div>Contact number: <input type="number"

    name="mynumber" /></div>

    <div>

    Gender: Male <input type="checkbox" name="male" />

    Female <input type="checkbox" name="female" />

    Other <input type="checkbox" name="other" />

    </div>

    <div>D.O.B <input type="date" name="mydate" /></div>

    <div>

    Do you accept the Terms and Conditions?

    <input type="radio" name="mytc" />

    </div>

    <input type="submit" value="submit" />

    <!-- Only for submit you need to write value and not

    name -->

    </form>

</body>

</html>

DAY 3

CSS Types

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS

<p style="color:#009900; 
          font-size:50px; 
          font-style:italic; 
          text-align:center;">
      Inline CSS
</p>

Internal CSS

<!DOCTYPE html>
<html>

<head>
    <style>
        .main {
            text-align: center;
        }

        .GFG {
            color: #009900;
            font-size: 50px;
            font-weight: bold;
        }

        .geeks {
            font-style: bold;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="GFG">Internal CSS</div>

        <div class="geeks">
            Implementation of Internal CSS
        </div>
    </div>
</body>

</html>

External CSS

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="GFG">External CSS </div>
        <div id="geeks">
            This shows implementation of External CSS
        </div>
    </div>
</body>
</html>

Save this file as index.html

body {
    background-color: powderblue;
}

.main {
    text-align: center;
}

.GFG {
    color: #009900;
    font-size: 50px;
    font-weight: bold;
}

#geeks {
    font-style: bold;
    font-size: 20px;
}

Save this file as style.css

CSS Selectors

Element Selector

<html>

<head>

<style>

p {

  text-align: center;

  color: red;

} 

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

ID Selector

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

  text-align: center;

  color: red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

CLASS Selectors

<!DOCTYPE html>

<html>

<head>

<style>

.center {

  text-align: center;

  color: red;

}

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p> 

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

  text-align: center;

  color: red;

}

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p> 

</body>

</html>

CSS Universal Selectors

<!DOCTYPE html>

<html>

<head>

<style>

* {

  text-align: center;

  color: blue;

}

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

CSS Grouping Selectors

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

  text-align: center;

  color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

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

</body>

</html>

Example Program

<html>

    <style>

        <style>

#firstpara{

color: blueviolet;

height: 250px;

width: 500px;

background-color: yellow;

border: 2px double black;

border-bottom: 2px double red;

border-left: 2px double pink;

border-top-left-radius: 500px;

border-top-right-radius: 500px;

border-bottom-right-radius: 500px;

border-bottom-left-radius: 500px ;

}

#secondpara{

color: red;

}

#thirdpara{

color: pink;

}

</style>

        </style>

<body>

<p id="firstpara">This is a paragraph with a yellow background and a blueviolet color

    </p>

    <p id="secondpara">This is a paragraph with a red color

        </p>

        <p id="thirdpara">This is a paragraph with a red color

        </p>

</body>

</html>

Positions in CSS

DIV : Sticky

<!DOCTYPE html>

<html>

<head>

<style>

div.sticky {

  position: sticky;

  top: 0;

  padding: 5px;

  background-color: #cae8ca;

  border: 2px solid #4CAF50;

}

</style>

</head>

<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">

  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>

  <p>Scroll back up to remove the stickyness.</p>

  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</div>

</body>

</html>

HTML elements with explanation

HTML elements can be categorized into different types based on their purpose and behavior. Here’s a list of various types of HTML elements:

---

1. Document Structure Elements

These elements define the overall structure of the HTML document.

• <html> – Root element of the HTML document
• <head> – Contains metadata, title, links, etc.
• <body> – Contains the main content of the document
• <title> – Defines the document’s title in the browser tab
• <meta> – Provides metadata such as character encoding, viewport settings

---

2. Text Content Elements

These elements structure and format text content.

• <h1> to <h6> – Headings (largest to smallest)
• <p> – Paragraph
• <br> – Line break
• <hr> – Horizontal line
• <blockquote> – Block-level quotation
• <pre> – Preformatted text
• <code> – Inline code
• <samp> – Sample output
• <kbd> – Keyboard input
• <var> – Variable in a program

---

3. Formatting Elements

These elements provide emphasis and styling to text.

• <strong> – Important text (bold by default)
• <em> – Emphasized text (italic by default)
• <mark> – Highlighted text
• <del> – Strikethrough text
• <ins> – Underlined text
• <sup> – Superscript text
• <sub> – Subscript text
• <abbr> – Abbreviation with a tooltip
• <cite> – Citation reference
• <dfn> – Definition term

---

4. List Elements

These elements are used to create lists.

• <ul> – Unordered list
• <ol> – Ordered list
• <li> – List item
• <dl> – Description list
• <dt> – Description term
• <dd> – Description definition

---

5. Link and Navigation Elements

These elements help with navigation and linking.

• <a> – Hyperlink
• <nav> – Navigation section
• <link> – External resource link (like stylesheets)

---

6. Image and Media Elements

These elements embed media content.

• <img> – Image
• <figure> – Groups media and captions
• <figcaption> – Caption for a <figure>
• <audio> – Audio file
• <video> – Video file
• <source> – Specifies media sources
• <track> – Subtitles/captions for videos
• <embed> – Embeds external content

---

7. Table Elements

These elements create tables.

• <table> – Table
• <tr> – Table row
• <th> – Table header cell
• <td> – Table data cell
• <caption> – Table caption
• <thead> – Table head
• <tbody> – Table body
• <tfoot> – Table footer

---

8. Form Elements

These elements allow user input.

• <form> – Defines a form
• <input> – Input field
• <label> – Label for an input
• <textarea> – Multi-line text input
• <button> – Clickable button
• <select> – Dropdown selection
• <option> – Option in a dropdown
• <fieldset> – Groups form elements
• <legend> – Title for a fieldset
• <datalist> – Provides predefined input suggestions
• <output> – Displays calculation results

---

9. Interactive Elements

These elements add interactive features.

• <details> – Expandable/collapsible content
• <summary> – Summary for <details>
• <dialog> – Modal dialog box
• <progress> – Progress bar
• <meter> – Measurement within a range

---

10. Embedded and External Elements

These elements embed external content.

• <iframe> – Embeds another webpage
• <object> – Embeds media, like PDFs
• <param> – Parameters for <object>

---

11. Semantic Elements

These elements provide meaningful structure.

• <header> – Page or section header
• <footer> – Page or section footer
• <main> – Main content of the page
• <article> – Independent, self-contained content
• <section> – Thematic section of content
• <aside> – Sidebar content
• <address> – Contact information
• <time> – Represents a time or date

---

12. Metadata and Scripting Elements

These elements define metadata or scripts.

• <script> – JavaScript code
• <noscript> – Alternative content when JavaScript is disabled
• <style> – Internal CSS styles
• <base> – Specifies the base URL for links

---

This covers almost all major HTML elements categorized by type. Let me know if you need more details or specific examples!