Sunday, 12 March 2017

Learn The Basics On How To Code The HTML '' Part Three '' Understanding Basic HTML




Understanding Basic HTML

Image result for html

In this lesson we’ll learn about some of the simplest HTML tags and how they function.
So far we have a very simple index.html:
<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>

<body>
This is our first FOTC web page.
</body>

</html>
Let’s look in more detail at this HTML.
First, we can see a strange-looking tag that says <!DOCTYPE html>
This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser what language we’re using to communicate with it. In this case, we are using HTML.
The DOCTYPE declaration must always come first in a HTML page. There are other possible values for DOCTYPE. If you look at webpages using the F12 Developer Tools (see earlier in the course for an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our course we are not interested in these other DOCTYPES: <!DOCTYPE html> tells browsers that we want to use the updated version of HTML, which is currently HTML 5.
After the DOCTYPE declaration we can see our first HTML tag: <html>.
If we look at the very end of the document we see the matching closing tag: </html>.
This means that everything else in the document is inside our <html> tag. The <html> tag acts as a container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.
Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested inside the <html> tag.
Inside the <html> tag we put two very important tags: <head> and <body>.
This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration, then a single <html> tag, which contains <head> and <body> tags.

The <head> Tag
The <head> tag can contain a number of other special tags. We will learn about more of those in later lessons.
The important fact to remember about the <head> tag is that it contains data that is not directly displayed as part of the page. Often it tells the browser about extra resources the browser needs to fetch to display the page properly, such as additional CSS or JavaScript files. The <head> tag is also where we put metadata about the page.
Metadata is a fancy way of saying ‘data about the web page’. For example, in our <head> tag we have a <title> tag. The <title> tag contains some metadata: in this case, the title of the page. You can see the title in your browser tab:
Description: 4 - 1
So the <title> tag is one of the tags that can go in the <head> tag, and it defines the title of the web page. We will see more of these metadata tags in future lessons.
The <body> Tag
The <body> tag is where we put the body of the website. In other words, all the data that is displayed as part of the web page. As you can imagine, for complex websites this can be a LOT of data. At the moment our web page body is only a simple sentence… but from the next lesson we will start to add much more.
Conclusion

Image result for html

We now have the foundation of every website: a simple index.html with the basic structure of a HTML document. Before you move on, make sure you understand how the <html>, <head> and <body> tags are formed Adding Text to our HTML page

In this lesson we’ll learn about some HTML tags that help us structure text in our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, just like we did a couple of lessons ago.
It’s time to start making our page more interesting. Replace the text in your <body> tag with the following:
<body>
<section>
<h1>FOTC Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>
</div>
</section>
</body>
You will notice that I’ve indented the new tags. This means I’ve pressed the TAB key in notepad to leave a gap at the beginning of each tag. This makes it easy to tell which tags are nested (containe
d) within other tags. In this diagram I’ve marked the TAB indentations in green.
Description: HTML 5 - 1
When our web pages get more complex it’s VERY important to keep the HTML as readable as possible. For example, if I didn’t indent the HTML, look how messy it could get:
<body><section><h1>FOTC Website Tutorial</h1><div><h2>Making our first page</h2><p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p></div></section></body>
This HTML is exactly the same as the previous example. See how much easier it is to read when we use indentation properly?
You should get into the habit of using indentation to make your HTML readable. When you come back to make changes to your website – or if another developer needs to – you will thank yourself for putting in the time to make your website as clean as possible. Clean HTML is much easier to work with.
Now it’s time to save our changes in Notepad and hit refresh (F5) in the browser. You should see this:
Description: HTML 5 - 2
Let’s look in more detail at what we have added.
First we can see several new tags: <section>, <div>, <h1>, <h2> and <p>
The <section> and <div> tags
These tags are known as grouping elements, because they group related tags together inside them.
They are very similar tags, but <section> is used to group related items together. If you want to create a section of your page that contains similar information then you should use a <section> tag. For example, a list of blog article titles would be one <section>, while the part of the page that contains the actual blog articles would be another <section>.
Meanwhile, a <div> tag is used to group elements together that aren’t necessarily semantically related. Perhaps they are unrelated information that are kept in the same part of a page, or perhaps it’s a sub group of data that you want to group. The use of this tag will become more clear when we start styling our page using CSS.
The <h1> and <h2> tags
These are known as ‘title’ or ‘heading’ tags. They specify different levels of heading on the page. The lower the number the more important the heading is. For example, <h1> may specify the main heading on your page, while <h2> may be used to specify the subtitles of the different parts of your page.
As you can see, the headings are automatically displayed in bigger bolder text by the browser.
It is possible to have heading tags for up to 6 different levels of heading, from <h1> as the biggest to <h6> as the smallest.

The < p> tag
The <p> tag is short for a “paragraph” tag. As the name suggests, you use this tag when you have a paragraph of text.
Putting all this together
We can now add some more text to our page, now that we understand the new tags we have used. Replace your <body> text with the following. Don’t forget to check your indentation!
<body>
<section>
<h1>FOTC Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>
<p>For now we only have a simple page, but later we will make it more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a page.</p>
</div>
</section>
</body>
Now we have some more text to play with. You can see how the headings are displayed as headings and how the paragraphs automatically separate.

Can I make this look better with just HTML?
Technically it is possible to style a page using pure HTML. You can add tags that make the text bold, or italic, or change the font or the colour. However, this is a very bad idea. As a result, I’m not even going to show you the tags that can do this as you should never style your page using just HTML.
Why can I not style a page using HTML?
It’s best not to style a page using HTML for several reasons:
  1. Styling a page using HTML is very limited. You can’t make it look very good, however you try.
  2. Styling a page using HTML is a lot of work. It takes way more effort to style using the HTML style tags.
  3. Styling a page using HTML is very difficult to change. Once you start changing the layout and the look of your page in HTML it is very hard to go back and edit, especially once you add multiple pages to a site.
As a result, we have to be patient. Currently our pages look ugly, but that’s ok – we’re just using them to learn the basic HTML. Later in the course once we’ve mastered the simple HTML we will start using the power of CSS to make our pages look pretty!
Adding Links and Images in HTML
In this lesson we’ll learn some HTML tags that allow us to add links and images to our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
It’s time to start making our webpage a little more functional!
Do you remember how we created the index.html file originally? Right-click inside your folder and choose New -> Text Document. We’re going to repeat this process to create a second html file. Call this file “about.html” and paste the following HTML code inside:
<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
<section>
<h1>About Me</h1>
<div>
<h2>Mr Smith</h2>
<p>I am currently following a course to learn all about HTML!</p>
</div>
</section>
</body>
</html>
There’s nothing here you don’t already know. We’re just showing different text. You can replace “Mr Smith” with your own name, and say whatever you like about yourself. Make the text in the <p> tag personal!
Let’s add something new – how about a picture of ourselves?
Copy a picture you’d like to display into the folder, and give it the name “me.jpg”. If it’s not a .jpg file then replace .jpg with whatever the current extension for your picture is. I’m using a PNG file so I’ll call it “me.png” like so:
Description: HTML 6 - 1
We want to add this image to our About page. To do this we’re going to use a new tag, the <img> tag.
The <img> tag
The <img> tag is a self-closing tag that uses attributes to determine how it displays. If you don’t remember about self-closing tags and attributes then go back and revise our “Introduction to HTML” lesson from earlier in the course.
We want to add this tag:
<img src=”me.png” title=”A picture of me” alt=”A picture of me” />
We can see that the image tag has several attributes. Of these, the most important is the src attribute. This tells the browser what the source of the image is – in this case, our image is “me.png”.
The title/alt attributes tell the browser more about the image. When you hover an image with your mouse the title text is displayed, and the alt text displays instead of an image if the browser can’t find the image, or for people who use screen readers to look at the web, such as the visually impaired.
It’s good practice to always include a title and alt attributes, which should describe the image.
Let’s put the image in at the end of our “About Me” <div>:
<div>
<h2>Mr Smith</h2>
<p>I am currently following a course to learn all about HTML!</p>
<img src=”me.png” title=”A picture of me” alt=”A picture of me” />
</div>
So our HTML should look like this:
Description: HTML 6 - 2
And now our About page looks like this in the browser:
Troubleshooting: If your image doesn’t load properly then use the F12 Developer Tools to see the error. The browser will tell you where it is looking for the image – check that it’s looking in the correct place. If not then you can move your image to where it IS looking, or change your img src to point to where the image actually is. If you see funny characters like %E2%80%9D in your error, then it means your quote marks around the “src” attribute aren’t the right kind of quotemark… try deleting them and typing them again. Sometimes when we copy-paste we copy characters that LOOK the same but the computer treats differently! We will look at why this is in a future lesson.
Next – the <a> tag
So we’ve added an image to our ‘About’ page. But what if we wanted to get between the Index and About pages? We need a LINK.
We all use links all the time to navigate the web – we’re so used to clicking text to take us to other pages we often don’t stop to think about how they work.
Links are just simple HTML tags that tell the browser “when someone clicks here, go to this page”. The tag is the <a> tag – one of the most important HTML tags there is.
Here’s an example <a> tag:
<a href=”About.html”>About</a>
As you can see, we have another attribute to learn: the href attribute. This tells the browser where the link is pointing to. The contents of the element is what is displayed that you can click on. Of course, this doesn’t have to be just text: if you put an <img> tag inside an <a> tag then the image acts as the link!
Let’s add one link to each of our pages.

Image result for html
  1. Put <a href=”About.html”>About</a> into our index.html
  2. Put <a href=”Index.html”>Index</a> into our about.html
You can put them wherever you like. I’ve added mine before the start of the <section> element, so it looks like this:
Now our pages both have links, so we can click from one to another!

Save both your files, and hit F5 to refresh. Try clicking from one page to the next, and back again. It’s starting to feel more like a real webpage!                                           How to add navigation to a simple HTML page

In this lesson we’ll add navigation between our two simple HTML web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
Our link at the top looks a little lost and alone. Most websites have more than one page, so let’s add an element that lets us navigate between multiple pages. In the process we’ll meet some more new tags, and even add our first CSS style.
Make the following changes to your index.html:
<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
<nav>
<ul>
<li><a href=”Index.html”>Home</a></li>
<li><a href=”About.html”>About</a></li>
</ul>
</nav>
<section id=”content”>
<h1>FOTC Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple tools. This is great news as it means everyone can learn to make websites.</p>
<p>For now we only have a simple page, but later we will make it more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a page.</p>
</div>
</section>
</body>
</html>
You’ll note that I’ve removed our old <a> tag from inside the <section>. I’ve added an id attribute to the section – don’t worry about that for now, we’ll need it later.
I’ve also added a new <nav> element which contains some HTML.
Make the same changes to about.html – remove the old link, add the SAME <nav> element and the id attribute to section.
Description: HTML 7 - 1Now both pages should have a list at the top that looks like this:
Let’s look in detail at these changes.
The <nav>, <ul> and <li> elements
The <nav> element is a special grouping element. It doesn’t do anything technically to the site, but it allows computers and search engines to understand how to get around your site. It is short for navigation. Each webpage should have one <nav> element which contains links to the different sections of your website.
Inside our <nav> element we’ve used another new tag, the <ul> tag.
This tag stands for unordered list – it is used whenever we have a LIST of items… such as a list of sections for our website. There are other kinds of list tags, such as an ordered list or a numbered list, but the most appropriate list for navigation links is an unordered list because it doesn’t matter what order the links are written in.
Inside the unordered list we have two <li> tags. These stand for list items – a <ul> must have one <li> for each item in the list. And each list item contains our links.
Now whenever we want to add a new page to our site we just have to add a new <li> to our list which contains the appropriate link. For example, if we wanted a Contact page, we might create Contact.html and add: <li><a href=”Contact.html”>Contact</a></li>
I’m sure you can think of many other pages you might want to add to your own sites.
Styling our navigation list
We are going to look at CSS in more detail later. For now let’s just add some to make our navigation look a little nicer.
Inside our <head> element on both pages, add the following HTML:
<head>
<title>FOTC First Website</title>
<style>
html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
</style>
</head>
Now if you save and refresh you’ll see we have a navigation bar on both of our pages, and the pages all look much prettier.
Description: HTML 7 - 2For now, don’t worry about understanding the code we’ve just added. All of the unfamiliar looking text is CSS, which we will cover in a future lesson. You may notice the names of colours we’ve added – you can change those colours and save and refresh and see what happens!
Experiment by setting the colour names to different colours and seeing how it affects your website. See what combinations you like!
Wait, didn’t you say NOT to put styling in our HTML? What is this <style> element then?
You’re right, I DID say not to do that. If you’ve experimented with changing the colours and swapping between the pages then maybe you’ll realise why! The <style> element lets you put CSS code into your pages, and the CSS code changes the way your page looks.
HOWEVER, we have to put the same CSS code into every page. If you tried changing colours then you probably found that you had to make the same changes on both pages – which is annoying and difficult to remember. Imagine if you had 100 pages on your site… you’d have to change 100 files every time you wanted to change how your site looks.
So, we have in this case used a <style> element in our HTML, but hopefully you can see why it’s a bad idea. Later in the course we will replace our <style> element with a better solution – but for now we haven’t yet learned how to do that so we’ll just keep our <style> element until then.
Class, ID and < div > and < span > in HTML
In this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our HTML.  If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it and refresh the browser to see them, as usual.
Classes and IDs
Class and ID are two very important attributes that can go on any HTML element.
Class is used to group together elements that are alike in some way.
ID is used to identify one particular element that we want to interact with.
For example, earlier we added an ID to our <section> element, like so:
<section id=”content”>…blah blah blah…</section>
This is so we can tell this <section> element apart from any other <section> elements we might add later. What this says is “this section element is called ‘content'”.
IDs are referred to using the “#” symbol, so the correct way to describe this element using its id is #content. This means “the element with the ID ‘content'”. This is called a selector.
There can only be one element with a particular ID on each page. In other words IDs specify an element that is unique.
Classes are used to group together alike elements that share a characteristic.
For example, our page might have many <li> elements. (remember <li>? <li> is a list item – an item that appears as part of a list). Imagine a page with lots of different lists on it, all with lots of <li> elements.
What if we wanted to do something with just ONE group of the list elements? Well, we could add a class to those list elements. Something like this:
<ul>
<li class=”special”>Item One</li>
<li class=”special”>Item Two</li>
<li class=”special”>Item Three</li>
</ul>
Now we can specify the list items that have the class “special”. The selector for classes uses the symbol “.” so in this example our selector would be .special
Classes do not have to be unique, they can be shared by any element that you want to be part of the same class.
It will be important to understand classes and IDs when we start learning CSS in detail later.
The <div> and <span> elements
We have already seen the <div> element: it acts as a group, to collect together multiple elements that we want to keep together.
The <span> element is similar, except that it acts inline where <div> acts as a block. Later in the course we will study the block model so we can understand this statement in detail.
For now, we just need to know that <span> can go inline as part of text without any effect. For example:
On our index.html page, we could add a <span> around some of the text, like so:
<p>It is possible to make websites using these extremely simple tools. This is <span class=”important”>great news</span> as it means everyone can learn to make websites.</p>
Replace your <p> tag in index.html with the above HTML and hit refresh.
Everything looks EXACTLY the same. That’s because we haven’t told the browser what a span with class important means!
Inside our <style> element in the <head> add the following line:
span.important { font-weight: bold; color: red; }
With our understanding of selectors we can probably guess what this CSS means – if we have a <span> with class important (i.e. span.important) then make it bold and red. If you save and refresh then you can see the text now shows as red and bold:
Description: HTML 8 - 1
What if the <span> was a <div>? Try changing the <span> to <div> like so:
<p>It is possible to make websites using these extremely simple tools. This is <div class=”important”>great news</div> as it means everyone can learn to make websites.</p>
Save and refresh and we get this:
Description: HTML 8 - 2
Ok. So the <div> has put “great news” on it’s own line. This is what we mean when we say <div> acts as a block – it is now a separate block between the other two lines, instead of being inline like the <span> tag was. This is the essential difference between <div> and <span> – <div> starts a new line for all of its content. Technically it’s a little more complicated than that, as we’ll see when we study the block model in more detail. But for now that gives us a good understanding to work from.
Wait, why isn’t my important text bold and red anymore?
That’s the other change – now our text isn’t getting the “important” change we made before with our “important” class.
If you remember the line of CSS we added, we said span.important – we specified that it must be a <span> element with a class important. If we remove the word “span” so it just says “.important” let’s see what happens.
Change the line of CSS you added earlier to read:
.important { font-weight: bold; color: red; }
Description: HTML 8 - 3
Now our “important” class is working again!
Of course, we don’t want to keep this as a <div> as we want the text to appear in line. So change it back to a span and save, so it looks like this:
Description: HTML 8 - 1
Now you can see how to use <div> and <span> to group content in your own websites, and we have begun to learn about classes and IDs.

How are complex HTML websites created?
In this lesson we’ll understand how more complex modern websites are created.
Now we have created our first website, with two basic pages and a navigation bar that lets us move between them. We understand how to add images, and how to structure our HTML documents. And the importance of keeping our HTML neat and clean.
However, before we move onto our next topic – which is CSS in much more detail – you may be wondering how more complex websites are created.
You will have noticed that editing HTML directly in Notepad is difficult, and that the internet is more complicated than the basic HTML files we are currently making.
This is because most of the HTML we load into our browsers when we navigate modern websites is automatically generated by the server.
When the internet was first invented webpages were just simple HTML files like the ones you have been creating. However it became difficult to maintain, so server-side languages were invented that generate the HTML automatically.
These are programming languages such as PHP or ASP.NET or Ruby on Rails. When a request comes in to a server running one of these languages the server checks the rules written in PHP (or whatever language the server uses) and generates the HTML that is then sent to your browser.
So is it a waste of time learning HTML if it is automatically generated nowadays?
No, not at all. In order to program well in a server-side language such as PHP or ASP.NET you must understand HTML very well, so practicing by creating your own web pages in a simple tool like Notepad is ideal!
It is a good idea to try and create a complex webpage first in HTML just to understand the problems you have. If you try and make for yourself a whole homepage, with an “About me” and a “Contact” page and some other pages, you’ll soon find that you become frustrated at how much HTML you have to ensure is the same on every page.
Remember our <nav> bar? We had to copy that into every page, so if we change our <nav> we have to change every file on our website.
Similarly with our CSS – we haven’t yet learned how to share CSS between multiple different pages. The difference here is that it’s easy to share CSS using pure HTML, but it’s impossible to share a <nav> bar across pages without using a server-side language.
Once you’ve completed this course and learned all about HTML, CSS and JavaScript you might want to look into learning a server side language such as ASP.NET or PHP.
I hope this helps you to understand how modern webpages are created.
In the next part of our course we will study CSS and practice styling our sample website.









No comments:

Post a Comment

Designed by Anyinature