Understanding the HTML5 You Wrote - 04

Sign in to queue

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

Download

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 send us feedback you can Contact Us.