HTML fundamentals and cheatsheet.

HTML fundamentals and cheatsheet.

Pramit Marattha
ยทJun 3, 2021ยท

11 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Helloooo !! Everyone !!! . In this tutorial, you will learn about the entire basics of HyperText Markup Language ( HTML) from complete scratch.

HTML basics

HTML stands for HyperText Markup Language.

<!DOCTYPE html>
  • doctype declaration defines that this document is HTML
<html>
  • is the root element of an HTML page
<head>
  • element that contains meta info about the HTML page
<title>
  • element that defines the title of the html page
<body>
  • element that defines the documents body
<h1>
  • elements defines large headings
<p>
  • elements that defines a paragraph

HTML elements

html elements is defined by < start tag > some content and < /end tag >

<tagname>some content </tagname>

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with < html > and ends with < /html >.

The visible part of the HTML document is between < body > and < /body >.

Nested html elements

HTML elements can be nested

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

HTML attributes

  • All HTML elements can have attributes

  • Attributes provide additional information about elements

  • Attributes are always specified in the start tag

  • Attributes usually come in name/value pairs like: name="value"

<a href="https://www.google.com">Google</a>

src attribute

<img src="this.jpg">

Absolute URL path

src="google.com/favicon.png"

Relative URL path

src="./images/google.png"

Height and Width Attributes

<img src="this.jpg" width="500" height="600">

alt attribute

alt attribute for the < img > tag specifies an alternate text for an image,

<img src="google.jpg" alt="This is google logo">

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

A paragraph always starts on a new line, and is usually a block of text.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Style attributes

<tagname style="property:value;">

Formatting elements

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

Blockquotes and citation elements

<blockquote cite="https://www.google.com">
this is google
</blockquote>
 <q> - for short quotation

<abbr> - for abbreviation

<address> -  for contact information

<cite> -  for work title

<bdo> -  for bi-directional override

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML comments

<!-- this is a comment -->

HTML color Names

(supports 140 color names)

Pink Color


Pink             #FFC0CB               
LightPink         #FFB6C1               
HotPink         #FF69B4               
DeepPink         #FF1493               
PaleVioletRed     #DB7093               
MediumVioletRed #C71585

Purple Color

Lavender         #E6E6FA               
Thistle         #D8BFD8               
Plum             #DDA0DD               
Orchid             #DA70D6               
Violet             #EE82EE               
Fuchsia         #FF00FF               
Magenta         #FF00FF               
MediumOrchid     #BA55D3               
DarkOrchid         #9932CC               
DarkViolet         #9400D3               
BlueViolet         #8A2BE2               
DarkMagenta     #8B008B               
Purple             #800080               
MediumPurple     #9370DB               
MediumSlateBlue #7B68EE               
SlateBlue         #6A5ACD               
DarkSlateBlue     #483D8B               
RebeccaPurple     #663399               
Indigo          #4B0082

Red Color

LightSalmon     #FFA07A               
Salmon             #FA8072               
DarkSalmon         #E9967A               
LightCoral         #F08080               
IndianRed          #CD5C5C               
Crimson         #DC143C               
Red             #FF0000               
FireBrick         #B22222               
DarkRed         #8B0000

Orange Color

Orange             #FFA500               
DarkOrange      #FF8C00               
Coral           #FF7F50               
Tomato          #FF6347               
OrangeRed       #FF4500

Yellow Color

Gold             #FFD700               
Yellow          #FFFF00               
LightYellow     #FFFFE0               
LemonChiffon     #FFFACD               
PapayaWhip      #FFEFD5               
Moccasin         #FFE4B5               
PeachPuff         #FFDAB9               
PaleGoldenRod     #EEE8AA               
Khaki             #F0E68C               
DarkKhaki       #BDB76B

Green Color

GreenYellow     #ADFF2F               
Chartreuse         #7FFF00               
LawnGreen       #7CFC00               
Lime             #00FF00               
LimeGreen         #32CD32               
PaleGreen       #98FB98               
LightGreen         #90EE90               
SpringGreen     #00FF7F               
MediumSeaGreen     #3CB371               
SeaGreen         #2E8B57               
ForestGreen     #228B22               
Green             #008000               
DarkGreen         #006400               
YellowGreen     #9ACD32               
OliveDrab       #6B8E23               
DarkOliveGreen     #556B2F               
MediumAquaMarine#66CDAA               
DarkSeaGreen     #8FBC8F               
LightSeaGreen     #20B2AA               
DarkCyan         #008B8B               
Teal             #008080

Cyan Color

Aqua             #00FFFF               
Cyan             #00FFFF               
LightCyan         #E0FFFF               
PaleTurquoise     #AFEEEE               
Aquamarine         #7FFFD4               
Turquoise         #40E0D0               
MediumTurquoise #48D1CC               
DarkTurquoise     #00CED1

Blue Color

CadetBlue       #5F9EA0               
SteelBlue         #4682B4               
LightSteelBlue     #B0C4DE               
LightBlue         #ADD8E6               
PowderBlue         #B0E0E6               
LightSkyBlue     #87CEFA               
SkyBlue         #87CEEB               
CornflowerBlue     #6495ED               
DeepSkyBlue     #00BFFF               
DodgerBlue         #1E90FF               
RoyalBlue         #4169E1               
Blue             #0000FF               
MediumBlue         #0000CD               
DarkBlue         #00008B               
Navy             #000080               
MidnightBlue     #191970

Brown Color

