So we've been talking a lot about HTML and we have written some and some of you may never have worked
with it before, and that's OK.
We're going to go through the very basics of HTML right now and see how it all works.
So I have running a text editor.
Mine happens to be sublime text, but you just need to open something that saves text.
So on a Mac you can probably use text edit on windows, you can use notepad or you can go search for
sublime text and download that and follow along exactly as I am.
So I have an empty file here right now and I'm going to type one word into it.
Hello.
And I'm going to save that and I'm going to save on my desktop.
You can save it wherever you want, but I'm going to save it on my desktop and I'm going to call it
indexed HTML.
OK, so you can call it whatever you want, but end it with, you know.
So I save that now on my desktop.
If you look over here, I actually have one file and it's called index, you know, right there.
Now I'm going to go to my favorite Web browser, which happens to be Firefox at the moment.
It changes periodically, but at the moment it's Firefox.
And I want to open that file.
So I go to my desktop, I find indexed and I open it and there is the word hello.
And that is all Web pages.
Are there just text files?
They have the extension HTML, but really they're just text files.
So we need to tell this Web browser how to render the page that we want it to render.
And we do that using special text called HTML text.
So let's go back to our text Denver and let's get rid of that word.
Hello.
And let's just write the old school HTML.
HMO is an opening tag and it was a closing tag.
So this just tells the Web browser and this isn't the correct syntax, but it's what we used to do back
in the good old days of the Internet back in the late 90s.
You use HTML as the starting tag.
Here's where my page begins and HTML slash HTML is the ending time.
And in between that we actually have two sections.
One is called Head and it has a closing tag bighead and one is called body, which I can't seem to type
at the moment, but with the closing tag slash.
OK, so I have this now and if I save this and just go back to my web browser and reload it, I have
nothing.
Absolutely nothing.
Now let's go back into the head section here for a minute and let's give our page a title and a title
tag, not surprisingly, is title in brackets.
And I would call this my nice page slash title to end that.
So now I have my e-mail.
I'm going to indent this little so it's more nicely formatted.
We can follow what's going on.
We have our HTML tags wrapping the entire page in our head.
We have the title like that.
So let's save that.
Go back and reload our page.
Now look up here first.
It's a full path name to where that file lives.
When I reload the page, that changes to my nice page.
So that's all that the title tag does.
Now the body is where the body of your page actually exists.
So I am going to type a word here.
This will types over words.
This is the page title in the body and say so I have that text with nothing around it, inside the body
tag.
There's the start.
There's the end.
When I reload the page, I get this is the page title in the body.
Well, that doesn't really look the way I want it to look.
Well, we have certain tags to do certain things.
We have one called the H1 tag, which is heading level one.
There's the beginning and now I need to give the ending.
So when I save it, that will actually change the way that this Texas is split.
It makes it look like a title now an ugly title, but it is a title.
What if I just want to have text underneath it?
Let's say I want to put some text in here.
I could just type this is some text and the Web browser, once I save this is smart enough to say,
OK, well, that's just text.
But technically speaking, you should wrap this in a tag that gives the browser some indication as to
what kind of text it is.
P stands for paragraph.
So opening tag, closing tag.
And I'll put a period in there because I like to be grammatically correct whenever possible and I want
to go back and save it.
The only thing that's going to appear to have changed is it added a period, but you actually have the
correct syntax for this and there are other tags we can put in here.
We had each one.
Let's try to
level to each to page three, level three each three each four level for each four.
So I've just put three more title tags in their levels.
Two, three and four, which are H2, H3 and four, and everyone has an opening and closing time, so
I save this, I go back and reload the Web page and there I have different levels of headaches.
Well, that's kind of cool.
What if I wanted to emphasize some text?
Let's just copy this and paste it in here a few times just so it looks a little like a little more text.
Let's say I wanted this word to be bold.
Well, I could.
Use the bettag, which is what we used to do for gold, and that will still work, reload, and you
can see that that text is bold, but in modern syntax, in each team of five, which will be talking
about shortly, we actually use the strong tag strong in the same way.
If I wanted this to be our italicize, this this entire sentence here, I could in the old days I would
go I for italics and sloshy for ending italics.
And that still works too.
You can see that this is bold and this is italicize.
But the correct syntax, the modern syntax is to use M for emphasis here and it won't change the way
that it looks.
But now it's grammatically correct.
And if I actually view the source on this page by going to the View menu and choosing where it is anymore,
I just always type this keyboard shortcut.
You can see that what I'm typing here is rendered by the browser.
As you know, this is what it's seeing now.
It's giving me an error up here because this is no longer the correct syntax, but we'll get to that
momentarily.
It's not a big deal and it's easy to fix.
Let's look at a few more things first.
Well, one of the most common things you can see in Web pages is how to set up a link.
So let's say I wanted to link some text.
I'll create another paragraph here and I'll give it a closing tag here.
And you can see that there are different lines and that's fine.
It doesn't matter, actually.
I'll show you something else, too.
This is a whole bunch of spaces.
Link to our university website, Unbe, the University of New Brunswick.
And I want the word, the word, the acronym unbe to link somewhere.
So let's say this.
You notice all those spaces there.
Look what happens when I load the page.
It ignores those spaces and it just defaults to one space between words.
And that is the way that Web browsers typically do these things.
If you want more than that, there's better ways to do it than trying to hit the space bar.
So never try to position something in HTML by using the spacebar.
I'll show you the correct way to do it in a little while, but I want this to be a link to you and be
well, it's fine.
You envy you and I happen to know what your URL is.
HDD colon slash slash www.youtube.com here.
This is where I did a couple of degrees so I want to link to this.
So I'm going to copy this link.
That's how you get there.
That's called the Uniform Resource Locator or you URL or sometimes you or I or web address but I call
it you URL and so does pretty much everybody else that works in this space.
I want to link there.
So I'm going to go over here.
I'm going to get rid of these spaces because they're not doing anything change to one.
I don't want this to be linked and we want this to be a hyperlink.
And for reasons that I've never entirely understood, it begins with a I've never bothered to look up
at the A stands for so pointy bracket A and then the hyper reference ref is the keyword equals and then
in single or double quotes.
But I like double quotes and I like to be consistent, so I use double quotes everywhere I can I pace
that URL and then I close the quotes, close the opening tag and then after where I want the link to
end, I put it to close the attack.
So if I save that, you'll notice the only thing that's going to be linked are the letters you and be
the period won't be linked and neither will the words before because the tag wraps what I want that
link to be.
So I save it.
Go to my Web browser, close this window, reload it, and now it is a link and I can roll over it and
click on it and it takes me there and I can use the back.
Let me get back.
So that's how links work.
Now, there are some other things that we need to be aware of as well, so far we can make a title,
we can make titles of different levels.
We can make a strong text or a bold text and italicized text.
We know what a paragraph is.
Sometimes you to make a list, well, let's make a list.
And there are two kinds of lists we're going to look at.
The first one is an unordered list, which has an opening tag and it has a closing tag.
And in between we have list elements.
So I could just type things in here and stuff will render on the page what I want to render with a bullet
in front of it.
And we do that by saying list item, L.R., list item, item one, L.R. item to
item three, elai.
And if I say that, go back and reload the page there.
They're nicely indented.
That's the default formatting.
We have complete control over the formatting, but we'll get to that when we get to cascading style
sheets.
There is an unordered list.
What if I want an ordered list?
Well, I'm just going to copy and paste it below it and I'll change that ul to an ooh and the closing
tag to an OEL for an ordered list.
Reload that and now I have a list.
But this time it uses numbers and formats them using no period, which is the default style.
And again, we have complete control over that.
We can actually change that to whatever we want and we will before too long.
Now this is HTML, but this is not valid html.
It doesn't conform to the actual standards that are supposed to be supposed to use these days, which
is at the moment HTML five.
I'm going to go to bootstrap bootstrap dotcom.
We went here much earlier in the course and we copied something.
So let's go to get started and let's copy this link the same as we did last time and we'll put it right
where it tells us to put it.
Copy paste the stylesheet link into your head before all other stylesheets to load your our success.
So we copy that.
We go back to our HTML.
We don't have any other stylesheets.
So in our head section, we put this link, then we go back and we actually reload page and you'll see
what happens when we put that in there.
Oops, wrong one, reload it, change the styling of everything to default.
Bootstrap styling, which doesn't look much better at the moment, but it will by the time we're done
with it.
Well, we're not finished yet.
We still don't have valid HTML.
Let's go to the documentation.
On the bootstrap site and let's find a starter template right here and look at what they have before
the HTML tag, they have doctype html.
Copy that and put this up before each HTML tag.
And what that tells the browser is that we're using HTML five.
That's what this means.
Then they had language equals English.
Let's copy that and replace our opening HTML tag with what they have.
Then they have these required meta tags.
Well they're required, let's put them in so I'll copy them.
I'll even copy that little comment at the beginning and I'll talk about that in a moment.
Where do they have those?
Right at the head.
So right up here before our title, we'll paste in that text and we'll format it properly.
So everything looks nice and readable.
All this is is a comment point bracket, exclamation mark, dash, dash, then a space, then whatever
you want your comment to be, then dash, dash, point to closing point a bracket.
That's something that's ignored by the Web browser.
So that's just for us.
A note for us just like comments and source code.
So now I have that.
Good.
What else do they have.
They have the bootstrap access.
Good.
It looks like that's all of it.
They have this GE query stuff that I'm going to ignore right now because that's JavaScript and we're
not talking about JavaScript.
So I have this.
Now, let's go back and reload our page once again.
Here's my nice page.
And when I reload it, it looks exactly the same.
Well, what do we go through all the effort for?
We went through all the effort because some of the things we just added, like, for example, this
declaration are DOCTYPE declaration that is used by every modern browser out there to decide how to
render the actual HTML pages down here.
And this metatarsal set UTF eight allows me to put characters other than standard ASCII characters like
A.B.C. one, two, three.
I can put other characters in there and they'll show up properly.
They won't show up if you don't have that declaration.
Metatarsal equals viewport, says content.
Width equals dislike device.
So make this page as why does the device that's looking at it initial scale don't zoom it shrink to
fit is no.
That makes this page work better on every device out there.
So you might be hitting this web page from a phone or a tablet or a computer with a twenty eight inch
monitor.
And this helps the browser to know how to render the page.
All right.
Now we've included bootstrap.
In the next lecture, we'll start looking at how to use bootstrap and how to make things a little more
attractive.
And we'll start putting some pictures on our page, too.
But that's enough to get us started in any case.