HTML 101: How to Create Web Pages With HTML — Episode Eight
In the final video of the HTML 101 series, you’ll get a basic introduction to the div and span tags and when they should be used with HTML code. While these tags may seem less-than-sexy, they become very powerful when combined with cascading style sheets (CSS), which we will be covering in our next series.
Supercharge your blog’s earnings with Text Link Ads
Episode Links:
- Low cost, reliable web hosting with free website creation tools and blog software.
- Download Notepad++, the best FREE text editor on the Web.
- Quickly and easily build HTML, CSS and XML pages with Macromedia Dreamweaver
.
As a quite experienced blogger but a technically limited one I must say I’m loving this series, can’t wait for the next one!
Allen.H
Thanks Allen. I hope I taught you a thing or two, and I hope to do so with the next series. Spread the word (blogroll..hint..hint) 🙂
Regards
Shane
Hehe, you said “doodoo”. 🙂 Still, nice tubetorial guys. I’ll keep this advice in mind when I get back to coding later this week.
Gotta love that opening element tag! Good thing browsers don’t validate! ;-0
But seriously, it was otherwise a nice presenation for beginning coders.
Hey Mike. Not sure what you mean. Are you referring to how I just start the html file with the html tag? If so, I understand that for validation this document should have some validations at the top, but I didn’t want to introduce this in the basic series.
Let me know if that’s what you meant.
Regards
Shane
Nope. Check out the screencast as soon as you open Notepad. Look at the top of the HTML file. Or maybe I should say HMTL file… 🙂
Damn, damn, damn! Good catch hawk eyes 🙂 The only excuse I can give myself here is in the first tubetorial I mentioned that 90% of the errors in creating web pages will be spelling errors like this.
Thanks for pointing that out.
Shoot! I’ll have to change my source files and re-upload.
ps. I like your site, by the way. I like the technical stuff.
Regards
Shane
Mike, I just went back to the 2nd video in this series and noticed that I started out with the correct spelling, then mysteriously, it switches in my next scene. Too bizarre. Of course this mistake perpetuates itself in the other videos since I use the same template throughout. I have a lot of scenes to rework.
Back then, when I was creating this first video I was still learning the Camtasia program so I guess I was concentrating so hard on the program that such a glaringly obvious mistake went unnoticed.
Oh well, such is life. I’ll get right on it.
Regards
Shane
If I were you I’d ignore it. Nobody who doesn’t know better will ever notice. It’s just kinda like catching an inconsistency in a movie; those are some of the most memorable parts!
And don’t feel bad; I ran a catalog mail order company for 12 years selling to software developers. Me and the marketing manager would proof-read and proof-read and proof-read again until we were certain there were no errors. Then, and this never failed, when we’d get a copy back from the printer our developer would grab a copy, open it, and on the first page he looked at he’d say “Opps, typo…” (that developer is now the Microsoft S.E. Regional Evangelist, btw.) Just goes to show you; you can’t proof your our shit. 😉
BTW, when you said you liked my site, did you mean: https://blog.welldesignedurls.org/?
That’s too funny, Mike.
Yeah, I think I’m just going to go back to the 2nd video and add a callout in Camtasia saying what a dope I am and to ignore the error throughout the series. It’s exponentially harder deleting scenes in Camtasia when they are not the last scene. When you delete scenes and add new ones, all your sound layers can get out of sync with the video and before you know it, everything is messed up.
Regards
Shane
Hello again,
Please contact me directly.
Is there any way we can get you guys to provide subtitle for all those cool tutorial videos?
Appreciated it.
gwlj
A quick question/note: Isn’t it technically illegal with regards to W3C validation to contain a DIV tag within a P tag? Thanks for these excellent videos!
Mike, yes your welldesignedurl page was what I was talking about.
Regards
Shane
Philip,
Hello to you. I’m not sure about that. On this page https://www.w3.org/TR/html401/struct/global.html#edef-DIV the W3c shows divs inside of p’s just to demonstrate line breaks, but in general I can’t think of a reason why anybody would want or need to put divs inside of p tags. IN all the examples I’ve seen, pages use divs as the containers and place all content inside (including p tags), and not the other way around.
Regards
Shane
Shane,
Wow. You blew my mind with that link to the W3C website. I thought for the longest that this practice was “illegal”. I even recall some of my XHTML not validating properly because of trying to put a DIV tag within a P tag back in my earlier days of coding. Maybe my memory escapes me.
In general, if I need a line break within a paragraph I use a SPAN tag but set it to “display:block;” to give it its own block-like structure. Obviously this is beyond the scope of your particular tutorial, but I thought it might be helpful to mention it nonetheless.
Thanks a lot for these tutes. I’ve been coding for a while already but I love, love, love watching beginner info from time to time to make sure I’m not slipping up.
Cheers,
Philip
Philip,
No, I’m with you here. I think the example they listed only confuses the issue. I don’t see a need to use divs inside of p’s really, so I just avoid doing so. I’m sure it’s invalid, but don’t know why they did it that way.
As for line breaks, I just go with the br / .
Nice site by the way. I like the design.
Regards
Shane
all the Tubetorial are very useful
Aa huh! ‘the power of the div’ yee ah! I’ve been staring at the w3c tutorials for about a week now and wondering why the heck someone didn’t just come straight out and explain in plain english how it all fits together! I’ve been spitting out code from various editors and examining it but it’s all so varied and almost none of it validates with w3c? go figure!
Thanks shane, this is great work
Glad to see you liked it Levi. Keep going!
Hi
I have just completed your HTML tutorials and am really blown away by what I have learned. Being a complete beginner this has opened my eyes to the possibilities and the power this knowledge gives you.
Thanks very much for the time and trouble you have taken to provide this to the people on the internet.
Regards
Grahame
Grahame,
It’s comments like yours that make all the long hours of planning, storyboarding, recording, and editing worth it. Post another comment and let me know if you have a website. check out the link that my name points to. You can use your knowledge to assist you in creating a blog.
Regards
Shane
I would just like to say THANKS. I just finished and feel really excited. You did a great job, easy to follow easy to understand A++. So I guess now I just have to put it to practice. Thanks again.
You’re welcome Belinda. May I suggest a resource for you to jump into next. CSS Mastery(I have no affiliation) is a book you should read next. Great stuff.
Don’t know how late i am to this discussion since there are no dates with the comments (request you to add that feature.. its useful), but i wanted to share a comment on the div inside p at the w3c website link. While a block element (including p itself) inside a p tag is illegal, end tags are optional in case of (https://www.w3.org/TR/html401/struct/text.html#h-9.3.1), and hence the example given there is valid. over there just signifies beginning/end of a new para.
Regards
Neeraj