Original subtitles

[Music]

hello and welcome to four hours of html

tutorials and instruction this video is

made up of 10 tutorials for learning

html that build upon each other much

like the chapters of a book

throughout the lessons in this video i

will mention links being available in

the description below i've compiled all

of these links into one github resource

that you will find in the description

hi i'm dave gray and i'm the creator of

these html tutorials you can subscribe

to my youtube channel for more tutorials

like this one you can also follow me on

twitter and if you're feeling generous

you can even buy me a cup of coffee

let's get started learning html with

chapter one

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

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.visualstudio.com

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

control 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

in 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 ritwik

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 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 zero 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

mdm 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

type 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

let's move on to what else might go

inside of our head element and remember

everything inside of the head element is

not seen on the web page and with that

said i've dragged the visual studio code

window to a little smaller size on the

left

and chrome to a little smaller size on

the right but i'm just going to expand

visual studio code for now because

anything we change inside of the head

element will not be seen on the web page

anyway so i'll click the expand button

and we'll just see our code now i had

mentioned that we could store more

metadata inside of the head element and

that is definitely some of what we see

so let's add a couple of typical

meta tags that have metadata that you

would commonly see the first being for

the author of the page so we'll say name

the attribute name is equal to author

because that's what type of meta tag

this will be

and then we'll have a content attribute

and this is where you can put your name

i'll put my name for now since i'm the

author of the page

and then let's add another meta tag

and let's give it a name as well

and here we'll put a description this

will describe the web page in a little

bit more detail than possibly the title

would so here we can put more of a

sentence and once again we need the

content attribute to do that let's say

this page

contains all the things

i am learning

how

if i could spell how to and it looks

like i'm extending the page so in visual

studio code i'm going to press alt z in

windows to make sure

the text continues to wrap and then i'll

say all the things i am or i am learning

how to

create as i

learn

html there we go now after that of

course you still need to close the meta

tag

and ctrl s to save and again i got the

words to wrap let's go to the view menu

if you scroll all the way down you can

see word wrap is alt z it may be

something different if you're on mac or

linux so you might want to check the

view menu under word wrap if you want

your words to wrap and not just extend

forever to the right here now we've

added more description about our page

now this information could be picked up

in a search engine

or some other service that wants to

learn more about our web page however

let's go ahead and put something in the

head where we will notice the change

when we go back to the browser and that

is to add what is called a fav icon and

we can do that with a link element let

me use lowercase once again

and inside of the link element we'll

have several attributes one is the rel

which stands for relate or relation how

does this

relate

to the web page and here we're going to

provide an icon

after that we need an href this refers

back to html that stands for hypertext

this is a hypertext reference so we're

referencing a resource

and here we're going to reference a file

that i have now put inside of our folder

that is called html5

dot png and if i click the file explorer

over here

you can see i've now added an image file

that's a dot png file

html5.png and you can download this

image from the resources and you can see

it's a small little icon for the html5

logo

so i'll close that i'm going to click

the file browser to have that disappear

again so we see this now we have one

more attribute to add and that is the

type

what type of resource is this and here

we'll say image slash x

dash icon

and now we can save this and i'm going

to go ahead and

minimize the code window and now if we

look at our web page in the browser

notice we have an icon up here my first

web page now has our little fave icon

beside the title and that's what we

added here in the head by adding the fav

icon with a link element now we won't

add any more here today but this is the

same area where we would link to css

files and even javascript files and

other resources that we pull in from the

web so the head is a very important part

of the page even though we don't see the

content of the head inside the body of

the page and i said we wouldn't link to

anything else here today but since we do

have this default css to make our page a

dark mode if you added this and once

again this is optional if you prefer the

white page with dark text you didn't

need to add this and we had this style

element here to hold the css in the head

but that's not usually where you would

find it for a page so let's go ahead and

do that i'll expand visual studio code

again

click the file explorer

and over here inside the file tree i

want to create a new file i'm going to

call this main dot css and i have an

empty css file all we need to do now is

go back to the index

select the css that we put here for the

html on the body not the style tags just

select the css that's between the style

tags i'm going to press ctrl x to cut it

out of the page

go to the css file and ctrl v

to paste it into the css file

ctrl s to save that file

now back in the html i'm going to remove

the style element and i'm going to add

another link

and here for the rel not ref but rel

we have a style sheet because we're

adding a css style sheet

our href will now point to our css

main.css specifically

and our type

which isn't actually required anymore

but

since we have it let's go ahead and add

text slash css

but our browser should know what it is

even if we didn't add that at this point

because that's really the only type of

style sheet there is is a css now that

we've made these changes let's save the

file

and let's go ahead and click the button

again to make our code shrink back down

and look at our page we can reload just

to make sure it has reloaded and

everything looks the same that's because

we are pulling in

our code i'm going to go ahead and hide

the file tree here we are pulling in our

css code using our link tag inside of

the head element now finally i'm going

to create an error on purpose by

deleting the greater than symbol at the

end of this link tag and saving the file

with ctrl s now why would i create an

error on purpose because we want to

validate our file again and this will

let us know that yes we've got the right

file and we expect one error there

you don't of course have to create an

error on purpose but that's what i'm

doing to make sure i'm selecting the

correct file out of the correct lesson

folder because i'm in lesson two now you

might be working on the same file we

started with there's the css file and

the image file

i'll select the index.html and check and

i should have at least one if not more

errors because of that yes that created

several errors on the page just by

leaving out

that one closing greater than symbol for

the link tag so now if i save again

visual studio code formats our code

correctly instead of trying to pull the

closing

head tag up here

and i'm going to go ahead and reload

or re-upload

the file to check it so we choose

index.html

now i'll click check

and document checking completed no

errors or warnings to show so just by

missing one little thing in our page we

could have a whole list of errors so

follow the prompts from visual studio

code notice how if i leave that out

here in my theme this turns red or pink

it doesn't look quite right visual

studio code wants to format it

differently if i save the file and it

pulls that up here instead of putting

the closing tag there's several cues to

show you that you have an error in the

file

and so follow those prompts in visual

studio code and then remember to always

validate your page and we always do that

at

validator.w3.org i'll get rid of

everything at the end of that and here

you can pull it up and then we choose

file upload

let's look at the basics of creating

text content on a web page

now web pages are a lot like essays or

even a newspaper where they have

headings and usually paragraphs of text

or at least a sentence or two of text

describing something afterwards so we

see our paragraph element here

and our h1 heading here

much of the text content on a web page

will be made up of headings and

paragraphs

now headings have a hierarchy and that

means

we'll start out with only one h1 on the

page and each page should only have one

h1 but after that we can have subtopics

so here i'm going to press shift alt and

the down arrow again i'm using windows

it may be different for you on mac or

linux but i just copied a line down so

now i have two h1s but i'm going to

change this

by typing h2 over that h1 and notice how

the ending tag immediately changed here

in visual studio code as well so that's

helpful now this is a subtopic for the

page so imagine this being the title of

your essay or

the big headline in a newspaper and then

we have subtopics so for h2 i'm going to

type something different let's go with

i'm ready to learn

html

and now we can have a paragraph about

that and so we do at least we have a

sentence this is my first web page

now i'm going to highlight this

subheading h2 and the paragraph and once

again i'm going to press shift alt and

the down arrow and it copies both lines

down for me and i'll add an extra blank

line here and i'm going to change this

second h2 into an h3 now we i'll use

lowercase there we go

now we could have more than one h2 on

the page but i wanted to show how you

could have a subtopic

under our subtopic so we have the title

for our essay

and then we have an area of discussion

that we've added in h2 as the heading

for and now under this area of

discussion we could have further

subtopics and this is how we now have an

h3 so now instead of my first web page

or i'm ready to learn html let's change

this to

my daily schedule so this will

discuss our schedule for learning html

and then we could just say something

about i'm going to tell you how or

let me

tell

you how i and i'll just put some dots

there for now just we'll expand on that

later if we want to but really what i'm

showing is this hierarchy and it's also

important not just visually let me go

ahead and save this by pressing ctrl s

or remember you can go to the file menu

and choose save

visually we see that it's naturally

formatted larger on the page with the h1

than it is the h2 and then the h3 is

even smaller than the h2 but we can

change all of that with css in the

future css will really style how our web

page looks

but what is important is we can quickly

visually tell the headers apart right

now

and when a screen reader or other

assistive technology looks at our code

then it can navigate the code through

the headers of what is important here

the header hierarchy and that's why it's

so important to organize your page the

headers actually give semantic meaning

saying

this is the main topic this is a

sub-topic under the main topic and this

is a sub-topic under

the higher

sub-topic in the hierarchy so headers do

have semantic importance and that means

giving meaning to our content and of

course then our paragraphs can just have

whatever details we want to add about

those subtopics as well now even though

we've created a little separation in our

code when we look at our page we just

see line space line space and we don't

have a good visual separation i'm going

to add an element that doesn't really

provide any semantic meaning but

visually it helps us on the page and

that is a horizontal rule element and

it's just added like this there is no

closing tag for the horizontal rule and

then i'm going to add another one after

our final subtopic discussion here so we

can add something else underneath that

and so now let's save and look what the

horizontal rule adds to the page

now we have lines going across the page

and those are called horizontal rules so

we have our main heading and now we have

our sub topic and i left the h3 in here

because it's a sub-topic

of this topic

so now we can go ahead and i'm going to

highlight the h2 and the h3

ctrl c to copy

come down further on the page and paste

and i'll save just so we can see what

happens now we have two different

subtopic sections and we still have our

top hello world so you could picture

this more like an essay page and of

course these could be

paragraphs that have more text or you

could picture this more like a newspaper

and then we would have an article here

and an article here

in our heading at the top this is also a

good time to discuss white space so if i

just press the space bar

and add all these extra spaces to the

page

if i say visual studio code is already

going to probably reformat this but what

is important to know when i save you'll

see yes it changed and it just went back

and only left one space

is

web pages or html

do not honor all those spaces you might

add with a space bar it's called white

space collapsing and so we can space

many lines

but it won't really be represented on

the page that is not how we add extra

space in html so again recognize white

space collapsing that it will not last

now something we can do is what's called

a line break and that can be inserted

inside a paragraph element so now i'll

put let me tell you how

and then i'm going to return remember we

don't have to have the opening and

closing tags on the same line for an

element we can nest other elements

inside of an element so i'm going to put

a break and that stands for line break

and then i'll put three dots and i'll

say let me tell you how

i learn more about web dev

and a period that looks good and now we

can put another break and i'll just put

three more dots

and say i plan

out my schedule

and one more line break

the three dots of course are not

required it's just what i'm adding here

and then i'll say i use

resources from

mdn which previously we discussed and

when i showed the definition of html we

were looking at the mozilla developer

network and that's what mdn is

so now if we save this file you can see

we've got line breaks and we're showing

each of these details on separate lines

okay let's scroll down and change some

of our second topic now so instead of

i'm ready to learn html let's change our

second sub-topic to

i am let me capitalize that i am also

planning a

vacation

and now we can put some details about

that vacation in the paragraph

underneath this subtopic

and i'll say

i've been working hard

and really

need a

getaway period

and let's see if we want to add anything

underneath that yep let's add one more

sentence and what i'm going to do once

again is shift alt and the down arrow

and visual studio code will copy that

line down so

now we can just change the sentence here

and i'll say

i live in kansas

so i want to

visit

a beach

kansas is nowhere near the ocean so that

sounds pretty good so let's save that

and now we can see our sub-topic here

changed and we have a couple of

sentences

about planning the vacation now let's

change the my daily schedule subtopic at

the h3 to

places i'd like to

visit

and i guess i could capitalize that l on

like there we go places i'd like to

visit

and now i'll highlight that paragraph

and say

i've heard

good things

about

the

caribbean

sounds like they have warm water and

fun islands to visit okay so now we've

got some extra details here

and we can have more than one sub-topic

here so let's go ahead and do that again

shift alt and the down arrow to copy

that

and places

i want to avoid could be our next one so

places i want to avoid and here we can

put

anywhere cold

no

way with an exclamation mark okay so now

we've got some extra detail here in our

second area

and this will allow me to go ahead and

show you the difference between block

level elements and inline elements what

we've been working with here are block

level elements notice with every

paragraph and every heading they start

on a new line that is a block level

element it creates space around it which

of course can be formatted in the future

with css

but it does not allow you to put another

paragraph inside of a header or a

paragraph without creating that new line

that space so there will be

a return essentially in your content

when you're using a block level element

but when you use an inline element that

doesn't happen so let's look at a couple

of these first of all

we can say

i've been working really hard and i've

been working hard and really need a

getaway let's emphasize that really need

a getaway and one in line element that

we can do that with is em and that

stands for emphasis that provides some

semantic meaning once again so now a

screen reader or other assistive

technology

or are just our browser overall knows

we're emphasizing this really need a

getaway so let's save and notice

really need a getaway is italicized now

we're not using it for the italicized

text again the formatting will come

later with css but that is just the

natural behavior of using the emphasis

element as we wrap our text but it

provides that meaning now what if we

really want to emphasize that text it

has a strong meaning to us like our no

way here we don't want to go anywhere

cold well there is a

strong element we can use for that

and here let me grab the ending tag and

put it at the end of our no way and now

i'll save and notice it got just a

little bit bigger and bolder here as far

as the natural formatting of the strong

element but again this is an inline

element it's inside the paragraph

it did not create a

break in the line it did not create any

extra space around it so these are

inline level elements and the other

elements such as the header and the

paragraph we've been working with

are block level elements another type of

content we can add to our page are html

entities so they are things that are not

really the normal text we would type out

what for example if we wanted to

show a less than or greater than

symbol on our page right now html

interprets those as we're starting or

ending a tag so we can't just easily put

one of those on the page

likewise there are some other symbols or

remember when i talked about white space

collapsing if we need a little bit of

extra space there's an html entity for

that so i want to indent these three

lines with a little bit of space

and i can use the html entity i still

need the closing there here we go

and ampersand is usually what starts out

in html entity and now i'll type

nbsp and a semicolon

notice visual studio code recognizes

that right away

and if i save

i have spaced this line over just a

little bit

now i can add more than one of those if

i want so i'm going to copy that and i'm

going to add two more

and now save and our line is over even a

little further

so i will go ahead and select all three

of these

and i'm going to paste them right after

the line break on each line

and save and now we have indented with

some extra space all three of these

lines with these html entities that

create space but as i mentioned there

are other html entities as well so let's

scroll down here to the bottom of our

page

and after this last topic

let's add another hr

and now we'll type and

lt

and a semicolon and that stands for less

than so if we save now look we have a

less than symbol underneath the final

horizontal rule here at the bottom of

the page i'm going to go ahead and copy

that

and paste

two more

and then i'm going to add

ampersand

copy with a semicolon and that will be

the copyright symbol then i'll just put

my name you can put yours and then i'm

going to add ampersand gt for greater

than in a semicolon and once again i'll

copy that

and paste

two more now if we save

you can see we've got our three less

than symbols we've got a copyright

symbol

then

your name or my name and then

three greater than symbols and we're

using html entities to create those

i'll provide a link to a list of html

entity codes in the resources for this

tutorial you may have noticed we've got

a couple of abbreviations on our page we

have the abbreviation for kansas which

is ks and we also have the acronym or

abbreviation for the mozilla developer

network here on our page so let's go

ahead and add

another inline level element and that

can help us with our abbreviations

and that is abb

r but it doesn't really do it by itself

i'm going to go ahead and select mdn cut

it and paste it here in the middle of

the element

and this won't really provide anything

we also need to add the attribute title

here i can put the full

text mozilla

developer network

and save and now when we look at our

page it has some dots underneath mdn if

we mouse over

we get a tool tip that says mozilla

developer network now it's important to

realize this tool tip will not really be

available to screen reader and assistive

technology so

we don't want anything super important

for the understanding of the meaning of

the page to be in there so if we are

using abbreviation

it's a nice thing to have but it is

really not accessible to all assistive

technologies so

it's it you can't have anything in there

that the page really depends on because

some of the people accessing the page

may not be able to read or see the

information that you provide here inside

the title attribute of the abbreviation

element let's go ahead and add that

abbreviation element for kansas as well

so abb r and then title

and i'll spell the state name kansas

and then i can go ahead and double click

on kansas control x to cut and i'm going

to paste it with ctrl v right inside the

element

save and now

dots are under the ks here on the page

and if i mouse over we get a tool tip

that says kansas let's put another

paragraph under places i'd like to visit

and i'll put i can just type p and press

tab as well there we go and now i'll

type

i've heard

good things

about

going here with the colon

and now i'm going to add

an address element and we can put a

location

inside of this address element and it

tells the browser that this is an

address or a specific location so i'm

just going to paste this in because you

don't need to see me type all of this

and i might easily have a typo here this

is margaritaville island in cancun it

sounds like a great place for a vacation

notice we've got a line break element

after each line except the last line and

if we save this and look at the page you

can see how the browser handles this

it is

just three lines of text it is all

italicized by default

and the browser knows that this is an

address and once again so would

assistive technology so an address

element does provide

some semantic meaning as well to the

content within it now before we finish

this lesson about content there's one

other thing we can add to our code now

we won't see it on the page but it is

important to us

and this is an html comment

and so now you can see visual studio

code colored this differently at least

with the theme that i'm using and we can

leave a note for ourselves inside of our

code now notice this will not be on the

page but i will show you how the public

can see it so you don't want to put

anything in here that you don't expect

the public to be able to read

i'll put a to-do which is a common use

and i'll just put add

more places so it's a reminder to me to

