HTML basics (Web A)

HTML basics (Web A)


so here I am on the desktop I located my
web is it folder I’m gonna double click on it now there’s a web folder in there
I’m gonna click and drag it to the desktop I’m gonna close this window now
I should have two folders I want to delete the zipped one we cannot work on
we cannot work with it so now I have my unzipped web folder now this is the one
I can work with so let’s open this up and let’s see what we have I notice I
have three files here I have an audio file I have what’s called an HTML file
and I have a video now there’s different ways of looking at this we can make at
details and now we we notice we have our files look a little different one thing
we need to do is we need to activate the file extensions I cannot see what type
of file this is so I want you to go to organize folder and search options under
the View tab click on the View tab don’t even scroll down no need to scroll down
just look at the list the second to the last item says hide extensions for known
file types uncheck that click apply click OK and now we can see the file
extensions on each of these documents there’s a lot of multitasking going on
in this project first thing we want to do is rename our HTML document we’re
gonna rename it we’re gonna put our last name all that first name followed by web
a now if we double click on it we get this we’re able to view that HTML
document using the browser we can either use Internet Explorer or Firefox or
Google Chrome whichever you prefer and so this is the contents of the
document now I want to modify this so I need to look at the code of how I modify
this HTML document so let’s go back to our folder so I want to see the code in
this file how do I do that let’s go to the start button at the bottom left
click on that we’re gonna type notepad we’re gonna notice note the program
notepad comes up we click on notepad ok we go to file open let’s go to desktop we’re gonna locate our web folder and we
shouldn’t see anything there because it wants to open all the text documents so
at the bottom right we click on text documents arrow click all files now we
should see our three documents I locate my HTML file I click on that or double
click now I get to see the code so pretty much whatever code if I change
the code here the I change the code anything having to do with the code here
I should be able to see the changes on my web page in my browser so first thing
I want to do is let’s change the this we could change the title sure so currently
it says this is an example this is what we’re going to change so I could just
put my first web page as a title anytime I make a change to it I want to fuck go
to file save and then I refresh and I should see the change there if we also
see this web page we notice I have my name there we have some text here this
is an example of a gif image an example of an animated gif image so our job is
to place references to images in these blank areas that’s how we’re gonna
finish this Web a project so if I take a look at my code I want to show you first
of all some of the popular tags in HTML the first one at the top is open bracket
HTML close bracket next one is a title tag okay this is what we call an open Tagg and this is what we call a close
tag the difference is that one has the back the close tag has a backslash open
tag does not now why does this hat why do we have an open and close tags is the
reason why is because whatever is in between that’s what gets applied that’s
what you apply to the title so if you were to have this title tag all the way
down here then everything in between would be
considered the title next one is the body tag and if we scroll down we see
the body tag below and the HTML tag also the close tags we have a couple of
comment tags here and notice that you cannot you don’t see them on the webpage
okay these are just for documentation purposes when someone needs help all
right I go ahead and you should be able to
change you delete my name and put your name on there I’m just gonna put number
one on there and then I’m also going to look below and these are what we call
paragraph tags they create space we have another comment tag below place a
reference to a gift image this is an example of a gif image and we see that
here this is an example of a gif image so this is a first block that represents
this text the second block represents the next text and so on and so forth
this is code to insert an image a gif image so my job is to find a gif image
and place the reference to that image here so let’s do that first step I want
to do I want to go to my web browser and I
want to go to I open up a new tab and I go to Google Images so once I’m at
Google I go to images now here I’m gonna look for an image let’s type give logo
let’s search for it and let’s see what comes up just for example purposes let’s
choose this NASA picture NASA logo I’m gonna click on that now what I always
like to do is I like to view the image completely now I see the entire image
the way the size is I right click on the image save picture as I’m gonna save it
to the folder where I have I want to save it to the exact folder where I have
my HTML document which is located around the desktop under a folder called web
and notice it’s a gif image so I leave that there I want to change the name you
know I don’t like complicated names it has a dash there you know I you know
it’s two kids kind of long I like to keep it short I make sure that the name
is always lowercase so I’m gonna keep it simple just NASA I click on save okay now I go back to my code and I change
the reference here to NASA and always every time I make a change to I’m
changed to the document I got to make sure I save it now I go back to my web
page i refresh I can also press f5 on the keyboard or just click the refresh
button and if it doesn’t show up see the number
one came up pick up image didn’t show up but I have all my code is correct this
may happen to you so I’m glad it happen to me because then I could show you what
you can do to fix this problem so in case this problem occurs go to your web
page right click go to open with and use another browser and as you can see the
other browser it worked and it opened it up so your job is to find an animated
smoother it says below pencil refers to an animated gif your job is to find an
animated gif change the code here find a JPEG image change the code here now the
difference between a gif or gif image and a JPEG image is that a gif only
supports 256 colors a JPEG image supports millions of colors the next
part here below says below place a reference to a video well in the code in
the folder I’m giving you a video so all you have to do is give the proper name
of the video here change that change that to video same thing here I give you
an audio file that you can place instead of putting having blank and that is this
file right here so all you’re doing is changing the reference the reference to
it so let me show you an example of how your project should look once it’s done
so here’s an example of what your project should look like have a regular
gif image I have an animated gif image you see how there’s some type of
animation going on and if you get this allowed blog content
you want to make sure to accept it because now I could see the video you
can hear the audio file and you have your JPEG image there and now my web a
project is complete so now let me show you how to submit this project I like to
close everything so I close it all and I locate my folder where I have my project
that and now I need to zip it I need to zip this folder the reason we zip it is
because by zipping it the computer treats it as one unit as opposed
to a folder with a bunch of files in it so I’m going to right click and I go to
send to and I go to compressed folder okay now I get this web dot zip folder I
need to rename it change it to last name followed by first name followed by a web
a he leave the dot zip there and this is what you will submit thanks for watching
see you in the next video

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *