Scribd
Upload
10 views15 pages

Sheet HTML

This document is an HTML cheat sheet that covers the basics of HTML tags, elements, and attributes, providing examples for web development. It includes information on document structure, text formatting, images, links, lists, forms, tables, and new HTML5 tags. The cheat sheet serves as a reference guide for both beginners and experienced developers.

Uploaded by

Phospha nine
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
10 views15 pages

Sheet HTML

This document is an HTML cheat sheet that covers the basics of HTML tags, elements, and attributes, providing examples for web development. It includes information on document structure, text formatting, images, links, lists, forms, tables, and new HTML5 tags. The cheat sheet serves as a reference guide for both beginners and experienced developers.

Uploaded by

Phospha nine
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/ 15

Google Developer Students Clubs

Lakshmi Narain College Of Technology Excellence

HTML
CHEAT SHEET

Chalo Seekhte Hai !


In this Cheatsheet, we will cover the basics of HTML tags, elements,
and attributes. We will provide examples to help you understand
how these elements work and how to use them in your own web
development projects. Whether you are a beginner or an
experienced developer, this PDF can serve as a useful reference
guide.

HTML
HTML (Hypertext Markup Language) is a standard markup
language used to create web pages. It is used to structure and
format content on the web, including text, images, and other
multimedia elements. HTML consists of a series of elements that
are represented by tags, which are used to define the structure
and content of a webpage.
HTML is an essential part of the web development process and is
used to create the structure and content of websites. It is a
fundamental skill for web developers and is used to create the
majority of websites on the internet.

HTML COMPONENTS
• <html> tag: This tag acts as a container for every other
element in the document except the <!DOCTYPE html> tag.
• <head> tag: Includes all the document's metadata.
• <title> tag: Defines the title of the document which is
displayed in the browser's title bar.
• <body> tag: Acts as a container for the document's content
that gets displayed on the browser.

2 | Page
This is how it all comes together:

<!DOCTYPE html>
<html lang="en">
<head>
<title> GDSC HTML Cheat Sheet </title>
</head>
<body> .... </body>
</html>

<!DOCTYPE html> specifies that we are working with an HTML5


document.

The following tags contribute extra information to the HTML


document:

• <meta> tag: This tag can be used to define additional


information about the webpage.

• <link> tag: Used to link the document to an external resource.

• <style> tag: Used for defining styles for the document.

• <script> tag: Used to write code snippets (usually JavaScript)


or to link the document to an external script.

3 | Page
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>GDSC HTML Cheat Sheet</title>

<style>
*{
font-size: 40px;
}
</style>

<script>
alert ('message');
</script>

</head>

STRUCTURE OF A HTML DOCUMENT


While constructing your HTML document, you can use certain
tags to establish its structure. The <h1> to <h6> tags signify
different heading levels, with <h1> being the highest level and
<h6> being the lowest level.

<h1> GDSC </h1>


<h2> GDSC </h2>
<h3> GDSC </h3>
<h4> GDSC </h4>
<h5> GDSC </h5>
<h6> GDSC </h6>

4 | Page
You use the <p> tag to create a paragraph.

<p> This is a paragraph </p>

The <div> tag can be employed to segment and style different


areas of the document. It also acts as a parent container for
other elements within the document.

This is how it works:

<div class="About Us">


<h1> This is the About Us section </h1>
<p> Welcome to the About Us section! </p>
</div>
<div class="Contact Us">
<h1> This is the Contact Us section </h1>
<p> Contact us on 0123456789 </p>
</div>

We also have the <span> tag. This is similar to <div> but you use
it as an inline container.

<p> Hello <span class="span1"> World! </span></p>

5 | Page
There's the <br/> tag, which we use to insert line breaks in the
document. This tag does not require a closing tag.

<p> Welcome to <br/> GDSC LNCTE</p>

The <hr/> tag is used to create a horizontal line. It also has no


closing tag.

