Website Development Course – Overview

[ Music ]>>Welcome to our class. I would like to go over some
fundamental concepts needed in the web development field. To begin, you need to
have a system in place for working with your files. And when you’re learning, you
need to have a system in place where you can put the files that
you are learning to develop. I am looking at a portion of
the my documents in Windows. If you’re using another
platform, you will have a file manager
that has similar capabilities. You should create a
name for the course. So here I have a folder that
would have the course name. In that folder, I would
create other folders in order to organize the learning
material and doing it by either chapters or by weeks
or whatever makes sense to you. But you need to be able to
have a place to put your files so that you can learn. Now, in my chapter two folder,
I have several other folders. This would be the folder where
I would organize my assignments. This might be the folder
where I have the demo files from the chapter. This might be a folder
where I have practice files. So learning how to
work with files and folders is very important
because a website consists of many folders and many files. You also need to be able
to use an HTML editor. You can use Notepad or
another plain text editor, but there are serious
limitations. I would like to introduce
to you Adobe Brackets. If I launch Brackets
from my taskbar, it will automatically open
to the getting started page. This is the getting started page which tells you a little
bit more about Brackets. Notice it opens to
a file index.html. So this is my working
file right here. If I put my cursor
toward that file name, I see an x where I can close it. It opens that file from the
getting started folder somewhere on my hard drive when
I installed Brackets. It has two other files. It also has the CSS
file and the index.html which we are looking at. index.html is the most commonly
used name for the homepage of a website or for the
starting page in any folder. The web server will
automatically load that as the homepage. At the left-hand corner of
my editor, I have some tools. This lightning bolt
is live preview. So when I click on that,
it will open the browser. I am looking at the getting
started page in Chrome. And I can scroll down and
I can read a little bit more information. So notice it loads it in Chrome. And if you notice the address, this is what’s called
the local host so it’s using the local web
server to load this file. Generally, what I do when I’m
testing files is I launch it with live preview once and
then I just minimize it. And then I go to the taskbar
and launch the browser again and I refresh the page in
order to see the changes. Down to the left-hand
corner again, to the right of the live preview, is
the extension manager. These are the extensions
that I have installed. One is Beautify, one is Emmet. I will show you how to use them. Now let’s take a
look at this code. Here’s my opening HTML tag. And notice when I click on
it, it highlights in green. If I scroll down, it will
highlight the ending tag. And these are comments. Here, again, this file
comes with Brackets. If I click on the head section,
it matches the closing tag. So these are my tag delimiters, the opening tag and
the closing tag. You’ll notice that some
tags are one-sided. They don’t contain any content. They just do something. So you will always be starting
out with some default — you will always be starting
out with some default tags that tell the browser
some needed information. For example, this is
for mobile devices. This is for the character
encoding. Here’s our title of the website
getting started with Brackets. Notice it is a two-sided tag. Here is the link tag
for the style sheet. You will begin learning
these tags as we work through the course. Notice the indentation. You don’t have to indent. However, you need to use a
logical, consistent style of coding your HTML so that
it’s easy to work with. Here we have the opening
and closing tag on two lines because it contains a
lot of content inside. Here, we have the opening
and closing tag on one line because there’s not
a lot of content. The same thing here
with the h1 element, that’s my heading level I. It fits nicely across. However, when I go to my
paragraph, the opening and closing, we have a lot of
content so we stack the opening and closing underneath it. These are HTML comments. And what they are used to
give you more information about what your document
is doing. So you want to develop
a consistent, easy to understand style with
which you write your code. Now I am going to
close this file. And I will show you how to start
working with a new HTML file. So the first thing you will do when you start creating
a new file is go to the file tab and choose new. Now notice it’s untitled. It says two because
I already opened one. Before you start coding
anything, you want to save this. So file, save as,
and I will navigate to where I will put this file. I’m going to documents,
the name of my course. I will go to chapter two. And I will go to practice. And you can call this
whatever you want. You can call this index.html. You can call it test.html,
but you need to type in the HTML extension so
the browser knows that. And now I will save it. The beauty of saving it first is that when you start
typing HTML elements, it automatically knows
what you’re typing. And this is called code hinting. It helps you to actually
write the code. Notice it just put in the
opening and closing tag for me. Another nice feature is one of these very nice
extensions called Emmet. Notice I have a whole
toolbar up here for Emmet. And there are keyboard
commands that help you to put in your HTML elements. It is advisable to code
mostly everything in by hand because that is how you learn. But once you become
more experienced, you will see how the editor
will help you to write the code. I am going to use Emmet to
help me code in my basic tags. And what I have done, I have
coded in an exclamation points. And now if I hit my tab key, it will automatically put
my basic tags in for me. This is one reason you want
to install the Emmet plug-in because otherwise you need to
code this by hand every time. It’s not that hard, but
this is a little bit easier. This is what you need to have
to start an HTML document. I would also like to point
out, on the left-hand side, that we’re still looking at
the getting started folder. So you can go into your
own folder and, therefore, it makes it a little bit easier. And notice when I open
practice, there’s test. So now I will double-click
and there’s test. This is the doc type. It’s the document
type definition. It’s telling the browser that
this is an HTML5 document. Meaning it will interpret
the code based on the HTML5 standards. It doesn’t have number
five after it. This is your opening
and closing HTML tag. The HTML tag contains an
attribute, the Lang attribute. This is language. Language equals en for English. This attribute is
for screen readers. People who are visually
impaired use a screen reader to interpret the code
and talk to them. That is telling them that to
speak in the English language. This is not telling the browser
to use English characters. HTML document contains
two sections: the head section and
the body section. And I cannot over
emphasize this anymore. All of your HTML content
goes inside the body. Now supposing I had
a header element. And inside that header
element I had an h1 element. And if you want to move things around to make them a little
bit easier to see, you can. There is the head section. There is the body section. All of my content goes in here. Even though this has
the word header in it, it does not belong
in the head section. Even though this is a
heading level I element, it does not belong
in the head section. It belongs in the body section. It is content. So many students confuse that. This is where all
your webpage, images, text, HTML, layout belongs. What goes in the head section
is processing information to the browser. Now the title goes there. The title is part
of the browser. It is not part of the webpage. So if I click my live
preview and launch this, there’s my heading level I. Notice in my tab up
here, my test page. This is where the
title shows up. Everything that you want
inside the browser goes in the body tag. If I right-click and
go to view page source, I can see the source code. Now notice the source code puts in all this Bracket
stuff, which I don’t like. The reason it’s doing that is because it’s running
it from local host. Let’s take a look at a
different way of doing this. And I’m going to
go to chapter two. And I’m going to right-click
and open as a brackets project. And now it’s opened
a little differently. We still see the folder up here. And we see the other
folders and the file. And this is the main reason
you want to use an editor because you can see all
your folders and files and you can write
the code more easily. You can’t do that
with text editor. So rather than launching the
test page from the live preview, if I were to launch it
right from the file manager, notice it’s launching
it as a local file from the file manager. And now if I right-click and
look at the view page source, I do not see all those
Brackets attributes. So I just want to
point that out. The live preview is
wonderful for testing. However, when you use
live preview, it does work with what is called
the local web host. And because it’s doing
that, when you look at the source code you’re going to see all these
attributes in there. This is something that Brackets
is just putting in there. What is in your code is what’s
right here, what you type. All right. You do not need those
Brackets attributes to run your webpage
on the web server.

Add a Comment

Your email address will not be published. Required fields are marked *