Comprehensive Guide to HTML and CSS: From Basics to Advanced Techniques

hey how's it going everybody in this series I'm going to show you everything you need to know to get started working

with HTML then a little bit later on we'll cover CSS so why don't you go ahead and sit back relax and enjoy the

show hey if you enjoy my videos please be sure to subscribe because subscribing is free just like how this video is free

help me out yes I'm guilt tripping you that is all why should you learn HTML in today's age people spend way too much

time on the internet myself included unfortunately knowing how to create or otherwise manage a website isn't a bad

thing to know heck add it to your resume it really can hurt even if you're not interested in web development as a

career almost every business has some sort of online presence knowing how to manage that online presence could

convince a potential employer to hire you over somebody else so why not HTML is an acronym for hypertext markup

language the general idea is that certain types of tags also known as markup is used to convey to a web

browser how some content should be displayed usually tags are in pairs with some content sandwiched between them

header tags are typically used for titles P tags are used for paragraphs of text a tags are used for hyperlinks HTML

add structure to a web page if we were building a house you could say that HTML is the foundation the skeletal structure

to support all content on website then there's CSS CSS means cascading stylesheets it's a language that adds

style to a web page in our house analogy CSS would be equivalent to the decorations design and colors of the

Interior to begin working with HTML and CSS you'll need a modern web browser you can use Google Chrome Firefox Microsoft

Edge Safari those are all fine you'll also need a text editor as well such as vs code it's free softare W that

functions as a workbench for us to write code in this next part I'll show you how we can download and install VSS code to

download vs code head to this website code dovisual studio.com look for whatever operating system

you're using and download that version I'm running Windows I will download the windows version then I will open it when

it's done accept the agreement yes I did read it that fast next next I'll create a

desktop icon next install launch Visual Studio code and finish we need a folder to hold all of

the documents related to our website go to Open folder I'll place this folder on my desktop new folder I'll name this

folder website select folder there we go we are now within our website folder I'm going to create a new file I will name

this file index.html whatever your homepage is going to be I would recommend naming it

index.html most servers return the index file as the homepage so it would be good practice for us to name the homepage

index now what we're going to do is install the live server extension go to extensions look up live

server and install basically what this does is that when you update your HTML file if you have a web browser open it's

going to update automatically it'll save you some time all right everybody now what we're going to do is fill in our

HTML file at the top what we'll do is add a set of angle brackets then type this exclamation point doc type HTML

this is a declaration that this document is an HTML 5 document which is the most recent version then we'll create a pair

of HTML tags we'll need an opening HTML tag and an ending HTML tag you can tell that

this is an ending tag because it has a forward slash most tags are in groups of pairs that's if there's typically

content between them this pair of HTML tags represents the root element of an HTML page between these two tags we will

add a pair of head tags the head element contains information about your web page such as

a title let's add a title to our web page title add a closing tag let's set the

title of our web page to be my first website now what we'll do right click on your HTML file then open with live

server here's our web page the title says my first website just to make this easier on us I'm going to place our web

page side by side with VSS code when we save any changes we can see that update automatically the head element

contains information about your web page whereas in the body let's add a pair of body tags after the pair of head

tags the body element contains visible content in your web page between our body tags let's add a pair of H1 header

tags H1 defines a large heading I'll add some text this is an H1 heading I'm going to

save that should update my HTML document automatically this is an H1 heading let's try

H2 add a pair of H2 header tags this is an H2 heading let's do

H3 H3 this is an H3 heading

H4 this is an H4 heading then we have H5 this is an H5 heading typically header tags are used for titles or other

large text let's discuss paragraph tags if you have a paragraph of text you can place that within a pair of P

tags some text goes here if you need some sample text to work with if you're using vs code you can type lauram then

tab this will create some garbage text for you I think it's supposed to resemble Latin if I were to copy

everything within the set of paragraph tags then save it paragraphs are separated with a line

break otherwise if you do need a line break you can type BR meaning line break so this is a self-closing tag pairs of

tags usually have some sort of content between them with the line break that's a self-closing tag we don't need a

closing tag so add as many line breaks as you need wherever you need them so that's a line break there's also

horizontal rule which is HR think Human Resources HR that would add a horizontal line across your page that might look

pretty good after a title paragraph tags don't care about any spaces or new lines I'm going to put all follow this on

separate lines just so it's more legible so when I save nothing appears to happen even if I were to add some

line breaks between these sentences nothing appears to change you could always change your paragraph takes

to P meaning pre-formatted as in pre-formatted

text that would retain any line breaks or spaces Within These tags it's up to you if you prefer the P tags or the pre

tags now the last thing I'm going to discuss are comments comments aren't displayed as output they're usually used

as notes for yourself or for other developers you would type a left angle bracket exclamation point two dashes

wherever your comment ends you would type two dashes right angle bracket this is a comment so when I save nothing

appears to happen comments are used for yourself or for other developers that are looking over this document

all right everybody well at this time let's go over an exercise just so that we have a solid foundation and really

remember everything it'd be good practice for us we're going to create a separate HTML file that displays the

