Sunday, 12 March 2017

Learn The Basics On How To Code The HTML '' Part Two '' Introduction To HTML

Image result for html

Introduction to HTML

In this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to your browser.
Remember what HTML stands for? It stands for HyperText Markup Language.
Let’s look in more detail what this means.
‘Markup’ in computing means adding extra data to text in order to tell computers more information about that text. For example, in HTML we tell the computer which parts of the HTML document are to be displayed, which parts make up the navigation, even which parts are titles and which are content.
What is a HTML document?
A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more special than that. All we have to do is type our HTML into a document in a writing program – for example Notepad, or even Microsoft Word – and we have a HTML document.
Starting from the next lesson of this course we’re going to make our own simple HTML pages on our own computers, and learn all about HTML as we go.
First let’s understand what makes HTML special.
What are HTML tags?
HTML is just normal text, with additional information. This additional information is delivered through tags. Tags are the fundamental building blocks of HTML.
A tag looks like this:
Anything inside the “<” and “>” symbols defines the tag.

Can anything be a HTML tag?
Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only understand certain tags, so unless you use the tags that are officially defined as part of HTML then your tags will not work correctly.
We will learn all about the important HTML tags as we proceed through this course.
More about tags
Tags can be both opened and closed. For example, let’s look at a <span> tag (don’t worry about what a <span> tag is for now – we’ll get to it later):
<span>This is inside my span! I can put anything I like here.</span>
You can see that a tag is opened by having an initial tag such as <span>. It is then closed with a second tag that has an additional “/” symbol. Anything can go between the opening and closing tags – this is known as the tag contents.
This whole example from the opening tag to the tag contents to the closing tag is known as a HTML element. In this case we have created a span element, because we are using a span tag to define the element.
Elements are made up of tags.
Self-closing Tags
Some tags don’t require opening and closing tags, they can effectively open and close themselves in just one tag. These are often known as self-closing tags.
Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags don’t actually close themselves, but it’s a helpful way to picture what is happening. (If you’re interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’t have to self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to have.)
A self-closing tag looks like this: <tag />
Tags that can exist on their own, i.e. be self-closed include: <img />, <link /> and <meta />, amongst others.
Again, we will understand more about each of these tags as we encounter them when we start building our own website!

Tag attributes
The last important concept to understand about tags is that tags can have attributes as well as contents. Let’s add an attribute to our <span> tag from before:
<span class=”exampleTag”>This is inside my span! I can put anything I like here.</span>
Now our tag has a class attribute. Attributes can have values. In this case our attribute has the value exampleTag.
As with tag names, attributes can technically be anything. For example, we could have said:
<span lemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>
This gives our <span> tag an attribute named “lemon” and with a value of “fruityAttribute”.
However, just like with tags there are certain attributes that are important and have meaning. We will learn about these as we learn about each tag.
Putting it all together
Description: HTML 1
Here we can see all of the parts that make up an element.
Make sure you understand which part of the element is a tag, which part is an attribute, which part is an attribute value and which part is the element contents.
We will be referring to all of these throughout the course so try and memorise these now.

Viewing Website HTML in our browsers

In this lesson we learn how to view HTML using the free Developer Tools in our browser.
Before we begin building our own websites let’s look at the HTML that websites are already sending us.
Doing this helps us to ‘demystify’ HTML and to realise that websites aren’t magic – we can understand them and learn to build them ourselves!
All modern browsers – for example Google Chrome, Mozilla Firefox and Internet Explorer – have built in tools that let us look at the HTML sent to us from a web server.
Let’s try using these tools now.

Each browser is slightly different. In my example I’m using Google Chrome, so what you see might be different.
First I see the webpage I’m looking at:
Description: HTML 2 - 1
In order to see the HTML that this page is made up of I PRESS F12. This works in Google Chrome and in modern versions of Firefox and Internet Explorer. If this doesn’t work for you you might want to try upgrading your browser or installing another one.
Pressing F12 brings up the Developer Tools, which looks like this.
Description: HTML 2 - 2
I have highlighted the Developer Tools in red. Let’s take a closer look at it.
Description: HTML 2 - 3
We can see there are many tabs we can click, each of which shows different information about the webpage we’re looking at (again if you’re in a different browser this may look different for you – be brave, click and explore the Developer Tools until you can find the HTML! ).
For now, we’re only interested in the “Elements” tab – we want to see the HTML elements that make up this page.
Because my “Console” tab is selected at the bottom I have to press ESCAPE to hide it. Now I can see the Elements tab more clearly:
Description: HTML 2 - 4
Hopefully you can recognise that we’re looking at some HTML tags like the ones we learned about in the previous lesson.
You can see that the HTML here is more complex than our previous examples, but they are still the same principle: elements made up of tags that have attributes and contents.
Take some time to explore the HTML of a few of your favourite websites. It’s ok if you don’t understand it – for now we just want to get used to what HTML looks like, and to become familiar with using Developer Tools to view HTML that our browser is displaying.

