Html5 Tutorial - Future Technology

Wednesday, 17 July 2013

HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql part 1

HTML5 Tutorial - Create your own blog in minutes using html5,css,php and mysql.

/ Hi friends, I am going to explain you how to create your own blog using html5,css,php and mysql. Requirements : 1) Basic knowledge on html5 and how to use new elements. 2) Basic knowledge on html5 and how to use new elements. 3) Php and mysql hosting(PhpMyAdmin). 4) Notepad++ for editing code. Get a free PHP,MySql account for this project from here Now you got all your requirements for free, now go to control panel and create a database,and create one user and add the user to created create database you go to advanced tab in control panel and click on mysql databases icon as shown below. Next enter phpMyAdmin, create a new table for storing blog items. Now Create a table with xyz name and add Blog Title,Description,Image fields. After creating table you have to insert values in to data base by creating one admin panel or one html form to insert data. I have allready written one example showing how to insert form data to php mysql database. Here is the example link to create it and add data to database table. Please check How to insert form data to mysql data base using php For now i will tell you one simple step how to insert data to table directly. Click on table name right side and click insert button and form appears according to your insert data to our example. Now convert the form data to xml service so, that we can use the data where ever we want to use. For converting mysql data to xml service using php please visit our tutorial converting mysql table data to here Ok now we are ready with our back end services. Now we have to concentrate on front end i.e mostly html5 and css. Here is the HTML5 code for Placing header,content,article,section,aside and footer.

Html5 Tutorial - Future Technology

All Rights Reserved to ss consultancy.
Here is Javascript used to parse xml file and display results in required fields.

Here is css file to align html5 elements.

Ok you are done, Check here for demo. I will update part 2 as soon as posible please write comments or queries and i will solve them.

Tuesday, 16 July 2013

HTML5 Tutorial - Header Element

Header Element

As we have seen Recent growth of HTML5 and its adobtion by web professionals.With in HTML5 specification we have seen there is more number of tags and elements added , in this we are going to discuss one of the element HEADER which i am going to explain in my post.
on a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the header element. What does the element represent? According to the spec the header element represents “ a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. It is important to note that the
element doesn’t introduce a new section but is the head of a section. You should also note that the
element should not be confused with the element. Where would I use the
element Well the obvious place to start would be at the beginning of your page. We we can start with something like this that includes your primary page heading.

The most important heading on this page

With some supplementary information

An important point to note is that you are not restricted to using one header element per site. You can use multiple headers, each of which will then become the
for that section of the document. You could therefore have…

The most important heading on this page

With some supplementary information

Title of this article

By Richard Clark

...Lorem Ipsum dolor set amet...

Also note the use of two h1‘s within that piece of html, this is perfectly valid in HTML 5 (and HTML 4) but will cause issues with accessibility, so we advise caution if you have a large number of articles on a page. We will cover this in more detail in another post. What is required in the header element We now know that we can have multiples headers in a page but what are the must have’s within the element in order for it to validate? In short, a header typically contains at least (but not restricted to) one heading tag (h1 – h6). You can also include the hgroup element but we’ll discuss that more in another post (read more about the hgroup in the spec). The element can also contain other content within the document flow such as a table of contents, logos or a search form. Following a recent change to the spec you can now include the nav element within the header. Styling the header One short point I’d also like to cover is that in order for the majority of browsers to render the header element as a block level element you will need to explicitly declare it as a block in your CSS like so: header { display:block;} In fact you will need to do this for the majority of block level elements in HTML 5. Just as soon as browsers make it default we’ll let you know so you can save those precious bytes from your CSS. In the meantime be sure to keep up with what has or hasn’t been implemented in layout engines on this wiki. Conclusion In summary header give us some great added semantic value in order to describe the head of a section.