Hello, my fiends! In my previous lesson, I talk about Internet and crucial technologies, you have to learn, to become a Web developer. If we look at our plan, first thing to learn is HTML, so let's begin!
HTML or Hyper Text Markup Language is programing language which defines a structure of your web page. It gives a meaning to your data and make your web application more Search engine friendly. Building blocks of HTML are tags. Different tags give different meaning to your data. To use tags, you just have to put your data/text inside them.
Let's start making our first web page!
First step is to open Sublime Text editor (download link) or an editor of your choice. Now, crate new file and call it index.html. It is important to put .html on the end so your computer could know you are making a web page. Next, go to bottom of your editor (if you are using Sublime) and change setting, where it says Plain Text, to HTML. In some editors, it will be changed automatically, when you save your file as index.html.
Every HTML needs to be declared, to work perfectly. That is done by typing this on the first line of code.
<! DOCTYPE html >
HTML tags are build like this: < name of tag > . This is opening tag. It mean that everything from that point will have meaning of that tag. To close it, you will need a closing tag: </ name of tag >. Know everything from this point will not be influenced by that tag. Example:
< p > This is a heading.
This is paragraph. </ p >
Both sentences will be seen as paragraph, because < p > is tag for paragraphs. If you want Internet browser to see our first sentence as heading, we will need to use heading tag. There are six different heading tags. First one is < h1 > and it is reserved for main heading. There are also < h2 > < h3 > < h4 >... First tag will make your text the biggest and every other will be smaller, but still bigger that paragraph. Let's make our first sentence a heading.
< h1 > This is a heading. </ h1 >
< p > This is paragraph. </ p >
Now, we have one heading (first sentence) and one paragraph (second sentence). If we put our sentence like this:
< p > < h1 > This is a heading. </ h1 > </ p >
It will be heading and a paragraph, but when you start styling it, closer tag to text has a priority (it will be all clear when we start learning CSS). You can not put your tags like this:
< p > < h1 > This is a heading. </ p > </ h1 >
Tags can contain one another, but can not be mixed like the example above.
Every html page, must have one core tag, which is < html > </ html >. Everything you want to put on that page, MUST be inside that tag!
< html > tag must have two parts, head and body part. Both of them are tags.
This is an example of proper structured html file:
< html >
< head >
</ head >
< body >
</ body >
</ html >
Important thing is, to know what to put inside head and what to put inside body tag. You will put in body tag, everything witch will be on your web page. All paragraph, headings, images, links... go to body tag. In head tag goes links to CSS and JavaScript files (we will learn more about this), links to online fonts and more Browser friendly informations, which are not visible to user, but very important (we will go trough them, but now is not the time).
Here is an example:
< head >
< title > My page </ title >
</ head >
This title will not be shown on the page, but in the tab of users browser. It is not an element of your page, but information about it. For things like that, we use head tag.
I will not bother you with head tag anymore, for know.
I will give you some text formatting tags, so you could experiment with them. Just, put them all in body tag, put text inside them and open your html file with your browser, to se how they look. Here are text tags:
< b > - Bold text< strong > - Important text< i > - Italic text< em > - Emphasized text< mark > - Marked text< small > - Small text< del > - Deleted text< ins > - Inserted text< sub > - Subscript text< sup > - Superscript textLet's talk about link tags. Before we start using link tags, we must know what are attributes. Attributes are subelements of the tags and are used to give necessary or additional informations. They are located in an opening tag, just between the name and symbol >. Link tag or a tag, uses attribute href, which value represents a url, where that link leads us. Let see an example:
< a href = "google.com" > my link </ a >
Text, inside the tag a, will be blue text, where we can click and it will lead us to google.com. You can put whatever text, you want and whatever link you want. Image could be a link to. You just have to put image, aside a tag and whenever a user click on it, it will lead them to specified url. It is that simple.
I mentioned images, so next set is to lean image tag. It is important to know, that there are two kind of tags. There are container tags and self-closing tags. Container tags are all tags above. You need to open them, put text inside them and close them. Self-closing tags have only one part. Let see some example:
</br>
This tag will put everything after it, in a new line.
< p > This is </br> paragraph. </ p >
If we put it after "is", the word "paragraph" will go into new line, like this:
This is
paragraph.
Know when we understand what are self-closing tags, we can learn image tag. For images we use img tag and it is self-closing. Img tag needs an attribute src, which value represents a path to the image, like to put on our page.
< img src = "here goes the url to image" >
This will display a image on our page.
< a href = "google.com" > < img src = "here goes the url to image" > </ a >
Now, if we click on our picture, it will lead us to google.com.
There are two types of lists. Ordered and unordered lists. Both are container tags. For ordered we use ol and for unordered ul. Inside these tags, we put elements of our lists. These elements need to be waged with li. Example:
< ul >
< li > Element 1 </ li >
< li > Element 2 </ li >
< li > Element 3 </ li >
</ ul >
ul and ol will just say the type of list, but we need li's for lists elements.
We will use lists in next lessons, so don't worry if everything is not clear.
Now, how to make a table?
it is simple, we use table tag! Inside a table tag, we but tags for rows and cells. For rows, we use tr tag. it depends, how many tr tags we put inside table tag, that many rows, our table will has. Now, inside tr tag, we put th or td tags, which represents the values of cells in that specific row. th is for first row, where every column is explained and td is for every other row. See the example and everything will be clear:
< table >
< tr >
< th >
Number
</ th >
< th >
Name
</ th >
< th >
City
</ th >
</ tr >
< tr >
< td >
1
</ td >
< td >
Philip
</ td >
< td >
Belgrade
</ td >
</ tr >
< tr >
< td >
2
</ td >
< td >
Susan
</ td >
< td >
New York
</ td >
</ tr >
</ table >
That is it for today. I hope that I help you my fiends. If you missed my first lesson here it is. In my next lesson, we will start with CSS more advanced HTML. Soon, we will be able to create beautiful web pages! Have a nice day and thanks for reading!!!