We will start building our webpage with our ground skeleton: an HTML page!
HTML, short for Hypertext Markup Language, is the raw data that a webpage is built out of. It allows you to structure the website through sections, paragraphs, headings and lets you create text, links, cards, lists, and buttons.
The structure of a html file is very simple. Almost all elements are just pieces of content wrapped in opening and closing HTML tags. For example, you would write the title of a webpage like so:
And while the current version of HTML (HTML5) contains , most webpages are made just out of a fraction of these. You’ve already seen the title tag, let’s quickly take a look at some more of those common ones. They are also the ones that you will most likely be using during your project.
<html>: Must enclose the entire rest of the code
<head>: Contains the title, the link to the css (styling) file and various other information
<body>: Contains the contents of a website
<p>: Paragraph, simple text belongs here
<h1>: Top level heading of a website
<div>: Structure that groups content inside
<ul>: Unordered list containing list items <li>
<a>: Link tag, used to link from one website to the next
<img>: An image in an HTML page
<form>: To create an HTML form for user input
<button>: Create a clickable button
Now that you know the majority of the relevant tags the only question left to answer is how do we actually write HTML code. For that it is relevant that all HTML documents have the same boilerplate-like structure that needs to be in place before anything useful can be done. The boilerplate looks something like this and is often easily accessible with a shortcut (so you don’t have to type it all out everytime you create a new file)
All of the content, that appears on a webpage is written between the <body> tags. Now we know the basic structure and some HTML tags, but how and where do we write HTML Code? The answer is straight forward: We can write HTML Code anywhere! Even in a simple plain editor, as long as we save the code as .html we can view the results in the web-browser. But don’t worry, there are more handy choices that we will look at in the Tools Section. Please note here, that we should always save the homepage of our websites as index.html. This is because web servers will by default look for an index.html page when users land on our websites - and not having one will cause big problems.