learn-html v1.0.1
HTML
HTML - Stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
<!DOCTYPE> Declaration - Represents the document type and helps browsers to display web pages correctly.
Elements
An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>Attributes
href - defines a hyper link.
<a href="https://www.w3schools.com">Visit W3Schools</a>src - used to embed images in the web pages.
<img src="img.jpg">1. Absolute URL - Links to an external image that is hosted on another website.
<img src="https://www.w3schools.com/images/img.jpg">2. Relative URL - Links to an image that is hosted within the website.
<img src="/images/img.jpg">width & height - specify the width and height of the image (in pixels).
<img src="img.jpg" width="300" height="300">alt - specifies an alternate text for an image, if the image for some reason cannot be displayed.
<img src="img.jpg" alt="Image of a jacket">style - used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>lang - used to declare the language of the Web page. And always included inside the <html> tag.
<html lang="en">title - defines some extra information about an element.
<p title="I'm a tooltip">This is a paragraph.</p>Suggestion 1: Always Use Lowercase Attributes and Always Quote Attribute Values
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Suggestion 2: Single or Double Quotes
<p title='John "ShotGun" Nelson'>
or
<p title="John 'ShotGun' Nelson">Heading
HTML headings are titles or subtitles that you want to display on a webpage. There are six headings defined with the <h1> to <h6> tags.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Bigger Headings
You can specify the size for any heading with the style attribute, using the CSS font-size property
<h1 style="font-size:60px;">Heading 1</h1>Suggestion : Search engines use the headings to index the structure and content of your web pages.
Paragrapgh
Defines a paragraph with <p> element.
<p>This is the first paragraph</p>Horizontal Rules
Defines a thematic break in an HTML page, and is most often displayed as a horizontal rule with <hr> element.
<p>This is the first paragraph</p>
<hr>
<p>This is the second paragraph</p>HTML Line Breaks
Defines a line break with <br> element.
<p>This is<br>a paragraph<br>with line breaks.</p>Preformatted Text
Defines preformatted text with <pre> element.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>Styles
HTML style attribute is used to add styles to an element, such as color, font, size, and more.
<tagname style="property:value">Tag Name</tagname>
<!--The property is a CSS property. The value is a CSS value.-->Background color -
CSS background-color property defines the background color for an HTML element.
<h1 style="background-color:powderblue;">Headning</h1>Text color -
CSS color property defines the text color for an HTML element
<p style="color:red;">This is a paragraph.</p>Fonts -
CSS font-family property defines the font to be used for an HTML element
<p style="font-family:verdena;">This is a paragraph.</p>Text Size -
CSS font-size property defines the text size for an HTML element
<p style="font-size:100%;">This is a paragraph.</p>Text Alignment -
CSS text-align property defines the horizontal text alignment for an HTML element.
<h1 style="text-align:center;">Heading.</h1>Formatting
Bold
<br>Important
<strong>Italic
<i>Emphasized
<em>Marked
<mark>Smaller
<small>Deleted
<del>Inserted
<ins>Subscript
<sub>Superscript
<sup>Comments
<!-- Comment -->Colors
Background color
Text color
Border color
Color Values
RGB
HEX
HSL
RGBA
HSLA
Quotations
Blockquotations
<blockquote><q>Abbreviations
<abbr>Address
<address>Work Title
<cite>Bidirectional Overrides
<bdo>Links
<a>Link</a>Target Attributes
_self
<a _self>Link</a>_blank
<a _blank>Link</a>_parent
<a _parent>Link</a>_top
<a _top>Link</a>Absolute URL
Links to an external image that is hosted on another website
<img src="https://www.w3schools.com/images/img.jpg">Relative URL
Links to an image that is hosted within the website
<img src="/images/img.jpg">Link to Email Address
<a href="mailto:manthan.ank46@gmail.com">E-Mail</a>Link Titles
<a title="Title">Link Title</a>Create Bookmarks
<h1 id="id">Link</h1>
<a href="#id">Link</a>Add Favicon
<a>Link</a>Images
<img src="" alt="">Src
Alt
Width & height
Image Map
<map><area><picture>Background Image
background-image=url('')