HTML Writing: CoffeeCup for Beginners

This short tutorial is for beginners who are using HTML writing/editing with the CoffeeCup web editor program. I go over a few important commands of HTML writing/editing and some neat elements of the program.

---

Closed Caption:

hello everybody this tutorial is for
beginners who are using HTML editing and
writing i'll show some important
elements and commands that are helpful
and how to do so in this program that
i'm using which is called the coffee cup
web editor now we'll start looking into
some of the specific program elements
first you want to open the web editor
application on your computer so as you
can see once you open the program a
pop-up menu like this will show some
different options for starting a new
project you can pick from all of the
options like creating an empty project
creating a project from theme which
gives you a premade template a new
project from importing files and folders
that you have on your computer already
and a sample project will start with
just an empty project so what you see on
the screen looks pretty simple in this
program which is nice for beginners
because it's not very overwhelming the
left menu area and this gray space shows
all the files that are open and the
search bar allows you to search for all
the files if you have a lot open this
center area in this big white space
shows what you're working on presently
the left column of the whitespace shows
HTML text that you can write and the
right column shows the CSS which is
which stands for cascading style sheet
that you can use if you link a
stylesheet to the file or create one
yourself
this program does many things
automatically like the CSS stuff but i
found that as a beginner it's a little
easier to toggle the sliding menu on the
bottom here to the left so it just shows
HTML tasks text because it's a little
less to keep track of so I'll do that
right now the top center area here shows
the output of what you insert into the
HTML or css areas in this program you
can also change preferences to make it a
little more usable for you i'll show you
the ones that are beginner might find
most helpful so you're going to want to
go to the web editor menu and hit
preferences so now this other pop-up
menu comes up
and the general area section lets you
choose preferences for basic aspects of
the program and how you would see the
program on your computer screen the
editor pro or editor preference right
here shows where various display
features can be changed as well as some
auto-completion menu check boxes that
you can turn on and off which is right
here and like i said before this program
does many things automatically and as a
beginner someone who's a little more
used to writing HTML on their own
without a program like to prefer to
uncheck some of these boxes after
experimenting with this program
specifically more i decided to uncheck
this close HTML and XML tags
automatically button because i felt a
little more control with doing it myself
while writing HTML text you can also
change the typefaces and sizes of the
editing areas in this preference section
down here in the color section all of
the HTML or whatever writing language
you're using commands
these are in different colors kind of a
perk of the program to make writing a
little easier and finding your written
information while you're writing so
close that now and look at another neat
element of the program so now click view
and then tag snippets and helpers
so here you see a really long list of
some common commands for editing
languages while writing this program
also shows drop down menus for automatic
filling of commands so for example i'm
in this HTML text area and i write this
the program will automatically show some
options for commands that you can insert
like headings or a header as you see
here so you just click on the one you
want or you finish typing yourself so
we'll pretend i'm writing a header so
that is pretty neat to be able to do so
i'll talk about now some common commands
that really deserve mentioning while
writing HTML text first of all remember
always that your HTML commands will not
work if there's a little thing like a
semicolon or even a quotation mark
that's wrong so be really careful when
you're writing
yet i'm a program like this is more
automatic as I've said before so it can
help you avoid some of those problems so
first you see this one right here in
HTML writing area this is called a line
number so as you write more and press
enter after each time the line numbers
will automatically show up much like a
number poem so if i write a couple lines
are you see it made three of them
automatically for me after I pressed
enter every time so now about more
specific HTML commands your HTML
commands are inserted with greater than
or less than brackets around them like
this
so from example writing some HD Malcolm
and I have the greater than and less
than brackets right here and then the
command finishes when you put a forward
slash in there like this this isn't
actually command but i'm just giving an
example so now you can outline your body
text or your main body will be by this
writing body in the first sign and then
writing another line and ending the text
so now anything you right between these
two lines will be in your body text you
can make some headings to in your
writing area just like in a word
document so there are a few different
sizes there are specifically six sizes
use the h1 command for writing big
larger headings and then we'll finish it
with a forward slash and use the
smallest biggest number for the smallest
size of a heading which is h6
so you can see that the headings have a
really different sized area and you can
make go through h2 h3 h4 h5 cetera so to
make your text bold you use the B
command which looks like this and then
just write the text you want in there
and then finish it with the forward
slash you can see right here the text is
bold and italicize your txt use the high
command /to and that as well you might
notice now that the line numbers that we
talked about earlier there are six here
but only three are showing up here they
don't really match with your preview
area and this is because you haven't yet
outlined a paragraph area so to outline
paragraph areas use the P command so
we'll throw one in right here let's say
that's the beginning of the paragraph
and this will be the end of the
paragraph now you can see that it's
separated this text is bold here up here
and then you can start a new one for the
italicized text for example and and that
section there you can change the
background color of what you're working
on by doing a background color command
which is a little bit more in depth but
it looks like this you just write body
style and then the background color that
you want we'll make it yellow and
automatically does that for you
so some more commands that are worth
knowing but we're not going to go
through right now are that you can make
horizontal lines in your text you can
insert a link in your text you can align
your text differently
you can change the font of the text and
you can also create some ordered list so
as you can see writing and editing HTML
as a full-time task that requires full
and complete attention to detail and
it's very different from simply writing
in a word document or Excel spreadsheet
what once you know the basic
make sure you get the hang of writing in
this language then you can continue on
to some more advanced HTML writing and
editing by buying a program that you
like and using different preferences and
tasks