add more places to the list of places i

want to avoid we save that and it

doesn't show on the page it's just a

reminder in the code or a note to

yourself inside of the code but i will

show you how the public can see this if

we right click

and choose inspect that works or you can

also press ctrl u

either way will show your source code

now notice we've got a comment in here

that says add more places it's not

visible on the web page itself but it is

visible in the source code again you can

press ctrl u

to view this

now notice live server also injected a

comment here and it injected some

javascript so when we look at the

overall source code of what is live

we're seeing more than we even had but

this is a comment once again that is not

seen on the page and live server is

using a script element that we do not

see on the page either and that can

contain javascript for example so

just to let you know if you leave a note

for yourself

it can be viewed by others and finally

now that we've added all of this html

content to our page we once again should

go to the validator markup validation

service from w3c to check our file to

see if it is valid html or if we have

any mistakes choose validate by file

upload

and then click choose file

i'm going to have to probably go to a

different folder from the one that i

checked last so i'll go to html course

lesson three which is the file we are

working with choose my index.html and

open that here with the validator now it

has the index.html file uploaded and we

can click check

and we'll see if we have valid html so

this is valid it's green document

checking completed no errors or warnings

to show if you have errors or warnings

it should point out exactly where that

error is and you can fix that in your

html

let's look at how to create lists on a

web page lists are very useful and are

used in many places on the web so we

have three different types of lists

we're going to create today ordered

lists unordered lists and description

lists let's start out with recapping

here we've got visual studio code on the

left and i've got the head element

collapsed so we had meta details inside

of there we can collapse that by

clicking on the arrow by the line and

you see between lines between 4 and 11

are now collapsed

so we're working inside of the body

element to add content to the page

and this is visual studio code and i'm

running the live server extension you

can see down here it says port 5500

click to close server if you've

installed the live server extension it

may say click to launch or something

like that which would actually launch

your web page for you because that's how

you want to view it

in a development environment you don't

want to just go to file and open the

file in your browser you want to have

that live server running that simulates

a web server if you're not familiar with

the live server extension you can click

on the extensions logo here and instead

of searching for prettier that i have in

there you can search for

live server

and you can install that live server

extension by ritwik day right here

okay so we've recapped all of that

here's the file tree with our files i'm

going to hide that by clicking the file

explorer here so we can see more of our

code and we will add lists to our web

page today so i'll scroll down

to under the subtopic of my daily

schedule

and notice how we had these line breaks

and spaces here well we're going to

replace these so i'm highlighting the

first one and then i'm going to press

ctrl d that highlights the next one and

ctrl d again now it has highlighted all

three of those

and instead of this line break i'm going

to type li

and press tab

that adds a list item

but we haven't enclosed this in a list

yet and we definitely don't need the

closing list items here so once again

ctrl d ctrl d

so all three of these will be list items

but they need to be inside of a list too

so let's make this an ordered list by

starting out with an ol and i'll press

tab and we got the closing ol tag as

well that stands for

ordered list as you might expect and i'm

going to actually put the ol down here

after the paragraph tag the closing

paragraph tag and i'm going to cut with

control x or you could retype if you

want to and

i pasted the closing paragraph tag right

after the end of let me tell you how so

this is a shortened paragraph now and

the list will not be inside of the

paragraph

now we have our ordered list but that

also needs closing li tags so i'm going

to type the less than symbol and a slash

and visual studio code instantly filled

in the closing the rest of what is

needed there and i'll do that again for

the second one

and then i'll do that here for the last

one and notice we do have the

abbreviation still nested inside of the

list item here so now i'm going to press

ctrl s and save

and visual studio code reformatted that

just a little for me but look at our

page now that we've added this list it's

an ordered list and it is numbered that

means it's in or in order numerical

order one two and three notice these are

not

this text is not enclosed inside of a

paragraph element so it's not creating

that extra space that a paragraph

element does they're stacked right on

top of each other there's still a little

bit of space but not like we have

between our paragraphs so that is an

ordered list we start out with the

ordered list element and then the list

items go inside it and each list item is

starting and then ending with the li now

let's scroll down and look at our

vacation area it says i'm also planning

a vacation

and we've got a places i would like to

visit area so after that let's go ahead

and add a ul which as you might guess

stands for unordered list

and we'll go ahead and cut that closing

tag and i want to put it after the

address here at the bottom

so this will be our full list now we

need to declare list items here

in this instance i'm going to go ahead

and keep the paragraph tags inside each

list item so we created an li there and

i'll use control x to cut

and close that first list item here for

the first paragraph

i'll do something similar here

got an li but the closing one is going

to be in a different spot because our

list item can have these tags nested

within it just like we nested the

paragraph here i'm going to go ahead and

nest the paragraph and the address

inside of the list item

here and so now if i save

and visual studio code reformatted my

code for me but notice here's the

beginning of the list item

and we have the end way down here after

the address so let's look at what this

unordered list looks like on our page

and you can see instead of numbers it

has dots it does have the extra space

created by the paragraph tags

and the address element still has the

content that it had before and still

formatted the same but notice our

ordered list and our unordered list are

both indented compared to being over

here flush to the left with everything

else we had like they were before so

similar

in formatting from an ordered list to an

unordered list

and also realize that really the only

difference is the bullet point here in

an unordered list versus the number in

an ordered list

the extra spaces were caused by the

paragraph element

inside of these unordered list items and

we did not use a paragraph element on

these ordered list items so the list

itself and the list items did not create

the extra space that was created by the

paragraph elements now let's scroll our

page we've got enough content we need to

make sure we're visiting the very bottom

here we want to add more under place i

want to avoid and i'm going to change

that to

places i want to avoid and let's go

ahead and remove our paragraph that says

anywhere cold no way

and let's add a description list here so

a description list as you might guess

starts with dl

now inside the description list there

are two different types of elements

instead of just an li like we had in our

other lists for a list item we have a

description term

and this description term could be

the place we want to talk about so let's

say the north pole

and now for the description term we need

to also have description details so

that's dd

and here i can put i here

this is

now let's go ahead and put our strong

emphasis back here

and i'll put cold and then our

exclamation mark so we have put a strong

emphasis on cold

and now i'll create an extra line here

just to space these apart another dt

i'll put the south pole

and then dd for the details description

details

and i'll say this is also called

and let's add one more

description term

this will be

mountain mountaintops

and dd

for description details

and these

if i expel these

these are

also cold

now if we save

let's scroll just a little bit more so

we can see all of our content here you

can see our description list has a

different format than the ordered list

and the unordered list our description

term is to the left and then the

description details are indented to the

right but here is our full list of the

north pole south pole and mountain tops

we want to avoid all of these places

when we go on our vacation with these

new lists now added to our file let's go

ahead and create an error on purpose

just to see

if we have an error in our page when we

check it at our validator.w3.org

and here i'm going to choose

file upload

and i may have to switch folders let's

see no i'm in the right one so i'll just

choose index dot three i think we're on

lesson four and i forgot to change the

file but i'll do that to make sure that

the github repo with all the source code

is correct so let's go ahead and check

this file

and yes we have some errors because we

created one specifically let's see if

that's our only error

as we have noted in the past

one error can create a cascade or a lot

of errors so now i've formatted this

correctly

let's go ahead and

load our file back up so we'll choose

file

we'll choose that index dot html file

again

and click check

now everything

is okay document checking complete no

errors or warnings to show so realize if

you have an error it could just be

one small syntax error that creates a

cascade of errors when we're checking

but this is a great way to learn and of

course look at the details of the code

and it's always a good idea to validate

your code after you write it to make

sure you don't have any syntax errors

let's move on to creating links on our

web page hypertext is the ht in html and

it's what links together everything on

the web it's really make what makes the

web work so well think about spider-man

or really any type of spider that's

throwing out strands of web and linking

things together that's essentially what

we're doing when we create hypertext

links we're linking the web together now

as we say link there can be some

confusion because notice here in visual

studio code on the left that i've got

link tags that we created

in the head part of the page that's from

lines 4 to 11

and these link tags are pulling in

resources from other parts of the web

whether it's something we have on our

server with our web page like this fav

icon

or

we could pull in something from another

part of the web like a font from google

fonts and things like that which we

haven't done yet but it's possible with

the link tag but that's not what we use

to link pages to each other i'm going to

collapse this head section by clicking

on the arrow over here by number 4 so we

have a little more room and now we're

looking at the body area in visual

studio code by the way i'm running the

live server extension and have our page

from our starter code that's available

for download at the github link in the

description

and i'm running that with the live

server you can see it running here it

says click to close the server shows

port 5500

okay in visual studio code

let's scroll down a little bit and let's

add what is called an anchor tag that

will create a link to another page on

the web so in our list where it says let

me tell you how and we're talking about

the different things we do to learn web

development we have an abbreviation for

the mozilla developer network maybe this

would be a good place to go ahead and

link to the mozilla developer network

and we can insert a link

around this mdn abbreviation inside

the inline element that is the

abbreviation element so i'm going to

press enter here to start a new line

now i'll just type a

and this is well i guess because it's

followed by mdn it's not doing it so

i'll start out with the less than sign

and then a

and this is the anchor tag that i'm

starting but by itself if we just put

the anchor tag

while you can do that

by itself

it will not link to anything it needs a

specific attribute that tells it where

to go so i'm going to press enter here

and we have it surrounded by this anchor

tag we need to add the href attribute

and now we're going to reference an

address on the web so this is where we

would put that address in

over here in the chrome browser i have

the mozilla developer network open we

can see up here at the top it's

developer.mozilla.org

and then there's a slash after that that

gives the specific language for the site

i believe it will default to the browser

choice so i'm going to remove that part

go ahead and select the rest

and now that i have copied that with

control c i'm going to click here inside

of visual studio code

and put that address right inside the

href attribute now i am wrapping the

code down to another line so you can see

it all it doesn't go off the screen i

could expand visual studio code here and

now you can see the full

address without that line wrapping

so we're linking to the

developer.mozilla.org website with this

link

and we can save this

and now i'm going to go ahead and bring

visual studio code back to the size i

had it the code lines will wrap

but if we look at our code

or our page in chrome that should have

now updated because we're using live

server you can see we have a link and it

turned purple it's a little hard for me

to see right now but we can change that

color in just a little bit but that

purple means a visited link if you have

not visited that site it's probably more

like a royal blue or a bright blue color

and that means it's not visited yet and

those are the default colors for links

but something about this link that we

need to acknowledge this is the full

address to that website and it's a

specific address

this is what you would call an absolute

reference this has the full address for

the web page where we're going but when

we link to something that's already on

the same server as our page where we're

hosting our website

then let's go ahead and expand this head

section again notice we're not giving

an absolute reference we're giving

what's called a relative reference

right now we don't even have a slash

here because we know

this html5 dot png file is in the same

folder as our index.html file and the

same with this main dot css file it's in

the same folder we don't even need to

provide a slash it's not in another

folder even so but it is a relative

reference and that's the difference so

we have an absolute reference here to a

place on the web and then we can provide

a relative reference to something that's

on the same server that we're on so now

let's go ahead and create a relative

reference to another page

and i'll scroll down to do this we

haven't created the page yet we'll do

that next but if you have your name here

here at the bottom i have my name where

we have the copyright symbol and in

chrome i can scroll down and we can see

this at the very bottom let's go ahead

and link

with a relative reference so i create

that anchor tag that a tag and then href

and equals and let's link to about

dot html

and notice i'm

putting quotes around that file name

just like i did for the full address in

the absolute reference above and now i

want to put my name of course between

the opening and closing anchor tag

and now that will link this to the about

page that we haven't created yet i'll

save and notice now this is that bright

blue or dark blue that i was mentioning

earlier a link that has not been visited

this page doesn't even exist yet so we

need to create this page if you don't

have the file explorer open in the top

left of visual studio code you can click

that

and you'll see the files that we have

here in the file tree what i want you to

do is click on the new file icon

name this page about.html

now this is a good place to go ahead and

pause the video you can click on the

file explorer tree over here the file

explorer to hide the tree if you need

more room

but go ahead and create an about page

you know everything we've already

learned

from the index.html page so what i want

you to do is pause the video

create your own about.html

and then come back and i will create one

with you okay i hope that went well for

you i'm going to help you create an

about.html page now or you can watch how

i do it and compare to what you did now

i've been doing this for a long time and

i'm going to take a few shortcuts so you

don't have to see me type everything out

i'm at the index.html page i'm going to

press ctrl a

to select everything then ctrl c to copy

everything

click the about.html page again

and i'm going to paste everything in

with control v

now as you're learning how to do this i

think it's important that you type

everything but i don't want to take up

your time

by having you watch me type everything

out so i'm just going to make some

changes here

the doctype is the same the html

elements the same and of course we have

a head section the meta tag for the

character sets the same the author is

the same

now this description meta tag

right here on line seven that could be

just a little different i'm also going

to press alt z to get this page to wrap

lines that are longer so now you can see

line 7 wraps down to a second line here

and we see the space to the left now in

this description i can change this just

a little bit and i'm going to say hi

i'm dave gray

this page is about me

so we've given an accurate description

for the page now and instead of my first

web page in the title i'm just going to

call it about me in the title

and now we still can use this same fave

icon and we're going to use the same

style sheet so this page will look like

the other page as far as the styles

and now we can change the heading for

the page and here i'm just going to say

hi

i'm dave gray

after that i'm going to eliminate most

of what we see here on the page so i'm

going to highlight everything from line

17

all the way down to 63

i pressed shift and i clicked on my

mouse there and i've selected all of

that specifically

and now you can see we're left with the

horizontal rules and the space in

between and so now i'm just going to put

a paragraph that's not really about me

i'm just going to create some lorem text

and i can do that with a p element let's

try lorem

times

1. i just want one paragraph click that

there we go one paragraph of information

so it's still kind of formatted that

strange i'm going to go ahead and enter

before and after there we go

and now we've got that single paragraph

here anyway

this is a basic about dot html and we

have linked to it so now let's

downsize visual studio code back here

with

the button you see right here the square

not minimized but downsized it's not

maximized either

and now our link to the about.html

should work so i'm going to click that

link

and here we're on the about page and now

notice my name is this dark purple again

so we have gone to the about page that

we just created says about me here in

the top tab i'm going to click the back

button to go back to the original home

page here now back on the home page

there is a third type of link that we

can create and this is a link to an area

on the same page on the page we're

already on we can create shortcuts to

different areas of the page so

we've had our absolute references we've

had our relative references and now this

is what i would call an internal

reference or it's an anchor link

directly to a portion of the page that

we want to go to in order to do this

we're going to add just a little bit

more to our page so i want to click on

the index.html there we are i'm going to

go ahead and collapse the head again

and we've got a couple of topic areas

besides our big hello world at the top

so we've got the part where we're ready

to learn html and we've got the part

that we're discussing planning a

vacation

so we're going to organize this into

sections and there's a semantic html

element called section so i'm going to

type the word section press tab

and then i'm going to highlight the

closing tag of the section ctrl x to go

ahead and cut that out

i'll come down here before the

horizontal rule used as a divider i'll

paste that closing section tag in

and if i save yes we got some auto

formatting there so now we have our

section separated and we've got

horizontal rules in between i'll go

ahead and add a space between each of

those i'm going to do the same thing for

the vacation planning area so type

section press tab

go ahead and highlight the closing tag

control x scroll down

to the bottom where we're finished

discussing the vacations and go ahead

and paste in that section now i'll save

once again took advantage of the auto

formatting and we'll leave a space

of course before the section here

between the horizontal rule and the

section and the same

at the end just so we can see a little

better after the closing section tag we

have a space so now we've created

semantic html sections and that's not

all we need we also need to give these

sections an id attribute so i'm just

going to give the first id value for the

i'm ready to learn html area and id of

html

and then in the next section i'm going

to give an id attribute and that value

is going to be

vacation

and once again ctrl s to save or you can

go to the file menu and choose save that

way as well

now that we've done that we still

haven't created the links but we have

created

the destination for each of the links

that we want to create so now let's

create one more semantic html element

and to do that after our hello world

heading

i'll go ahead and press enter to come

down a couple of lines type hr for one

more horizontal rule

and now between the horizontal rules i'm

going to type nav and this is a semantic

html element it says we're creating a

navigation area

inside the nav i'm going to type ul we

learned how to create unordered lists

already

and so now we've added an unordered list

and now we can add list items

and the first list item that we're going

to create is a link

and there it absolutely after i pressed

a and tab it knew we needed the href in

visual studio code so now it's waiting

for me to fill in this href now to link

to our html section here on the page

we need to add the hashtag

and then the id value so there's html

and so now we can put

learn html for this link

and then let's go ahead and add one more

a lowercase

press tab

and now hashtag

vacation

and we'll put here

planning a

vacation as a matter of fact let's

change this from learn html to learning

html

and now at the top instead of hello

world

i'm going to put my

goals for

the year

and now we have my goals for the year at

the top

and we've got learning html and planning

a vacation but i put them both in the

same list item and that's not what we

want so i'm going to go ahead and

highlight planning a vacation press

control x to cut that out

and now let's put it in its own list

item so li press tab we've got a new

list item

and we can paste that planning a

vacation if we save that looks much

better on our page even though the blue

isn't looking great on the darker

background we'll still change that in

the future

so now if we click learning html on the

page

it goes ahead and scrolls the page

directly up to the i'm ready to learn

html section we can click back and we go

back to where we were

and now if we click planning a vacation

it doesn't take us all the way to the

planning and vacation area because

there's no more content there's no more

space it can't scroll any higher but it

scrolled as far as it possibly could to

