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!