Creating our first HTML documentImage result for html

In this lesson we will walk through creating an empty HTML document and learn about HTML document structure and some simple HTML tags.
First, create a place to put our simple website on your computer. Right-click your desktop and select New -> Folder, like this:
Description: HTML 3 - 1
You may have different programs installed or be on a different version of Windows so your options may be different, but you will have New Folder. If you’re on a different operating system such as OSX or Linux you can still follow this tutorial: just choose a place of your own to store the files we’re going to create.
Description: HTML 3- 2Name your folder with a name you’ll remember. We’re going to use this folder to keep all our files in for this whole project. I’ve named mine “FOTC Website Tutorial”:
Open your new folder, and right-click inside it. Again go to New, but this time click “Text Document”, like this:
Description: HTML 3 - 3
Rename the text document to “index.html”. You need to replace the “.txt” extension with “.html” – when you do this you’ll be prompted if it’s ok to change the extension. We want to make a HTML file so click Yes.
Description: HTML 3 - 4
Description: HTML 3 - 5
Note: If you cannot change the file extension, you need to enable the option to show file extensions in Windows – by default file extensions are invisible. When working in web development it is useful to have file extensions visible so it is recommended to change this setting. Instructions for changing it (and a handy utility you can download that will change it for you automatically!) are available at this link:
Right click the HTML file and click ‘Edit’. This will open it in Notepad. If you can’t find Edit, you can open Notepad through the start menu, then use File – Open to open the index.html file you’ve just created.
When you’ve done this you should have an empty document in Notepad like this:
Description: HTML 3 - 6
You can use much more advanced software than Notepad to do this, but an important part of this lesson is that you can use very simple tools to make websites, so we’re going to use Notepad. If you have a preferred text editor, such as TextMate, Notepad++ or another, then feel free to use those instead.
Copy the following text into your index.html file and save it:
<!DOCTYPE html>
<title>FOTC First Website</title>

This is our first FOTC web page.
Once you’ve hit save you can close Notepad.
Description: HTML 3 - 7
Now if you double-click your HTML file it should open in your local browser. If this doesn’t work you can open a browser (such as Chrome, Firefox, Internet Explorer) and drag your file into it to open it.
Here’s how the file appears when I open it in my web browser.
Description: HTML 3 -10
 You can see that the location of the website starts with file:/// instead of the http:// we’re used to. (If you can’t remember what HTTP:// means then go back and review the lesson on “What is HTTP” earlier in this course). Now that you understand what HTTP is you can understand that we don’t need to use HTTP to access our index.html because the file exists on our own computer: HTTP is used for talking to other computers.
So we can guess that “file:///” means that the browser is accessing a file on our local computer.
The rest of the web address is then the location of the file on our own computer.                        Underneath that we can see our web page. It’s not very exciting at the moment, as it just has a single sentence.
Go back to editing your notepad document and change the HTML contents of the <body> tag, like this (you can change it to whatever you like):
Description: HTML 3 - 8
Make sure to save your index.html in Notepad. Then go back to your browser window and press F5 to refresh.
As you can see the text is changed on our simple webpage:
Description: HTML 3 - 9
You can put whatever text you like in and it will appear on the web page.
This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to refresh is the simplest way of making websites. Of course when it comes to making more complex websites we will need to learn more complex tools, but this is an excellent way to understand the fundamentals of HTML.
In the next lesson we will look in more detail at the HTML we have so far in our simple webpage.

                                     READ ALSO PART ONE OF THIS ARTICLE

Image result for html
See What Others Are Reading Learn The Basics On How To Code The HTML '' Part Three '' Understanding Basic HTML

No comments:

Post a Comment

Designed by Anyinature