Hello and Welcome to Part 1 in our three part series on How To Build Your Own Personal Website! If you have not already, be sure to check out Part 0: An Introduction To Git! Technically, Part 0 is not required as we will only be dealing with local files in this and future installments of this tutorial series, but it does contain important information about our overall goal with this series, collaborative work, and website hosting. Part 1 will be focused on explaining the basics of HTML, and Part 2 and Part 3 will show you how to combine HTML with CSS to give some style to your website.
HTML, or Hypertext Markup Language, is the core language behind building websites. We will be focusing on HTML5, the latest version of HTML. With HTML, you will have the basic building blocks to create headings, paragraphs, links, tables, images, and many more to use directly in your website.
As you progress through the tutorial, be sure to open the page in your browser by right clicking the html file and selecting "Open with Firefox/Chrome" and see what the new bits of code do by refreshing your browser after every change! It will be helpful to see exactly how your web page changes as you add, modify, or delete elements.
Let's set up our first HTML file! Open a text editor of your choice, and in your project folder, create a file called
Your index will be the default or home page on your website. After this is done, enter in your first bit of HTML code:
<!DOCTYPE html> <html> </html>The first line declares that your document should be read as an HTML file to your web browser. Following that are the opening and closing tags of
html, which hold all elements for that webpage.
For any element in HTML, you must have a pair of opening and closing tags of that element. This lets the browser know when to
start and end a certain element. In the code you just entered,
<html> indicates the start of the
</html> with the
/ indicates the corresponding closing tag to end the
element. If you forget to close your tags, the browser will automatically add them to render the page, but you may get strange-looking
results! A good habit is to write both the opening and closing tags every time you add a new HTML element.
If you try opening this page right away in your browser, you should see a blank, white page. Let's make it a little more interesting!
html tags, add the following:
<head> <title>Enter title here</title> </head>You can think of the
headelement as a setup for your webpage: in here you can set the title of the page (via
Now let's add some content to your web page. After the
head element, add a
body element, and within the
body add a large heading (using an
h1 element) with your name and a short paragraph (using a
element) introducing yourself. Before you scroll down to see the code to do this, try implementing it yourself, then check back to
see if you've done it correctly. Don't forget to close all your HTML tags!
<!DOCTYPE html> <html> <head> <title>Your title</title> </head> <body> <h1>Anthony Yu</h1> <p>Hi, I'm one of SAAS's Web Dev Directors!</p> </body> </html>In HTML, there are six different headings, from
pstands for "paragraph," good for entering regular text. Note that when you close your paragraph with
</p>, you are adding a line break immediately after your text. The same holds true for headings.
NOTE: HTML is white-space independent, so the line breaks and tabs you add will not show up when you open the page on your browser. Like any other programming or scripting language, be sure to indent your code to make it more readable to you and your collaborators!
And finally, comments! Like all other times you write code, it can be helpful for you to add comments to your HTML code. They do look a little clunky, so don't overflow your code with comments! Here's how to add them:
<!-- Your comment here -->
That's right, they have their opening and closing tags too! Indicate the start of a comment with
<!--, and end the comment with
-->. Get what I mean by clunky?
There are two very important tags used across every website on the Internet: the
div and the
These are basically container tags, where
span is typically used for in-line elements and
div for block
(or simply larger) elements. It helps to organize your HTML code within these tags and becomes especially handy when you want to
style a group of individual HTML elements a certain way with CSS, which we will explore in the next tutorial.
To see how this grouping works, let's put a
div wrapping your
h1 and your
p elements, then
div add another paragraph:
<!DOCTYPE html> <html> <head> <title>Your title</title> </head> <body> <div> <h1>Anthony Yu</h1> <p>Hi, I'm one of SAAS's Web Dev Directors!</p> </div> <p>Welcome to my website!</p> </body> </html>
If you tried refreshing your website, you won't see a difference. That's because we haven't added any formatting to our
Let's slip in a tiny bit of CSS to let you see the difference. Modify your opening
div tag to something like this:
<div style="color: blue">
Now if you refresh, you should see that your name and your first paragraph are colored blue, and the paragraph below is untouched!
NOTE: In practice, we don't really style elements (like coloring the text) like we do here. Usually we hide all of this in other CSS files and let the current HTML file link to the CSS file to grab all the styles we want. It keeps all our code organized and ensures that the HTML files aren't cluttered with all sorts of styles. We will look at how to do this in the next tutorial.
As an exercise for yourself, try using the
span element in the same fashion to color your first name and last name in different
Bootstrap is an incredibly popular and powerful library for web development. Using this library can make some front-end development (implementing the part of the website users see directly on their screen, as opposed to back-end development) a lot easier, and it also comes with some built-in buttons and other features that you can use directly on your own website!
First, to bring Bootstrap into your website, add the following line into your
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
And just like that, you have access to all that Bootstrap has to offer for CSS!
In this tutorial, we'll be specifically looking at Bootstrap's grid system. I personally use this a lot to move elements around the page or to have content on multiple columns of the page. I'm sure you will find this feature really useful as well, and thankfully it's easy to use! We'll use this feature to have two paragraph elements be on two separate columns in the same row to show the design of the grid system.
Before using this grid system, we have to set up a number of
div elements. Let's first modify the
div you have right now:
<div class="container-fluid" style="color: blue">
There's quite a bit going on with that small addition. We will discuss more formally what that
class means in the CSS tutorial, but
basically it's saying that this
div element is an instance of a group of
divs under the name
container-fluid is a Bootstrap class that tells the browser to render this element to span across the entire width of the element
it's in. If you don't want it to span the full width of the window, use
container instead, in which you use other CSS formatting to specify its width. However, to use the grid system you must use one of these.
Now that the container is set up, let's actually create the grid! Imagine that your website is a giant table in which you can split up to 12 columns. Our job now is to specify where to create new rows, and for each row how wide we want our columns to be.
Let's create a row just for our name header, and another row for your paragraph element sitting in your
div. We specify rows with more
div elements with a class named
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>Your title</title> </head> <body> <div class="container-fluid" style="color: blue"> <div class="row"> <h1>Anthony Yu</h1> </div> <div class="row"> <p>Hi, I'm one of SAAS's Web Dev Directors!</p> </div> </div> <p>Welcome to my website!</p> </body> </html>
In the second row, wrap the paragraph element with yet another
div element with a class called
<div class="row"> <div class="col-md-6"> <p>Hi, I'm one of SAAS's Web Dev Directors!</p> </div> </div>
Here we are specifying that for medium screens (that's what the
md means) or larger (this covers laptop screens or bigger), have
div element cover the first 6 of 12 units of the table, effectively covering half of the width. To see this really work, add
another one of these immediately after this first column:
<div class="row"> <div class="col-md-6"> <p>Hi, I'm one of SAAS's Web Dev Directors!</p> </div> <div class="col-md-6"> <p>I'm cooler than the other director Abhinav.</p> </div> </div>
Try refreshing the page, and you should see the second paragraph start from the middle of the screen! This is because the first
covered the first six units of the table, so the second
div grabbed the remaining six of the row. Feel free to play around with
the numbers and see how the text shifts!
NOTE: You can have up to 12 columns, each specified with a class of
* is the screen specification.
You don't need to fill up all 12 units per row, but if you exceed 12, Bootstrap will automatically overflow the excess columns to the next row.
For clarity, it's best that you specify the rows yourself and never exceed 12 units per row.
Your website isn't always just going to be paragraphs and headers - usually you'd want to include some other elements to your page! This tutorial will specifically explore on how to add hyperlinks, lists, tables, and images to your website.
If you ever have a website that has two different pages, you'd definitely want to add hyperlinks. Hyperlinks can be done using the
a tag ("a" stands for anchor). Check out the example below to see how to use this tag!
<p>Here is a <a href="https://saas.berkeley.edu">link</a> to SAAS's website.</p>
And this looks like:
Here is a link to SAAS's website.
The things to keep in mind are the
href and the text you put in between the opening and closing tags of the
a element. The
href (stands for Hypertext REFerence) is where you put whatever page you want to link to.
This could be a URL or a file path to link to another page (so in a local setting on your own computer, you can reference your computer's files)!
href can also refer to something called an ID (on the same page) which we will look at in the next tutorial - just use #IDName.
Remember to put that link in quotes to let it know that these characters are exactly what you want HTML to read as the link.
The text in between the tags are the characters you want to be hyperlinked. Be mindful that additional spaces are considered, so if you
want to get every single character to look right on your website, be sure to keep this in mind!
a is not the same thing as
link, which was used to "import" Bootstrap earlier.
link is used to
link you included for Bootstrap ends with
.css, indicating a CSS file.
a makes a hyperlink within the body of your HTML page, and clicking on one of these
redirects the viewer to a completely new page.
There are two types of lists: ordered (like numbered lists) and unordered (like bullet points). Their format is exactly the same - they are simply
represented by two different tags:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
And this looks like:
It's quite simple - for ordered lists use the
ol tag, and for unordered lists use the
ul tag. For each item you want to
put in the list, add a pair of opening and closing
li tags (stands for List Item) and enter the item in between those tags.
Tables follow a similar format to lists but have a little more to it:
<table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table>
|Column 1||Column 2|
|Cell 1||Cell 2|
|Cell 3||Cell 4|
That may look like a lot of new tags, so let's break it down.
tabledeclares that a new table should be made.
theadsets the table header. This tag isn't strictly necessary, but it could be helpful if you want to add other formatting to the header only.
tbodysets the table header. Again, this tag isn't necessary, but is helpful for adding formatting to the body.
trcreates a new table row.
thallocates a cell for a table header.
tdallocates a cell for a regular table data cell.
Images can help make a page look a lot nicer! Let's see how to add an image:
<img src="file_path_or_URL_to_image" alt="Text" height="in_pixels" width="in_pixels">
The only required one to fill is the
src attribute, but it's a good idea to add the
alt attribute as well.
src specifies a link to your image, and that link is done in the same way you would do an
a tag. Be sure that you are linking to an image file.
alt holds "alternate text," which means that if for some reason your image isn't loading or is taking
a long time to render, the text you fill in here will show up in place of the image. For this attribute, you should fill in what the image depicts
in a few words so that viewers know what should be there if the image doesn't show up.
That's about it for html! For the next part, Click Here!