Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Bookmark and Share
Lecture Comments (85)

1 answer

Last reply by: Vibha Pandurangi
Sat Sep 5, 2015 7:59 PM

Post by Vibha Pandurangi on September 5, 2015

hi Professor Strine, for some reason, I cant seem to see my image correctly when I insert all the specified code up to where I am. Here is my code:

<html>

<head>
<title> ProPavGaming's Webpage - Awesome Swag Sauce
</title>
</head>

<body>
<h1> This is my first webpage... So excited! </h1>

<img src= "youtube_logo">

</body>

</html>

Whenever I open the page on Microsoft Edge or on Google Chrome, it appears as a small picture icon, not the picture itself.

1 answer

Last reply by: Professor Strine
Sun Apr 26, 2015 9:18 PM

Post by ahmed manusla on April 25, 2015

hi will i be able to program something like youtube by the end of the course also what programming did youtube use to make their website

3 answers

Last reply by: Professor Strine
Thu Feb 12, 2015 8:31 PM

Post by David Llewellyn on February 11, 2015

I am having trouble getting the links to the web to work.
I am using Komodo Edit 7.1 and the HTML is as per the lecture
<li><a href="http//www.w3.org">The W3C</a>
but when i try to preview the page and click on the link, both Komodo Edit and the browsers Chrome and IE all try to look for a file on my pc file:///C:/Users/David/http//www.w3.org rather than on the web.  Any thoughts on what I'm doing wrong?

1 answer

Last reply by: Professor Strine
Wed Feb 11, 2015 2:40 PM

Post by candis bellamy on September 30, 2014

My picture won't display. I typed the code correctly and its pointing to the right file. Instead it shows the little picture icon. What could be the problem?

3 answers

Last reply by: Megan Li
Fri Oct 28, 2016 1:12 PM

Post by Emma Brun on September 20, 2014

i found a diffrent program that works but a had a question about how to get my carriage returns to show up in my web page. i had made a cat out of text characters and the returnd dont show up, here is a picture of my cat;
                      -                                    -
                    -  -                                  -  -
                   -    -                                -    -
                  -      -                              -      -
                 -        - _____-------------_________-        -
                -                                                -
                -                                                -
                -                                                -
                -              -                   -             -
                -           -     -             -     -          -
                -         -         -         -         -        -
               -                                                  -
              -                          -                         -
             -----                     - - -                    -----
               -                         -                         -
              - -                 -    -    -    -                - -
                 -                   -         -                 -
                  -                                             -
                   -                                           -
                    ---                                    ---
                   -   ...                              --- -
                   -      ---                        ---    -
                   -                                        -    
                  -                                          -
                 -                                            -
      -         -                                              -
     - -        -                                              -
    -   -       -                                              -
    -   -       -                                              -
    -   -       -            -                     -           -
    -   -       -            -                     -           -
    -   -       -            -                     -           -
    -   -       -            -                     -           -              

1 answer

Last reply by: Professor Strine
Wed Sep 24, 2014 4:12 PM

Post by Emma Brun on September 19, 2014

im having alot more trouble now, on the website of it, it shows the exact same thing as the HTML box thing. it says
<html>
<head><title>Hello World</title></head>
This is my first website that is made with HTML!I am having some trouble though.
</html>   just like in TextEdit.

1 answer

Last reply by: Professor Strine
Wed Sep 24, 2014 4:13 PM

Post by Emma Brun on September 19, 2014

What text editor are you using? Mine -TextEdit- dose not have the numbers.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:01 PM

Post by Joseph Nguyen on September 4, 2014

just completed your first lesson. i enjoyed it, but i found the following mistakes:

your links are dead. you forgot to include http// on the last 3 items on the list.

<li><a href="http://w3.org">The W3C</a>
<li><a href="http://alistapart.com">A List Apart</a>
<li><a href="http://w3school.com">W3Schools</a>
<li><a href="http://educator.com">Educator</a>

copywrighted is misspelled.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:07 PM

Post by DASOL KWON on March 25, 2014

Hi,
I don't know how to bring my file to the chrome, not clicking the direct file on the desktop.  I am using window 8 now.

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:08 PM

Post by moha hashi on March 20, 2014

Hi I was going to do ctrl+U, then open it blank page but rejected to write any thing. it shows like:-
<html></html>
not allow it any moves.
thanx prof.

2 answers

Last reply by: moha hashi
Thu Mar 20, 2014 12:19 PM

Post by Douglas Williams on January 15, 2014

