The Basics of Web Development: Part I
In this article I intend to cover the basics of Web development, it will be the first part of an overview of what you should know and understand before creating a website and getting into Web development. In order to save time, I will not be concentrating on the terms I explained in one of my previous articles, but you can always check it out here.
What is HTML?
File extensions: .htm, .html
HTML (short for HyperText Markup Language) is a language used to create web pages by structurally describing its contents. It may sound complicated, but it really isn't. HTML helps you "add meaning" to a webpage, which is done with the help of so-called markers, or tags.
HTML code
Tags are special markers that are interpreted by a browser in a particular way. The purpose of a tag is to tell the browser how to interpret a chunk of data; the contents of a page put in different tags are interpreted differently. When I say a part of a page is put in tags, I'm purposely making an analogy with putting, let's say, a side note in brackets (parenthesis). The opening bracket indicates the beginning of the side note, and the closing bracket indicates the end. When you stumble upon a quote in a text - you know it's a quote, because it starts and ends with a quotation mark. HTML tags work pretty much the same way. For example, your browser would "read":
<strong>sample</strong>
and display sample, <strong> being the tag that indicates that the text in-between must be interpreted as bold text. There are plenty of tags for many things you might need: a paragraph tag (<p>), a list tag (<ol> for ordered lists, <ul> for unordered etc.), a table tag (<table>), and many more.
However, when you browse the Web you rarely see webpages that only consist of formatted text, there's usually more content that is laid out in a certain way. HTML is no longer used for the purpose of managing the layout, there is a separate language for that called CSS.
What is CSS?
CSS code
CSS (short for Cascading Style Sheets) is used for describing the look of your document created with a markup language (e.g., HTML). CSS helps you separate the logical structure of your webpage from its appearance, thus minimizing repetitive code chunks.
Generally speaking, you can get the desired page layout with plain HTML code, but there are downsides to this method. First of all, CSS gives webmasters more control over what they can do and how, whereas in order to achieve the same result with plain HTML code, you might sometimes have to use workarounds and tricks. These workarounds exist simply because some features aren't included in the HTML standard, meaning they might be interpreted differently in different browsers.
With CSS you can set various parameters for a page (or a part of it) such as the typeface and size of the font, the color of elements, the indentation between elements, the placement of separate blocks etc.
After you create an HTML file and a CSS file, you have to somehow connect those, which can be done in four different ways; however, that is outside the scope of the article.
If you want to see an explanation of something in particular in my next article, don't hesitate to leave a comment below.
