Introduction to HTML with syntax and tags.pptx

@neelotpal.dey
Introduction to HTML
 HTML (Hyper Text Markup Language) is the standard markup
language for creating web pages.
 It defines the structure and content of a web page using tags.
 HTML is the foundation of the World Wide Web.
 It allows for embedding multimedia, links, and other interactive
elements.

@neelotpal.dey
HTML5 Syntax
 Elements are the building blocks of HTML, represented by tags.
 Tags are enclosed in angle brackets, e.g., <tag>.
 Attributes provide additional information about an element.
 Comments are used to add explanatory notes and are ignored by the
browser.

@neelotpal.dey
HTML5 Document Structure
 <!DOCTYPE html> declares the document type as HTML5.
 <html> is the root element that contains the entire web page.
 <head> contains metadata and other information not visible on the
page.
 <body> contains the visible content of the web page.

@neelotpal.dey
 id - Unique identifier for an element
 class - Used for grouping and styling elements
 style - Inline CSS styles for the element
 title - Tooltip text displayed when hovering over the element
 href - Specifies the URL or location for links and other elements
 src - Specifies the source URL for images, scripts, and other media
 alt - Alternative text for images and other multimedia

@neelotpal.dey
 type - Specifies the type of media or content
 value - Defines the initial value for input fields
 name - Identifies an element for scripting or form submission
 target - Specifies where to open a linked document
 rel - Defines the relationship between the current document and a linked document
 disabled - Disables an input field or form control
 checked - Specifies that an input field should be pre-selected
 multiple - Allows multiple values to be selected in a drop-down or input field

@neelotpal.dey
 Opening Tags: <tag>
 Marks the beginning of an element.
 Usage: <div>, <p>, <h1>, etc.
 Closing Tags: </tag>
 Marks the end of an element.
 Usage: </div>, </p>, </h1>, etc.
 Self-Closing Tags: <tag />
 Represents elements that don't have any content and are closed immediately.
 Usage: <br />, <img />, <input />

@neelotpal.dey
 Empty Tags: <tag>
 Similar to self-closing tags but don't have a closing slash.
 Usage: <br>, <hr>, <link>
 Container Tags: <tag>...</tag>
 Used to wrap content within an element.
 Usage: <p>...</p>, <div>...</div>, <ul>...</ul>

@neelotpal.dey
<a>
 Defines a hyperlink.
 Syntax: <a href="...">...</a>

@neelotpal.dey
<abbr>
 Represents an abbreviation or acronym.
 Syntax: <abbr>...</abbr>

@neelotpal.dey
<address>
 Defines contact information for the author/owner of the document.
 Syntax: <address>...</address>

@neelotpal.dey
<area>
 Defines a clickable area within an image map.
 Syntax: <area shape="..." coords="..." href="...">

@neelotpal.dey
<article>
 Represents a self-contained composition in a document.
 Syntax: <article>...</article>

@neelotpal.dey
<aside>
 Represents content aside from the main content.
 Syntax: <aside>...</aside>

@neelotpal.dey
<audio>
 Embeds sound content in a document.
 Syntax: <audio src="...">...</audio>

@neelotpal.dey
<b>
 Defines bold text.
 Syntax: <b>...</b>

@neelotpal.dey
<base>
 Specifies the base URL for all relative URLs in the document.
 Syntax: <base href="..." target="...">

@neelotpal.dey
<bdi>
 Isolates a part of text that might be formatted in a different direction.
 Syntax: <bdi>...</bdi>

@neelotpal.dey
<bdo>
 Overrides the current text direction.
 Syntax: <bdo dir="...">...</bdo>

@neelotpal.dey
<blockquote>
 Defines a section that is quoted from another source.
 Syntax: <blockquote cite="...">...</blockquote>

@neelotpal.dey
<body>
 Defines the document's body.
 Syntax: <body>...</body>

@neelotpal.dey
<br>
 Inserts a single line break.
 Syntax: <br>

@neelotpal.dey
<button>
 Defines a clickable button.
 Syntax: <button type="...">...</button>

@neelotpal.dey
<canvas>
 Used to draw graphics via scripting.
 Syntax: <canvas>...</canvas>

@neelotpal.dey
<caption>
 Defines a table caption
 Syntax: <caption>...</caption>

@neelotpal.dey
<cite>
 Defines the title of a work
 Syntax: <cite>...</cite>

@neelotpal.dey
<code>
 Defines a piece of computer code
 Syntax: <code>...</code>

@neelotpal.dey
<col>
 Specifies column properties for each column within a <colgroup>
element
 Syntax: <col span="...">

@neelotpal.dey
<colgroup>
 Defines a group of one or more columns in a table
 Syntax: <colgroup span="...">...</colgroup>

@neelotpal.dey
<data>
 Links a given piece of content with a machinereadable translation
 Syntax: <data value="...">...</data>

