Loading user information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading user information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Microsoft Virtual Academy content

This video is part of a free online course from Microsoft Virtual Academy, click here to view the full course and take advantage of many additional features such as assessments, slides, learning plans and more.

Understanding the HTML5 You Wrote - 04

25 minutes, 25 seconds


Right click “Save as…”

In Lesson 2, you worked with Bob to create a semantically correct HTML5 page. But Bob didn't spend much time explaining each individual element—its purpose, your options, etc. That process begins in this lesson as he talks about what makes HTML5 special, the purpose for things like DOCTYPE, meta tags, charset, UTF-8, html, why "semantics" is important, the head and body tags, and more.

Download the source code for Understanding the HTML5 You Wrote


Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
  • Bob, in the examples of the meta tags, your "author"-meta tag states "Bob "Tabor instead of "Bob Tabor" (see the misplacement of the double quote ?).

  • anonymousanonymous

    It would be a good idea if you are going to get so detailed especially for beginners to mention the downfalls of specifying px vs. percent on things like margin and padding. You are basically skirting around a big initial design problem by using px for those values and then going in and trying to adjust the blowouts by fixing parents.

  • @MODUL8com:  Yikes!  I still have a problem typing and talking and thinking at the same time.  Nice catch!

    @anonymous: I agree and I'm pretty sure I talk about that in the CSS portion of this series (but it's been a while and I can't remember which video specifically where I talked about it).

  • Dean BushDean Bush

    Which capture application are you using to create your tutorials?

  • @Dean Bush: After experimenting for years I have a pretty complicated setup -- I'm not sure you would want to do what I do.  I think the most popular software is Camtasia for this purpose.

  • kapilkapil

    Wow thanks, I love these videos

  • MladenMladen

    Thank you Mr.Tabor! You are actually more helpful than my college professors.

  • @kapil: @Mladen: Thank you both for the kind comment!

  • ManojManoj

    Hello Mr.Bob! Sir I must say really professional and easy tutorials.Can you tell us about a good HTML5 & CSS3 builder-tool.I have downloaded Adobe-DreamWeaver but don't know how to use it.If DW is the best one then please upload its tutorial videos.

  • sir i cant understand how the how is the pic Tag plz tell me the easy way

  • Again, as I've said in a previous comment (lesson 2), this is such extensive material and at the same time so easily assimilated that I think beginners won't find a better learning resource.

    I'm already acquainted with web technologies (I've been reading on HTML5, CSS, Javascript, SQL, PHP and design concepts for a couple of years) and .NET programming (VB has been my hobby for 10 years), so most of the content in these lessons I'm already familiar with, but they are nonetheless interesting yet, as you are pointing out best practices and hints to more advanced practical cases, which is exactly what I was looking for in order to consolidate my knowledge in this field, as I haven't had many opportunities/time to practice web coding unfortunately.

    I'm going to have to watch the rest of the lessons offline, so I'm very grateful for that option too.

    Grasping web technologies is easy, delving into them on the other hand... it can be difficult at the beginning even for me (because of the complexity/multitude of information), but this video course is making it all seem less complex and complicated, so it's exactly what I need. I hope the C# course will have the same effect and teach practical use cases which differentiate it from VB (VB was great to learn, but now I think C# is more transparently structured - for example, when it comes to forms and how they as objects are created/identified in code or how the main() function is always present).

  • David StLuceDavid StLuce

    Great vid's. I'm starting vid 4 now. Great top-level explination. Great work, just awsome!

  • Stephen SandersonStephen Sanderson

    I really really want to become a programmer, Anything you could Email me "Stephen.r.sanderson@gmail.com" From ANYONE to help me on my path. Thanks for these videos, One day I'll be a great programmer :)

  • ziovanziovan

    I love the binary clock! @BobTabor

  • MoriartyMoriarty

    Yeah, I really like that whole 'semantics' thing. I was thinking how it can be used in the future and nothing has arrived so far, But! You said that it can be useful for blind people with the use of speech synthetiser and text recognition software. So... I used in the other way round with "speech recognition software". Yeah, to my delight it's really comfortable to say "make a html template", "add meta name", "open body", "close body" and see how everything happens without using a mouse or keyboard. I think that with semantic marking in html5 it would be more easier for blind people to create an actuall website which could be very interesting. : )

    And yeah, as for using speech recognition software I will try to use it for the whole course and see how productive it is. : ) Somehow speaking aloud makes me easier to organise and understand what I'm doing with the webpage.

  • @Moriarty: I tried that experiment years ago (Dragon Dictate or Nuance or something) to *command* the computer, not just author documents.  What an exercise in frustration!  If you can pull it off, good luck to you!  I realized I think in keystrokes, not verbally.  Wink

  • Thanx BOB Nice Stuff....I realy like your videos...

  • Shashank aggarwalShashank aggarwal

    Awsome !!

  • Is that a clock in the background on the shelf? Whatever it is, it looks neat. 

  • @gprasant: yes, it's a binary clock from ThinkGeek.  Smiley

  • wayneCwayneC

    The best teachers have natural characteristics that make them great. Often its just a style of delivery. Your voice and diction and speed of talking, your mannerisms, all make it very easy to learn. You are a natural!

    As excellent as your video tutorials are, videos in general have a drawback. They present information that is often hard to find later. For example, you give tips to go to various web sites for more information. It would be a simple but very worthwhile addition to add a file to your download package that includes links that you have covered in your videos.

    Thank you so much for these videos- I'll be telling friends about this source for sure!

  • @wayneC: Thanks Wayne!  ... re: links ... agreed, part of this is a learning process ... learning how people consume the content on Channel9.  In more recent series, I've done exactly as you've suggested.  It would probably be a good idea to retroactively go back and put those links in the description area (above) as well as deep links into the video itself, which I just learned you can do here on Channel9.  Thanks for the feedback and the kind words.

  • I Really like the way you teach . I have been a fan of your series since i watched windows phone app development videos of yours. Its Great to find such a good teacher as you.I even posted some of windows phone basics on my Blog: Kgtricks

  • @KunalGanglani: Thanks Kunal!  Best wishes to you.

  • You are excellent teacher, now I'm a big fan of yours Smiley

  • DennisDennis

    how can I get a picture as wallpaper on the website?

  • @Dennis: A quick Bing search revealed:


    BTW, I wouldn't be doing my job if I didn't encourage you to really understand WHAT the CSS the author uses is actually doing.  You wouldn't want to be accused of being a "script kiddie".  Smiley 

    Good luck!

  • This is a really cool step-by-step tutorial. Thank you Bob!

  • edualcedualc

    much appreciate the videos, thanks Bob. However Helvetica has only 1 't'..
    and a bit of trivia for you .. did you know that Helvetica is the latin name for Switzerland ? which is why the mandatory 'country sticker' at the back of cars in Switzerland is CH - Confederation Helvetica

    there you go, thanks again for your great videos !

  • Hi Bob,

    I love to attend your lessons and they do push me further onwards!!

    However I do like to know what's that funny "living lighting picture" in your closet behind you above your head?

    Where can I buy such an object.

    Cheers Johan


  • @edualc: Ah, interesting.  Thanks!

    @compucol: Oh, you like my Binary Clock?   Smiley

  • shazeenshazeen

    A++++ video awesome

  • BOB Thnx, still very consructive teaching, very helpful

  • ahmedahmed

    comment crie sit web

  • Kunal (Bob) In your comment you mentioned "windows phone app development videos". Can you please let me know where those videos are?
  • @prasannap: Here's a link to the phone 7 videos ...


    Phone 8 videos baking in the oven as I write this.  Smiley

  • Manuel from Puerto RicoManuel from Puerto Rico

    Just Outstanding! I had the privilege of seeing your VB course some years ago but didn't take advantage. I am happy to say that now I can finally learn HTML and later VB from a great teacher. Your style of presentation is right on. Thanks for the continuing videos you have created to make us future programmers. Manuel

  • @Manuel from Puerto Rico: Thanks for the really nice endorsement.  Good luck to you my friend.

  • Good evening Bob, I would like to thank the video lessons are well really easy to understand and well explained, I do not have an English as fluent but I am understanding everything. Congratulations on the job, hugs!

  • Awesome videos and explanation by Bob. I really like how Bob replies to all the problems we face. Best wishes.


  • @ValdineiM: Thanks!  I appreciate the hug!  Smiley

    @cfab: Great, yeah I wanted to support people and make this a friendly spot to ask questions.  Glad you noticed.  Smiley

  • nice Tutorials.

  • shamsham

    i am really thankful for your videos. I've missed a lot of my classes almost the entire semester and thanks to you i was able to finish my assignments and project. keep up the great work bob

  • @MrElmasry: Thanks.

    @sham: Cool!  Glad they helped!

  • vickeyvickey

    I love your vids! THANK YOU for being such a GREAT teacher :-)
    Greetings from Slovakia.

  • @vickey:Thanks Vickey!

  • Nice videos sir!....and thanks for providing them for free Smiley

  • parthparth

    awesome tutorials got many thing from that.
    thanks Bob.

  • JimmyJimmy

    I learnt HTML5 and CSS3 from a book a few weeks ago and it didn't go into the CSS stuff half s much as you do. This is much better and much more informative.
    In lesson 3, we set up the img style to shunt the images over to the right and wrap the caption to the left. When I ran mine the second image appeared to the left of the first image, not below it. To check if my HTML is wrong, I ran the html from the "Lesson 3 After" folder and the same thing happened. Do you think this could be an issue with IE10? Do you know a way round it? I suppose I could try defining the style for each image separately?

  • Thank you, Bob for this captivating series. It fascinates me the same way as the tutorials about playing guitar by great guy Justin Sandercoe in the past. You are great techer and I'm going to watch the rest of serie, thanks.

    @Jimmy: It also happened with me, but I realize that it's because of different sizes of browser's window and there is not enough text to fill the space to the left of the first image. If you played with the width of browser's window, you would see how the page will become the same as in the Bob's video.

    ***Maybe, I'm wrong.

  • sara richeysara richey

    Can I download all content at once as it is a bear trying to find all the files each time. Also, running IE 11 and have triple checked all my typing, the styles.css is in the same folder as the webpage and I cannot get anything to update. I have hit refresh too many times to count. Is there something in the tools that I need to set in IE?

  • ShahabShahab

    where can I find the lesson04 zip file ?

  • AnnaAnna

    Hi, I am using php_e (a program my husband wrote) rather than notepad and it won't allow me to save as UTF-8. It will only let me save as HTML. Does this make a great deal of difference if it has all worked in the browser?

  • @Anna: I'll let Scott Hanselman explain why it is important:  http://www.hanselman.com/blog/TheImportanceOfBeingUTF8.aspx

    ... if your audience is US based and you're not going to create multi-language versions of the site, then you're probably ok.

  • Anna JohnstoneRandom​Tangents Nobody expects the Spanish Inquisition

    @BobTabor:It will most likely be US/UK based.

  • Anna JohnstoneRandom​Tangents Nobody expects the Spanish Inquisition

    Have to say, this series is smashing.  I tried learning from a SAM book about 3 years ago and found it very overwhelming, It sort of put me off.  I've recently decided to have another go at it. You make it very clear and concise. I'm not quite brave enough to move onto visual basic yet (and I'm dying to have a play with infopath) but I am sure I will get there.  Thank you for taking the time to make these!:D

  • DeepakDeepak

    Great job bob, I really appereciate your series .It provides me a great knowledge about html5....
    thanks a lot....

  • Phil PPhil P

    Mr Tabor
    I just wanted to say thank you, this is my first taste of Web development and I have learnt so much from these tut's.

  • Even using the stored file from lesson 4, my graphics don't come out the same.

    They are sort of next to each other. The bog graphic floats right ok, but the other buts up against it. Like I said this happens with the stored version. Is it a setting on IR I need to change?

  • IanIan

    @richard61 I had the same problem with my images. I thought I copied the style wrong, but I was able to make my page look like bob's page exactly by adjusting the size of my browser. Bottom right corner of your browser allows to drag and re-size your view of the web-page.

    Bob's browser view is small b/c he's clicking on multiple screens on his desktop.

    I hope that helps.

  • itmanitman

    Hi bob
    thanks for video! I have change following link
    <link rel="stylesheet" type="text/javascript" href="styles.css" media="screen">

    see type is javascript and page source is also showing javascript but, still it working. IS THIS B?C OF HTML5 or what?


Remove this comment

Remove this thread


Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.