HomeОбразованиеRelated VideosMore From: Will Goldstone

HTML5 & CSS Web Design - 107 - HTML5 Page Layout

344 ratings | 122415 views
Part 7 of Web Design tutorials covering basics of web development with HTML5 and CSS. In this we look at how HTML structure has changed from XHTML 1 to HTML5 and how we can create a structure with the new semantic tags. Tutorials by Will Goldstone see willgoldstone.com for more info.
Html code for embedding videos on your blog
Text Comments (56)
Ima SuperPerson (2 years ago)
Mostly "dedicated" div tags with different names and slightly specialized behavior. Which is not worth much to me. Especially since my web application doesn't really have "sections" or "articles". Might help Noobs get the hang of web site development, but it doesn't really do much for experienced developers - except to give them yet another way of doing exactly the same thing. Ugh. Last thing in the world I needed.
MigraOfficial (3 years ago)
Awesome Thanks!
Georgi Georgiev (3 years ago)
Thank you very much for the video. GOD bless you.
BaYu Andika P (3 years ago)
what you use to write the code ?
rjtkoh (3 years ago)
Thanks mate. Your voice is so clear and pleasant.
thiery572 (3 years ago)
+rjtkoh He's an English. lol.
Great video tutorial! I love doing Website seo and I believe all internet businesses should preferably use this premium quality tactic! I also like doing some Web Page Design as well, but Search marketing is my passion. Keep these video clips coming!
rdw3ut (3 years ago)
What is the deciding factor for choosing whether you are going to design a website using HTML5 verse Wordpress?
Hilman Effendi (3 years ago)
im groot
sohel Arman (4 years ago)
its helpful. How I will become a website designer plz. help me
Ralphunreal (4 years ago)
isn't section first and then articles inside?
Practice Repeat (1 year ago)
article can go inside the section
ADEL SEO (4 years ago)
What is the difference between normal html and html5? Still don't catch it.
EJ Media (4 years ago)
+Adelaide SEO Actually not much - the tags are a little bit more specific in HTML5 so a div tag is now an article tag - still the same concept though HTML is the structure and CSS styles your pages
Sunnyvale SEO (4 years ago)
HTML5 is so much more cleaner. It's been a while since I had to do any HTML coding, and  I have to say so much easier to do. Thanks for the tutorials WIll.
highten58 (4 years ago)
been searching for a video like this, straight to the point and examples of code thanks!
Kornelije Kovac (4 years ago)
Are there any more advantages to new naming (header, nav, article...), or it's just about clearer meaning and shorter code?
thiery572 (3 years ago)
+Kornelije Kovac Good question. I hope someone can answer.
Kornelije Kovac (4 years ago)
Yes, but anything else except semantics? I can now use <header> multiple time in the code, but then i don't know which one is real header, which ones are headers in the article, etc, so i have to give them ID's: <header class="articleHeader"> <header id="realHeader"> So, I see no difference or shortening , when compared to:  <div class="articleHeader"> <div id="realHeader"> 
Will Goldstone (4 years ago)
its more that there's no reason not to - and it'll help if you work with others on code to use new standards.
moneer nasif (4 years ago)
There is a free online course to develop your very own HTML5 app. https://iversity.org/c/19?r=814f1 
Agriya (4 years ago)
A website which has the combination of HTML 5 and CSS 3 can create a revolutionary effect for website. Use this combination with user-friendly attributes to rank well in search engines and attract users easily.
Tiberiu Tanasescu (5 years ago)
It would have been nice if you showed a bit the css file.
James Stafford (5 years ago)
Well done thanks.
Harvest Creative Media (5 years ago)
I am trying to make 3 boxes next to each other in div tag but can't do it. css } .titletag { height: 50px; } .left { background-color: #09F; float: left; width: 250px; } .middel { background-color: #993; width: 300px; margin-left: 200px; } .right { background-color: #999; width: 200px; float: right; } Please help me.
Kristien Cooper (6 years ago)
Thanks for the Great tutorials mate, helped a bunch xxx
WizardForums (6 years ago)
okay den
riz chelsea (6 years ago)
Thanks for your attempt to explain this to the people. It a great help! Thanks for this one and your video as a whole. I just loved it.
Will Goldstone (6 years ago)
purely semantic as far as I understand, as the html has no bearing on the layout or behaviour - so it matters not!
Will Goldstone (6 years ago)
the styling is covered in the next video.. 108.. watch it!
Juan Tarrats (6 years ago)
Willgoldstone thank you for replay, I was refering to styling of the article and section inside of those articles and the aside tag which is not displaying where I like it too be. do you have any videos devoted to css styling of this tags.
Will Goldstone (6 years ago)
no you can just refer to section in the css.. only use classes in addition if you wish to distinguish between them.
Juan Tarrats (6 years ago)
great video but I have question , the article section pf the document , do you have to ad classes to each section of the main content,
heyhelloallpeople (6 years ago)
Hello Man you are a great teacher!!! I'm from AZERBAIJAN and watched your tutorials! Thanks again this educational information!
Will Goldstone (6 years ago)
@CollMomo1 well spotted :) you have won... credibility! :D
CollMomo1 (6 years ago)
i recognized my city 00.30, MONTREAL !!!!
Will Goldstone (6 years ago)
@stevenspartan cheers Steve!
Moderategamer / (6 years ago)
great videos really helped me get to grips with the new tags. Going to take a while to get used to not using div tags for the bulk of my formating.
man (6 years ago)
Good article
Will Goldstone (6 years ago)
@sprowlta finish watching the video!
Will Goldstone (6 years ago)
@ketochi dreamweaver by adobe, but you can use any text editor really.
Shakaama (6 years ago)
@willgoldstone oh and yes, people say "i can do all this now in html 5" like everyone says it. and on top of that, people are saying they don't need designers, "i can do it all myself now in html5"
Shakaama (6 years ago)
@willgoldstone isn't this all still very much premature? it will not be officially recognized for still some years. oh and don't worry, you can't offend me, I'm capricorn, i'd need a heart to be offended. and, as of yet, i haven't discovered my having a heart. it's just a matter of course, not to engender sympathy.
Will Goldstone (6 years ago)
@shakaama thats a strange and narrow minded view, especially as the part that hasn't changed is the design - the css has only gotten more detailed and powerful. surely? everyone needs one. Sorry to sound insulting but I don't think you've fully grasped what html5 is - you know its just mostly reassigning of tags at the basic level? when people quote 'oh this is done in html5' now, usually what they mean is canvas or webgl anyhow.
Will Goldstone (6 years ago)
@MrPeterBoyd good for you! thanks for sharing.
Will Goldstone (6 years ago)
@cybergrace7 welcome!
cybergrace7 (6 years ago)
Very clearly explained. Perfect for folks who used to use XHTML. Thanks, Will.
Will Goldstone (6 years ago)
@sprowlta If you had actually watched just a few seconds longer and listened to the tutorial you'd have realised that I was explaining the old way of doing it, versus the new way - with html5, and all of the things you are describing. See 1:36. Apology accepted.
Shakaama (7 years ago)
is it just me or is html5 very kindergarten? not that html4 was rocket science, but come on. and it seems to destroy a lot of specialists' jobs, i.e. graphic designer. who needs one with html5.
Will Goldstone (7 years ago)
@el3ctro323 yep.
Will Goldstone (7 years ago)
@jonasemdal doesn't really matter in practice - its a word!
Jonas (7 years ago)
Have you misunderstood sections vs articles? I think it's the other way around. You should read the spec from w3c
Christian Ramirez (7 years ago)
Hello! i just wanna ask coz i am really new to HTML5 and i have an assignment... i need to develop a dictionary application... i'm already finish with the design and some functions, my problem now is that how can i link the word inputted on the the textarea to google dictionary when you click the word to show what the word means... BIG BIG HELP HERE!!!!! my deadline is coming...
imakewebsitesdude (7 years ago)
u know theres footer tag for html5? noooob
Reginald Mathieu (7 years ago)
This series is one of the most informative I've seen on the new html5 spec. It is structured especially well for newbies like me who are wondering which coding principles to apply when envisioning a project.
Will Goldstone (7 years ago)
dreamweaver cs5

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.