Education Committee


Introduction to HTML

How To Build Your Own Personal Website

Part 1: An Introduction To HTML

By Anthony Yu and Abhinav Bhaskar



Purpose

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.

Introduction: What is HTML?

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.


Section 1: Core HTML 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 index.html. 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 element, and </html> with the / indicates the corresponding closing tag to end the html 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! Within the html tags, add the following:

      <head>
        <title>Enter title here</title>
      </head>
    
You can think of the head element as a setup for your webpage: in here you can set the title of the page (via title tags) and "import" other files by linking to CSS or JavaScript files (more on this in the next tutorial). Refresh the page on your browser, and you should see the name in the tab holds what you entered within the title tags!

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 p 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 h1 (largest) to h6 (smallest). p stands 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?

Section 2: The div and the span

There are two very important tags used across every website on the Internet: the div and the span tags. 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 outside this 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 div! 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 colors.

Bootstrap

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 head element:

    <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. 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 container-fluid div. We specify rows with more div elements with a class named row:

    <!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 col-md-6:

    <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 this 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 div 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 col-*-1, where * 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.

More about this grid system can be found here, and the general documentation for this library can be found here. At the time this was written, you will be linked to the documentation for version 4.1.

Some Other Useful Tags

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.

Links

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!

NOTE: a is not the same thing as link, which was used to "import" Bootstrap earlier. link is used to link your HTML file with other files such as CSS or JavaScript files. Notice that the 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.

Lists

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 and ul.

    <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:

  1. First item
  2. Second item
  3. Third item
  • First item
  • Second item
  • Third item

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

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.

  • table declares that a new table should be made.
  • thead sets 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.
  • tbody sets the table header. Again, this tag isn't necessary, but is helpful for adding formatting to the body.
  • tr creates a new table row.
  • th allocates a cell for a table header.
  • td allocates a cell for a regular table data cell.
And with all those tags, don't forget to close them!

Images

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!