All language subtitles for 014 What is The HTML Boilerplate_.en_US

Now once you're ready, go ahead and open up the Atom editor. Now,

if you haven't yet installed Atom,

this is a good point to go back and have a look at those videos on how to

install Atom for Mac or for Windows because from here on out,

we're going to be working with the Atom editor to create every single one of our

websites. So it's really,

really important that you have it set up with all the packages that we've

specified in those installation videos.

But once you've got it installed an open,

you should be looking at a screen like this. Now,

the first thing we're going to do is we're going to go to file and we're going

to open a new project folder to work out of.

So I want you to create a new folder either in your desktop or somewhere else

that you prefer and it's going to be called Web Development.

Go ahead and hit create, and then select that web development folder

and go ahead and click open.

And now you'll see your project folder show up in the sidebar over here

and you can toggle it closed by clicking on that arrow button over there.

So now that we've got our web development folder,

this is where we're going to store all of our projects.

The first project that we're gonna be creating is our personal website.

So go ahead and right-click on the web development folder

and we're going to create a new folder inside the web development folder,

and we're going to call our project HTML - Personal Site.

And now we're ready to create our very first HTML file inside this folder.

So again, right-click on this tab and we're going to create a new file.

Now, as you get used to Atom,

you are going to start to want to use some of their shortcuts. So for example,

instead of right-clicking and select a new file,

you can also just simply select the HTML personal site and hit A in order to do

the same thing. But in the beginning, as you're getting used to Atom,

I'm going to be using a lot of the mouse controls so that you can see what's

happening on the screen.

But feel free to start incorporating the shortcuts into your workflow

and as time goes on,

you'll find that they make life so much quicker and so much easier.

So now we're going to create our very first file and you can see the way that

the files are structured is that we're creating it inside this folder called

HTML - Personal Site and inside that folder,

is where our web page is going to be located.

Let's go ahead and create this homepage. And by convention,

we're going to name it, index.html

and that is usually the name that developers will give their homepage.

So go ahead and hit enter in order to create that file.

And if you open up this folder,

you can see that's exactly where it's located and it should open up on the right

hand or the main pane over here as well. Now in order to create any HTML website,

there's a little bit of boilerplate code that's associated. Now,

you're going to either write it all out,

or because we installed the Emmet plugin,

we can simply write HTML and then hit enter,

and it will insert all of that boilerplate code for us. Now,

if that didn't work for you,

you could also hit the tab key after writing HTML or typing an exclamation Mark

and then hitting the tab or the enter key.

Try some of these combinations that you see on screen

if it's not working for you.

And you're going to come to see and appreciate all of the powers of the Atom

plugins and how helpful they can be.

So now we mentioned that this is a standard HTML boilerplate code.

Now in Programming, we talk about boilerplates quite frequently,

and it's similar to having a code template,

something that you'll reuse for different projects.

And it comes from the days when the printing press would make these heavy iron

plates that would function as their printing template.

And because they looked very similar to the small metal plate that identified

the builder of a steam boiler they called it the boilerplate.

That's just where this word comes from.

But when we're talking about it in Programming,

we usually mean a co-template that you can reuse. Now,

even though we didn't have to do very much work in order to get all of this into

our file, it would still be a shame to lose it, right? So in Atom,

whenever you see a blue dot on the tab bar of your file,

that means that there's unsaved progress.

And in order to make it disappear and to keep your progress,

you can simply go to file and then click on save or use whatever shortcut that

shows up for you over here. It should be command + s on Mac,

and it should be control + on Windows. For those of you who are interested,

I've included a link to some of the most commonly used the Atom keyboard

shortcuts and includes the commands for both Mac, Windows and Linux,

for users on all three platforms.

So go and have a look over there and start learning and using some of these

shortcuts. And once you've saved your file on Atom

you'll see that little blue dot disappear,

and now you can be rest assured that all your progress has now been safely

saved. Now there's quite a lot of stuff on the screen.

So let's talk about this boilerplate line by line to understand what it all

does.

So the first line here is where we declare the document type.

And this tells the browser when it opens up this file,

what is the version of HTML that we're using. Now in this course,

we're working with the latest version of HTML, which is HTML 5.

Now in previous versions of HTML,

this doc type was incredibly convoluted. And in fact,

it can show you what some of them look like. So we can write

html:4t for example,

and then because we've installed emmet, if I hit tab, you can see

this is what the boilerplate code for a particular HTML 4 version would look

like. And you can see that doc type is a lot longer

and very often programmers won't be able to remember that

so they actually have to look it up somewhere. But since HTML 5,

the doctype declaration became a lot simpler

and now it's just exclamation !DOCTYPE html

and this tells the browser to render this file as an HTML 5 document.

And there's a few differences between how things will appear or how things will

be structured depending on whether

if the doctype was HTML5 or a previous version.

So that's the doc type.

Now we inserted all of this code using auto-complete from Emmet.

And if you want to look at all the other things that you can do with Emmet,

then you can go ahead and have a look at docs.emmet.io/cheat-sheet.

And here you can see what all of those abbreviations look like

and what is the result of it.

As you're developing into a professional web developer,

it's a great resource to have in order to save yourself a lot of time

when you get used to using these common shortcuts.

Now the next line in our code, it's an HTML tag.

And this tells the browser that everything in between the opening and closing

tags is going to be HTML code. And what does that code consist of?

Well, it consists of a head and a body.

Now the head is the part of the HTML file that holds information about the

webpage and it tells the browser how it should handle the page.

So for example,

we might have a title tag in here that tells the browser

what is the title of this particular document or this particular page.

So let's go ahead and give our website a title.

Let's call it whatever your name is.

So mine is Angela. Angela's personal site.

And now if we go ahead and hit save,

we can have a look at it inside our browser.

Now there's a couple of ways how you can open up the website that you are coding

up inside your browser. Now,

one of these ways is simply going into your Finder or your Explorer and finding

that index.html file,

and then double clicking on it and it should bring it up inside Chrome. Now,

the other way of opening up your website is if you right-

click on your file inside Atom

and you go to copy full path,

then it copies the entire directory path to the location of your website.

So if you just go ahead and paste it into the bar here and here with this file

path,

we're telling the browser how to find this file index.html on our computer.

So first we're telling it to go into a folder called users,

then we're telling it to go into a folder called angelayu. Then we're saying

go to desktop. And then inside desktop, we're going to web development.

And finally, we're going to HTML - Personal Site

and that is where we're going to find that index.html site.

Let's go ahead and hit enter on that file path in order to do exactly the same

as double clicking on this file,

which is opening up our website inside Chrome. Now,

if Chrome is not your default browser, then when you see the icon

it's not going to have the Chrome symbol here.

So you can change that by going into your settings,

then scrolling down to default browser in order to change it.

Now at the moment,

our website doesn't contain any content yet,

but it does have a title, which you can see here

and it says Angela's personal site, which is what we created over here.

Now inside the head section,

there's also this meta element.

Now there's quite a few different meta elements,

but this particular one is called character set.

And the one that we're setting it to is UTF-8. Now,

what does this line do?

The meta elements give extra metadata or associated data to your HTML document.

And in this case, we're telling the browser when it opens up this file

that all the text inside

our webpage is encoded using the UTF-8 encoding system.

So this is basically a list of all the available characters that we can use

inside our website for it to be rendered correctly. Now,

sometimes when you open up a webpage, especially in an outdated browser

like internet Explorer,

or an email that you got from a Bulgarian friend,

you might see some of the characters being jumbled up like this,

and this is called Mojibake.

And it's a Japanese word that stands for characters that are transformed.

And it occurs because your browser is trying to render the characters using the

wrong character set. So for example,

if we have a look at this Wikipedia page for Mojibake in Japanese,