<p> Welcome to <hr/> GDSC LNCTE </p>

IMAGES IN HTML
In HTML, we use the <img/> tag to insert images into the
document.

Here are some attributes of the <img/> tag.

• src is used to specify the location of the image on your


computer or the internet.
• alt specifies alternative text that displays if the image
cannot be rendered. This text is also helpful for screen
readers.
• height determines the height of the image.
• width determines the width of the image.

6 | Page
• border specifies the thickness of the borders around the
image. If no border is added, it is set to 0.

<img src="logo.png" alt="GDSC LNCTE Logo" width="200" height="200">

TEXT FORMATING IN HTML


HTML provides multiple methods for formatting text. Let's
take a brief look at them now:

• The <i> tag formats text in italics.


• The <b> tag formats text in bold.
• The <strong> tag also formats text in bold and is used to
emphasize important information.
• The <em> tag is another emphasis tag that formats text in
italics.
• The <sub> tag formats text as subscript, like Carbon Dioxide
CO2.
• The <sup> tag formats text as a superscript, like the power
of a number, 23².
• The <small> tag decreases the size of text.
• The <del> tag formats text as deleted by striking a line
through it.
• The <address> tag is used to show the author's contact
information.
• The <abbr> tag denotes an abbreviation.
• The <code> tag formats text as code snippets.
• The <mark> tag highlights text.
• The <ins> tag formats text as inserted, which is usually
underlined.

7 | Page
• The <blockquote> tag is used to enclose a section of text
quoted from another source.
• The <q> tag is used for shorter inline quotes.

• The <cite> tag is used to cite the author of a quote.

<p><i> Italic </i></p>


<p><b> Bold </b></p>
<p><strong> Strong </strong></p>
<p><em> Strong </em></p>
<p><sub> Subscript </sub></p>
<p><sup> Superscript </sup></p>
<p><small> Small </small></p>
<p><del> Delete </del></p>
<p><address> Address </address></p>
<p><abbr> Inserted Abbreviation </abbr></p>
<p><code> Code Snippet </code></p>
<p><mark> Marked Text </mark></p>
<p><ins> Insert </ins></p>
<p><blockquote> Quoted </blockquote></p>
<p><q> Short Quoted </q></p>
<p><cite> Cited </cite></p>

LINKS IN HTML
The <a> tag, also referred to as the anchor tag, is used to
establish hyperlinks that link to other pages (external web pages
included) or to a particular section within the same page.

Here are some attributes of the <a> tag:

8 | Page
• The href attribute specifies the URL that the link will take the
user to when clicked.
• The download attribute specifies that the target or resource
clicked is a downloadable file.
• The target attribute specifies where the linked document or

resource should be opened. This could be in the same


window or a new window.

<a href="https://www.Google.com/" target="_blank"> GDSC LNCTE </a>

LISTS IN HTML
• The <ol> tag defines an ordered list.
• The <ul> tag defines an unordered list.
• The <li> tag is used to create items in the list.

<!-- Unordered List -->


<ul>
<li> Course 1</li>
<li> Course 2 </li>
<li> Course 3</li>
</ul>

<!-- Ordered List -->


<ol>
<li> Course 1 </li>
<li> Course 2 </li>
<li> Course 3 </li>
</ol>

9 | Page
FORMS IN HTML
The <form> element is used to create a form in HTML. Forms are
used to gather user input.

Some attributes associated with the <form> element include:

• The action attribute specifies where the form data should be


sent when the form is submitted.
• The target attribute specifies where to display the form's
response.
• The autocomplete attribute can have a value of on or off
and determines whether the browser should automatically
fill in the form.
• The novalidate attribute specifies that the form should not
be validated.
• The method attribute specifies the HTTP method to use
when sending form data.
• The name attribute specifies the name of the form.
• The required attribute specifies that an input element
cannot be left blank.
• The autofocus attribute gives focus to the input elements
when the page loads.
• The disabled attribute disables an input element, preventing
the user from interacting with it.
• The placeholder attribute is used to provide a hint to the
user about what information is required for the input
element.

