Lesson 1: Introduction to html
Client server model
The Internet and web is all about client and server model. Client is your browser and server will be the site that you enter the address of it in your browser address bar.
Enough with this information. You can always read more about this on the Internet.
If you are interested to learn more about it checkout following link:
What we are really learning in this course
Take a look at one of our educational videos on youtube and see how much of it you understand! After looking at it, start browsing other tutorials of the channel! If they seem easy to grasp, then you do not need this course even though it could be a good reference to recall some of the web development patterns that you might have forgotten.
Checkout following link to see all the tutorials in our youtube channel: FrontendTips
Tools needed for this course
There are 2 ways you can start coding in our course.
Our recommendation is to use our online code editor which we use extensively in our video tutorials and also in creating our prototypes. You just need to signup and you are ready to go.
Watch our tutorial on how to use this online editor at Kodity online code editor
Any of the following Text editors will do
- Sublime Text
- Notepad in windows
You just need to search for them online and download the one that you like. Our recommendation is Sublime Text.
That’s about it for the tools you need.
Keep in mind that many of our code samples will be on our online code editor (Kodity).
Let’s get started
Alright! I guess now is the time.
Open your favourite text editor (In our case it’s Sublime Text). Create a new file and save it with .html extension. Let’s call it index.html
Copy and paste the following code in it:
<!DOCTYPE html> <html> <head> <title>Our first experiment in html</title> </head> <body> <header> this is my header </header> <main> This will be my main content </main> <footer> I will fill this one with copyright information and maybe some links </footer> </body> </html>
and save it.
Now go to your directly were you saved this file and click on it. Make sure it is saved with .html extension.
Click here to see how it looks.
Now a bit about all those
These are called Html tags.
They start with < and end with >. You need to memorize them but you do not need to memorize them upfront. There are only limited number and you will learn them over time. So, don’t worry about it now!
So these tags are usually used in a open – close fashion. what it means is that if you have
<html>, you will need to have
</html> as well. Whatever you enter in between will be the content of that tag. There are some exceptions to this rule like
<img> tag which does not need a closing tag which you will learn them gradually over the course of this serie.
As you see in the code sample we have following:
... <header> this is my header </header> ...
header tag is used when you want to define the header of your webpage. Just like the footer that is for the footer of your page. As you can see, I just added “this is my header” in between the opening and closing header tag.
Everything that you see in the browser window when your open your html file is created using different tags in between the opening and closing body tag.
following is the list of html tags that I often use
Let’s use some of them in our code.
<!DOCTYPE html> <html> <head> <title>Our first experiment in html</title> </head> <body> <header> this is my header </header> <main> <h1>Welcome to my website</h1> <p>During this course, I want to build this website and learn the basics of web development! How cool can it be!</p> </main> <footer> I will fill this one with copyright information and maybe some links </footer> </body> </html>
Now save this and open your index.html file. If it’s already open in your browser, just refresh the page.
Click here to see how it looks.
As you noticed we have added h1 tag and p tag. h stands for header and p stands for paragraph. This way you can add header titles and paragraphs based on html standards.
Following link has almost all the html tags that you can use in your html webpage: HTML Element Reference
Alright. We have reached the end of first chapter. You can always ask your questions by sending an email to email@example.com or a message to our Facebook page at Kodhus facebook page.
Stay tuned! Next tutorial is coming!