@neelotpal.dey
<datalist>
 Specifies a list of predefined options for an <input> element
 Syntax: <datalist>...</datalist>

@neelotpal.dey
<dd>
 Defines a description/value of a term in a description list
 Syntax: <dd>...</dd>

@neelotpal.dey
<del>
 Defines text that has been deleted from a document
 Syntax: <del>...</del>

@neelotpal.dey
<details>
 Defines additional details that the user can view or hide
 Syntax: <details>...</details>

@neelotpal.dey
<dfn>
 Represents the defining instance of a term
 Syntax: <dfn>...</dfn>

@neelotpal.dey
<dialog>
 Defines a dialog box or window
 Syntax: <dialog>...</dialog>

@neelotpal.dey
<div>
 Defines a division or section in an HTML document
 Syntax: <div>...</div>

@neelotpal.dey
<dl>
 Defines a description list
 Syntax: <dl>...</dl>

@neelotpal.dey
<dt>
 Defines a term/name in a description list
 Syntax: <dt>...</dt>

@neelotpal.dey
<em>
 Defines emphasized text
 Syntax: <em>...</em>

@neelotpal.dey
<embed>
 Defines a container for an external application or interactive content
 Syntax: <embed src="..." type="...">

@neelotpal.dey
<fieldset>
 Groups related elements in a form
 Syntax: <fieldset>...</fieldset>

@neelotpal.dey
<figcaption>
 Defines a caption for a <figure> element
 Syntax: <figcaption>...</figcaption>

@neelotpal.dey
<figure>
 Represents selfcontained content
 Syntax: <figure>...</figure>

@neelotpal.dey
<footer>
 Defines a footer for a document or section
 Syntax: <footer>...</footer>

@neelotpal.dey
<form>
 Defines an HTML form for user input
 Syntax: <form action="..." method="...">...</form>

@neelotpal.dey
<h1> to <h6>
 Defines HTML headings
 Syntax: <h1>...</h1> to <h6>...</h6>

@neelotpal.dey
<head>
 Defines information about the document
 Syntax: <head>...</head>

@neelotpal.dey
<header>
 Defines a header for a document or section
 Syntax: <header>...</header>

@neelotpal.dey
<hr>
 Defines a thematic break or horizontal rule
 Syntax: <hr>

@neelotpal.dey
<html>
 Defines the root of an HTML document
 Syntax: <html>...</html>

@neelotpal.dey
<i>
 Defines a part of text in an alternative voice or mood
 Syntax: <i>...</i>

@neelotpal.dey
<iframe>
 Defines an inline frame
 Syntax: <iframe src="..." title="...">...</iframe>

@neelotpal.dey
<img>
 Defines an image
 Syntax: <img src="..." alt="...">

@neelotpal.dey
<input>
 Defines an input control
 Syntax: <input type="..." name="..." value="...">

@neelotpal.dey
<ins>
 Defines a text that has been inserted into a document
 Syntax: <ins>...</ins>

@neelotpal.dey
<kbd>
 Defines keyboard input
 Syntax: <kbd>...</kbd>

@neelotpal.dey
<label>
 Defines a label for an <input> element
 Syntax: <label for="...">...</label>

@neelotpal.dey
<legend>
 Defines a caption for a <fieldset> element
 Syntax: <legend>...</legend>

@neelotpal.dey
<li>
 Defines a list item
 Syntax: <li>...</li>

@neelotpal.dey
<link>
 Defines the relationship between the current document and an
external resource
 Syntax: <link rel="..." href="..." type="...">

@neelotpal.dey
<main>
 Specifies the main content of a document
 Syntax: <main>...</main>

@neelotpal.dey
<map>
 Defines an image map
 Syntax: <map name="...">...</map>

@neelotpal.dey
<mark>
 Defines marked/highlighted text
 Syntax: <mark>...</mark>

@neelotpal.dey
<meta>
 Defines metadata about an HTML document
 Syntax: <meta name="..." content="...">

@neelotpal.dey
<meter>
 Defines a scalar measurement within a known range
 Syntax: <meter value="..." min="..." max="...">...</meter>

@neelotpal.dey
<nav>
 Defines navigation links
 Syntax: <nav>...</nav>

@neelotpal.dey
<noscript>
 Defines an alternate content for users that don't support scripting
 Syntax: <noscript>...</noscript>

@neelotpal.dey
<object>
 Defines an embedded object
 Syntax: <object data="..." type="...">...</object>

@neelotpal.dey
<ol>
 Defines an ordered list
 Syntax: <ol>...</ol>

@neelotpal.dey
<optgroup>
 Defines a group of related options in a dropdown list
 Syntax: <optgroup label="...">...</optgroup>

@neelotpal.dey
<option>
 Defines an option in a dropdown list
 Syntax: <option value="...">...</option>

