Intro to HTML Tutorial

This is Mrs. Murphy here instructor here
at Weber State University and today we’re gonna teach you a little bit of
HTML. HTML stands for hypertext markup language. It’s the language that you use
to create webpages. You’ll need a browser, any browser will do. You also need a
plain text editor, that means nothing like a word processing software like
WordPad or Microsoft Word any of those things where you can format text we
don’t want that we just want plain text. If you’re using a PC, a PC has notepad
installed right on it. My favorite is notepad plus plus. I’m going to be using
brackets in this class because it’s available both for PC and for a Mac.
Mac users also have one called Text Wrangle available all of those are free
downloads and they’re available in canvas the links are available in canvas
on a file called Intro to HTML. Now once you to install your text editor you’ll
want to type in or create a new file and type in the HTML core tags this these
are them right here they’re also available in canvas.
I’m gonna go through what these are so as you’re typing them in you can
remember… oh yeah this is what she said all right so you’ll want to type in your
doctype tag this just specifies that the language is HTML specifically html5 this
is an opening HTML tag and down below we have a closing HTML tag and it a tag is
anything within these brackets and a closing tag looks exactly like the
opening tag only it has a forward slash some tags how closing tags and some do
not if you’ll notice the doctype tag doesn’t have a closing tag the HTML tag
just opens and closes your document now. There’s two parts of your HTML document
the head and the body the head is everything you don’t see on the webpage
and the body is everything you do see on the web page so in the head we’ll have
things like JavaScripts and commands and styles and stuff that you don’t
really see it’s not really part of the content of the web page but still very
important. The title is in the head and the title will appear in the title bar
at the top in there top tab of the page. You have
something to specify the encoding of the webpage in this case we want utf-8 then
we’ll talk a little bit about the body in the next tutorial so go ahead and get
that installed and get this typed in and I will meet you in the next video. Okay
so now I have brackets installed and open I’m going to do file new to create
a new document and then I’m going to get out all of those type in all of those
core element tags that we were talking about in the last video. Then you’ll
want to save your document when you save you want to make sure number one you
remember where you save it but also there’s no spaces or punctuation in the
in the file name you can use underscores if you want, but I’m lazy I mean
not lazy… efficient. I’m going to save my first webpage and I
don’t have any spaces in there and then you’ll put dot HTML. It has to have the HTML
file extension so that way the computer knows that it’s a webpage then it will
color code my tags once it’s been saved. Ok so here’s all my tags I’m going to
put a title in the in the title tag so I’ll say “My First Webpage”
I’m going to show you your first HTML tag that goes in the body and
that is an h1 tag and h1 is a header tag sized one. You can have as many h1 tags
on your page as you want it’s just tells you what size just like the headers in in Microsoft Word. Then I’m going to put on a
paragraph and a paragraph is just plain text it’s not been formatted at all and
then we’ll save this document. The paragraph is a P tag by the way and make
sure you save the document with either a CTRL + S or going “File Save”. Then when
you’re ready to view the document you can browse to where it’s located and if
you just double click on it it will open in whatever your default browser is.
Here I have there’s “My First Web Page” as my h1 tag here and my title that’s up
here then it has my paragraph. You can have as many h1 tag so let’s do a now
another size tag I’m gonna do an h2 tag and my h2 tag maybe I’ll put a little
paragraph after that so I I can have a h2 tag for a reason and CTRL + S once
again to save this. Now if you come over to your browser you’re not going to view the changes immediately. It’s not till you hit f5 or refresh until you actually view the changes. So you can see that an h2 tags a little smaller than an h1 tag. Here I’m going to
show you how to add a little bit of color to your webpage and I’ve got my
first web page that we started last time going in the body tag I’m going to say..
text. So now just that one tag is going to be stylized. Well good luck with
adding color to your webpage then I’m going to show you how to add a list to
your webpage Now lists are nice they can be either
numbered or bulleted. I’m going to start off with a bulleted list. Here I’m going
to list my favorite foods now this is just a header obviously we’ve done
headers before. Now the list… For a bulleted list is

    it stands for
    unordered list each of the list items within there are

  • tags so Li is list item
    and then within there you can put several list items until you have
    whatever type of Lists you want. I’m going to put at least three because you know what else what else is there pizza sushi tacos. Gotta have tacos
    So that is how you create a an unordered list. If I save
    this CTRL + S, I can refresh the page I can see that I have bullets. The only difference
    between an unordered list and an ordered list is this opening and closing tag if
    I change this

      tag to an
      tag then I have numbers. All right good luck adding
      lists to your webpages

Be the first to comment

Leave a Reply

Your email address will not be published.