Hello and welcome my name is Nathan Smith of Nathan Tech and you are listening to the learn how to code in HTML tutorials.
This is the introduction, episode 1, and in this episode I am basically going to be, very quickly, very briefly explaining what these tutorials are, what you can expect from them, how they're going to be structured and things like that.
This is the second series of tutorials that Nathan Tech has done, the first being the learn how to code in python tutorials.
These tutorials will be structured in much the same way, with each episode around the 15 minute mark, give or take!
Each tutorial is published with an audio tutorial and a text transcript. Unlike in the python tutorials, no code samples will be provided in a separate section, but I do show it here in the text tutorial and spell it out in the audio tutorials.
They are designed in 15 minute chunks to be easy to follow and simple on the mind.
What are these tutorials all about?
These tutorials are all about HTML.
that's the language you use to code websites. We will cover the difference between a web site and a web page in the next episode.
We plan to first start off by starting you with key terms, then we'll go on to common misconceptions, gonna clean those up and such.
We'll proceed to make sure you understand the language, visualising the key concepts and differences between html 4 and html 5.
At the end of the lessons we'll spend some time just telling you where to go next, giving advice and tips on places to learn more stuff.
What you can expect to end up with is an understanding of the HTML language, the ability to build a website from scratch and a basic understanding of how to upload a website to the internet.
I want to jump very quickly here and say that building from scratch is not the only way to make a website.
There are website building tools out there, like wordpress or our very own Sunrise Waterfall, https://nathantech.net/nathantechsoftware.php that allows you to build a website without knowing anything about code through a menu based system.
Each of these obviously has advantages and disadvantages that go a bit beyond this tutorial.
For now though, I'll see you in the next episode where we'll crack on with some key terms.
This has been Nathan Smith of Nathan Tech.
Thanks for listening.

Hello and welcome to episode 2 of the Learning to Code in HTML tutorials. I am Nathan smith of Nathan tech.
In this lesson we will learn key terms and what they mean.
First of all what actually is a website?
Website: Something that contains content that you access on the internet.
Web page: A web page is a page of content.
Imagine a book.
A book has pages.
A website, is a book.
It contains web pages.
Web pages are files.
How do we access a website?
We can either access a website through an IP address or a domain name.
An IP address is a series of numbers, like 123.456.789.123 that points directly at a server.
A domain is a bit like a human readable alias for an IP address.
A domain name is divided into sections.
Take google.com.
We can divide this into google, and com.
Com is the TLD, top level domain.
Google we can refer to as the name of the website.
You can also have subdomains these come before the name of the website, like software.nathantech.net.
In this example, software is the subdomain, nathantech is the website name, and .net is the TLD.
There are many TLD's from com (commercial), org (organisation), gov (government) and so on.
A website needs to be stored somewhere.
Websites are stored on servers!
For the purposes of this tutorial you can think of a server like a hard drive.
A hard drive that is connected to the internet that serves your content. serves it. Server, get it?
Anyway, my bad jokes aside, how do servers serve content?
This is done through software that is a bit beyond this specific tutorial such as apache2.
there is another way though to get your website on the internet and this is through a web host.
A web host will handle the set up of your server, the set up of the serving software, all that good stuff.
All you have to do is upload your files and choose a domain.
I do not recommend hosting your website locally and giving your own IP out to the public, if there's a leak then you've leaked all your private files.
We're actually going to walk through signing up for a web host in a couple of episodes time.
Here are a few more important key terms:
FTP: File transfer protocol. this is how you upload content to your website through an ftp client. More on those later.
Front end development: Front end development is where you code content that is displayed directly to the user.
Back end development: This is code that the user does not see as it takes place on the server.
Take a look at the contact page on the Nathan Tech website.
The form you see is front end developer.
the script that handles the emailing of your data to me is the back end script.
These tutorials will only cover front end development of HTML.
tag: HTML works in a system called tags. Think of a tag like a sandwich. I like sanwiches, especially cheese... An onion.
Anyway! think of a tag like a sandwich. You have bread, stuff, bread.
Tags are much the same you have a less than siign, some stuff, and a greater than sign.
<body>
Like I said, bread, stuff! bread again.
We could call the body part of the above element the tag name.
Next, lets talk about attributes. Attributes add extra information to a tag.
Refering to our body tag for instance, if we want all the background to appear in red we'd do:
<body bgcolor="red">
I'm not going to talk to much about the bgcolor="red" part but the important thing to understand here is that bgcolor is an attribute which has the value "red".
Another example, with the tag for a heading we could give it an ID like so:
<h1 id="1">
The tag is <h1> and the attribute is id. the value is "1".
Very nice, tasty sandwich, right there.
The last thing I want to mention about tags is that most tags have a closing... Well, tag.
this is where the sandwich idea comes in again. Remember bread, content, bread.
tag, content, close tag.
here is an example:
<h1>This is a heading!</h1>
Most tags follow this format. We'll cover a few later that don't.
For now though, just understand the format:
,tag name>some text</tag name>
to sum up this tutorial I just want to talk briefly about the difference between html and html5.
HTML 4, which is what HTML used to be is like a version number. HTML version 4, HTML version 5. the main difference between 4 and 5 is that 5 supports audio and video. There are a few minor format changes such as as being able to write either <br> or <br /> which is great for reading as it rounds out tags nicely.
Just understand that html 5 is more up to date than HTML 4 and there fore  we will cover HTML 5 in this tutorial.
I realise this has been a lot of content to absorb, so please do go back and read over this once again if you need to, 
This has been Nathan Smith of Nathan Tech.
Thanks for listening.

