What you may not realize is that it’s relatively easy to build a simple web page. There are several ways to do it, as well, and you don’t need fancy or expensive software.
For example, you can write HTML and CSS using a simple notepad app, as long as you know what you’re doing. What’s more, HTML and CSS are the two most prominent languages for building websites and creating online portals, but there are alternatives.
For the purpose of this tutorial, we’re only going to focus on HTML and CSS, however.
What Are HTML and CSS?
HTML stands for HyperText Markup Language and it’s meant to structure content or adjust the general layout. Think displaying images, changing font styles, defining paragraphs and page breaks, and much more.
CSS stands for Cascading Style Sheets and is meant to adjust the aesthetics of content. You can change attributes like font color, size, position on the page, and beyond.
They are separate languages, however, they’re often used in tandem to create a more coherent and appealing web page. While HTML might reference CSS, or vice versa, they are maintained in separate containers or documents.
Build Your First Web Page: How to Write HTML
Note: If you’re looking for a more in-depth HTML tutorial, we do have one available. This guide is merely going to talk about the basic structure and attributes we need to create a simple, text-based web page.
To build your own web page you need to create an HTML document.
To create an HTML document, we’re not going to use any special tools. All we’re going to do is open a plain text document, and when we’re done we’re going to save it as an .html file. This will be different than saving it the normal way, which would define it as a .txt file extension.
Note: We recommend using Notepad++ because it’s a much better code and HTML editor.
Understanding HTML Structure
Every HTML document uses a particular structure, which starts with a declaration and is followed by critical elements.
<!DOCTYPE html>This is the declaration, which tells web browsers the document contains HTML and also what version of the language it’s using. If you’re using the most recent version then you don’t need to include anything else, like the version number. If you’re using an older version of HTML that’s when you need to include it in the declaration.
Next, we will include:
<html>This is called an element, and with it we are telling the browser it’s the official beginning of the document. It may or may not include additional metadata the browser needs to display the page correctly.
Inside the <html> element we will include sub-elements. The first is:
<head>Almost nothing in this element will be displayed on the page, but it does include critical information like the page title, external file links, and similar metadata the browser needs. It is also an important element for SEO, because it’s where you define a lot of the related meta content including a description and keywords. We’re not going to worry about that for this guide.
After the <head> element comes the actual content:
<body>This is where the content will be defined and structured for the page. Almost everything you include before the <body> element will be hidden from site visitors.
For each “open” element or tag there also needs to be a closing tag to match! For example, our <body> section would need the following (placed after the content):
</body>We’ll learn a little more about how this works when we create our first page in the next section.
Let’s Make Our First Page
Now that we understand the basic structure of HTML, let’s create our first page!
Use the information in the section above to write your own HTML file. It should look something like this when you’re done:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page! How do you like it?</p>
</body>
</html>
As you can see, each element has both an open and close! The content for each section is also contained within those open and close markers.
After saving the document (as .html) you can open it with your browser of choice. You should be able to see your content on the blank page, like this:
Note: Don’t forget to save the file as an .html extension instead of a standard text file!
Some Elements Are Smart
Remember that point about including an open and close for every element? Well, that’s not always true. Some elements will close themselves, using a single tag or markup commend.
For example:
<br>This calls for a line break, and no matter where you place it, it will always create a space between the previous line and the next, and it will self-close.
We can also be write it as:
</br>They are essentially the same command.
Some of the most common self-closing tags include:
<area>
<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<wbr>
Build Your First Web Page: How to Write CSS
Let’s say we want to change the appearance and style of the content we added to our simple HTML document. We could do this using HTML, but it’s more efficient to use CSS and call upon an external doc.
CSS works differently than HTML and relies on tags called properties, selectors and values. To use CSS we must reference the main document, properly, in our original HTML file.
For this guide we will be calling our CSS file “style.css,” but you can call it whatever you want, as long as you use the .css extension.
Within the <head> element we must add the following:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
With this snippet, our web browser knows to look in the style.css file for text and content styling instructions. We must also include a main.css document in the same directory as our html file.
Create Your CSS File
We are going to create that now. Just as we did earlier with the HTML document, open your notepad app, create a new file, and save it as “style.css” making sure to use the .css extension instead of the .txt extension.
We’re going to take our H1 header from earlier (Hello World) and change the color.
Within the style.css file, type the following:
H1 {
Color: red;
text-align: center;
}
Here, we are telling the page to display the header in the color red, and to center it on the page. Our selector is the H1 snippet, as we are choosing to style the primary header. Our properties are the color and alignment tags, as these are what we are adjusting or defining. Finally, our values are the color red, and the centered definition. These are the values we are assigning to the related properties.
There are also type, class, ID, and additional selectors, which we are not going to cover here.
Once you have added the above code to your document, make sure to save it! Also, keep it in the same directory as the original HTML file we created! Make a habit of creating a new folder every time you make a new web page, and then include all of your working documents in that folder. They’re much easier to keep track of, and it’s also easier to upload your files to a server when you’re ready to take the website live!
If we saved the document correctly our HTML file should look like this:
Eureka!
You Did It! You Made Your First Web Page!
If you got this far, congratulations! You have now learned how to build your first web page using HTML and CSS.
From here, you can go crazy adding more content, styling, and visuals to your page to make it look more professional! It’s always a good idea to use template files, which are pre-styled, as you can customize them to match what you want. Of course, if you would like more control over the page content and how it looks, you can create your files from scratch, just like we did here!
If you want to learn more about some of the common programming languages and how they stack up against one another, you can check out our Versus page (related: PHP vs Javascript) . You’ll find a mashup of programming languages, frameworks, and databases!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
