Welcome back, everyone, to this lecture, we're going to explore just some basic HTML and text.
So we're going to do is go to our website and check out the source HTML of that website and begin to
build an understanding of how it actually relates to the content we see on the page.
We'll also show you how to inspect individual elements.
Keep in mind, we're going to be using the Chrome browser for this.
Once we understand a real website, we'll go ahead and start creating our own each HTML file.
So in order to do that, we're actually going to check out Visual Studio code and then be able to create
our HTML and see that file in our own browser.
Let's get started by heading over to a browser.
All right, here I am at Google Dot Com.
Now let's imagine as you're taking a course, you have a question on something like an H HTML title
text, the one we showed in the previous lecture.
Well, what you could do is do something like each HTML title tag and then just hit enter, and you're
often going to see two websites show up in these top links.
You're going to see a website called W3C Schools Dot Com, and for pretty much any HTML blank tag sort
of search, you're going to find each HTML, W3C schools and then basically an example, a definition
and usage which browsers support it, global attributes and then examples of more things.
And what's cool about this is you can actually click, try it yourself, and I'll have a little editor.
You can run in your browser and see the result.
We're going to be running our own editor that is Visual Studio Code, so you don't need to worry too
much about this, but does like to do things like edit this, put in a bunch of text, their hit run,
and you would see that change.
Now the reason I mention just Google searching a question about each HTML is there's actually another
source that often shows up in the top links, and that's developer that Mozilla thought this is the
same people that are behind the Mozilla Firefox browser.
And personally, I would actually recommend that as you get more and more comfortable with questions
about how the web works and each HTML and CSS and those sort of things that you actually check out the
Mozilla web docs as well.
It's a lot of the same information, but it's a little more professional.
It gives you some examples here, and I personally prefer it.
As far as the examples and the explanations, the specifications you can see here, it is a little more
geared towards professionals versus the school is more geared towards people who are learning.
So eventually you're probably going to switch over to looking things up on developer that Mozilla,
the org and clicking those links versus the W3C schools link.
But I did want to make you aware of those actual resources for you as you begin to understand how the
web works.
Now let's go back to Google here, and let's check out a Wikipedia article page.
The thing I'm about to show you won't work super well on Google because it's actually quite an advanced
website that uses a lot of JavaScript.
So a simpler website.
So what I'm going to do is let's go ahead and look up Albert Einstein's Wikipedia page.
So I'm going to go to Wikipedia, the org and check out Albert Einstein's page.
You can see here there's a bunch of information, and you can also see that some of these are links
to other Wikipedia pages.
So I can click on a theory of relativity, and it takes me to that link.
And if I notice some of these pieces of text are in larger font than others, some are in Bolt.
Others are italicize.
And so we'll need to understand is the browser is receiving that information of whether to make something
a link, whether it's to make something larger or even whether to show an image somewhere that links
to another page that is all actually being taken from the HTML.
So I can right click and hit a view page source that's control you as a shortcut and your browser,
if you're using the Chrome browser, should actually show you the each HTML document that your browser
is reading for this page.
So you can think of this as the source material, and you'll notice there's a bunch of information here.
And as you begin to scroll down past all of this, eventually you'll see things like there's a list
here like special, relatively general relativity, and those lists are actually later shown here on
the page.
You can think of this as kind of a giant list and there's other things like awards, et cetera.
You can see here my first impression of the USA.
So the actual text, for example, in July 1920, one that we just saw that is actually all being rendered
on this page based off the HTML here.
So in general, our idea is that we want to learn how to create our own HTML documents so our browser
can end up rendering it.
Obviously, there's a lot more going on than just simple HTML here, but you get the idea.
The other thing I want to show you is the fact that you can inspect individual elements on this page.
For example, I can right click on Albert Einstein and then instead of viewing the entire page source,
I can inspect.
And what this does is it loads up this little inspector.
And you can see here it actually shows me in a little slightly more organized fashion as it also highlights
things that are on the page of the actual each table about this particular element.
So we're going to say is that this is an element and the tag is an H1 tag, which we're going to learn
about in just a second.
We can also see that there is actual text here of what it's showing, and I can double click on this
and let's go ahead and change this to say something like Jose Padilla hit enter.
And I'll look.
The change is actually now being edited and changed by my browser.
Now, of course, I haven't actually changed the real Wikipedia article to now say Jose Padilla.
I've only changed the little source code that my browser loaded up when it asked Wikipedia for the initial
information.
The other thing you'll notice is that there's something over here on the right called styles.
Later on, we'll learn that this is CSS that will actually dictate the styling that is things like color
or padding or font size position, that sort of thing.
We can think of each HTML as the content and CSIS as the styling of that content.
There are some things you can do as far as styling is concerned and HTML things like bold text or italicized
text.
But for right now, we'll just keep that distinction.
Each HTML is the content.
CIUSSS will be the styling.
All right.
Now do we understand how to view the page source of a real website, as well as inspect particular elements
on the website?
Let's open up a visual studio code and bring in to create our own HTML files.
OK.
Here I am inside Visual Studio code.
Now, the first thing you should do is somewhere on your computer that you can locate.
Create a new folder and you can call this folder whatever you want.
I'm going to call mine Django lectures and I'll be using it throughout the course.
And I have this located on my desktop, so you can notice one of my recent folder locations that I have
open is underneath my desktop.
Django underscore lectures.
After you create that folder, you can also open it by saying File Open Folder.
So I'm going to select that.
It's going to kind of reboot and open up that folder.
And again, this Django lectures that's located on my desktop.
So go ahead and take the time right now.
Create a folder or directory somewhere on your computer and then open it by saying File, Open Folder
and open that folder inside Visual Studio code.
Once we've done that, you should be able to right click here or actually click on the icon and create
a new file.
So I'm creating a new file underneath this Django lecture folder, and I'm going to call it example
dot h html and I enter, and right off the bat you can see that it has the extension.
HTML and Visual Studio code is smart enough to understand that when you put that extension HTML, it
says, Hey, this is an HTML file, and now I'm actually going to do syntax highlighting on this file
to make sure that the user is aware of certain things like tags.
So for example, if we create a heading one tab, I can say less then and you'll notice that it's already
trying to help you on creating the HTML file.
You can ignore that for right now, but just say this sign each one again, it's going to help you,
and it actually has a link to the Mozilla reference, but kind of just ignoring all this extra help
for right now.
And then you notice once I closed that it will automatically create the closing type for you.
So all the tags, or at least most of them are going to have an opening tag and then the relevant closing
tag where the closing tag is noted with that forward slash.
And so I have my opening tag in my closing tag and this is a heading one tag.
And this is an H1 element.
It represents a section heading.
So what I'm going to do is just say this is a heading.
And you notice that this is being syntax highlighted.
I'm going to do control SE to save that change.
And now what I want to do is actually open up this example, the HTML in my browser, and we're kind
of curious, is it actually going to show this each one, each one?
And this forward slash or will it just show this is a heading?
So what I'm going to do is an example the HTML right click and you should be able to see it, says copy
path, not copy relative path.
We want the entire path.
So go ahead and copy that path.
And now on your clipboard, you should have the entire file path to that actual example that HTML.
So you should be able to then.
Bring in your browser and have open that HTML file, the other way to do this is to just actually double
click on that file where it's saved on your computer and your browser should be the default option to
open it up and we can see we have a heading.
So what's actually going on here?
Well, the tags are telling your browser how to actually approach this text.
So, for example, I can also use something like a emphasise text.
That's nice.
Yep.
So it's a stress emphasis, and basically it's another word for italics.
Visual Studio code helped me out a lot by kind of autocomplete stuff.
And in fact, if I just start typing em, I can actually enter here.
And it's going to autocomplete that for me.
So you're going to see maybe using the autocomplete more and more as we go out throughout the course.
So I'm going to say I'll put in the exact same text.
This is a heading, but we'll see that actually looks different once I save this.
So once you save that, come back to your browser, refresh the page and I'll look emphasis, actually
make things look italic.
And if you had a question on, well, how does that actually work or what does emphasis actually do
here?
You just hover over this or select that block and then you can click the end reference.
And it actually takes you to that reference page.
And I click on that and my browser actually opened up the emphasis elements.
And it's essentially, hey, just gives you emphasis, and it actually has the ability to demo.
So browsers are so good now that they actually have technology to kind of render this little mini input
output.
So you can see here examples of things like paragraph, text, et etc..
So let's go through a few of these tags that are going to be important for us.
So we have heading one, which is an H1.
They can keep getting smaller and smaller so they can say H2 heading to.
They can also say something like H three.
Again, I'm going to hit enter.
It's autocomplete, this heading three.
And this actually goes all the way down to heading six.
So then I can say heading six.
And then there's also a paragraph tag.
So if you hit P, this stands for a paragraph tag.
And what's important about the paragraph tag, it will actually denote when the browser should have
a new line and start a new paragraph so I can write a bunch of text here and if I keep writing.
Text below it it's actually super clear to the HTML, whether this is a continuation inside the same
paragraph notice, had this text, does it actually have any sort of text surrounding it?
So I'm going to delete that.
Let's save these changes and see what they look like inside the browser here and now I'm going to zoom
in on the browser just so you can really see it.
So I'm like 250 percent Zoom.
Then the hopefully get the idea.
This is heading one heading two heading three, you see, to get smaller.
This is normal paragraph text actually heading six is smaller than just normal paragraph text.
And then we can see the emphasis here.
Something to keep in mind is later on.
When we learn about CSS, we're going to be able to have a lot more flexibility on things like font
size in terms of pixel counts like a 13 14 font size, colors, italics, different fonts, etc. So
right now, just think of this more as just the very basics of what content is available to us.
OK, so that was me just typing out the very basic HTML element tags.
What I'm going to do now is show you what a typical Eats HTML document is structured with.
And you may have noticed this as you start typing D.O.C., you get this kind of little helper that says,
OK, Doc..
And that essentially stands for set up your HTML document.
And you'll notice once you hit doc, you actually get what's known as the head of the HTML document
and the body of the HTML document.
And you may be wondering, well, what's the difference here?
Well, the head typically contains things like links and metadata information.
So we'll talk about that in more detail later on.
But essentially, what this does is it informs the actual browser that, Hey, this is going to be an
English language browser or, excuse me, English language web page.
Why would that be important?
Well, if this was another language, your browser, knowing you like English, may want to attempt
to translate the text of the body on the page, so you may have noticed when you visit a foreign language
website, Chrome browser says, Hey, would you like me to attempt to translate this for you?
And browser knows that it's in a different language because it's detecting it based off which the HTML
says it is.
Now there's also more advanced technology, or Google itself is reading the contents of the page and
can actually understand whether something's in like French, Spanish or English.
But this is obviously very helpful for the browsers to understand the basic language that it was denoted
in, which would be really useful if you have multiple languages on a single page, then we can also
see those things like the title tag that also goes in the head portion of a page.
There's other things here in the metadata that we'll talk about later on.
We'll also later on be linking things like CSS files here in the head.
But again, you can think of the head as just kind of more metadata about things about the page and
then the actual content goes inside the body.
So if you were to make an H1 heading here, it would go inside the body text.
OK.
And the other thing I want to point out is there's lorem ipsum so I can start typing out lorem enter.
And it's going to make this really long piece of Latin text that's really useful if you ever find yourself
needing to just have filler text.
So I'm going to hit Save here, and let's refresh our page and see what happens.
And so now I can see as a heading one, I see this entire thing of lorem ipsum text.
Again, this just kind of Latin text here that's helpful for us.
I have it has heading one.
I should probably have it as just a paragraph.
So let's mess around with some paragraph text here.
Then I hit P, which is stands for paragraph, which is kind of quote unquote normal text, and I can
hit lorem one time here.
Open and close tax.
A notice indentation in space, it's not really an issue for HTML, doesn't really care about that.
It's just reading things based off the tags.
Let's add a new paragraph.
I'll say this new paragraph.
Save those changes, come back to our page, refresh it.
You can see here was the first paragraph.
Then there's a new line and then the new paragraph starts.
So it's doing that based off the tax.
And if you're curious what's going on on this page, I could right click and then, Oops, I'm highlighting
this.
I could not right click view page source and I see the actual H Table code.
So this is the same thing that we saw on the Wikipedia page, except now it's our own HTML code.
All right.
So that's it for this lecture.
I just want you to get the idea that we're going to end up structuring these HTML documents with head
and body.
Later on will be kind of more strict about this as we begin to learn about each HTML.
So that's super important to include head and body and everything.
But just keep that in mind.
You're going to see us use this more and more.
But the main thing to understand is that there's a bunch of different types of tags which define different
types of content on the HTML.
And it's HTML really only cares about the stuff that's in between the opening and closing tags.
The opening closing tags just gives information of where or how to display that particular text in between
those tex.
OK.
Thanks.
And I'll see you at the next lecture.