lyrics of a song you like so let's create a new HTML file let's name this file

lyrics. HTML again we'll need to add this declaration doc type HTML that's a

decaration that this document is an HTML 5 document then we'll need a pair of HTML

tags we'll need a head element and body let's add a title to the head of

our document title let's set the title to be my song

lyrics then we will open this HTML file with live server my song lyrics pick a song that you

like within our body tags let's add an H1 element this will be the title copy the name of your song place it within

this pair of tags so that's the title add song by the name of the band or artist I'll use H3

header tags that's slightly smaller than H1 you know maybe H4 I think that' be

better I'll add a horizontal rule that's HR I'll add a pair of P tags take all of these lyrics copy them

and paste them within the pair of P tags I'd like to retain the spacing let's change the P tags to P tags for or

pre-formatted text that's much better let's add one line break after our horizontal rule one

last thing I'm going to do within the pre- tags I'm going to add some blank lines between some of these

verses there we go that's pretty cool I think we have the hang of basic HTML now in the next topic we'll discuss

hyperlinks hey if you're enjoying this series so far please be sure to support me by Smashing that like button leave a

random comment down below and subscribe if you'd like to become a fellow bro hey everybody in today's topic I'm

going to show you how we can create hyperlinks a hyperlink is a digital reference to data that a user can follow

by clicking or tapping a button or link to create a hyperlink we will need a pair of a tags a means anchor then we'll

sandwich some text between these two tags such as click me we're missing one thing what we'll need

within the opening a tag is an attribute an hre attribute an attribute is typically a

name value pair that modifies the behavior of an element href means hypertext reference we're referencing

something within the set of quotes we can list a web page or a file to link to let's begin by linking an external

website like Google let's paste the URL Within the href attribute save then when I click on

this link it takes me to Google or some other website of you're choosing based on what's within the set of quotes there

are more attributes you can add as well they're optional another is Target Target equals if you set Target to beore

blank this link will open this URL in either a new tab or a new window depending on your settings Google has

opened in a new tab for me another attribute is title the title attribute displays additional information about

the element as a tool tip I'll add a message goes to Google when I hover over this link we have a tool tip that states

goes to Google that's an additional option too this URL is an absolute URL you can also list a relative URL So

based on the last video we have an HTML file of song lyrics within our index file we will link to our lyrics file so

let's create another hyperlink we'll need a pair of a tags meaning anchor we'll need some text song lyrics is good

then we'll need an href attribute href equals these two files are right next to each other for a relative file path all

we need is the file name lyrics. HTML I'm going to add a line break real quick BR meaning line break then when I

click on this link it takes me to my other HTML file you could add these additional

attributes if you would like one last link I'll create a line break we'll create a link that begins the process of

emailing someone we'll need a pair of a tags the text will be email

me a t attribute will be set to now to send an email type mail to colon then an email address I'll make up one test at

fake.com when I click on this link we begin the process of sending an email to this email address however I'm not

signed in so this is as far as it'll take me currently okay now for an exercise let's go to our lyrics HTML

file open with live server let me zoom out based on the last project you should have a web page with some song lyrics

that you like we'll create a hyperlink to the original video Let's do that after the artist that would be right

here but before the horizontal rule we'll create a pair of a tags I'll add some text original video

then you'll need to find the url for the original video for your song all right I will set the href

attribute to be that URL the URL for a YouTube video so when I click on the link

it now takes me to YouTube all right everybody that's a hyperlink it's a digital reference to

data that user can follow by clicking or tapping a button or link and those are hyperlinks in

HTML hey everybody in today's topic I'm going to show you how we can add images to a web page using HTML so sit back

relax and enjoy the show all right everybody here's how to add an image to a web page but you'll

need an image to work with I have a picture of a dog I'll add that to my website folder next to my index file I

have a picture of a dog to add an image we'll use a self-closing image tag then set the source equal to be the name of

your image including the extension mine is dog and this is a PNG file so this picture is fairly large you

can change the dimensions with the height or width attributes I'll set the height to be 200 200 pixels now the

width will adjust automatically however you could change that too if you wanted if I need this image to be a perfect

square I will also set the width to be 200 however this does compress the image depending on the dimensions of your

original picture you may need to change the height and or width I'll set the height to be 200 though then keep the

width the same it'll adjust automatically now for some reason if your image isn't

displaying let's say that I get the file extension wrong I'll say that this is a JPEG well the image won't display you

can add alternative text with the alt attribute the alternative text you could say

anything this is a picture of a dog if this image doesn't display you at least display the alternative text now

the nice thing about the AL attribute is that if somebody is visually impaired and they're using a screen reader the

screen reader will read this alt description just to test my screen reader I'm going to add some text before

and after this image as well let's add an H1 header tag this is a cute dog then I'll add some text after I'll

use an H3 header tag woof woof I'll use my screen reader this is an

extension on Chrome you can download my first website this is a cute dog this is a picture of a dog woof woof

the screen reader read the alternative text for this image so it is good practice if you include an image to

write a brief description of the image another cool thing you can do with images is that you can't turn them into

hyperlinks I will surround our image element with a pair of a a tags a meaning