take us to that area and once again we

can press the back button to go back and

that dark purple's not looking too well

so we're going to need to change those

colors very soon before we change any

colors though let's scroll down and

create one more

link that's an internal link on our same

page here just to another area of the

page so at the very bottom

underneath our name and the link

to the about page let's go ahead and

return and add one more line here and

this will be a paragraph so we can press

p and tab

inside the paragraph let's start

an anchor

tag and there has the href attribute and

let's just link to the hashtag itself

now what we want to put in here for text

is back

to top

and we can save

now if we scroll down in our page here

we'll see the back to top link and if i

click it

it loads the page and takes us back to

the top

it's worth noting what we have up here

in the address bar of course live server

gives us our ip address which is our own

computer 127.0.0.1

nobody else on the web can see what

you're seeing this is just on your

computer

and then you've got a colon and the port

number 5500 where live server is serving

your page and we've got our index.html

file then notice you've got the hashtag

after that we could actually remove the

index.html and the index page will still

show by default just like you see right

here and now

once again if we click learning html

notice

in the address we get the hashtag html

when we click back it disappears if we

click planning to vacation we get the

hashtag vacation

in the address bar and if we click back

it disappears in previous tutorials i

had mentioned switching the theme over

to this dark mode that's easier on my

eyes was entirely optional so

if you're still using a white background

with black lettering

probably the purple and blue links look

just fine to you and you could just

leave it that way if you have switched

to the dark mode

theme that i have provided with some

basic css already let's go ahead and

make those changes so the links look

better as well so we're here in the

main.css file now in the file file

explorer

so we're just going to change the color

of our anchor tag and i'll switch that

color to a color named alice blue

after that

i also want to change what the link

looks like when it's been visited right

now it's that purple color so i'm going

to change that color to a light

gray

and

there's also another thing that we can

change and that is when you hover over

the link

or when the link is active

and then i'm just going to change that

color

to hashtag ee not three e e e there we

go

and save that and so now it's changed

the color of our links you can see this

is the light gray we visited these links

but when i hover over it gets a little

lighter

and so that looks good i think we've

visited every link here no we haven't

visited back to the top yet so you can

even see the alice blue color right here

and let's go ahead and visit back to the

top

and now

if we go back

you can see it's a little darker until i

hover over it so we've just changed

those colors we're not really covering

css yet we eventually will after we get

through all of the html but just for now

if you want those of course these will

be downloadable as well in the source

code let's go back to the index.html

file and let's hide this file explorer

by clicking on the icon in the top left

this is a good spot to talk about some

link naming conventions and things you

don't want to do so for now i'm just

going to use this link at the very

bottom that has my name as an example

and one thing you wouldn't want to do is

be instead of my name

just put in

the file text like this or what would be

worse would be a full url like www

about.html and if i save this of course

that's not to google that's just ugly

and of course you don't need all of that

you can pare that down to just actually

a short description of what is there you

don't really want the full url there so

i'll put this back to my name

and there we go and another thing you

really don't want to do is say this

links to

info

about because really that's redundant so

if i save that and we go this links to

info about and i didn't have a space

there i guess but either way saying this

links to is really redundant just saying

this is a link a screen reader knows

it's a link

you already know it's a link when you

see something underlined like that so

you don't need to say this links to or

this is a link about that's just

unnecessary you also want to keep your

link text as short as possible so

imagine if i had that same sentence

before this links to information about

dave gray and you just put the whole

sentence in the link that's way too long

just keep it to the exact topic so if

the page is about you as in our about

page just put your name in there for the

link you don't want the whole sentence

about that and now the very worst one of

all really would be to say something

to learn

more about me

comma and then instead of having your

name

right here for the text you put click

here we've probably all seen a link on

the web that says click here that has no

description whatsoever for what's on the

following page that's not good for the

context of what you're linking to it's

not good for a screen reader as it tries

to get context from what the link says

so really

a link that says click here and of

course you can imagine there could be

several links that say click here all on

the same page linking to different

things and that's just confusing so you

always want to avoid something like that

that says click here so once again i'll

remove all of this and we'll just go

back and we'll put our name here at this

link but i hope those pointers give you

some guidelines about naming just keep

it short and of course say what is on

the following page a very brief

description not a full sentence and

definitely not something generic like

click here okay i'm going to save the

index.html and we're going to go back to

the

about.html page and we'll add a few more

link types so we've got a section that

we're really saying this is about me

let's just add one more area here so we

can add another horizontal rule press

tab

and now let's add an unordered list

and inside this unordered list we'll

have list items

and this first list item should be a

download so we have a fav icon file that

we can offer for downloads so let's say

download

in

and then i'll give the anchor tag so a

href equals and now let's link to that

fav icon file that we have so that would

be

html5

[Music]

and now inside of this

we can put our html5

fave icon text but this won't allow us

to download the file yet we need to add

the download attribute

and now this is a download link so if we

save this

and we go ahead go back to the top over

here in chrome

and well i guess not back to the top we

need to go ahead and click

your name or my name whatever you've got

on your page and that takes us to the

about page now we have

download an html5 icon and remember this

icon is in our folder over here as i

click the file explorer so we've got

html5.png

and that's what we're going to download

so if we click this link

we instantly get a download of that file

so that is a download link now let's add

another type of link so add another

list item here

and inside our list item now let's say

contact me at

and now let's go ahead and do another

anchor tag with the href

and we can add an email link even though

these are not advised and i should say

before we add this these are not advised

because there are so many

spiders out there that crawl the web

really uh search spiders if you will and

what they do could harvest these email

addresses and so these have kind of

become a thing of the past most people

add a contact form which we'll talk

about forms in the future instead of

just putting their email address

directly in the page to be harvested but

to add an email link you start with mail

two

and after that you would just have your

email address so i'll just put

random at

email.com

and if that's your email address i'm

sorry but it seems random to me

and then i can just put

my

email address

which would complete the sentence rather

than actually typing the email address

there as well

so i like something like that as far as

being descriptive contact me at my email

address and that's what the link is the

link is describing

your email address okay then there's one

other type of link we can have oh let me

save that by the way and if you click

this link that says my email address it

would ask you what type of email client

you want to open these types of links

with is what it should do at least

okay the next link type that we have in

our list item will be

dialing a telephone number so now i'll

say

oops spell it right dial and now let's

put our anchor tag with the href and we

start out with t e l for the telephone

number

and you can experiment with this uh many

examples i've seen add the plus symbol

and i've also got it to work without the

plus symbol so i'll put the plus symbol

here

in the united states most phone numbers

are ten digits so i would have like one

two three would be the first set of

digits then four five six

and the last set of digits seven eight

zero something like that

and that is the telephone link so i

could say dial and then i could just put

my phone number just like i did with my

email address

and now especially on a mobile phone if

this was a mobile website this would be

very handy you could tap this and it

should open up the dialer if i click

this link now in chrome

it wants to make a call it's asking me

how to do it and pick an app to do it

because i'm here on my laptop but on a

mobile device this would probably open

up the dialer right away now let's look

at one more type of attribute here so

i'm just going to put one more list item

inside that

one more anchor tag with the hrep

attribute

and we're going to link directly to

google so we need an absolute reference

this would be https

colon slash www.google.com

and we can put the slash if we want to

as well

and this is an absolute reference but

the attribute oh and i haven't really

put in any text let's go ahead and just

put google up because we're not really

adding any extra context to this so the

attribute that we need to consider that

we haven't used yet is target and what i

want to do is have this open in a new

tab

so i'm going to use quotes then you put

underscore

blank

and save and now we have a link to

google so

let me maybe add a little context here

i'll put

open google

in a new

tab period

save that and now we've got our link to

google if we click this we opened up a

new tab and i don't have internet right

now i guess i need to check my

connection internet's back up and

running let's click this link again

and there's google so we've opened it in

a new tab and all is well so i'll go

ahead and close that there's the one

that didn't work

and now we're back to our page now

there's one more type of link i want to

add before we finish today let's scroll

down in our about.html

and underneath our copyright line let's

go ahead and press enter

add a paragraph

and inside here we'll add the link that

we want to add so type a for anchor

and now the href is just going to have a

slash value

what this does is link back to the root

of our website and that is our

index.html it's the page that loads by

default remember i had said we don't

even have to have the

index.html up here in the address it's

just the slash after the ip address and

the port here on our local server and if

we had a domain name like google.com

well then the slash would essentially be

the home it doesn't have anything else

after the slash it loads a page by

default so that's the same thing we're

doing for our website so here we can

just put

back to home

and save this and now we have a link

that will take us back to our index page

so let's click this link

and we're back to our index.html but

notice

in the web address it doesn't even have

the index.html up here it doesn't need

that because it loads this page by

default this is the first page of your

website now that we've made all of these

changes to our web page and we've

actually added a second web page let's

go to validator.w3.org

and validate make sure that we don't

have any errors in our index.html

and ourabout.html we're going to choose

validate by file upload

and choose file

and for me i'm going to have to go into

my html tutorials folder click html

course and i'm in the zero five lesson

here so index.html

open the file and check

and document checking complete no errors

or warnings to show now we want to do

the same thing

for the about.html

and let's check that as well

and once again document checking

completed no errors or warnings to show

if you have errors or warnings of course

follow up on what it shows you here in

the validator and i hope you've learned

a lot about the different kinds of links

you can create in your html files

let's look at adding images to our web

page until now we've only worked with

text but html supports multimedia and

images are a big part of that so what we

want to do is go to visual studio code

that i have here on the left and i have

our project running here on the right

and we're using live server for that so

the live server has launched down here

and you can click to close the server or

open the server

if you don't have the live server

extension search for that here in the

extensions

find

live server

and that should pull up by ritwik day

and you just want to install that and it

can launch your page for you

okay going back to what we need we have

clicked on the file explorer

in visual studio code and we need to

create a folder to hold our image files

so i'll type img to name this folder

and it is a common practice to keep your

images for your web page or web pages in

a separate folder as you organize your

project

now that we've got that i'm going to

grab some images and paste those in so

we can work with them you'll be able to

download these images from the files and

resources that i share in the

description however at the end of this

tutorial i'm also going to go over some

resources where you can download your

own images that are free for use

so now inside this image folder i'm just

going to right click and choose paste

and paste these images in

let's look at what we've got i can click

on the vacation image

and i get this vacation image here and

notice at the bottom we can see the size

of the image it's 400 by 267 those are

pixels we can look at this html logo

that we're going to use it's 300 by 300

and we've got an image of the caribbean

as well and it's 400 by 225. so i'm

going to collapse this now

and

we're going to use those in our html

code so now i'll click on the file

explorer to hide the file tree and this

all starts with the image tag so let's

scroll down in our html to where we want

to insert our first image in our page

we're going to put it right below

the paragraph that says this is my first

web page in the i'm ready to learn html

section okay let's start by typing img

and pressing tab and then visual studio

code will help us with that image

abbreviation

and it will automatically fill out the

rest of the image element now notice the

image element doesn't have a closing

element like we see here with a heading

or we see here with a paragraph

sometimes you will see it

with a slash like that at the end which

means it's self-closing html does not

require that i should say html5 does not

require that however if you are using

this in the future in something like

react it may require that so that's just

something to be aware of right now i

won't put that in because html5 does not

require it and that's what we're

focusing on okay notice the image

element has a source attribute and an

alt attribute automatically the source

attribute tells html where to grab the

image we want so we start by typing the

folder name that we created now we see

the folder here image slash and i can

click on that

and then it provides us the names of the

images that we have well we want the

html logo that i saved so i'll just

click on that and there is the full

relative path to our image it's in the

same project here and it's on our local

server

in this area so we don't need that

absolute url that would grab it from

somewhere else on the web so this is

once again a relative path to our folder

and then to the image then we have the

alt attribute now the alt attribute has

a couple of purposes

one is to help assistive technology for

those that may not be able to see the

image we are putting on the page the

assistive technology like a screen

reader will read the description of the

image so let's put html5

logo as the alt text but this also

makes this alt text appear on the page

if the image for some reason does not

load so first of all let's just save our

page and you'll see the logo

now appear on the web page and suddenly

our page got much more interesting it's

awesome putting images into our web

pages however let's go ahead and change

the file name so that it doesn't find

the image and let's see what happens on

the page

now we have a broken image icon but

notice our alt text appears html5 logo

so that is another purpose of the alt

attribute i'll fix that so we get our

logo back now there's other attributes

that we can and probably should use with

an image so one is title now we've seen

the title attribute before remember the

title

text that we provide here in the title

attribute is not accessible a screen

reader will not read it so this can't be

something that is very important that

everybody should know this is text

that can complement our image but it's

not necessarily

required the page is complete without it

but we can add some complementary text

here so i'll just put i am

learning html5

it doesn't have to be i don't even need

the period really it doesn't have to be

identical to the alt text at all this

should be complementary but now if we

mouse over the image we'll see the title

pop-up that says i am learning html5 and

that's complementary a couple of other

attributes that way back in the 1990s

these were required however for years

these have not been required but now

they're coming back and it's width

and height so if we define a width here

and we want to provide the same width of

our image now i saved this image with a

file name that tells me it reminds me

exactly the width and the height

and it's 300 pixels by 300 pixels so

i'll just put 300 if we just provide the

width

html will remember or shift

the image to match so the aspect ratio

stays the same so if i switch this to

200

and save notice it also adjusted the

height of the image however we want to

provide

both we want to provide the width and

the height and let's provide exactly

what they are

and i'll tell you why this is making a

comeback and why it is now recommended

to provide the width and the height even

though we can change this in the future

with css so i'm saying we provide these

but yes css may change

and override these values so why do we

provide them well it's a little

complicated but it's called cumulative

layout shift if you've ever gone to a

web page

and you were getting ready to click on

something and then you saw the page

shift around maybe a pop-up ad appeared

or a banner ad and you clicked on

something that you didn't intend to

click because the button or the image

that you wanted to click suddenly moved

that is cumulative layout shift so we

provide the width and the height now to

tell the browser hey

this is going to take up some space here

and this is how much if we don't provide

that the browser shifts everything once

it figures out the size of the image now

once again you can still change the size

of the image make it responsive which

would adapt to mobile devices and

everything else with css so we really

provide this information with the width

and the height just to give the browser

an idea of the size and the aspect ratio

coming in so it just kind of prepares

itself and that helps just a little bit

it is now recommended by google

developers that we do provide the width

and the height in the image element with

our first image added now let's scroll

down and add a second image to our page

and we'll scroll down to our vacation

area place i'd like to visit let's

change this to places i'd like to visit

and

they've got i've heard good things about

the caribbean so this seems like a great

place to put an image of a caribbean

beach so once again we'll type our img

abbreviation and press tab

and then visual studio code helps us out

by providing the image element with the

source and alt attributes ready to go so

for the source once again type the name

of our folder press slash and now we get

the names of the images we have ready

i'm going to

choose caribbean

and then in the alt area i'm going to

type

caribbean beach

and now let's save and see what we get

on the page when we scroll down because

we have to scroll down a little ways to

see it and there is our caribbean beach

image so now let's add a title attribute

that's just a little different than our

alt attribute just complementary text

and this is i

want to visit

a

caribbean beach

and we'll save that now we're getting

closer but remember we should apply the

width and the height attributes as well

so let's click on the file explorer

because i didn't have the width and the

height saved in the name of this jpeg

file dot jpg notice the other image we

used was a dot png there are different

image file types and those have

different extensions so now i'll click

the

explorer up here we'll go back open the

image folder and i'm going to click on

the caribbean image

now when i do that in visual studio code

it shows the image and at the bottom i

can see it is

pixels

by 225 the first number is the width so

i'm going to close this now

click file explorer to hide that so i

have a little more room and now i can

say

width

equals 400

and the height

equals 225

and if we save everything should remain

the same we've just provided these extra

attributes now i've noticed

that

this wrapped a little strange here in

visual studio code but know that the

width and the height are still part of

the image element that we started right

here

okay now that we've got that let's go

ahead and remove the in from the jpeg so

it will not find the image and make sure

our alt text appears yes we've got a

broken image icon but it says caribbean

beach and that is our alt text so i'll

fix that by putting the n back in the

name spelling it correctly and the image

shows up because now visual studio code

can find the file for us okay we had to

scroll down to see this image because

our page is long enough

that if we scroll to the top

we don't see our vacation area anymore

now this bottom of the page here you

could call it a crease if it was a

newspaper and a lot of the terminology

kind of goes back to newspapers and

magazines as we talk about layout and so

this bottom part

that defines the line that anything

below that we do not see right now

that's called the fold so anything

after this area that we can now see is

called below the fold so anything below

the fold we have to scroll to c and now

we scroll to see this image well there's

one more attribute for this image that i

want to talk about and it's the loading

attribute

and if we provide loading and we can set

it equal to a value and there's two

possible values the first one

is eager but we never have to provide

this this is the value by default so if

we do not provide the loading attribute

the loading attribute is always there

and it's just set to eager we just don't

see it

but the one that we do need to provide

is called lazy

and what you want to do for performance

for your web page

is for any image that is below the fold

that is one you do not currently see

when the page loads you want to set the

loading attribute to lazy and that means

the browser will only load that image

when it knows it is about to show it

when we start to scroll

now firefox the web browser firefox is

much easier to demonstrate this in

chrome wants to display the image much

earlier so it right now this image is

close enough

to the area that we see that it will

still load this caribbean image

automatically that we have here so i

need to create some extra space and i

can demonstrate this to you by using

something called chrome dev tools that's

available in the browser so let's do

that now i'm going to scroll back up

