Before we begin, you should know that there are plenty of ways of doing this. Especially with the rise of websites like that of SquareSpace that build websites for you. They do take a lot of work out of the building process and can be great if you want to get something to market rather quickly. This article is not about that, this article is how to build a website from scratch with HTML and CSS. Sure, there are tons of languages, libraries, and frameworks you can use, but they all come together with HTML at one point or another. I am going to keep this to a very basic tutorial since you can write a book on this. To understand how to build a website, you first must know what HTML and CSS are.
Understanding HTML: The Foundation to Build a Website
HTML stands for Hyper Text Markup Language. Don’t get fooled by the L because HTML is not a language. Anyway, HTML tells the browser how to structure what will be shown to the user with things called tags. These tags can hold attributes that can be accessed with CSS.
Styling Your Site with CSS: Visual Aspects to Build a Website
CSS stands for cascading style sheet. This tells the browser how to style tags on the screen to a user. To think of something basic, say a room. The four walls, ceiling, and floor are the HTML. The paint on the walls, the carpet, the doors, windows, etc. They are the CSS. Opening and closing the doors and windows are for another article as that would entail something called JavaScript. Let’s jump in and create our first website!
If you remember, HTML are made up of things called tags. There are hundreds of different tags and they all do different things. Way too many to list here, but some of the tags we are going to use are <head>, <body>, <p>, and <li>. I’ll go over each of these when they are used. The basic foundation of a website consists of the head and body.
Crafting Your First Web Page
First you will want to create a new file called index.html. You can leave this file on the desktop as it does not matter where you run it. Now that you have that file created, open it up with your favorite editor. Next you are going to add:
<head>
</head>
<body>
</body>Go ahead and save, but if you click on it. A browser should open, but you will not see anything. A user will not see anything that is in the head tag. The user will see everything put into the body tag. Now inside of body, you are going to create what is called a <div>. You can think of a div as an invisible box, until we use CSS, that contains all the children added to it. Similarly to the head and body above, the <div> will also have a closing </div>.
Now your file should look like:
<head>
</head>
<body>
<div>
</div>
</body>Still, nothing will show on the screen, but trust me. The next step will have you outputting something to the screen. Between the <div>, you can add any of these tags, <p></p>,<h1></h1>,<h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>. Those tags format the text between the opening and closing tag. For example, the <p> produces text like that of this sentence. <h1> down to <h5> sizes the text from large too small. Play around with them to see what they do. I’m going to with the <h1> for this example. You can place your tag of choice between <div></div> For example:
<head>
</head>
<body>
<div>
<h1>Creating a Website</h1>
</div>
</body>Congratulations! You outputted something to the screen. Feel free to change that text to whatever you like. Next you can add <p></p> under the <h1> and maybe write something about yourself.
<head>
</head>
<body>
<div>
<h1>Creating a Website</h1>
<p>Hi, my name is Jeff and I like to program</p>
</div>
</body>Save it and check to see what you have. On the left side of the screen, you should now see all the text. Now to get fancy, create a list of your favorite foods below your paragraph with <ul></ul> and <li></li>. Woah, wait a minute. What are those!? <ul> is an unordered list meaning that it will not show numbers when items are listed by default. <ul> is also the parent of <li> meaning <li></li> sit inside of <ul>. Let me show you what I mean:
<head>
</head>
<body>
<div>
<h1>Creating a Website</h1>
<p>Hi, my name is Jeff and I like to program</p>
<ul>
Favorite Foods are:
<li>
Pizza
</li>
<li>
Tacos
</li>
</ul>
</div>
</body>If you refresh your browser, you should see a list with bullets. Nice work! Now that we have the foundation laid, we can move on to the style of the webpage.
Putting it all Together with HTML and CSS
Next, I am going to keep this part extremely simple as there is also a lot to learn with CSS. Any tag inside HTML can have either an id or class attribute to it which we then can use as a selector in CSS. For example, <div id=”div>” or <div class=”div”>, that div tag has an id or class with the name of div. Ids are meant for unique tags while classes are used for multiple tags. To be able to style your website, you will need <style></style>. Those tell the browser to read what follows as CSS and those will live in the head. Now your code should look like:
<head>
<style>
</style>
</head>
<body>
<div>
<h1>
Creating a Website
</h1>
<p>Hi, my name is Jeff and I like to program</p>
<ul>
Favorite Foods are:
<li>
Pizza
</li>
<li>
Tacos
</li>
</ul>
</div>
</body>Next, we are going to center the <div> to the middle of the screen. I am going to show you how to access each type, but only one is going to work. I will label which ones will and won’t work. This is the home stretch for this tutorial.
<head>
<style>
#div{
/*The # allows you to access tags with ids*/
}
.div{
/*The . allows you to access tags with classes*/
}/*not having either . or # will access all the tag of that*/
/*kind. Be careful with this. */
div{
width:500px; /*will shrink the div width to 500px instead of size of the screen*/
margin:auto; /*this will center the div, you have to have a specified width that is not 100% to work*/
}
</style>
</head>
<body>
<div>
<h1>
Creating a Website
</h1>
<p>Hi, my name is Jeff and I like to program</p>
<ul>
Favorite Foods are:
<li>
Pizza
</li>
<li>
Tacos
</li>
</ul>
</div>
</body>In conclusion, that is how you build a website with HTML and CSS There are plenty of other attributes like font-size, color, background-color, etc. So, try changing the color of the text. Not too shabby, right? I’m curious to what you made. If you are curious to how to build more stuff with HTML and CSS, I have attached a YouTube video where I create a shopping list. Be sure to check it out. Until next time, cya!
In the meantime, check out more software related topics on Jstroup.dev