How to Create a very simple web page using HTML (Web B)

Articles, Blog

How to Create a very simple web page using HTML (Web B)

How to Create a very simple web page using HTML (Web B)


this video is on project web B. The goal
of this project is for you to learn how to include more HTML tags and make your
webpages look a little bit nicer double-click the web B folder and we
have two items here there’s gonna be a lot of multitasking going on
okay so make sure you’re prepared for that let’s open up double click on the
web B notes and let’s find out what we have so go ahead and read this document
okay so these notes include HTML tags that will enhance your webpage
you’re gonna include these tags in your web page your web page is gonna need to
be your web B project is gonna need to have five images and five links use a
theme for it you know it could be as your sports web page or your web page on
your favorite movies so you also need to include some text some content okay so
these are the tags that we’re going to be using the first one let’s take a look
at it it’s the paragraph tag okay then second one is the center tag we use to
Center items then we have the heading size tag to increase the size of text we
have we have the image tag which we’ve seen in the first web project and then
we have the link tag so let’s take a look at these and let’s use these on our
webpage so let’s go back to our desktop and here our is our web be HTML file or
HTML file document let’s open up WordPad programs
accessories let’s look forward pad here okay this is how we need to open our
HTML document going pretty fast here it’s not I don’t see anything here I’m
gonna click on the all documents whoops all documents now I see it there click
open and this is our web be project not much in here all we have is HTML we have
the title which we can change right body and a couple of paragraph tags okay so
let’s let’s let’s say change this okay you guys can change it I could put this
as my sports web page okay I can start typing some text or I can add my title
alright my title of my well this is the title it’s going to come out on the web
browser this is a title that will be on the web page so let’s take a look at the
notes we’ll be switching back and forth from the notes and the web page so the
first the second item is the center tag we want to Center some text so if I want
to send her some text I’ll start with the open bracket Center or let’s just
use lower case make it easy on ourselves Center closed bracket now we’ll type our
text welcome to my sports web page okay now we got to close it we open it we
need to close it the only exception to the rule is a paragraph tag Open bracket
backslash to close and center all right let’s save it let’s see how it looks
okay so let’s go back to our folder we double-click on our file to see how it
looks and there it is it’s too small though so I want to increase the size of
that okay also notice the titles here and then this is the title of the
webpage itself so let’s go back to my code and so I’m all I’m doing right
now is centering it but what I want to do I’ll go to the notes now and let’s
learn how to use the heading size tag to increase the size of that title so we
got to play around with these so we have h1 and then we have the close to h1 tag
h2 and h3 and I believe it goes up to age 5 or h6 and it’s just a matter of
playing around with it and experimenting and seeing which heading size tag you
like best so let’s go to back to our web page and let’s type h1 okay so we can do
this in front of the center tag okay or after it it doesn’t matter we just got
to make sure that if we do it after then we got to include if we include the h1
tag here we got to include it here the end 1 just so it doesn’t cause too much
confusion if we include it here in the beginning then we got it included here
at the end ok so let’s choose there and right
before welcome so we’re going to type h1 or back bracket h1 and then close
bracket and then we’ll go at the end our text fair open bracket backslash h1
close bracket now let’s save it let’s go back to my web page let’s refresh it and
there it is changes the size okay let’s go back to my let’s go back to the notes
let’s just insert an image let’s include some paragraph tags though first and
then we’ll insert an image ok so let’s go back here so let’s put some paragraph
tags man remember these are these you don’t really need a you don’t require a
close tag for this one and I can start typing some text here is a picture of my
favorite college football team do something like that
put some more space there and now I can use the image tag but what I want you to
do is do not copy it okay start memorizing this so we start with back we
start with the Open bracket I am G space SRC equals now we need to find an image
okay so I could save it but I need to find an image so you I believe you guys
we can go to Google will go to images will go to my favorite sports team USC
football ok we’ll type USC football search images again we have all kinds of
images here so let’s get this one here so let’s we’re gonna click on this I
always like to get the SI full size image sometimes if you use this image
sometimes it doesn’t come out correctly I like cooking on see full size image
I’m going to right click on it save picture as guess what we’re gonna save
it to we’re gonna go to the desktop we’re gonna look for that folder called
web B that’s what we downloaded from blackboard remember we double click on
that so I’m gonna change the name just to make my life easier I’m just gonna
call it USC and notice that it’s a JPEG dot jpg okay so I’m gonna click Save
I could verify this I can close this I can verify it it’s minimized all this
stuff and Here I am on my web Abbey right right I’m here I am web B and
there it is the USC JPEG okay so now I could go back to my code and I can type
USC jpg and actually I forgot something I need to put quotation mark it’s very
important to put these quotation marks if not it’s not gonna work now I close
bracket now let’s save it let’s go back let’s refresh it and there it is awesome
there’s my webpage now let’s add some links okay let’s add one link okay it’s
that one link let’s go back to my code all right we can go back to the notes
and figure out what the link is notice this is the code for the link
okay we’re gonna type this do not want I don’t want you to copy it there could be
some mistakes when you try to refresh your web page you may not come up so
let’s add some space as much space as we want then I can just start typing some
text I can type click on this USC link to get more information about USC okay
so if i refresh it like this I save it I’ll go back to my web page i refresh it
there isn’t a link here okay so what I want to do is link this part only okay
so I’m gonna go back to my code and I’m gonna want to link this part here so I’m
going to use this tag a href equals a link let’s go back here so I’m gonna
start here a open bracket a space href equals and in quotation marks I’m gonna
include that link the link to the USC web site but I don’t even know what the
what the website is I’m not even sure the word of the USC web site it so go
back to Google okay I could type USC web site okay here it is University of
Southern California I click on that okay and now what I want to do is copy the
web address I click I right click copy alright now I go back to my code and
that I can paste like a right click and I can paste this okay now notice I’m
tasting the web address now I can’t forget quotation mark okay and end
bracket it’s gonna look like this alright now I cannot forget do not
forget to close the link you see this if you forget this is what’s gonna happen
I’m gonna save it let’s go back to my web page okay here’s my web page let’s
close this one here’s my web page refresh and notice it’s linking this
entire text I just want this part link you have seen the USC click on the year
this USC link okay that’s all I want so we got to fix that so we gotta use the
end tag like that save it refresh it and now all I’m linking is
this part notice it’s underlined so when I click on it it goes to the USC web
page I get back and I could see my web page so this is an example what I want
you to do is include five links and five images and use a theme okay so good luck
and I hope you learned a lot from this Web presentation

Leave a Reply

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