Introduction to HTML | An HTML5 Tutorial for Beginners

Summary

In this informative tutorial, Dave introduces beginners to the fundamentals of web development by explaining what HTML is and its role as the basic building block of the web. He guides viewers through setting up the necessary tools, such as Google Chrome and Visual Studio Code, and demonstrates how to create a simple HTML file. Dave emphasizes the importance of proper file naming conventions and introduces the structure of an HTML document, including the head and body sections. He also touches on the use of CSS for basic styling and highlights the utility of the Live Server extension for real-time web page viewing. The video concludes with a validation check using the W3C Markup Validation Service to ensure the HTML code is error-free.

Takeaways

• 🚀 HTML is the most basic building block of the web, defining the meaning and structure of web content.
• 🔗 Hypertext refers to links that connect web pages to each other, either within a single site or across different sites.
• 🖋️ Markup is used in HTML to annotate text, images, and other content for display in a web browser.
• 🌐 Google Chrome is recommended as a web browser for web development, along with the Dark New Tab extension for a better user experience.
• 💻 Visual Studio Code is the preferred code editor for this tutorial series, and it's available for free across multiple platforms.
• 📁 Create a folder on your computer to organize your HTML files and other development-related files.
• 📝 Start every HTML document with an opening and closing `html` tag, containing a `head` for metadata and a `body` for visible content.
• 🔊 The `title` element within the `head` defines the title of the web page displayed in the browser's title bar.
• 📌 Use semantic tags like `h1` for headings and `p` for paragraphs to structure the content within the `body`.
• 🎨 CSS can be added within a `style` element in the `head` to apply styling to your web page.
• 🔄 Live Server extension for Visual Studio Code allows for live reloading of web pages as you make changes during development.
• ✅ Use the W3C Markup Validation Service to check your HTML for errors and warnings, ensuring your code adheres to web standards.

Q & A

What is the main purpose of this tutorial series?

The main purpose of this tutorial series is to guide beginners in their journey of learning web development, provide an HTML resource for sharing with others who are starting their web development journey, or serve as a refresher course for those who have previously learned HTML but need a review.

What does HTML stand for and what is its role on the web?

HTML stands for Hypertext Markup Language. It is the most basic building block of the web, defining the meaning and structure of web content. Hypertext refers to links that connect web pages to each other, either within a single website or from one website to another.

What are the two main areas of an HTML page?

The two main areas of an HTML page are the head area, which contains metadata about the page, and the body area, which holds the content visible to users in the browser.

What is the recommended code editor for this tutorial series?

The recommended code editor for this tutorial series is Visual Studio Code, which can be downloaded for free from the official website.

Why is it important to use lowercase and hyphens in file naming for web pages?

Using lowercase and hyphens in file naming is important because web servers differentiate between cases and may cause problems if spaces or mixed case are used. The convention is to use lowercase, no spaces, and hyphens, ending each file with .html.

What is the function of the 'lang' attribute in the HTML start tag?

The 'lang' attribute in the HTML start tag declares the language of the document, which is important for accessibility and search engine optimization. For example, setting it to 'en' indicates that the document is in English.

What does the 'meta' element inside the 'head' section do?

The 'meta' element inside the 'head' section stores metadata about the page, such as character encoding, which is specified using the 'charset' attribute with the value 'utf-8' for Unicode.

Why is a 'DOCTYPE' declaration necessary at the beginning of an HTML file?

A 'DOCTYPE' declaration is necessary at the beginning of an HTML file to inform the browser about the version of HTML being used. It helps ensure that the browser renders the page correctly according to the specified standard.

How does the Live Server extension help in web development?

The Live Server extension helps in web development by automatically reloading the web page in the browser whenever changes are made to the code, allowing developers to see updates in real-time without manually refreshing the page.

What is the W3C Markup Validation Service and how is it used?

The W3C Markup Validation Service is a tool provided by the World Wide Web Consortium that checks HTML documents for errors and warnings. It helps developers ensure that their web pages adhere to web standards and are free from common mistakes.