10 | Page
Other input elements that can be used in forms include:

• <textarea>: allows users to enter multiple lines of text as


input.
• <select>: provides a list of options for users to choose from.
• <option>: creates a single option within a <select> element.
• <input>: provides an input field for users to enter data. The
type attribute specifies the type of data that can be entered.
• <button>: creates a button that can be clicked to perform an
action.

<form action="/Submit_URL/" method="post">


<label for="FirstName"> First Name: </label>
<input type="text"
name="FirstName"
placeholder="First Name"
required >

<label for="LastName"> Last Name: </label>


<input type="text"
name="LastName"
placeholder="Last Name"
required >
<label for="add"> Address: </label>
<textarea name="add"></textarea>
<label for="age"> Age: </label>
<select id="age">
<option value="11-20">11-20</option>
<option value="21-30">21-30</option>
<option value="31-40">31-40</option>
<option value="41-40">41-50</option>
</select>
<input type="submit" value="Submit">
</form>

11 | Page
TABLES IN HTML
The <table> tag defines a HTML table.

• <thead>: defines the header information for each column in


the table.
• <tbody>: defines the body or content of the table.
• <tfoot>: defines the footer information of the table. <tr>:
represents a row in the table.
• <td>: represents a single cell in the table.
• <th>: represents the heading for a column of values in the
table.

<table>
<thead>
<tr>
<th> Name </th>
<th> CGPA </th>
</tr>
</thead>
<tbody>
<tr>
<td> Koushik Sadhu </td>
<td> 9.66 </td>
</tr>
<tr>
<td> Pranay Gupta </td>
<td> 9.72 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Nidhi Gupta </td>
<td> 10 </td>
</tr>
</tfoot>
</table>

12 | Page
TAGS IN HTML
The following tags were introduced in HTML5:

• <header> tag: defines the header section of a webpage.


• <footer> tag: defines the footer section of a webpage.
• <main> tag: defines the main content section of a webpage.
• <article> tag: defines a standalone section of content, such
as an article.
• <nav> tag: used to contain navigation links.
• <meter> tag: used to measure data within a given range.
• <progress> tag: used as a progress bar to indicate the
completion of a task.
• <dialog> tag: used to create a dialog box.
• <audio> tag: used to embed an audio file on a webpage.
• <video> tag: used to embed a video on a webpage.
• <section> tag: defines a section within a webpage.
• <aside> tag: often used for content placed in a sidebar.
• <time> tag: used for formatting dates and times.
• <figure> tag: used for figures such as charts.
• <figcaption> tag: provides a description for a <figure>.

13 | Page
<header>
<h1> Welcome to GDSC LNCTE ! </h1>
</header>

<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Core Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<article>
<h1> About GDSC </h1>
<p> This is all about GDSC. </p>
<aside>
<p> Join Now. </p>
</aside>
</article>

<progress min="0" max="100" value="10"> </progress>

<footer> Google Developers Students Club LNCTE </footer>

14 | Page
CHARACTER AND SYMBOLS
In HTML documents, some symbols may not be directly available
on the keyboard. However, there are several ways to include
these symbols in a document. These include using the symbol's
entity name, decimal value, or hexadecimal value.

• Copyright Symbol: &copy;


• Dollar Symbol: &dollar;
• Ampersand Symbol: &amp;
• Greater than Symbol: &gt;
• Less than Symbol: &lt;

<!DOCTYPE html>
<html lang="en">
<head>
<title> GDSC HTML Cheat Sheet </title>
</head>
<body>
<p> Copyright Symbol: &copy; </p>
<p> Dollar Symbol: &dollar; </p>
<p> Ampersand Symbol: &amp; </p>
<p> Greater than Symbol: &gt; </p>
<p> Less than Symbol: &lt; </p>
</body>
</html>

15 | Page

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy