satmaniac:


Thanks a bunch!

I guess you are asking me if the image is in the same folder I saved my file containing the html code, right? if that is what you mean, then the answer is no. If that is not what you mean can you please clarify your statement above? And what do you mean by"link the image absolutely"?

Yes, that's what I mean. You can link absolutely by typing the full pathname of the image as the link source.

IMHO, this is nothing but a satirical thread. And I don't know why those at the recieving are falling for it...
Anyway, dhtml, well done

With this, we’ve come to know the meaning of the new semantic elements, elements that help spiders to interpret the content of our page better.
We know that the <header> is used to group header info like logos, main navs, e.t.c.
The <nav> is used to nest a group of links, preferably the main nav, so the <nav> could end up getting nested in the <header>
Then to the main content, we’ve seen that the <article> is used to nest a self-containing piece of content that makes sense on its own. The <section> element is used to group contents that have the same theme, like a collection of <article>s. It could also be used to nest other <section>s
As for the guy called <aside>, we’ve learnt he is to nest content that is not part of the main article. E.g related posts, ads, e.t.c
And finally, the <footer> is used to group footer information for a piece of content. For a webpage, maybe copyright terms, for an article maybe author bio and so on.

6) The <footer> element
The<footer> element “represents a footer for the section of content that is its nearest ancestor”.
Hence, a <footer> is used to wrap things that will come at the end of a piece of content. This piece of content could be a whole webpage, article, <section>,e.t.c
Normally, you could use this to group the footer information of your site like, the mini navigation, copyright statements, about us info, contact info, e.t.c.
Like the <header>, it is not compulsory for the footer to be at the bottom of a page, but it you’ll likely end up using it as such.

satmaniac:
Please gurus in the house I need help on this issue I am currently trying to solve I am trying to output an image on the front page of a webpage for practice and I try using the following line of codes <div id="main"><img src="images/1.jpg" /></div > but it seem not to be working; the image is not displaying.

Help me please!!!

I guess, your file path naming is incorrect. Is the image in the same folder as the index.html file? If not, link the image absolutely.

ProfJ29:
Pls i want more explanation on the doctype.

Which, the HTML5?

5) The <aside> element:
According to the WHATWG specs, the aside element “represents a part of the page that is tangentially related to the content around the aside element, and which could be considered separate from that content.”
Geometrically, a tangent is a line that touches a circle at a point but does not intersect (or enter) the circle. Similarly, the <aside> element represents content that lies on a particular page but is not directly related to the main article.
Think a block of “Related Posts”, “Suggested Readings”, “Most Viewed Articles” or better still “Ads”.
Note please, that the <aside> not necessarily be placed at the side of a webpage, it could be above, below or at the side of the primary content. However, it should not be used as a precursor or conclusion to the main content. The <aside> and the main content should have no point of intersection.

You should note that the <section> and <article> tags can nest other <section> and <article> tags.

4)The <article> element:
The <article> element represents a self-contained composition in a
document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The article tag like the <section> tag, is also used to nest content. But unlike the <section> element which groups different contents with a central theme, the <article> element nests content that are self-contained. Like a literal article. So anything within the <article> element must be one piece of idea or content unlike a <section> elememt that will list a group of similar ideas or content.
Illustratively, it could be something like this
<section> Complete Guides to Nigerian Universities
<article>The Complete Guide to UNILAG </article>
<article>The Complete Guide to OAU</article>
<article>The Complete Guide to UNIBEN</article>
</section>
As you can see in this example, the topics contained in the <article> element are “self-contained” i.e it is in itself a complete thought. They are also “independently distributable” i.e. the content- The Complete Guide to Unilag can be posted on another site and still make sense.
In contrast the <section> element contains snippets of “Complete Guides” and not a Complete Guide itself, henceit is not a self-contained piece. It would also be useless if it was posted on another site as the user would not benefit from it as it contains just tidbits from Complete Guides and is not a Complete Guide itself.

3) The <section> element:
The <section> element as specified by the WHATWG, “represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading”
The <section> is used to group content that have a central theme. However, it is not a replacement to the <div> tag. The <div> is used for styling purposes(e.g containers, boxes, e.t.c} while the <section> is used for actual content grouping(e.g text, links, images,e.t.c.)

2) The <nav> element:
WHATWG spec: “The <nav> element represents a section of a page that links to other pages or to parts within the page.”
Simply put, the <nav> element should be used to group a website’s main navigation links. When used like this, the <nav> will fall under the <header> element. This is because the navigation is still a header content.
The <nav> can also be used to group a page’s main navigation links.(e.g breadcrumbs)
Note though that the <nav> element should not be used to wrap individual links in a webpage. Never do this:
<nav><a href=”www.nairaland.com/webmasters” alt=”Nairaland Webmasters”>Nairaland Webmasters</a> </nav>
Side note: A major advantage of the <nav> element is that when screen readers detect it, they skip the content i.e they don’t read out its content. This is nice because it wouldn’t make sense for it to read a websites main navigation links every time it loads a new page on the website.
Interestingly, if you had used a <nav> to wrap all your links, the screen reader would have to skip ALL your links which would lead to incoherence.

