Tip:
Highlight text to annotate it
X
>> Hello everyone.
Well it's time to start working on our portfolios.
And to do that, we're going
to expand upon what we learn from w3schools.com.
You did do your homework, right?
And we're gonna be doing our portfolios ourselves
by hand in HTML.
So what you see here is the basic .HTML
that will be supplied to you.
This is our most basic of basic templates to get started
with making a webpage.
You'll see the head tag, it's something
that you might not be familiar with, with the reading,
but what it's useful for is this title.
This is the title of the webpage,
up here W3Schools Online Web Tutorials.
This is where your title will show.
So that's something new for you.
But you know about the body already
from your readings that's what the webpage will look like.
So let's get started with creating our portfolio.
So the first thing we need to do, we need to change the title.
And to do that, we select the text within the title tags
and we named it-- how about "my portfolio."
You can of course name it whatever you want,
it's your webpage.
And the body of the text, we don't want your crop here,
that's really not what we're going for.
So let's put it, "welcome to my portfolio."
Perfect. Now I wanna save this.
I wanna save before I go any further
because you should be saving really often.
So let's go to file.
Save As, 'cause I don't wanna overwrite the basic,
I wanna still use that as template.
And I'm going to put this into a folder I created right here.
You wanna keep everything in a single folder
for these beginning lessons.
Later on, we might get more complex.
But for now just put everything in one single folder.
I'm going to name this "index.html."
And the reason I named it "index" is
because when you don't specify a browser to go to a certain page,
it will go automatically to the index in that folder.
So if you wanna send somebody to your website, you can say, "Hey,
check out my website.com."
When they put in my website.com,
it's going to go straight to the index.
Instead of having specified, go to mywebsite.com/firstpage.html.
So this way it's much simpler.
So Save As index, save.
If you're using a Mac, also make sure
that the text edit software is-- the preferences are set.
You should check that in the last video.
If you're using a PC and you're using [inaudible]--
using some other text entry software,
just make sure you're not using rich text,
then you'll be just fine using HTML, continue on.
So now, we saved to this little folder here, our index.html.
If we right click on that and open it with a web browser,
you can see that here is our webpage.
We have Welcome to My Portfolio and the body;
we have My Portfolio in title; and we're good to continue on.
So once we open up text edit--
once we open up the text edit-- it's fighting me.
Alright, so what I wanna do is I wanna create a link.
I want project 1 right here.
But how do we create a link?
Well, we go back to our lovely friend, W3Schools,
we learn HTML, on the left here,
all the things we could ever wanna know; links, right there.
Click that.
Here is the syntax to create a hyperlink.
It starts off with the A tag that closes with the A tag.
And within the opening tag, we have HREF,
which is Hypertext Reference.
Going to this webpage.
And nested within the tag, we have this text.
What it does is this makes visit W3Schools
if it's visible to you at all.
So this makes visit W3Schools, a hot link to w3schools.com.
So I'm gonna copy this top one, this basic one, and come back
to text edit, and I'm gonna paste it
in under Welcome to My Portfolio.
Now HTML doesn't care about how you format the text in here.
You have to put in the P tag if you wan to drop down a line.
So let's surround our link with the P tag, the opening tag,
and the closing tag, don't forget both,
and let's start with our link.
So I want our link to say something like, project 1
and I wanted to go to-- I'm gonna take out this URL here,
by putting my own URL, project1.html.
And let's save this before we go any further.
So what we have now is text that says project 1
and when you click on it, you'll go to project1.html
by not specifying a full address
by not having his be http:// www.mywebsite/project.html.
It's gonna search in the same folder as your index is stored,
as the file that's calling for it.
This is called a relative link.
It's relative to where the file that's running that link is.
So that's fine, we're okay with that.
[ Pause ]
>> So let's continue.
We need to make our project1.html.
So let's save this, I'm pretty sure I save it recently.
It's always good to save often.
Let's go to my desktop here and let's open our basic.html again,
right click it, and open with text edit.
So we're back in our basic.html.
Let's make it a little bigger so you can see.
So we're back in the basic .HTML.
First thing, let's file, Save As, project1.html.
Save As project 1.
Use HTML, perfect.
So let's do the same thing we did last time,
let's change the title, project 1.
Let's change what's in the body, this is my project 1.
And let's save file-- save.
So now we can go back to our browser and we can look
at the index that we've created just like we did last time.
And if we hit Refresh, we should see--
there's the link we put in earlier.
And if we click on that link,
here's the project1.html that we made.
This is my project 1.
Of course, there's nothing there.
There's no project there.
So now we have to look up how are we gonna put in our project.
How we're gonna put in an image?
Let's go back to W3Schools.
On the left, we see HTML images right here, give that a click.
Come on down and you'll see here is how you insert an image.
Same as creating a link, we have the HREF
or in this case the source and this will point
to where the image is and we have what's--
something new called, Alt-text, so this for accessibility.
If the image doesn't show up or if someone, so let's say,
sight impaired and they're using an alternate browser,
it's going to read what you put
in here instead of viewing the image.
So you wanna put in a quick description of the image here.
So then like this is my project 1
or project 1-- project 1 thumbnail.
Something in the-- tell the browser what it's looking at--
the user what they're looking at.
And this actually a self closing tag.
You'll notice there's no /IMG closing tag.
There is just a little slash at the end here.
Sometimes are self closing and H--
W3Schools will tell you which ones are which.
Let's go back in the text edit.
Let's create our new line so we can make new paragraph.
Let's start with also-- creating the close
and that's paste within that image.
Image source URL, I have my image prepared already,
it's right here.
I have my image prepared, it's project1.jpeg.
And since I don't specify the full address, it's gonna look
in the same folder as the HTML file.
And the Alt-text, I'm going to call it, project 1.
I'm gonna save this and let's check it out.
Let's see what this looks like.
Back in the browser.
Back to our project.
Hit Refresh.
Congratulations, here is the project.
But it's a really big image.
I'm really not comfortable with putting this big image here.
It's just not fast.
If someone wants to see my project, they're gonna click
on this and it's gonna have to load this whole big image.
It's just-- It's not ideal.
So we're gonna do what's called a thumbnail.
Yeah, thumbnail, get it.
We're going to create a thumbnail of this image.
And you might have run across HTML commands that resize images
on your reading in W3Schools and I'm going
to tell you not to use those.
Don't use those.
They're really not something you wanna use
because when you resize something in HTML,
you're not actually creating a smaller image.
>> You're just taking this big image here
and cram it to a small box.
So we would have the same problem.
Somebody wants to go to your website
and they had this little connection
or cellphone browser even, the image will--
they'll have to load this huge image and then just cram it down
and that's really not ideal,
gonna slow down whatever-- whatever is running.
So I actually open up the Photoshop
and I created a smaller version of this image.
So let's go back to our text edit,
figure out what we're gonna do.
So we just have this image here.
But what I want is I actually want this smaller image
to be link.
And I want to link to the bigger image.
So we know how to create a link and we know how to do an image.
We go back to W3Schools, back to links, here's the [inaudible]
to our link, let's copy that.
Go back to our text edit, paste it in,
and what I wanna do is I wanna take out this closing tag,
cut that, I'm gonna put it behind the image.
So now what I've done is I've nested--
I have nested this image tag within the link tag.
Anything that's nested within a link tag,
automatically becomes a link.
And we can actually take out this--
as well as this link text,
because we don't have any text anymore, we have the image.
So now we can change the URL of the link to point
to project1.jpeg and we can chang project1.jpeg to point
to our thumbnail instead of the big image.
I believe I've called it project 1 thumb.
So here we have our link and our link closing tag;
and nested within the link, we have an image.
So if we save that, come back to our browser,
back to [inaudible] project, hit Refresh, and you see,
here is our thumbnail image.
And if you click on it, it goes to the full image.
Let's just do a quick recap of what we have so far.
We have-- We have an index that is our first page.
We have our project 1 which is our second page
and we have our project 1 image and its thumbnail.
And we did that all by taking little snippets of code
and working them into what we needed them to be.
And we can adopt this and you can get very,
very creative at this.
You can do your entire website by hand.
But there are other ways to do it.
What's also important is you look at this
and you understand what you're seeing.
We're gonna be using Dreamweaver in the next lesson.
And Dreamweaver is all machine generated.
The problem with that is sometimes Dreamweaver doesn't
know exactly what you want and tries its best but not perfect.
And by understanding what you're looking at,
by understanding the code that Dreamweaver is generating,
you can come in and massage it and fix it and make
to be what you wanted to be.
You have ultimate control this way.
Just remember, if you ever stump, go back to W3Schools
and take a look at what they have to say.
They are your complete resource.
They will tell you everything you need to know.
Thank you very much for watching
and good luck with your portfolios.