Download to read offline
Uploaded byumarkhan92391
PPTX, PDF63 views
Mastering HTML: The Building Blocks of the Web
This document provides an overview of HTML, detailing its structure, basic tags, and essential elements needed for creating web pages. It covers topics like lists, links, images, tables, forms, and semantic HTML5 tags, while also discussing attributes, multimedia integration, and concepts of responsiveness and accessibility. The document serves as a comprehensive guide for beginners to understand and build HTML documents effectively.
Recommended
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Mastering HTML: The Building Blocks of the Web
- 1.HTMLLESSONLet's start withthe basics of HTML and gradually move to more advancedtopics. HTML (HyperText Markup Language) is the standard language used tocreate and design web pages.
- 2.TABLE OF CONTENTS01BasicStructureofa HTML03Lists02Tags04Links,Images,Tables,Forms
- 3.TABLE OF CONTENTS05Attributes07MultimediaTags06SemanticHTML5Tags08Inline vsBlockElements
- 4.TABLE OF CONTENTS09MetaTags11Linking CSSand JavaScript10Comments12DOCTYPEDeclaration
- 5.
- 6.• HTML standsfor Hyper Text MarkupLanguage• HTML is the standard markup languagefor creating Web pages• HTML describes the structure of a Webpage• HTML consists of a series of elements• HTML elements tell the browser how todisplay the content• HTML elements label pieces of contentsuch as "this is a heading", "this is aparagraph", "this is a link", etc.INTRODUCTION
- 7.—Santosh Kalwar“Coding likepoetry shouldbe short and concise.”
- 8.Basic Structure ofan HTMLDocument01
- 9.Every HTML documentshould start with a declaration and have a structure like this:<!DOCTYPE html><html><head><title>My First Web Page</title></head><body><h1>Hello, World!</h1><p>This is a paragraph.</p></body></html>Basic Structure of anHTML Document
- 10.
- 11.Basic Tags•<html>: Rootelement of an HTML page.•<head>: Contains meta-information about the HTMLdocument.•<title>: Specifies the title of the document, shown inthe browser's title bar.•<body>: Contains the contents of the HTMLdocument, such as text, images, links, etc.•<h1> to <h6>: Header tags, <h1> is the largest and<h6> is the smallest.•<p>: Paragraph tag.•<br>: Line break.•<hr>: Horizontal rule (line).
- 12.Text Formatting Tags•<b>:Bold text.•<i>: Italic text.•<u>: Underlined text.•<strong>: Important text (usually bold).•<em>: Emphasized text (usually italic).•<mark>: Highlighted text.•<small>: Smaller text.•<del>: Strikethrough text.•<ins>: Inserted text (usually underlined).
- 13.
- 14.Unordered List<ul><li>Item 1</li><li>Item2</li><li>Item 3</li></ul>
- 15.Ordered List<ol><li>First item</li><li>Seconditem</li><li>Third item</li></ol>
- 16.
- 17.
- 18.
- 19.ImagesImage Tag:<img src="image.jpg"alt="Description ofimage">
- 20.TablesTable Structure:<table><tr><th>Header 1</th><th>Header2</th></tr><tr><td>Data 1</td><td>Data 2</td></tr></table>
- 21.FormsForm Elements:<form action="/submit-form"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>Form Elements:html
- 22.
- 23.LinksCommon Attributes:•id: Uniqueidentifier.•class: Class name for CSS styling.•style: Inline CSS styles.•title: Tooltip text.•alt: Alternative text for images.
- 24.
- 25.Semantic HTML5 TagsSemanticTags:•<header>: Defines a header for a document or section.•<nav>: Defines navigation links.•<section>: Defines a section in a document.•<article>: Defines an independent, self-contained article.•<aside>: Defines content aside from the main content.•<footer>: Defines a footer for a document or section.•<main>: Specifies the main content of a document.•<figure>: Specifies content that is self-contained, such as images• with captions.•<figcaption>: Provides a caption for a <figure> element.
- 26.
- 27.Audio<audio controls><source src="audio.mp3"type="audio/mpeg">Your browser does not support the audio element.</audio>
- 28.Video<video width="320" height="240"controls><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>
- 29.Inline vs BlockElements08
- 30.Inline Elements•Examples: <span>,<a>, <img>, <em>, <strong>.•Do not start on a new line and only take up as much widthas necessary.
- 31.Block Elements•Examples: <div>,<p>, <h1>, <ul>, <table>.•Always start on a new line and take up the full width available.
- 32.
- 33.Block Elements<meta charset="UTF-8"><metaname="description" content="Free Webtutorials"><meta name="keywords" content="HTML, CSS,JavaScript"><meta name="author" content="John Doe"><meta name="viewport" content="width=device-width,initial-scale=1.0">•Meta Information:
- 34.
- 35.Comments<!-- This isa comment -->Adding Comments:
- 36.Linking CSS andJavaScript11
- 37.Linking CSS<link rel="stylesheet"type="text/css" href="styles.css">CSS:
- 38.Linking Java Script<scriptsrc="script.js"></script>#"https://www.slideshare.net/slideshow/mastering-html-the-building-blocks-of-the-web/270298642#39">DOCTYPE Declaration12
- 40.
- 41.
- 42.Using Character Entities<for <> for >& for &" for "' for '
- 43.
- 44.Meta Tag forResponsiveDesign<meta name="viewport" content="width=device-width,initial-scale=1.0">
- 45.
- 46.Alt Text forImages<img src="image.jpg" alt="Description of image">
- 47.
- 48.Inline CSS andJavaScript16
- 49.Inline CSS<p style="color:blue;">Thisis a blue paragraph.</p>
- 50.Inline JavaScript<button onclick="alert('HelloWorld!')">ClickMe</button>
- 51.These topics covermost of the usefultags,attribtes and concepts in HTML.Feel free to ask for more detailedexplanation or examples on anyspecific topic.Email = umarkhan99887766ui@gmail.comConclusion