You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
7.8 KiB
HTML
165 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Ever thought of building your own website from scratch? This guide covers the basics of creating a webpage, leading on to learning more about the structure, and functionality needed to create one yourself.">
|
|
<meta name="author" content="Nathan (Aney) Steel">
|
|
<meta name="theme-color" content="white">
|
|
<meta name="theme-color" content="black">
|
|
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
<title>Your first webpage</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Your first webpage</h1>
|
|
<input id="burger-toggle" type="checkbox"/>
|
|
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
|
|
<hr/>
|
|
<nav>
|
|
<a href="/">home</a>
|
|
<a href="/about.html">about</a>
|
|
<a href="/projects.html">projects</a>
|
|
<a href="/blog/">blog</a>
|
|
<a href="/sitemap.html">misc</a>
|
|
<a href="/support.html">support</a>
|
|
</nav>
|
|
<hr/>
|
|
</header>
|
|
|
|
<main>
|
|
<section>
|
|
<p>In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend <a href="https://code.visualstudio.com/" target="_blank" rel="noopender">Visual Studio Code</a></p>
|
|
|
|
<h2>Create your html file</h2>
|
|
|
|
<p>First you need to create the file where the code will reside. For this guide (and others) I recommend making a new folder/directory to put your files in. Once you've created the new directory, make a new file inside of it, naming said file <b>index.html</b> (you may need to show filetypes to rename .txt to .html. So check here for <a href="https://support.apple.com/en-az/guide/mac-help/mchlp2304/mac" target="_blank" rel="noopener">MacOS</a>, or <a href="https://knowledge.autodesk.com/support/autocad/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-enable-hidden-file-extensions-in-Windows.html" target="_blank" rel="noopener">Windows</a>).</p>
|
|
|
|
<h2>Basic Boilerplate</h2>
|
|
|
|
<p>There are some default things that each webpage needs to be 'compliant' with the web, so I recommend starting each page in the same way.</p>
|
|
|
|
<p>Add the following code snippet into your file, and save.</p>
|
|
|
|
<pre><code><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html></pre></code>
|
|
|
|
<p>Now if you double click the file it'll open a blank page in your browser (if you've got the .html extension). That's to be expected, as there's no actual content (yet).</p>
|
|
|
|
<p>Before we do get to the content, let's break down this snippet a little. The aim is to learn, not to blindly copy/paste, right?</p>
|
|
|
|
<h3>Snippet explaination</h3>
|
|
<p><b><code><!DOCTYPE html></code></b> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.</p>
|
|
<p><b><code><html lang="en"></code></b> this element is a container for (almost) all the rest of the HTML, as it tells the browser everything inside it needs to be rendered as HTML, and which language the content is.</p>
|
|
<p><b><code><head></code></b> is a container for metadata (data about data), it gives the browser all the info it needs, to render the page how we want it. Anything between the <b>head</b> tags will not be <em>directly</em> shown on the webpage.</p>
|
|
<p><b><code><body></code></b> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.</p>
|
|
|
|
<h2>Basic Content</h2>
|
|
<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
|
|
|
|
<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
|
|
<pre><code><h1>Hi, I'm <em>Aney</em></h1>
|
|
<p>Welcome to my site, it's pretty cool!</p>
|
|
<h2>Skills</h2>
|
|
<p>I have an assortment of <em>skills</em>, including:</p>
|
|
<ul>
|
|
<li>Being swag</li>
|
|
<li>Getting the bag</li>
|
|
</ul>
|
|
<h2>Portfolio</h2>
|
|
<!-- Any image on the internet can go here -->
|
|
<img src="https://via.placeholder.com/200x200/">
|
|
<img src="https://via.placeholder.com/200x200/">
|
|
<img src="https://via.placeholder.com/200x200/"></pre></code>
|
|
|
|
<p>Now if you refresh the webpage, tada! We have content.</p>
|
|
|
|
<h2>A little styling</h2>
|
|
<p>With content on the page we're done, right? However those keen eyed of you may notice it doesn't look very good, so we'll spice that up a with some basic CSS styling.</p>
|
|
|
|
<p>Between the <b>head</b> tags, we'll add the style tag, allowing us to embed the CSS into the page.</p>
|
|
<pre><code><style>
|
|
</style></pre></code>
|
|
|
|
<h3>The CSS</h3>
|
|
<p>For the actual styling, add the following snippet between the <b>style</b> tags.</p>
|
|
<pre><code>html{
|
|
height: 100%;
|
|
font-size: 12px;
|
|
background: #67aacc;
|
|
background: linear-gradient(0, #020024 0%, #10106b 10%, #67aacc 35%, #8cecf5 60%, #fff 100%);
|
|
}
|
|
body{
|
|
margin: 0 auto;
|
|
max-width: 980px;
|
|
padding: 4px 12px;
|
|
text-align: center;
|
|
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
|
|
}
|
|
h1{
|
|
font-size: 22px;
|
|
background-color: #10106b;
|
|
color: white;
|
|
}
|
|
/* The selector below styles em, but only if it's inside a h1 */
|
|
h1 em{
|
|
color: #8cecf5;
|
|
}
|
|
h2{
|
|
font-size: 20px;
|
|
background-color: #020024;
|
|
color: white;
|
|
}
|
|
p{
|
|
font-size: 14px;
|
|
}
|
|
ul{
|
|
padding: 0;
|
|
list-style-position: inside;
|
|
list-style-type: square;
|
|
}
|
|
img{
|
|
border: 2px solid #67aacc;
|
|
border-style: dashed;
|
|
}
|
|
img:hover{
|
|
border-color: lightskyblue;
|
|
}</pre></code>
|
|
|
|
<p>Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.</p>
|
|
|
|
<h4>Customise your site</h4>
|
|
<p>I've intentionally made the styling <em>"cool"</em> and <em>experimental</em> for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.</p>
|
|
|
|
<p>If you're unsure about the #67aacc, etc. they're colours, take a quick look <a href="https://www.google.com/search?q=hex+colour+picker&rlz=1C1CHBF_enGB948GB948&oq=hex&aqs=chrome.2.69i57j0i131i433i512l2j46i433i512j0i131i433i512j69i61l3.3688j0j7&sourceid=chrome&ie=UTF-8" target="_blank" rel="noopener" >here</a>.</p>
|
|
|
|
<h2>Page title</h2>
|
|
|
|
<p>You know those titles that show at the top of your browser/in tabs? We're going to add that in.</p>
|
|
|
|
<p>Between the head tags, and above the style tag add the following.</p>
|
|
|
|
<pre><code><title>My website</title></pre></code>
|
|
|
|
<p>Reload your webpage and you should spot it. It doesn't show on the page itself, but it will show in your browser tab (hover over it if it doesn't all fit).</p>
|
|
|
|
<h2>It's done!</h2>
|
|
<p>Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my <a href="/guides/web-dev-101.html">Web Development 101</a> guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<hr/>
|
|
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|