Madhav Ganesan

Posted on Oct 13

Introduction to HTML

#webdev #beginners #programming #html

Markup Languages

1. Web Markup Languages

HTML (Hypertext Markup Language)
It is the standard markup language used to create and structure content on the web. It is fundamental to web development, providing the basic structure for web pages and applications.

XHTML (Extensible Hypertext Markup Language)
It is a stricter and cleaner version of HTML, based on XML (eXtensible Markup Language). It enforces stricter syntax rules to ensure greater consistency and reliability in web documents.

2. Document Processing

XML (Extensible Markup Language)
XML is a flexible and structured language designed for storing and transporting data. It is both human-readable and machine-readable

3. Data Representation

JSON (JavaScript Object Notation)
JSON is a lightweight data interchange format widely used for APIs and configuration files. It provides an easy-to-read and write format for data exchange.

Block

Block-level elements are those that occupy the entire width of their parent container
Ex. div,p,li,ul,header,table,footer,section,ol

Inline

Elements occupy only as much width as necessary and flow within the content of the containing element.
Ex. span,a,img,strong,input,label

List

<ol type="1 or A or a or I or i">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<ul type="disc or circle or square">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<dl>
    <dt>Term 1</dt>
    <dd>Description for term 1.</dd>

    <dt>Term 2</dt>
    <dd>Description for term 2.</dd>
</dl>

Table

    <table>
        <thead>
            <tr>
                <th>EmpNo</th>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>101</td>
                <td>John</td>
                <td>$3000</td>
            </tr>
            <tr>
                <td>102</td>
                <td>Jane</td>
                <td>$3200</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Class</th>
                <th>Distinction</th>
            </tr>
        </tfoot>
    </table>

Semantic HTML

Elements that describe their meaning in human and machine readable format
Ex. header, footer, article, section

Character Entities

for and type

<label for="elementID">Label Text</label>
<input type="checkbox" id="checkboxID" name="checkboxName" value="checkboxValue">

Comments

<!-- This is a comment -->
<!-- 
    This is a multiline comment.
    It can span multiple lines.
    Comments are useful for documentation and notes.
-->

Dropdown box

<label for="dropdown">Choose an option:</label>
<select id="dropdown" name="options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Video tag

  <video width="640" height="360" controls>
    <source src="path/to/your/video.mp4" type="video/mp4">
    <source src="path/to/your/video.ogv" type="video/ogg">
    <source src="path/to/your/video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>

Form tag

  <form action="https://example.com/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="Submit">
  </form>

Colspan and Rowspan

It is used in HTML tables to control how many rows or columns a cell should span.

<table border="1">
  <tr>
    <td rowspan="2">Rowspan 2</td>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td colspan="2">Cell spanning 2 columns</td>
  </tr>
</table>

Nowrap attribute

The nowrap attribute in an HTML table is used to prevent the text inside a cell from wrapping to the next line. While nowrap is now considered deprecated and CSS is preferred for this purpose

  <table border="1">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
    <tr>
      <td nowrap>Long text that will not wrap to the next line</td>
      <td>This is normal text that can wrap</td>
    </tr>
  </table>

HTML5 Components

Audio tag

  <audio controls>
    <source src="path/to/your/audio.mp3" type="audio/mpeg">
    <source src="path/to/your/audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
  </audio>

Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Mark

<p>This is a <mark>highlighted</mark> word in the sentence.</p>

SVG

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Time

<p>Event date: <time datetime="2024-08-16">August 16, 2024</time></p>
<p>Event time: <time datetime="2024-08-16T15:00:00">3:00 PM</time></p>

Hyper link/ Hyper references

<body>    
    <a href="https://www.example.com" target="_blank">Visit Example.com</a>

    <!--section link-->
    <a href="#section2">Go to Section 2</a>
    <h2 id="section2">Section 2</h2>

    <!--mail link-->
    <a href="mailto:example@example.com">Email Us</a>

    <!--download link-->
    <a href="files/document.pdf" download>Download Document</a>
</body>

target attribute

_blank: Opens the linked document in a new window or tab.
_self: Opens the linked document in the same frame (default).
_parent: Opens the linked document in the parent frame.
_top: Opens the linked document in the full body of the window.

<body>
  <a href="https://example.com" target="_blank">Open in new tab</a>
  <a href="https://example.com" target="_self">Open in same tab</a>
</body>

rel attribute

The rel attribute specifies the relationship between the current document and the linked document/resource.

<head>
  <title>Rel Attribute Example</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Slider

<!DOCTYPE html>
<html>
<head>
  <title>Range Input Slider Example</title>
</head>
<body>
  <form>
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
  </form>