anchor then I will set the hre attribute equal to a URL I'll find the Wikipedia page for

dogs all right I'll copy this URL then I will set the href attribute to be this URL when I click on this image it takes

me to the Wikipedia page for dogs so yeah you can turn an image into a hyperlink another cool thing you can do

too is that you can include gifts in your web page this is my gift that I'll include I'll add that to my website

folder I'll include a self-closing image tag set the source equal to be the name of my

image then be sure to get the file extension right this is a gif I'll set the height attribute to be

maybe 200 as well height equals 200 then I'll add some alternative text alt attribute will

be smiling dog GIF now with a website you may have all

of your images within a separate folder like this I'll go to new folder I'll create a folder named images then I will

move my images to the images folder so my images are no longer being displayed we have our alternative text

this is a picture of a dog and smiling dog GIF with your Source attribute we're using a relative file path we need to

navigate to the images folder then find the appropriate image files I'm going to preedee these images with the name of

the folder they are found within the images folder you may also need another forward

slash for me either work let's move on to an exercise in the last few videos we were working on a web page for song

lyrics Let's include some album art for my song that I picked I have a picture of the original album art that

this song is found from I will move that to my website folder then I will move it to the images folder within my website

folder I need a self-closing image tag set the source equal to B we need to navigate to the images folder I will

list that first it Images slash the name of the file for me it's

album cover. jpeg then I'll change the dimensions I

will set the height equal to be 200 I'll add some alternative text alt

equals album art cover then a line break maybe two

then I'll turn this into a hyperlink as well I will surround our image with a pair of a

tags I will set the href attribute to be the original YouTube video where you can find this song So href equals the

YouTube video that I linked before so this should take me to YouTube there we

are all right everybody well that's how to include an image on a web page using HTML hey how's it going everybody in

today's video I'm going to show you how we can include audio in a web page using HTML you'll need some audio files to

work with one place you can download some MP3 files is the YouTube audio library find some songs that you like

and then you can download them let's download three for this lesson once you have your three songs let's move them to

our website folder all right we you're ready to begin so to include some audio we need a

pair of audio tags then between the AUD tags let's include a source element with the source

element there is a source attribute we will set the source attribute to equal the name of an MP3 file or other audio

file so let me copy the name be sure to get the file extension and then I I will paste that

file the file name nothing appears to happen because we don't have any controls and the song doesn't play right

away too so to add some controls within the opening audio tag type controls and that's it so we can now play our

[Music] song or you can mute it fast forward it rewind it set the playback speed

whatever you can set your audio file to auto play but people find that [Music]

annoying so you should probably not do that if we do want our song to autoplay we should at least mute it using the

muted attribute so our song is playing but it's muted until we unmute [Music]

it we can even have our song Loop by using the loop attribute so let me play this turn up

the volume a little bit fast forward to near the end and let's see if it loops and it does cool now in case your

web browser doesn't support a certain audio type you can add fallbacks so let's say that we also have a wave

version of our audio file I can include that as a fallback right underneath but we should also specify the type just to

let the web browser know that this is an MP3 file and that this is a wave file I'll include the type attribute I will

type Audi slmp I will also let the web browser know that this is a wave file audio

/wave so just in case our web browser doesn't support MP3 files I'm pretty sure that they all do nowadays we will

resort to our wave file if we have a backup of the same audio file in wave format let's include our two other audio

files so again we need a pair of audio tags within the pair of audio tags we will

need a source tag a source element and I will set the source to equal the name of an audio file so let's copy the name of

our second audio file including the extension add some controls and there's our second song Let

Me pause the first one [Music] let's add the last

one so here's the name of my last song be sure to get the file extension we have our

controls and here's my third [Music] song Hey for fun let's add the name of

each of these songs right before the controls I'll use a pair of paragraph tags

then I will copy the name of the song and sandwich the name between the paragraph tags so that's the name of my

first song let's do this again with the second song and the

third so here are my three songs just to make everything a little more organized I'm going to create a music folder

within my website folder to hold all of my audio files I will create a new folder I will name this

music I'll place all of my audio files within the music folder so we no longer know where the

location of those audio files are because we're using a relative file path I'm going to set the source attribute to

be music slash the name of the file we can locate those files now so that's our first song our second

song and our third song that's how to include audio files in a web page using HTML hey if you're

enjoying the series let me know by Smashing that like button leave a random comment down below and subscribe if

you'd like to become a fellow bro hey what's going on everybody today I'm going to show you how we conclude a

video in your web page using HTML all right let's get started everybody in this example you'll need a video file of

one of a few formats you can use either an mp4 file webm or vorbis OG I just so happen to have an mp4 file of me playing

that new Zelda game Zelda tears of the Kingdom this is just some sample footage once you have your video file

you're going to take it and place it right next to your index file within your website folder to include a video

you'll need a pair of video tags within the opening video tag we can set a source attribute to be either the

relative file path or the absolute file path of that video These two files are right next to each other I only need the

file name my file is Zelda MP4 and there's my video but it's humongous we can change the height and

