HTML

Core Code







Visual Studio Code



Application used to make these websites, here's a download link:
https://code.visualstudio.com/


HTML:5


The main "language" websites are written in.



In Visual Studio Code (VSC), typing "html" in a .html file will open a prompt, pressing tab will autofill in the HTML:5 header.


Visual Studio Code


A separate .css file must be linked to a .html file to have an effect.



<link rel="stylesheet" href="../filename.css"> or
<link rel="stylesheet" href="../CSS/filename.css"> if you have a CSS Folder.

The "../" is the command to request access to a different file than the current one.

The "../CSS/" is the command to show that the requested file is in a different folder than the current file this code is written in.


<Tags>


Tags are the building blocks of HTML, each tag has its uses and formats that help structure websites.
they are written as <tag>Content</tag>, the "/" indicating the end of the tag.



<h#> or Header Tags vary from size 1 (largest) to 6 (smallest). </h#>

<p> are simple Paragraph tags. </p>

<ol> is an Ordered (numbered) List when combined with <li> tags inside of it. </ol>

<ul> is an Unordered (symbols) List when combined with <li> tags inside of it. </ul>


<head> Always the first tag in an HTML:5 document, this is where you link CSS and Bootstrap, and input a page Title. </head>

<body> Where everything else goes, making up the entirety of the web page. </body>

<div> Used to isolate parts of HTML for CSS, giving a class to a Div affects all tags inside that Div. </div>

<span> Used to further isolate Elements inside of Divs, putting this around an element can change how it appears </span>

<hr> does not have an End Tag, it works like pressing Enter in Word, but places a line in the gap.

<br> does not have an End Tag, works like pressing Enter in Word.

<img src="../nameOfImage.jpg" alt="Text if image doesn't load">

<a href="url to other website or link to other page"> The space between the Start and End tag can be text, Elements, or other Tags, making them able to be clicked on to activate the link. </a>


<>Elements<>


Elements are what is written inside of <Tags>.



Example code from Containers and Dividers
The Pale Blue, Pink and Green text in the image above are Elements, the Dark Blue is <Tags>, and the Yellow represents Attributes.


<attribute="x">


Attributes, like Classes and IDs, are included inside of a Tag in order to affect it with CSS.



<p class="topic"> is an Attribute used for this page to increase the Paragraph (p) font-size to 200%. </p>
Example Code for attribute
This is the CSS used to affect the class.