</body>
</html>

Input

The readonly attribute makes an input field read-only, meaning the user can see but cannot modify the field value.
The maxlength attribute specifies the maximum number of characters allowed in an input field.

<body>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" maxlength="10" readonly>
  </form>
</body>

Progress bar

<!DOCTYPE html>
<html>
<head>
  <title>Progress Bar Example</title>
</head>
<body>
  <h1>File Upload Progress</h1>
  <progress value="40" max="100"></progress>
  <p>Progress: 40%</p>
</body>
</html>

Meta tag

It is used in HTML to provide metadata about the web page.

Character Encoding
Specifies the character encoding for the document, ensuring that text is displayed correctly.

Viewport Settings
Sets the viewport properties for responsive web design, ensuring the page is properly displayed on different devices.

Author
Specifies the author of the document

Description
Provides a concise description of the document, often used by search engines to display a summary of the page in search results.

<head>
  <meta charset="UTF-8">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="This is a sample page to demonstrate the use of the meta tag for description purposes">

  <title>Character Encoding Example</title>
</head>

Display code

code
It is used to display a single line of code within HTML. It’s typically used within <pre> for preformatted text.

<code>printf</code>

pre
It is used for preformatted text. It preserves both spaces and line breaks.

<pre>
function example() {
  console.log('Hello world!');
}
</pre>

DOCTYPE

This declaration is used to specify that the document conforms to the HTML5 standard.

<!DOCTYPE html>

Figure

It is a container used to group media content and its caption.

<figure>
    <img src="path/to/image.jpg" alt="Description of the image">
    <figcaption>This is a caption describing the image.</figcaption>
</figure>

Datalist

    <input list="fruits" id="fruit" name="fruit">

    <datalist id="fruits">
        <option value="Apple">
        <option value="Banana">
        <option value="Cherry">
        <option value="Date">
        <option value="Fig">
        <option value="Grape">
    </datalist>

InnerHTML

Retrieves or sets the HTML content of an element

// Get the HTML content of an element
let content = document.getElementById('myElement').innerHTML;

// Set the HTML content of an element
document.getElementById('myElement').innerHTML = '<strong>New Content</strong>';

InnerText

// Get the text content of an element
let textContent = document.getElementById('myElement').innerText;

// Set the text content of an element
document.getElementById('myElement').innerText = 'New Text Content';

Types of HTML Tags

Structural Tags:

<html>,<head>,<body>

Content Tags:

<h1>,<p>,<a>,<img>,<div>,<span>

Form Tags:

<form>,<input>,<textarea>,<button>,<select>

Semantic Tags:

<header>,<nav>,<article>,<section>,<footer>

Metadata Tags:

<meta>,<title>

Manipulation

<form id="myForm">
  <!-- Text Input -->
  <input type="text" name="username" placeholder="Username"/>

  <!-- Radio Buttons -->
  <input type="radio" name="gender" value="male"/> Male
  <input type="radio" name="gender" value="female"/> Female

  <!-- Checkbox -->
  <input type="checkbox" name="subscribe" value="newsletter"/> Subscribe to Newsletter

  <!-- Dropdown -->
  <select name="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
  </select>

  <!-- Button to Check Values -->
  <button type="button" onClick="getAllValues()">Get All Values</button>
</form>

<p id="result"></p>

function getAllValues() {
  const form = document.getElementById('myForm');
  let resultText = '';

  // Get text inputs
  const textInputs = form.querySelectorAll('input[type="text"]');
  textInputs.forEach(input => {
    resultText += `Text Input [${input.name}]: ${input.value}\n`;
  });

  // Get radio buttons
  const selectedRadio = form.querySelector('input[type="radio"]:checked');
  const radioButtons = form.querySelectorAll('input[type="radio"]');
  radioButtons.forEach(radio => {
    resultText += `Radio Button [${radio.name}] - Value: ${radio.value}, Checked: ${radio.checked}\n`;
  });
  if (selectedRadio) {
    resultText += `Selected Radio Button: ${selectedRadio.value}\n`;
  } else {
    resultText += 'No Radio Button Selected\n';
  }

  // Get checkboxes
  const checkboxes = form.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    resultText += `Checkbox [${checkbox.name}] - Value: ${checkbox.value}, Checked: ${checkbox.checked}\n`;
  });

  // Get dropdown
  const dropdown = form.querySelector('select[name="country"]');
  if (dropdown) {
    resultText += `Dropdown [${dropdown.name}] - Selected Value: ${dropdown.value}\n`;
  }

  // Display result
  const resultParagraph = document.getElementById('result');
  resultParagraph.textContent = resultText;
}