HTML Tutorial

#2 - Getting started

Alright. So, ahead of this part of the amazing HTML Tutorial by the Gradient Man, code is formatted like this:

<!-- weiner -->

Note, that the code does absolutely nothing if you place it on an HTML file, because it's a code comment

Alright! Time to install your text/code editor. Done? You can proceed. No? You must install a text editor, preferably a code editor like Notepad++. Or just use Neocities, I dunno.

Anyways, if you started out on Neocities, your site will have an index.html file with the similiar preset:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The web site of you</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<h1>Welcome to my Website!</h1>

<p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>

<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>

<p>Here's how you can add an image:</p>
<img src="/neocities.png">

<p>Here's how to make a list:</p>

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

<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
</body>
</html>

That's what I call, as written above, abominatic HTML

If you started out on PC, create an index.html file on your folder

Now, paste in my preset:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>HTML Tutorial by the Gradient Man (rael!!1!)</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- We'll make something later in here... -->
</body>
</html>

Notice the

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

? Well, with that tag, mobile users won't be able to zoom on your site, like on GradientOS. If you want users to be able to zoom in, replace the line with the following:

        <meta name="viewport" content="width=device-width, initial-scale=1.0">