romme2u:
very insightful post. you sound very experienced. currently working on a site with lots of images, animations and drop down menu, and i am thinking of using responsive layout to cater for differences in screen size of desktops only (between 650px and 1200px). hoping to create a mobile version later (i.e if client request for it). what do you think?

Okay... Since you're designing for desktop screens only, and want the site to respond just to desktop differences, you could go responsive.
However, are you sure that the amount of mobile users are negligible? Even if you'll create a mobile version later, those that visit the site now will be served terribly.
So it all depends on the your target audience and the predominant computing device.
If 90% visit the site with a desktop (on a fast internet connection), you have no problem.
If not, just try to create a mobile version simultaneously as UX is very important.
My two cents...

Khaynet:
Nice write up

Thank you! Glad that you appreciate it.

romzyxy:
@op. can microsoft note book b used in the place of note pad. cos i dont av note pad on my system

donromanus: PLS HOW DO I
LOCATE NOTPAD ++.

Grab Notepad++ here: http://www.notepad-plus-plus.org/ download

dlex21:

Please do u av a personal link to learn more about JavaScript, and web design in general... Thanks

No dlex21, not yet.

meggaable:
@ Iyenimofe, please help me out, I am just a beginner on web design..I am having an issue with a front page of a web which I am designing, I want the picture to slide along with each other, I don't know if you understand what I am talking about, in sense that a church website you visit their front banner animate...Please Help.

meggaable, I don't think you should use a slider on a home page especially. It'll be useless to non-smartphone and desktop users. They'll just have a static image. If you are using a m.version though, you could provide an alternative there and still use a slider. To do this you'll need the knowledge of HTML5 and a JavaScript library like Jquery.

Now we can dive into…
The New Semantic Elements.

1) The <header> element
According to the official specs, the <header> element is used to represent “a group of introductory or navigational aids.”
Meaning?
The <header> will contain things like the main navigation of a site, its logo, search bar, e.t.c. So those elements that you’ll place at the top of a webpage that remains constant throughout the site, yeah, they’ll fall under the <header> element.
However, it isn’t compulsory you use it as such. You can also use it for the top of individual sections of a webpage. But using it other places than the top of a webpage could call unnecessary confusion for you (and a search engine) semantically. So I suggest sticking to using it to wrap content that’ll fall in the header of a page. Also note that a <header> tag cannot fall under a <footer>, <address> or another <header> tag.
NOTE: Don’t confuse the <header> tag with the <h1> to <h6> tags which are used for headings of articles, posts, e.t.c.

JohnWeinstein:
Can you please let me know if you are offering responsive website design training ?

One on One?

Moderrator:

Still waiting on a screenshot, we are interested in finding and fixing this bug.

The text in red, why? What if I was viewing it in a 'Java' phone?
I purposely leave the Single Column view on to see how a site (like this) will perform on a 'smaller' device. So?...

Before we dive into the new HTML5 elements mentioned above, let us see whats new in our <head> section of our HTML5 web page.

1) Simplified DOCTYPE: As you know, the DOCTYPE is the first entry in an HTML document. In previous versions of HTML, the DOCTYPE looked like this:
For HTML 4.01
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

For XHTML 1.0
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

However , in HTML5, all this is simplified to:
<!DOCTYPE html>

2) Changes in the <link> tag: Previously, to link a CSS document to an HTML document, we did this:
<link rel=”stylesheet” type=”text/css” href=”css/file.css”>
But now, the type attribute is no longer necessary because CSS is the predominant type of file we link this way. So now it is:
<link rel=”stylesheet” href=”css/file.css”>

3)Changes in the <script> tag: The change is also the same with that of the <link> tag. External scripts used to be written like this:
<script type=”text/javascript” src=file.js”></script>
But since we know that JavaScript is also the most popular of scripts, JavaScript becomes the default script of choice to browsers. Hence, you can now link JavaScripts as this:
<script src=”file.js”></script>

Browser Support for HTML5
HTML5 is not a new comer, so major browsers support it already. You’ll have no problems following along these tuts if use the latest versions of Google Chrome, Mozilla Firefox , Safari, Internet Explorer and Opera browser. I’ll be primarily using Google Chrome to implement codes throughout these tutorials. If the need arises for me to demonstrate cross browser compatibility, I’ll be using Mozilla Firefox.
Also, the mobile versions of these browsers can interpret HTML5.

6) Canvas: This enables us to draw anything, yes anything on our web page. Gone are the days when we were limited to shapes. With canvas, simple lines, arcs, gradients, patterns and even video can be manipulated. However, it does not beat SVG
7) Drag and Drop: Drag and Drop gives power to the user. It allows the user to drag web elements across the page and, yeah you guessed right, drop them.
Offline Apps and Web Storage: Offline Apps introduce the concept of applications being available for use offline while Web storage allows us to store information on a user’s device via the browser instead of on cookies.

