Coding In HTML
This is an article on coding in HTML, and it will only cover the basics. If you want to do advanced HTML, you will likely want to learn another coding language (etc. PHP or VUE).
Development Environment
For coding, it will be much easier with a proper text editor, such as OSS - Visual Studio Code, it can be found on the windows chocolatey installer at this link, if you already own chocolatey, just run >choco install vscode on an administrator command prompt.
Next you will want to create a development folder, let's put it in documents and name it dev, then we will create a folder inside and call it HTML. After you have created the folder, you can open that folder in code, and create a folder called helloworld.html, or create a HelloWorld folder and put an index.html inside. For example, to get This website, you would need to put the HTML that you see when you press CTRL-U on that site.
After you have created or copied the index.html from somewhere, you can open the HTML in chrome or firefox to see your site.
A basic starter site would look like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>[INSERT TITLE HERE]</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js">
<div>
<h1>[INSERT HEADING 1 HERE]</h1>
<p>[INSERT PARAGRAPH HERE]</p>
</div>
</body>
</html>
Now that you have done your starter site, you
can also change many things, for example, you
can have different headers, and to divide
different sections, you can use a
<div></div>As you can see above,
this will give you a site called [INSERT TITLE
HERE] with [INSERT HEADING 1 HERE] as a
heading and [INSERT PARAGRAPH HERE] as a
paragraph.
Learning HTML
With HTML, the code structure is blocks that contain text, a template block would look like:
<[name of block type] [variables, e.g. class="[block classes here]"]>[data and other blocks here]</[name of block type]>
The name of the block type could be a defining one, such as:
<em>emphasised text will be here</em>
or it could be a dividing one, such as:
<div>other blocks here</div>
or it could be a data block, such as:
<span>span of text here</span>
And it could even be an image!
<img src="img-name.jpg" alt="img alt text" width="width in px" height="height in px">
Experiment with the different classes, a simple google search will show up with a List of HTML Tags (Block Types), I challenge you to make a simple site with some general stuff, I recommend using the bulma template linked in the links section.
Links
Programs - Chocolatey: Vscode
Bulma - Sites: Bulma Template, Bulma
HTML - Sites: List of HTML Tags