above places i'd like to visit

to the hr area the horizontal rule that

we have going across right here before

the i am also planning a vacation

and i'll type an abbreviation

br for a line break and then i'll put

the asterisk for times and i'm going to

put 150.

this emit abbreviation that visual

studio code supports we'll insert

150 line breaks into our page there's no

way i would want to type all of those

individually but i can do it with this

abbreviation so i'll click that and

suddenly we have all of these line

breaks

if i save and we don't see this change

but now there's a lot of space between

the sections and that's what i need to

demonstrate this so we've changed the

code i'm going to click the maximize

button here in chrome to bring the

browser all the way out and now let's

right click

and choose inspect and you could also do

this with keys

and it would be control shift and the

letter i all at once the control key the

shift key and the letter i i'm just

going to right click and choose inspect

either way we'll open up the dev tools

in chrome

now that we're getting the dev tools

open

it will automatically open to the

elements tab and notice how if i

hover over an area in the elements now

it highlights those on the left in the

browser so here i've hovered over my

goals for the year and we can see that i

can hover over the section that

discusses html

and it highlights that section what we

want to do though is click the two

greater than symbols here at the top and

i'm going to choose the network tab

once it shows the network tab

you'll want your disable cache

to have the check mark

and that is because browsers know to

save images after they've loaded them

initially so they can reload them fast

but that is called the cache where it

stores the images that's

cache we want to disable that cache so

we can demonstrate this also

in this area right below the filters you

see all fetch slash xhr js css

choose the image all we are interested

in right now are the image files we

don't want to see the rest of the files

so once you've done all of that

we're going to go ahead

and reload the page so i'm going to

click the reload icon up here in the

browser

and we've reloaded and notice down here

we just see the html logo file that's

all that has loaded right now

and now as we scroll down as we get

close to the caribbean image file we

will see it load because it has

the loading attribute set to lazy so

only once we get close and i created a

lot of space here so i'm scrolling down

and fairly soon it should pop up there

it is

we don't see it on the page yet over

here but it's getting close so chrome

loaded it in preparation for us to see

it but what that really helps is that it

did not load the image right when we

loaded our page so that made our page

load faster it only loads these images

when it thinks it's going to need them

and that is lazy loading so now you can

click the x here in the top right to

close the dev tools then i'm going to

click the

maximize button again to get the browser

back to the size we wanted it i'll drag

it down here so we can see everything

and then over in visual studio code i'm

going to press ctrl z which is undo you

could also go to the edit menu and

choose undo but i'll do control z

and get rid of all those line breaks but

again if you want to demonstrate that

you can just type in br and then how

many of those elements you want in

visual studio code will recognize that

so that is a demonstration of a lazy

loading technique that helps your pages

load faster imagine if you had a page

that had a dozen or 20 or even 50 images

you wouldn't want the page to continue

loading until it loaded all of those

images so lazy loading is a very good

performance technique especially when

you're dealing with lots of images that

are below the fold now let's add a new

element to our page and it's something

we're going to wrap this image in so

i'll put it underneath the paragraph

that says i've heard good things about

the caribbean and i'm going to type the

word

figure and i'll press tab because figure

is an element now i'll highlight the

closing tag and press control x to cut

you can also get these options that i

use with the keyboard shortcuts in the

edit menu there's cut copy and paste so

it's ctrl x to cut and now at the end of

the image here i'm going to paste which

is ctrl v and now i've got the opening

and closing figure tags

i'll highlight the image here and just

tab it in as i'm used to seeing it so

the image is inside the figure element

now this by itself won't do much but it

is saying we've got a figure with an

image and we can add a caption and it

tells the browser

that the caption

big caption element

is related to the image which is better

than just putting a paragraph underneath

it the paragraph

while we could visually see it's

probably related to the image if it was

right under the image it's not telling

the browser or assistive technology that

it is a caption for the image this

spells it out for both the browser and

assistive technology that yes what we

put in here is directly related to this

image but it doesn't have to be

identical to the alt attribute of the

image although it should kind of be a

description of the image so i'll put

caribbean

beach

getaway here as our fig caption and now

it does show up on the page and notice

the image has been indented just a

little bit and once again we can change

all of the layout of the page and how

everything looks with css in the future

but this is just the

default behavior when we apply a figure

it's indented somewhat so we have an

image and the caption now let's go ahead

and add our last image as well and we

want to put that underneath margarita

island reserve riviera cancun an actual

resort in the mexican

riviera cancun area so we'll scroll down

here

and underneath the address we want to

add an image

of at least the cancun area because

that's where we're thinking about going

so image and

we press the tab button and we get the

source and alt attribute again so let's

type img that's the name of our folder

and slash and now we've got our vacation

image and that looks good

and now we can put in the alt tag the

cancun

vacation for our vacation image

and now in the title

we can put something like

five o'clock

somewhere because that's kind of related

to margaritaville and jimmy buffett

and he's famous for that saying and it's

five o'clock somewhere there's something

worth noting about this phrase we've got

single quotations here inside of our

double quotations now that's what's

possible if we had used single quotes

out here this would not be possible but

we can use single quotes inside of our

double quotes so this does work now

let's go ahead and save

and if we look at the page right

underneath the address for the resort

we're thinking about we've got our

caribbean vacation image and if we mouse

over we've got the

title it's five o'clock somewhere that

looks good but notice we don't have the

space or the indentation that we get

from the figure element so let's go

ahead and put a figure element around

this image as well so we'll type

figure press tab once again i'm going to

highlight the closing tag press control

x

underneath the image ctrl v to paste it

in and if i save i should get some auto

formatting and so now i've got the image

indented inside the figure and let's add

a caption here as well remember it's the

fig caption element so i'll press tab

and now let's put

a caribbean

vacation

image

so it's not quite the same as our alt

attribute it's not the same as our title

attribute but it's a nice description of

this image okay we're not quite finished

with our image it's easy to forget some

of these attributes that we might not

think about applying right away so one

we know we need is the loading because

this will absolutely be below the fold

so let's set that to lazy as well and

save and now let's click on the file

explorer again in the top left and let's

look at our vacation image and find the

dimensions

and we can see here at the bottom it's

400 pixels by

267 pixels so now we can close that out

and click on the file explorer to hide

that again

and let's provide width and height so

the width is equal to

400 and the height

is equal to 267. so now we've provided

all the correct attributes that we need

for this image

and everything looks good here on the

page

one more thing i want to add about

figure figure is not just for images so

let's scroll up here in vs code back to

our html area

and we do have

our html logo right here underneath this

is my first web page we'll scroll back

up to this area here on the page as well

and now we can add a figure underneath

this image

so i'll type the word figure again

and now let's add a fig caption first

the fig caption element needs to either

be the first thing inside of a figure or

the last thing it can be either or so

here i'm going to type

in

example

of html5

code and that will be our caption so

let's save that much and we see that

here but really we have no content

inside of our figure yet so let's go

ahead and add some content and i'll add

a paragraph which is a block level

element we've discussed that in the past

block versus inline

and now for the text of the paragraph i

want to put that inside of an inline

element that will not create a line

break and it's a code element code this

element code helps you actually display

code if that's what you want to use you

can use other elements inside of it

though so if i want to display html code

i can't simply put an h1 element because

then it applies this element to the page

we need to go back to what we learned

about html entities to provide

the less than sign which is in ampersand

lt with a semicolon then i could type h1

and then ampersand gt with a semicolon

for the greater than symbol and now i'll

put

hello world

with an exclamation mark and then i'll

do the

less than html entity again and then a

slash h1 and then the ampersand

gt semicolon which is greater than

in a semicolon and now if we look at the

page

we have got an example of some html code

printed directly to our web page so this

is another example of how to use a

figure element it can contain other

content such as a code sample and you

can have a caption at the top just as

easily as you can at the bottom of the

figure okay our code for the lesson is

complete but i do want to show you some

image resources but before we can do

that we need to validate our code with

the validator once again so i'm going to

grab this and make it just a little

wider so the validator shows up better

here remember we're at validator.w3.org

we want to click validate by file upload

click choose file make sure you're in

the correct folder once this folder area

opens up and i'm in the lesson six

folder and then i'm going to choose the

index file that we're working in and

choose open and from there i can choose

check

and it should check the html it says

document checking completed no errors or

warnings to show that's what you want if

you do get an error warning it should

tell you what line it's on in your code

and you can refer to visual studio code

find the line and fix the error that it

is telling you about so once again

validate your code before you finish

before finishing this image lesson i

wanted to share some resources that i

use now there are many resources out

there so these are just a few and i'm

sure you can find others as well first

there's this article that has 21 of the

best placeholder image generators using

placeholder images is very common

practice when you're laying out a page

and you're not sure the images you want

to use yet what you can do is take a uh

url like this from placeholder.com

and put it in as the value of the source

attribute in your html image tag

and then it will generate a placeholder

image until you find the image you want

to put there some of these other image

generators actually provide pictures

like the second one on the list called

phil murray provides random pictures of

the actor bill murray but it works in

the same way you put the url in

for the source attribute value in your

image tag and then you will get a

picture of bill murray from this image

generator okay the next several sites

are just great places to download

freely

usable images as it says right here

these are licensed for free use it's

important to download and use images

that you actually have the usage rights

to so

this is a good way to do that find them

on

unsplash.com is my favorite you can also

go to pexels.com as you see here very

similar site you can also go to

gratisography.com

and this site has unique and kind of

funny pictures so that's kind of neat

too

and you never know what you'll see on

these the next one is

pixabay.com very much like the previous

ones i showed you from there i want to

suggest some free image software it's

called orphan view i've used this for

years it's just really lightweight

software easy to use and you can load in

an image and resize it and that's what i

usually use it for you can also crop

images with it i'll pull it over here as

i have an instance of earphone view open

already

you can see i've got in this large

picture of the caribbean beach but you

can go to the edit menu

and you can see different options that

are here such as the crop

and of course we'd have to select an

area to do it but in the image menu

there is a resize resample

and here you can see you've got the

dimensions of the image but i can resize

this it's a huge image right now at

5464 pixels wide

i'll take it to say 400 pixels

and it stays in sync so it keeps the

aspect ratio and now we're at

225 for the height so you see the

current size and then the new size i'll

click ok

and it brings it down to a much smaller

nicer size easy to save as well as a new

name

and a great little software to use from

there i also recommend

canva.com now disclosure here there is a

paid subscription to use this site

however i believe they have a free

account that you can at least get some

of the features or try it out so

canva.com is good

after you've got your images and even

after you have resized your images to

the smaller size that you would probably

use on your web page it's also a good

idea to drag and drop them into

tinypng.com i believe this also comes up

if you type in tinyjpg.com

but it will compress the images

and they will still look good but they

get a smaller file size so they load to

that web page faster which is always

important so all of these resources are

great and i will put links to all of

them in the description below

documents need organization and our html

files are no different html achieves

document organization with semantics in

this lesson we're going to improve our

code with the semantic html layout let's

get started i've got visual studio code

here on the left with our index.html

open and on the right i have got our

index html page displaying and we're

using the live server extension for

visual studio code to display that page

and you can see it's launched down here

you can click the close or open the

server you can search for that extension

over here at the extensions icon if you

do not have it again it's the live

server extension okay so we're adding

semantics to our index html page now

we've already added some so let's

highlight what we have done already as

we've built this page out over the

lessons the main thing that we have done

correctly is add a hierarchy of headers

you only want one h1 per page

and this should be an outline much like

you would have an outline for an essay

or any type of paper topic you would

write so this is your title for the

whole page essentially

and from there you can have multiple h2

headers which is one level down in the

hierarchy

and they would define subtopics and then

beneath that you could have h3 headers

if there was a subtopic of a subtopic

and so on and that continues to h6

although you really don't want any more

than about three

levels of headings on a page so h1 h2h3

would be the ideal way to have a page

laid out after that we need to consider

some things about semantic html writing

semantic html helps us quickly see or

read the different sections in a web

page and navigate to those sections now

we've already added a nav element to our

page and nav elements are semantic

elements so this says we have a grouping

of links here and we can see that on the

page with learning html and planning a

vacation we have a grouping of links

here that will help us navigate to the

rest of the page

we also have an hr which stands for

horizontal rule in the past i believe i

might have said these didn't really have

a semantic meaning but they do they're

currently viewed

as semantic elements and it means that

there is a topic change so something is

changing and of course we have a couple

of topics on our page and we have

horizontal rules between those in the

future as we learn css we may want to

remove the horizontal rules we see here

that divide our navigation and our

heading for the page and replace those

with lines that we can create with css

because we're not really separating

topics here although it doesn't hurt to

have these horizontal rules in place at

this time and the main thing to convey

about semantic html is the word semantic

that means it provides meaning as the

nav element says hey this is a

navigation area or the h1 element says

hey this is a heading we can also get

that from other parts of the page we

added section elements that say this is

a new section so they provide additional

meaning

rather than just

a generic

divider and we will talk about what a

generic divider is later as well now in

addition semantic html makes our pages

accessible to screen readers and other

assistive technology and that is very

important as we create pages now while

we've added some semantic html already

let's add the three big areas that most

consider for pages the first is not a

heads section but a header for our page

now we have a heading which is the title

of the page but we can wrap this in a

header element and there can be more

than one header element per page however

it needs to follow the heading hierarchy

so imagine if we had a social media site

now every post whether it would be a

blog post or a post like facebook or

instagram every post could have its own

header and it might have a subtitle in

that post as well

but this is a header now for our full

page so this would be at the top level

of our page with the hierarchy here of

h1 which is the heading for our page

notice we've also included the

navigation

inside of our header and we can go ahead

and remove this horizontal rule and i

think it will be just fine we don't need

the semantic meaning of a change topic

there and i think it's going to look

okay without the line as well so let's

save this now

and we can see live server updates our

page immediately so we can see the

change and really all we see visually is

that our horizontal rule is removed

however we have added some extra meaning

to our html here now that this is the

heading or the header section for our

full page now the next element we want

to add is the main element now there can

only be one main element per page and by

definition that would make sense you can

only have one

main area for content

per page and so we'll start here and

it's going to include our sections that

we've created so i used ctrl x to cut

the closing main element tag

and i'll scroll down to where our

second section ends before our area here

at the end and i'll paste

the closing main element and save and we

can see visual studio code reformatted

for us so now we've got the main

element wrapping

our two topic areas of vacation

and of html so we've added a header and

a main element now one other thing we

can add for our page is a footer now

just like the header there can be more

than one footer per page

and that might be a footer for a blog

post or a footer for a social media post

but this is the footer for our

entire page in this example once again

ctrl x to cut that closing tag and i'm

going to wrap everything we have here at

the end in the footer

one other thing i want to add just

because i didn't do it before we

validated our page throughout the other

lessons and it's not an error it's not a

problem but i want to include this

information here about the copyright i

want to include that in a paragraph

element so

i'm going to make sure that's lowercase

well i'm like getting a capital there we

go

and then i'm going to once again

cut the closing tag and put it

after the content and save it gets

reformatted it really doesn't change the

look i just wanted both inside that

paragraph and that might help in the

future when we want to format this area

as well with css so now our document has

been outlined into three major sections

we have a footer a main area and a

header and then inside the header we've

already discussed we have a navigation

element that is also

semantic html our list is also semantic

html we know right away that this is

providing a list and this would be

identified by assistive technology as

well now there can be more than one nav

element per page so we might have a nav

area in the footer footers often have

links to other areas

of a website now we've only got a couple

of links in our footer and one goes back

to the top and the other does go to our

about page however it's not a grouping

of links where we would organize if we

had several other things here i might

consider a nav and if you do have more

than one nav element per page it's

important that they are labeled so

assistive technology knows which nav is

which and here we can do that with an

attribute called aria

label

and then we can set it equal to

something that clearly says what it is

like primary

navigation and now we have labeled

our nav as the primary navigation area

if you did include a heading in the nav

element which is not required but if you

did you could link to that so you could

have an h2 here

and then in the h2 we might put

primary

navigation if i can spell it there we go

and now let's give this an id

and here we'll give the id

the same value primary

navigation and then here instead of arya

we would say aria

labeled by is the correct attribute here

now we're looking at

our primary navigation value

and it's saying hey it's labeled by this

value that's in the h2 so you can link

these together with an aria labeled by

pointing back to the id

of a heading however since we're not

going to have an h2 in our nav

i'll go ahead and remove that and you

can just choose the aria label attribute

and set that equal to primary navigation

which is equally accessible to screen

readers and other technologies okay

let's scroll down into this main area

previously we broke our topics html and

vacation

into sections which are semantic html

tags however there is a more appropriate

tag now that we kind of have an idea of

how our page is laid out because these

are

areas that could be

on their own maybe they would each have

their own page but much like a social

media post or a blog post some type of

article you might think there is an

article element so i have highlighted

this section and i'm going to type

article instead and i believe we'll find

that vs code changes our closing tag

immediately yes and it was already

changed to article so

instead of a section let's call this an

article because it clearly has its own

topic and now let's do the same for our

other section based on vacation so we

can highlight it

change it to article and we'll verify

that the closing tag is also article

and yes it is right here so now we have

two articles instead of sections now

there is sometimes a debate about which

should be used and it's really not

clearly defined if article or section is

the proper choice they would both pass a

validator check so really the way i look

at it is an article has a clear topic

where a section is more generic you

might use a section

just to actually create a little section

in your code whereas an article has a

clear topic that the area is about so

now inside of the article we could

create other articles but now i want to

go ahead and add a couple of sections

inside of our html article so as our

article begins we've got the heading