What are some recommended extensions for Visual Studio Code to enhance web development experience?

Some recommended extensions for Visual Studio Code to enhance web development include 'Dark New Tab' for a dark-themed new tab page, 'vscode-icons' for file and folder icons, 'GitHub Theme' for a dark or light theme based on GitHub's style, and 'Live Server' for live previewing of web pages.

Outlines

00:00

🚀 Introduction to Web Development

This paragraph introduces the tutorial series aimed at beginners in web development, those seeking an HTML resource, or individuals needing a refresher course. The speaker, Dave, welcomes all and mentions that he will provide references and tools with links in the description. The tutorial begins with an explanation of HTML as the fundamental building block of the web, defining the structure and meaning of web content. It also touches on the importance of using a web browser and code editor, specifically mentioning Google Chrome and Visual Studio Code, and provides instructions on how to set up these tools for the learning process.

05:03

📚 Creating Your First HTML Document

In this paragraph, Dave guides viewers through the process of creating their first HTML document. He explains the structure of an HTML page, including the 'html', 'head', and 'body' elements. The 'head' section is for metadata, while the 'body' contains the visible page content. Dave emphasizes the importance of naming conventions for HTML files, such as using lowercase and avoiding spaces. He demonstrates how to create an 'index.html' file, add a 'title' element, and write an 'h1' heading and a 'p' paragraph element within the HTML structure. The paragraph concludes with a brief mention of code formatting and extensions for Visual Studio Code.

10:03

🌐 Viewing and Styling Your Web Page

This section focuses on viewing the created web page and enhancing its appearance with basic styling. Dave explains how to use the Live Server extension in Visual Studio Code to view the web page in a browser. He also discusses the importance of a development server for local testing. To improve the visual experience, Dave adds a 'style' element within the 'head' section and applies simple CSS to change the font size, background color, and text color. The paragraph highlights the convenience of Live Server's automatic reloading feature and the process of viewing web pages locally as opposed to hosting them on a web server.

15:05

🔍 Validating Your HTML Code

Dave introduces the concept of validating HTML code to ensure there are no errors or warnings. He uses the W3C Markup Validation Service to check the 'index.html' file and identifies several issues that need to be fixed. These include adding a 'lang' attribute to the 'html' tag to declare the document's language, specifying the character encoding with a 'meta' element, and including a doctype declaration at the beginning of the HTML file. After making these changes and re-validating the code, Dave demonstrates that the document is now free of errors and warnings, emphasizing the importance of continuous improvement in web development.

20:07

🎉 Conclusion and Encouragement

In the final paragraph, Dave concludes the tutorial by encouraging viewers to like the video if they found it helpful and to subscribe for more content. He thanks the audience for watching and expresses his enthusiasm for continuing the journey of writing code together. This paragraph serves as a motivational closing remark, highlighting the progress made throughout the tutorial and the community aspect of learning to code.

Keywords

💡Web Development

Web development refers to the process of creating and maintaining websites or web applications. It encompasses a variety of skills and technologies, including HTML, CSS, JavaScript, and server-side programming languages. In the video, the host is guiding beginners through the foundational aspects of web development, starting with learning HTML, which is the most basic building block of the web.

💡HTML

HTML, or Hypertext Markup Language, is the standard markup language used to create web pages. It defines the structure and layout of a web page by using a series of tags and attributes. HTML is essential for web development as it forms the backbone of any website, allowing developers to organize and format content for display in web browsers.

💡Markup Language

A markup language is a system for annotating a document in a way that the document's content can be displayed in a particular way. HTML is an example of a markup language, which uses tags to define elements and structure on web pages. Markup languages are crucial for web development as they dictate how content is presented and organized in a browser.

💡Web Browser

A web browser is a software application used to access and display web pages on the internet. It interprets the HTML code and other web technologies to present content to the user in a readable and interactive format. Examples of web browsers include Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge.

💡Code Editor

