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.