Hyper-text markup WHAT?

Summer Reading photo © Copyright by Morgan Harper Nichols

HTML if you wonder, stands for Hyper-text Markup Language. Markup really means, you mark tags around text, images and other objects to have them represented on a page in a particular manner, that is when seen through a web browser.

HTML is not a classic programming language, making it quite easy to understand and write. If you have a text editor on your Mac or PC, you can begin writing HTML right away. You don’t need any special environment setup to key in a few lines of HTML.

In web design, HTML is the foundation of web pages, and offers a structure for the content of your page. That structure is later used to style and add functionality to the page.

So HTML is often used alongside CSS for style (Cascading Style Sheets), JS (JavaScript) for scripting on-page functionality and PHP (Hypertext Preprocessor) for server-side, often database related uses – all those being other similar languages that help in developing websites.

In my ‘Are you ready to create your first website?’ post I discussed web design in a little more detail from the point of view of using HTML, WYSIWYG HTML editors and WordPress – it’s a good read for some DIY website action. Learning HTML is easy, as an example, to represent a piece of text in bold in HTML, you would type:

My nice text in bold. or My nice text in bold.

The text wrapped within a less-than and greater-than sign are referred to as tags. In the above case b and strong are known as tags, as in, the B tag, or the STRONG tag. Tags open and close. A tag that’s closed is represented using a forward slash / right before the tag’s keyword. In our example above, <strong> opens the markup, while </strong> with a forward slash, ends it.

There are an endless number of HTML tags and if you like, you can spend some time studying these at:

W3Schools
https://www.w3schools.com/html/

Khan Academy
https://www.khanacademy.org/computing/computer-programming/html-css

There are even a few HTML playgrounds where you can test everything and make the most of not having to setup a local development environment from day one (you’re only trying to learn some HTML, not building a full-blown web-based application!), so try:

CodePen
https://codepen.io/pen/

JSFiddle
https://jsfiddle.net

Studying CSS, JS and PHP come next – and a dozen resources and tools that help you code with these technologies faster than ever. The entire toolset can be intimidating to learn all at once so the best way forward is to begin work on it.

Getting started is the most important thing. Here are a few ideas of first projects in HTML:

a. Create a website about yourself.
b. Publish a blog or daily diary.
c. Create a Photogallery.

While doing so, try to see if you can reach the level and quality of work on similar websites you follow. You can use your web browser’s developer tools mode to view front-end content from your favorite websites and even borrow some code to test it on your own.

Now that you know, Hyper-text markup Language stands for HTML — go out there – markup your world!

This article is authored by Yasser Masood, a partner at Spiderz Web International. He fulfills the role of Technical Product Manager and Solutions Consultant at the company. Yasser co-founded Spiderz in 2002, some seventeen years ago. Spiderz is a web services provider in the United Arab Emirates. Write to him at yasser@spiderz.com – he’ll be happy to hear from you!