Talking to your web designer can be a daunting task for many marketers. Many times, you walk away completely clueless about what just happened or you've had to ask so many questions that everyone ends up getting frustrated.
Sometimes you simply try your best to follow along, but then you aren’t completely satisfied with the resulting product. It’s time to put an end to all the madness! Below you’ll learn the three basics building blocks of all websites so you can be well on your way to understanding the technical aspects of your website. Armed with this knowledge, you’ll be able to finally understand and communicate with your website designer so future website projects turn out just like you want them to.
1. HTML: Website Structure
Right click on the page you’re currently reading, and click “View Source Code” or “View (Page) Source.” You’ll probably see a jumbled mess of < and > signs and strange words that you don’t understand. If you scan carefully, you’ll be able to read the text of this blog post part of the way down, but it’ll be broken up with strange tags. Those tags are HTML.
HTML stands for “Hyper Text Markup Language,” which might sound daunting at first, but essentially it’s just a system for giving meaning to the content on your website. HTML is used to structure the content in a web page.
It defines things like “this section is the sidebar” or “this text is a list” or “this word is a link.” With HTML, all of that jumbled text comes together into a nicely structured, finished web page. But while HTML gives your content structure, it does not specify how that content should actually appear on the web page. That is a tricky thing for a lot of people to wrap their heads around. But by saying “this is a link” or “this is my sidebar,” you’re not actually specifying how those things should look. After all, websites are infinitely customizable – the links on your website might look totally different than the links on another website.
Learn More About HTML: On any modern content management system (CMS), you won’t need to actually write the HTML to build your website – it’s generated automatically. But you’ll usually have the ability to add bits of custom HTML. For example, when you embed a YouTube video in a blog post, you’re working with raw HTML code. So while you may want to avoid jumping into the HTML of your website (leave it to the professionals!), you can still learn by playing around on HTML editors. That site has a great tutorial that’ll walk you through the basics and give you the opportunity to edit code right on their site so you can practice writing real HTML.
2. CSS: Website Appearance
The appearance of your website’s content is set using CSS, or “Cascading Style Sheets.” Using CSS, you can easily change the appearance of your website and makes changes that are site-wide. For example, on the HubSpot CMS , all blog article titles are automatically wrapped in H2 header tags (that’s HTML). If we decided we wanted to make our titles appear in a larger font, we could change the “font-size” property for all H2 tags in our site’s CSS, and the change would be site-wide automatically.
Sometimes as marketers, we’ll slap together a quick HTML hack (using inline styles) to force a page to look a certain way, but this is frowned upon in the web design community and generally a bad practice for your website. It creates a mess of code that’s hard to update and maintain, which isn’t good for your website in the long term.
Learn More About CSS: If you want to make aesthetic changes to your website, you should try learning some basic CSS. It’s very easy to get started, and it’s much simpler than programming. W3Schools, as mentioned above, can help you get started learning basic CSS .
CSS is usually defined in a separate file from the HTML of a given web page, so you’ll need to get access to your site’s CSS – usually called a “stylesheet” – if you want to make changes. Always remember to keep a backup copy of your site’s original CSS in case you accidentally goof something up and ruin your website! With great power, comes great responsibility.
With HTML and CSS, you can build out the structure of your page and define how that structure should look aesthetically. For a lot of websites, this is all you’ll need. But what if you want your site to actually do something, like pop up a message window when a visitor has been on your site for a certain amount of time or to confirm that a visitor actually wants to exit out of the page?
Image credit: Dmitry Baranovskiy