This is a series of tutorials that will help you learn to code HTML. Before we go getting our hands dirty (well, not literally of course), let us learn first the nuts and bolts of HTML.
Key learning words:
Elements
HTML tags
Attributes
HyperText Markup Language (or HTML as we know it) is the standard markup language used to create web pages. It is what we actually see on websites. On the technical side, we use HTML to create them.
A basic webpage is made up of different elements. These elements can be: text box, drop-down menus, buttons,radio buttons, links, divisions, tables and paragraphs (well, we'll deal with the others as we go on).
We create these elements using html tags. There are a lot of confusion over the internet on what is the difference between elements and tags. But as far as I understand it (please please please correct me if I'm wrong), the sense of these two terms is this:
elements - the very object that we see on a web page
html tags - the standard codes we use to create the elements on a web page
*feel free to share your thoughts with this on the comments below
There are different tags for each element we see on a webpage. An html tag is has a opening and closing tags.
<div>Anything goes in this part</div>
The above example is a div tag (one of the commonly used html tag). The <div> is the opening tag for the div tag while the </div> is the closing tag for the div tag.
These tags have may contain attributes, (same concept for an element having attributes). An an attribute provides additional information about the tag/element. This is usually coded inside an html tag which has a key-value pattern.
<div id="[you_div_id]">Anything goes in this part</div>
The id="[you_div_id]" part is an example of an attribute that an html tag may contain. This is the "id" attribute. Notice that it is in key=value pattern meaning that some value must be put into it. The left part of the equal sign is standard while the other side is defined by us, coders.
Creating your page
We'll be hyping it up a bit on this. Below is an example of a complete code of how basically our page will be coded.
<!DOCTYPE html>
<html>
<head>
<title>Your webpage title goes here</title>
</head>
<body>
<div>
[Anything goes in this part]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Let us figure this out piece by piece:
<!DOCTYPE html> - this is the declaration tag which determines what type of document we are creating. Upon load of our code on a browser, the browser will know that this is an html file and will read the markup language we have composed accordingly.
<html>...</html> - this is the <html> tag. We ALWAYS have this tag in every html code we create. We are instructing the code that everything inside the <html> tag is html (or something executable in the web perhaps :) ).
<head>...</head> - This is the <head> tag. This part is where we include all other head tags (tags/settings/configurations that must be preloaded or must also be initialized together with the webpage upon loading. Please don't confuse yourself with this description. We'll be dealing with this on another tutorial posts.) Example of other tags inside the <head> tag are:
- <title> (required in the head tag)
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
<body>...</body> - This is the <body> tag. Inside the body tag is where we start putting the elements we need to see on our webpage. (break it down yo!)
<div>...<div> - And lastly, the div tag. (Please refer to the one discussed above, before "Creating your webpage" section. Thank yah!)
Alright, now we know what are those weird words mean to us, let us now create our page.
Open any text editor (a notepad will do) and copy the code above (please disregard the colors). After doing so, save the file and name it as basic_page.html. We provide the file extesion .html so that our editor would know that this is an html file. Just save it where you want to save it (for now).
Nice, we have now our file, now where's the page?
Open your file using your preferred browser, or just simply locate your file and hit 'Enter'. It should display the "Lorem ipsum..." thingy that we created awhile ago. It should look like this:
*If you weren't able to achieve the same thing like the one above, please do not hesitate to leave a comment. I will surely address you guys with that.
HAPPY CODING.
