Scribd
Upload
34 views7 pages

HTML Cheat Sheet

The document provides an introduction and overview of HTML including important tags and elements. It explains the basic structure of an HTML document and covers key topics like headings, paragraphs, links, images, lists, tables, forms and more. Examples are provided for each topic.

Uploaded by

sam deb
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views7 pages

HTML Cheat Sheet

The document provides an introduction and overview of HTML including important tags and elements. It explains the basic structure of an HTML document and covers key topics like headings, paragraphs, links, images, lists, tables, forms and more. Examples are provided for each topic.

Uploaded by

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

HTML CHEAT SHEET

Introduction to HTML
HTML stands for HyperText Markup language.
It's not a programming language but a markup language for creating web pages.
HTML creates the structure of a web page and uses “tags” to mark up a web page.

HTML Tags:
Tags are keywords surrounded by angle brackets like <tag> .
They come in pairs: opening <tag> and closing </tag> .
Example:

<h1>This is a heading</h1>
<p>This is a paragraph</p>

HTML Documents = Web Pages:


HTML documents contain HTML tags and plain text.
Web browsers interpret HTML documents to display web pages.

Editing HTML:
Use a plain text editor like Notepad.
Save files with either .htm or .html extension.

Basic Document Structure


<!DOCTYPE _html_> specifies that we are working with an HTML5 document.
<html> tag – This tag acts as a container for every other element in the document except
the <!DOCTYPE _html_> tag.
<head> tag – Contains metadata such as the document's title, character encoding, and links to
external resources.
<title> tag – Defines the title of the document, displayed in the browser's title bar.
<body> tag – Contains the document's content displayed in the browser window.
Example:

<!DOCTYPE html>
<html>
<head>
<title>My HTML Cheat Sheet</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

HTML Important Tags:


1. HTML Headings:

Defined with <h1> to <h6> tags for various levels of headings.


Example:

<h1> Heading 1 </h1>


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

2. HTML Paragraphs:

Defined with <p> tag.


Example:

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

3.HTML Links:

Created with <a> tag and href attribute for the link address.
Example:

<a href="http://www.example.com">This is a link</a>


<a href="example.html">Example<a>

4. HTML Images:

Defined with <img> tag, using src for image source, height for the height of the image, width for
the width of the image, alt defines an alternate text that displays if the image cannot be rendered.
Use % for the value of width for responsive webpage.
Example:

<img src="example.jpg" alt="Description" width="100%" height="500">

5. HTML Comments:

Ignored by the browser, useful for adding notes.


Example:
<!-- This is a comment -->

6. HTML Text Formatting:

Use tags like <b> for bold, <i> for italic, <u> for underline, etc.
Example:

<b>Bold Text</b>
<i>Italic Text</i>
<u>Underline text</u>
H<sub>2</sub>0
2<sup>2</sup>

7. HTML Styles - CSS:

CSS is used to style HTML elements.


Example:

<h1 style="color: blue; background-color: red; text-align: center; font-family:


Cursive;">Styled Heading</h1>

Or, we can use <Style> tag inside the <head> tag to use CSS elements.
Example:

<head>
<title>New Tab</title>
<head>
<title>Document</title>
<style>
body{
background-color: orange;
}
h1{
color: royalblue;
text-align: center;
font-family: Ink Free;
font-size: 100px;
font-style: italic;
border: 5px solid red;
}
</style>
</head>

Use <tag class="class_name"> for different styles for the same type of tags.
Use <span class="class_name"> for individual words.
For the <style> tag use .class_name{} .
Example:
<!DOCTYPE html>
<html>
<head>
<title>India</title>
<style>
body{
background-color: black;
color: white;
}
.heading_1{
font-family: cooper;
font-size: 500%;
text-align: center;
}
.a{color: orange;}
.b{color: white;}
.c{color: green;}
.heading_2{
color: blue;
}
</style>
</head>
<body>
<h1 class="heading_1">
<span class="a">I</span> <span class="b">LOVE</span> <span class="c">INDIA</span>
</h1>
<h1 class="heading_2">This is something</h1>
</body>
</html>

8. HTML Text Alignment:

Use text-align property to align text.


Example:

<p style="text-align: center;">Center-aligned text</p>

9. HTML Lists:

Use <ul> for unordered lists and <ol> for ordered lists.
List items are defined with <li> tag.
Use start attribute to to start from a certain number.
use type attribute to change the type of ordered or unordered lists.
Type for <ul> are: "circle" , "square" , "none"
Type for <ol> are: "a" , "A" , "i" , "I"
Example:

<!-- Unordered list -->


<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript</li>
</ul>

<!-- Ordered list -->


<ol start="3">
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ol>

<!-- nested lists -->


<ul type="square">
<li>
Fruits
<ol type="a">
<li>Orange</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</li>
<li>
Flowers
<ol type="i">
<li>Rose</li>
<li>Lotus</li>
<li>Daffodils</li>
</ol>
</li>
</ul>

10. HTML Tables:

Tables are created with <table> tag.


Rows are defined with <tr> tag and cells with <td> tag.
Example:

<table>
<tr>
<th> Course </th>
<th> Progress </th>
</tr>
<tr>
<td> HTML </td>
<td> 90% </td>
</tr>
<tr>
<td> CSS </td>
<td> 80% </td>
</tr>
<tr>
<td> JavaScript </td>
<td> 95% </td>
</tr>
</table>
Use CSS Style tag to give border to the table
Example:

<style>
table,th,td{
border: 1px solid lime;
}
</style>

colspan and rowspan Attributes:


colspan defines the number of columns a cell should span.
rowspan defines the number of rows a cell should span.
Example:

<table border="1">
<tr>
<td colspan="2">Header Cell Spanning Two Columns</td>
</tr>
<tr>
<td rowspan="2">Cell Spanning Two Rows</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
</table>

In this example, the first cell spans two columns horizontally, and the second cell spans two rows
vertically.

11. HTML Forms:

Use <form> tag to create a form.


Input fields are defined with <input> tag.
Example:

<form>
<label>Student Name</label>
<input type="text"><hr>

<input type="text"><hr>

<label>Date of Birth</label>
<input type="date"><hr>
<label>Time of Birth</label>
<input type="time"><hr>

<label>Gender</label>
<label>Male</label>
<input type="radio" name="gender">
<label>Female</label>
<input type="radio" name="gender"><hr>
<label>Apoinment type</label><br>
<input type="checkbox">

<input type="file">

<input type="button" value="Submit">


</form>

12. marquee Tag:

Used to create a scrolling or moving text or image effect horizontally or vertically.


Commonly used for displaying ticker-like content.
Example:

<marquee direction="right">
<img src="1.jpg" width="400px" />
<img src="2.jpg" width="400px" />
<img src="3.jpg" width="400px" />
</marquee>

<marquee>This text will scroll from right to left</marquee>


<marquee direction="up">This text will scroll from bottom to top</marquee>
```

Attributes like behavior , direction , scrollamount , and loop can be used to customize the
scrolling behavior.

You might also like