or the width let's change the width to be 500 pixels that's a good size the height will adjust accordingly or

vice versa if I were to change the height to be 500 then the width is going to adjust accordingly but let's keep it

as 500 here's our video but there's no way to play it we'll need to add a set of

controls with the controls attribute now we can play the video to have this video autoplay when

the page loads you can set the autoplay property it should play automatically but if it is set to autoplay you should

at least mute it because people can find it annoying especially if this video is loud let's add the muted attribute so

now it autop plays and it's muted to have this video Loop when it's done let me fast forward to the

end I can add the loop attribute now it should Loop when it reaches the end right about here

yeah and it's back to the beginning again just in case somebody's web browser doesn't support this video file

you can add backups I also happen to have a webm version of the same video I'll place it within my website

folder then within the pair of video tags we will add a source element take our source attribute cut it

then paste it within the source element you can keep all the attributes within the opening video tag you should

also tell the web browser what type of video file this is video/ MP4 now to include a backup we just need

to use the source element again as a backup in case a web browser can't play my mp4 file we'll instead use the webm

version Zelda do webm the type is

webm all right so let me delete the MP4 version to test it let's save and reload everything and

now my webm version is playing you can't really tell the difference you also have the capability of turning this video

into a hyperlink I will surround my video element with a pair of a tags then I will set the href attribute to

some URL I'll set it to be the Wikipedia page for Zelda feel free to pick any page of

your choosing with the HF attribute I will paste that

URL now when I click on this video it should bring me to the Legend of Zelda Wikipedia page to open this link I get

it link it's Legend of Zelda anyways to open this link in a new tab I can set the target attribute to be underscore

blank then it should open in a new tab which it does all right everybody so that's how to include a video in your

web page using HTML hey everybody today I'm going to show you how we can create a fabcon for

your web page to create a fabcon you'll need an image to work with here's mine I would recommend an image that's at least

96x 96 pixels in width and height once you have your image we'll save the image to our website folder I'll rightclick

save image as find my website folder let's rename this image favicon for a favicon most modern web

browsers accept Ico PNG GIF JPEG and SVG image files so let's save our image my image is now within my website

folder if you do need to make any graphical changes to your image you can always use a program like paint this is

a built-in program with most Windows operating systems I'm pretty sure Mac and Linux have something like it too if

I do need to change the dimensions on my image I can open it let's find that image it's within my website

folder and here it is if you do need to change the size of your image you can go to

resize you can either resize or skew your image my image is at least 96 pixels it's 176 for both the width and

the height then you'll want to save your image afterwards to that website folder once you have your image we're

going to create a link tag the link is self closing the link tag specifies the relationship between this document and

an external Source the relationship attribute will be

icon because well we're adding an icon to our web page the type will equal image

slash the type of your file so I have a jpig I'll list jpg then we need an href attribute that

will be the relative file location my image is within my website folder I just have to list the file

name fabac con.jpg let's take a look refresh everything and here is my

favicon typically with a web page I like to place all of my images within one folder within my website folder I'll

create a new folder named images and I'll place my favicon within my images folder so we no longer can locate that

fabicon I need to change the relative file path of the favicon because it's now within a separate folder preceding

the name of my file I will list the folder that it's in images SL favicon and there it is again all right

everybody that's how to create a favicon for your web page using HTML hey everybody today I will explain

text formatting in html text formatting gives text special emphasis we can create Boldt text italic text underline

text so on and so forth let's begin let's create a pair of paragraph tags and between this first set of

paragraph tags let's type this is normal text let's copy this line of markup and then paste it like 10

times okay I lost count whatever text you would like to add emphasis to you surround that with a pair of tags but

there's different pairs of tags that have different effects for a bold effect we use a pair of B tags let's round

normal in the second line with B then change normal to the word bold this is bold

text I is for italic so let's surround the next line with

I this is italic text then underlined is youu this is underlined

text deleted text we would type deel this is deleted text big

big this is big text so this text is a little bit bigger than the other text surrounding

it then they're small this is small text

subscript type sub this is subscript text I misspelled that there the subscript text is smaller

and it's just underneath the other text surrounding it then their superscript type Su like you're saying

Su like what's up this is superscript text then you have

monospaced which is TT this is monospaced text oops oops I forgot to close it this

is a good example of why you should add closing tags because the markup will Cascade through the rest of your

document so be sure to close any opening tags all right then the last one is Mark Mark creates a highlight effect

kind of like you're taking a highlighter and highlighting some text you can use CSS to change the color too I haven't

really discussed CSS yet but to add a little bit of inline CSS within the opening mark tag take the style

attribute set that equal to take the background Das color colon then we can pick a color how about light green I

think that would look good and our highlight effect is now light green or pick some other color if you're choosing

we'll discuss colors more when we reach CSS all right everybody so that is text formatting text formatting gives text

special emphasis you can create text that is bold italic underline deleted big small subscript superscript model

space and highlighted text and well that is text formatting in HTML hey how's it going everybody today

I need to explain the span and div tags in HTML the span tag is an inline container to group elements for styling

purposes the div tag it's very similar except it's a block container to group elements for styling purposes here's an

