Basics of Web Development
Follow me as I start risking my first steps in this area.
To start developing anything we first need to understand how a website works, whats are their main components.
Whenever you access a site, you type some catchy name on the URL bar press enter, and then boom! A gorgeous site appears in front of you, but underneath the table, a lot is going on. First of all the name that you type is just a nickname, to disguise the real name of a site, something like 158.34.56.147, not so useful for us, but means a lot to the machines.
When you access an IP your browser will request via HTTPS to the server, and the server will return some files that your browser will interpret as the website and render for you.
Every website is a mixture of 3 files: HTML, CSS, and a javascript file. We’ll dive further into each one.
HTML
HTML stands for HyperText Markup Language, and we can think of it as a skeleton of a website. At the beginning of the internet, every website was just an HTML file with that familiar look.
And it's perfectly fine to have a website with just an HTML file, it will be ugly but it will work with no problem, but every site must have an HTML file, otherwise, the browser will not know how to structure it.
The HTML file will give the structure of the website, it will tell the browser what every part must be, but it doesn't give any style, this is done with the CSS file.
CSS
Or Cascading Style Sheets is the file that will give style to your website. With the CSS file, you can customize colors, fonts, themes. The CSS file will make your website prettier, but just that. To give it logically, we need our 3rd and final element, the javascript file.
Javascript
The JS file will give the logic, menus, animations, everything that is not static will be controlled by the JS file.
This is just the basics of how a website works, nowadays we have frameworks that are libraries that were built on top of those languages and provide a whole new universe of possibilities.
Even tho the road in front of us is long we need to start with the first step, so let's begin with the beginning, the fundamentals of HTML.
Before we begin
I’ll be creating a codebook in codepen.io, on this website you can write your HTML and see live what it looks like.
This will be the link to my playbook, feel free to lookup.
HTML 1.0.1
HTML is structured using tags, in this way the browser will know that everything between an open and closing tag will have the tag’s attribute.
A tag looks something like this:
<h1>
with the < and > signal surrounding it, and h1 being the tag name, in this case meaning that what comes next is a header. The closing tag looks the same but with a slash /, to identify that is a closing tag. So a header in HTML will look like this:
There’s also some self-closing tags, like <br> to break a line.
You can see that the browser will follow the tags formation, instead of the file indentation.
One last important thing to know is the tag's attributes. Most tags will accept attributes following their name inside the brackets. A list of attributes that each tag has can be found in the HTML documentation.
For example, we have the self-closing tag <hr>, which can be used to separate different parts of the page. The default <hr> looks like this:
and the same tag but with attributes:
That's is the basics of the HTML tags and what I've learned so far.
The concept seems simple but is the foundation block upon which we will build our knowledge.
HTML Boiler Plate
When programing you might hear the expression boilerplate, which comes from the time of printing press, where those iron printing templates were used to print dozens of pages. In programming, we refer to boilerplate the co template that we use to save us from writing the same lines every time that we start a new project.
The HTML boilerplate looks something like this:
First, we need the line <!DOCTYPE html>. This will tell the browser the version of HTML on which the page should be displayed.
Following we have the HTML tag. This will wrap all the HTML code, that we gonna write. The HTML tag is composed of the head tag, the body tag, and sometimes the feet tag.
<head>
Inside the head tag, we gonna put all the meta information, or all the information about the web page, and how the browser should handle it. For example, the title tag that tells the browser whats the name of the page.
The meta charset tag will tell the browser which set of characters it should display on the page. Depending on the language of the page the browser might change which character to display. By default, we use the utf-8 charset, which includes all the other charset plus emojis. The UNICODE charset also behaves similarly and can be used as well.
</head>
<body>
The body tag will be the structure of the site, and how it will be displayed.
One good of thumb is to keep your code with good indentation, this will help you to visualize which elements are inside others at glance, also helps other programmers that might look up your code. It's a little bit of extra effort that pays off.
We can type a simple paragraph using the <p> tag. this will display simple text on the screen.
We can also include extra tags to give more information about our content, like the <em> tag, which tells the browser to emphasize the paragraph. wich will italicize the text.
We also have the <i>, which appears to do the same thing as the <em> tag. but the <i> tag just stylizes the text, where the <em> tag also tells to emphasize the text, giving more information for the browser about the text.
You can check the difference between them here.
So it's good practice to always use the <em> tag because gives more information, and when writing HTML code we are more worried about the structure of the page, rather than the style.
Similarly, we have the <b> tag that just makes the text bold. But instead, a good practice is to use the <strong> tag, for the same reasons as the <em> tag above it conveys more information.
HTML Lists
With HTML we can have two kinds of lists, an ordered list, on which will be incremented like 1,2,3; or like a,b,c.
And an unordered list, on which the order doesn't matter, and they will be shown as a bullet list.
Images elements
To place an image on our website, we use the <img> tag, and we must pass the src attribute with the path to our file.
You can also specify some alternative text to be displayed, in case the browser didn't display the picture. The alt text also helps search engines like google to rank your page, so it's always a good practice to place some alt text related to your picture.
Hyperlinks
The h in the HTML stands for hypertext, which is nothing more than a link to another HTML document, and that’s all the magic behind websites. Just think how many links do you click when you are browsing the internet.
To link in HTML, we use the <a> tag, which stands for the anchor tag. But the <a> tag, like the <img>, also needs a href attribute filled to work. The href attribute will tell to which page the link should point, and could be a link or another HTML document.
The anchor tag needs a closing tag, and everything in between will be the link text.
Wrap Up
Well, we got our first steps into the web dev world. We learned some very basic elements, but they are the foundation to more complex elements.
A good read into the documentation can help to know all the tools that are available in your arsenal, so you can build an amazing website.