A code editor is a specialized text editor designed for writing and editing source code. It often includes features like syntax highlighting, auto-indentation, and code completion, which aid developers in writing code more efficiently and with fewer errors. In the context of web development, a code editor like Visual Studio Code is used to write HTML, CSS, and JavaScript files.

💡Dark Mode

Dark mode is a display setting that changes the color scheme of a user interface to predominantly dark colors, which can reduce eye strain and improve readability in low-light conditions. Many applications, including web browsers and code editors, offer dark mode options to provide a more comfortable viewing experience for users who prefer it.

💡Extensions

Extensions, in the context of web browsers, are small software programs that add additional features or functionality to the browser. They can enhance the user experience by providing tools for productivity, customization, or improved browsing capabilities. For example, browser extensions can help manage tabs, block advertisements, or format code more efficiently.

💡Live Server

Live Server is a browser extension that allows web developers to view their web pages in real-time as they make changes to the code. It automatically reloads the web page in the browser whenever a change is saved in the code editor, providing a convenient way to test and debug web pages without manually refreshing the browser.

💡W3C Markup Validation Service

The W3C Markup Validation Service is an online tool provided by the World Wide Web Consortium (W3C) that checks HTML and XHTML documents for errors and warnings. It ensures that the markup adheres to web standards, promoting accessibility, compatibility, and best practices in web development. Using this service helps developers identify and fix issues in their code, resulting in better-quality web pages.

💡DOCTYPE Declaration

A DOCTYPE declaration is a special instruction at the beginning of an HTML document that tells the web browser about the version of HTML being used. It is an essential part of the document that ensures the browser renders the page correctly according to the specified HTML standard. The DOCTYPE declaration is not an HTML element or tag but a directive that must be placed at the very start of the document.

💡Language Attribute

The language attribute, when added to the 'html' start tag, specifies the natural language of the document's content. This attribute helps assistive technologies and search engines better understand the content's language, improving accessibility and search engine optimization. The value 'en' represents English, and other values can represent different languages or dialects.

Highlights

The tutorial series is designed for beginners in web development, those looking for an HTML resource, or individuals seeking a refresher course.

HTML stands for Hypertext Markup Language and is the fundamental building block of the web, defining the structure and meaning of web content.

Hypertext refers to links that connect web pages to each other, either within a single website or across different websites.

Markup is used in HTML to annotate text, images, and other content for display in a web browser.

The Google Chrome browser and the Dark New Tab extension are recommended for a better development experience.

Visual Studio Code is the preferred code editor for this tutorial series and can be downloaded for free.

A new folder should be created on your computer to store your HTML files, and the first file should be named index.html.

File names should be in lowercase with no spaces, and they should end with .html.

Every HTML page starts with an html element, which contains a head section for metadata and a body section for visible page content.

The title element within the head section defines the title of the page, which is displayed in the browser tab.

The h1 element is used for the main heading of the page, typically used once to describe what the page is about.

The p element stands for paragraph and is used to add text content to the page.

The Live Server extension for Visual Studio Code allows for real-time viewing of web pages as you make changes.

The W3C Markup Validation Service can be used to check for errors and validate HTML code.

Adding a lang attribute to the html start tag is recommended to declare the language of the document.

Character encoding should be declared within the head section using a meta element with the charset attribute set to UTF-8.

A doctype declaration is required at the beginning of every HTML file to specify the document type.

After addressing validation warnings and errors, the document should be rechecked to ensure there are no remaining issues.

The tutorial emphasizes the importance of continuous learning and improvement in web development.

Transcripts

[Music]

hello and welcome hi i'm dave this

tutorial series is for you if you are

just beginning your journey towards

learning web development

or maybe you're looking for an html

resource to share with a friend who is

just beginning their journey towards

learning web development

or you may be looking for a refresher

course because you previously learned

html but it has been a few semesters or

even years since you looked at it or

maybe you have another reason that i

haven't even thought of no matter you're

welcome and i hope i help you on your

journey throughout the tutorial i will

mention some references and tools and i

will provide links to everything i

mention in the description below let's