Hello and welcome to episode 3 of learning to code in HTMl with me, Nathan smith of Nathan Tech.
In this episode we're basically, well. We're going to make our first web page!
Lets first talk about how we do that. A website contains web pages which are files of code.
You can use pretty much anything you like to make a web page, from notepad, to notepad++ to dream weaver.
I do recommend not using word.
I personally recommend keeping it simple and sticking with notepad.
If you'd like to crack open your favorite text editor, we can begin!
as discussed in episode 2, an html document is composed of tags.
lets talk about the two sections of an html document.
First of all it is good to imagine an HTML document like a person. You can divide a person into two. Head, and body.
this is the same for HTML it has a head section and a body section.
These are enclosed in html tags. Literally. the tags are <html> and </html>.
In version 4 and below it was enough to do this. In version 5 however there is an extra tag one must put at the top of the document.
This is the doctype tag.
This is one of those special tags that does not need to be closed.
We must do this due to rules set up by web browsers and markup tools. They are called conventions. By including the doctype tag we are telling these tools that we know what we are doing.
It's very simple though, simply put this at the top of your document:
<!DOCTYPE html>
Now we can begin our web page!
As discussed above the first tag of any document, precluding the doctype tag, is the html tag. So lets insert that now.
<html>
Now we move on to the head section.
Head sections can contain many things from description information, key word data for search engines and so on.
We are going to focus on the title tag.
First, declare your head section.
<head>
Now, your title.
<title>This is the title of my web page.</title>
As you can see we have opened, and closed, the title tag.
We must now close the head section.
</head>
perfect!
Now lets move onto the body section.
<body>
Seems pretty intuative, right?
For this first page we are going to do a heading, a paragraph and some lines of text.
There are 7 types of heading in HTML, but don't panic!
Each heading is simply a different size, where 1 is the largest and 7 is the smallest.
To make a heading of the largest size we will do:
<h1>this is a heading</h1>
See? Easy!
To make a paragraph we use the p tag. P for paragraph, after all.
<p>this is an example paragraph. It's not very long, but not all paragraphs have to be!</p>
Notice how in both the paragraph and h1 tags, we also close them?
Sandwich! Nom!
Imagine the following:
This is a line of text.
This is another line of text.
You can see these are on separate lines to each other. A browser how ever would put them on one line.
This is where the br tag, break, line break, comes in.
There are two ways for you to write a br tag:
<Br>
or 
<br />
For the purposes of being up to date, lets use <br>
This is a line of text. <br>
This is the second line.