I am sorry I have trouble understanding You in this video, at about 15:50 when your talking about hiding the email. What do You say at 15:51 Java script to hide the email link, I can not understand what you say, It sounds like you say "Ovuskater?" I just can not understand what You say at that point. I can not understand the term You said, thanks -Doug

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 8:15 PM

Post by Douglas Williams on January 15, 2014

How come when I go to add links they do not work unless I put this syntax in? for example <a href="http://www.google.com/" target="_blank">Google</a> then http://www.google.com/ opens in a new tab. Is it because the page is not uploaded onto a host server yet?

4 answers

Last reply by: Douglas Williams
Tue Jan 21, 2014 11:23 AM

Post by Douglas Williams on January 15, 2014

I am struck on adding the image :(
I have the image saved in the same file, and here is the HTML code I used.
<img src="Pic.jpeg"> the Pic is called pic everything seems to be right? I am just following along and it is not working?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:43 PM

Post by David Martinuk on January 2, 2014

Where are you going in the browser to open the web page I created. If you don't remember WHERE on your computer you created the file, well then next time write yourself a note so you don't forget!

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 11:14 PM

Post by David Martinuk on January 2, 2014

Where are you going in the web browser to open your saved web page

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:04 AM

Post by Steven Clinton on July 13, 2013

hey i started this course on a windows computer and everything went great, but now i am using a mac and am having some problems. I have done all the same steps on my mac but when i try to load my website everything is not formatted but looks excatly the same as it does in my text editor. Any suggestions? thanks

0 answers

Post by Javon Roberts on July 6, 2013

nevermind sorry I figured it out I was inputting the wrong text it didn't seem clear until you did it again. thanks

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:55 PM

Post by Javon Roberts on July 6, 2013

hey can you please help me on how to make the text that I enter become a link it doesn't seem to be working for me?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:23 AM

Post by Steven Clinton on July 1, 2013

What program (notepad, textedit, etc.) do you use to get the highlighted and differently colored items?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:22 AM

Post by sushma penmetsa on May 27, 2013

Mr. Brenton,

My macbook pro wont let me save to .html. It said i can only save to .rtf. Why wont it let me save and how?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:57 PM

Post by binti farah on May 9, 2013

could you please recommend me a book which is related this topic

1 answer

Last reply by: Professor Strine
Fri May 3, 2013 1:40 PM

Post by Harry Hayes on May 3, 2013

Professor Strine,

Thanks for taking the time to prepare these (very good) presentations. I too have been working on HTML on my own. Self taught HTML is not a particularly easy undertaking. Fun and exciting when I see the results on the screen, but it can be very exasperating without the proper training and direction.

I have learned enough on my own to get myself into positions that I do not know how to get myself back out, so I decided to stop fighting against those elements - that I just did not know - and found Educator.com (completely by accident...but I believe that all things are meant for a reason and not by chance).

I am writing this to you to thank you. If I would have had quality professors, as you are, when I was in college I would have enjoyed it much more. I am really looking forward to taking these courses and then moving on to CSS and JAVASCRIPT.

I have been in the industrial engineering field most of my adult life. Beginning as a Mechanical Draftsman working with 2D Autodesk AutoCAD and most recently five years working as a Mechanical Engineer working with 3D Solid Edge and also 2D Autodesk AutoCAD for design layouts for customers.

I became very interested in Web design as our IT Specialist is one of my best friends. He did not have the time to teach me so I began learning myself. Now I would like to enhance those skills and become a full time Web designer (yes, I left the engineering field and am starting a new a career)...my reason for registering with Educator.com

By the way, as you will see from my registration, my first name is Harry, (after my grandfather), however, my family elected to call me "Matt" which is short for Matthew...my middle name. I wanted to clear up any confusion.

Have a good weekend!

Look forward to all of the courses that you teach and learning to become proficient with HTML, CSS, JAVASCRIPT and WORDPRESS.

Sincerely,

Matt Hayes

Sincerely,

Matt Hayes

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:21 AM

Post by sushma penmetsa on April 22, 2013

Mr. Brenton Strine,
Is there a possible way to download the html programmer that you have, which highlights the tags and does other neat stuff.
Thank You.

0 answers

Post by Michael Trow on February 7, 2013

only the first website on the list is loading up

0 answers

Post by Michael Trow on February 7, 2013

<img src="me.png"> the photo is not uploading I am just getting a little white box on the website. What can I do?

0 answers

Post by kent chau on February 3, 2013

Hi, I am trying to read the answer for question posted by others. Y does it need me to log in again and again even I already logged in?

0 answers

Post by Rishabh Kasarla on January 12, 2013

Hi! this lecture was awesome, I already built a website!!

0 answers

Post by Ricardo Autida on November 9, 2012

Hi I am using Macbook Pro and my browser is Safari I only used w3schools.com website to type codes not on my windows 7 because it is really small but my problem is the video keep repeating so I switch to Mozilla Firefox any help will do just answer me plesae thanks because the video keep repeating and it stop

0 answers

Post by paul shrubb on October 18, 2012

How can i skip forward to where i left off. The progress bar wont let me

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:17 AM

Post by Suresh Manchala on September 1, 2012

I have zero knowledge about coding. What is the pre-requisite to learn HTML ?

1 answer

Last reply by: Professor Strine
Sun Jul 14, 2013 12:16 AM

Post by Callistus Elue on April 17, 2012

Having followed you step by step developing my web page by working within my texteditor, how do I now look it all up as my web page and thus my first website?

0 answers

Post by isaac N harper jr on March 5, 2012

This lesson make sense after taking the HTML lessons. The lectures like this one where you explain the code with demos as you go along work best fro me.Thank you very much!

3 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:13 AM

Post by Khloe Zelenko on January 14, 2012

Hello. I am stuck on the photo too. I did start a file titled HTML and I saved my Notepad document and my photo in the same folder. I just get a box with a red X in it where my photo should be. The picture is saved as a jpg. Any thoughts on how to fix this problem?

1 answer

Last reply by: Brenton Strine
Fri Aug 19, 2011 6:02 PM

Post by Silas Stanley on August 18, 2011

Mr.Brenton,
How do I upload the picture to my website the website keeps giving me this little icon and when i right click and hit show picture it doesn't show?
Please help.

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:11 AM

Post by Suzanne McCord on March 5, 2011

My operating system is Window 7. What is my Text Editor called? I can't bring one up to even get started.

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:09 AM

Post by Suzanne McCord on March 5, 2011

I don't know what you mean by "Hit option command u in your browser".
Is this a website or keys on the keyboard. Please be more literal.
What do you mean by "hit"?

1 answer

Last reply by: samyah refadah
Sat Apr 13, 2013 8:40 PM

Post by Alena Matsiukhina on February 7, 2011

When I do it in TextEdit, the tags do not highlight in blue. Why? What wrong? :( please help.

2 answers

Last reply by: Professor Strine
Sun Jul 14, 2013 12:07 AM

Post by Carolina DaSilva on January 10, 2011

when I save it under .html , open it, and click option/command/u I see more than just the text I have on the page. It actually has html...

why is that happening?

2 answers

Last reply by: Brenton Strine
Sat Apr 23, 2011 2:28 PM

Post by Vasilios Sahinidis on January 7, 2011

How do I get the numbers on the left? Thanks.

Your First Web Page

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • World Wide Web 0:23
    • Introduction to HTML
    • Looking at Source Code
  • HTML5 1:58
    • HTML5 Specification
  • Creating a Web Page 4:10
    • What You Will Need to Create a Web Page
    • Example: Basic Web Page
  • Example: Creating a Web Page 5:46
    • HTML Elements
    • Adding a Title
    • Main Body
    • First Level Heading
    • Adding an Image
    • Paragraph
    • Adding a List and URLs
    • Footer
    • CSS: Styling

Transcription: Your First Web Page

Hello: Welcome to the first lesson in Educator.com's HTML course!0000

In this lesson, we are going to just get a very quick introduction to how to create your very first web page.0005

From having zero knowledge or experience, after this lesson, you should be able to have a web page0012

that is just like any other web page on the Internet, that you can view in a browser.0018

Before we start looking at that, I just want to point out a little bit about what HTML is.0026

It is basically the backbone of the Internet; every single website on the Internet uses HTML.0033

And that counts for the oldest web page that has ever been created, which is this one.0041

(it is one of the simplest, as well) to some of the newer ones, like YouTube.0048

And it is actually very easy to get into the source and look at the HTML.0053

In your browser, you can hit Option+Command+U, or Command+U, or Ctrl+U, depending on which browser you are using.0059

And it will pull up the HTML source.0066

And this is the HTML source for the first web page on the Internet.0069

And it won't make sense to you right now, if you are completely new to this; but it is actually fairly simple.0074

You can see, right away, that there is a little bit of correspondence between text here and text that shows up.0080

But there is also a lot of code there that you don't understand.0086

Now, when you get to something like YouTube, and you view the source,0090

there is going to be a lot more that you are not understanding, because there is a lot more going on.0093

For example, this is all scripting--JavaScript--and then you get down...there are a lot of divs, and a lot of things are styled with CSS.0099

And you can see: it is also much longer code.0106

But essentially, it is the same thing: it is just HTML, and it is what makes the Web work.0108

You can also, for example, look at...this is the HTML5 specification.0117

And you can see that it has styling and content mixed all together, and you can view it; and this is our normal experience with web pages.0124

But you can separate out just the content, which is what I have done here.0135

This is that same page; but this is only the content viewed, and it is just a lot of text.0139

And in essence, this is the most important part of any web page.0146

And it is what the whole Internet is about--sending content.0150

It is not just style and fluff and a lot of cool programming stuff; what we really care about is the content.0154

But when you just have this marked up like this, with no HTML, it is kind of hard to make sense of what is going on, compared to this.0160

What HTML does is tells the computer what the meanings of all these different contents are.0172

It is called semantics: semantic means meaning, and it will semantically0179

mark up the different parts of your content and tell to the computer what it is.0182

And based on that, the computer will give some default styling.0188

But the actual purpose of HTML is not the styling, but rather the semantics.0191

This is that same page content, marked up with HTML; I will show you the source, really quickly.0196

And then, you can see: there are actual HTML tags--there is a lot of it (scrolling all the way down to the bottom).0207

And when the browser encounters these semantic tags...for example, this is an h1; it now knows that this is the first-level heading, and it will make it bigger.0214

Although you can see that when there is no styling applied (this is only the HTML), it is fairly basic, and that is a way to get things started;0224

what you will learn later on is to take CSS and style it to look the way you want it to, and to control things like that.0235

And then, you will also want to learn JavaScript at some point, to pick up on some of the more advanced things that you can do.0243

What you need to create a web page is a computer and a text editor.0252

Any computer has these; this is my text editor here.0260

If you are on Windows, you can pull open Notepad; you can pull up TextEdit on a Mac.0264

This happens to be a little bit more fancy one; and all you have to do is save it as a .htm file.0270

Here is a brand-new file: say I want to write something on the Internet.0281

I click Save, and I am going to call it Hello; and the most important thing is that you give it this .html extension.0295

And of course, you need to be aware of where you are saving it.0306

And then, go over to your browser and find your file and open it.0311

And now, you have just created your first web page.0320

This is as valid of a web page as any other website on the Internet, even though all you have done, really, is some text.0324

If you hit Ctrl+U, this is the source; and this is the text that you edited here.0330

And it is the same as the source, clearly, because you haven't put any HTML in yet.0338

And that is all you really need.0344

So, if you are starting to make a website, you probably want to start with some content.0347

Here, I have prepared the content for a basic web page that I want to create.0353

And I recommend that, as you go through this course, you do the same thing:0359

you create a basic website for yourself, and as you take each lesson, you can add the different parts0362

that you are learning, and add pages and links to them, and use it as a reference for yourself for later on0369

(and also, just a way to show off what you are learning!)0376

So, this is an entire website here; and right now it is just a page, but it is going to be a website, because it includes plans for links to various places.0379

And I am going to show you how to mark this up in HTML.0391

The first thing that is important in an HTML page is the html element.0393

These little tags indicate that this is an element.0401

And then, at the end of my content, I am going to put the corresponding closing element.0406

This little slash indicates that this ends the element that began up here.0413

This is start HTML; end HTML (or stop HTML).0420

Now, the next thing I want to do is add a title here.0429

And the way to do that is: a title, you are probably familiar with, shows up up here, in the top of the page--not actually part of the main body.0434

And the way that you mark this up is using the head element, and then the title element.0445

I am going to move this little note I gave myself.0454

And that is going to mark this up as a head with a title.0463

Now, the main body all is going to occur here; and of course, I need to end it.0469

So, I am saving that; and I am going to tab over to the web page; and this is the content that I had prepared.0481

And as you can see, it is not formatted at all; it is not marked up.0489

The computer doesn't know what to do with it.0492

Now, I will refresh; and the title changes, although the rest of it still needs to be marked up.0494

This is going to be the first-level heading; save; refresh.0503

I think I hit Ctrl+A instead of Ctrl+S.0514

And things are starting to come together.0520

Now, say we want to include an image; I have this image that I have prepared of myself, and I want to include it next in this website right here.0523

The way to do that is with the image tag; and you give it a source, actually, to indicate where the image is.0532

Save, tab over, refresh; and here is my little image.0542

This next group right here--this group of text--is a paragraph.0549

And the HMTL semantic tag for marking this up is the <p> tag; it stands for paragraph.0554

And you may want to look in here and add some additional markup, like if I want to emphasize this word.0563

OK, save, and refresh; now this is marked up as a paragraph.0576

And this word has been emphasized with the <em> tag.0582

It has a lot of other tags that you can use.0584

Now, here I am going to have a couple of second-level headers; I am actually going to do all of them at once.0588

And I am actually just going to copy this and paste it; that is a bit quicker.0598

And now, I come over here to refresh and double-check again; you can see that it is marking them up a little bit larger; OK.0613

Now, this is going to be a list of links of things that I have mastered.0627

So, since I have obviously mastered how to create a web page, I am going to have it link to itself.0631

And the way to link a page to itself (which is kind of a silly thing to do) is to put this little hash code, which will just refresh the page.0639

But just for the purpose of demonstrating: this anchor tag has a hyper reference attribute;0648

and then you put the URL of the page (which, in this case, is itself); refresh; and this has become a link.0655

So now, if I hover over it, my cursor becomes a hand; and if I click, it refreshes and goes back to the same place it was.0662

And you will notice that this little hash has been added to the URL.0668

Now, this is a list of some things that I will master by the end of this course.0673

In fact, it is an unordered list (ul); and this is the first list item (li) and the second one, and so on.0680

These are all things that, if you take this course all the way through, you should master by the end: stop ul.0697

Now, you will notice: I actually didn't put the closing list item tags for all of these.0705

And that is because these are self-closing; this is something that HTML5 allows, and other versions of HTML; something like XHTML wouldn't.0711

I am going to save this and show you what a marked-up list looks like; there we go, and now it is a list.0721

And as you go through, you can take these, turn them into links, and add them to this here--things that you have mastered, as you master them.0733

And then lastly, this is going to be another unordered list.0745

Stop unordered list; and the list items...although they are actually going to be a list of links.0752

I am going to put the link here, and I am going to put the full URL.0764

We don't need little end thing anymore.0776

And I suggest that you keep track of websites that are very helpful as you go through this course (and just in general),0780

to reference them later; and you will always be able to find what you need quickly.0791

If you remember looking at something, and you can't find it as easily, it can be frustrating.0798

And notice that the editor that I have here automatically colors my text, depending on the syntax that I use.0813

As it recognizes that I have completed an attribute, it turns it blue.0827

And when I close off the elements, it changes the colors, as well.0833

Let's take a look, after I save and refresh; and here is my list of links.0839

OK, now this down here is actually a footer; it has some information about the copyright and how to contact me.0849

That is what the footer tag is for; and this is a strong emphasis, because I am trying to point out that this is something that needs to be looked at.0860

However, the emphasis doesn't change the meaning of this.0876

And that is part of the meaning of the strong tag.0881

All right, the last thing I will do is: I am going to mark up this email address with mailto,0885

which starts out the same as a normal tag (and I am going to copy this), but you begin it with mailto, and then a little colon.0900

And this is set up so that, when browsers see this, they will automatically know that it is an email address.0911

And they will think about opening an email program when you click on it, depending on how you have it set up,0918

although this is probably a bad idea to put on the general Internet, because, because it is semantically defined0924

that this is an email address, now computers know that this is an email address--which is the point of HTML--it is semantics--0932

but it can be bad for email addresses, because some computer programs are web crawlers0939

that are spam-bots, trying to collect information so that they can send out spam.0944

So, you need to use an obfuscator to make sure that this is not visible.0949

But that is more of a JavaScript sort of a functionality.0954

All right, so this is our very first website.0959

And it seems like there might be something missing; it is just basic HTML at this point.0963

You can go in later, and you can go into the CSS course if you get bored and don't feel like waiting, and learn how to use CSS right away.0969

But I have prepared a little bit of CSS--just really basic CSS; I am going to put it up in the header here.0979

This is actually head, not to be confused with the header element.0988

And this CSS will give a couple of styling rules for the body element, and some of the other things,0994

so that when I refresh, it is starting to look more like a real website.1003

This is the first website, set up like this--very nice-looking.1010

Thanks for watching Educator.com.1020