[Tutorial] HTML 101: Learn The Basics
Greetings Steemit Users, I’m going to run through some of the basics of HTML in order to give those who aren’t familiar with it a better understanding so that they can use it in their Steemit posts. I’ve already included some basics tags in part two of my Steemit Beginner’s Guide, but failed to really discuss what HTML is and why we might want to use it.
Hypertext Markup Language (HTML) is the language the web is built upon, every single site, page and post uses it. HTML is not a programming language, but a structural markup language, but what does that mean? We use HTML to structure our web pages, it’s almost like the skeleton of all websites. It forms what’s often referred to as “a triad of cornerstone technologies” along with Cascading Style Sheets (CSS) and JavaScript (JS). Using all three of these technologies, we can not just build impressive websites, but entire web applications. If HTML is the skeleton, then JS is the guts and CSS is the skin and outward appearance.
There are a few different variants of HTML, but we won’t go into that in any great detail. All you need to know is that the latest and most commonly used version is HTML5. We will try to keep our HTML tags as HTML5-friendly as possible, although some are technically “illegal” as far as HTML5 is concerned, but we won’t worry about that.
HTML mostly consists of tags and character references, but we’ll be focusing on tags in this tutorial. We use the tags to create a structured nest of HTML elements, and in their simplest form these elements come in pairs, taking the form of an opening and closing tag. For example, if you want a paragraph of text, you’d use the p tag like so;
<p>Some text here.</p>
Occasionally, elements don’t require a closing tag and instead have a closing / at the end of the tag, such as the horizontal line tag;
<hr />
We’re going to step out of Steemit for a moment, and create a very basic web page so that you’re more familiar with HTML. Start off by opening up Notepad (or your basic text editor of choice, not Word) and we’re going to jump straight into it.
1. To start any HTML document, we need two things; the Document Type Declaration and the HTML elements. Go ahead and type the following into Notepad;
<!DOCTYPE html>
<html>
</html>
2. Those two tags will tell the browser that this is a HTML document, and so it should process it as such. Next we want to define two things; the Head and the Body of the document. Type the following on a new line in between the two HTML tags;
<head>
</head>
<body>
</body>
3. The head tags stores information such as meta tags, the page title and is where you link to external sources such as CSS or JS. The body tag is where the contents of the page goes. Now, we’re going to give this page a title, so go ahead and type the following on a new line between the head tags;
<title>My First Web Page!</title>
4. Now let’s get some text put on our page. On a new line in between the body tags, type the following (you can put any text you want in between the tags);
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
Your document should now look like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
5. Save the document as index.html then go to where you saved the file. Double click it, and it should open up in your web browser, and you should be looking at your very first web page, congratulations!
There are so many tags that there just isn’t the time to go through everything, but for some basic tags to get you started check out part two of my Steemit Beginner’s Guide. It also includes the basics of Markdown, a light-weight alternative plain-text markup language that you may find easier to use than HTML. If you’re interested in taking your HTML skills further, I strongly recommend you look at Codecademy. Codecademy is an educational company that's committed to building the best learning experience inside and out, making Codecademy the best place to learn new skills. There is a free account but if you’re serious about developing your skills, I strongly recommend you check out their Pro Membership.
Did you find this helpful? Did you have any troubles getting your first web page going? Let me know in the comments section down below, and as always make sure to follow me for the latest Cryptocurrency, Internet and Pop Culture updates. If you're looking for some homework from this lesson, see if you can add a link to Steemit and an image to your page. Until next time, keep coding!
You just planted 0.23 tree(s)!
Thanks to @johngreenfield
We have planted already 3498.75 trees
out of 1,000,000
Let's save and restore Abongphen Highland Forest
in Cameroonian village Kedjom-Keku!
Plant trees with @treeplanter and get paid for it!
My Steem Power = 18649.22
Thanks a lot!
@martin.mikes coordinator of @kedjom-keku
Good share...
Thank you very much! It is an opportunity for me to learn! I will follow your generous classes!
You're very welcome, I hope you find it helpful! If it's something people are interested in, I'd love to do a tutorial series around Web Design/Development for Beginners. I used to work as a Web Developer for a few years, but tend to just stick to doing it as a hobby these days.
Nice! I'd try to keep some indentation in your "index.html" so it's easier to read :)
HTML5 isn't nowhere close to being the most common version as there is a lot of browsers around that can't parse HTML5 documents. It's also false information that all pages are HTML, as quite a lot of pages are not.
HTML3 is a lot more common than HTML4 or HTML5 as it is the last version before W3C started deprecating old tags and moving towards XML compliant documents.
I'm sorry to disagree with you, but these days, according to Document Type Declaration tags, HTML5 is the most common version of HTML in use. Also, what browsers are you referring to? Since Chrome has a roughly 80% market share, and all the big players support HTML5, I'd argue that smaller browsers that still aren't capable of parsing HTML5 aren't common enough to count.
HTML4.01 is down to just 2% of web pages, and HTML5 taking 80% now. Granted, my source only took a sample of around 20 million pages, which is just a drop in the ocean, but I feel that is fairly representative.
This post is aimed at people with no technical background, and I've taken some liberties in order to keep it as accessible as possible, it wasn't meant as a technical discussion of the various flavours of HTML i.e. SGML or XML-based.
Sources:
W3Schools - Browser Statistics (https://www.w3schools.com/browsers/default.asp)
HTML Version Statistics (https://try.powermapper.com/stats/htmlversions)
Edit: Oh and yeah you're right about not all web pages being a HTML document, however even the alternatives will still be a HTML document at their core. Again, I'm just trying to keep things simple.
The problem with your assertion is that a lot of pages don't have DTD tags and even if they have, they don't validate as valid HTML4 or HTML5... A lot of Asian websites still require old Internet Explorer due to use of ActiveX controls which haven't worked since Internet Explorer 9 and hasn't worked with Chrome or Firefox at all without extensions.
I accept that there's a small minority of sites that are basically legacy sites, however I still feel my original statement is accurate. Most people reading this post won't come into contact with the type of sites you mention, I don't have a large Asian audience.
Great guide!
As a friendly reminder, the upvote fee is $0.08 SBD ($0.081 for incognito). Current 300%+ upvote is now $0.24+ SBD.
That being said…
Investors who delegate SP to @thundercurator are entitled to 75% of @thundercurator income after curation. Get on-board early and grow with us!