Scribd
Upload
77 views16 pages

HTML Cheat Sheet - Scaler Topics

Uploaded by

lenkaprameela9
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
77 views16 pages

HTML Cheat Sheet - Scaler Topics

Uploaded by

lenkaprameela9
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/ 16

<img src="URL" />

<address> </address>

HTML
CHEAT SHEET

<section></section>

<td rowspan=?>
Structure

<html> </html> <head> </head>

Contains metadata about an HTML


Defines the root of an HTML document.
document, including the title and links
to external files.

<body> </body>

Contains the visible content of an HTML


document, such as text, images, and
other elements.

<head> </head>
Contains information
about the website
<html> </html>
Overall document
structure <body> </body>
Contains the display
part.

<head> Information about the website


<meta charset="utf-8">
Characters: "utf-8"
<meta name="Keywords" content = "Cheat Sheet, HTML">
Keywords: Cheat Sheet, HTML
<meta name = "author" content = "David Hill">

<meta name="Description" content = "Learn HTML">


Author: David Hill

<title>HTML Cheat Sheet</title>


Description: Learn HTML

</head>
Title: HTML Cheat Sheet

01 Cheatsheet
Layout

<header> <nav>

Defines the header section of a Defines a section of a web page that


web page or a section of a page. contains navigation links.

<section> <article>

Defines a generic section of a web page Defines an independent, self-contained


or a section of a page. content block, such as a blog post or
news article.

<aside>
<footer>

Defines a section of a web page that Defines the footer section of a web page
is separate from the main content. or a section of a page.

HTML Semantic Elements

<header>

<nav>

<header>

<article>
<section> <aside>

<header>

<article>

<footer>

02 Cheatsheet
Formatting

<p> </p> <span> </span>

Defines a small section of text within


Defines a paragraph of text.
a larger block element.

<blockquote> </blockquote> <br>

Defines a block quotation,


Defines a line break.
typically indented.

<div> </div>

Defines a division or section of a


web page.

<div>This is a div element</div>

This is a div element

<br>

Something after div element. This is a span element.


Something after span element

<span>This is a span element</span>

03 Cheatsheet
Text Tags

<pre> </pre> <h1> </h1> --> <h6> </h6>

Defines preformatted text, where Defines headings of different levels,


whitespace is preserved. from largest to smallest.

<b> </b> <i> </i>

Defines bold text. Defines italicized text.

Hello
This is Preformatted Text in different lines.
It is written exactly like this in the code.

<pre>
Hello
This is Preformatted Text in different lines.
It is written exactly like this in the code.
This is heading 1 </pre>

This is heading 2
This is heading 3 h1 to h6 tags from top to bottom

IP Programming

This is heading 5

This is heading 6

This is bold text. <b> This is bold text. </b>

This is italic text. <i> This is italic text </i>

NITI Aayogʼs goal is to “To evolve a shared vision of national development priorities with the active involvement of States.” q tag: <q> To evolve ... </q>

04 Cheatsheet
<tt> </tt> <q> </q>

Defines text in a fixed-width font. Defines a short quotation.

<code> </code>

Defines text that represents


computer code.

<cite> </cite>

Defines a citation or reference to


a work.

<address> </address>

Defines contact information for the


author or owner of a document.

<strong> </strong>

Defines text that is especially


important.

<acronym title=?> </acronym>

Defines an acronym or abbreviation,


with an optional title attribute.

05 Cheatsheet
The address of David Johnson is:
Visit:
address tag: <address>
3rd Floor, Narayan Building, Indore
Visit: ...
Follow at instagram @davidjohnson </address>
Call at: 9820382712
Official Website: www.davidjohnson.com

cite tag: <cite>Malgudi Days</cite>

The Malgudi Days was created by R. K. Narayan.

This is <acronym title=”Indian Air Force”>


This is IAF command from the South. IAF
</acronym> command from the South.
Indian Air Force

#include using namespace std; int main() { cout << "Hello World!"; return 0; }

Code tag:
<code>
#include <iostream>
using namespace std;
int main( ) {
cout <<”Hello World!”;
return 0;
}
</code>

06 Cheatsheet
Lists

<ul> </ul> <li> </li>

Defines an unordered list of items. Defines an individual list item.

<ol start=?> </ol>

Defines an ordered list of items, with


an optional starting number.

An Unordered HTML List

<li>Coffee</li> Coffee
Tea
Milk

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

An Ordered HTML List

1. Coffee <li>Coffee</li>
2. Tea
3. Milk
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