example let's create two H1 titles this is a span title then close it let's copy this line

of markup then paste it the second line will be this is a div title I'm going to enclose my first sentence with a pair of

span tags so we need an opening span tag and a closing span tag somewhere

all right with this set of span tags we are enclosing this text within a container it's an inline container we

can apply some CSS styling to the sentence whatever is sandwiched between the pair of span tags let's change the

background color of the title I will set the style attribute to equal

background- color then pick a color how about red then a semicolon there so the

background of my title is red but you know what that red is a little bright let's do

tomato I think that's a better color whatever is enclosed with a pair of span tags we can apply some inline CSS

styling too now with div this creates a block level container so I will surround this sentence with a pair of div tags

div meaning division let's apply that same styling I'll copy my style

attribute paste it let's change the color to be maybe cyan all right here we are this is a

title using span this is a title using div span is an inline container div is a block level container it takes the

entire width of my document you can see that this is all blue let's create a pair of paragraph

tags this is a a span sentence then close it let's copy this paragraph paste it

again then change the second sentence to div all right let's enclose our first sentence with a pair of span

tags all right I will set the style to be red well tomato tomato color technically it's kind of like we're

highlighting the text much like the mark tags in the last topic let's copy this tag change span to

div then the color how about cyan and then we need to close the div tag there we

are all right now let's create two large paragraphs we need a pair of paragraph tags

in vs code to generate some sample text you can type lauram then tab so I will copy this

line paste it again let's say after the first sentence I would like to add a background

color so right here I will add a span tag an opening span tag then where would I like to close it let's do so before

the closing paragraph tag then I will change the background color all right we have highlighted the

second sentence let's do this with div tags now with our next paragraph let's create an opening div tag then we'll

need to close it somewhere let's close it before the closing paragraph

tag and then I will change the background color within the opening div tag I will set

the background color to be cyan what we have done is created a block level element for the second

sentence within our paragraph basically speaking we can use the span and div tags to group together HTML for styling

purposes span is an inline container div is a block level container we'll be using these more when we reach CSS and

well everybody those are the span and div tags in HTML hey everybody today I'm going to

explain how we can create different lists in HTML there's three different types of lists that we'll discuss today

unordered ordered and description lists for an unordered list think of maybe a grocery list the order of items doesn't

matter to create an unordered list you need a pair of UL tags UL meaning unordered list then

between the pair of UL tags you need to list items Li means a list item so we have a little bullet point let's

create a grocery shopping list maybe we need to buy milk let's create another list item we need another pair of list

item tags let's buy eggs what else can we buy uh milk eggs

bread and what about coffee there we are here's our unordered list each list item is bulleted hey

let's add a title to this list preceding the pair of UL tags let's use maybe an H4 header

tag let's say groceries here are the groceries I want to buy the order doesn't matter so we're

using an unordered list now you can create nested lists too let's change coffee to Coffee

supplies then after this list item we'll create another unordered list then we need more list items so for

coffee supplies of course we would need coffee or maybe coffee beans now we have a hollow bullet

point maybe you need some creamer for your coffee and or sugar so that's how to create a nested

list within a list within your list you can create another list now let's go over order lists to create an ordered

list you need a pair of of O tags meaning ordered list then you need some list

items what about a to-do list so we need to list item so number one that's first in our list we need to eat

breakfast I'm going to add a title too so let's use a pair of H4 header tags this will be my two do list one we

need to eat breakfast to go to school or go to class so that's number

two number three after class you have to walk your dog then four maybe you have to go to

work all right that is an ordered list use a pair of O tags then lastly we have description list this one's a little

more tricky a description list is made of key value pairs you have a term and a definition to create a description list

you need a pair of DL tags meaning description list we need some terms to create a term

you type DT then close it so I play a lot of Dungeons and Dragons let's create some definitions for some mythological

creatures like a dragon so that's my term let's create a few other terms Dragon

Phoenix vampire and werewolf so these are the terms

underneath each term we can add a definition we'll need a pair of DD tags for description definition I'm going to

Google each of these creatures then just paste the definition that I find so for a dragon I'm just going to

copy this definition then paste it within the DD tags here's my term and here's my

definition of that term Dragon a mythical monster resembling a giant reptile sometimes shown as having wings

let's do this with our other definition terms as well next we have Phoenix Phoenix definition an immortal

bird associated with Greek mythology we'll need a pair of DD tags add your definition

then close it here's my second description definition then we need vampire and

werewolf vampire creature definition let's copy this create another pair of DD

tags then paste that definition here's the definition for vampire then lastly werewolf

werewolf creature definition an individual that can shape shift into a

wolf so DD close it add that definition there's our definition for werewolf so that's a description list in

a way it's made of key value pairs you have a term which is represented with description term then a description with

DD description definition I forgot to add a title to this list let's do that I'll use a pair of H4 header

tags let's make the title mythical creatures not bad let's add a background color because well we can I'll add a

background color to the opening DL tag so style equals background-

color what's a good color for this what about light green I haven't discussed borders yet but to

add a border you can type border colon then a size maybe two pixels then there's different borders but let's go

