Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript
HTML

Getting Started

CSS in HTML

<style type="text/css">
 h1 {
 color: purple;
 }
</style>

#External stylesheet

<head>
...
<link rel="stylesheet" href="style.css"/>
</head>

JavaScript in HTML

<script type="text/javascript">
 let text = "Hello QuickRef.ME";
 alert(text);
</script>

#External JavaScript

<body>
    ...

    <script src="app.js"></script>
</body>

Inline Frame

<iframe title="New York"
 width="342"
 height="306"
 id="gmap\_canvas"
 src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
 scrolling="no">
</iframe>

#↓ Preview

See: The Inline Frame element

Section Divisions
<div></div> Division or Section of Page Content
<span></span> Section of text within other content
<p></p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
These are the tags used to divide your page up into sections

Headings

<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>

You should only have one h1 on your page

Text Formatting Tags

<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>This text is emphasized</em>
<u>Underline Text</u>
<pre>Pre-formatted Text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Highlighted text (HTML5)</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub>Makes text subscripted</sub>
<small>Makes text smaller</small>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>

Image Tag

<img loading="lazy" src="https://xxx.png" alt="Describe image here" width="400" height="400">
src Required, Image location *(URL
alt Describe of the image
width Width of the image
height Height of the image
loading How the browser should load
See: The Image Embed element

HTML link

<a href="https://quickref.me">QuickRef</a>
<a href="mailto:[[email&nbsp;protected]](/cdn-cgi/l/email-protection)">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
href The URL that the hyperlink points to
rel Relationship of the linked URL
target Link target location: _self, _blank, _top, _parent
See: The Attributes

Paragraph

<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>

See: The Paragraph element

Comment

<!-- this is a comment -->
<!--
 Or you can comment out a
 large number of lines.
-->

hello.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>HTML5 Boilerplate</title>
</head>
<body>
    <h1>Hello world, hello QuickRef.ME!</h1>
</body>
</html>

Or try it out in the jsfiddle

Comments
Related