Writing Your First Ever Website

So over the past few months I’ve posted ‘Code Tips’ for helping with more advanced development and doing snazzy things in a simple, easy way. I haven’t however done a basic introduction to web development. So if you’ve never written a website in your life, welcome to a crash course.

Couple of pieces of information before hand regarding web development and practices. The DOM is the Document Object Model and it is the guideline for writing a web document, you must follow it at all times as breaking it can have severe consequences for your page.

Elements are what make up a page, your basic tags are <html>, <head>, <body> and <footer>, again we’ll cover this more further down. Let’s get started though!

Writing Your First Webpage

Getting Setup

  1. Create a new folder and name it ‘MyFirstWebsite’
  2. Create two folders inside there called ‘style’ and ‘scripts’
  3. Create a file inside ‘MyFirstWebsite’ called ‘index.html’ and one inside ‘style’ called ‘stylesheet.css’
  4. Double click on index.html to open it in your favourite browser
  5. Right click on index.html and open it in a text editor

Writing Your First Code

So we’ve got a blank page on your browser and an empty file called index.html. The index file is what most web servers usually look for as the main page in that folder, be it called index.php or index.aspx

Write, don’t copy and paste, the following code (it’ll help you learn it better and it’ll make sense):

<!DOCTYPE HTML>
<html>

<head>
    <title>My First Website</title>
    <link rel="stylesheet" href="style/stylesheet.css" />
</head>

<body>
    <p>My First Website!</p>
</body>

</html>

Now, refresh your browser, from here on in this will be show as /R/

We did it!

Let me explain the code

  • <html> – We’re telling the browser it should read the following code as HTML
  • <head> – This section of code won’t displayed to the user but affects the site
  • <title> – Sets the title of the browser tab
  • <link – We’re linking a file into the index page, we tell the browser its a stylesheet and where it is
  • <body> – This is our main content we want to show
  • <p> – A simple paragraph

You must remember at all times though to close every tag. we open a tag by writing ” and close it by saying ”. Instead of using a paragraph we can use headers, H1 through H6, lets add the following line under the body tag

<h1>My First Website Title</h1>
<h3>Enjoy Your Visit</h3>

/R/ Good going, let’s add some design. Open the file ‘stylesheet.css’ and add the following

h1 
{
    color: rgb(177, 177, 177);
    text-decoration: underline;
}

First, we tell the browser we’d like to target the tag h1, then we want the text colour to be an RGB of 177,177,177 and we want to underline the text. It’s that simple. Most CSS attributes are simple English. If we change it from h1 to h1:hover /R/ then place our mouse on the header what happens? Yep, the text changes to our attributes! We can even change the mouse, just add cursor: help /R/

Working With div’s

In order to prepare for some things we’re going to do later we’re going to add some div’s. These are simple containers to hold content and are very versatile. Let’s create one on the left and one on the right. First, delete the contents of your body and add the following code

<div class="left">

</div>

<div class="right">

</div>

Then, to distinguish between them, we’re going to add a background colour and border to them to make it flow. To add styles to a class in our stylesheet we use ‘.classname’ So into our stylesheet we’re going to add

.left {
    background-color: #F7567C;
    border-radius: 10px 0px 0px 0px;
}

.right {
    background-color: #99E1D9;
    border-radius: 0px 10px 0px 0px;
}

Here we’re setting the background colour of our divs and giving them a border radius. You’ll see what this does in a minute but we’ve defined it as four pixel values. These read as – Top Left Curve, Top Right Curve, Bottom Right Curve, Bottom Left Curve. We need to add some content to these divs so that they are actually shown on the page so go ahead and add some paragraphs. /R/

We named our two divs left and right but they’re displayed one below the other. We need to make a few adjustments before they will be side-by-side. So lets introduce width and float. Add the attribute ‘float:left’ to your left div and ‘float:right’ to your right div /R/ Voila! They’re both on the same line but they’re a bit small and not beside each other. Let’s fix that. The full width of our website is of course 100% so what we can do is add the attribute width to our two divs. They can be different percentages but as long as the two numbers add up to 100 they’ll sit side-by-side. For example, this is what my stylesheet now looks like

.left {
    background-color: #F7567C;
    border-radius: 10px 0px 0px 0px;
    float: left;
    width: 18%;
}

.right {
    background-color: #99E1D9;
    border-radius: 0px 10px 0px 0px;
    float: right;
    width: 82%;
}

I’ve had to go with some unusual percentages to make sure the paragraphs didn’t last several lines and cause the div to grow in height.

We can now see the effect our border radius has on our divs. Notice that the divs are rounded in both corners to make it look smooth and flow?

Adding Links & Images

The most important part of a website is being able to navigate elsewhere right? So we’re going to add some links to Twitter & Instagram. Let’s make our left div our navigation bar then. Let’s add a list of social media links and their respective logos. We’ll add a list to our left div using the ‘ul’ tag (Un-ordered List) and add items to it using the ‘li’ tag (List Item)

<ul>
   <li>Twitter</li>
   <li>Instagram</li>
</ul>

Problem is, these won’t do anything yet. They will just act like a paragraph, we need to add the ‘a’ tag (Anchor) and provide a ‘href’ an attribute we’ve already come across, along with a ‘target’ attribute

The ‘a’ tag is going to hook the web address we give it in the ‘href’ attribute to the text we provide in the tag, finally our ‘target’ attribute will tell the browser how we want to open the link, the two main target options are:

  • _blank – Open in a new tab or window
  • _self – Open it in the current tab

Since we don’t want users to fully leave our site we’ll be using the _blank value.

<ul>
     <li><a href="https://twitter.com/alexlamond1" target="_blank">Twitter</a></li>
     <li><a href="https://instagram.com/alextakesphotosofthings" target="_blank">Instagram</a></li>
</ul>

What if we don’t want to say Twitter and Instagram, what if we want to show the logos? Let’s add the ‘img’ tag (Image) with an ‘src’ (Source) attribute

<ul>
     <li>
          <a href="https://twitter.com/alexlamond1" target="_blank"><img src="https://cdn.pixabay.com/photo/2017/08/23/11/30/twitter-2672572_960_720.jpg" /></a>
     </li>
     <li>
          <a href="https://instagram.com/alextakesphotosofthings" target="_blank"><img src="https://cdn.pixabay.com/photo/2016/09/17/07/03/instagram-1675670_1280.png" /></a>
     </li>
</ul>

/R/ Whoah! They’re a bit big! Let’s go to our stylesheet and add a new declaration for the tag img, set its width to 50px (Attribute name – ‘width’) and its height (Attribute name – ‘height’) to 50px

img {
    height: 50px;
    width: 50px;
}

Much better, but let’s put them side by side and get rid of those bullet points. By now you should be able to read new CSS and understand what’s happening there

ul {
    list-style: none;
}

li {
    display: inline;
}

/R/ Perfect.

We could even go ahead and round the corners like we did with our divs but instead set all the corners to 10px, let’s see if you can manage that without my help this time. I’ve added some extra content to show what you could do but your social media links should look like this:

Going Forward

If you’re looking at doing something specific with your page then the best place to look going forward is https://www.w3schools.com. There are a bunch of resources on there from working with tables to audio and learning JS or PHP.

Alex Written by: