Creating Your First HTML5 Web Page - 02

youtube

WoW this video tutorial is really good. I have learnt so much and it was easy to understand.

Good! Thanks

I'm new to Channel9 but am happy I found it.  I am using a mac, dreamweaver and Safari.  Hoping that will work just as well or close to learn the basics.  

@AbolfazlQazaqi: Could you elaborate?

@Mahmud Chowdhury: Very cool!  Best wishes!

A bit too long for me, it was getting a little tedious near the end but a good beginner tutorial none the less. Keep it up

I am so happy to be here. I am a student Graphic and Web design and this is excellent. Thanks.

Stephanie Hughes
@stphughes

I will be flying international in a few days and would like to complete this entire course whilst i am away and on the plane. Anyway i can download all modules, rather than one at a time?

Thanks,

Stephanie

I used to learn C# during the early days  and Bob Tabor's videos were very handy.

Hey Bob i think you made a mistake. You forgot to close the "headline" in the first article.

<h1>Background Every Web Developer Needs to Know<h1>

(19:24)

edit: sorry i just watched the next lesson

Thank you, Bob, for your online instruction! I intend to go through the entire series. I feel empowered already!

@Stephanie Hughes: Awesome!  Hope these help.  To answer your other question ... no, I don't believe you can download them all in one "package" (i.e., one zipped file, etc.).  Sorry!

@sqltriad: Very cool ... glad to help!

@azeem:    Thanks for the edit.  Glad you're paying attention!!!  

@Dean Bush: Nice.  Keep up the good work!

HTML 5 tutorial is really good; covered all basics with nice details.

Fantastic video! Watched and followed, finished around five mins ago and am pretty excited about seeing the next! Thanks for making!!

Alan

Hello Bob,
I watched 1st and 2nd tutorial HTML5,its awesome,i learn so much new things i'll watch html5 and js full session in upcoming days.nice to see you,it was easy to understand.I have one question that is html5 functions run properly on IE 9 or later version,what about the reaction for other browser(firefox,GoogleCrome etc...).

Thank you

@Vrushali: I think you could use just about everything we do here in any CURRENT VERSION browser vendor.  There may be a small exception or two (particularly around Forms later in this lesson ... but I honestly don't know where the prickly bits are) ... the best thing to do ... TEST in every target browser (they're free!) before you release your website publicly. Best wishes!

@Manish Chhetia: Thank you!

@alan whtifield:  Glad you're excited.  This is fun stuff!  Just take consistent baby steps and you'll be ahead of me in no time.  Good luck!

Great tutorial. Thanks for your work. 

Hello Bob,

do you know where i can find the file "lesson2.zip"?
I can't find it on the channel9 website :-(

Thank you for these great videos..

Best wishes

@Alex Weishaeupl: Under the video description paragraph at the top of this page you'll see the text: "Download the source code for Creating Your First HTML5 Web Page".  Hope that helps!

I hope to see a similar series for Windows 8 C# programming one day, as I've seen from your other series. They have always been so clear, and helpful.

Everywhere else I try, I get lost in 12 seconds. I'm been nothing but please at the results I have from here!

Bob, Thanks for creating this series. I have been looking for a well crafted tutorial on HTML/CSS and Javascript for my daughter and this and your Javascript series look to be perfect. Thanks again.

@Ryan White: Thank you for the vote of confidence!  Glad my style works for you.  Best wishes!

@Ezward: Good luck to you and her both!

Hi, Bob!

I'm a student with a reasonably strong foundation in traditional development (C++, Objective-C for iOS, C#, and JavaScript) as well as graphic design, but I would like to branch out into creating websites and learning web markup, which I have very little experience with. Would this series be a good fit? Thanks again for all of your efforts.

Bob, I love your tutorials, You are doing a great thing by teaching this.

I just have a question about the differences in video playback. I want to know why if I pause the video, it doesn't start up again if I move back a little.  I have noticed this on several videos on channel 9, and I wonder if this is a limitation of html5 or Silverlight maybe.?

Sometimes it works but most of the time if you move around in the video you will have to start over again to get back to where you were.  I have learned that if I pause the video, I may not be able to get it going again.