07 Cheatsheet
Graphical

<hr> <img src="URL" height=?>

Defines a thematic break or horizontal Defines an image with a specified height.


rule, typically rendered as a line across
the page.

<hr size=?> <img src="URL" width=?>

Defines the height of a horizontal rule in


Defines an image with a specified width.
pixels, relative to the default size.

<hr width=?> <img src="URL" alt=?>

Defines the width of a horizontal rule in


Defines alternate text for an image.
pixels, relative to the default size.

Text above hr tag.

height

Text below hr tag.

width

<img src= “mountains.jpg”


<img src="URL" /> width= “400px” height= “350px”>

Defines an image, with a required


source URL attribute.

08 Cheatsheet
<img src="URL" align=?>

Defines the horizontal alignment of


an image.

align= “center”
NOT SUPPORTED

<img <img
src="mountains.jpg" src="mountains.jpg"
align="left" align="right"
alt="River Scenery" alt="River Scenery"
style="width: 450px; height: 300px" style="width: 450px; height: 300px"
/> />

09 Cheatsheet
Links
<a href="#NAME">clickable text</a>

<a href="URL">clickable text</a> Defines a hyperlink that jumps to a


Defines a hyperlink to another web page specific location within a web page,
or resource, with visible clickable text. identified by an anchor name.

Yahoo <a href= “https://www.yahoo.com”>Yahoo</a>


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

Go to Section 2 <a href= “#section2”>Go to Section 2</a>

Section 1
This is Section 1. Lorem ipsum dolor sit amet consectetur adipisicing
<h1 id= “section1”>Section 1</h1>
elit. Perferendis consectetur est eveniet itaque fugiat laboriosam

repella commodi expedita quasi pariatur, libero doloremque quaerat


<p>
omnis error, sed placeat numquam, amet vel.
This is Section 1. Lorem...
</p>

points to

Section 2
This is Section 2. Lorem ipsum dolor sit amet consectetur adipisicing <h2 id= “section2”>Section 2</h2>
elit. Perferendis consectetur est eveniet itaque fugiat laboriosam

repellat commodi expedita quasi pariatur, libero doloremque quaerat <p>


omnis error, sed placeat numquam, amet vel. This is Section 2. Lorem...
</p>

10 Cheatsheet
<a href="mailto:EMAIL_ADDRESS">
clickable text</a>

Defines a hyperlink that opens the user's


email client with a pre-populated email
address.

Send email

<a href="mailto:[email protected]">Send email</a>

11 Cheatsheet
Tables

<table> </table> <th> </th>

Defines a table, which is used to Defines a header cell within a table row,
display data in rows and columns. typically used for column headings.

<tr> </tr> <td rowspan=?>

Defines a row within a table. Defines a table cell that spans the
specified number of rows.

<td> </td>
<td colspan=?>

Defines a cell within a table row. Defines a table cell that spans the
specified number of columns.

<th> Age </th>


<tr>
<td>..</td> <td colspan="2"> Name </td>
<td>..</td>
<td>..</td>
</tr>
Name Age
Jill Smith 43

Eve Jackson 57

Chris 56
Hemsworth
<td> Chris </td> Robert 45

<td rowspan="2"> Hemsworth </td>

12 Cheatsheet
Forms

<form> </form> <input type="text"


name=? size=?>
Defines a form that can be used to
collect user input. Defines a single-line text input area.

<select name=?> </select> <input type="submit" value=?>

Defines a dropdown list of options


Defines a button to submit a form.
for user selection.

<option> <input type="image" name=?


src=? alt=?>
Defines an individual option within a
<select> dropdown list. Defines an image button to submit a form.

<textarea name=? cols="x" <input type="reset">


rows="y"></textarea>
Defines a button to reset a form to
Defines a multi-line text input area. its initial values.

<input type="checkbox"
name=? value=?>

Defines a checkbox input element.

<input type="radio"
name=? value=?>

Defines a radio button input element.

13 Cheatsheet
Student Details Form

<input type="text">
Name:

Password: <input type="password">

Choose one Programming Language:


C++
<input type="radio">
Java
<select> Python
<option></option>
<option></option>
...
</select>

Choose: Web Development

<input type="file"> Submit your resume: Choose File No file chosen

Any comments..
<textarea rows="10"
cols="30">
Any comments..
</textarea>

<input type="checkbox"> I agree to the Terms and Conditions

Submit <input type="submit">

14 Cheatsheet

You might also like