Scribd
Upload
4 views

HTML

The document provides an overview of HTML, its structure, and essential elements such as <head>, <body>, and various tags used for creating web pages. It explains HTML attributes, links, images, lists, and formatting options, along with best practices for writing HTML code. Additionally, it highlights the importance of HTML semantics for accessibility and SEO.

Uploaded by

viveknalavade944
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML

The document provides an overview of HTML, its structure, and essential elements such as <head>, <body>, and various tags used for creating web pages. It explains HTML attributes, links, images, lists, and formatting options, along with best practices for writing HTML code. Additionally, it highlights the importance of HTML semantics for accessibility and SEO.

Uploaded by

viveknalavade944
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML

Created by : Vivek Vittal Nalwade


HTML  <head> refers to important
information about the pages like
 Hyper Text Markup Language. metadata, scripts, styles, etc.
 HTML is a standard markup language  <body> is used to define actual
used for creating web pages. content of the HTML page using
 XHTML is a stricter and more other element tags.
standardized version of HTML ie,  We will close all the tags
elements must be properly closed and in corresponding to the tags and
lowercase only. will save the file using .html
 “Hypertext” refers to links that connect or .htm extension.
web pages to another, either within a
single website or between website. Tags used inside <head>
 “Markup” uses to annotate text, images,
and other content for display in a web  <link> - is used to define links to
browser like <head>, <body>, <title>, external CSS, Custom favicons,
<div> etc. and metadata.
 Can create static website using html  <meta> - is used to provide
only. information about the pages to
 Tim Berners-Lee – Father of HTML. the web browsers.
 Easy and Simple language.  <title> - title to be displayed.
 Platform independent.  <style> - is used to describe
 Case Insensitive. style information about the
 Recommended to use tags in lowercase. webpage.
 <script> - refers to JavaScript
HTML Page Structure files that will be used to display
dynamic data on our page.
<! DOCTYPE html>
<html>
<head>
-------HTML
<title> Title of webpage </title> BASICS-------
<meta content=”text/html” ; charset =utf-
8 />
HTML Editors
<link rel=”stylesheet” href=”style.css” />
 Notepad
<script src=”script.js” />
 Visual Studio (recommended)
</head>  Brackets
 Atom
<body>
----------------------Contents---------------------- HTML Comments
</body>
 Used for temporary disable.
</html>  Single or Multi - line comment-

<! -- content -- >


 <! DOCTYPE html> is used by
web browser to understand the HTML Elements
HTML version.
 <html> is referred as the root
element of HTML. 1. An HTML element is a collection
of start and end tags with the
content inserted between them.
 The alt attribute
2. It contains different types of of <img> provides an alternate
contents such as headings, text for an image
paragraphs, link and images.  The style attribute is used to add
3. Backbone of web development. styles to an element, such as
color, font, size, and more
<p class=”p”> Hello it’s me  The lang attribute of
Vivek < p> the <html> tag declares the
language of the Web page
 The title attribute defines some
extra information about an
Closing tag Ending element.
tag
Attribute HTML Headings

<h1> Largest </h1>


HTML Attributes <h2> Sub - Sections</h2>

1. HTML Attributes provide <h3>sub </h3>


additional information about
<h4>sub </h4>
elements within an HTML
document. <h5>sub </h5 >
2. Every element can have
attributes and are defined at start <h6> Smallest</h6>
tag.
3. They are specified using
name/value pair format.

Global Attributes: HTML Paragraphs

class, style, src, id, href, alt, title, HTML <p> element defines a
lang, tabindex, role, contenteditable paragraph.
<p> This is a paragraph. < /p>
Here title is used to explain an The browser will automatically remove
element by hovering the mouse over any extra spaces and lines when the
it. page is displayed.

Eg: <p title=” this is a paragraph The <hr> tag defines a thematic break
tag”>Hello it’s me Vivek</p> in an HTML page, and is most often
displayed as a horizontal rule.
Summary: The <hr> element is used to separate
content (or define a change) in an
 All HTML elements can HTML page.