get started learning html

what is html

html is an acronym that stands for

hypertext markup language

and hypertext markup language html is

the most basic building block of the web

it defines the meaning and structure of

web content

and hypertext refers to links that

connect web pages to each other and that

can be within a single website or from

one website to another overall html uses

markup to annotate text images and other

content for display in a web browser and

you can see an example of some of these

markup elements here but before we begin

creating a web page and using these

markup elements we need to get the

necessary tools so let's start with a

web browser if you don't have one or if

you're curious what i will be using in

this series i'll be using the google

chrome browser and you can download that

at google.com

chrome so if you don't have that and

want to use that go ahead and download

and install now and then come back to

the tutorial

also i will be using an extension

and we go to chrome.google.com

webstore to get extensions for the

chrome browser and there if you want to

use the extension that i'm going to use

it's called dark new tab and you can

press enter to search for that and once

you've completed your search you'll see

dark new tab offered by keller which is

the one that i have added and you can

see added here i'll click on that

and once you're inside the page for dark

new tab you should have an install

button here since i already have it

installed

this is now a remove button for me what

this does is when you open a new tab in

the browser it uses a dark page instead

of a light page and i use dark mode

whenever possible so i prefer that if

you see me open a new tab in this

development series you'll probably see a

dark tab like this one from there we

need to get a code editor and the

industry standard right now and what i

prefer to use is visual studio code

again you can use other code editors to

write your html code but if you go to

code dot visual studio

you'll be able to download visual studio

code for free

and there you can download for windows

if you're on windows like i am or you

can click other platforms and it's also

available for linux and mac os so now

would be a good time to go ahead and

download visual studio code and install

your code editor and go ahead and open

that up and then come back to the video

okay i am now assuming you have

installed visual studio code and have

opened it up and you may see something

like this or you may see a welcome

screen

what you need to do is create a folder

on your computer

and we will put our files inside that

folder so if i go to the file menu and

choose open folder

you can see once this pops up

what folder i am in the html course

folder in windows and then i've created

an 0-1 underscore lesson folder so if i

highlight that and select the folder

i am now inside that folder and ready to

create my first html file

so if you see the file tree over here on

the left and it's currently empty if you

don't click this icon in the top left

which is the file explorer and that will

hide or show this file explorer we're

going to create the plus button or click

the plus button here for new file and

create a new file

now we'll type index

dot html as that is always the file name

that is expected to launch a website and

you always want to keep your file names

lower case and with no spaces now

windows will not complain if you put a

space or use upper or lower case however

when we host our files on a web server a

web server will differentiate many times

and that could cause problems so the

naming convention is to always use lower

case no spaces you can use hyphens

dashes

and then end each file in dot html

okay we have an empty index.html file

let's create our first html element and

as you might guess the first html

element we'll create is html so if we

type html all lowercase and press tab in

visual studio code it creates the tags

and by tags that is often interchanged

as a word with element however the

element consists of the starting and

ending tag and everything in between but

here we might just be referring to the

starting also called the opening tag or

the ending also called the closing tag

so we refer to html tags but every page

starts and ends with the html opening

and closing tags and everything else on

the page goes between those tags after

creating our html element html pages

have two main areas

and one area contains data that is not

seen on the page but is considered to be

metadata about the page and that is the

head area so just type head not header

but head and press tab

and now we have our head element

and we will put metadata about the page

inside this area

but the next area is the page that every

or is the part of the page that

everybody sees in the browser and that

is held within

the body element so type body and press

tab and now we have our two major

sections of our page that are both

inside of the html element we have a

head section and a body section now

inside the head we'll just put one piece

of metadata today and it really won't

start with the word meta we'll come back

to that word in the future we're going

to create a title element

and give our page a title let's just

call this my first

web page

and this will stay inside

of the html document now i just pressed

ctrl s which saved the document you

otherwise would see a dot up here by the

index.html so i saved that and i am

using an auto formatter visual studio

code may or may not do that for you when

you save your file if you want that you

can go to the extension

