Hypertext Markup Language (HTML)

 

HTML Notes with Examples

1. Introduction to HTML

1.1 What is HTML?
  • HTML (Hypertext Markup Language) is the standard language used to create web pages.
  • It provides the structure of a web page by defining elements such as headings, paragraphs, links, images, forms, and more.
1.2 Structure of an HTML Document

An HTML document is structured with various elements, which are enclosed within tags. Each HTML document begins with the <!DOCTYPE html> declaration, followed by the root <html> tag, which contains the <head> and <body> sections.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

2. HTML Tags and Elements

2.1 Basic HTML Tags
  • <html>: The root element of an HTML document.
  • <head>: Contains metadata about the document (title, link to CSS files, etc.).
  • <body>: Contains the visible content of the web page (text, images, etc.).
  • <title>: Sets the title of the web page (appears on the browser tab).
  • <h1> to <h6>: Header tags, with <h1> being the largest and <h6> being the smallest.
  • <p>: Paragraph tag for text.
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
2.2 Empty Tags

Some HTML tags don't have closing tags. These are called empty tags:

  • <img>: Embeds an image.
  • <br>: Inserts a line break.
  • <hr>: Creates a horizontal rule (line).
<img src="image.jpg" alt="A description of the image">
<br>
<hr>

3. HTML Attributes

3.1 Common HTML Attributes

Attributes provide additional information about HTML elements. They are written in the opening tag.

  • href: Used in <a> to specify the link destination.
  • src: Used in <img> to specify the image source.
  • alt: Provides alternative text for an image.
  • class: Used to assign a class to an element for styling.
  • id: Used to assign a unique identifier to an element.
  • style: Used to add inline CSS styles.
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="A descriptive image">

4. HTML Text Formatting Tags

4.1 Text Tags
  • <b>: Bold text.
  • <i>: Italic text.
  • <u>: Underlined text.
  • <strong>: Strong emphasis (usually bold).
  • <em>: Emphasized text (usually italic).
<b>This is bold text</b>
<i>This is italic text</i>
<u>This is underlined text</u>
4.2 Line Breaks and Paragraphs
  • <br>: Creates a line break.
  • <p>: Defines a paragraph.
<p>This is a paragraph.</p>
<br> <!-- Line break -->

5. HTML Lists

5.1 Unordered List (<ul> and <li>)

An unordered list uses bullet points.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
5.2 Ordered List (<ol> and <li>)

An ordered list uses numbered items.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

6. HTML Links and Images

6.1 Hyperlinks

The <a> tag is used to create hyperlinks.

<a href="https://www.google.com">Click here to visit Google</a>
6.2 Images

The <img> tag is used to display images.

<img src="image.jpg" alt="An image description" width="300" height="200">

7. HTML Tables

7.1 Table Structure

A basic table is created using the following tags:

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header.
  • <td>: Defines a table data cell.
<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>25</td>
    </tr>
</table>

8. HTML Forms

8.1 Form Elements

HTML forms allow users to enter data. The form is defined with the <form> tag, and input fields are defined with tags like <input>, <textarea>, <select>, and <button>.

  • <input>: Used to create various types of input fields (text, password, radio, checkbox).
  • <textarea>: Used to create multi-line text inputs.
  • <select>: Used to create a dropdown list.
<form action="submit_form.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

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

9. HTML Comments

HTML comments are used to add notes or explanations within the code. They are ignored by the browser.

<!-- This is a comment -->
<p>This is visible text</p>
<!-- Another comment -->

10. HTML Meta Tags

Meta tags provide metadata about the HTML document, such as character encoding and viewport settings.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="This is a webpage description">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Your Name">
</head>

11. HTML Responsive Design

11.1 Viewport Meta Tag

The viewport meta tag is used to control the layout on mobile devices.

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

This helps the webpage adapt its layout to different screen sizes.

Assessment: Regular Tests, Assignments, and Final Project Evaluation