edit.. sorry, I wasnt using Internet Explorer, It works in IE.  it was not resuming when i had the format set to auto - now I have opened it in html5 in IE and I can pause and move around.

Mistake:

<h1>How Web Browsers Parse HTML</li>

00:28:28

Hey! Bob

I am a newbie in channel 9 but i found your videoes are clear and very elborated in nature.I am really impressed with your active learner concept.

Thank You

Can you tell me how can i put a logo in our title and no internet explore logo?

Very sorry! Before I publish the comment, I hadn't watched whole movies. Great video!

@scottandrus: I tried to incorporate the latest thinking in HTML5 and CSS3 in this series.  In some ways, HTML5 is a departure (or, perhaps, it embraces the original intent) of emphasizing semantics over design . . . if you watch this series, you'll hear me hammer that point home ad nauseam.  In that respect, I think it will get you thinking in the right direction.  I'll also cover new trends (responsive web design, mobile first design), modern CSS frameworks and the like before it's all over.  So, yes, I am confident that by the end of the series you'll have a solid understanding of the entire landscape of HTML5 / CSS3 development for web and Windows 8 apps.  Good luck!!!

@FutureCoder:  Cool ... make sure you give that feedback experience to Channel 9 directly ... I'm not part of Microsoft or Channel9 per se, just a "hired gun".  Use the Feedback link in the footer regarding your challenges about playback experiences ... they would want to know this.  They may not solve it over night, but I'm sure they'll address it in the next rev of the site's design.  Glad you're enjoying the series!

@rgb: No worries, mate!    It's hard to type in Notepad!

@SagarRout:  You want a favicon.  See:

http://www.w3.org/2005/10/howto-favicon

kindly tell me bob where are the file name "lesson 2"

send me the link plzzzzzz

Is NotePad++ ok to use instead of the regular notepad? Someone had suggested that program to me.

+1 on all the "Thanks" and "Great series" comments

EDIT: Just kidding. I just got to the part where you have files already laid out for us. It would be easier just to use those and the basic Notepad (for future viewers with the same question).

@UzairBadar: Download the source code for Creating Your First HTML5 Web Page

@BENss: You can use whatever you want.  That's why we used Notepad ... it's vanilla, so add your own particular flavors.  

very good！

Hello. I have seen the introduction and this is just what I need, but I am not sure if I can follow the tutorial on Mac too?

Why is my html displayed in google chrome (or in explorer too) with he code? :-(

@Drenusha: Yes, just use TextEdit (already installed) or go to the App Store and use TextWrangler ... free.

@Rafet: You may have saved it (inadvertantly) as .html.txt ... please watch that part where I talk about being careful when saving the file ... change from .txt to All Files *.* in the Save As dialog.  Hope that helps!

this is so good...

pls can any body help me with a link where i can download adobe dreamweaver full video tutorials, i will be very grateful thanks...

I will be watching all the videos

@BobTabor: I'll also cover new trends (responsive web design, mobile first design), modern CSS frameworks and the like before it's all over.

I can't wait to get to those parts! Excellent tutorials - I've had to learn web programming/design by reading books and online reference the past couple of years, but this is undoubtedly the better approach. May I suggest to young/new learners - obey every small piece of advice in these videos!

I'll dive into those C# tutorials recommended in two reader's comments above absolutely. I haven't felt like investing the time in learning it yet, but I'm confident it'll be a lot easier, if not more enjoyable this way. Where can they be found?

I only regret these weren't available earlier. I can see most websites poorly optimized/designed, so I intend to become a better website developer. This is the best start possible. For free!

Good Stuff Bob Taybor! Your tutorials were so helpful.
I followed your Microsoft Visual C# series, and today im a junior programmer.

The best lesson I've ever seen and very good series!
Great thanks from Russia))

A typo in the text file Before.txt, in "One Final Note About Our Overview" Section :

"fie paragraphs" . Ithink it was meant to be "five paragraphs"

Hello, Bob!
How is better to use <br> for applying new line in your example's [figure] tag?
1)<img src="http-message.gif" alt="A diagram...">
<br>
<figcaprion>Figure 1. The HTTP Request...</figcaprion>

2)<img src="http-message.gif" alt="A diagram...">
<figcaprion><br>Figure 1. The HTTP Request...</figcaprion>

Phew!
I took the C# course before this. I remember my dad trying to get into learning html when I was younger. I don't remember it being this labor-intensive though! (although this was back when windows 98 was "the latest and greatest")
Is there an IDE for html?

Hi,Bob Taybor i have seen your all videos, all were very good and very helpful for every designer and developer.

And i'would like to say thanks to Channel 9 who give us a good plate farm to learn..:-)

This is great.  Thank you very much for taking the time!  I am planning on taking the 70-480, and this series is perfect.

dude .... get to the point. zip it along. understand you are on a video. if someone needs to stop or replay, they can. but can't jedi-mind trick you into speeding it up. took 15 minutes to find out you're doing a beginner's lesson. and the only thing even your beginners got to learn in that timeframe was that a tag has brackets!

@eebrinker: My friend, you may have missed the parts of title that intimated the intent of the series ... "Fundamentals", "Absolute Beginner", "Creating Your FIRST HTML5 Web Page" ... sorry you were misled.  I tried to explain in the first video of this series that this was intended for beginners, that there would be better ways for experienced developer to spend their time.

@Yabood: @Himanshu Banswal: @SergeyMohamedbitooleanfungale: Glad the videos were helpful!

@Tyler: re: IDE ... PLENTY.  Search for: Web Matrix or Visual Studio Express 2012 for Web.  There are lots of non-Microsoft ones available, too.

@Evgeniy: Remember the semantic intent of the <br> ... if you're using it because the content (like a mainling address) benefits from the custom of putting line breaks in it, then a <br> is appropriate.  It's probably less appropriate for using it to STYLE your pages.  However, no one is going to fault you (ok, at least, I won't fault you) for doing this so that your page looks right.  But I would encourage you to use CSS for styling.

I really need this series for my partners

Thank you Sir for making these videos! I guess im and old Guy taking up coding at 37 but totally love making web pages from scratch. I've been working in Wordpress for a couple of years using all ready made themes so this is new ground :). Parallel to this I'm teaching myself the CMS umbraco, maybe you use it?

Thanks!
Dave
Sweden

@Dave: Never too late as far as I'm concerned.    I'm familiar with that product only by name, but have never used it.  Good luck!

Bob,what is the difference between the <br> and <p> tags?

Hey,
I find the tutorials really very useful. And i get the idea its no biggie at all, and for once i am liking programming . So, thanx for that.
I want to ask that the place where the image is inserted, it doesn't open up in my internet explorer. Instead, everytime its giving the alternate message with a cross on the picture. I dont know how? Tried different images too, but still it won't go away. ? It's getting me confused.

@Ayesha: Hi Ayesha, the problem is easy to correct.  The web browser cannot find the image in the location you specified.  Perhaps the file name is incorrect, or the folder name or location is incorrect.  I believe I cover the topics of specifying "relative paths" for the "src" attribute of the <img /> element ... make sure you understand the topics of "relative paths", even seek out a good HTML reference / cheat cheat (use Bing.com).  Hope that helps!

Thank you bob. Thanx a lot.

Awesome vids!
You are great, bob!

Hi bob, great video.

I need to know why the Font Size for h1 is smaller than h2 ??

<h1>Background Every Web Developer Needs to Know</h1>

<h2>Introduction</h2>

@josh: Hi josh, it's been a while since I recorded this so I can remember specifically what's going on, but it's either:

(1) A result of a CSS style specifically on the h1 and/or h2 elements

(2) A result of a CSS style that encloses, and therefore impacts the h1 and/or h2

(3) A style specifically on your browser.

If you could point me to an exact time marker in the video, I could get closer to the right answer.  Thanks ... Hope that helps.  AND I would say just hang in there ... all should be explained before the end of the series.  

Thank you for this great video! can't wait to the next one! Good work, well done 

Thanks for the replied.

Its at 24:01 of the video, notice that the header for:
"Background Every Web Developer Needs to Know" ---- <h1>
"Introduction" ---- <h2>

I thought h1 font size should be larger than h2.
Is this will be explained later?

Good videos Bob .. random question: what is the fancy looking black gadget behind you that flickers with the dots? (binary clock of some sort?)

@josh: Yes, I'm pretty sure I'll explain it, or at the very least, how to take control of the size yourself with CSS3.

@Adrian Gurnett: Yes, it is a binary clock.  Here's a challenge ... Can you figure out what time I started recording the video?  

Can't make these play with Windows 8 and the latest version of Chrome. Gets the first few seconds and then stops. Have selected HTML5 as format

@Chris Hugo: That's probably great feedback for the Channel9 team to hear.  Unfortunately, they probably don't monitor these comments as closely as I do -- I can only help with technical / HTML5 / CSS3 challenges you face while working through the examples.

However, you may want to try right-clicking on the MP4 (or other version) of the file, selecting Save As ... from the context menu, and saving to your desktop or desired folder, then watching from there.  They will be HD 1280x720, crystal clear.

That's what I did.  Thanks!  Great video.  It's very easy to understand.  Can't wait to get through the rest of them.

God ever bless you Bob for this new Year.

Thanks a lot cause your lessons have made me a way to this technologies

Hi.............

First time I understand the basics of HTML5.I also watch the HTML5 basics from other tutorials (like lynda.com etc).But from this tutorial I understand correctly.I like to THANKS Sir BOB TABOR on this fantastic and great training.

Thanks once again.........

@Mbonga: @Fawaz: Glad the videos help.  Have a great 2013!

I will hazard a guess @ 14:16:22 :)

hi...................

Hai BOB i know little bit about html5..But i dont how to use...From this tutorial I understand correctly BOB..

Hi Bob and great video. I am understanding quite well the formation of a document but for some reason my images did not display. I have the latest versions of IE and Chrome but for some reason they wouldn't display even though my coding is the same as yours (from what I can see) Any suggestions on what the problem is?

@zbutler: Let's start here ... Can you download the code associated with this video and verify that it DOES work on your computer?  If you tell me "Yes, it does", then there must be *something* different about your HTML/CSS and my HTML/CSS ... we would just have to comb through each line of code and look closely to find the difference.  I suspect that your images are not displaying because of the path in the src attribute of the img element ... it's not pointing to the correct file name ... make sure the file extension is correct ... that always gets me!

Thanks Bob. This is an excellent html course for beginners. Even though I have taken other html classes, I intent to complete your html, java script, and c# classes, so I get a better understanding of those languages. Thanks again, and Keep up the good work.

Thanks. Very helpful for beginners …

Easy to understand tutorials. I hope there will be more tutorials like this in different topics. Thanks a lot.

Are you the greatest person who ever lived?  Thank you very much for tutorials! I am total beginner in this! Because of you, I enjoy working in HTML5! You are good man! I hope one day I will learn that much so you can be proud of your student... Best wishes from Serbia!

@Pincho: @Mahadev: @Romel Fausto: @nCo: Thank you, all.

hi bob, just like to say thanks for the videos. i followed the video carefully. and yet when i run the code, the bottom nav section wont appear as hyper links. i downloaded the lesson 3 code and that runs with it as links and flipping between the two i cant see any difference at all. any idea why this could be?

thanks

@daniel: Honestly, you're probably missing something small.  If you send me the files I'll take a quick look and see if anything pops out at me.  bob at learn visual studio dot net

Thank you for the tip on downloading TextWrangler! What's the difference with Coda, for example? I used to write basic HTML like ten years ago, I'm excited I can write it again! Greetings from Mexico ;)

@Aquawinds: I own Coda 2 as well ... it's nice, and when I'm using a mac, it's my main editor.  You get some utilities like managing entire websites as projects (instead of just loose files), you can publish from Coda 2 via FTP, you get syntax highlighting, snippets, preview and probably other features I don't use.  

Hi Bob,

I am working as a UI developer... I have very good command on Html 4.0 and css 2.0.. your video tutorial is awesome.. i like it very much.your HTML5 and css3 tutorial start from baby step it's very good for beginer. Can you provide me link form learning HTML5 and CSS3.. which is very helpfull for me.

Just adding another thanks and well done. The speed of your instruction is spot on. Moves right along, so I do not get bored, and yet I need to stop once and while and rewind. I look forward to the rest of the series.

cheers

I relly like these tutorials, I can't believe they are free ! ( they are free aren't they ?)
I had no idea you could use notebook like this . I was up early this morning and right on the compter at 5:30am doing the css tut adding the font change to ariel and helvettical sans-serif but for two hours I could not for my life get the notepad to change or change the page color or anything ... I put the css folder in with the work file in the 03 folder ..saved it over and over with no success ... anybody know what Im doing wrong?

@Amit Gupta: I'm not sure from your question what you want.  Can you be more specific?

@bob: Thanks!  Glad you're enjoying them!

@Oakley: Hi, can you post some of the code?  It's going to be one of two things:  (1) syntax error in your CSS code, or (2) how you reference the CSS file from your HTML file ... file name may be wrong, folder name may be wrong or have an extra / in there, etc.

Hi Bob.

Thanks for a great intro to HTML5. I've just finished following your first tutorial and found it great for beginners! I have only had a little experience with HTML from editing some code in my wordpress theme (I made a lot of mistakes along the way but eventually worked it out). Your helping me make more sense of why it's written the way it is. This will be a great help to me when I learn how to add my own artwork to the design of my site.
Cheers,
Olivia
(Australia)

Great Work Bob. I have been working in the blind for the past couple of months on this. Glad I found Ch9, through Chris Pound. I followed what you did. I used notepad ++. I checked my result and got everything underlined except for whatever comes before your meta command. Any suggestions?

Ok. I got it. I had mistyped some tags. Looking great.

SOS i need help anyone. when i moved the navagation stuff at the top of the page the bulletin points stayed right next to the heading of the page and did not move with the navagation stuff to the right.what happened? can anyone help me!SOS

never mind

@Olivia Torma: Great!  Hope you enjoy the rest of the series!

@Keanu: Cool ... glad you figured it out!

@meza of war: Care to share?  Was it due to mistyping?  Let me know if I can help.

Thanks Bob! Finding your videos made my day! Cant wait to see them all!

Hi Bob
In the xhtml days, the <br> tag was always treated as evil, and that they don't have semantic meaning, and that the only time they are appropriate are in poetry or someones mailing address.

Can you clear up when and when you shouldn't use the <br> tag?

thanks!

@Astro: Take a look at the spec:

http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-br-element

It is a "line break", and they give semantic examples of what to do and NOT to do.

Ultimately, you should be using CSS when you can to style things, so avoid using the <br> where a paragraph should go -- even if you don't want a full paragraph break ... again, use CSS for spacing in those cases.  However, some content (like addresses, poetry, etc.) need a line break because there's meaning in the break ... convention, or what have you.

Hope that helps?

Hey Bob great work easy to learn
can you make make videos on JavaScript
thanks a lot

@rana saddam hussain: Since you asked so nicely, I created these:

http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

I just finished this video and I think it's awesome. It's kinda long time ago since I used html last time so it's great to have some easy "course" to start learning it again! I really hope the next videos will be great too :)

Firstly,Major Kudos to you Mr Bob Tabor. Really :)

As a new student in the IT course,im honestly terrified about the stuff i'm gonna study really. But just with the first and second Video. I'm kinda eased up and motivated to get down with the basics :)

Not only will this help me in my module but your tutorial in C# and Java fundamental will help me throughout this year in school and might give me the starting edge.

Major appreciation!

@Gernot: Thanks and hope the rest of the videos continue to benefit you.

@NewStudent: Good luck in your courses! 

why cant i access the source code? i downloaded everything but all files in folders look like the next folder. there aren't any script files or minus-8 or data10.json files, just to name a few, like what i see on your screen.

i think i figured it out...if i have more trouble, i will let you know. thank you for this series

Thank you, Bob!

theks'

شكرا مايكروسوفت  لكن هل بالامكان توفير برامج تعليمية بالعربية

Hi, Bob, I am in love with all your lessons. I am coming back to remember how to write HTML and I thank you very much! There is not better help than this. Thanks a lot!!

@Ebony:Very nice, thanks for watching!