A short taster session into the fundamental technologies powering the world wide web.

Your First HTML Session

In this session we will take our first step towards creating Ben's website. Together, by the end of the session we will have created this.

Although it may not look like much, getting the bare bones of the site created quickly will speed up development down the road.

What is HTML?

Every website on the Internet is just a set of files that your browser (Chrome in this case) knows how to display. These three file types are:

All of these technologies are said to be client side technologies, this means that HTML, CSS and JavaScript runs on your computer.

When you visit a website what you are actually doing is requesting the HTML, CSS and JavaScript files from a web server that hosts that sites files. Your browser then reads these files and displays them to you as a web page.

This has an interesting side effect that we will discover now.

Developer Tools

Because the HTML, CSS and JavaScript are sent you your browser, it is easy for you to look at them. There are no secrets in HTML, CSS or JS. If there's a part of a webpage that you like, it's easy to find out how it is coded and use the technique yourself.

Every browser provides a way for you to look at the source of the site your are currently browsing, and Chrome's is especially good.

Google Chrome comes with a powerful set of developer tools built in that allow you to interactively inspect the source code of a site that you visit. To open developer tools use View > Developer > Developer Tools

View > Developer > Developer Tools Should be on the left hand side of the developer tools
Double clicking on the HTML in developer tools should allow you to change it. CSS is located in the top box on the right Note that the changes disappear

A website in a folder

One of the great things about HTML is that you don't need a lot to see it working on your laptop, all you need is a text editor and a web browser.

To get up and running you need to understand that a website is just a collection of files that all live inside one folder. This folder effectivly becomes your website. When we want to put our website on the Internet, all we need to do is move this folder to a web server somewhere.

Anything that you want to appear on your website must be within this folder. HTML, CSS, JavaScript, Images & Downloadable Content, it all must go inside this folder

It doesn't matter where it is or what you call it, as long as you remember this. Don't give it a name with spaces in though, use underscores instead.

Using Sublime Text

All HTML that we will ever write needs to be written in a text editor. Remember from the prep work that we use Sublime as it doesn't save any extra nasty characters like Word does and it gives us Syntax highlighting, this will make more sense later!

Our first look at real HTML

Ok - let's write our first bit of HTML, remember the site we are trying to create in this session is here.

Let's take our first step towards that by creating a heading element on our site.

<h1> My Little Coding Shop </h1>
                    

File > Open File Then navigate to the folder and file you just created

Why index.html

All html files must have the .html extension. This tells the computer that this is a HTML file.

The default name for a HTML file is index.html This means that unless you ask for another file specifically, you will be given the index.html file

This is really important as it means that the homepage of every website is called index.html. Try it out!

http://www.codefirstgirls.org.uk http://www.codefirstgirls.org.uk/index.html

More HTML

There are loads of HTML tags that you can use to define the structure of your page, and they all follow a similar format to the heading above.

Headings

<h1>Top level heading</h1>

<h3>Lower level heading</h3>

                    

• There are six levels of heading h1 .. h6
• The higher numbers are more important
• It's usual to only have one h1 on a page
• You rarely see anything below h4 in real pages

Paragraphs and text

<p>This is a paragraph.</p>

<p>This is another paragraph. It has some <em>italic text</em> and some <strong>bold text</strong>.</p>

• Paragraphs are created using the <p> tag
• The <em> tag is used to provide emphasis. In reality that means italics - in fact the tag <i> also works. Using em is better though as it fits with the idea of semantic markup - marking your information as to its meaning, instead of how you want it to look.
• The <strong> tag is used to make text stand out. It basically means bold - <b> also works, but <strong> is better - see above.

Lists

<ul>
    <li>Apples</li>
    <li>Oranges</li>
</ul>

• Lists have a nested structure
• <ul> is for an unordered list. This means bullet points.
• <ol> is for an ordered list. That means automatic numbering.
• In both types of list you add items using a <li> tag. This stands for list item.

Links

<a href="http://www.facebook.com">this is a link to facebook</a>

• The href property tells you where the link will point
• You can specify this link it different ways:
  • absolute external link e.g. 'http://www.facebook.com'
  • absolute local link e.g. '/about'. This links to a file relative to the root of your webserver. For example if your site is at www.example.com the link will point to www.example.com/about
  • relative local link e.g. 'about'. This links to a file relative to the current html document. In this case it will link to the file called about in the same folder as your current html file.
• You can also link to places in the same document using href="#my_tag". This
• You can get the link to open in a new tag like this: <a href="http://www.facebook.com" target="_blank">

Buttons

<button>this is a my button text</button>

Images

<img alt='my cat' src="my_cat.png">

• The alt tag is for providing a description of your image. This is useful for partially sighted people using screen readers, or in case the image doesn’t load.
• The file can be linked to in the same way as href. In the example above we use a relative local link to a file called my_cat.png in the same folder as the html file.

Blockquotes

<blockquote>Some inspirational quote here</blockquote>

The blockquote tag specifies a section of text that is quoted from another source. It's very similar to a traditional paragraph tag but it is more semantic.

Final Exercises

Using the tags above we're now going to complete this sessions exercise. We'll get our site to look just like our target site.

Below your <h1> tag add a <p> tag. Add some text inside it and close it with a </p> Below your </p> tag add a <button>Shop now</button> set of tags Add a <ul>...</ul> pair of tags Between your <ul> and </ul> tags add a <li>...</li> tag Add the text for the list item. The first should be "Home" For each of the three list items repeat the above Right click on each of the images here and Save the image to your website folder Using a <img> tag add the first image of a product to your site. Hint, the code you'll need will look similar to <img src="style.jpg"> Where alice.jpg must match the exact filename of the image that you downloaded Below each of the <img> tags add <p>...</p> tags Between the <p> and </p> tags paste the contents of the product descriptions Below the paragraphs of product descriptions add a <a href="#">..</a> set of tags. Place the text including the price inside each.

If you get stuck, look at the solution and use Chrome's developer tools to help you out.

There's one last thing we need to fix, our bullet point list should be links, but at the moment they're plain text. We can nest as many tags inside each other as we like, so to create nested links within a bullet point you can use the following code:

<ul>
    <li>
        <a href="#">Text here</a>
    </li>
</ul>

Using the above code, add links to each of the three bullet points. It doesn't matter where the href points, we'll fix this later. Commonly web developers use the # symbol before they fill in this detail later

One last thing

One last thing - this isn't valid HTML yet. All HTML documents must follow a strict pattern to be considered HTML. That pattern is:

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        ...
    </body>
</html>

This is commonly called HTML boilerplate or skeleton code.

• The doctype tells you what sort of html you're using (html5, html4 ...). With html5 it's simple - you just write html.
• Everything is wrapped in an <html> ... </html> tag
• Only things within the <body> ... </body> tags are displayed on the page
• Things within the <head> .. </head> are used to provide more information about the page
• .. for exmple the thing within <title> ... </title> will be displayed in the browser bar

Add the html5 doctype from above as the first line of your index.html file Underneath the DOCTYPE add a <html> tag. On the last line add the closing </html> tag Under the opening <html> tag add the <head> and </head> tags Below the </head> tag add the <body> tag and add the closing </body> tag above the </html> tag at the bottom of the file