270 lines
8.4 KiB
HTML
270 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link href="../style.css" rel="stylesheet">
|
|
<meta name="description" content="Code snippets are provided for other developers to copy and paste.">
|
|
<link rel="icon" type="image/png" href="../Book.png">
|
|
<title>Code snippets</title>
|
|
</head>
|
|
|
|
<body>
|
|
<button onclick="history.back();">Back Out</button>
|
|
|
|
<h1>HTML snippets</h1>
|
|
|
|
<table>
|
|
<tr><th><a href="#1">HTML boilerplate.</a></th></tr>
|
|
<tr><th><a href="#2">Headers.</a></th></tr>
|
|
<tr><th><a href="#3">Text.</a></th></tr>
|
|
<tr><th><a href="#4">Italics.</a></th></tr>
|
|
<tr><th><a href="#5">Bolded.</a></th></tr>
|
|
<tr><th><a href="#6">Strike-through and adding.</a></th></tr>
|
|
<tr><th><a href="#7">Subscript and superscript (higher and lower).</a></th></tr>
|
|
<tr><th><a href="#8">Acronyms (abbreviation).</a></th></tr>
|
|
<tr><th><a href="#9">Programming Look (code).</a></th></tr>
|
|
<tr><th><a href="#10">Images.</a></th></tr>
|
|
<tr><th><a href="#11">Videos.</a></th></tr>
|
|
<tr><th><a href="#12">Audio.</a></th></tr>
|
|
<tr><th><a href="#13">HyperLinks and contacts.</a></th></tr>
|
|
<tr><th><a href="#14">Advanced use of tags.</a></th></tr>
|
|
</table>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="1">HTML boilerplate.</h2>
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="description" content="Home of an independent developer. Find programming projects, games, and work experience on this website.">
|
|
|
|
<title>Sample title here!</title>
|
|
|
|
<!-- .ico is a file type for icons. Used for backwards compatibility, but one can use .gif or .png if they wish. -->
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
|
|
<!-- This links to another file for style stuff, but one can use the STYLE & /STYLE tags instead. -->
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<!-- Links to JavaScript. If you want JavaScript in HTML, use SCRIPT and /SCRIPT tags at the end of the BODY tag instead. -->
|
|
<script src="script.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Stuff at the top</h1>
|
|
</header>
|
|
|
|
<p>Stuff for the page</p>
|
|
|
|
<footer>
|
|
<p>Stuff at the bottom</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="2">Headers.</h2>
|
|
<pre>
|
|
<!-- Make sure to use headers in decending order. Makes it easy on screen readers and other coders. -->
|
|
<h1>Header here</h1>
|
|
<h2>Header here</h2>
|
|
<h3>Header here</h3>
|
|
<h4>Header here</h4>
|
|
<h5>Header here</h5>
|
|
<h6>Header here</h6>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="3">Text.</h2>
|
|
<pre>
|
|
<!-- There are multiple ways to display text. Here are a couple of ways to do it: -->
|
|
|
|
<!-- p stands for paragraph. It is the most frequently used text tag in HTML. -->
|
|
<p>Text here</p>
|
|
|
|
<!-- noscript does what it says. If scripts are disabled or unsupported, it lists whatever is in the tags -->
|
|
<noscript>Text here</noscript>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="4">Italics.</h2>
|
|
<pre>
|
|
<!-- If your text needs a little <i>slant</i> then we got you covered! These both vertually do the same thing. -->
|
|
|
|
<i>slanted text here</i>
|
|
<em>slanted text here</em>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="5">Bolded.</h2>
|
|
<pre>
|
|
<!-- To get the <b>bolded</b> look of text, just use these! -->
|
|
|
|
<strong>Bold text here</strong>
|
|
<b>Bold text here</b>
|
|
|
|
<!-- samp is a little different. It is bolded, but it uses a monospaced font instead. It replicates computer output -->
|
|
<samp>Bold monospaced text here</samp>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="6">Strike-through and adding.</h2>
|
|
<pre>
|
|
<!-- You want a line to go through text. Hey, that is what this is for! -->
|
|
|
|
<s>deleted text here</s>
|
|
<del>deleted text here</del>
|
|
<strike>deleted text here</strike>
|
|
|
|
<!-- Adding things. Enough said. -->
|
|
|
|
<ins>added text here</ins>
|
|
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="7">Subscript and superscript (higher and lower).</h2>
|
|
<pre>
|
|
<!-- Make your words <sup>higher!</sup> -->
|
|
<sup>Higher text here<sup>
|
|
|
|
<!-- Make your words <sub>lower!</sub> -->
|
|
<sub>Lower text here<sub>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2>Smaller and bigger text</h2>
|
|
<pre>
|
|
<!-- make your text <small>smaller than average</small> -->
|
|
<small>Small text</small>
|
|
|
|
<!-- Depreciated for some reason, but still: make text <big>bigger!</big> -->
|
|
<big>Big text</big>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="8">Acronyms (abbreviation).</h2>
|
|
<pre>
|
|
<!-- In case you don't want to type a very long word every time, you can use this! On hover, displays title attribute. -->
|
|
<abbr title="full acronym">Text here</abbr>
|
|
|
|
<!-- Old acronym format. Used for compatibility. -->
|
|
<acronym title="full acronym"Text here></acronym>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="9">Programming Look (code).</h2>
|
|
<pre>
|
|
<!-- Make something look like a piece of <code>code</code> (copyable too!) with this handy tag. -->
|
|
<code>code text here</code>
|
|
|
|
<!-- The pre tags are short for "pre formatted text". It is used for long forms of code (for example, this) -->
|
|
<pre>code text here</pre>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="10">Images.</h2>
|
|
<pre>
|
|
<!-- Images are frequently used on websites to make the website look good. There are many ways for a website to use an image. -->
|
|
<img src="link to where the image is located on the website." alt="Text that is displayed if the image hasn't loaded yet or failed to load." />
|
|
|
|
<!-- Old image format. Harder to use and can only do SVG, PNG and JPEG. Could be used for compatibility. -->
|
|
<image href="link to where the image is located on the website." height="number" width="number" />
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="11">Videos.</h2>
|
|
<pre>
|
|
<!-- Expensive on bandwidth, but is generally better at getting points across. Multiple sources can be put for compatibility. -->
|
|
|
|
<video controls>
|
|
<source src="reference to media.mp4" type="video/mp4" />
|
|
</video>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="12">Audio.</h2>
|
|
<pre>
|
|
<!-- Audio is used to (in neocities case) play music as a background or as ambiance. It can also serve as sound effects. -->
|
|
|
|
<audio controls src="audio source file">Text in case tags aren't supported</audio>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="13">HyperLinks and contacts.</h2>
|
|
<pre>
|
|
<!-- Hyperlinks are made to send a user to a different page of a website, to another website, to a specific file on a website, and other things! -->
|
|
<a href="FULL link here">Name here</a>
|
|
|
|
< The internet, back in the day, used E-mail and phone numbers for direct contact more often than text or social media. Here is how to replicate that! -->
|
|
<address>
|
|
<a href="mailto:Email@test.com">Text here</a>
|
|
<a href="tel:+11231231234">Text here</a>
|
|
</address>
|
|
</pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="14">Advanced use of tags.</h2>
|
|
<p>I try to make these snippets as simple as possible, but sometimes you need something MORE. Check out these resources.</p>
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Mozilla HTML developer resources</a> <br>
|
|
<a href="https://www.w3schools.com/tags/">W3schools HTML refernece</a> <br>
|
|
<a href="https://www.codecademy.com/resources/docs/html">Codecademy concepts reference</a>
|
|
|
|
<hr/>
|
|
<hr/>
|
|
|
|
<h1>CSS Snippets.</h1>
|
|
|
|
<table>
|
|
<tr><th><a href="#101">Thing 1</a></th></tr>
|
|
<tr><th><a href="#102">Thing 2</a></th></tr>
|
|
</table>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="101">Thing 1</h2>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="102">Thing 2</h2>
|
|
|
|
<hr/>
|
|
<hr/>
|
|
|
|
<h1>JavaScript Snippets.</h1>
|
|
|
|
<table>
|
|
<tr><th><a href="#201">Clock (doesn't update constantly)</a></th></tr>
|
|
<tr><th><a href="#202">Thing 2</a></th></tr>
|
|
</table>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="201">Clock (doesn't update constantly)</h2>
|
|
<pre>
|
|
<script>
|
|
const CurrentTime = new Date();
|
|
document.write("<br>" + CurrentTime);
|
|
</script></pre>
|
|
|
|
<hr/>
|
|
|
|
<h2 id="202">Thing 2</h2>
|
|
</body>
|
|
</html>
|