which is h2 and it says i'm ready to

learn html and then we have a paragraph

saying this is my first web page that's

fine let's go ahead and add the section

after that point

and now once again i'll press tab to get

both the opening and closing tags i'm

going to highlight the closing tag

control x to copy it i'm going to bring

it down here to just underneath the

figure and that's where we'll end this

first section i also want to go ahead

and add a subheading here which is an h3

and i'll just make this html5 as that's

what the section is about and now our

section has the subheading html5 it has

the html5 logo and it has our figure

that has our code sample of html5 that

all seems related

now let's add another section and this

is the my daily schedule section so

lowercase again is what i prefer

and so we'll have section and the

closing section tag i will cut that and

i'll put it here at the end of the list

before the closing article tag so now we

have two clear sections inside of our

article and they both have headings that

are h3 so we're at the third tier of the

heading with the h1

being the heading for the overall page

the h2 being the heading for the article

and then the h3s being the headings for

the nested sections within the article

so we're keeping our hierarchy in place

underneath the list we can add another

element and just a little more content

let's call this an aside this is a

semantic element and if you think about

how a web page is laid out often times

you think of an aside as the sidebar to

the page but it could also just be

another section of complementary text

that is not

as important as what's in the main

section or article that you are putting

it inside of and that's what we'll do

here and then i want to use some other

semantic elements just to demonstrate

how they work so now i'm going to add a

detail semantic element and inside a

details element you want to add a

summary element now the summary if this

was a product we might just put warranty

information in here as the summary here

i'm going to put something that's more

like a question and it will display how

the details and summary work so i'm

going to say guess the number

of hours

i code

per day as our summary now underneath we

can put the answer to this question and

now i'm going to put i start at

8am and i write

code for

let's say three hours

every morning

and we can save that

i'll scroll up so we have it up here

towards the middle of our page

and now let's scroll up here and let's

look at what we have on the page because

the rest of our semantic changes really

didn't change the appearance here

but this where we added this new content

notice we're not seeing this paragraph

at this point we just see guess the

number of hours i code per day but it

has this little arrow next to it if we

click

on this

then we see the answer

so that's a nice little addition that

this html element adds and again these

are all semantic elements so the aside

has some meaning that it's complementary

text it's not as important as what's in

the rest of the article

the details and the summary work

together so this could once again

provide details about a product say

warranty information something else a

return policy whatever but you could

also use it kind of as a quiz here where

you have a question and an answer let's

go ahead and add just a couple of more

semantic elements to this one is what we

can do with a highlighter just like you

might use a highlighter on a piece of

paper there is an element called mark so

i'm going to mark what i want to

highlight here in the text

and by including it in the text you know

it's an inline element and not a block

element

so now if i save that we have

highlighted

number of hours

now inside the answer we're looking at

some time here we have 8 am and we also

have a duration of 3 hours we can add

some meaning to that in the text as well

and we can provide a time element then

we need a date

time attribute

and for the date time attribute value i

want to put in the actual hours it

accepts several values so this would be

o 800 on a 24 hour clock

and now let's put the closing time

element after the 8 am here

and notice if i save this right now

and show this it does not change what 8

am looks like at all but once again it

provides meaning in our html for

technologies that are reading it

especially those assistive technologies

but it could also provide some meaning

for the browser itself now also it says

as i write code for three hours we can

provide a time element for the duration

too so we have time once again with the

date time attribute and now we'll put in

a different value because there is a

value for duration i'm going to put this

closing

tag at the end of the three hours now

let's look at the value for duration we

would put in

pt3h and remember there is a link in all

of the html resources that i link to in

the description there is a link that

shows all of the html elements so you

can look up for example the time element

on the mozilla developer network that's

the mdn site and you can look at all the

values that could be accepted for the

date time attribute okay let's save this

and move down to our vacation area where

we also want to add two sections i think

these are clearly defined already where

we have sub headings for places i'd like

to visit and really we have a subheading

for places i don't want to visit i

believe so here let's go ahead and add a

section again lowercase

and i'll take that closing section tag

highlight it ctrl x to cut i'll scroll

down here

and we'll add that before the next

subheading so

there we go and save that and of course

it reformats again

now i'll add a section element

and put the closing after we finish our

places i want to avoid section

and that would be at the end of our

description list

and we can save that now we've got two

sections inside of this article as well

and really once again it doesn't change

the look but it does change how the

browser interprets and it definitely

adds a benefit for assistive technology

now before we look at our document

outline with these changes i want to

quickly discuss and i'll just do it here

by this comment where it says add more

places two different elements that you

want to avoid as you're learning html

and then later on

you can use them as we possibly get into

them with css but there is a div in an

older html code you will see divs

everywhere sometimes you still do

when those people that have been using

divs are used to still writing them and

they just continue what they've been

doing in the past however there is no

semantic meaning to a div think of a div

much like a section without the semantic

meaning it's just stands for divider and

really you can put them anywhere but if

you do

you really have to do a lot of work to

get them to convey meaning you have to

add additional attributes that help

assistive technology interpret these

elements because they have no meaning as

is they are block elements so

a very similar element that is an inline

element if we just wanted to wrap a word

or two in a paragraph in an element

is span

we'll definitely use some spans as we

learn css however once again they have

no meaning whatsoever by themselves they

don't change or add any value to your

code and we would use them possibly to

apply some css styling to some words

that we would highlight around span so

we really want to avoid both of these

elements as you learn html really work

on using semantic elements and then

when you understand what semantic

elements are and how to use them and

then occasionally when just no semantic

element is the correct choice

that is the time that we actually should

use divs and spans so i'm going to

delete those for now

and save our document and now i'll just

scroll our code up to the very top and

i'm going to do the same for our page

over here on the right now what i want

to bring your attention to i'm going to

maximize the browser

and we're going to go to the chrome web

store and look at an extension we can

add and that extension is html5

outliner so search for that

you'll find html5 outliner you can click

on that and i've got it installed

already so mine says remove from chrome

yours would probably say install here

and it will look at our semantic

elements and make an outline of our page

so let's check that out okay i'm going

to bring our page back down to the size

we had it

down here to the bottom now once you've

got that extension installed you may

have to restart your version of chrome

to get it to work but here we go click

on html5 outliner and look we have got

an outline of our current page so we've

got our heading hierarchy correct with

my goals for the year an untitled nav

that's okay we didn't put a heading in

there like i said we could have put an

h2 it's just saying we didn't have one

but a nav doesn't require one but

remember if you do have more than one

nav element per page then you do need to

at least appropriately label that for

assistive technology okay now we've got

another section this is our article i'm

ready to learn html and that's our h2

heading

inside the article remember we have two

sections we have the html5 and my daily

schedule and then we have an aside and

this aside was inside the second section

it's also untitled which is okay and a

side does not have to have a heading but

it just notes that as it's untitled here

if you added a heading inside of the

aside say an h4 then it would of course

appear there now we've got our other

section this our other article actually

this i am also planning a vacation that

was an h2

and then these are h3 headings so you

can see how important the headings are

the heading hierarchy if you don't get

any other semantics correct in your page

that's the one thing to really

understand is the heading hierarchy of a

page but all of these other semantic

elements definitely help outline your

page and add meaning avoiding these is

the biggest mistake you can possibly

make as you are constructing an html

page okay now that we've looked at our

outline let's once again validate our

page i'll pull this over just so we see

a little bit better i'll click

file upload we're at validator.w3.org

and i'm going to click choose file i

have to make sure i'm in the right

lesson folder i am not so i need to go

into html course

lesson 7

index.html just make sure you upload the

index.html you were working on for this

lesson

click check and we'll see if we have any

problems if you have a problem it will

show here it should tell you what line

and what the problem is but we're good

to go document checking completed no

errors or warnings to show

let's add a table to our web page tables

structure tabular data that is data

that's made up of rows and columns we

often see this with schedules

statistics in sports and many different

types of data flight schedules for

example

and what we don't want to use tables for

are an entire page layout back in the

90s and early 2000s it was very common

to use a table to structure your entire

html page so you may see some old code

that does that but we do not want to do

that we want to stick with semantic html

and in the future you'll learn css and

we'll design our page layouts with

semantic html and css not tables okay

tables do really need a little bit of

css to look kind of accurate however we

can start creating a table without css

so let's do that now i'm going to scroll

down in our html file and we want to get

to this section that says my daily

schedule the subsection and then we

describe the daily schedule a little bit

and we even have the aside here that

says guess the number of hours i code

per day so we want to put some of this

in a chart or a table if we will not

really a chart i guess so

here we go with a line break

and underneath this break we'll put a

table element

inside the table element i want to

scroll up just a little bit so we can

see this better inside the table element

i'm going to type a tr element which

stands for table row

and inside the table row we put our data

cells and those use td elements which

stands for table data okay the first

thing i'm going to do now is start a

time element which is going to have a

date

time attribute

we'll set that equal to 8 am

and inside this we'll put 8 am

notice i've pressed alt z already which

has my code wrapping down to the next

line if it would extend further so if

your code is extending outside of the

window here in visual studio code just

press alt z and it will wrap to the next

line

i'll put a hyphen here

and then another time element with a

date time attribute

i'm going to set that equal to

11 am and i'll put 11 am here so now we

have 8 am to 11 am and our first data

cell

and then i'll put the activity in the

next data cell and here we'll put

write code

now i'm going to highlight this full row

and then press shift alt and the down

arrow and it will copy that down so i've

created another row quickly so we can

just

edit some of the information here so now

i'll start at 11 am

and then i'll switch the next one to 12

pm

and so there's our one hour for lunch so

here we can put

eat lunch now let's do this one more

time or i'll highlight the row

and then press shift alt and the down

arrow

and now we'll have our afternoon time

here so this is a 24 hour clock that we

need to be aware of as well so we'll

start at 12 pm

and now this will be 17

and this would be 5 p.m over here

so now from 12 p.m to 5 p.m we can put

in another activity and i'll just say

study for

other courses

and we'll save now let's scroll down

over here in our html and look at the

table we have applied no css so we can

see the columns with the times on the

left and the activities on the right but

it is a little hard to make out that

this is a table so i want to add just a

little bit of css to help our page out

i'm going to click on the css file that

we've linked to our project scroll down

to the bottom

and just paste in just a little bit of

css for now this will be available in

the files and once i save that you

quickly see how it applies to the table

this looks much more like a table 8am to

11am write code and we can see

clearly

each time block and each activity i'm

going to go back to the html file but i

also want to expand the browser to

highlight something that happens here in

the code i'm going to right click on the

table and click inspect this will open

dev tools and it should be showing the

elements now if we highlight the table

over here in the elements tab in dev

tools you can see it's highlighted on

the page notice all the orange to the

right that is margin that is not table

so the table doesn't expand to the width

of the page it only expands

based on the content inside the table

that is different from some other

elements like the paragraph element

notice how it expands for the full width

of the page

or the ordered list element that we have

here it expands for the full width of

the page the same with the aside element

so it's worth noting that the table is

different from a lot of other elements

that automatically take up the full

width of the page the table element only

expands to contain the content that is

within the table okay i'm going to close

devtools resize chrome once again so we

can see our code here on the left

and what we are missing from a table

are headers for our columns we clearly

have a time column and an activity

column so let's add that by adding a row

at the top of the table

we'll start with the t element again tr

element and then inside instead of td

for table data we have th elements for

table header so

we'll have time

and then we'll also have

activity and now if we save that

notice that the time and activity are

formatted just a little differently and

i did not do anything different for

these headings in the css

what we have is a centered

heading and it is in bold and that is

the default styling that is applied to

table headings now what if we had some

data that needed to take up two columns

in our table so in other words one cell

would span the width of both columns we

can do that so let's add a row at the

bottom

and inside the row we'll put one data

cell and i'm going to put free time

inside here for data but there is an

attribute called call span and we can

set this equal to 2

and this will take up the width of both

columns okay now i'm going to remove

this call span

and let's put a data cell before free

time here

and here we'll say inside of this data

cell

let's put all

other

times

but for the attribute on this cell let's

put a row span which also exists and

we'll have this take up two rows so now

let's put another row underneath

and in this row we'll only have one data

cell

and here we can put

sleep

now if we save you can see our all other

times is taking up two rows and now we

have free time and sleep on the right

now our previous lesson covered html

semantics which definitely helps

structure a page and tell the browser

what the page is about and it also helps

assistive technology like screen readers

navigate a page for those that do not

use a mouse for example to navigate the

page so let's scroll up and start adding

some semantics to our tables because

that is also possible

underneath the table the first element

we want to add

is a caption

so we add the caption and we can say

what the table is about and that would

help someone navigating with a screen

reader decide if they really want to

navigate the rest of the table or just

skip over it and clearly we can also do

that visually so let's just put in my

daily schedule like the same title we

have for the subsection above in the h3

and as soon as i save that you can see

now the caption spans both columns

already and is centered and we didn't

have to add a column span for that to

happen that automatically happens with

the caption after that we can clearly

define sections of the table much like

we do sections of the page so let's

start out with the header and this is

the t

head which stands for table head

now i'm going to go ahead and highlight

the closing tag press control x to cut

and add it underneath the end of the row

and we can save and here you see the

full table head clearly defined it

doesn't change the appearance at all but

it adds semantics to our table

likewise there is a t-body element for

the table body so i'm going to once

again highlight the closing tag press

ctrl x to cut

scroll all the way down to the end of

our table the last row but before the

closing tag of the table

and paste the t body tag

so now we've got a head and body section

for our table we can also add a t foot

section so now inside of the footer i'm

going to put another row

and inside the row i'll put a data cell

and i'm going to give this a column span

equal to two

well i didn't get the rope or the data

cell started there we go

now we go call span

equal to two

and inside of here i'm just going to put

a statement but you could put something

in the footer that say totals up all of

the columns if you had a ledger that was

tracking account numbers or expenses or

say you had

sports stats or something like that or

anything else that would need totaled up

that would be a good place to put it is

inside the footer i'm just going to put

a statement about our schedule i'm going

to scroll up before i add the statement

but here i'm just going to put

and that's what i do

every day comma

five days a week period just eat

sleep

code

and recharge

i'll save

and now we can see our footer is

spanning both columns and we've clearly

defined the semantics for our table now

with a header a body and a footer now

another question you might think of is

what if the row needs a header as well

it needs some definition so if we can

have a heading for our column what if we

need another kind of official title for

each row as well well we can do that as

well so let's scroll up here to the top

and in our header we'll need to put an

empty

square or an empty cell

and we can do that we'll just add

another th and inside of here we need to

put ampersand nbsp with a semicolon this

is an html entity if you remember when

we covered html entities in a past

lesson and that just puts a little small

space inside of the cell now that we've

added that we can add headings to each

of the other rows so

we'll have a th here for the first row

and i'm going to put

morning

and then in the next row we'll add

another th and i'm going to put break

and in the next row th and i'm going to

put

afternoon

next row

th

and this is evening

and in the final row

well i guess not the final row that

would be the footer but this would be

the final row with a row heading

and i'm going to put

knight so if we save this

we can really see how our table has

changed but notice we didn't change the

call span yet for the footer so we've

got an empty square here as well here's

the empty square we defined but we

didn't plan on this so we better change

our call span for the footer to three

because we now have three columns and if

we save that looks much more like it and

you can see when we added the row span

and we came down to this final row

and we only added a first and a third

column

we didn't have to specify that this was

the first and this was the third it

automatically knew that because the

second column in the row above is the

one that had the row span of two now our

page is looking pretty good over here as

far as the table goes but we need to add

just a little bit more for semantics and

we need to go back and start at the

header to do that so i'll scroll back up

and here we are in the t-head area of

the table and for each heading that we

have on the page each th except this one

that has a space in it we need to

provide a scope

and that says how it relates to the

table so this would be

scope equals to call which stands for

column

and i'm just going to copy that because

we need to add that to the next one

and so time and activity both apply to

the columns so as you might guess when

we get down to the next part in the body

where we get to the row headings

i can paste this in but i need to change

column

to row

and i'll copy this and we need to apply

this to each one of the row headings

so now at break

and then we had

afternoon

evening

and finally night and if we save that

once again the semantics don't change

the look on the page but we have really

helped assistive technology navigate our

table now this is the easier way to do

that with scope however that you may see

that

accomplished in another way and that is

providing an id

for each header so if we had an id

and set that equal to time

and then we had an id

let's say in this row or this row up

here with morning and we set it equal to

morning

then in the td we would have to give the

headers attribute and specify both so we

would say time

and morning i find it much easier to

just provide the scope instead of ids

and then having to add a headers

attribute to each data cell as well

so we'll just leave it at that i'll go

ahead and remove these examples that

gave the ids and we'll stick with scope

up above here so there we go i just

wanted to quickly discuss that that

there is another way to do it now that

we've completed adding the semantics to

our page and we're finished with our

table let's validate our code i'm going

to go to

validator.w3.org i'm going to drag the

page over just a little bit

click file

upload

and now when you click choose file make

sure you're grabbing the correct file

that you're in the correct folder i'm in

the 08 lesson here is the folder that i

want and i choose the index html and

click check

and document checking completed no

errors or warnings to show if you have

any errors it should show down here and

tell you which line they're on and give

you some information about correcting

those

so far the html we have created has

resulted in one-way communication but in

this lesson we're going to add a form to

our html page which will allow users to

send information back to us and that

makes our html interactive i've got

visual studio code open here on the left

with the starter code for the lesson and

on the right we're displaying that

starter code in the chrome browser and

i'm using the live server extension to

do that live server also immediately

updates the browser with any changes we