Now it works!
Save your file and have a play with it. Remember if using note pad, to ensure the file is saved as an html file and not a txt file, put quotes around the file name, like this:
"my web page.html"
this has been a quick introduction to html tags but there are many, many more. check them out on the w3 schools website found at the top of this page.
This has been Nathan Smith of Nathan Tech.
Thanks for listening.

Hello and welcome to this, the 4th episode in learning to code in HTML with me, Nathan Smith of Nathan Tech.
Having already created a little web page, we're now going to open that up, edit it, and crack straight in.
First of all, everything is very bunched together, so lets seperate things out with a horizontal line. Horizontal lines help divide up a page and I use them a lot, as you may have seen on this page!
We do this with the horizontal rule tag:
<hr>
The HR tag is much like the BR tag in that it does not need a closing tag.
Great!
Lets talk about some of the elements you will probably use a lot in your day-to-day web coding life. Lets talk about lists.
There are two types of list: bullet points and numbers.
I like to think of these as unordered and ordered, respectively.
This helps me remember the tags for the lists.
To create a bullet point list, also known as unordered, we use the <ul> tag.
Get it? ul? unordered list?
For numbered lists, we use the ol tag. <ol>. ordered list.
Each list item has to be surrounded by li tags, LI could stand for list item.
It's that easy!
Here's an example:
<ul>
<li>apples</li>
<li>bananas</li>
</ul>
or
<ol>
<li>bob</li>
<li>Jimmy</li>
</ol>
You can also nest lists, which means put one list in another list, like this:
<ul>
<li>apples</li>
<li>bananas</li>
<ol>
<li>super carrots</li>
</ol>
</ul>
Now lets talk about tables.
If you were to describe a table to someone, one way you might do it is by going row by row.
IE, row one has x y and z, row 2 has A B and C.
This is how html handles tables.
First of all, we must open the table tag:
<table>
Then we must open a table row:
<tr>
tr=table row
there are two ways we can now fill out this row, either with the th tag or the td tag.
I prefer to use the th tag for the first row and then td for the rest. This is because it enables screen readers to read table headers.
lets create an example row:
<tr>
<th>Name</th> <th>Gender</th>
</tr>
Then below this we could have:
<tr>
<td>Nathan</td> <td>Male</td>
</tr>
then we close our table.
</table>
See, it's that easy.
Once you get the hang of things, they just fall right into place.
We're going to cover the link and image tags in the next episode because they're a little more fancy.
I'll see you there!
this has been Nathan smith of Nathan Tech.

Hello and welcome to this episode of learning to code in HTML with me, Nathan smith of Nathan Tech.
This will be a slightly shorter episode as we're only truly covering two elements, that to make links, and that to make images.
First though lets do a quick recap!
An attribute is something given to a tag to give it more context or information.
Now lets put this into practice.
To make a link in HTML we use the anchor tag.
<a>
but to make this mean anything we must give it an attribute.
this attribute is called href. don't ask me what it stands for, I have no idea.
we do this like so:
<a href="something">
Notice the quotes? They're important!
there are two types of links, external and internal.
External links point to something outside of the page, be it another website, or be it another page of this website.
Internal links point to something on this page, more on that in a second.
First, lets make a link that points to Nathan Tech.
<a href="https://nathantech.net"> nathan Tech's website </a>
Divide it up.
As you can see the href attribute now has the value of the URL to Nathan Tech's website.
We've also added some additional text. this will be shown to the user and can be anything from the URL< to click here, to thank you Nathan Tech for these tutorials.
Then we close this tag nicely with the </a>
Fantastic.
So what about internal links.
Internal links jump you about on a page.
Examples are things like the jump to the top link of the page you are on, or the links Wiki uses in their contents' in their articles.
First we must tell the web browser where it is going. In a nice way.
this is where that ID attribute comes in.
<h1> id="top"> Welcome to my website </h1>
As you can see, this heading now has the ID of top.
We can jump to this heading by doing:
<a href="#top"> Jump to the top. </a>
Note the #. It is important.
That is how the web browser knows it is an internal link.
An important note on links: If you want to link to a website, make sure and include either the http or the https, otherwise the browser will thinkyou want to go to a file.
Finally, you can also give the attribute download to a link. This tells the browser this is a download link and to not try to open it as a file.
An example would be:
<a href="music.mp3" download>Download my music here.</a>

