[go: up one dir, main page]
Scribd
Upload
10 views10 pages

HTML Cheetsheet

This document serves as a cheat sheet for web development, covering essential HTML and CSS elements with descriptions and examples. It includes tags for structuring documents, creating links, embedding images, and styling content. The document is designed to provide a quick reference for developers learning the basics of web development.

Uploaded by

hhhrrruu053
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 views10 pages

HTML Cheetsheet

This document serves as a cheat sheet for web development, covering essential HTML and CSS elements with descriptions and examples. It includes tags for structuring documents, creating links, embedding images, and styling content. The document is designed to provide a quick reference for developers learning the basics of web development.

Uploaded by

hhhrrruu053
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/ 10

Cheat Sheet: Introduction to Web Development with HTML, CSS, JavaScript

Estimated reading time: 20 minutes

HTML

Element Description Example

This tag denotes a comment


in HTML, which is not <!-- This is a comment
<!-- --> displayed by a browser but -->
can be useful to hide and
document code.
<!DOCTYPE html>
All HTML documents must <html>
<head>
start with this declaration. It <!-- Metadata Here -->
tells the browser what </head>
<!DOCTYPE html> <body>
document type to expect.
<!-- Document Body Here -->
Note that this element has
</body>
no ending tag. </html>

This tag, called an "anchor


tag" creates hyperlinks
<a
using the href attribute. In
<a href= "path">link name</a> href="https://www.ibm.com">IBM</a>
place of path enter the URL
or path name to the page
you want to link to.

<!DOCTYPE html>
Contains the contents of the <html>
<head>
HTML document. It should <!-- Metadata Here -->
contain all other tags </head>
<body> <body>
besides the <head> element
<!-- Document Body Here -->
to display the body of the
</body>
document. </html>

Often used to separate <div>


sections in the body of a This element has no particular semantic meaning but is often used in
<div> </div>
document in order to style
that content with CSS.

Adds a level 1 heading to <h1>Thomas J. Watson</h1>


<h1>
the HTML document.
<!DOCTYPE html>
<html>
<head>
Contains metadata and <!-- Metadata Here -->
should be placed after the </head>
<head> <body>
<html> tag and before the
<!-- Document Body Here -->
<body> tag. </body>
</html>

<!DOCTYPE html>
<html>
<head>
The root element of an <!-- Metadata Here -->
HTML document. All other </head>
<html> <body>
tags in the document should
<!-- Document Body Here -->
be contained in this tag.
</body>
</html>

This tag is used to place an


img. In place of path insert
a URL or a relative file path <img
<img src="path" width="dim1"
to the image location. Other src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Wa
height="dim2">
optional attributes include
width and height of the
image in pixels.

<li> Element that creates <ul>


<l1>Bullet point 1<l1>
bulleted line items in an <l1>Bullet point 2<l1>
ordered or unordered list. </ul>
Should be used in
HTML
conjunction with the <ul> or
<ol> tags.

Used to link an external <head>


<link rel="stylesheet" href="styles.css">
<link> document, such as a CSS </head>
file, to an HTML document.

<head>
Used to provide metadata <meta name="author" content="Christopher Moore">
<meta> </head>
about the HTML document.

Element that creates an <ol>


ordered list using numbers. <li>Numbered bullet point 1<li>
<ol> Should be used in <li>Numbered bullet point 2<li>
conjunction with the <li> </ol>
tag.

This tag is used to identify a


paragraph. It places a line <p>This is a paragraph of text. It can be as short or as long as nee
<p>
break after the text it is
enclosed in.
<script>
Used to embed JavaScript in alert("Hello World");
<script> </script>
an HTML document.

<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
This tag is used to denote a </tr>
<tr>
table. Should be used with <td>First row first cell</td>
<tr> (defines a table row) <td>First row second cell</td>
<table> and <td> (defines a table </tr>
cell within a row) tags. The <tr>
<td>Second row first cell</td>
<th> tag can also be used to <td>Second row second cell</td>
define the table header row. </tr>
</table>