make in the code adding a form to a web

page allows us to gather information

from our users and more specifically it

allows our users to send us information

if they choose to this is exemplified

throughout the web with contact forms so

let's add one to our page notice i'm

near the top of the page around line 13

where the body element starts and if we

come down just a little ways we find our

nav element on line 17. now here i'm

going to highlight the last list item in

our unordered list that has planning and

vacation and i'm going to press shift

alt and the down arrow to just make a

copy of that below

here i'm going to add another anchor and

remember these are for links within the

same page i'm just going to change

vacation to contact in our new link

and i'll highlight the planning and

vacation and change that to contact me

so now we have made a link that should

show up here by our learning html and

planning a vacation so i'm going to

press ctrl s to save and there is our

new link and now we'll want to scroll in

visual studio code all the way to the

bottom and maybe i can just grab the bar

here and go a little faster because

after our last article that has the

places we do not want to visit on

vacation and we can see that in the

browser as well if i scroll that down

may take just a second to get there but

here we are places i want to avoid we

want to add our contact form underneath

this but above the footer as well so

underneath this last article but before

the main element closing tag so i'm on

line 170 right now going to add another

hr a horizontal rule divider and from

there we can start with our article

element i'm going to scroll up just a

little to get this closer to the center

of the page or a little higher and then

we're going to go ahead and add that id

to the article element and here we'll

need this to match what we put in the

anchor link above so it needs to say

contact from there let's go ahead and

add our header for the heading hierarchy

and this should be an h2 as it's a new

article area of our page so it matches

the other article areas and here i'll

put contact me for the title

now let's put a paragraph with a little

description underneath and so in the

paragraph i'll just put i'd really

like to hear from you

there we go and now we have a title and

we have a bit of a description

and now we're ready to add our form to

the article so let's start out by typing

form and pressing tab notice an action

attribute is automatically added to the

form tag and what we want to put here is

where we're sending the information

usually this would be to our own server

but for this tutorial and just to

demonstrate what a form does we're going

to send it to a website that will

display

the information that we have sent with

the form so let's type https

colon slash

http bin bin

dot org and then slash get now that last

part slash get refers to the method

we're going to use and that's the next

attribute that we need to add to our

form

so method equals get

likewise

method is often post as well there can

be other values and we'll see the

difference because we will try both of

those out before we're finished now the

contents of forms are mostly labels and

inputs and every input should have a

label so let's start with a label

element and notice it instantly has a

four attribute that four attribute value

should match the id value of the input

so here we're going to put first name

because that's what we expect

and then for the label this is the part

that will show on the page we also want

to put first name and then i'll put a

colon after that let's go ahead and

create an input and you can also type a

colon after the input and type t e x t

to get a text input and then press tab

and notice we automatically have the

type for the input filled out as text

and now we have a name attribute and an

id attribute

and these you really want to match so

i'm going to put first name and i forgot

to put camel case here for the label but

i like to use that on these so let's go

first

name and by camel case that means the

second word has a capital so first name

with a capital n

and then for the name value we'll also

put first name that matches and let's do

the same with the id now remember the id

is the one that absolutely needs to

match the value of the four in the label

this name attribute though

is how it is identified at the server

level so when we send this information

onto the server the information that is

in this input will be labeled with the

value that we put in the name attribute

so let's go ahead and save this much and

see what we get on our page we can

scroll down and look at our form it's

very basic right now but you can see the

title contact me

and the paragraph i'd really like to

hear from you and then we have our first

name label and our input where the user

can type information in this text input

but there are a few more attributes that

we can add so let's add one called a

placeholder now this lets us display

text but it's not the same as the value

which would actually be what the user

enters so this could just be an example

i'll type the name jane and save and now

we see jane in the text input but it

will not be sent with the form if we

click in that input and then start to

type

jane disappears and now we have a value

an actual value entered but as soon as i

delete the last letter jane will

reappear so placeholder is just

exactly that it is holding the place of

whatever value will be put in so often

times there is example data in there

just to show the user what is expected

we can also add another attribute called

autocomplete

and autocomplete doesn't expect a yes or

no or true or false like others often do

with attributes as far as that goes this

is expecting an on or off so we're going

to turn the autocomplete on

and that means it will remember other

inputs that have been entered into this

field and suggest those so if we were to

submit the form and then

fill it out again later it might suggest

what we previously put in so that's a

preference thing if you want to have

autocomplete on or off

then we can put required and this will

require this field to have information

from the user before the form can be

submitted now notice i said autocomplete

didn't use true or false or yes or no

required does but we don't really have

to set it equal to

true like this we can just say required

because if we put required there it

equals true and then if we don't have

required there it's obviously false and

the last attribute we'll give this input

is autofocus now only one element in the

form or on the page can actually have

auto focus because it can't focus on

more than one at once

this will put the focus in that input

when the page loads so i'm going to save

and then if we reload the page we should

see

the flashing cursor here there's focus

in there immediately when the page loads

so we can start typing instantly when

the page loads in that field now i'm

going to leave the autofocus here to

have it in the source code for you for

the lesson however with the contact us

page being at the bottom of the page it

may not be where you'd really want to

have auto focus if you were creating a

form okay and that completes our first

label and input combination for our form

now i'm going to highlight both of these

and press shift alt and the down arrow

so i can copy this down and i'm going to

change first name i'll press ctrl d to

highlight every instance of first name

which we have 3

and then arrow to the front of it and

then go three letters in and just switch

it to

last name so we could change all of

those at once again that's ctrl d

and it will let you select more than one

at a time for each time you press ctrl d

okay so now we have last name we need to

change here that didn't change this

instance of it because we had a space

between it so it was not the same as the

others

and we don't want a placeholder jane for

last name so we'll just put

and then auto complete on i guess we did

it for the other one that's okay but

remember only one element or one input

can have auto focus on a page so we need

to remove that now let's go ahead and

save and you can see

our form has both inputs and labels it

doesn't look too great though does it

they're just all running along one line

and then wrapping to the next when it

runs out of room and with that problem

it may be better to wrap our label and

input in a block element that creates

that line break so let's use a paragraph

that once again better than using a div

a paragraph has just a little more

meaning than an empty div although

almost the same in this instance and you

will see some use divs here instead of

paragraphs so we've got a paragraph

there

now let's wrap the label and input for

the last name in another paragraph

and save and now let's look at our form

it has a little more space here this

looks a little bit better than before

okay let's keep adding to our form i'm

going to scroll up again we'll get the

last name towards the top of the page

i'll highlight the paragraph and

everything inside of it and shift alt

and the down arrow once again and now

we'll change last name to password so

ctrl d to select every instance of last

name again and i'm going to type

password so now we've got a four

attribute in the label and then the name

and the id

our password

so let's change our last name here

to a password value for label and type

text also needs to be changed to

password so this is a different type of

input than we used for first name and

last name

for placeholder i'm going to put your

secret

and autocomplete is not supported on a

password input so we can remove that but

we do want to go ahead and require a

password so now let's save

and we see our new input down here that

says password and that's your secret for

a placeholder but now when i start to

type into this input

notice it has little dots instead of the

text and actually let me see if i can

just enlarge this a little bit so we can

see these better there we go so we see

little dots here inside of our input

and that is what a password field does

so it doesn't let the user see what is

being typed in okay let's scroll up

again and i will highlight the last

paragraph with the label and input shift

alt and the down arrow to copy

and now we're going to change this one

to something different let's say this is

a phone number so i'll once again select

well i just wanted the three but it's

going to change five now because we had

password in there so many times

so we can change the label to have a

capital p this is not a type phone

though that doesn't exist however type

tell does which is short for telephone

so we'll leave the four attribute on the

label the name attribute and the id

attribute values all to phone all lower

case for placeholder let's give an

example here and i'm going to put

555-555-5555

and if we wanted to leave it required we

could but we can add another attribute

here too

and i'm going to press enter just to

come down a line for this it is the

pattern attribute now a pattern

attribute

supports regular expression patterns and

that's almost like learning another

programming language if you're not

familiar i'll at least show you this one

that will give a pattern for a phone

number like we have shown in the

placeholder so

we're saying

zero to nine so this must only be

numerical digits and then we'll use a

curly brace and put the number three so

it should be three numerical digits then

we'll put the dash and now i'm going to

put the same pattern again because we

had

three more and another dash

and then finally it's going to be the

same pattern again because we want all

numbers and only numbers but this last

one should be 4.

and so that is a regular expression

pattern that would match what you see

here for the example now why else would

we put the type tell instead of type

text or type number well type number has

a little different display and it

actually provides arrows that would have

you click up and down we don't want that

but type tell also on mobile devices

should bring up a numeric keypad on the

screen instead of an alphanumeric

essentially with letters it should just

bring up what you would say dial for a

phone number and now that i'm thinking

about that the hyphen might not be

available on that numeric pad so let's

just make it simpler and go with all

numbers here

and remove those hyphens from our

pattern too so it can still match so

let's save this and now i'll go ahead

and copy this down but we'll look at a

example of a number input so we can

definitely see the difference right now

we see the phone input and it's input

type tell

and really we don't see anything any

different here besides that because

it still allows you to type a hyphen or

an underscore or anything else you want

in this input but we're just expecting

numbers and it will have to match this

pattern to allow the form to be

submitted so the pattern does enforce

what should be entered into that input

and now let's go ahead and highlight

phone i'll press ctrl d again and i'm

going to change this value

to decade

and we've changed the four attribute the

name attribute and the id attribute but

the label here that we want the user to

see is going to be

favorite

decade

now let's change the input type

to number let's go ahead and just remove

all of these attributes placeholder

pattern and required

and now let's add a minimum so we'll set

the min to 1950 this is where the range

will start

let's set the max

to 2020

and then there is an attribute called

step and that means

the interval in between essentially how

many years in this case will we be

switching between values and so we'll

just move decade by decade which is 10

years

and then the starting value so what we

want to display and we'll start with

1980.

so let's save this and now we see our

favorite decade input here at the bottom

and when i mouse over notice a couple of

arrows appear let me enlarge this one

more time

oh i enlarged the code instead here we

go let's enlarge the page one more time

scroll up and look at this form

i'll shrink the code there we go

and so when i mouse over we see 1980

displayed but we get these arrows so we

can arrow down to 1970 all the way to

1950 then i can't go any further

likewise i can go up to 2020 and can't

go any higher so our step interval is

working and our min and max are also

working and it's displaying numbers and

now we're going to look at a very

different kind of input so i'll just

start over and i won't copy everything

down

but i will start with a paragraph

element again inside the paragraph

element we will have a label

and it has a four value i'll put for

coffee because we'll ask what the user's

favorite coffee is

so we'll say favorite

coffee with a colon

and now underneath that instead of an

input element we're going to add what is

called a select element

now notice it still has a name and id so

we'll name or we'll assign the values

coffee to both of these as well

the id here still needs to match the

four for the label and will still have

the same name

for the input as it's received at the

server as well now notice we do have a

closing select element

and so with that closing select element

notice that's already different than the

input that does not have a closing tag

for the element

but inside of select we need to put

options so let's give our first option

element here and it has a value and

we'll set this to regular

coffee but now that's not what the user

sees the user is going to see what we

put between

the opening option and closing option

tags so here i'm just going to put

regular coffee

with caps instead of all lowercase

and now for the next option

let's put

iced coffee

and do the same thing as far as what the

user sees

there we go i need to scroll up just a

little more

and let's look at our next option

let's say this is a

latte

i hope i spelled that right

and let's give another option

let's call this

capuccino cappuccino

c-a-p-p-u-c-c-i-n-o

there we go that's a little

one i don't think about every day whoa i

scrolled because i clicked just a little

too far to the right sorry about that

scrolling back down to our cappuccino

there it is i scrolled way up by mistake

get to the end of that line press enter

add one more option here

maybe two option let's put a cortado

and what else could we put oh yes what i

like to drink which is

an americano

so we've got several coffee drinks now

in our list

and maybe we should put other others

always good there because

there could be something we didn't think

of so let's just put an other selection

too

and save

and now if we look at our form over here

we can see the favorite coffee is here

with the select menu and we have to

click on the arrow

and then all of our options show and we

can choose like i would choose americano

we could choose other any one of these

options and the top one is what is

showing but we could decide to show a

different one if we set it as selected

so in the options let's say we want to

display latte

by default

we would put selected here in the option

and if we save

now it displays latte by default so you

can choose

which one displays instead of just the

top one our code's looking a little

messy here as things started to wrap

lines so let me just expand visual

studio code for a little bit and you can

see how this looks much more organized

when the lines are not wrapping now

there's another element we can put in

here to help organize our selections so

let's do that and it's called an option

group and that is an opt

group

so once i tab over it gives us the

closing tag too i'm going to highlight

and control x to cut

and out of the coffees that we're going

to have because this first group will be

coffees it's just the first two options

so let's close this here it will

reformat as soon as i save but we also

need to put a label attribute which is

different than a label element

so this label attribute on the option

group let's put

coffees with a capital c because you

will find out the user will see this

value

so now let's save this

and we're not going to look back at the

web page yet because we need to put

another opt group here for the other

coffees so now that we have that

i'll select the closing tag

and i'm going to put it after americano

other doesn't belong to a group and

that's okay too

but let's give another label here for

this group and this will be

espresso

drinks

and save now i'll resize visual studio

code

and we can look we still have our latte

selected as the default choice but now

if we expand this you can see coffees is

in bold we can't choose coffees i can't

choose espresso drinks but i can choose

regular coffee iced coffee

latte cappuccino cortado americano or

other

but our list is better organized because

we put in those option groups we can

make a couple of other changes too so

let's go back and just look at the code

again and these other changes are

actually attributes that will add back

to this parent select element so one is

multiple and that means we will be able

to select more than one choice so we

could select iced coffee and americana's

and then we want to put a size value

and this size

says how many from the list will display

on the page at once so if we save that

you'll see what i mean by size now

notice

we have five values automatically

displaying on the page and notice latte

is already selected because we told it

to select latte but we could also hold

down the control button and click

regular coffee and now we have two

selected at once and i just noticed my

typo in the label where i only have one

e in coffee so i better fix that

put the other e in at the end of the

word and save okay i'm going to expand

visual studio code once again now this

looks nice on our page and it allows us

to select more than one coffee and

that's great but i want to show another

input that we could use for this same

type of data so right now starting on

line 199 i'm going to highlight

everything down to 214 now from the edit

menu i believe

there is yes toggle a blocked comment

and i do this with shift alt and the

letter a so

i'm going to select all this once again

this paragraph and press shift alt in

the letter a and when i do that notice

it comments everything out so i've kept

the code if we want to go back to that

but this is an html comment that we have

previously gone over in a past lesson

and it just comments the code out for

now so i'm going to paste in another way

that we could

use this same information and present it

to the user so here's the paste

and let me go ahead and return there so

we have the paragraph on a separate line

but notice we have a label it's for

coffee it says favorite coffee now we

don't have a select we have an input

type and it's a text type

and then it has a list attribute and it

says the list

is the coffee dash list

then notice we have a data list element

and that id

matches the list attribute of the input

coffee dash list then i've got some

values here that are much like the

values that we saw in our select menu so

this is just another example now let's

save this and go back and look at our

page

and see what we've got it looks like a

text input now when i mouse over

notice the arrow

and if i click the arrow

there's our choices that we're getting

from the data list but what is nice

about this

if i just click in there they pop up and

i can start typing

and then it just narrows it down it

filters the list to what i started

typing so that's a different type of

input that can handle

very similar data presentation so okay

what i'm going to do now is highlight

that data list leave it in the code for

you but comment it out again

i pressed shift alt and the letter a to

do that

and i can reverse this comment by doing

the same thing so again line 199 all the

way down to 214

shift alt in the letter a and now it is

uncommented and so we've got our

original

list back with the select and i'll save

that and you can see that now on our

page over here on the right okay i'm

going to expand visual studio code again

and now so far we have got fairly good

semantics for our forum because we are

applying a label with the proper four

attribute for every type of input that

we have and that's good but when a form

gets large sometimes it's good to

organize it into different sections

sections that say what each part of the

form is about so underneath our form

element the opening tag here i'm going

to type a new tag

called field set

and now i'm going to go ahead and copy

that closing tag for the field set and

come all the way down to

just above our closing of the form as

well because this will be a section

where we've asked about the different

information such as the name and your

favorite coffee and so on and now

inside of this field set we can specify

one more element and this is called

legend it's a lot like a caption and

this is just saying what we're

requesting in this section of the form

and i'll put personal info here and then

we can save now let's go back and look

at our form again

and you can see it's surrounded this

section of the form because we're going

to add more to it yet so we just

sectioned off part of our form

essentially

it's got a square around it and personal

info the legend is part of that frame of

this section of the form and clearly

this does give some more semantic

meaning actually conveys meaning in our

structure as we define

part of the form and what it's about

okay let's continue to add to our form

now because there's some other types of

inputs we want to cover so let's scroll

all the way down by our field set and

now after the field set we'll put in a

break

and then we can add a new field set so

inside this field set we can add another

legend element and we're going to say

what is your

favorite food so this section of the

form is all about choosing a favorite

food

we'll start with a paragraph

inside this paragraph let's have an

input before the label this time

and this is going to be type radio radio

inputs are a little different

but let's give it a name attribute and

this will be for food

and now the id attribute is going to be

different than the name this time so

we're going to say tacos this is going

to actually be more like what the value

of the input is and we'll assign the

value attribute and here we'll say tacos

as well

so now that we've done that let's go

ahead and put the label underneath

and there we can have the four which it

