Understanding the HTML5 You Wrote - 04

Download this episode

Download Video

Download captions

Download Captions

Description

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

Tag:

HTML5

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      MODUL8com

      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 ?).

    • User profile image
      anonymous

      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.

    • User profile image
      BobTabor

      @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).

    • User profile image
      Dean Bush

      Bob,
      Which capture application are you using to create your tutorials?
      Dean

    • User profile image
      BobTabor

      @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.

    • User profile image
      kapil

      Wow thanks, I love these videos

    • User profile image
      Mladen

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

    • User profile image
      BobTabor

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

    • User profile image
      Manoj

      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.

    • User profile image
      usman786424​143

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

    • User profile image
      bitoolean

      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).

    • User profile image
      David StLuce

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

    • User profile image
      Stephen 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 :)

    • User profile image
      ziovan

      I love the binary clock! @BobTabor

    • User profile image
      Moriarty

      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.

    • User profile image
      BobTabor

      @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

    • User profile image
      Zeeiub

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

    • User profile image
      Shashank aggarwal

      Awsome !!

    • User profile image
      gprasant

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

    • User profile image
      BobTabor

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

    • User profile image
      wayneC

      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!

    • User profile image
      BobTabor

      @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.

    • User profile image
      Kunal​Ganglani

      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

    • User profile image
      BobTabor

      @KunalGanglani: Thanks Kunal!  Best wishes to you.

    • User profile image
      neewy

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

    • User profile image
      Dennis

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

    • User profile image
      BobTabor

      @Dennis: A quick Bing search revealed:

      http://css-tricks.com/perfect-full-page-background-image/

      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!

    • User profile image
      URIT

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

    • User profile image
      edualc

      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 !

    • User profile image
      compucol

      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

       

    • User profile image
      BobTabor

      @edualc: Ah, interesting.  Thanks!

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

    • User profile image
      shazeen

      A++++ video awesome

    • User profile image
      Robertoxxx93

      BOB Thnx, still very consructive teaching, very helpful

    • User profile image
      ahmed

      comment crie sit web

    • User profile image
      prasannap
      Kunal (Bob) In your comment you mentioned "windows phone app development videos". Can you please let me know where those videos are?
    • User profile image
      BobTabor

      @prasannap: Here's a link to the phone 7 videos ...

      http://channel9.msdn.com/Series/Windows-Phone-7-Development-for-Absolute-Beginners

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

    • User profile image
      Manuel 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

    • User profile image
      BobTabor

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

    • User profile image
      ValdineiM

      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!

    • User profile image
      cfab

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

      Regards

    • User profile image
      BobTabor

      @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

    • User profile image
      MrElmasry

      nice Tutorials.

    • User profile image
      sham

      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

    • User profile image
      BobTabor

      @MrElmasry: Thanks.

      @sham: Cool!  Glad they helped!

    • User profile image
      vickey

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

    • User profile image
      BobTabor

      @vickey:Thanks Vickey!

    • User profile image
      DaveThe​Learner

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

    • User profile image
      parth

      awesome tutorials got many thing from that.
      thanks Bob.

    • User profile image
      Jimmy

      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?

    • User profile image
      PawlikDoc

      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.

    • User profile image
      sara 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?

    • User profile image
      Shahab

      where can I find the lesson04 zip file ?

    • User profile image
      Anna

      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?

    • User profile image
      BobTabor

      @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.

    • User profile image
      Random​Tangents

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

    • User profile image
      Random​Tangents

      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

    • User profile image
      Deepak

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

    • User profile image
      Phil 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.
      Regards
      Phil

    • User profile image
      Richard61

      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?

    • User profile image
      Ian

      @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.

    • User profile image
      itman

      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?

      thanks

    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.