Go back to: General discussion
[15:19] <woutercox> So, as I was saying: what do I mean when I say 'semantic HTML'
[15:19] <absent> Well, that's part of the original art, but I suppose you could also do something like that yourself by making a rectangular selection to a new layer, then adjusting that layer's alpha.
[15:19] <woutercox> It means that everything I put in the HTML is about MEANING
[15:19] <woutercox> everything that has to do with layout and positioning is a job for the CSS
[15:19] <woutercox> That's also the difference between xhtml transitional and xhtml strict
[15:20] <woutercox> for example, in xhtml transitional, it is okay to use <p align="right">test</p>
[15:20] <woutercox> But it's not in xhtml strict
[15:20] <Emeka> @absent .... I would want to continue this talk with you later
[15:20] <Emeka> if you won't mind ...
[15:20] <Emeka> I will mail you
[15:20] <woutercox> Because by using align="right", you are talking about positioning and lay-out
[15:21] <absent> @Emeka cool.
[15:21] <woutercox> same thing with, for example, <td bgcolor="red">data</td>
[15:21] <Emeka> mail id , @absent
[15:21] <absent> So is the world changing to the xhtml strict standard? Or are there two concurrent standards?
[15:21] <Zilla-Mama> I've got to admit, I don't understand using XHTML trans because you add so much of the 'layout' with it. But in Strict, you leave it all to CSS
[15:22] <woutercox> absent: you can use both. Some people are also still using HTML4
[15:22] <woutercox> the important thing is, once you choose one, you follow its rules
[15:22] <Zilla-Mama> So is strict, html 5?
[15:22] <woutercox> no, HTML5 is an emerging standard
[15:23] <woutercox> it has its own rules
[15:23] <Zilla-Mama> but most browser don't support it, right?
[15:23] <Zilla-Mama> (Or am I really behind in my information?)
[15:23] <woutercox> I believe no browsers support it fully
[15:23] <woutercox> but all of them are adding support in their next versions
[15:24] <woutercox> and there are also tools that try to make html5 work in browsers right now
[15:24] <Zilla-Mama> Ah thanks for clarifying
[15:24] <woutercox> what xhtml strict and html5 have in common though, is a strong focus of leaving layout and positioning to CSS
[15:25] <woutercox> and an emphasis on semantics
[15:25] <woutercox> for example, if I type <h2>Breaking news: batman saves town again!</h2>
[15:26] <woutercox> then I'm actually saying: this text is a Heading at level 2
[15:26] <woutercox> So let's take a look at the image
[15:26] <woutercox> tell me what html tags you would use for the different parts
[15:26] <woutercox> Let's start with the logo at the top
[15:27] <absent> Well, the "Welcome to School of Webcraft" would be a "larger" header
[15:27] <absent> The logo? img
[15:27] <woutercox> right, in fact, we are going to use h1 for that
[15:27] <woutercox> We're going to use <h1>P2PU: School of Webcraft</h1>
[15:27] <francy> p for the paragraphs at the bottom, h2 or h3 for the paragraph headers
[15:28] <woutercox> yeah, very good
[15:28] <woutercox> The navigation buttons, what would you use for those?
[15:28] <francy> are they unnumbered lists?
[15:28] <francy> li ?
[15:28] <woutercox> yes, they will be
[15:28] <woutercox> ul with li items
[15:29] <woutercox> because if you think about it, that's what they are: a list of links
[15:29] <Emeka> okay ... what anout float right
[15:29] <Emeka> okay .. what about float right
[15:29] <woutercox> then you're talking about CSS and positioning
[15:29] <absent> The fact they're horizontal lists trips me up.
[15:29] <woutercox> well, we'll use CSS trickery to do that
[15:30] <woutercox> they are floated right
[15:30] <francy> what about the font types, css or html?
[15:30] <woutercox> defined in the CSS
[15:30] <woutercox> font types=layout
[15:31] <woutercox> We'll also need some sort of 'containers' to put everything in
[15:31] <francy> italics, bold also, right?
[15:31] <woutercox> yes, that's all layout
[15:31] <absent> The two columns would be divs, I think.
[15:31] <Emeka> containers here means div
[15:32] <absent> The same for the text before the columns.
[15:32] <woutercox> that's right, and we also need DIVs for our header, our body content, our footer
[15:32] <Zilla-Mama> Also the lists, right?
[15:32] <woutercox> and our central column
[15:32] <woutercox> you mean the navigation bar?
[15:32] <Zilla-Mama> yes
[15:32] <woutercox> yeah, we'll also need a <div id="navigation">
[15:33] <Zilla-Mama> cool
[15:33] <woutercox> When an element is unique on the page, you should use an ID
[15:33] <woutercox> when there can be many elements on the page, you should use class
[15:33] <woutercox> for example: <p class="warning">Be careful!</p>
[15:33] <woutercox> There can be many warnings on the page
[15:33] <absent> So with XHTML Strict, the only tag attributes you use are id and class?
[15:34] <francy> so when thinking about the design, do you think about the big picture, the elements like div and then the details of how to fill in those div
[15:34] <woutercox> absent: you don't use tag attributes that have to do with layout or positioning
[15:34] <woutercox> yes francy, that's a good way to put it
[15:35] <woutercox> I wanted to have the video for this ready, but unfortunately it's still uploading
[15:35] <woutercox> so what's our first block, the block where everything else will be inside?
[15:35] <absent> body?
[15:36] <woutercox> well yes, but I'm talking about blocks we're creating ourselves
[15:36] <woutercox> what's the first div/container we need?
[15:36] <Emeka> div
[15:36] <woutercox> everything else is inside of this DIV
[15:36] <Zilla-Mama> The Header's "Welcome" line
[15:37] <Zilla-Mama> would be the first, I believe
[15:37] <woutercox> The header is also inside of something else: the container
[15:37] <absent> You can nest divs, so maybe a content div?
[15:37] <woutercox> absent: yeah, I've called that the container DIV
[15:37] <woutercox> it's what we will use to center everything and where we will put the background with the red borders
[15:38] <woutercox> 960px wide with I think 20px of padding on each side for the borders
[15:38] <woutercox> nested inside of that: header, navigation, bodycontent, footer
[15:38] <woutercox> if you look at the picture: http://p2pu.org/sites/p2pu.org/files/document/24998-final-design-jpeg-at...
[15:39] <woutercox> then you should be able to visualize where these blocks start and end
[15:40] <woutercox> So for next week, you can either try to create the html yourself:
[15:40] <absent> So our image slices will correspond to different divs.
[15:40] <Zilla-Mama> So, first the basic container, then a header, body and footer and finally whatever is inside each one?
[15:40] <woutercox> yes Zilla-Mama
[15:40] <Zilla-Mama> Thanks
[15:40] <Emeka> I @wouter the navigation menus have curved edges
[15:40] <woutercox> You can try it yourself by starting with this template: http://p2pu.org/webcraft/node/10783/document/16231
[15:40] <Emeka> that kind of thing is strange to me'
[15:40] <woutercox> Why is it strange?
[15:41] <Emeka> how to add curve edges
[15:41] <Emeka> is done on CSS
[15:41] <Emeka> or background image?
[15:41] <woutercox> that's just a background image
[15:41] <woutercox> I did that in GIMP
[15:42] <woutercox> although you CAN do it with css (border radius), but again you'll need hacks to make it work in every browser
[15:42] <woutercox> So, let me just finish what I was saying:
[15:42] <woutercox> For the ones who want to try it yourself, start with this template:
[15:42] <woutercox> http://p2pu.org/webcraft/node/10783/document/16231
[15:43] <woutercox> Then put all the elements we were talking about between the body tags, keeping in mind the semantic nature
[15:43] <woutercox> And/or you can watch the video I'll post in the coming days
[15:44] <woutercox> That is our foundation for our webpage
[15:44] <woutercox> Then next week, we'll start with the fun stuff: positioning everything
[15:44] <woutercox> Any questions?
[15:45] <Emeka> thanks so much
[15:45] <woutercox> Oh yeah, before I forget, I promised you to show Zen Coding. It's in the video, but you can also take a look here:
[15:45] <sebastien_vignea> I am fine. Thank!
[15:45] <Zilla-Mama> Nope, thank you
[15:45] <absent> I think I got it. Just the html for this week.
[15:45] <woutercox> http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-write-ligh...
[15:45] <absent> Without the css, it won't look like the example yet.
[15:45] <woutercox> absent: no it won't
[15:46] <woutercox> But you should notice that, even without any CSS, it is possible to see how it is structured
[15:46] <woutercox> One thing you can do, is make your screen very narrow, that's how it could look like on an smartphone that does not support stylesheets
[15:47] <woutercox> and working like this, it's easy to create things like Print Stylesheets
[15:47] <woutercox> and a lot of other things
[15:48] <woutercox> this is perhaps the 'boring/dry' stuff, but it's as important as the rest
[15:48] <absent> Will you be covering how to use multiple stylesheets for different media?
[15:48] <woutercox> I don't think there'll be time for that...
[15:48] <absent> I'll bring it up in the forums and perhaps the other students and I can hash out some ideas then.
[15:48] <woutercox> Basically you use another stylesheet with other rules
[15:49] <woutercox> for example, our width of 960px wouldn't work well on most smartphones
[15:49] <woutercox> but in the CSS, we can change all of that
[15:49] <absent> Right.
[15:49] <absent> Gotcha.
[15:49] <francy> I have a question about <div id= "navigation"> can you explain the div id ?
[15:49] <woutercox> I'll see what I can do
[15:50] <woutercox> francy: what do you mean, explain the id?
[15:50] <woutercox> that's the container where our navigation bar is, and the navigation buttons/links are inside
[15:50] <francy> yes, the id ?
[15:51] <woutercox> you pick the id names yourself
[15:51] <absent> @francy any element can have a unique id so you can later specify styling for it in css.
[15:51] <woutercox> is that what you mean?
[15:51] <woutercox> yes, that's right
[15:51] <francy> yes
[15:51] <francy> so the styling is in the css?
[15:51] <woutercox> yeah
[15:51] <woutercox> in CSS, you would then use #navigation { color: blue }
[15:51] <woutercox> or something like that
[15:52] <woutercox> for a class, you'd use .warning { color: red }
[15:52] <absent> @francy also, there is nothing magical about "navigation", it's just a name.
[15:52] <francy> ok, thanks that helps
[15:52] <woutercox> thanks absent for helping out, I didn't quite get the question
[15:52] <absent> I hope I'm helping.
[15:53] <woutercox> Also, in my opinion, the CSS positioning part is the most fun (and most complicated), so I'm looking forward to that! :)
[15:53] <woutercox> Okay, so for next week, either try to create the HTML yourself, or follow along with the video that I will upload in the coming days
[15:54] <woutercox> And as absent already told me: the audio for the slicing video is too low
[15:54] <woutercox> So I'll do that again
[15:54] <woutercox> just in case you were going to have trouble with that
[15:55] <woutercox> Okay, that concludes this week's chat
[15:55] <woutercox> Thanks for being here!
Chat log week 4
[15:19] <woutercox> So, as I was saying: what do I mean when I say 'semantic HTML'
[15:19] <absent> Well, that's part of the original art, but I suppose you could also do something like that yourself by making a rectangular selection to a new layer, then adjusting that layer's alpha.
[15:19] <woutercox> It means that everything I put in the HTML is about MEANING
[15:19] <woutercox> everything that has to do with layout and positioning is a job for the CSS
[15:19] <woutercox> That's also the difference between xhtml transitional and xhtml strict
[15:20] <woutercox> for example, in xhtml transitional, it is okay to use <p align="right">test</p>
[15:20] <woutercox> But it's not in xhtml strict
[15:20] <Emeka> @absent .... I would want to continue this talk with you later
[15:20] <Emeka> if you won't mind ...
[15:20] <Emeka> I will mail you
[15:20] <woutercox> Because by using align="right", you are talking about positioning and lay-out
[15:21] <absent> @Emeka cool.
[15:21] <woutercox> same thing with, for example, <td bgcolor="red">data</td>
[15:21] <Emeka> mail id , @absent
[15:21] <absent> So is the world changing to the xhtml strict standard? Or are there two concurrent standards?
[15:21] <Zilla-Mama> I've got to admit, I don't understand using XHTML trans because you add so much of the 'layout' with it. But in Strict, you leave it all to CSS
[15:22] <woutercox> absent: you can use both. Some people are also still using HTML4
[15:22] <woutercox> the important thing is, once you choose one, you follow its rules
[15:22] <Zilla-Mama> So is strict, html 5?
[15:22] <woutercox> no, HTML5 is an emerging standard
[15:23] <woutercox> it has its own rules
[15:23] <Zilla-Mama> but most browser don't support it, right?
[15:23] <Zilla-Mama> (Or am I really behind in my information?)
[15:23] <woutercox> I believe no browsers support it fully
[15:23] <woutercox> but all of them are adding support in their next versions
[15:24] <woutercox> and there are also tools that try to make html5 work in browsers right now
[15:24] <Zilla-Mama> Ah thanks for clarifying
[15:24] <woutercox> what xhtml strict and html5 have in common though, is a strong focus of leaving layout and positioning to CSS
[15:25] <woutercox> and an emphasis on semantics
[15:25] <woutercox> for example, if I type <h2>Breaking news: batman saves town again!</h2>
[15:26] <woutercox> then I'm actually saying: this text is a Heading at level 2
[15:26] <woutercox> So let's take a look at the image
[15:26] <woutercox> tell me what html tags you would use for the different parts
[15:26] <woutercox> Let's start with the logo at the top
[15:27] <absent> Well, the "Welcome to School of Webcraft" would be a "larger" header
[15:27] <absent> The logo? img
[15:27] <woutercox> right, in fact, we are going to use h1 for that
[15:27] <woutercox> We're going to use <h1>P2PU: School of Webcraft</h1>
[15:27] <francy> p for the paragraphs at the bottom, h2 or h3 for the paragraph headers
[15:28] <woutercox> yeah, very good
[15:28] <woutercox> The navigation buttons, what would you use for those?
[15:28] <francy> are they unnumbered lists?
[15:28] <francy> li ?
[15:28] <woutercox> yes, they will be
[15:28] <woutercox> ul with li items
[15:29] <woutercox> because if you think about it, that's what they are: a list of links
[15:29] <Emeka> okay ... what anout float right
[15:29] <Emeka> okay .. what about float right
[15:29] <woutercox> then you're talking about CSS and positioning
[15:29] <absent> The fact they're horizontal lists trips me up.
[15:29] <woutercox> well, we'll use CSS trickery to do that
[15:30] <woutercox> they are floated right
[15:30] <francy> what about the font types, css or html?
[15:30] <woutercox> defined in the CSS
[15:30] <woutercox> font types=layout
[15:31] <woutercox> We'll also need some sort of 'containers' to put everything in
[15:31] <francy> italics, bold also, right?
[15:31] <woutercox> yes, that's all layout
[15:31] <absent> The two columns would be divs, I think.
[15:31] <Emeka> containers here means div
[15:32] <absent> The same for the text before the columns.
[15:32] <woutercox> that's right, and we also need DIVs for our header, our body content, our footer
[15:32] <Zilla-Mama> Also the lists, right?
[15:32] <woutercox> and our central column
[15:32] <woutercox> you mean the navigation bar?
[15:32] <Zilla-Mama> yes
[15:32] <woutercox> yeah, we'll also need a <div id="navigation">
[15:33] <Zilla-Mama> cool
[15:33] <woutercox> When an element is unique on the page, you should use an ID
[15:33] <woutercox> when there can be many elements on the page, you should use class
[15:33] <woutercox> for example: <p class="warning">Be careful!</p>
[15:33] <woutercox> There can be many warnings on the page
[15:33] <absent> So with XHTML Strict, the only tag attributes you use are id and class?
[15:34] <francy> so when thinking about the design, do you think about the big picture, the elements like div and then the details of how to fill in those div
[15:34] <woutercox> absent: you don't use tag attributes that have to do with layout or positioning
[15:34] <woutercox> yes francy, that's a good way to put it
[15:35] <woutercox> I wanted to have the video for this ready, but unfortunately it's still uploading
[15:35] <woutercox> so what's our first block, the block where everything else will be inside?
[15:35] <absent> body?
[15:36] <woutercox> well yes, but I'm talking about blocks we're creating ourselves
[15:36] <woutercox> what's the first div/container we need?
[15:36] <Emeka> div
[15:36] <woutercox> everything else is inside of this DIV
[15:36] <Zilla-Mama> The Header's "Welcome" line
[15:37] <Zilla-Mama> would be the first, I believe
[15:37] <woutercox> The header is also inside of something else: the container
[15:37] <absent> You can nest divs, so maybe a content div?
[15:37] <woutercox> absent: yeah, I've called that the container DIV
[15:37] <woutercox> it's what we will use to center everything and where we will put the background with the red borders
[15:38] <woutercox> 960px wide with I think 20px of padding on each side for the borders
[15:38] <woutercox> nested inside of that: header, navigation, bodycontent, footer
[15:38] <woutercox> if you look at the picture: http://p2pu.org/sites/p2pu.org/files/document/24998-final-design-jpeg-at...
[15:39] <woutercox> then you should be able to visualize where these blocks start and end
[15:40] <woutercox> So for next week, you can either try to create the html yourself:
[15:40] <absent> So our image slices will correspond to different divs.
[15:40] <Zilla-Mama> So, first the basic container, then a header, body and footer and finally whatever is inside each one?
[15:40] <woutercox> yes Zilla-Mama
[15:40] <Zilla-Mama> Thanks
[15:40] <Emeka> I @wouter the navigation menus have curved edges
[15:40] <woutercox> You can try it yourself by starting with this template: http://p2pu.org/webcraft/node/10783/document/16231
[15:40] <Emeka> that kind of thing is strange to me'
[15:40] <woutercox> Why is it strange?
[15:41] <Emeka> how to add curve edges
[15:41] <Emeka> is done on CSS
[15:41] <Emeka> or background image?
[15:41] <woutercox> that's just a background image
[15:41] <woutercox> I did that in GIMP
[15:42] <woutercox> although you CAN do it with css (border radius), but again you'll need hacks to make it work in every browser
[15:42] <woutercox> So, let me just finish what I was saying:
[15:42] <woutercox> For the ones who want to try it yourself, start with this template:
[15:42] <woutercox> http://p2pu.org/webcraft/node/10783/document/16231
[15:43] <woutercox> Then put all the elements we were talking about between the body tags, keeping in mind the semantic nature
[15:43] <woutercox> And/or you can watch the video I'll post in the coming days
[15:44] <woutercox> That is our foundation for our webpage
[15:44] <woutercox> Then next week, we'll start with the fun stuff: positioning everything
[15:44] <woutercox> Any questions?
[15:45] <Emeka> thanks so much
[15:45] <woutercox> Oh yeah, before I forget, I promised you to show Zen Coding. It's in the video, but you can also take a look here:
[15:45] <sebastien_vignea> I am fine. Thank!
[15:45] <Zilla-Mama> Nope, thank you
[15:45] <absent> I think I got it. Just the html for this week.
[15:45] <woutercox> http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-write-ligh...
[15:45] <absent> Without the css, it won't look like the example yet.
[15:45] <woutercox> absent: no it won't
[15:46] <woutercox> But you should notice that, even without any CSS, it is possible to see how it is structured
[15:46] <woutercox> One thing you can do, is make your screen very narrow, that's how it could look like on an smartphone that does not support stylesheets
[15:47] <woutercox> and working like this, it's easy to create things like Print Stylesheets
[15:47] <woutercox> and a lot of other things
[15:48] <woutercox> this is perhaps the 'boring/dry' stuff, but it's as important as the rest
[15:48] <absent> Will you be covering how to use multiple stylesheets for different media?
[15:48] <woutercox> I don't think there'll be time for that...
[15:48] <absent> I'll bring it up in the forums and perhaps the other students and I can hash out some ideas then.
[15:48] <woutercox> Basically you use another stylesheet with other rules
[15:49] <woutercox> for example, our width of 960px wouldn't work well on most smartphones
[15:49] <woutercox> but in the CSS, we can change all of that
[15:49] <absent> Right.
[15:49] <absent> Gotcha.
[15:49] <francy> I have a question about <div id= "navigation"> can you explain the div id ?
[15:49] <woutercox> I'll see what I can do
[15:50] <woutercox> francy: what do you mean, explain the id?
[15:50] <woutercox> that's the container where our navigation bar is, and the navigation buttons/links are inside
[15:50] <francy> yes, the id ?
[15:51] <woutercox> you pick the id names yourself
[15:51] <absent> @francy any element can have a unique id so you can later specify styling for it in css.
[15:51] <woutercox> is that what you mean?
[15:51] <woutercox> yes, that's right
[15:51] <francy> yes
[15:51] <francy> so the styling is in the css?
[15:51] <woutercox> yeah
[15:51] <woutercox> in CSS, you would then use #navigation { color: blue }
[15:51] <woutercox> or something like that
[15:52] <woutercox> for a class, you'd use .warning { color: red }
[15:52] <absent> @francy also, there is nothing magical about "navigation", it's just a name.
[15:52] <francy> ok, thanks that helps
[15:52] <woutercox> thanks absent for helping out, I didn't quite get the question
[15:52] <absent> I hope I'm helping.
[15:53] <woutercox> Also, in my opinion, the CSS positioning part is the most fun (and most complicated), so I'm looking forward to that! :)
[15:53] <woutercox> Okay, so for next week, either try to create the HTML yourself, or follow along with the video that I will upload in the coming days
[15:54] <woutercox> And as absent already told me: the audio for the slicing video is too low
[15:54] <woutercox> So I'll do that again
[15:54] <woutercox> just in case you were going to have trouble with that
[15:55] <woutercox> Okay, that concludes this week's chat
[15:55] <woutercox> Thanks for being here!