should still match the id which is tacos

and then what do we want to show in the

label well of course tacos with a

capital t

okay now that we've done that we've

created one radio button so we need to

do a couple more so we have other food

choices i know tacos is the proper

choice but we should have a couple of

other choices here so i'm going to just

do shift alt in the down arrow twice

we've copied those down

we're going to leave the name attribute

food on all of these and that's because

you should only be able to select one of

these so when we select one the other

choice should

not be selected and that's what we

achieve by giving them all the same name

for the input but as far as tacos for

the id

and the value we can change that to

pizza

and we of course should change pizza

here oh and i should have changed the

four here to pizza as well so there

should be three now this last one let's

go ahead and select all three tacos

change it to other

and then here we'll say other as well

now i should note that if we had an id

of other we didn't with our option up

here that was separate

that had just the value of other as far

as the option and the name and the id

was coffee so we're good but you don't

want to double up you want to make sure

you have individual or unique ids for

each input in your form okay now that

we've added our new field set with the

choices for our favorite foods let's

take a look at that back on our page so

if we scroll up we've got what is your

favorite food and since they're all in

paragraphs which are their own block

elements they're each on their own line

inside of our field set so we can choose

tacos but then because they all have the

same name food if i choose pizza tacos

is no longer selected and it's only

pizza so you want to make sure

out of the radio buttons they all have

the same value for the name attribute

okay let's scroll down a little more and

let's add another field set and we'll

look at another type of input

inside this field set we'll have a

legend as well and here we're going to

say do you

have pets with a question mark

and now for our inputs

they're very similar to radio buttons

but not quite the same so i'll start out

with a paragraph

input

and the type is not text it is check box

and then once again there will be a name

and we'll set this equal to pets

and the id is going to be equal to dog

and then the value

is equal to dog so you can see the

pattern is much like when we were adding

radio buttons let me expand visual

studio code so this will be a little

easier

and now we'll go ahead and add a label

after that

and the label value will be for dog

and what we will display on the page

will be dog as well

so very similar i'll highlight this

we'll copy this down

three times so now we'll continue to

have the value pets for each one of

these inputs

but the next pet will switch from dog

to

cat

and we'll put cat here on display as

well

and then maybe we want a fish

we'll switch this to fish

and then finally

we could think about doing an other as

well but remember

we can't have an id that says other here

too we would be doubling up on that so

that could be a problem let's say

and select all three and say other

pet

and from there

we could say other because we just need

this to be different the id specifically

needs to be different than any other id

on the page or in the form now let's

save this and look at the page and there

will be a difference between the radio

buttons because when we ask do you have

pets and we have a check box maybe we

have a dog

and a fish and we can select more than

one at once a radio button won't let us

do that but a check box will so maybe we

have a dog and a frog so we choose other

you can select as many of these or as

few of these as you want to

okay let's expand visual studio code

again and we're down to our last input

type so

we've covered quite a few today already

let's add one more field set and inside

of here another legend as well and let's

put

send me

a note

so inside of this field set we're only

going to have one input but it's

definitely different than the others

this one is going to have a label

and in the four area we'll just put

message and here we'll put

your message

and now underneath the label let's go

ahead and add a line break just to give

it a little space and then we'll add our

input which is a text area

this should have a name and an id and

you can also see it's automatically

given columns and rows

so for the name value we'll put message

likewise that should be the same for the

id since it needs to match r4

and for the columns and the rows let's

just leave it to the defaults here that

visual studio code gave us it's 30

columns that would be how wide it is and

rows 10 rows would be how deep it is so

now inside the text area here we could

put a value already this would be the

value or where the user would type but i

don't really want to do that i want to

leave it blank but we can add some other

attributes so for those attributes or

attribute i should say let's add a

placeholder

and inside of this placeholder we can go

ahead and put type your

message

here

and then we'll just leave this blank but

if you were to put it here it would be

like a text input setting the value

attribute but you don't really do that

for a text area you would just go ahead

and type

whatever you wanted to

right there and it would be the value in

the text area so let's save this and now

let's look back at our form again if we

scroll down we can see an area where

we're ready to type a message hey this

is

my message

there we go so

that you commonly see on a contact us

form you might have a area for the email

for a different message and so on but

this would be where you would typically

type a paragraph and i just mentioned

email that is another type of input

actually besides text and password so

you could say it would be a type email

it looks like a text input but it looks

for the at symbol to make sure it's

inside of the input as well so i did not

cover all inputs today but we covered

many of them and now we have a full form

but we're definitely missing something

yet we have no way to submit our form

after we fill it out so we need to add

submit button or buttons at the end

let's start out with one so after that

final field set we'll put in another

line break and then let's put in a

button element now a button element

should have a type

we'll set that equal to submit

note you might also see a form

that has a type

and here we should put submit there we

go so you might see an input with a type

submit and that can also create a button

the main difference here is that it only

takes a text value and that's what will

show up on the button

inside of a button element you could

actually put

more things than just a text value

inside of the button element so that

that is a big difference i like to use

the button elements overall because once

again it's a little more semantic here

we're saying it's a button and then we

can just set the type to a submit button

so here inside of the button i'm going

to type submit and that's what will show

up on the button so let's go ahead and

save

and now if i scroll down

we can see our submit button here that

is ready there's another type of button

though too and let's add it to our form

and let's go back and put a type

set this equal to

reset so if we wanted to reset our form

and clear out all of the values it's

fairly handy to have a reset button

every time i save it's going back up but

there we go submit and reset

and submit when you submit a page it

checks the validation immediately so

notice when i clicked

that submit button it said i needed to

fill this value out because it's

required and we didn't put a value in

there so i'll do that again

it instantly takes us up here and says

please fill out this field so we've got

more than one required let me put

dave in the first name

go back and click submit again

notice it takes me the last name and

says

please fill out this field so it's going

to do that for every required field

until they're all filled out so we could

put in anything in the password field

and i don't think we required anything

else let's take a look though maybe we

did no phone number is required so one

two three

four five six seven eight nine and let's

leave it at that and it says please

match the requested format it knows we

haven't matched yet so i need one more

number

that should be good now if i submit

it's submitted now let's go ahead and

look at this what are we getting

from

http bin and boy that is bright but i'm

going to make this larger we see it's

it's labeled as args which means

arguments what were sent with the form

we didn't have everything filled out yet

but it did send our default value for

coffee and decade as well

we didn't have a message but it did at

least show that it was an empty message

and it shows what else we filled out

including the password notice that

doesn't mean it's encrypted it just

didn't show it to us as we entered it so

we have to consider that if we're

sending any sensitive information to

but overall

that is what we got so we could fill out

the rest of the form and see how all

that looks let's resize the browser

again

boy that is bright when we look at that

information but notice when we went back

the information is in all of these other

fields but it's not in the password

field we would have to re-enter that

every time and that's just part of being

with the password field so for favorite

coffee let's choose a couple here i'm

biased i want to choose americano

because that's my favorite

tacos is the correct answer here do i

have pets let's go with dog and other

because

well i've got two dogs really and then

we've got your message so i'll just put

hey this is

a

message

there we go let's submit again it's

going to be bright i know but okay nice

it fits on here the rest of this down

below is headers and just information

about how it was submitted with the

browser so that's server information but

this is what we're looking at notice now

coffee gave us both values we got the

latte and the americano

we got decade

first name oh and the server sorted this

in order of fields so food comes after

first name before last name there's

tacos

last name and a message and so on so we

got everything we expected to right

there let's add one more button to our

form

and this one will allow us to do

something that we haven't done before

and that is override what we are setting

in the actual original form action and

method so this will also be type submit

and you can have more than one submit

button perform

and now this instead of just having an

action attribute we'll have a form

action attribute and here we can provide

a different address to send the

information to when we press this button

so i'm going to use a very similar

address it will be to the same website

https colon slash slash

let's go ahead and expand visual studio

code so we have some more room here

there we go http

org slash host so we're going to use the

post method instead of the get method

and now

for the next attribute instead of just

method this is form

method and we'll set this equal to post

and so on the button itself instead of

submit i'm going to put post

and we can save and now this will allow

us to submit the same information

with a post instead of a submit now

notice all the information is cleared

out because we successfully submitted

before so i need to enter in

at least the required information again

and i believe that was the first four

fields

79 put a 1 there we should be good and

now let's go ahead and just press post

and see what we get

so we sent it post now to the same

website and you can see from the form

not just args as they were processing

with the get request however this is of

course just for this server it could be

processed differently on a different

server but we have our labels and we

have the information from the form

what's important to note

is that it says the origin where it was

sent from and different things here and

it says the url at the very bottom where

it was sent to and that is what we

specified

so now let's look at the same thing if

we are to send this information and i

need to put information back inside of

the password i guess it didn't clear out

because it was submitted before i

incorrectly said that it cleared out

because we made a change and saved the

html again so it reloaded here with live

server

but if we scroll to the bottom now and

just submit and this is remember is a

get request not a post request

now of course this http bin shows this

as args up here instead of under the

form heading but once again we get all

of our information but what i want to

show you is when i scroll to the bottom

look at the url

now all of our information is shown

inside the url and that's what happens

with a get request so you never want to

send sensitive information with a get

request because if we looked up here at

this url we would see all of the

information inside of it matter of fact

i'll expand this it will be bright again

but there is all of our information in

the url and that's what happens when you

send a get request

okay headed back to our form resize so

now you have added a full

contact

form to your html page and this is maybe

a larger form than you would often add

but overall we've covered quite a few

inputs but remember to follow the mdn

links in the description because there

are even more inputs that i didn't have

time to cover okay we've reached the end

and it's time to validate our page let

me expand chrome here and we've got

validate by file upload we're going to

choose a file

and i'm going to be in my lesson 9 and

choose the index you choose the

index.html you've been working on

and then we'll click check just to see

if we have any errors or if everything

validates so we've got document checking

completed no errors or warnings to show

that's what we want if you do have

errors it will highlight those

welcome to your html project for

beginners you'll be using everything

you've learned about html5 to build a

website for the little taco shop let's

begin the html project let's get started

by looking at the little taco shop

website so we've got a basic website

here that we created with html it has a

nav menu at the top and an image here in

the header and then we've got a

description that says about lts which is

an abbreviation for little taco shop and

we can see that linked in the nav so

instantly we know that is an anchor link

and when we click it it takes us

directly to that part of the page

has some information about lts and it

even has some emphasis on text here

where it says love of tacos we can see

some taco emojis and there is a link in

the directions to emojipedia where you

can get emojis and just paste them in

with your text emojis do work in html

there's a taco trivia section and you'll

have to go back in the lessons and

remember how

we showed something in the html and then

we're able to click the arrow and it

shows more information this is all done

with html not css

very minimal css is applied and

available

in the style.css file inside the css

folder

if we scroll back up we can see there's

also a link to our menu and if we click

that it takes us to the part of the page

that has the menu and here the menu is a

table so you'll have to go back over

your knowledge of html tables and how to

create this table once again minimal css

is already available and it will apply

to the table as you create it of course

there's also a back to the top link and

we've got some copyright information

with an html entity for the copyright

sign at the bottom

we click back to the top we're back at

the top and we need to look at the store

hours page

and once we click that it navigates to

another html page so we've got

index.html and now the second page is

hours.html

it also has a navigation menu at the top

as you can see it's an unordered list

and you'll need to remember how to

create that

and now notice this is different now we

have a link to the home instead of the

hours page so it's not just the same

navigation it adapts to what page of

course and you'll have to create that

for each page we've got another image

and once again the image has a caption

and then we've got the hours this looks

like a list but you'll need to remember

what type of list creates a list that

looks like this where it says we're open

seven days a week which is a description

such as a paragraph but then

this part starting with sunday and going

through the hours

is all a list we've got back to the top

again and we've got the same information

in the footer so let's click back to the

top and we have our menu now let's go to

the contact us page

and on the contact us page you can see

there's a link now back to the store

hours and also links to home and the

different parts of the home page now

that's something to consider too that

we're not just linking to another page

but we're linking to a section

of that home page

then there is the image little taco shop

tacos for the caption and we've got the

contact form and you can go back over

the forms tutorial to learn how to

create this form and you can submit this

form just like we did in the forms

tutorial we aren't creating the back end

that will process the form but you can

set it up to submit to the site we used

in the forms tutorial that will just

show the information submitted and then

there is an r location section and if

you remember the html element to use

for an address this is what you want to

put inside of that and look the link to

the phone number and if you're on a

mobile device this of course is a false

or fake number but this should actually

work as a phone number if you create the

correct link and we've got back to the

top again and that pretty much covers

the site but just to reference let's go

ahead and click the about lts which will

not only take us to the home page but to

the specific part of the page so you

also want to be able to link to that

specific part from another page not just

on the page itself such as when we

clicked about when we were on the home

page and it took us directly there so

you can also do that from other pages

now as we look at the starter files for

this project not only is there a

readme.md file that has the directions

and these directions are in a markdown

file that's what dot md is and this is

making it very easy to read on github

where you look at the resources and so

you can also just read them in here like

this but the other beginner files are

already here so you've already got a fav

icon that you would link to in the head

of each page

you've already got some css inside of

the css folder and you can link to this

style.css

in the head of every page as well you've

got all three images one for each page

here

and you've got some examples and these

examples are important because you'll

want to go back and reference that you

don't necessarily have to always go back

and pause the video you can just click

on the image and i have made full screen

captures

of the entire page so you don't have to

scroll you could zoom in a little if you

want to but you have these to reference

so here's the contact page when it shows

up there we go

and there's an hours capture as well so

you've got one for home one for hours

and one for contact and you can

reference these visually to help you

create these pages it looks like it just

takes a little bit to show up inside of

visual studio code of course you could

open these image files with some other

software if you want to as well or

directly in the browser and just keep

different tabs open to view each image

file if you want to that would also work

so there you go you've got to create

three html pages here in the root

of your tutorial folder and then

reference these other files and you've

got the examples to look at and you've

got the fave icon file already as well

so if we go back to the directions let

me see if i left anything out you've got

your files all named index hours and

contact we talked about that minimal css

available inside of the styles

file styles.css all images are provided

and if you need taco emojis here's a

link to that as well and the fave icon

is included so that's everything good

luck with the challenge and then of

course after this you want to pause the

video and complete it to the best of

your ability and then all walk through

and create these pages with you for the

solution afterwards so don't do that now

pause the video and actually attempt it

on your own that's the best way to get

better at something try this out for

yourself before you allow me to walk you

through it

okay let's get started building our

project i'll close this readme.md

and i'll close any image file that we

had open before matter of fact i'll

collapse the examples and we're just

going to create the three html files

that we need first so we need

index.html

and then we also need

contact dot html

and if i remember right we need

hours dot html

okay with our three empty files created

let's go ahead and start on the first

one which is index.html we know every

document starts with doctype and if i

press tab it adds the html from there we

know we need the html i need lowercase

or i prefer lowercase and then we need

the attribute lang and that equals

english

is what i'll put of course you could put

something different there if you want to

we instantly get the closing html tag if

you don't of course add that as well

from there let's create the head section

so

here's the head element i've got the

closing head element and this will

contain several

meta elements the first one has the

character set attribute and we specify

utf-8

after that

i have another meta

and this is going to be name equals

author and of course this should be your

name i'll put my name here so

dave gray

after that

meta name equals description and this is

where we describe the page so once again

we have a content attribute and i'm

going to put

the official website for the and i need

to press alt z to wrap the code here

little

oops i didn't get a space

little

taco shop

and i should really put a capital t

there as well because it's the official

name okay so we've got the little taco

shop and of course that's what our title

will be for the page as well so we want

the little

need to spell this correctly the little

taco shop in the title as well

after the title let's add a link

and here we're going to say

rel which is related

it's an icon

and the href

and now let's put in that fave icon that

we have

and after that we'll say this is type

equals

image slash x dash

icon

and now let's add one more link tag

and how it's related to the page is it's

a style sheet

and now the href will point to that css

style sheet so we need

there it is css

and then we want style.css

and after that we can close our link tag

and we're finished with the head so i'm

going to press ctrl s to save now i

could copy this much and paste it into

the other two pages and just make a few

changes but i'm going to do just a few

more things before i do that so just

underneath the head we'll start our body

element

and then in the body element we'll start

with a header element

inside the header element we're going to

have an h1 and we'll say

welcome to

the little

still not typing that right there we go

the little

taco shop and that is our h1 heading for

the page remember every page should only

have one h1 header i'll scroll up now

for some more room

and now we'll start our nav element this

is where our navigation menu will be

we get that closing element inside the

nav element we're going to have an

unordered list

and then each list item will have a

different link so here we'll start out

with

let me put a line in between there we go

let's start out with our anchor tag

and the href is going to equal

hashtag about so this is going to link

to an about section on this page

so i'll say about right there and then

after that let's go ahead and put an

abbreviation element

inside of our link and here we can give

a title to this abbreviation and this

will be

the little i spelled it right that time

taco shop

and then we'll close that out and since

we're abbreviating we'll put lts so our

link says about lts

and now we can just copy this link item

down so highlight the full li and then i

press ctrl alt and the down arrow

it should be the same for you on windows

it may be a little different on a mac or

linux

now the next link is much easier here so

we'll just say about in his hashtag menu

i want all lower case again

so no abbreviation for the menu

so it's just

about menu or i'll put our menu i think

that's what's actually on the page

and then from there we can copy this

down once again a little easier for the

next link

and let's copy it one more time there we

go three our menus let's change this

second menu that's the hashtag menu to

our

hours.html so we're linking directly to

another page now

and then we can put