Certification: Certificate of Completion from Disha Institute

 

Number of Days Depends on your practice and feedback. The more you practice and review your work, the faster you will complete the course.

For Batch time and Fess contact to Below Address and Number.

Zamanat Sir

(MCA / Bsc. I.T / ‘A’ / ‘O’ / CCC / Govt. Certified  Domain Skill Trainer )

   Disha Institute 153 Vijay Nagar Opp. Rg Pg College W.K Road Meerut 

(9411617329 , 9458516690) 

Comments

Post a Comment

Popular posts from this blog

VBA Modules for Excel Automation (Advance Excel)

  Essential VBA Modules for Excel Automation 1. Auto-Adjust Column Width Automatically adjust all columns to fit content. Sub AutoFitColumns() Cells.EntireColumn.AutoFit End Sub 2. Delete Blank Rows Removes all empty rows in the active sheet. Sub DeleteBlankRows() Dim rng As Range Set rng = ActiveSheet.UsedRange Dim i As Integer For i = rng.Rows.Count To 1 Step -1 If WorksheetFunction.CountA(rng.Rows(i)) = 0 Then rng.Rows(i).Delete End If Next i End Sub 3. Highlight Duplicates Highlights duplicate values in a selected range. Sub HighlightDuplicates() Dim rng As Range Set rng = Selection rng.FormatConditions.AddUniqueValues rng.FormatConditions(1).DupeUnique = xlDuplicate rng.FormatConditions(1).Interior.Color = RGB(255, 0, 0) End Sub 4. Merge Multiple Sheets into One Merges all sheets into a single sheet. Sub MergeSheets() Dim ws As Worksheet, destSheet As Worksheet Set destSheet = Sheets.Add destSh...
Read more

Java Programming

  Java Programming Notes 1. Introduction to Java Programming 1.1 What is Java? Java is a high-level, class-based, object-oriented programming language developed by James Gosling and Mike Sheridan at Sun Microsystems (now owned by Oracle). Java is platform-independent, meaning it can run on any device or operating system that has the Java Runtime Environment (JRE) installed. 1.2 Structure of a Java Program A basic Java program consists of: Class declaration : The class is the blueprint of the object. Main method : The entry point of a Java program, public static void main(String[] args) . Statements inside the main method to perform tasks. public class HelloWorld { public static void main (String[] args) { System.out.println( "Hello, World!" ); } } 2. Java Data Types 2.1 Primitive Data Types Java has eight primitive data types: byte : 8-bit integer. short : 16-bit integer. int : 32-bit integer. long : 64-bit integer. float : 32-bit floating point. d...
Read more

Excel Shortcuts

  Top Excel Shortcuts & Vba 1. Basic Shortcuts Shortcut Action Ctrl + N New Workbook Ctrl + O Open Workbook Ctrl + S Save Workbook Ctrl + P Print Workbook Ctrl + Z Undo Ctrl + Y Redo Ctrl + X Cut Ctrl + C Copy Ctrl + V Paste Ctrl + A Select All 2. Navigation Shortcuts Shortcut Action Ctrl + Arrow Keys Move to the edge of data (up, down, left, right) Shift + Arrow Keys Select cells in a direction Ctrl + Home Go to cell A1 Ctrl + End Go to last used cell Page Up / Page Down Move one screen up/down Alt + Tab Switch between open applications 3. Formatting Shortcuts Shortcut Action Ctrl + B Bold Ctrl + I Italic Ctrl + U Underline Alt + H + A + C Center Align Ctrl + Shift + L Apply/Remove Filters Ctrl + Shift + % Apply Percentage Format Ctrl + Shift + $ Apply Currency Format Ctrl + 1 Open Format Cells Dialog 4. Working with Rows & Columns Shortcut Action Ctrl + Space Select Entire Column Shift + Space Select Entire Row Ctrl + Shift + "+" Insert Row/Column Ctrl + "-...
Read more