Skip to content

Instantly share code, notes, and snippets.

@JohnReeves JohnReeves/website_html.md Secret

Last active Oct 11, 2017
Embed
What would you like to do?

1. Introduction

So we're going to start by using another new website jsbin (right click and open it in a new tab) jsbin logo

This will let us build our very own website, much like JSFiddle, except will make us type in all the code!

To start with, you want to make sure you have the HTML and Output sections open - found at the top of the page

Additionally when you start writing code, your project will automatically be saved - and you'll get your own unique URL. Make sure you save this before you go home!!!

Imgur

2. Structure

<!DOCTYPE html>

All pages begin with this to tell the web browser it's a html webpage

<html>

</html>

Next, everything goes inside some html tags

We then have two super important sections...

3. Head

HTML is a lot like writing a letter, you get to write the content (the actual letter your sending), and the top of the envelope that tells the postman where it's actually going to.

The <head> acts as the top of the envelope - inside you should see a thing called <title>. Try changing the text inside and you should see the top of the window change!

Imgur

4. Body

Next, we can focus on what's actually going to appear on our website inside the <body> tags. We're going to start of by writing some text (we'll get to images next week).

To make a title you need a <h1> tag e.g.

<h1> Danielle's Website </h1>

Imgur

h1 represents the the first (biggest) type heading, try adding some subheadings for h2 or h3 which represent your interests and activities.

Imgur

5. Basic Typography

Next, we can add some paragraph text. We can do that by using <p> tags like this:

<p>Danielle is a mobile developer specialising in making both Android and iOS apps, who has previously earned a top trending developer title and project on GitHub. She is also co-founder of Teach Programming CIC – set up to teach more young people, especially girls, the wonders of programming.</p>

Write a sentence about who you are for your website!

Imgur

6. Styling

We can do a bit of styling, much like in Microsoft Word, we can make text bold, underlined, and even italic

Use :

  • <b> for bold
  • <u> for underlined
  • <i> for italics

Imgur

7. Lists

We can also make lists! We're going to start by making a list that looks like this, maybe listing your top 5 favourite things?

  • Cats
  • Dogs
  • Elephants

To start with a list in HTML we need to make a <ul> which stands for Unordered List. We then need to nest our tags and ask for a <li> which stands for List Item.

e.g.

<ul>
  <li>Cats</li>
  <li>Dogs</li>
  <li>Elephants</li>
</ul>

Imgur

8. Images

Finally, we're going to look at adding an image into our website!

Using google you need to find an image you like, and view the image on it's own. Using Google Chrome you can right click on it, and copy the image url.

To use it in our website we need to use an <img> tag however, if we remember from last times xray goggles we needed to change an attribute called src="" e.g.

<img src="http://www.gadgetguy.com.au/cms/wp-content/uploads/10323_androids-skating.jpg" />

Imgur

9. Finishing

So we've had a look at a lot of different HTML tags. If your using Google Chrome, open in a new tab any webpage you use frequently (or project tigr) and view the page source. You should see a lot of the tags that we've just used (with a lot of other stuff too!)

Next week, we're going to look at changing all the colours!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.