</td>

Denotes a cell within a row, <td>Cell Content</td>


<td>
within a table.

<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
Denotes the header cells <td>First row first cell</td>
<th> <td>First row second cell</td>
within a row within a table. </tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>

<!DOCTYPE html>
Defines the title of the <html>
HTML document displayed <head>
in the browser's title bar <title>Document Title</title>
</head>
<title> and tabs. It is required in all <body>
HTML documents. It should <!-- Document Body Here -->
be contained in the <head> </body>
tag. </html>
HTML
<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
Denotes a row within a
<tr> <td>First row second cell</td>
table. </tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>

Element that creates an <ul>


unordered list using bullets. <li>Bullet point 1<li>
<ul> <li>Bullet point 2<li>
Should be used in </ul>
conjunction with thetag.

CSS

Element Description Example

<!DOCTYPE html>
All HTML documents must <html>
<head>
start with this declaration. It <title>Document Title</title>
tells the browser what </head>
OCTYPE html> <body>
document type to expect.
Document body here
Note that this element has
</body>
no ending tag. </html>

This tag, called an "anchor


tag" creates hyperlinks
using the href attribute. In <a
<a href= "path"> href="https://www.ibm.com">IBM</a>
place of path enter the URL
or path name to the page
you want to link to.

Identifies a self-contained
piece of content that could <article
be distributed to other class="CSS-Style-Reference">
websites and platforms as a <h2>HTML</h2>
<p>HTML stands for Hypertext Markup Language.
<article> stand- alone unit. Similar to It is a standardized system for tagging text files to display specif
<div> tag in that it does not font, color, graphics, and hyperlinks on World Wide Web pages.</p>
render as anything special </article>
in the browser unless it is
styled with CSS.

Defines some content aside


from the content it is placed <aside>
in. Similar to <div> tag in Use the aside tag to represent a section of a page that consists
<aside> that it does not render as of content tangentially related to the content.
anything special in the </aside>
browser unless it is styled
with CSS.

<!DOCTYPE html>
Contains the contents of the <html>
<head>
HTML document. It should <title>Document Title</title>
contain all other tags </head>
<body> <body>
besides the <head> element
Document body here
to display the body of the </body>
document. </html>

Often used to separate <div>


sections in the body of a This element has no particular semantic meaning but is often used in
<div> </div>
document in order to style
that content with CSS.

<fieldset> Groups related elements in <form action= "/script.php">


<fieldset>
a form and puts a box <legend>User:</legend>
around them. <label for="fname">First name:</label>
<input type="text" id="fname"
name="fname"><br><br>
<label for="lname">Last name:</label>
HTML
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

<figure>
Used in conjunction with <img src="durham.jpg">
<figcaption> the <figure> tag to mark up <figcaption>Fig.1 - Durham, NC</figcaption>
an image. </figure>

<figure>
Used to mark up an image <img src="durham.jpg">
<figure> in conjunction with the <figcaption>Fig.1 - Durham, NC</figcaption>
<figcaption> tag. </figure>

Contains a footer of a
document and often <footer>
<p>Author: Christopher Moore</p>
contains information such
<footer> </footer>
as authoring, copyright info, <form action="/script.php">
contact info, sitemap, and
related documents.

<form action="/script.php">
<fieldset>
<legend>User:</legend>
<label for= "fname">First name:</label>
<input type="text" id="fname"
Creates an HTML form for name="fname"><br><br>
<form> <label for= "lname">Last name:</label>
user input. <input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Adds a level 1 heading to <h1>Thomas J.


<h1> Watson</h1>
the HTML document.

<!DOCTYPE html>
<html>
<head>
Contains metadata and <title>Document Title</title>
should be placed after the </head>
<head> <body>
<html> tag and before the
Document body here
<body> tag. </body>
</html>

<header>
A container for introductory <h1>Header tag example</h1>
content such as heading <p>It works as a container for introductory content such as heading
<header> <p>Author: Christopher Moore</p>
elements, logo, or authoring
</header>
information.