icon over here and search

for a prettier extension

and i'm not sure if mine is enabled or

i'm using something else right now we'll

have to check now mine is disabled but i

do recommend this one prettier is a code

formatter that will auto format your

code but visual studio code may do some

of that as well but if you want to use

prettier go ahead and click install and

you can use that as well

so i'll close out that prettier tab go

back to the file explorer here so we see

our index.html on the left instead of

the extensions

and now we can see our html is formatted

in a very easy to read manner we have

our html element and then the head

element and then the body element and

they're separated by spaces very easy to

read and we have a title inside of the

head again the title will not be seen

inside of the browser in the body of the

page but i will show you very shortly

where we do see it

inside of the body element though let's

put an h1 element which stands for a

heading and it is the biggest heading we

could put you only put one h1 element

per page and that should be saying what

your page is about it doesn't

necessarily have to be the same text

that is in the title but here we're just

going to put hello world as is the

tradition for creating your first file

in any language you're learning and so

we have hello world on the page and we

have my first web page in the head

section let's add one more element in

the body of the page

and this is a paragraph element that

starts and ends just with the letter p

but notice each of our tags of course

start with this

less than and then end with the greater

than and then the ending tag you'll

notice has a slash but all we have to do

in visual studio code is type p and

press tab and it creates both for us so

we're going to put some text inside of

our paragraph and here we'll just put

this is

my first

web page with a period to end the

sentence and save once again i'm

pressing ctrl s on the keyboard to save

you can go to the file menu and from

there you can also choose save but

you'll notice the shortcut is control

and the letter s we're almost ready to

view our web page but before we do

remember the extensions we went to i

want to show you just a few if you want

your visual studio code to look like

mine one thing to draw your attention to

is when i created an index.html file

i have the little icon for html5 beside

it you may not have that but if we click

on extensions and then we can delete

prettier that i searched for before

type vs code dash icons

there you'll find the extension that

will add that to your vs code as well so

you can install i already have it

installed so mine says uninstall and

that will add icons as you create files

and it might add the icon up here as

well in the tab and that's how you see

the icon here beside my index.html in

the file explorer so visually it helps

you see what type of file you're working

with quickly without even reading

everything after that extension let's go

ahead and click the extensions icon

again

and then search for

github

theme i am using a specific theme

which i prefer dark mode in every thing

that i do so i am using the github theme

extension and it has light and dark

themes i believe i'm using the default

dark theme this might be bright for a

second but i'll click set color theme

and yes it's switched back to light but

i choose github dark default

and then yours will look much like mine

now these previous extensions have been

optional but one that i say is a must

for you to install is called live

server so let's pull up live server by

ritwick day i'll click on that and you

want to install live server because it's

going to help us view our web pages so

go ahead and install live server and

after you have it installed we'll go

ahead and take a look at the web page

we've created

okay with that installed i'm going to

close that tab i'll come back to the

file explorer here to show the file and

now if you have live server installed

you should be able to right click and

open with live server and once we choose

open with live server it opens our

browser and we can see our web page it

says hello world this is my first web

page

in addition in the tab at the top it

says

my first web page so that is where the

title goes at the very top of the

browser in the tab now this is very

bright and i have mentioned that i

prefer dark mode so let's go back to

visual studio code and i'm just going to

paste in some quick styling that is

actually css once again this is optional

but it will save my eyes and possibly

yours as we work through this tutorial

so once we're back in visual studio code

just underneath the title in the head

section i'm going to paste this in i'll

quickly describe it i put in a style

element and that allows me to put in

some quick css

and i changed the font size to make it

just a little larger

and then i changed the background color

to a dark color and i changed the font

color to an off-white color called white

smoke and that's all i did we're not

really learning css here but this will

save our eyes going forward if you want

to make these changes if you prefer the

white with dark text that is fine too

but now that i've saved this the beauty

of live server is that it automatically

reloads our page for us in the browser

so let's go back to the browser and look

at our update and now you can see our

web page is in dark mode and we have a

little bit larger text here as well it

