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.
An actual example.
This is how an HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<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.
Very cool tutorial on a subject many people are intimidated by for sure.
I like how you laid everything out in an easy to read style.
Thank you so much. This gives me motivation to go further with those tutorials :)
Nice one....love this.... Upvote from me .... Also kindly check out my blog
Keep posting my friend, me too just now I find my post nonesense and less helpful. I also make a post on another scripting language to back you up. I do my php basic.
nice post... i follow your tutorial
This post has received a 10.24 % upvote from @booster thanks to: @dragos0897.
This post has received a Bellyrub and 33.28 % upvote from @bellyrub thanks to: @dragos0897. Send SBD to @bellyrub with a post link in the memo field to bid on the next vote, every 2.4 hours. Be sure to vote for my Pops, @zeartul, as Steem Witness Hope you enjoyed your bellyrub!
Nice explanation! Great job! :)
I only want to point out that HTML can't be considered to be a scripting language. This would be javascript then. You can't apply any logic or use structures like loops or handle any data operations in HTML alone.
And here's a suggestion for another tutorial: The basics of HTTP... maybe compared to IPFS.
Great job
great content! and thanks again for following!