Yesterday, some time after midnight, likely even after 2 am, I had the misfortune of reading what was possibly the worst introduction to HTML ever. So, in pure anger and frustration, I started writing a basic HTML introduction. Enjoy?
Just don't downvote me because it's so boring.
(source)
HTML is simple. Anyone can learn it. No, it is not a programming language. It is a formatting language. To be precise, it is a "markup" language. HTML stands for "Hypertext Markup Language".
Source: Google. Yeah, I totally screenshotted Google'e define feature.
"Hypertext" refers to linking documents together with hyperlinks.
Source: Still Google. Yeah, it's a fucking convienent dictionary.
If you're a geek, you've probably had to use those links atypically, and access them with the keyboard, in Links or Lynx, via the Linux command line.
So, basically, HTML is a formatting language for pages that are linked together by hyperlinks.
Way back in the day, HTML was a lot dirtier. It was ugly. There were all these caps. It was horrible.
Then when HTML 4.01 came out, they reformated HTML to be XML, with the advent of xHTML. (XML stands for "eXtensible Markup Language".)
If you knew HTML way back in the day, you probably would have noticed the change over, as HTML got a lot more "strict". It was a total pain in the ass. Now days all HTML is XML, but you can turn on or off strict mode.
The only real difference it makes though is that you have to close all your tags. The web isn't as strict as the language though, so you don't have to worry too much.
(source)
Lets get started!
HTML consists of tags, with more tags nested within those tags, and then data nested in that. I know, you have no idea what I'm talking about. Lemme show you with a handy image found on the internets.
Image used under Creative Commons Attribution-Share Alike 4.0 International license. (source)
You can see multiple tags in the image.
Every tag consists of the tag name, surrounded by a less-than sign on the left, and a greater-than sign on the right. In this way, it sort of looks like the less-than and greater-than are containing the tag.
Image used under Creative Commons Attribution-Share Alike 2.0 Generic license. (source)
Tags in html are nested, like russian nesting dolls.
Close your tags!
Every tag is closed with a forward slash. The most common way to do this is to put the same tag after the first, with a forward slash just before the name of the tag.
<html></html>
Above you can see the opening and closing of the html tag. Almost everything in an html page is contained within the html tag.
The HTML Tag
The HTML tag pretty much contains everything in the HTML. The only thing it doesn't contain is the "doctype", which isn't necessarily required.
The Head Tag
The head is used to contain all the stuff in the page that isn't actually displayed. The primary thing that it contains for the most simple of pages is the <title> tag. It also often contains Javascript and CSS these days.
The Title Tag
This tag is contained in the head of your page, and gives your page that is displayed in the menu bar of the web browser, in bookmarks when you save it, and in search engines. Make sure you pick a good one, and format it well.
I could actually go on for a bit on titles for web pages, but I'll just say that you should consider how it will be viewed the various places titles.
Like this tutorial might be "Quick and Simple Intro to HTML by geekpowered - steemit.com".
Assholes sometimes put the name of the site first. Don't do this. Only do this if it's the main page. It ruins bookmarks.
The Body Tag
Everything in the body of the html is contained within the <body> tag. I know, so complex, right?
The BR Tag
The <br> tag isn't some super important tag. It's not required in the structure of an HTML document. You will use it a lot though. This is because it's a line-break, and HTML doesn't do those automatically. If you just pasted a bunch of text into an HTML document, it would look like it deleted all of your line breaks (returns), as well as any place you included more than one space. It just does that.
<br />
The <br> is a little special in at least one way though. It's a singular tag. It makes no sense to nest something inside a line break. But XML is anal, so you have to close it. What that means is that you get the weird looking tragedy above. You put a forward slash before the greater-than to close the tag before it's even finished. The forward slash before the closing of the tag is to denote that the tag is self-closing.
This isn't strictly required, but it is required in strict. #badumtss
Note: If you run code through an HTML checker, it will probably give you a warning or throw an error if you don't close your <br> tags. You should always close your tags.
The IMG Tag
The img tag (pronounced "image") is another semi-special one, in that it's a singular tag that doesn't have anything nested inside of it. It does almost always have attribute though. Those are the words that you find within a tag.
<img src="http://blah.com/thisisanimage.jpg" alt="alternative text if the image doesn't load" />
Only the "src" (pronounced "source") is strictly required. It contains your source URL.
The Anchor Tag
Finally, the links that make this HTML.
<a href="http://linkurl.com/somebullshitpage.html">Click here FFS!</a>
Anchor tags could also said to be a bit special, because they always have one particular attribute, the "href". This is the URL that you want to link to.
The Paragraph Tag
<p>Some text.</p>
Paragraph tags are used on everything now. Everything is supposed to be in a paragraph tag. They might give you problems with spacing though. Just one of the things that the introduction of CSS fucked us over with.
The DIV Tag
These serve absolutely no purpose, other than to have something to slap some CSS onto.
The Center Tag
The <center> tag is deprecated, in favor of using CSS, but it's still used a lot, including here on steemit.
<center>This text will be centered.</center>
The HR Tag
The <hr> tag is another of those standalone tags. It's also known as the "horizontal rule". Basically, it's a big horizontal line, to break up your text, and make it easier to read. I shoudl really learn to use them more.
<hr />
So, what have we learned? Hopefully that HTML isn't that complex. Or maybe you didn't catch much at all.
(source)
Examples:
Centering an Image
The easiest way to center an image is with a <center> tag.
<center><img src="http://blah.com/thisisanimage.jpg" /></center>
This makes use of nesting of the image tag within an opening and closing center tag.
But of course, they had to deprecate the center tag, to be knobs. So, lets introduce you to a little CSS. This is not a CSS introduction though. That would take a lobotomy, because that shit is fucking stupid.
<img style="margin-left: auto; margin-right: auto;" src="http://www.blah.com/thisisanimage.jpg" />
This is using the "style" attribute, which is used to embed CSS in one of your tags. They would prefer you put everything in a separate CSS file, but da fuck they know? These dumb fucks thought it was a good idea to make it so that you have to set the margins to auto, which means they automatically fill up whatever space they can get, to center an image. So who cares what they say is deprecated.
Excuse me, before I have an aneurysm. That's just stupid.
Linking an Image
Wanna be able to click an image and go somewhere? That's easy enough. It's just using the same nesting I've shown you from the beginning.
<a href="http://www.somedumburl.com/coolpage.html"><img src="http://www.coolimages.com/thecoolestyo.jpg" \></a>
That's it. Just nested an image tag in an anchor tag.
(source)
So, got all that? No? Sucks to be you.
I would highly suggest you head over to W3C.org. All this shit was from my head, but I've used them as a regular reference for almost 20 years now. They're legit.
I don't expect you to pick up all of HTML from a basic post. You shouldn't either. I could literally write a book on it, and still have to cut so much out. I didn't want to create an end all be all reference, but maybe it was enough that you got a basic grasp, and you can use some basic tags. But, if I failed you in that, I'm sorry.
(source)
If you liked the post, consider upvoting or resteeming. And leave a comment below.
Edit: Sorry if you caught this early and caught the portions of the post. I went through a paragraph at a time looking for what was causing a REALLY stupid bug. Managed to find it eventually.