<!DOCTYPE html>
<html>
<head>
The root element of an <title>Document Title</title>
HTML document. All other </head>
<html> <body>
tags in the document should
Document body here
be contained in this tag.
</body>
</html>

This tag is used to place an


img. In place of path insert <img
a URL or a relative file path src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Wa
<img src="path" width="dim1"
to the image location. Other width="300"
height="dim2"> height="300">
optional attributes include
width and height of the
image in pixels.

<input type="?"> Specifies an input field on a <form action="/script.php">


<fieldset>
form with the type <legend>User:</legend>
attribute. Common input <label for="fname">First name:</label>
types include: "color," <input type="text" id="fname"
"date," "datetime-local," name="fname"><br><br>
<label for="lname">Last name:</label>
"email," "number," "range," <input type="text" id="lname"
"search," "url," "tel," name="lname"><br><br>
<input type="submit" value="Submit">
</fieldset>
HTML
"datalist," "select," "text," </form>
"option," and "placeholder."

Element that creates


bulleted line items in an <ul>
<li>Bullet point 1</li>
ordered or unordered list.
<li> <li>Bullet point 2</li>
Should be used in </ul>
conjunction with the <ul> or
<ol> tags.
<head>
Used to link a CSS document <link rel="stylesheet" href="styles.css">
<link> </head>
to an HTML document.

<head>
Used to provide metadata <meta name="author" content="Christopher Moore">
<meta> </head>
about the HTML document.

<nav>
<a href="home.html">Home</a>
Used to define a set of <a href="page1.html">Page 1</a>
<nav> <a href="page2.html">Page 2</a>
navigational elements.
</nav>

Element that creates an <ol>


ordered list using numbers. <li>Numbered bullet point 1</li>
<ol> Should be used in <li>Numbered bullet point 2</li>
conjunction with the <li> </ol>
tag.

This tag is used to identify a <p>Thomas J. Watson, Sr. is the American


industrialist, who built the International Business
paragraph. It places a line
<p> Machines Corporation (IBM) into the largest
break after the text it is manufacturer of electric typewriters and data processing equipment i
enclosed in.

<script>
Used to embed Javascript in alert("Hello World");
<script> </script>
an HTML document.

<section>
Defines an important <h2>Introduction</h2>
section of a document. Can <p>This document provides some examples of how to
<section> use a variety of HTML elements</p>
be used within headers and
</section>
footers as well.

<head>
<style>
p {color:red}
</style>
Used to apply simple CSS to </head>
<style> <body>
an HTML document.
<p>This paragraph will be red because I've styled
the paragraph tag with CSS.</p>
</body>

<table>
<tr>
<th>Header cell 1</th>
This tag is used to denote a <th>Header cell 2</th></tr>
table. Should be used with <tr>
<tr> (defines a table row) <td>First row first cell</td>
<td>First row second cell</td>
<table> and <td> (defines a table </tr>
cell within a row) tags. The <tr>
<th> tag can also be used to <td>Second row first cell</td>
define the table header row. <td>Second row second cell</td>
</tr>
</table>
HTML
<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
Denotes a cell within a row,
<td> <td>First row second cell</td>
within a table. </tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>

<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
Denotes the header cells
<th> <td>First row second cell</td>
within a row within a table. </tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>

<!DOCTYPE html>
Defines the title of the <html>
HTML document displayed <head>
in the browser's title bar <title>Document Title</title>
</head>
<title> and tabs. It is required in all <body>
HTML documents. It should Document body here
be contained in the <head> </body>
tag. </html>

<table>
<tr>
<th>Header cell 1</th>
<th>Header cell 2</th>
</tr>
<tr>
<td>First row first cell</td>
Denotes a row within a
<tr> <td>First row second cell</td>
table. </tr>
<tr>
<td>Second row first cell</td>
<td>Second row second cell</td>
</tr>
</table>

Element that creates an <ul>


unordered list using bullets. <li>Bullet point 1</li>
<ul> Should be used in <li>Bullet point 2</li>
conjunction with the <li> </ul>
tag.

JAVASCRIPT

Element Description Example


//Creates the element <p> and text "Hello World". Appends Hello Worl
<head>
An HTML DOM method that <script>
after creating an element, function addPara() {
var newPara = document.createElement("p");
you can use this function to var newText = document.createTextNode("Hello World!");
place the element in the newPara.appendChild(newText);
Child() document.body.appendChild(newPara);
appropriate location within
}
the document. The element </script>
to append is the only </head>
parameter. <body onload="addPara()">
</body>

Arrays Created by declaring the const Beatles = ["Ringo", "Paul", "George", "John"];
//Here Beatles[0] is "Ringo".
array elements in [ ]. An
array can be assigned to a
variable, usually using the
keyword const or var.
Arrays use zero based
HTML
indexing to access their
elements.

Constructor is new
Date([optional parameters]).
//create a new date from a string
If the constructor is var newDate = new Date("2021-1-17 13:15:30");
declared with no
Date() parameters, it returns //create a new date instance representing 17 Jan 2021 00:00:00
current local date and time. //note that the month number is zero-based
var newDate = new Date(2021, 0, 17);
New dates can be created by
passing parameters to new
Date function.
//Creates the element <p> and text "Hello World". Appends Hello Worl
<head>
Takes one tag name
<script>
parameter and creates an function addPara() {
element with that name. var newPara = document.createElement("p");
Can place the element var newText = document.createTextNode("Hello World!");
newPara.appendChild(newText);
document.createElement() elsewhere on the page using document.body.appendChild(newPara);
functions like }
insertBefore(), </script>
appendChild(), </head>
<body onload="addPara()">
replaceChild(). </body>

//Creates the element <p> and text "Hello World". Appends Hello Worl
<head>
<script>
function addPara() {
var newPara = document.createElement("p");
Takes a string as input text var newText = document.createTextNode("Hello World!");
newPara.appendChild(newText);
document.createTextNode() and returns a text node document.body.appendChild(newPara);
with the input text. }
</script>
</head>
<body onload="addPara()">
</body>

//Changes the content of the div to "Hello World!"


<div id="div1">
<p>Hello</p>
A method of the DOM that <p>Hello</p>
takes an ID value parameter </div>
document.getElementByID()
and returns an element that <script>
matches the id. document.getElementById("div1").innerHTML = "<p>Hello
World!</p>";
</script>

A method of the DOM that


takes a tag name parameter
//Gets an array of all elements in a document with the <p> tag.
and returns an array called
document.getElementsByTagName() var tagNameArray = document.getElementsByTagName("p");
"NodeList" that contains
elements with the specified
tag name.

Writes HTML or JavaScript


to a document. Note that it
//Writes "Hello World" to the output stream.
overwrites any other text in
document.write() document.write("Hello World");
the document so is mostly
used for testing purposes
only.

Returns the value of the //Removes the CSS style color blue
specified attribute. Takes <div id="div1" style="color: blue"></div>
<script>
element.getAttribute() one parameter: the attribute var div1 = document.getelementById("div1").getAttribute("style");
name whose value is to be </script>
returned.
//Changes the content of the div to "Hello
World!"
<div id="div1">
<p>Hello</p>
A property of the Element <p>Hello</p>
class that returns or alters </div>
element.innerHTML()
contents of an HTML
<script>
element as a text string.
document.getElementById("div1").innerHTML = "<p>Hello
World!</p>";
</script>
HTML

A property of the Element


class that removes all //Removes the CSS style color blue
previously set inline CSS <div id="div1" style="color: blue"></div>
<script>
element.removeAttribute() styles for a particular var div1 = document.getelementById("div1").getAttribute("style");
element. Takes one </script>
parameter: the attribute
name that is being removed.

A property of the Element