That's it for links, so lets move on to images.
There are lots of attributes an image tag can have, but we're only going to cover two. The rest are more for alignment and css.
First you declare an image tag with the <img>
the two atrributes we want to talk about are:
src: This stands for source and tells the browser where to find our image.
alt: This is the alternative text that is shown if the image is unavailable and is also what screen reader users will see.
Image tags, like the br and hr tag, do not have to be closed, like so:
<img src="dragon.png" alt="A big dragon who will eat your face.">

that's all there is too it.
It's quite simple once you get your head around what an attribute is and how it relates to your code.
That's it for this episode but i look forward to seeing you in the next one where we will talk about forms.
this has been Nathan smith of Nathan Tech.
Thank you for listening.

Hello and welcom to episode 6 of learning to code in HTML with me, Nathan smith of Nathan Tech.
You're doing really well.
You're nearly at the end of the hard coding!
the final thing I am going to talk to you about regarding code is the form element and all that it entails.
Forms are what you use to show edit boxes, check boxes and all sorts of fancy stuff.
the form tag takes two attributes:
action: This is where the form should be sent. I believe you can even do: action="mailto:your email address" but this is neither secure nor very well formatted.
method: this is how the form will be submitted whether it is get, or post. If it is get, the entered data appears in the URL.
For the purposes of this example, we will declare the form like so:
<form action="" method="get">
this will simply refresh our page and add any content to the URL.
Now, lets talk about some items in our form:
1. Text fields.
Text fields are displayed with the input tag.
the input tag should take at minimum, three attributes:
type: What type of input field is this?
name: What should I refer to this as when I put it in your URL?
Id: What is the internal ID of this?
For a text field, type="text" name can equal anything and id should be a unique ID.
At this point I want to take a moment to talk to you about the label tag.
the label tag has only one attribute, for.
<label for="an ID">some label</label>
This particularly helps screen reader users as it tells us what the input field is in reference to.
Lets look at a full declaration. First we have:
<label for="name">your name</label>
Then:
<input type="text" name="name" id="name">
Note that, like the br tag, input fields do not have to be closed.
to make this a check box, simply change type="text" to type="checkbox"
It's the same for radio checkboxes.
2. Text areas.
Text areas are multi-line text fields.
First define the label as above and then use the textarea tag like so:
<textarea id="name"></textarea>
If you wanted to show some text in the field before the user types anything you could put it between the textarea and </textarea> tags.
3. Dropdown menus:
Drop down menus are a bit like lists. And in that regard their construction is similar to lists.
First, you need to open a select tag. Don't forget your label first!
<select id="an ID">
Then for each list item use an option tag:
<option value="something">something</option>
<option value="another something">another something</option>
then we close the select tag:
</select>
4. Submit.
The biggest thing a form needs is a submit button, right?
Submit is part of the input tag like so:
<input type="submit" value="Submit.">
Notice the value attribute here. That's how you tell the browser what the label for this button should be.
You do not need a label tag for the submit button.
The final thing I want to talk about is the required attribute.
You can put this with text fields, text area tags, check boxes, almost anything.
It tells the browser that this must have a value before the form can submit, like this:
<input type="text" name="name" id="name" required>
That's it for these forms, accept to say:
</form>
I'll see you in the next episode!
This has been Nathan Smith of Nathan Tech.
thanks for listening.