All Cheatsheets

HTML

Languages of Web Development -
  1. HTML : define the structure and content of web pages.
  2. CSS : defines the styling of web pages.
  3. JavaScript : defines the behaviour of web pages.

HTML Page Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML Page</title>
    </head>
    <body>
        <h1>This is Heading</h1>
        <p>This is Paragraph.</p>
    </body>
</html>

Tags

• Heading
Tags Info
<h1>

Heading 1

<h2>

Heading 2

<h3>

Heading 3

<h4>
Heading 4
<h5>
Heading 5
<h6>
Heading 6
• Containers
Tags Info
<p> Paragraph
<div> Division Container (block-level)
<span> Span Container (inline)
• Text Formatting
Tags Info
<b> Bold Text
<strong> Strong/Important Text
<i> Italic Text
<u> Underlined Text
<em> Emphasized Text
<small> Small Text
<sub> TextSubscript Text
<sup> TextSuperscript Text
<ins> Inserted Text
<del> Deleted Text
<mark> Marked Text
<pre>
Preformatted Text
<code> Code
<q> Short Quatation
<abbr> Abbreviation
<bdo dir="rtl"> Bidirectional Override (Bidirectional Override)
<kbd> Keyboard Input
<samp> Program Output
<var> Defines Variable
<address>
Address
<cite> Work Title
• Others
Tags Info
<!-- comment --> Comments
<hr> Horizontal Line
<br> Line Break
• Semantic Elements
Tags Info
<section> Section
<main> Main Content
<article> Article
<aside> Side Content
<header> Header
<footer> Footer
<nav> Navigation Links/Bar
<figure> Figures
<details> Details of Content
<dialog> Dialog
<summary> Summary

Lists

• Unordered :
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>
• Ordered :
<ol type="value" start="20">
    <li>Item</li>
    <li>Item</li>
</ol>
  • value=1|a|A|I|i
  • start : start counting from 20
• Description Lists :
<dl>
    <dt>Term</dt>
    <dd>- description </dd>
    <dt>Term</dt>
    <dd>- description</dd>
</dl>

Tables

<table>
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Column</td>
            <td>Table Column</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table Column</td>
            <td>Table Column</td>
        </tr>
    </tfoot>
</table>
  • colspan="value" : span columns
  • rowspan="value" : span rows
Caption :
<caption>Text</caption>

The <caption> tag must be inserted immediately after the <table> tag.

Images

<img src="image.jpg" alt="Image Not Supported" width="104" height="142">
• Clickable Area :
<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
• Picture Gallery :
<picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

shape : rect|circle|poly|default

Video

<video width="320" height="240" autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Browser does not support video tag
</video>

Audio

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Browser does not support audio element
</audio>

Frames

<iframe src="URL" height="100px" width="100px"></iframe>

<iframe src="demo_iframe.html" name="iframe_a"></iframe>
<a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

Forms

<form action="action.php" method="get/post" autocomplete="on/off">
    <label for="fname">Name</label>
    <input type="text" name="iname" value="john">
</form>
  • Input Type : button|checkbox|color|date|datetime-local|email|file|hidden|image|month|number|password|radio|range|reset|search|submit|text|tel|time|url|week
  • Form Attribute : autofocus|checked|disabled|readonly|required|multiple|placeholder|size|value|min|max|maxlength
• Button :
<button type="button" onclick="alert('Message')">Click</button>
• Fieldset :
<fieldset>
    <legend>Caption</legend>
</fieldset>
• Selection List :
<select id="cars" name="cars" size="3" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    <option value="fiat" selected>Fiat</option>
</select>
• Data List :
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
• Textarea :
<textarea name="message" rows="10" cols="30">
    Text
</textarea>

HTML Entity

Char Entity
& &amp;
&lowast;
&sim;
&and;
< &lt;
> &gt;
© &copy;
® &reg;
&trade;
× &times;
&bull;
&larr;
&rarr;
&uarr;
&darr;

More? Click Here