So we're going to start by using another new website jsbin (right click and open it in a new tab)
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!!!
All pages begin with this to tell the web browser it's a html webpage
Next, everything goes inside some html tags
We then have two super important sections...
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.
<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!
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>
h1 represents the the first (biggest) type heading, try adding some subheadings for h2 or h3 which represent your interests and activities.
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!
We can do a bit of styling, much like in Microsoft Word, we can make text bold, underlined, and even italic
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?
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.
<ul> <li>Cats</li> <li>Dogs</li> <li>Elephants</li> </ul>
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
<img src="http://www.gadgetguy.com.au/cms/wp-content/uploads/10323_androids-skating.jpg" />
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!