Developed with
QA

The course is part of this learning path

Developing Web Applications with HTML and CSS
course-steps
7
certification
1
lab-steps
2
description
1
play-arrow
The Basics of HTML
Overview
DifficultyBeginner
Duration28m
Students65
Ratings
5/5
starstarstarstarstar

Description

In this module, you’ll get to grips with the basics of HTML, starting with its history, the fundamental pieces that make up HTML, and how to use attributes and comments properly. After this, will take a look at how containers work, how websites respond to syntax errors, and what a few of the special characters look like in html. Finally, we’ll end off with a deep dive into structural html, and how you can use it to create systematic, well thought out websites easily and effectively.

Transcript

In it's simplest form, an HTML page is pretty basic and has just three sections. In this video, I'll break down the structure for you. But first you'll need to know a little bit more about the difference between tags and text. So HTML distinguishes between tags and text. Basically, the tags are the hidden code that tells the browser how to display the content. They aren't displayed to the user but they form the backbone of how the webpage actually works.

Tags are actually pretty easy to spot. They're always inside two angled brackets, like this. Most tags will also appear in pairs. You need an opening and a closing tag. The closing tag always has a forward slash included in it to tell the browser that that's where the tag ends. For instance, let's start with a header for the page. First, I'll open with an opening head tag, like this, which tells the webpage some information about the HTML file it's about to display.

On the next line, I want a title. Let's say, success. The title will be displayed in the browser tab and also what a search engine will list my page as. First, of course, I need to tell the browser that I want a title. So I need to open with a title tag like this. Right, after this, I can add the text I want the browser to display, which in this instance is success. Now, to close this title tag off, all I've got to do is add a closing title tag, which looks like this. Now, the only thing left to do is close the head.

So on the next line, I'm gonna add a closing tag to the header like this. Okay, so, before I move on, there are a few other lessons I can show you using what we've just done here. First up, did you notice that there was no space between the closing and opening of the title tags? This is because spaces inside the start and just before the closing tag have no effect on the display of text. Also, tags aren't case sensitive. So you don't need to use capital letters in writing it, and in fact, it's best practice to just use lower case in HTML.

Last up, did you notice how when I moved down a line from the opening head tag to the title tags, I also indented the text? This is useful because it means that finding different parts of the page is really easy. So this is good practice to indent your code. Most common development environments will do this automatically, or you can format the code when saving the file.

Great, so, now that we've dealt with the basics of tags and text, and how they work in an HTML page, let's go back to the three basic sections of an HTML page. These are the prologue, the head and the body. The prologue tells the browser what type of document it's dealing with. To do this, all I have to add in is the following tags. I open the document up, with !doctype html, then on the next line, open the page with the HTML tag, and at the very end of the page, I'll close it with my closing HTML tag.

The doctype may look like a tag, but it's actually not. Instead, it's a declaration, so it only needs to appear once. It essentially tells the browser which version of HTML the file is being written in, so it knows how to interpret the tags. We know it's a declaration because of the exclamation mark. The head, as you've already seen, is done using the head tag, and normally appears right after the prologue. Finally, the body. This is the area where the content that is displayed in the main browser window on the website will sit.

Again, I'll open up with the body tag. Then, on the next line, add some text, maybe something like HTML is awesome. And then close the body with my closing body tag. And that's it for this video. We've dealt with a few really important concepts here, from the basics of how tags work, a little bit about syntax and formatting, and finally, on the three basic elements of an HTML page.

Lectures

 

About the Author
Students2987
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics