How to build a website from scratch - Learn HTML - Part #1
dragos0897
Published: 01 Sept 2017 › Updated: 01 Sept 2017
How to build a website from scratch - Learn HTML - Part #1
I've been wondering about how helpful are my posts to this community and after a couple of minutes I figured that my posts aren't helpful at all. So i decided to do something about it.
I am a student in programming, first year, and I am really passionate about web development and design with an accent on front end. So I wanted to share some of my knowledge with you guys!
Without further explanations, let us dig right in!
What is HTML?
HTML stands for Hyper Text Markup Language. To make the first observation here, HTML is NOT a programming language. It is considered to be more of a scripting language because it involves no automation. However, if you learn Javascript you can generate webpages which is pretty neat.
Versions of HTML
In this tutorial we are going to be talking about the latest version of HTML which is HTML 5.
What do I need to begin?
In order to code you need an IDE (integrated development environment). You might be thinking: what in the world is that?
An IDE is a space where you code. As simple as that. It could be your notepad or just any text editor. However, if you want to see your code in action you need a compiler. A compiler analyzes your code and if there are no mistakes the code runs and it is displayed on your screen (if it is something to display). The compiler of HTML is your browser. Your browser analyzes what you've been coding and if there are no mistakes, your page is up and running. To make a parallel between HTML and C++ for example. If you type something wrong in C++ your code will end up with an error and it will not run at all, whereas on HTML it still runs. But the webpage will look like trash.
My recommendations: You can download Atom, Sublime Text, Notepad++ or if you are using a Chromebook you can download Caret from the Chrome Web Store.
<h1>This is a Heading</h1> <h2>This is a smaller Heading</h2> <p>This is a paragraph.</p>
</body> </html>
Pretty dope right?
Understanding the Syntax
The syntax of html is extremely simple. Every <thing> that you saw there is a tag. A tag has a pair (not always) and its pair is called ending tag. As an example we can use this: <h1> Text </h1>
The <h1> is an opening tag, and in this case this means header one and </h1> is the closing tag of header one. Closing tags is extremely important because if you forgot to close a tag the text messes up with the next tag and we don't want this to happen.
Also, have you noticed that the ending tag contains a forward slash? This says to the browser: Hey this is the ending tag.
Every tag and closing tag keep content between them. This whole group is called an element. So if we are to create an element for example a paragraph we can do the following:
<p> I just made a paragraph element </p>
Let's get back to the code and explain the rest
<!DOCTYPE html> - this guy right here tells the compiler that we are writing HTML 5. It's mandatory. We write this at the beginning of every HTML document.
<html> This tells the browser that between those tags we stacked more tags that made up the webpage. Between <html> and </html> goes the entire script. So you probably noticed that we can nest tags within tags. Writing this is also mandatory.
<head> Every HTML document has a head and a body. In the head we usually write page information which is not displayed on the webpage it is rather displayed on the search engine or not at all. This is more of a back end side.
With the help of attributes we can write within the head section of the HTML document description and the name of the webpage as well as linking additional scripts and so on. What we see above is the description of a webpage written in the head tags.
<title>Page Title</title> What you write within the title tags goes here:
<body> - between this tag and its pair goes the seen content on a webpage.
Wrap Up
I guess this short tutorial will do for the first part. If you found it useful let me know in the comments below. Thank you for reading!
Leave How to build a website from scratch - Learn HTML - Part #1 to:
We have not curated any of dragos0897's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.
