Back to: Python and Django Full Stack Web Developer
HTML Basics
Let us start Learning about HTML Basics. This section of the course will start off by covering the very basics of HTML
What is HTML?
HTML stands for Hyper Text Markup Language. It is the most basic building block of the web and every website will need it. It is our first fundamental step in understanding how to build web applications. Later, we will learn other technologies such as CSS to style the HTML and JavaScript to add functionality.
Then once we reach the Python and Django sections of the course, we will learn how to add Django template tags to HTML and dynamically generate content based off a user’s interaction with the website!
All of that is still quite a bit away! For now, we will start with level one:
- HTML Basics
- Tagging
- Lists
- Divs and Spans
- Attributes
Remember as you code along with the course, you can always reference the corresponding notes to check your code!
HTML Basics
Let us start by exploring the basics of what an HTML file looks like and how can use open it in a browser, plus we will learn some atom text editor convenience features to quickly create an HTML file. We will jump to the ATOM text editor. As a quick note, we can create new files at the project folders provided for you.
You can just right-click and add a new file, new folder, or add project folder. Just by right clicking you can add or open a new project file in that you have to create a file accordingly. For example, if you want an HTML file you create a folder for HTML. For CSS create a separate folder so it will be easy to access
We have already created a project folder named HTML_LEVEL_ONE.
QUICK NOTE: Try to avoid using spaces in your folder names or file names you should always try to replace them with an underscore to make sure that you can read the whole file path with the computer without messing it up.
Let us start by creating a new file by naming it basics.html.
As you start typing HTML atom text editor has a pop-up showing HTML.
After pressing enter it will get the skeleton code of the HTML file.
At the very first line, we have <!DOCTYPE html> this basically tells you that ‘hey! You are looking at an HTML file. Then we have the <html> tag we have an opening tag at line no-2 and a closing tag at line no-10. And the difference between an opening tag and a closing tag is it just lets you know when it starts and when it ends and the closing tag will have a little forward slash in it.
Then we have 2 parts of an HTML file the head and body. We will start with the head, which contains metadata. Head also contains two tags one is opening <head> tag and one is closing </head> tag
(We will not be doing the whole lot, we will see it later in CSS and JAVASCRIPT), it is actually used to link other files like CSS and JAVASCRIPT. And another tag in the head is the title tag which is basically shown as the title when we open it in any browser shown in the tab.
So, I am going to type in between the title tags. And then there is another metadata that is just telling you what character set you would expect, and that’s UTF-8
We will not use any types of quotes or etc but HTML we directly recognize it. The second part which is the body contains the actual content. We will discuss paragraphs, lists, etc in the body.
At last, we are going to see comments which look like <!–anything here is a comment –>
The other quick way to do this is if you have some text or line of code, you can just do control or commanding depending on your OS of forward slash. So, anything in between those two types of tags is a comment and it’s just a controller command forward slash to quickly make a line or multiple lines in actual comments.
We use CTRL+S to save the file and view it in the browser. Just right-click on the file and choose copy full path.
And paste it into the browser and enter. We will just get a blank page since we didn’t provide any content in the body but can notice the title of the webpage. We haven’t provided any content or HTML content in the body of our HTML file, but what we do notice is this our little this is the title and the title actually showed up perfectly.
These are basic tags of HTML and the next part will be continued in the next article.
