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

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introduction to HTML with syntax and tags.pptx

Semelhante a Introduction to HTML with syntax and tags.pptx (20)

Último

Último (20)

Introduction to HTML with syntax and tags.pptx