Web Development for Absolute Beginners
Introduction about Web
Development
Series this entire series is meant for anyone wanting to
learn basic web design and web development and there's absolutely no
prerequisites I'm teaching this course as if I'm talk into someone that's never
written a line of HTML before so don't worry about having any kind of prior web
development knowledge this will be an ongoing course or ongoing series and each
Article will focus on a different topic so in this particular Article we're
going to be focusing on HTML only then we'll move onto CSS and possibly some
JavaScript I also want to show you how to upload a website to the Internet
alright so just a couple things before we begin so I want to stress that this
this course and this Article the series
is for beginners okay.
Articles that are over like you know 25 minutes but you know
if you if you're that impatient where you can't watch an hour-long course then
you're probably in the wrong profession and I don't mean to sound harsh or anything
but I don't want to scare anybody down the wrong path and I really do mean that
whole hearted l alright so enough with the preference let's go ahead and get
started so what is
What is HTML for beginners. What
it stands for?
HTML it stands for
hypertext mark-up language and a lot of people just starting out don't realize
that HTML is not a programming language at any level it's a mark-up language
for creating webpages and documents ok HTML documents one of the key elements
of a programming language is logic so you can have things like conditionals where
you can say if this is true then do this HTML however doesn't have any of that HTML
is used to just display in format elements of a webpage that may be a text
paragraph or a heading a bullet list or an image or many other things it's
strictly presentational just try to remember that there's no logic there's no
actual programming so an example of a programming language would be JavaScript or
PHP or C# these are intricate languages and they're responsible for things like
connecting to a database you know for like an online store or something like that
user login dynamic functionality things like that now with that said that
doesn't make any programming language more important than HTML in fact if
you're getting into web development HTML in at least in my opinion is much more
important because .
How to work with HTML.
HTML is the building block of the web every
single site that you see outputs HTML to the browser no matter what kind of
advanced programming it uses on the back end all right you can build a website
using just HTML and CSS , CSS of course as a styling language and we'll get
into that in another Article but you can have just an HTML.
Started with HTML
We actually need to get started so to get started building
websites you only really need two things you need a browser to view the HTML
and you need a text editor to write the HTML now don't worry about , what kind
of computer you have if you're on Windows Mac or Linux it doesn't matter as
long as you have these two things everything that I'm doing in this in a series
and then this Article is completely cross-platform so for a browser can be
whatever you want .
Browser Setup
I'd highly suggest Google Chrome it's the fastest and in my
opinion it's the best for any web developer but of course you can use Firefox
or Safari even edge just please for god sakes don't use internet explorer if
you're using something less than Windows 10 please download a different browser
all right so.
Text Editor
You can also use any
text editor you want which one and which one is up to you could even use
Windows notepad but I wouldn't suggest it you want to use something with line
numbers and syntax highlighting stuff like that I’m going to be using an editor
called sublime text which is available for Windows Mac and Linux so we feel
free to download it I'm going to show you where and how to download it I'm
using sublime text because it's very simple it's very light when I'm working
with other technologies and languages .
I usually use something called Visual Studio code but I think that those are overkill
for what we're doing here so before we move on let's go ahead and install
sublime text so that we can start writing HTML alright guys so you want to go
to www.visualstudiocode.com
you want it if you want to use something else
that's fine now this program is free to try if you want to keep using it that's
just buying a license if you use it without a license it doesn't have any
limitations or anything like that you're just going to get a pop up every once
in a while that says you should probably buy a license alright so let's go
ahead and download this I'm going to click the big download button here alright
so once that's done we can go ahead and open it it's just going to be a simple
Staller for windows and of course you can grab this for mac or Linux so let’s
go through this default location is fine I’m going to choose to add it to the
Explorer context menu what that will does it'll allow us to right-click on an
HTML file and say open it open with sublime text so we definitely want that
checked and that we're just going to install alright so it should be all settle’s
click finish and now we should be able to open it up I'm just going to search
for it down here my search bar if it opens and let's just see right here
sublime text 3 ok there's also sublime text 2 but 3 .
Getting started with HTML
Obviously is the newer version alright so this is what a text
editor looks like I'm not going to go through all the features I just want to
strictly focus on HTML syntax so now that we have our editor installed we can
go ahead and we can start to create our HTML file
We something calm and
you upload a file called index.HTML
that's the file that's going to show on that root domain ok if you upload a
file let's say about dot HTML that’s going to show when you go to something
calm slash about dot HTML so the index file will always be the rooftile of the
home page unless of course you’re messing with server settings and you change
it but by default that’s the behaviour
it's going to look at “index.HTML”
Alright guys so we're going
to go ahead and create our first HTML file now I’m going to put thein a folder
so I'm going to create a folder I'm going to call this HTML cheat sheet okay
and then inside that folder let’s create a new file by going to new text
document and we're going to call this index dot HTML okay we'll just says we
want to change the file extension and notice that mine has a chrome icon by
default because Chrome is my default browser and that's what opens up the
HTML
file yours may be different now if you if you're using Windows you may have an
issue where you don't see the dot HTML okay if you're not seeing that what you
want to do is you want to go to view options change folder and search options
all right you want to go to view and then down here you want to uncheck hide
extensions for known file types okay you want to make sure that's unchecked and
then click apply and then you're going to see the extension and it may say
something like index.HTML dot txt just make sure you get rid of the dot text
all right I'm sure most of you know that but just in case there's people that
don’t alright so what we want to do now is we want to open this with sublime
text so we can actually just right click and say open with sublime text let me
just bring it over it opened up on a different screen and that's going to open
it up you can see up in the tab it says index.
First Webpage
HTML now another thing you
could have done is you could just go to file open and you could find that on
your computer that HTML file and open starlight so now that we have that open
what I'm going to do is just type in hello world here just text no tags or
anything yet and you want to make sure you save it so you can either go to file
save or you can just hit ctrl s which is what I would suggest it's much quicker
and then it saves okay now what we want to do is open it up so let's go ahead
and let's open it up with Chrome and that’s the default . So all I have to does
double click and then that's going to open it up in the Chrome browser and you
can see
 |
