For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Full-Stack Software Developer
Data Science and Machine Learning - 16 wks
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
☝️ Since in the previous chapter we equated houses, stores and buildings to web pages; then we could say HTML is the blueprints.
All web pages have HTML. It’s the structure of EVERYTHING. Think of it as the columns at a construction site.
Remember when we said the Internet is all text?
In that sense, HTML is a language that uses
<tags> to represent the elements that a web page must-have. A tag is just a word that begins with
< > and ends with
All tags must open and close (closing tags always precede the element with a
There are 2 different types of tags:
Container tags: when there is content between both tags, you should close it with (
</tag>). For example, to markup a section of text as a paragraph, you open the tag with (
<p>) and close it at the end with (
Non-container tags: they are standalone tags without closing tags (
</ >). For example, the tag for a line break is (
<tag> is defined, we can describe in detail its behavior by assigning attributes to the
<tag>. For example, if we want our HTML document/page to have a link to another page, we use the
<a> tag, and we assign to it an attribute called href, which allows us to specify the URL of the page we want to link.
1<a href="google.com">Click here and it will take you to Google.com</a>
In theory, you have to use one of these tags. Don’t make up your own tags because the browser won’t know how to interpret them. You must learn HTML's tags meanings, and their functionality, in order to put them to good use… But don’t worry, there aren’t that many! 🙂
For the main heading of the document, the tag we use is
<h1>. For example: An online store has an "Electronics" category. The title to that category would be "Electronics" and the
<h1> tag would be written as follows:
Finally, tags can contain one or more tags within them. For example, if we want to give an italic style to the word "electronics" we would wrap the word with the tag
Empty (or blank) spaces and line breaks are ignored by the browser when rendering the text. If we write five blank spaces in a row, or just one, the browser will interpret it the same way. If we want a line break, we must use the
<br> tag. If we want more "space", we need to insert
for each whitespace (yes, we know it’s weird, but it is what it is).
The following three alternatives will look the same (spaces and jumps of line will be ignored):
Line jumps are ignored:
Spaces are ignored:
All pages must begin with the
<!DOCTYPE html> statement followed by
<html>, then the
<head> and the
<body> tags. These tags must contain other tags within them (nested tags), and they will split the page in 2 main parts: the HEAD and the BODY:
1<!-- We must always begin with an HTML label to show the browser that this is a document with an HTML format. --> 2<!DOCTYPE html> 3<html> 4 <head> 5 <!-- Inside the head tag we will define all the information the browser needs in order to start interpreting the page. --> 6 </head> 7 <body> 8 <!-- Inside the body we will define the content of the page. --> 9 </body> 10</html>
Let's simulate how a browser thinks: Imagine a user on his browser (client-side) who types the URL: 4Geeks.com
The server will open the default HTML file on that server, which will probably be: index.html.
Then, it will read its content and interpret it as HTML (because the extension of the file is index.html).
The user will not see the text content of the file, instead they will see a visual interpretation of that text.
As you can see, all pages will include, AT LEAST, the following tags:
|HTML||We must begin by letting the browser know that this is an HTML document. We can also specify the HTML version we are using.|
|Head||Everything that is inside of the HEAD won’t be seen by the user. It’s the part of the page where the developer specifies information about the website, such as: the language being used, what the website is about, the fonts used, the icon that the browser tab will have (favicon), and many other important things.|
|Body||Here you will place all the content that will be viewed by the end-user.|
If this were MS Word, the body would mark the beginning of your page content (the first line of your document).
We read the envelope of a letter to find information about the letter, but not of its content. Here you can find who wrote the letter, in what language it is written, where it is from, etc.
In the case of HTML, the
<head> can contain the following tags (among other less important ones):
|Title||The title appears in the browser’s window, and it’s also used when you share the page through social media: Twitter, Instagram, Facebook, etc. All these networks use the title of the page as a summary when a user copies the URL of your page to share on their wall.|
|Meta||Meta tags describe documents. They are used to specify things like: the author, title, date, keywords, descriptions, etc. Search engines love these tags because they allow an easier comprehension of the content before it is read.|
|Link||Used for linking the page with the CSS style sheets. In the CSS chapter you will learn how to create style sheets and you will be able to import them using the Link tag.|
|Style||If we can’t or don’t want to import a CSS style sheet, we may also define styles directly on the HTML document inside the Style tag. This is a practice we rarely recommend and should only be used when you don’t have any other choice.|
Ok, now that we are familiar with the general and necessary structure of the page, let's review the tags we can and must use to define the content of the page.
Remember – for the fifteenth time – that a web page is… a text document! If you knew the answer before you read it you are getting it! And, if not, don’t worry. We’ve never known of anyone learning HTML and CSS rather quickly ;).
Let's see how a website compares to a Word document:
The most frequent tags used inside the
<body> of an HTML document are:
|Heading||They define the headings and subheadings of the page (the heading is not the same as the title; the title is used by the browser and it’s defined with the title tag).|
|Paragraph||This tag separates the text content with an upper and lower margin. In this way it helps simulate the behavior of a Word paragraph.|
|List||Lists are of huge importance in a document and they are widely used. With HTML we have two main tags to list content items:|
|Image||It allows us to add images to the document (they could be PNG, JPEG, GIF and SVG formats, basically).|
|Link (Anchor)||Sometimes we want to connect one or more pages with another one, or send the user to a new page, or even send the user to another section within the same page (just like the Menu of this course). That’s what the anchor tag is made for.|
|Bold||To highlight content using bold text.|
|Italics||To have the text in italics.|
|Line jump||To jump or skip the text to the next line (similar to a |
|Tables||Tables were designed to present data in a more read-friendly and neatly way. It has headers (th), rows (tr) and cells (td).|
🔗 Click here, for more HTML tags
We already know each
<tag>'s behavior. Thanks to tags we can change the font size – as is the case with headings –, add margins between paragraphs, list elements, etc.
If you wish to further specify how you want the behavior of a specific tag to be, you can use its attributes. To use them, you must define the attributes in the opening tag, like this:
1<img src="http://www.mydomain.com/myimage.png" />
In this case, we are assigning the "src" property to the
<img> tag which will indicate the path or URL of the image to be displayed in this container.
Each tag has its own properties (you do not have to memorize them, you will always find them quickly over the Internet), but it is good that you know the most important ones so that you have them ready in your mind at any time.
That’s why we have created a series of exercises that will better explain each of the important properties of the most used HTML elements.
We are so PROUD! 🙂
You just learned how a website was built in 1999. Now we only have a few more weeks to catch up on everything else that happened in the last 20 years. Now you can say that you know how to make a website!