What’s new in HTML5?
AS stated above HTML5 aims to present web pages in a way that browsers and search engines get the structure and the actual intent of the author. Hence
1) New semantic elements are introduced:These are the <header>, <nav>, <article>, <section>, <aside> and <footer> tags.
2) New form elements are introduced: New form tags are implemented. Features for placeholders and error messages are also introduced.
3) Support for Audio and Video natively: Audio and Video will now be HTML5 supported. This will rule out the use of external plugins.
4) Geo Location: With Geo location you can detect the present location of your user and any change in their location.
5) SVG: Scalable Vector Graphics (SVG) is an image format that presents images, vector ones, with XML. The major advantage of SVG is that the quality of an image is preserved when it is blown up.

Interesting concept. It'll be useful to non-web devs who want to create forms and they don't know how to. It could also save web devs time when they need a form sharply.
My 2 cents?
1) You gotta work a lot on the mobile site. Viewing it from an Opera browser in a 5-inch Android, it doesn't have the aesthetics to match the concept.
2) Like onyengbu said, signing up before creating a form isn't good enough. Sure you will need some info but could you give us a preview of the capabilities of the form generator first. Could we maybe create the form- fields, dropdown, buttons, e.t.c- and see what our form will look alike. If we love it, we definitely will sign up or even pay.
Gating the form generator when we don't know its full capabilities is not good enough.
My two cents though.

Introduction to HTML5

What HTML5 is
HTML5 is definitely not a new language to you if you’ve come this far. HTML5 is the most recent form of HTML. HTML5’s core aim is to present HTML in a more semantic way. See it as focusing not on the visual layout of a page but on the page’s structure and what it means.

What HTML5 isn’t
HTML5 is not a replacement to HTML 4 and XHTML 1. Although new tags are introduced in HTML5, most HTML4 tags are still kept. So, whenever you work in HTML5, you’ll still be using traditional HTML tags.
Why should you be bothered about HTML5?
Even though HTML5 is the latest version of HTML, it’s not that new. It has been in existence for some years now. So almost, if not all, developers and designers work in HTML5. Coding in earlier versions alienates you from the crowd, literally.

Now, the facts;
1) HTML5 encourages easier coding. As you shall see later, in HTML5, all unnecessary jargon has been omitted and standards that are being used by majority of designers, developers and designers, have been, well, standardized. The rules of HTML5 are also laidback compared to earlier versions.
2) Due to its semantic structure, search engines will ‘understand’ pages written in HTML5 better. This will result to your pages being delivered to the right person and you getting his click. Win-Win.
3) Mobile browsers also have wonderful support for pages coded in HTML5. Hence, you can be rest assured that your pages will be delivered to the mobile users( a large group of internet users) correctly.
4) Knowledge of HTML5 can be used to create Hybrid mobile apps. These are mobile apps that are not written with the native language of a phone. Rather, it is compiled with HTML5, CSS3 and JS that runs in an internal browser in the app.

NOTE: This HTML5 tutorial is meant for those who have basic HTML knowledge and are comfortable with the markup language already. If you don’t belong to this category, head over to page 0

Hello y'all. Welcome back to the “Learn Web Design LIVE on Nairaland” tutorials. It’s been a while since we treated our last topic in the series, JavaScript. We began our series with the HTML tuts, and then we moved to CSS. We then scratched the surface of JavaScript. Due to some issues we were not able to complete JS. No worries though, as we have something up our sleeves.
For now though, and as earlier stated, we shall start a new language in the series- HTML5.
As usual,questions can be asked regarding the ongoing topic. Those who know the answers would try their best to answer the questions. Trolls and Spammers please do not break the flow of the tuts.
Without much ado, let us begin. HTML5, here we come!

For a while now, the web design tuts have been somewhat paralyzed. After the Nairaland tsunami, a sizeable amount of tuts(a large part of JS and some HTML5) went missing.
I have been very busy in these past months on personal projects, so I was not able to repost them. However, I WILL upload the HTML5 section.
I do hope I have enough time to complete the HTML 5 this year...hope. However, be rest assured that this thread...is not dead. See y'all later.
P.S: Keep the questions rolling in! I'll try my best to answer 'em.

zpakln:
@ iyenimofe , please how do I contact you?

You can send me a mail

Keky: align the image externally, how? I don't get pls.

In your style sheet, when you are setting the attributes for the image use:
img{
float:left (or right);
}
...other attributes can be added as well.
Then, in the element after the image, use:
elementname{
clear:left (right or both);
}

Adeyinka12: @iyenimofe,there is problem o,i want to design a webpage in rectagle form i.e is both side will be 80% and i make use of box.i don't get it right.like naijaloaded frontpage.thanks

You'll have to make use of the padding and margin attributes for the div. Refer to The Box Model for more info.