with solid for now here's a border around my list all right everybody so that's how to create different lists in

HTML we have unordered lists ordered lists and description lists you can style your lists as well but we haven't

really discussed much CSS yet but yeah those are different lists in HTML hey everybody today I'm going to

show you how we can create a table using HTML let's create a table of store hours for a fictional business I'll create a

title using H3 header tags the title will be store hours what are the hours of operation for our store to create a

table we need a pair of table tags for the first row we need a pair of TR tags meaning table

row so the first row is going to be filled with table headers how many columns do we have well if we have a

table of store hours they're seven days in a week we will need seven pairs of table header tags so let's copy and

paste these tags six additional times for a total of seven 1 2 3 4 5 6 7 all right now for the first column the

header will be Sunday we have Sunday then Monday

Tuesday Wednesday Thursday

Friday Saturday so here's my first row the first row is your table

headers add one header for each column in your table for another row we need another

pair of TR tags meaning table row so for my second row I'll include table

data we need T dags so we'll need a total of seven on Sunday our fictional store is

going to be closed I'll type closed as we you can see that this data is underneath this header for the second

row Monday the hours will be 9 to 5 let's apply that for the other days besides

Saturday Monday through Friday the store is open between 9 to 5 Saturday will be reduced hours 10 to 2 all right not too

bad to align the table data what you're going to do is within the table row take the Align attribute set this to

Center or otherwise if you would like to WR justify it you would type WR but let's stick with

Center let's align the first row as well we can also add a border within the opening table tag set border equal to

zero that's for no border then increase the number depending on the thickness that you want

so one will give us a border that is this thick two and

three let's stick with one let me move this a little these table cells aren't exactly the same size

the word Wednesday has a lot of characters within each of these header tags I will set the width to be maybe

100 this column is a little bit larger now let's copy the width and make each header have a width of

100 okay this table is All Uniform now but if we were to shrink this window the cells would be

compressed okay let's change the background color let's begin with the table I will set the style attribute to

be a CSS property let's set the background Das color to be black the whole table is black now so

let's change the color for the headers and I'm just going to copy this style

attribute let's change the first row to have a color of light blue we can at least see the text

now and then for the second row let's pick a different color I think this color would be good

Alice blue yeah that's not too bad if you need additional rows for your table use

another set of TR tags meaning table row then you can add another set of data all right everybody that is how to create a

table using HTML hello again everybody today I'm going to show you how we can create a

button using HTML and a little CSS to create a button we need a pair of button tags and here's our button it's really

small and it doesn't do anything let's add some text between the button tags let's add some text like click

me so here's our button but it's fairly small we can change the size of this button by changing the font size we will

need to access the style attribute then set the font size property to a larger font size so font Das size 25 pixels is

good the size of our button will adjust accordingly let's change the background color

separate each of these CSS properties with a semicolon let's change the background Das color to be

gray so that's how to change the background color to change the font color type color colon then some color

like light blue you can round the corners by setting a border radius so that's

another CSS property border Das radius colon let's begin with five that will

Round the Corner slightly you can increase the amount of pixels for a more rounded

border let's try 25 that's not too bad so this button currently doesn't do anything what I'm going to do is turn

this button into a hyperlink when we click on the button it will take us to maybe Google we need to surround our

button with a pair of a tags I will set the H ref attribute equal to some URL like

Google so when I click on the button it takes me to Google or if we had another HTML file we can go there too I'll

create a new HTML file named maybe page two page 2html let's generate some HTML in VSS

code to do that type an exclamation point then tab all I'm going to add to page two is an H1 header tag with the

title of this is page number two I'll set the HF attribute to be the name of that HTML file page

2html page 2. HTML when I click on the button it brings me to my second page

I haven't discussed JavaScript yet but we can have a button execute some JavaScript code this part of the lesson

is outside the scope of what I would normally teach at this point in time but if you're interested here's a little bit

of JavaScript again it's not necessary to learn this at this level if you would like to execute some JavaScript code

using a button we need a pair of script tags for JavaScript within this pair of script

Tags I'm going to define a function function you can come up with some function name this function will do

something then you need a set of parentheses then a set of curly braces buttons have an onclick attribute

we can have the button do something if it's interacted with the onclick attribute is going to be the name of my

function do something when we click on the button execute this function what do we want to do I'll change some text on

the screen but we'll need some sample text to work with I'll create a pair of paragraph

tags let's say hello within our JavaScript function we'll change the text of whatever is between these two

paragraph tags but we need an ID there's an ID attribute I'll name this text maybe

greeting so when we click on this function I would like to change the text of my greeting

within the function we can do that with document. getet element by

ID within the set of parentheses the ID is greeting follow this with DOT inner HTML

then we can set this equal to some new value let's set the new value to be goodbye now when I click on the button

it changes our text so that's a button everybody you need a pair of button tags you can apply some CSS styling I haven't

really discussed CSS yet so we did inline CSS but if you have these many properties I would recommend a

stylesheet which we'll cover later to make your button bigger you can change the font size you could have your button

