HTML!


contents:



basics:


structure:

back to contents

the declaration

<!DOCTYPE html> should be included as the top line of all html, to tell the browser what code to expect.

<html> </html> is placed after the declaration and is where all active html coding must lie.

<head> </head> lies at the top of the code and contains information about the web page, like the title.

<title> </title> put the title for the web page (seen in the browser tabs) here.

only content within the body tags will appear on the live webpage.

the body tags are

<body> and </body>.

Formatting:

back to contents

new line

<p>

bold

<b>bold</b>

more bold

<strong>bold</strong>

italics

<i>italics</i>

more italics

<em>italics</em>

heading

<h2>heading style 2</h2>, <h3>heading style 3</h3>

line breaks use

<br>, which doesn't need a closing tag unless you want it to be utilised by XML readers </br>

note divisions/sections of code with

<div></div>, they can be given attributes eg. <div id="introduction">, which may help with hyperlinking sections on the same page.


Links:

anchor tags are used to like pages and content.

<a> is the base anchor tag and can be seen in use with things like links eg. <a href="https://en.wikipedia.org/wiki/Rickrolling">Link text</a>

Lists:

<ul> <li>First thing</li> <li>Second thing</li> <li>Third thing</li> </ul>

  1. You put the right foot in
  2. You put the right foot out
  3. You put the right foot in
  4. And you shake it all about

<ol> <li>You put the right foot in</li> <li>You put the right foot out</li> <li>You put the right foot in</li> <li>And you shake it all about</li> </ol>


Visual Media:

back to contents

basic images

<img src="/neocities.png">

images with alt texts

A button featuring cat with a hardhat and some tools, and the words Hosted By Neocities

<img src="/neocities.png" alt="A button featuring cat with a hardhat and some tools, and the words Hosted By Neocities"/>

videos

<p><video src="https://youtu.be/GIn8_Q27WFY" width="320" height="240" controls>Video not supported</video>

"Video not supported" is included between tags in the event that the video file is unable to load.

the addition of the "controls" attribute is to include video controls alongside the media content (eg. play, pause).


Tables:

back to contents

Fucks given in the past Fucks given in the present Fucks given in the future
0 0 0
total 0

table code writes row by row!
<table> <thead> <tr> <th scope="col">Fucks given in the past</th> <th scope="col">Fucks given in the present</th> <th scope="col">Fucks given in the future</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>0</td> <td>0</td> </tr> <tfoot> <td>total</td> <td>0</td> </tfoot> </table>



Forms:

back to contents

base form code
<form action="/index.html" method="POST">base form code</form>

<form action="/index.html" method="POST"> <input type="text" name="first-text-field"> </form>
using the value="" attribute allows one to pre-fill a text field like so.

<form action="/index.html" method="POST"> <input type="text" name="first-text-field" value="already pre-filled field"> </form>
the label for="" attribute can indicate what the field input is for. the input attribute needs a corresponding id attribute.


<form action="/example.html" method="POST"> <label for="meal">What do you want to eat?</label> <br> <input type="text" name="food" id="meal"> </form>

making the input type "password" ensures that text is replaced with asterisks.

<form> <label for="user-password">Password: </label> <input type="password" id="user-password" name="user-password"> </form>