store hours

and then for this last one we'll remove

the hashtag menu and we'll put our

contact.html

and then we'll put contact us here

instead of our menu

now i'm going to scroll just a little

bit more and while we're still in the

header out of the nav

but in the header i'm going to add a

figure

and then inside this figure we'll add

our image so

here's our image element and we'll give

it a source equal to and then we want to

specify our image folder and then let's

pick our tacos and drink image and once

we have that image we can add some alt

text for that that actually says what it

is so we'll put tacos and a drink

remember alt text makes our images more

accessible and then we have a title

and we'll say

we love

tacos the title does not have to be the

same as the alt text and then let's

provide the width and i notice i saved

the width and the height in the image

name so the width is

400

and then the height

equals

267 and we can close out our image tag

but we're not quite finished with our

figure yet let's go ahead and add a fig

caption element and inside this we'll

give a description once again tacos and

a drink as our caption for the image

okay now we've completed the header so

let's once again scroll up for some more

room and then in between the header and

the main element let's put a horizontal

rule

and after that let's put a main element

where the body of our page will be and

it's right now let's leave a comment

saying

our content will go here and then after

that we'll have another hr

and then we'll have a footer element and

now we need to put something in the

footer as well if you remember from the

example each footer had a paragraph that

said copyright

and now we need to use an html entity

for the copyright symbol and that is

ampersand copy with a semicolon and then

we'll just say the

little

taco shop

and now we can save this and now we're

really ready to copy all of this code

and put it into the other pages as well

and we'll just need to make a few

changes and then when we add actual

content to each of the pages that's

where it will really differ so i'm going

to press ctrl a to highlight everything

and then control c to copy everything

go to the contact page and press control

v to paste that in

control s to save

go to the hours page and do the same

control v to paste it all in

and control s to save okay while we're

on the hours page let's make the changes

here first i need to press alt z again

in each one of these files to get the

code to wrap in each one so now we can

make our changes everything is the same

as far as the author and the content but

when we get to description we'll have a

different description this will be store

hours for the little taco shop

and now that we've changed our

description we can also change our title

instead of the little taco shop here

let's put lts

hours since it's not the home page we'll

just go ahead and abbreviate

as we can assume the owner employees and

even the townspeople in the little town

for the little taco shop refer to the

little taco shop as lts now let's scroll

down into the body where we have our

header and a little bit needs to change

here too so it's not welcome to the

little taco shop here we'll put the

little taco shop

and then

hours after that and now our nav is

going to change somewhat too so it's not

just a link to about lts we need to go

to another page and if you remember we

can just go to the slash to go to the

home page so here we need slash about to

go to the about section of the little

taco shop on the home page so we'll do

the same for the menu

and now

where we have hours we can just

eliminate this because we're going to

put in a home link instead so i'm going

to press ctrl x to cut it out

then just backspace out that extra line

here scroll to the very top

and paste in the one that i just cut out

and now we're going to link to just that

slash that i was talking about and that

will link to the home page so let's

change the store hours

to home

and i'll save that much now let's scroll

down a little bit further and we need to

change out our image as well so

now we're not going to use the tacos in

a drink image we wouldn't want that on

more than one page so now i want image

slash and we'll choose tacos tray now

notice it's also 400 by 267 so we don't

need to change that but let's change

what it says here for the alt text and

we'll say a

tray of

tasty

tacos and then we can add a tray of

tasty tacos for the fig caption as well

i should have just highlighted that copy

and paste again ctrl c

over the fig caption and control v

and we could leave we love tacos for the

title here as well

but let's put we love

trays of tacos that's some nice

title text as well and remember the

title shows when you put your mouse over

the image and if we scroll down we don't

really need to change anything because

the footer stays the same between all

the pages so we're finished with the

immediate changes to the hours html now

let's go make those same types of

changes to the contact.html i need to

scroll back up to the top first and

press alt z to get the code to wrap now

we need to change the description again

so let's change this to

contact

information for the little taco shop

and let's change the title for the page

as well

and here we'll put

contact us

and then let's put a dash and put lts

just because we want the lts in the

title for everything that's not the home

page

and we leave everything else the same so

now we can scroll up and this is the

contact us page so let's highlight this

h1

and change this part to contact us

and now for the about once again we

could actually go over to the hours

and now let's copy this nav and we'll

just have to change a little bit less

that way so copy the nav

and now we'll highlight the nav that we

have in here

and paste in the new one from the hours

page so now we have the same home link

we have the same about link we have the

same

menu link and we only need to change

contact to hours so

this will link to hours and then we just

change this contact us

to store hours

and let's save that much okay scrolling

down to the figure we need to change out

our image again

this one's just a little different so

now we've already had tacos and a drink

and the tacos trade this is tacos close

up notice the size is a little different

400 by 260. so

we've got 400 here but we need to change

this to 260 instead of 267.

okay now our alt of course will be a

little different as well this will be

little

taco shop

tacos and now for the title let's put

tacos ready to eat

and then we can put little taco shop

tacos here too so i'll once again

highlight that alt text

and put the same text in here for the

caption that we're showing on the page

and if we scroll down we can see our

footer remains the same here too so

let's save the page and we're ready to

begin working on content for each of the

pages okay i'm going back to the

index.html

and i'm going to click go live or i

could right click

and choose

open with live server because we're

using the live server extension to view

our web page and we can go ahead and

start looking at our page it doesn't

have a lot on it but it has enough to

get started here we've got our header

section and we've got the menu with the

different links so now i'm going back to

the code i'm going to resize visual

studio code and press control b to hide

the file tree so i have more room to see

the code and we're ready to add content

to the page inside of the main element

i'll delete that and we'll start with

an article element i'm going to give

this an id equal to about so our about

anchor tag works our link works now i'll

put an h2

and inside the h2 i'm going to put about

and then we need that

abbreviation with the title value again

of

the little

taco shop

and now we'll put

l

ts there we go

and that completes the header so now

let's put some content we'll have a

paragraph here

and i'm going to take that same

abbreviation and start the paragraph

with that so lts

was founded in and now remember we can

use a time element to give some meaning

to the dates and times we put on our

page so i'm going to put a time element

here

with a date time

equal to 2022

so the little taco shop is a fairly new

location

get a period at the end of that sentence

and we can put our shop was built

on

or was built from there we go

a

love

of tacos and now we'll put a period

there we'll say we hope

our shop adds a unique

and interesting

place to our little town

now let's add just a little more flavor

to this paragraph so we can put a strong

element

and then we'll put love of tacos inside

that so it has some emphasis

and now we also want to add some taco

emojis right after that so let's go to a

new window and i'm going to type in

emojipedia.org

and there you can search for emojis i'm

searching for taco

once i find taco i'm going to click that

and it allows me to copy that emoji so

after i say a love of tacos i'll put a

space and control v

control v control v just pasted in three

tacos so i'm going to close out

emojipedia we no longer need that but

let's save this and see what we get on

our page

so now if we look at this we've got

about lts and there's the abbreviation

and when we mouse over we get little

taco shop

and now we've got our paragraph for the

about information now i'm going to

scroll up just a little more but right

after the paragraph i'm going to use

another semantic element called aside if

you remember that one and for the aside

i'm going to put an h3 header so we're

following that header hierarchy

put taco

trivia so for taco trivia we're going to

have a question that only shows the

answer when you click on it and for that

we need to start out with a

details element

and then inside the details element

we're going to use a summary element so

inside the summer is where we ask the

question and we can say

when did tacos

first appear in the united states

and now the nice thing is this question

will show but you'll have to click an

arrow to see the answer that is

contained within and that's within just

the rest of the details here and it's a

paragraph now i'm going to copy and

paste this paragraph in and put it right

here now notice i added another time

element here with 1905 and we can save

that much and we can see our taco trivia

down here at the bottom

and when we click we see the rest of

this but there's just a little more i

would like to add and it actually has

one element in there that was not

covered in prior lessons but remember

there is a wealth of information and

many different elements that still

remain uncovered i guess they're not

used as often but you can look them up

on the mozilla developer network so i'm

going to put in a citation and there is

an element in there called site so right

after this

i'll paste in the citation and here you

can see i put the source let me expand

visual studio code that's getting a

little cramped you can see i put the

source

and then i put a site element c-i-t-e

and inside that site element i put the

link to the source

so that is right there and that's

smithsonian magazine so now if i save

i'll resize once again to come back and

look at our taco trivia and when i show

the information you can see the citation

is put in italics by default with that

site element okay let's resize visual

studio code again to get a little more

room and scroll up as well after that

aside we have really completed our first

article so let's put a horizontal rule

in here which also indicates a topic

change at least somewhat

in the main area and put another article

now this article i didn't add the id but

it needs the id because the id equals

menu and this is where we will put the

little taco shot menu we'll start with

an h2 again to follow the header

hierarchy for our page

and we'll put

our menu for that and then we'll start

our table element

inside the table element the first thing

we're going to add just immediately if i

could start is a caption there we go and

we'll just put our tacos for the caption

after that we need a t head

inside the t head will be a table row

and the table row is going to have our

columns and these are our heading

columns so the first one

is tacos

after tacos we're going to have

a second th

and this th is going to have well let me

go ahead and type th again there we go

this th is going to have a scope and

let's set this scope equal to column

because it's for the column

and then we need our abbreviation

element once again so let's type abbr

and then we'll put the title equal to

quantity

and now we can put in the abbreviation

for quantity that we want to use which

is commonly qty

and then we'll add another th

and it will also have a scope

let's set this equal to column as well

and this will be

the price column okay going to scroll up

as you might have realized when we

learned about tables tables take up a

lot more space as you create them in

your code

so we've completed the head and we need

more room for

the body of the table let's add a new

row

and inside this row we're going to add

another heading but this will have a

different scope so now that we're back

there we'll go scope

equals row

and now that we're ready to put in the

value let's call this crunchy but i did

forget an attribute this also needs a

row span so this will have a row span

equal to three

okay after we've created the scope and

the row span with crunchy we can't

forget the values of the other columns

so now we need one for the quantity and

for the next one which was price we need

a dollar fifty so there's our first row

and now we can create more rows but what

i really want to do is just take these

last three

and do shift alt and the down arrow and

then add an opening tr here i wanted to

add a closing tr as well but we don't

need that because

this crunchy is taking up three rows so

we don't want to add that row down here

we just need the other two rows so let's

turn this one into two dollars or two

quantity of two

and two dollars and fifty cents now i'll

just highlight this row

and take it down one more time and we'll

have a quantity of three

and we'll put

three dollars

and 25 cents so now we've got the feel

of this where we've got the first one

with the title and it's taking up three

rows and then we've got the quantity and

the price so what i want to do for the

next one is to just highlight

all of these

and press shift alt and the down arrow

and once again just make changes so this

is going to be soft instead of crunchy

and now we still got a quantity of one

but is the price the same and no it's

not soft tacos are a little more

expensive so two dollars

and then for two soft tacos it's 350 and

for three soft tacos it is

450. now let's scroll up some more we've

finished with the body but we need to

add the footer to the table and that's

the t foot element and now inside the t

foot we're going to have a table row

and then we'll have a data cell table

data and it's going to have a call span

attribute so it's going to span all of

the columns so that's three

and then inside of the table data we'll

put chips

and then and amp

is for the ampersand that is another

html entity

and then we put salsa two dollars and

now we've completed our table but

underneath the table in this last

article let's go ahead and put

a line break and after the break let's

put a paragraph and let's go ahead and

add our

back to top link so now we'll have an a

with an href

we'll set this equal to the hashtag

which should just reload the page take

us back to the top

and we can save so now let's resize

visual studio code and see if we have

all of our content yes we've got the

crunchy that took three rows and the

soft that took three rows there's the

table footer

everything looks like we planned it and

our back to top link is here it takes us

back to the top as well

our taco trivia

everything is good about the home page

so now let's work on the store hours

page it is a fairly short page and there

you can see it displayed to the right

and we'll pull up the code here on the

left okay let's scroll down and we've

just got a little bit of content to add

in the main area here of the body inside

the main element

so we'll start out with a paragraph

and inside this paragraph we'll just say

we are open seven days

a week with an exclamation mark after

that we need to add a data list so it

starts out with a dl element

inside the dl element we'll have a dt

and this is where we'll put our sunday

dash thursday so sunday through thursday

and then underneath that we'll have a dd

element and that's where we'll put our

11 am

dash 9 pm

so now we can just copy this down

because there's only one more that was

like it and we can just change the days

out so now this will be

friday

saturday and then the hours are

different as well it's 11 a.m to

11 p.m

and we can save that

now we also need to add a back to the

top link as well so here's our paragraph

and then we can say

a with href once again equal to the

hashtag

and back to top

and save once again

and now we can see all of this here on

the right our back to top really isn't

needed because it's so short but we're

just consistent between each page and

that's fine so now let's go over to the

menu page or not the menu i'm sorry we

want to go to the contact us page that's

where we are the menu is on the home

page i don't know about you but i'm

starting to get hungry when i look at

those so let's finish up this project so

we can go get some tacos i'm going to

scroll up and once again we're going to

change out

the

comment inside of the main element and

put in our content we'll start with an

h2 following the header hierarchy

remember we already have contact us up

here in the header i believe if we

scroll up there there's the h1 so we

want an h2 here

and this h2 is going to say our

contact

form

okay now we need to go ahead and create

this form so we'll start with the form

element and let's go ahead and give it

an action well

there we go form

tab over and it gives us the action

there we go and we'll send this to that

same website we used in the forms

tutorial that's http

bin.org

get so we're going to use a get method

when we submit it and we'll at least be

able to see the information on that

website so as i said we use the get

method so let's go ahead and apply that

attribute as well method equals get

after that i'm going to put some space

here in the form and we need a field set

element

now we can put our form inside the field

set element and then we'll have a legend

element and here we'll say send us a

message

and then we can start in with the

description of our form

so we have a paragraph and then we have

a label

and then it has a four and this will be

name and so then we need to put name

inside the label as we label the input

and now we need that input so here's the

input

let's give it a

type

there we go text

there it is text now we put in the name

which is name and the id which is going

to be

name as well

now i want a placeholder element here

also

this placeholder is going to say your

name giving the user a clue as to what

to put in

and let's put in required as we want the

username to be required before they can

submit the form scroll just a little

more for some more room i'm going to

highlight this paragraph now and once

again shift alt and the down arrow and

now i've already got my label and input

and i just need to change some of these

things so this would be email

and we'll change name here to

email as well and now this will be an

email input and then for the name

and id i'm going to press ctrl d

for each of those remaining name words

and then i can change them all at once

to email

okay i'm going to save this much and we

see the beginning of our form over here

but we still need the area to put in the

message

so i think i want to scroll some more

for that and then return once again one

more paragraph

inside this paragraph let's have a label

and now the four here is going to be

message

and now inside the label we'll also put

well we'll put your message here that's

fine

and then we need a text area which is a

little bit different than a text input

this is going to have the name of

message and it should have the id of

message as well

columns 30 and rows 10 that's fine that

is the default and then placeholder also

so let's put a placeholder

let's set that equal to type your

message here

and then the actual message of course

goes inside the text area so we'll save

that and now we should see a place they

can put their message oh but we can see

it looks a little different this doesn't

look quite right let's put a break after

that label

and then it should put the label up on

top of that message box now let's scroll

a little bit more and after the field

set but important enough before the form

has ended we need to put a button and

then inside of this button let's give it

an attribute which is type equals

submit and then let's go ahead and put

send for the button text i'm going to

copy this down

ctrl alt and the down arrow and now this

type will be reset so we have a second

button

and we can put reset here as well so

now let's save and we should see our

buttons that will send or reset the form

and as i look at everything i've noticed

something we put our form inside the

main element but i wanted to wrap that

inside of a semantic tag as well not

just the main element

but i wanted to put it inside of a

section element so let's go ahead and

put a section element there

and we will

copy that or cut that actually with

control x and scroll all the way down to

where the form ends and put the closing

section there now let's save that

it doesn't make the page look any

different but it holds up the html

semantics better and the main reason we

need it is because the form is not the

only content of the page so we have

another section here and this section

has an h2 of its own and here we can put

our location which goes nicely with a

contact us page as well so now we've got

the h2 there and we need an address

element because now we can put our

location inside of this address element

so it's 555

taco

temptation

lane and then it's at sweet tea

line break and then kansas city

missouri and then 555 555-5555

completely fictitious zip code

after that we'll put in a line break and

another line break

and then let's put in a phone number

which is also fictitious but we want an

actual link that will work

to make your phone or whatever mobile

device dial the phone number and we can

do that with the tell abbreviation

and then we need

a plus

and then

five five five five five five five five

five five there we go and then we can

put the link so it's 555-555-5555

and now we've completed the address

section so if we save that and scroll up

a little bit

there is the location information and

with that i believe we have completed

our website in the three pages so i hope

this tutorial has helped and more than

that i hope you were able to complete

much of it on your own before watching

the tutorial let's expand chrome and

look at our overall site so if we go to

the home page here it is

here's everything we added

here's the back to the top link that

works too we can go to the menu that's

great we should be able to go to the

about lts yep that works good too

mouse over an image and we get our title

text all of that's as expected store

hours

everything looks like it should here as

well

and then the contact us page

everything's looking good here let's go

ahead and try the contactless

information so then we say dave

at dave

dot

dave whatever and then

dave in the message that's fine

send and yes it goes to the http

http

bin.org and we see the information from

the form and that's a great site to test

out forms on so everything is looking as

it should i'm ready to go get some tacos

congratulations on completing your html

project 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