bring you to another HTML page or even execute some JavaScript code and well everybody that's how to create a button

using HTML hello again friends today I'm going to explain how we can create a form using

HTML to create a form we'll need a pair of form tags the opening form tag has a few

attributes we need to fill in first is an action attribute after submitting our form to what location do we want to send

our form to form submission is done with a backend language such as PHP you might see a file name such as index.php

or action page or something of that nature within your action attribute we're not actually going to do a form

submission but just be aware that the action attribute sends data to this location to this file the file listed

really can be anything but that's outside the scope of this lesson you'll also see a method the method attribute

specifies if this is a get request or a post request post is used for confidential information such as a

username and a password get is for insensitive data basically again this is outside the scope of HTML at this point

in time if we have a form and we're sending sensitive data we should use post now let's create some elements

within our form the first thing we'll create is a text box we need a self-closing input

tag so here's our text box by default the type is a text box but we can specify that with the type so type text

there's other different types like passwords emails telephone numbers we'll cover that pretty soon we have a

text box but if a user sees this text box they probably don't know what they should enter in let's add a label to the

text box preceding my input tag I will create a pair of label tags what do we want our label to say maybe username

we're telling the user hey we want you to enter in your username if somebody is using a screen reader if they're

visually impaired we should add a four attribute what is this for well this is for my my username another benefit of

adding the four attribute to a label when you click on the label your cursor will move to the text box but we need a

matching ID attribute within the input tag so the ID is going to be the same as the four attribute then when I click on

the label our cursor moves to the text box there are a few other attributes you might be interested in as well but

before we get to that we should create a submit button to submit our data at the end of our form we'll create an input

tag the type will be submit it's a submit button but it currently doesn't do anything we're not

using a backend language to submit form data 2 there are some useful attributes for text boxes within the input element

for our text box let's add the required attribute in order to submit this form we need to type in a password if I just

leave it blank then hit submit we have this little prompt please fill out this field I can't

submit this form until I type in something then I can submit it you could set a minimum and maximum length that's

another attribute Min length equals then some length the minimum length for a username is six

characters let's type in just three or some other number below six submit please lengthen this text to 6

characters or more I'll come up with a different username then submit and that appears to

work you also have the capability of setting a maximum length with the max length attribute let's make the max

length 15 characters so let's type in a username I'll add a bunch of characters

afterwards so I can't type in any more than 15 characters there's a maximum to reset your form there's a

reset button let's copy this input tag paste it then change type to reset so here's my reset button I'll

type in a username press reset then we can reset the data for our form but afterwards I'm just going to add a

breake line just to put the submit button on a new line with text boxes you can add a placeholder to give the user

an idea of what we want them to enter in and in what format I'm going to add a place holder

attribute what do we want our placeholder to be um I don't know SpongeBob SquarePants or maybe just

SpongeBob so the placeholder is faded it gives a hint to the user as to the format in which they should enter an

information if I were to click on this text box the hint is still there until we type in

something okay let's cover passwords to create a password we'll use an input tag the type is going to be

password we should probably add a label to let the user know that we would like a

password so I'm just going to copy the label that we have for our username the four attribute of our label should match

the ID attribute of our input tag so the ID is going to be password the four attribute of the label will be password

and then change the text too there we are I'm just going to change one thing

after my password I'm going to add a break line so I will add that here all right so with the password the

text is hidden I can type in a bunch of characters and you can't see it you could add some of these attributes as

well like a minimum length maximum length and the required attribute so I'll copy those and paste them within

the input tag for my password I can type in a username if I attempt to submit this form data without a password we

have that prompt please fill out this field that's because we have the required attribute set there's also a

minimum length and a maximum length set too I'm required to type in a password that's at least six characters long

right now this is only five anything between 6 and 15 is okay for the rest of this demonstration I'm going to get rid

of these attributes let's cover email next I'll create a label first this will be for email the text

will be email then we'll need a corresponding input tag input type equals email for the ID I will also set

that to be email I'll add a line break after then I'll add a

placeholder s SquarePants at gmail.com again the placeholder is

letting the user know the format in which they should type in their information if I were to type in some

text but we're missing that at sign hold on let me type in something real quick all right click submit we have a

prompt please include an at sign in the email address because we're looking for a valid email address format that's

input for email let's copy our label for phone the text will be phone

number again we need an input tag the type will be te for telephone we need a matching ID

that matches the four attribute phone I'll add a break element to the end we can type in a phone number

I'll add a placeholder too placeholder equals with American telephone numbers you have three digits

such as 1 2 3 Dash then another three digits like 456 Dash then four digits 7890 so Cur currently we can type in any

numbers then submit them H hold on I need a username we can limit the format in

which a user can type in some numbers for a phone number we would need a pattern attribute for the digits 0

through 9 within a set of straight brackets you would type 0-9 then how many digits do you allow

afterwards three then we'll need a dash that's required add a dash then another three digits 0 9

0-9 then another three digits Dash number 0 through 9 let me move this in a little bit then I would like four

digits so now our phone number needs to be in this format 3 digits D3 digits D4 digits 1 2 3-4 5 6-7 8 9

