If you’ve been following along in this series, we covered some basic concepts about web development. We discussed things like what web development is, why you should learn it, the benefits of knowing how to develop websites, and the tools of the trade that you need to get started to be a web developer. If you were unlucky enough to miss out on our part 1 in the series titled “So You Want to Be a Web Developer”, you can check that out now.
What is HTML
If you’re scratching your head right now wondering what the heck HTML is, don’t worry, it’s just a scary looking acronym that stands for Hypertext Markup Language. At this point you’re probably wishing you hadn’t asked, because those words looks scarier than their abbreviation. Not to fret, we’re going to break this down for you in a very easy to understand and digestible way.
Hypertext is simply text on a page that contains links to other text. It’s as simple as that. At the start of this article we dropped a link to part 1 of this series that we did last week. That link was a text link, or a “hypertext” link. It’s simply text that we wrote, that when clicked, links you to another web page.
So now that we know what Hypertext is, let’s take a look at what a “markup language” is. In a nutshell, a markup language is simply a language written in order to help give meaning to text. HTML is all about the semantics. Its job is to describe information or text.
A markup language basically annotates text for processing. In the case of HTML, it does this using something called HTML tags. These tags wrap around text to give them special meaning for your browser to process. For example:
<titlte>So You Want to be a Web Developer: Part 2</title>
There are two tags in this example. There is an opening tag labeledand a closing tag labeled. The difference in the above tags is simply the “/”. This simply means that this is the “closing” tag. For every opening tag, there should always be a closing tag to accompany it (although there are some html tags that don’t require a closing tag). In HTML, an opening tag along with a closing tag with the text in the middle is known as an HTML element.
This title tag is responsible for letting the web browser know what the title of the web page will be. In this case, the title of our web page is “So You Want to be a Web Developer: Part 2”. You can make the title tag whatever you want, but whatever you choose is what users will see at the top of their browser window. For now just know that HTML and its tags are all about applying meaning to text for processing in your browser.
What is CSS?
The acronym CSS stands for Cascading Style Sheets. The style sheets are responsible for the look and feel of a website. A CSS stylesheet allows front-end web developers to spice up that bland HTML and give the website the look that they want it to have.
Often times when building websites professionally, the web designer will come up with a great design, and then the front-end web developer will take the design and write all the necessary markup and styles to get the webpage to match the design perfectly. This is often referred to as a PSD to HTML Conversion, where the developer “slices” a design to get image assets for implementing in webpages. PSD to HTML conversions are being used less and less nowadays because of the growth of responsive web design and of the fact that the desktop isn’t the main medium for browsing websites anymore.
While these certainly aren’t all the technologies that you’ll come across in your web development journey, these are three of the most important that you’ll encounter and definitely need to know if you want to build a website or plan to ever call yourself a web developer.
In part 3 of the series, we’re going to share with you some really great resources that you can and should use to help learn the ins and outs of these technologies and get you started with actually building your first web pages. We hope you’ve found this introduction useful. Let us know in the comments below!