have attributes
 The href attribute <p>This is some text. </p>
of <a> specifies the URL of the <hr>
page the link goes to <h2>This is heading 2</h2>
 The src attribute
of <img> specifies the path to The HTML <br> element defines a line
the image to be displayed break.
 The width and height attributes
of <img> provide size <p>This is<br>a paragraph<br>with
information for images line breaks.</p>
The HTML <pre> element defines
preformatted text. < img src = “img_url” alt= “img_name”
>
The text inside a <pre> element is
displayed in a fixed-width font (usually
Courier), and it preserves both spaces A favicon is a small image displayed
and line breaks: next to the page title in the browser
tab. A favicon is a small image, so it
<pre> should be a simple image with high
My Bonnie lies over the ocean. contrast.

My Bonnie lies over the sea. <link rel="icon" type="image/x-icon" h


ref="/images/favicon.ico">
My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me. HTML Semantics


</pre>
Enhance website accessibility,
HTML Links improves search engine optimization
SEO and provides clearer structure and
 Unvisited link - underlined & meanings.
blue
 Visited link – underlined &  <article>
purple  <aside>
 Active link – underlined & red  <details>
 <figcaption>
<a href= “url” target=””> link  <figure>
test</a>  <footer>
 <header>
Use mailto: inside  <main>
the href attribute to create a link  <mark>
that opens the user's email  <nav>
program  <section>
 <summary>
 <time>
Target attribute:
 _blank : opens the linked
document in a new <header>
window/tab.
 _self : opens linked
document in the same <nav>
frame or window
 _parent : opens the linked
document in parent frame.
 _top : opens in full body of <section>
window.
HTML links can be used to create
bookmarks, so that readers can jump to <aside>
specific parts of a web page.
First, use the id attribute to create a
<section>
bookmark
Then, add a link to the bookmark

HTML Images
<footer>
<mark> Highlight Text
<small> Smaller Text
<del> Deleted Text
HTML Entities <ins> Inserted Text
<sub> Subscript Text
(Below)
Methods to display reserved character
like ‘<, > ’ ensuring correct rendering. <sup> Superscript Text
(Above)
&entity_name; or
&#entity_number;

Name &entity_nam Symbol --------HTML LISTS--------


e Example to demonstrate :
Non- &nbsp;
breaking Tags Description
space <ul> Defines an
Less than &lt; < unordered list
Greater &gt; > <ol> Defines an
ordered list
than
<li> Defines a list item
Copyright &copy; © <dl> Defines a
Registere &reg;
d ® <dt>
description list
Defines a term in
trademark a description list
Downwar &darr; ↓ <dd> Describes the
d arrow term in a
Rightward &rarr; → description list
arrow
Upward &uarr; ↑
arrow Unordered List
Leftward &larr; ← style="list-style-type: square |
arrow disc(default) | circle| none ;
Trademar &trade; ™
k <ul style = “list-style-type : square;>
Black &phone; ☎
telephone <li>Apple</li>
Female &female; ♀ <li>Orange</li>
Male &male; ♂
<li>Mango</li>
Star &star; ☆
&starf; ★ </ul>
Ordered List

--HTML The type attribute of the <ol> tag,


defines the type of the list item marker:
FORMATTING--
Type = "1"| "A" | "a" | "I"| "i"
These are tags and attribute to style If you want to start counting from a
your website’s text, images, and more. specified number, you can use
Improves in visual appearance.
the start attribute:
<b> Bold Text <ol start = 40>
<strong> Important Text
<i> Italic Text <ol type = “ a” >
<em> Emphasized Text <li>Ready</li>
<li>Set</li>
<li>Go</li>
</ol>
Description List
<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup
Language</dd>
<dt>CSS</dt>
<dd>Cascading Style
Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>

You might also like