0 hold on I'm going to get rid of this required attribute just because it's kind of annoying right now 1 2 3-4 56-

7890 there that seems to work but if I were to type in a random amount of numbers well then we don't meet this

pattern matching this pattern is required in order to submit this data all right then we have dates like a

birth date we'll need a label this will be for a birth date for

bday input type equals date the ID should match the four

attribute of the label then I'll add a break element so with dates there's an

interactive calendar to select a date pretty simple then we have a number element a user is going to enter in a

quantity like they're buying something like how many do you want let's change the text to

quantity for quantity we need an input element the type will be

number ID equals quantity then I'll add a break so here's

our quantity we can use these arrows to go up or down however normally you can go

into negative numbers we can set a minimum and a maximum with the Min and Max attributes so the minimum will be

zero we don't want to go below zero the max I think 99 is good so we can't go below zero but we can go all the way to

99 and no further you can add a default value with the value attribute I'll set the default to be one that is for number

input it's good if you need a quantity of something all right then radio buttons radio buttons are a little

tricky with radio buttons you can only select one from a group I think a good label will be for a title are you a

mister a miss a doctor whatever like what's your title so title for title we have our title so far then

we'll need individual buttons I'll create a label for Mr Miss and Doctor

Mr Miss in the US doctor is p HD the four attribute will be Mis for

mister Miss for Miss then

PhD for PhD I'm GNA get rid of these colons so after each label we'll create

a radio button input type equals radio the ID will match the four attribute of the

label we have Mis then we'll want to add a value too when we submit this form so

Mister okay let's copy this input then apply it to miss and PhD so type Radio ID will be Miss value Miss then we have

PhD ID will be PhD value PhD so we have three radio buttons um let me just add a break

afterwards with a group of radio buttons you should only be able to select one however we can select all three that's

because we need to add all of these radio buttons to the same group we're going to add a name

attribute we'll name this attribute title whichever radio buttons you would like in the same group they need to

share the same title now we only can select one those are radio buttons okay let's create a drop- down

menu this will be for a payment like what kind of card are you paying with is it a Visa card MasterCard gift card four

payment instead of an input element we're going to be using a pair of Select tags for a select

element then add a break afterwards so we have a drop-down menu but there's no options we will add

option elements within our select element so these have opening and closing

tags let's create three options an option for Visa Mastercard then GI card for option one the value

will be Visa the text will be Visa so we have one option let's add two more

value Master Card the text will be Master Card then a gift

card value equals gift card the text will be gift card then I forgot to add an ID to the

opening select element ID equals payment there we are all right so that is a drop-down menu you need a pair of

Select tags within the select tags you can create option tags then we have a checkbox again let's create a label this

will be for a checkbox I think a good use of a checkbox will be a subscribe button the

four attribute will be subscribe the text will be subscribe we'll need an input element

input type equals checkbox the ID will match the four attribute of the

label then add a break element after I can subscribe by checking the checkbox or by clicking on the label

this one's a little tricky we're going to create a text area again we'll need a label the text next

to the text area will be comment for comment we'll create a pair of text area

tags so we have a text area the ID of the text area will match the four attribute of the label so

comment you can change the dimensions of your text box by adjusting the rows and columns I would like three rows rows

equals 3 columns that will be 25 so now we have different dimensions for our comment you

can type in anything you suck bro code that's how to create a text area for a file submission again we'll create a

label we're kind of following the same pattern file for file again we need an input tag input

type equals file the ID will match the four

attribute of the label file then I'll add a break so now we can choose a file

however by default we can accept all files to limit the type of file that you're looking for there is an accept

attribute what file types will we accept Let's do an image for a PNG that would be image SL

PNG when I choose a file we're looking for a PNG now you can add more than one file type each file type is comma

separated let's also look for any jpegs so that would be jpeg so now we're looking for a bunch of

files anything within this range now if you're sending a large amount of data there's one change we'll make to the

form we're going to change the encryption type within the opening form tag let's say we're sending an image and

the image is a large file so we will set the encryption type equal to be multi-art SL form

data in simple terms when we send our large amount of data we'll break it into multiple parts then when all of that

data is received those multiple parts will be reassembled it's a little more complicated than that but at this level

that's all you need to know so if you're sending a large file such as an image I would recommend changing the encryption

type to multipart SL form data all right everybody so that's how to create a very basic form using HTML it really doesn't

look too pretty right now you can always style it with CSS which we'll be covering very soon and well yeah that's

how to create a form using HTML hello again friends it's me again today I will show you how we can create

both a header and a footer for your web page header and footer elements are both semantic tags they describe their

meaning to both the web browser and the developer they help organize your content and CSS properties can easily be

applied to anything within these containers headers are used for introductory content at the top of your

page such as a title a subtitle a logo a navigation bar but we haven't really discussed navigation bars yet Footers

act as a container for holding concluding content at the bottom of your page such as an author a copyright or

some contact information like a phone number or email all right so let's begin to create a header within our body

we need a pair of header tags then for a footer you need a pair of footer

tags personally what I like to do between the header and footer tags I'll create a pair of main tags for all of