Creating a Webpage and Adding HTML Markup  Dreamweaver 2018/2019

Creating a Webpage and Adding HTML Markup Dreamweaver 2018/2019


Creating a Webpage Dreamweaver 20-18 The Basics 1 – another tutorial in the That Web We Weave series. Greetings Webbies!
in this lesson we’re going to talk a little bit about file management and
we’re going to create a basic HTML file with a couple of internal styles that we
will upload to the remote server we can tell that we are connected to our local
root folder site web 140 because we see it at the top of the files panel I want
to create a basic folder structure I’m going to right click on the sites web
140 folder and one of the options is new folder and make sure you click new
folder and not new file new folder and I’m going to call this intro I’m going
to click away and now I can see that I have an intro
folder inside my local root folder web 140 and I can tell that because I can
see that it is indented eventually inside that intro folder I’ll have a CSS
folder and an images folder but for this lesson we’re just going to have one file
so we’re not going to add additional folders at this time but you can see how
we make a folder and begin our folder structure and how we know that it is
where it’s supposed to be inside our local root folder because we can see
that it’s indented okay now let’s create our basic HTML page
there are several ways to do everything we have some options right here on this
get started screen but that’s not what we’re going to use it this time I’m
going to click file at the top of the screen and I’m gonna click new from the
drop down menu that opens and then my new document window opens now I’m going
to click new document and my document type is HTML and the framework at this
time I’m not worried about bootstrap so I’m going to make sure none is selected
the doctype is html5 make sure that the check box at the bottom is not selected
and then I’m going to click create this is the absolutely rock bottom amount of
code that you need for basic html5 page so the first thing
that’s really important to do is to give the page a title the title is what shows
up on the tab when a visitor to our site opens a page so I’m gonna call this my
first page okay as you can see that’s inside the head that is not something
that’s going to actually be on the page remember it’s something that’s going to
be on the tab above the page all the content that we want the user to see on
the webpage will be between the body opening and the body closing tag I’m
gonna take a minute and I’m going to add a little bit of content to this page
I’ve created just a few sentences between my opening and closing body tag
and now I’m going to add some HTML elements I’m going to take advantage of
Dreamweaver to add these elements and make it easier than typing them out by
hand so I’m going to make my name a heading 1 I’ve highlighted that in the
code view I’m going to click insert and I’m gonna scroll down to heading and I’m
gonna select heading 1 and you’ll see it automatically adds the opening and
closing tag now I’m gonna click insert I’m going to wrap this with a paragraph
opening and closing tag and then finally I’m going to take the rest of my entry a
couple more sentences I believe three more sentences and I’m going to wrap
those sentences in a paragraph tag as well insert paragraph easy-peasy
now you’ll see it’s taken on a little structure all its own and of course
that’s because browsers have default styles that will give some basic style
to your page once you add HTML elements the thing about that is that different
browsers do different things so until you add your own styles you really don’t
have very much control at all there are three types of styles that we can add to
our page inline internal and external inline to be avoided internal used when
necessary external is the ideal in the next
tutorial we’ll be exploring how to add some basic internal styles using
Dreamweaver

Daniel Ostrander

Related Posts

Leave a Reply

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