did not change our title from the head

because that just goes into the tab of

the browser also notice the address this

is an ip address and then we have a

colon and this is a port number but this

is on your own computer this is not on

mine i can't go onto the web and see

your page that we just created we

haven't loaded it to the web it is just

running on your computer but this is the

way to view web pages as we create them

which creates your own local server it's

what's called a dev environment and that

is preferred what you don't want to do

in chrome is try to open a file like you

would in word or some other document

browser or even visual studio code how

we open files that's not how you want to

view a web page you want to use a

development server and that's what we're

doing with live server in visual studio

code now if you ever want to stop the

server down here in the bottom you can

see the port number 5500 and it says

click to close server so i can just

click that it says disposing and now we

have a go live button which you can also

use you can also right click on your

document and choose stop or open with

live server now we would once again

since we stopped that we would need to

open with live server to have a live web

page that responds to changes we make

and notice how it opened a new tab here

instead of our old tab our old tab the

server for that page closed so we close

that out and now we're using this one

because this is going to show our most

recent changes now after we've created a

web page how do we know if we have

errors or not well that's where a

validation service comes into play and

this is the w3c markup validation

service

w3c stands for the world wide web

consortium that really makes the

standards for the web overall what we

want to do to check our page is click

file upload because remember our web

page is really not on the web it's just

on our computer your web page is on your

computer and mine is on my computer so

let's click file upload

and from here we're going to choose the

file on the computer

and we get a browse window and now i'm

going to click

html tutorials

and then i have an html course folder

and then the xero lesson one folder that

we just created

and there is the index.html file we've

been working with so i'll click open

and now that it's here we can click

check

and we're going to get some errors and

we'll go over those

okay now that we have checked our page

we have got a warning and a couple of

errors so there are things we need to

fix

in our html file let's address these in

order with the first warning says

consider adding a lang attribute to the

html start tag to declare the language

of the document so that is something we

should do

now we're going to go to the html tag

and we can add what is called an

attribute and this is the lang attribute

and i'm going to set it equal to en

which is the abbreviation for english in

general

you can supply a dialect like this dash

us

or i believe the other would be gb

but i don't usually do that so i'm just

putting e in for english

you might have another language you

prefer to put there and you can find a

list of those at the mdn network as well

and that's the page where we were

looking for the definition of html at

the beginning of this tutorial so i will

link to mdn the mozilla developer

network in the description now that

we've added the language attribute let's

go look at the other errors we had and

see what else we need to fix

it says the character encoding was not

declared so we also need to handle that

let's go back to visual studio code

and now inside the head

there is an element called meta earlier

i said the head stores metadata let me

keep it all lower case here and here we

can set what is called the character set

attribute inside of a meta element

and from here i'll put

utf-8 which is the standard for all web

pages that i have worked on there are

other character sets but this is the

typical

value you would see in there so i'm

going to save this

and in the future we'll cover more meta

tag values that we'll have inside of the

head now let's go back and look at that

last error that we got from the

validation service and that said start

tags seen without seeing a doctype first

expected and it shows you exactly what

it wants doctype

html and that is a document type

declaration that should be on the very

first line of your page so let's go back

to our html file

go to the very top

and we'll press return

and we'll paste in exactly what they had

there so you see once again it starts

with the less than and the greater than

symbol but this is not really an html

element or tag this is just a doctype

declaration that you should have in

every html file at the very beginning so

now i'll put that in and save as well

let's look at

the validator first and let's choose the

file again

and now i've selected the index.html to

upload with our changes and we'll click

check

document checking completed no errors or

warnings so our document is just fine

let's go to the tab with our page

and let's reload the page

and once we reloaded everything looked

great so we've got hello world this is

my first web page and we still have my

first web page in the tab at the top for

the title

and we have passed all validation checks

remember to keep striving for progress

over perfection and a little progress

every day will go a very long way please

give this video a like if it's helped

you and thank you for watching and

subscribing you're helping my channel

grow have a great day and let's write

more code together very soon