@neelotpal.dey
<output>
 Defines the result of a calculation
 Syntax: <output for="...">...</output>

@neelotpal.dey
<p>
 Defines a paragraph
 Syntax: <p>...</p>

@neelotpal.dey
<param>
 Defines a parameter for an object
 Syntax: <param name="..." value="...">

@neelotpal.dey
<picture>
 Defines a container for multiple image resources
 Syntax: <picture>...</picture>

@neelotpal.dey
<pre>
 Defines preformatted text
 Syntax: <pre>...</pre>

@neelotpal.dey
<progress>
 Represents the progress of a task
 Syntax: <progress value="..." max="...">...</progress>

@neelotpal.dey
<q>
 Defines a short quotation
 Syntax: <q cite="...">...</q>

@neelotpal.dey
<rp>
 Defines what to show in browsers that do not support ruby
annotations
 Syntax: <rp>...</rp>

@neelotpal.dey
<rt>
 Defines an explanation/pronunciation of characters
 Syntax: <rt>...</rt>

@neelotpal.dey
<ruby>
 Defines a ruby annotation (for East Asian typography)
 Syntax: <ruby>...</ruby>

@neelotpal.dey
<s>
 Defines text that is no longer correct or relevant
 Syntax: <s>...</s>

@neelotpal.dey
<samp>
 Defines sample output from a computer program
 Syntax: <samp>...</samp>

@neelotpal.dey
<script>
 Defines a clientside script
 Syntax: <script src="...">...</script>

@neelotpal.dey
<section>
 Defines a section in a document.
 Syntax: <section>...</section>

@neelotpal.dey
<select>
 Defines a drop -down list.
 Syntax: <select name="..." multiple="...">...</select>

@neelotpal.dey
<small>
 Defines smaller text.
 Syntax: <small>...</small>

@neelotpal.dey
 Defines multiple media resources for media elements.
 Syntax: <source src="..." type="...">

@neelotpal.dey
 Defines a section in a document.
 Syntax: <span>...</span>

@neelotpal.dey
<strong>
 Defines important text.
 Syntax: <strong>...</strong>

@neelotpal.dey
<style>
 Defines style information for a document.
 Syntax: <style>...</style>

@neelotpal.dey
<sub>
 Defines subscripted text.
 Syntax: <sub>...</sub>

@neelotpal.dey
<summary>
 Defines a visible heading for a <details> element.
 Syntax: <summary>...</summary>

@neelotpal.dey
<sup>
 Defines superscripted text.
 Syntax: <sup>...</sup>

@neelotpal.dey
<svg>
 Defines a container for SVG graphics.
 Syntax: <svg>...</svg>

@neelotpal.dey
<table>
 Defines a table.
 Syntax: <table>...</table>

@neelotpal.dey
<tbody>
 Groups the body content in a table.
 Syntax: <tbody>...</tbody>

@neelotpal.dey
<td>
 Defines a cell in a table.
 Syntax: <td>...</td>

@neelotpal.dey
<template>
 Defines a reusable template.
 Syntax: <template>...</template>

@neelotpal.dey
<textarea>
 Defines a multi-line text input control.
 Syntax: <textarea name="..." rows="..." cols="...">...</textarea>

@neelotpal.dey
<tfoot>
 Groups the footer content in a table.
 Syntax: <tfoot>...</tfoot>

@neelotpal.dey
<th>
 Defines a header cell in a table.
 Syntax: <th scope="..." colspan="..." rowspan="...">...</th>

@neelotpal.dey
<thead>
 Groups the header content in a table.
 Syntax: <thead>...</thead>

@neelotpal.dey
<time>
 Defines a date/time.
 Syntax: <time datetime="...">...</time>

@neelotpal.dey
<title>
 Defines the title of the document.
 Syntax: <title>...</title>

@neelotpal.dey
<tr>
 Defines a row in a table.
 Syntax: <tr>...</tr>

@neelotpal.dey
<track>
 Defines text tracks for media elements.
 Syntax: <track src="..." kind="..." srclang="..." label="...">

@neelotpal.dey
<u>
 Defines underlined text.
 Syntax: <u>...</u>

@neelotpal.dey
<ul>
 Defines an unordered list.
 Syntax: <ul>...</ul>

@neelotpal.dey
<var>
 Defines a variable.
 Syntax: <var>...</var>

@neelotpal.dey
<video>
 Defines a video or movie.
 Syntax: <video src="..." controls>...</video>

@neelotpal.dey
<wbr>
 Defines a possible linebreak.
 Syntax: <wbr>

Introduction to HTML with syntax and tags.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Introduction to HTML with syntax and tags.pptx

Ähnlich wie Introduction to HTML with syntax and tags.pptx (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to HTML with syntax and tags.pptx