So, you’re on the internet, and maybe you’re not sure what all this jargon means, so over a few posts I’m going to share a little knowledge, and hopefully help you out a little. So, to start with the basics, or at least start with possibly the most well known of the Jargon terms.
HTML, Hyper Text Markup Language. Was developed by Sir Tim Berners Lee in around 1991, as a method of linking pages together across the internet. Hyper Text is the type of text you see on the Internet, with images embedded into it, and Hyper Text Links embedded into the page, allowing you to click and move to related documents and information. Hypertext documents have existed since the 1960’s, but HTML linked documents on different servers together, allowing the creation of the World Wide Web, where you could start reading on one site, and end up clicking through pages and losing half your day (or is that just me).
HTML files are really just fancy text files, but obviously saved out .htm instead of .txt, and can be edited with a text editor such as notepad. To work properly, they need to be uploaded to a server, but if you’re working on them, just double clicking the file should open it in the browser of your choice, and allow you to see the results of your work.
The Markup Language part of the name, refers to the fact that HTML isn’t a programming language, it’s a language designed to present text to users in readable fashion. HTML uses a series of commands for the formatting of text, these codes are seperated from the rest of the text by use of anglebrackets.
Anglebrackets are simply enough just < >. This signifies the beginning of a portion of text to be effected by the command, the end of the portion of text is signified by a </ > anglebracket.
So for example, if you wanted to make a section of text bold then you’d use the b tag,
<b>This text should be bold</b>
Which would display as
This text should be bold
(Obviously, I’m using WordPress which does a lot of the work for me, and is displaying my anglebrackets when I type them in, when normally they’d be hidden).
Italics work exactly the same way, using the i tag.
<i>Text should be italicised</i>
Text should be italicised
And you can make lists
Orderered Lists, which uses the ol tag to mark out the entire list, and then the li tag for each list item
- This
- should
- be
- a
- numbered
- list
And unordered lists, same as above, but uses ul
- This
- should
- be
- a
- un-numbered
- list
The paragraph tag, p, blocks out your text into paragraphs. But if you just want to drop in a line break, then you use the br tag.
There are also fun things to do with tables, but they’re a little more involved, but a whole load more powerful (and often abused for page layout). And there are more levels of header than I’ve ever found use for (h1 through to h7).
Fonts can be changed using the font tag, so if you want to use Times New Roman for one paragraph, then you can surround that paragraph with a <font face=”Times New Roman”> paragraph</font>, or change the size <font size=4> etc.
Within the tags you can include modifiers to alter the way the tag is presented, the most commonly used is align.
If you want text left aligned, then you’d use <p align=left>align left</p>, for aligned to the centre use <p align=center>align centre</p> (yes, american spelling), and for aligned right, <p align=right>align right</p>.
align left
align centre
align right
Now, I’ve skipped over one of the most common tags, as it’s a little bit of an anomaly, the image tag. To put in a an image, you need to link the document to the image, so it either needs to exist already on the internet, or you need to put it there by uploading it to a server. This also brings us to the matter of absolute and relative links.
We’ll deal with absolute links first. So, you’ve found an image on the internet you want to link to, such as a picture of a dug.
You’d use the img tag, but you have to define the source of the image to be displayed. So the full tag is <img src=”http://www.scruffydug.com/wp-content/uploads/2016/04/8bitdug_big.jpg”>, and obviously you can align the image left right or centre using the align tags, <img align=left src=”http://www.scruffydug.com/wp-content/uploads/2016/04/8bitdug_big.jpg”>
And the image is displayed thusly.
But you notice there is no closing anglebracket for the image tag, after the picture there’s no need to go </img>, that’s a holdover to keep compatibility with older versions of HTML, in reality, you really should use the closing tag, but very few do.
This backward and forward compatibility has all sorts of weird effects, such as using tags which don’t exist. So, I want to add text which is curved, there might be a tag that does that, so I try <curve>test</curve>. And load up the page, and just see the word “test”, not curved, not anything special, so what’s happening?
Well, your browser is looking at the curve tag and not recognising it, so just ignoring it, but it does recognise that it’s a tag, just one it doesn’t know, so it still hides the markup.
Now, I hope that I’ve helped explain a little, this is obviously just scratching the surface, and if you want to know more there’s loads of better sources than me. And obviously this doesn’t explain how things like Youtube or Facebook work, which use fancier things like Javascript, HTML5, Cascading Style Sheets (CSS) and PHP, which I will endeavour to explain in the future.