« Previous

How Did I Make this Website? Pt. 2

Originally Posted: Oct. 16, 2022

Last Edited: Oct. 15, 2022 3:56 PM EST

Code Repo: https://github.com/mrSiefen/htmlTutorials

How do I even make HTML Files?

HTML files are a form of plain text. Plain text files can be written in any text editor like notepad, NotePad++, Sublime text or my favorite VS Code. Our site will also use CSS and JS. All are human readable, and easy to organize efficiently if you think ahead. HTML (HyperText Markup Language) is the first of these three file types we should look at. HTML is a form of XML meaning it uses Tags like shown in the code snippet below

                
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Website</title>
        <link rel="stylesheet" href="./stylesheets/style.css">
        <link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="./images/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="./images/icons/favicon-16x16.png">
        <link rel="manifest" href="./images/icons/site.webmanifest">
    </head>
    <body>
        <main>
            <h1>Welcome to My Website</h1>
        </main>
        <script src="./scripts/index.js"></script>
    </body>
</html>

Let's Break it Down into Elements

Pre-Head Code:

                    
<!DOCTYPE html>

This tag let's XML know what type of XML file it is (HTML).

                    
<html lang="en">

This is our opening HTML tag. Tags usually come in pairs (not always though). The closing HTML tag will come later, but everything in the webpage is between these two tags. Lang is an attribute of the HTML tag that tells the web browser know what language the content has been written in. This is what tells Translate if text on a webpage is in another language, what language it is and then it's able to adjust accordingly.

Head Code:

                    
<head>

Head means header and its loaded before any of the main content of the webpage. The head can contain metadata, your Tab titles and more! Just like the HTML tags head tags come in pairs. Closing tag comes further down and everything in the header is between these tags.

                    
<meta charset="UTF-8">

Our first piece of Metadata! The charset value controls what set of Unicode characters to use. We are using UTF-8 which is Unicode Standard which is used on 98% of all webpages.

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

Here we are setting more metadata. First is the name attribute. Viewport is a special attribute that represents the users visible area of a web page. The content attribute controls how our content (everything in the body of the webpage) can be shown to the user. In this case we want our pages width to always match the width of the uses device. We also want to start at a scale of 1.0 (zoom level).

                    
<title>My Website</title>

Title controls what text is shown at the top of a browser or tab. This can be unique for each individual page of your website, but you don't always get much room to put lots of text. Best practice is to limit yourself to less than 70ish characters, but the max limit is 512. Most tabs, and even google search results cut off at 70. A really interesting article about title length and SEO can be found here: https://www.searchenginejournal.com/google-title-tag-length/400682/

                    
<link rel="stylesheet" href="./stylesheets/style.css">

Link elements let us add other files into our HTML. Files can be hosted on same server like in the case here with out style.css file. However you can link to external files on other websites with the href location being an actual http:// link. You can attach stylesheets or even some special images this way!

                    
<link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/icons/favicon-16x16.png">
<link rel="manifest" href="./images/icons/site.webmanifest">

Favicons are not new at all, but help set your site apart. Favicons are small icons that appear near the page title. The recommended size for a favicon is 32px by 32px. You can use jpg, png, ico and other file types for the image, but each has a different type attribute so choose accordingly. My personal recommended method is to follow the instructions at https://favicon.io/ like I did!

                    
</head>

We've made it to the closing tag of the header! Everything between these two tags will all be loaded before any content on the page. The only head element that is shown to the user is the title.

Body Code:

                    
<body>

Now we are controlling the content that will be shown on the page. Body contains everything that can be visible to the user on the page. Body is a paired tag so again we will see the closing tag later on.

                    
<main>

Main was created as part of HTML5 and lets the user specify where in the body the unique content is. Body can have stuff like titles, images, navigation bars, etc that are the same from page to page. They exist in the Body of the page, but are not the actual "content" per se. This prevents stuff like the navigation menus getting counted as content by search engines. Main is a paired tag so you'll see the closing tag later on.

                    
<h1>Welcome to My Website</h1>

Most webpages have Headings. Headings help break up the content on a page into smaller sections. Headings also come in a variety of size. h1 is the largest heading while h6 is the smallest. Headings should decrease in size throughout a section. This heading is the only visible content on our webpage!

                    
</main>

Since we have no other content for our basic webpage this marks the end of the main content. We include the closing tag. Main tags should only be used ONCE per webpage and should not include footers, navs, etc.

                    
<script src="./scripts/index.js"></script>

We can include external javascript files in our webpage. The script tags can be used to write javascript right there in your html as well. This is not usually recommended for most cases as you can easily just link external files and keep your HTML and JS separate. Our script file does nothing special right now, but its good practice when making a new page to have a JS file waiting.

                    
</body>

The closing body tag marks the end of the content on the page.

Post-Body Code:

                    
</html>

The closing html tag marks the end of the page.

So I Made a Mostly Empty Webpage, So What?

Obviously most webpages have more than just a heading, but this is a basic website broken down into little chunks. Every webpage follows this same basic format. Everything exists between tags, all visible content exists between the body tags, all header data exists between the head tags, and so on. There are tons of HTML elements you can add to your page. Images, Divs, Inputs like buttons, radio buttons, dropdown menus, sliders and more already exist as tags you can add to your pages. One great resource to learn more about all of these HTML elements is https://www.w3schools.com/html/default.asp Stay tuned for Part 3 where I go into more detail about the actual structure of one of my webpages!