Cornsilk         #FFF8DC               
BlanchedAlmond     #FFEBCD               
Bisque             #FFE4C4               
NavajoWhite     #FFDEAD               
Wheat             #F5DEB3               
BurlyWood         #DEB887               
Tan             #D2B48C               
RosyBrown         #BC8F8F               
SandyBrown      #F4A460               
GoldenRod         #DAA520               
DarkGoldenRod     #B8860B               
Peru            #CD853F               
Chocolate         #D2691E               
Olive             #808000               
SaddleBrown     #8B4513               
Sienna             #A0522D               
Brown             #A52A2A               
Maroon             #800000

White Color

White             #FFFFFF               
Snow             #FFFAFA               
HoneyDew         #F0FFF0               
MintCream         #F5FFFA               
Azure             #F0FFFF               
AliceBlue         #F0F8FF               
GhostWhite         #F8F8FF               
WhiteSmoke         #F5F5F5               
SeaShell         #FFF5EE               
Beige             #F5F5DC               
OldLace         #FDF5E6               
FloralWhite     #FFFAF0               
Ivory             #FFFFF0               
AntiqueWhite     #FAEBD7               
Linen             #FAF0E6               
LavenderBlush     #FFF0F5               
MistyRose         #FFE4E1

Grey Color

Gainsboro       #DCDCDC               
LightGray         #D3D3D3               
Silver             #C0C0C0               
DarkGray         #A9A9A9               
DimGray         #696969               
Gray             #808080               
LightSlateGray     #778899               
SlateGray         #708090               
DarkSlateGray     #2F4F4F               
Black             #000000

CSS in html

Using CSS

  • CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
<a href="url" target="_blank">link text</a>

<a href="url" target="_blank"><img src="./images/yolo.png" alt="yolo"/></a>

<a href="mailto:pramitmarattha5497@gmail.com">Click to Mail</a>
  • Use the < a > element to define a link
  • Use the href attribute to define the link address
  • Use the target attribute to define where to open the linked document
  • Use the < img > element (inside < a >) to use an image as a link
  • Use the mailto: scheme inside the href attribute to create a link that opens the user's email client.

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

HTML image

<img src="url" alt="alternatetext">
  • Use the HTML < img > element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
  • Use the CSS float property to let the image float to the left or to the right

HTML image map

<img src="yolo.jpg" alt="yolo" usemap="#thismap">

<map name="thismap">
  <area shape="rect" coords="34,44,270,350" alt="box" href="box.htm">
  <area shape="rect" coords="290,172,333,250" alt="box" href="box.htm">
  <area shape="circle" coords="337,300,44" alt="round" href="round.htm">
</map>
  • Use the HTML < map > element to define an image map
  • Use the HTML < area > element to define the clickable areas in the image map
  • Use the HTML usemap attribute of the < img > element to point to an image map

Picture element

defines a container for multiple image resources

<picture>
  <source srcset="yolo.png">
  <source srcset="thisyolo.jpg">
  <img src="dance.gif" alt="dance" style="width:auto;">
</picture>

Html table

th= table headings

tr=table row

td=table data

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>promeat</td>
    <td>yolo</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Jeff</td>
    <td>who?</td>
    <td>100</td>
  </tr>
</table>

HTML Lists

Ordered list

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Unordered list

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML block level elements

<div> hello there</div>

HTML class attribute

<div class="classname">This</div>

HTML id attribute

<div id="classname">This</div>

HTML iframe

An HTML iframe is used to display a web page within a web page.

<iframe src="url" title="description">

HTML javascript

  • embed javascript inside the HTML itself
<script>
document.getElementById("demo").innerHTML = "Hello there!";
</script>

HTML HEAD

The HTML < head > element is a container for the following elements:

 <title>, <style>, <meta>, <link>, <script>, and <base>.

HTML semantics elements

image

HTML entities

image

HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the < meta > tag:

<meta charset="UTF-8">

Keys summary

  • < !DOCTYPE > is mandatory

  • The xmlns attribute in < html > is mandatory

  • < html >, < head >, < title >, and < body > are mandatory

  • Elements must always be properly nested

  • Elements must always be closed

  • Elements must always be in lowercase

  • Attribute names must always be in lowercase

  • Attribute values must always be quoted

  • Attribute minimization is forbidden

HTML forms

HTML < form > element is a conatiner for different types of input elements

<input>
  • element is the most used form Elements
<input>
  • elements can be displayed in many ways depending upon the type Attributes

image

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

image

Form submit

The form-handler is specified in the form's action attribute.

<form action="/submit.js">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

If the name attribute is omitted, the value of the input field will not be sent at all.

For example,

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

HTML form target attributes

image

<form action="/script.js" target="_blank">

Method attributes (post,get,put,delete)

<form action="/scripts.js" method="post">

HTML FORM elements Lists

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

Select elements

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Use the size attribute to specify the number of visible values:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

multiple attribute to select multiple

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Textarea element

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Button Elements

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The < fieldset > and < legend > Elements

The < fieldset > element is used to group related data in a form.

The < legend > element defines a caption for the < fieldset > element.

<form action="/scripts.js">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Output Elements

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

HTML input Types


<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Input Restrictions

image

HTML canvas

The < canvas > element is only a container for graphics. You must use JavaScript to actually draw the graphics.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

HTML svg

The HTML < svg > element is a container for SVG graphics.

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Video Elements

The HTML < video > element is used to show a video on a web page.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

attributes
- controls
- autoplay
- muted

Audio Elements

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
attributes
- controls
- autoplay
- muted

Iframe

<iframe width="420" height="315"
src="">
</iframe>

HTML semantic tags

image

Cheeerss!!! Happy coding!! ๐ŸŽ‰ ๐ŸŽ‰ ๐ŸŽ‰

Follow me on Github and Twitter

ย 
Share this