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.
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:
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:
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!
Web design hasn’t changed drastically in the past twenty-three years that I remember. You plan a hierarchy of content, write that content, decide on a layout and go about creating your web pages. In theory of course.
When I use the term ‘website’ I simply mean a site that has many pages. The term can be used to refer to database driven applications, but that requires an entirely different skillset, training and tools.
There are many ways you can still create a website without spending money on hiring web design help or signing up for some DIY web design service. Here are a few ways it can be done, absolutely free.
Websites aren’t just visual entities, they’re a mix of visuals and code. Here’s an example, when you see an image on a web page, it’s represented as follows in code:
Though you see the photograph, your web browser renders it as a photograph by looking at that small piece of HTML text above. Once you add a link to your image to make it clickable, HTML changes too:
Let’s say we thought it would be nice to accompany that image with some text under it. Here’s how you would add a link to your image:
<a href="mynicepage.html"><img src="/myniceimage.jpg"><br>Click here to visit my nice page.</a>
So you get the idea? What you see in this case, the image and small line of text right below it, is not what you see when you design your html page. It’s not WYSIWYG – What You See Is What You Get – it’s pretty much code.
A simple web page if written in code requires you to learn some HTML and there are some wonderful resources online to do just that:
W3Schools and Khan Academy would be my two picks to get some HTML love going. They’re free resources and learning HTML is easy compared to most other computer programming languages.
If you’re planning a small project and can manage writing some HTML, creating your website is absolutely fun that way. Try it and you could develop this new skill into a web development career.
HTML web design use case:
All pages running our ordering system at https://secure.spiderz.com/domain-names were hand coded using HTML (and a few other things like Bootstrap, CSS, JS, PHP and MySQL).
WYSIWYG website editors are computer software one can use to quickly create a website. I can’t recall the last time having used one, but when we used to, our favorite application was Adobe Dreamweaver.
For those who would remember, Dreamweaver was published by a company called Macromedia which was later bought by Adobe.
A WYSIWYG editor does one simple thing, it lets you use a mouse and a took-box to create your website visually, thereby taking away the pain of writing HTML by hand. Some editors can help you in even more ways.
There are a dozens WYSIWYG web design tools you can use and this is how, back in the day, in the later months of 1997, I discovered Microsoft Frontpage and used it to create web pages for the first time. I published my first HTML website that year and posted it on Geocities, some 23 years ago!
Here are a few website editors I’ve used in the past (and some I’ve totally discovered for the first time!)
WYSIWYG web design tools I’ve used in the past:
Adobe Dreamweaver – Mac OS X and Windows Free to try, then pay for a subscription. https://www.adobe.com/mena_en/products/dreamweaver.html
Dreamweaver is a lovely tool. It’s over-kill if you’re simply starting out. It has a paid subscription and prices differ from personal to business use to monthly and annual tenures.
It can be great if your school or university can provide you access to Dreamweaver. I wouldn’t recommend it for professional development (though the product is just that, aims at the professional market).
Microsoft Expression Web – Windows-only Free to use. I couldn’t find a paid version. https://www.microsoft.com/en-us/download/details.aspx?id=36179
I certainly used Microsoft Frontpage (in the late 90s) which was later replaced with Microsoft Expression Web. I’ve used Expression Web for a bit on Windows, but from 2011 I have moved to the Mac platform. I’d still give it a try if I were on Windows – should be a pretty okay tool.
WYSIWYG web design tool that I’m using at present:
Elementor Pro – WordPress-only Free version is called Elementor. Pro version is a subscription. https://elementor.com
We use Elementor to design web pages at Spiderz – in so much as it offers WYSIWYG editing, it also takes care of a whole lot of layout and design challenges that web developers must undertake when creating a website.
Elementor isn’t a stand alone program that runs on your PC or Mac. It’s a plugin designed for WordPress so it installs atop a WordPress install. To run WordPress you require a web host that allows you to install custom-plugins (so WordPress.com is out!).
I’ve only run the app this morning, for the first time. If I get around to using it for a project in future, I’ll come back and update this article.
WYSIWYG web design use case:
The Spiderz website is designed using Elementor Pro. We do use a little hand-written CSS to style a few elements here and there, but for the large part, everything’s built using the Elementor page builder.
Web design today seems to be all about WordPress and it powers 34% of the internet. It’s also free to use, forever.
WordPress is classically known as a CMS (Content Management System) but that definition is broken for many reasons. It’s more of a platform, than anything else since we can use WordPress in more ways than we can think of.
You need to get it running and then get about your business of writing, designing and publishing web pages (the same goes for your blog). If you write one as a business, that is.
You can install WordPress using the famous 5-minute install, ask your web host to install it for you or use a 1-Click WordPress installer provided by them to automate the installation process. It’s not really difficult to get done.
Once WordPress is installed and you get to login, you’re faced with the dilemma of how to design your pages. You may know that Themes can do the job and given that there are thousands of free Themes, your task is made simpler if not almost DIY-ready. That is, if you simply want something to get going – a ready-made theme should do it.
Having chosen a theme, your next step is to create your pages, update your website’s menu and you’re done. Done as in, version one website can go online. You can keep building on top of that, as and when you have time.
A word of caution about Themes – try to use one from a reliable source – many a themes are known to be poorly coded and some can be hacked, so your best bet is to use a theme like GeneratePress, that is well-written, insanely popular and free to use.
We use GeneratePress Premium at Spiderz and simply love this theme. It’s superbly-supported and updated all the time.
Now, if you’re anything like a kung-fu web designer, you’re going to want to have a layout that’s unique to you, something that shares your style and represents your skills as a designer – welcome Elementor.
Elementor offers an abstraction layer over your theme (GeneratePress in our case) and lets you design while it writes all the underlying HTML, CSS and JS required to translate your design into code, and it does this in real-time, in your web browser.
Elementor is a free plugin and well maintained. If you’re planning to design a website with all bells and whistles, opt for Elementor Pro – which is what we use at Spiderz.
WordPress web design use case:
This blog is one example. It uses WordPress. Our Spiderz.com website uses WordPress. All client websites we develop, use WordPress.
You can create a website for free even today. There are several ways to do this and I have highlighted a few that we have used in the past. Web pages can be hand-coded using HTML, CSS, JS (PHP too), they can be created using WYSIWYG website editors and they can be created using WordPress.
The only paid component in creating your website is hosting, i.e. the place where you plan to reside your website. That’s the only cost you’ll incur.
The question is, ‘Are you ready to create your first website?’