It says hello world all right
so even if we put just text inhere with no HTML tags at all its still going to
show the text in the browser all right now what I'm going to do is just snap
this to the edge here and then we’re going to just going to open up sublime
text on this side and I'm going to make sublime a little bit bigger than the
browser for now just so we can see everything all the code and I just want to
talk a little bit about HTML tags so
When HTML tag is the basic building
block of any webpage different tags format the way that information and text is
displayed so element names are surrounded in angle brackets are greater than
and less than symbols and tags usually come in pairs one to start tagines an
end tag we look over here we have a start tag the end tag and then we have
content in between all right in this example here we have about us as the
content of the text and it’s surrounded in h1 tags which stands for heading 1
and I'm going to get into the specific tags later on all right here’s another
example with a paragraph tag and we just have the text this is a paragraph now
notice with the BR tag here there's no opening and close it’s just one tag this
is called a self-closing tag and these are basically tags that don't have any
content within them okay notice that the slash is actually after the element ok
so
BR slash it’s after and this is kind this is
an Homestyle so we don't really need to do this in HTML5 you can if you want
but you can just use just simply BR okay and BR is alien break tag so it's just
basically going to push it down a line and there’s no reason to have any
content like this inside of a line break so that's why it’s considered a self-closing
tealight now there's a very specific structure to an
HTML document so this Isa
quick diagram I just want to look at you’ll see that we have everything is
surrounded in HTML tags we have the start and ending tag inside that we have
head area and we have a body area now the head has nothing to do with the
output that's in the browser the head has things like the page title it has
things like links to CSS files and JavaScript files that you want to use
metadata such as the description and keywords things like that the description
and keywords are actually used by search engines like Google so that it knows
some more information about what's actually on the webpage alright and then in
the body we have the actual mark-up that's going to display in the browser so
headings text images things like that now this is an example of a very simple
web page notice that we have,
HTML Tags
The HTML tags the head the
body we also have this thing at the top this Is a doctype and it's not technically an HTML tag
it's just a declaration and it should always be the first thing on the web page
and what this does is it tells the browser what type of HTML this is actually
written in now this is the standard doctype for HTML5 ok let's take look at
some of the other ones so as Isai this is HTML5 if you were using HTML 4.0 . It
would have to be a doctype like this and you start getting into different types
whether it's strict or transitional and it can get very complicated same thing
with XHTML I'm not going to get into that because I don't want to confuse you
guys we're going to just stick withHTML5 just know that other doc types are a
lot more complicated alright guys so we’re going to get started on the
structure of our HTML document so I made this bigger so there's no doubt that
you guys can see this I'm going to get rid of the hello world here and like Isai
the first thing we want to put in here is the doctype so we want to put an
angle bracket or a less span and then an exclamation and then we just want the
word doctype usually in all caps and then HTML and then the closing bracket
okay so this is the official doctype forHTML5 after that we want to put in our
HTML tags ok that's going to wrap everything now notice in sublime when I think
when I put the angle bracket and then when as soon as I hit the backslash or so
I'm sorry a forward slash it actually gives us the ending tag automatically so
we don't have to type it out all right another thing we can do is let's say for
the head tag here we can just put the text head and click tab and it will give
us both the beginning and the end tag all right so just a helpful shortcut in
sublime and moat and most um text editors at tantalite so in addition to the
head we need the body so let's go ahead and
Body
put the body tags in alright now in
the head all I want is the title so let's go ahead and do that and we'll say HTML
can’t spell cheat sheet save that and then over here I'm going to reload and
notice there's nothing in the actual browser here because we have nothing in
the body but if you look at the tab you'll see it says HTML cheat sheet ok so
whatever we put in the title here is going to show in this tab now a lot of
times when you're building websites you're going to want to see the exact
source code that's running in the browser and for that we can do a control and
this is going to show us the exact HTML that's being parsed now what we
‘redoing here is building us just a static HTML site so it's going to look exactly
like this but when you're using languages like let's say PHP where you have
dynamic programming that's kind of generating the
0 Comments