you can see that currently my browser is set to render all the webpages as

Unicode, which is very similar to UTF-8.

And you can see that everything looks pretty legit.

It all looks more or less like Japanese.

But if I decide to change the encoding of my browser and for it to interpret all

of the websites as something else say Arabic,

then you can see that all of this webpage is now messed up.

This is not a valid word

and none of this has any meaning because it's encoded the website incorrectly.

So there's quite a few different types of encoding

and they are specialized for different languages because different languages

use different symbols. For example,

if you have a look at the Windows Greek symbol chart,

you can see that the symbol at position 224,

it looks like this, but if you have a look at the chart for Windows Arabic,

then 224 actually encodes a completely different character.

And that's why we get these messed up websites or strange looking emails when

it's interpreted using the wrong encoding.

Now UTF08 is the standard encoding that you should be using when working with

HTML 5.

And the reason for that is because it includes all of those

international symbols. And in fact,

every single symbol that is included in the Unicode character set.

So if you go to unicode-table.com,

then you can see a table of all of the Unicode characters.

And if you scroll down,

it's got this nice little animation that shows you as we change locations going

from Latin,

so most of the English speaking countries, to Greek and Coptic,

and then going to Armenian, Hebrew, Arabic, and all of the different languages.

The other thing about Unicode is that it also includes emojis.

For example, if you have a look at the emoji chart,

let's look for heart symbols for example,

then we've got all of these different emoji characters that we can also use on

our website that's encoded with UTF-8.

So let's go ahead and give that a try.

Let's find a nice looking heart smbol. We can right-click to copy it or hit

command C or control C,

and we can paste it to the front of our website title using control + V or command + V.

And now if I hit save and go back to my website and hit command or control + r to

refresh or click this refresh button here,

then you can see our title is updated with that emoji.

So everything that is Unicode can be encoded correctly using UTF-8

and it's something that you should just have as your boilerplate code for any

new website you create. This gives your website

the maximum chance of being rendered correctly on browsers that are from

international visitors. Now,

if you're interested in doing a bit of background reading and learning more

about Unicode and character sets,

then this is a really good piece that I highly recommend by Joel Spolsky.

It's a roughly 10 minute read,

and it talks a lot about these character sets and how they encode different

symbols and why you should be using something like Unicode or UTF-8 in your

websites in order to ensure maximum compatibility. And so it's a good read,

and I'll include a link to it in the resources for this lesson. Now,

aside from the character set attribute for the meta element,

there's also other attributes that you might see on different websites.

So some of the common ones include the description or things like keywords

about your website, who the author is as well as viewport.

And these meta-tags tell the browser how it should render or display the

webpage.

And also they give information to search engines about the content of the

website. So for example,

if we go to the Mozilla MDN web docs website,

the main page, developer.mozilla.org,

and we right click and we view page source,

then we get to see the entire HTML file that's used to render this particular

page.

So this is what our browser see's and does all the hard work of making it look

nice and pretty like this for us. So here,

if you go ahead and hit command + F or control + F on Windows,

you can search for the description attribute.

Now it's not this first one, but it is this third one

and it's this exact thing.

And the description says the Mozilla developer network MDN provides information

about open web technologies including HTML, CSS and APIs. Now,

if we go into Google and we searched for MDN,

you can see that the snippet of text that it shows about the main MDN website is

exactly the same as what we saw

just here in the description meta-tags and this is what search engines do.

They crawl the HTML of your website

and look for certain meta-tags in order to know what your website is about,

and also how to display it in their search index.

And there's a whole bunch of different attributes for the meta element

and you can have a read about it either on w3schools or what I recommend

usually is the MDN web docs. So if you have a look at meta over here,

then you can learn all about the different attributes,

how to use them and what they're good for. In the next lesson,

we're going to be tapping into our body section

and we're going to be creating the content for this personal site of ours.

So for all of that and more, I'll see you on the next lesson.