learn-html
v1.0.1
Published
**HTML** - Stands for Hyper Text Markup Language
Downloads
3
Readme
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:[email protected]">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('')