class that overwrites all
previously set inline CSS
styles for a particular //In all elements named "theImage" sets the name of all src attribut
element.setAttribute() element. Takes two document.getElementById("theImage").setAttribute("src", "another.gif
parameters: the attribute
name that is being set and
the attribute value the
attribute is set to.
//Changes the CSS style color from blue to red
A property of the Element <div id="div1" style="color: blue"></div>
class that returns or alters <script>
element.style() inline CSS. Syntax is var div1 = document.getelementById("div1");
element.style.propertyName div1.style.color = "red";
</script>
= value

Instance creates two


properties about the error:
message that contains
description of the error and
the name property
//Catch statement defines a block of code to be executed if an error
identifies the type of error. catch (err) {
Generic error plus 6 other document.getElementById("myfile").innerHTML = err.name;
Error Objects core errors: TypeError, }
RangeError, URIError, //Creates custom error message
throw new Error("Only values 1-10 are permitted");
EvalError, ReferenceError,
SyntaxError.
Error object can be
extended to create custom
error messages using the
throw keyword.

The history object is part of


the window object and
contains the URLs visited by
the user within a browser
window. It exposes useful //Go back two pages if the history exists in the history list.
History Objects methods and properties that history.go(-2);
let you navigate back and
forth through the user's
history and manipulate the
contents of the history
stack.

An HTML DOM method that,


after creating an element,
places a child element in the
//Creates a new <li> element and places it in the elementList before
appropriate location before let newLI = document.createElement("li");
an existing child. The newLI.innerText = "new Element";
insertBefore() let elementList = document.getElementById("thisList");
method takes two
elementList.insertBefore(newLI, elementList.childNodes[0]);
parameters, the node object
to be inserted and the
existing node to insert
before.

The location object is part of //Returns the hostname property


the window object and let myhost = location.hostname;
Location Objects newLI.innerText = "new Element";
contains information about
the current URL.

Navigator Objects The navigator object is part //Retrieves the name of the browser
var browsername = navigator.appName;
of the window object class
in the DOM that represents
the client Internet browser,
also called the user agent.
There is no standard for this
object so what it returns
HTML
differs from browser to
browser.

A DOM event that starts a //Executes myFunction after MyHTMLPage has been loaded
onload() method when a page is document.getElementById("MyHTMLPage").onload = function () {myFuncti
loaded.
//Creates a new node and replaces the second element in "thisList" w
After creating an element, let secondBullet = document.createTextNode("blue");
replaceChild() this function replaces a var myList = document.getElementById("thisList").childNodes[1];
child node with a new node. myList.replaceChild(secondBullet, myList.childNodes[1]);

The screen object is part of


the window object class in //Returns the height and width of the user's screen
var height=screen.height;
Screen Objects the DOM that can be used to var width=screen.width;
return properties about the
user's screen.

The DOM window object is


at the top of the DOM
hierarchy and serves as the
//Opens a new browser window with the specified URL
global object. Everything in
Window Objects window.open("http://www.w3schools.com");
the DOM takes place in a
window. The window object
controls the environment
that contains the document.

Opens a new window. The


first parameter is a path, a
URL, or an empty string,
and optional parameters
include the window name,
features such as the
placement of the window or
the dimensions, and a
Boolean replace value. The //Opens a new window that opens the IBM home page and has a width of
feature parameter is a let thisWindow = window.open("http://www.ibm.com", "myWindow",
window.open() "width"=600, "height"=800);
comma separated string of
name-value pairs and the
replace parameter is an
optional Boolean. This
parameter has been
deprecated so modern
browsers may not support
it. This method returns a
reference to the new
window object.

Scrolls to a particular place


in a window. Parameters //Scrolls the window to the pixel located at
include the x-coordinate the coordinate (20, 200)
window.scrollTo() window.scrollTo(20, 200);
which is the left-most pixel
and the y-coordinate which
is the upper-most pixel.

Primitive types can be


converted to objects using //Enables the use of properties and methods of the String class such
let n = new String ("abc");
wrapper objects. They are
the same name as the //Returns string
Wrapper Objects primitive except they start typeof "abc";
with uppercase letter. The
//Returns object
typeof keyword returns a typeof new String("abc");
string indicating the data
type of the operand.

You might also like