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 http://serversfree.com
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 database.to 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 fields.now 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
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.
Title : Sections and Outlines of an HTML5 Document. Details:Technology : HTML5/JavaScript Completion Time: 1 Hour Difficulty : easy Description : I am going to explain some new elements in HTML5 allowing web developers to describe the web document with standard semantics. Problems solved in HTML5 compared to HTML 4 1)HTML5 removes the need for <br /> <div> elements from the outlining algorithm by introducing a new element,<br /> <section>,the Html Section element. 2)Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements (<article>, <section>, <nav> and <aside>) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings. 3)Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g., <h1> Justine</h1> <h2> Les Malheurs de la Vertu</h2> creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the <hgroup> element that hides all the heading elements except the first one of the highest rank (e.g., <hgroup><h1> Justine</h1> <h2> Les Malheurs de la Vertu</h2> </hgroup> creates the outline 1. Justine). 4)In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the <aside> element allowing such sections to not be part of the main outline. 5)Again, in HTML4, because every section is part of the document outline, there is no way to have section containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three specific sections elements: <nav> for collections of links, such as a table of contents, <footer> and <header> for site-related information. Here is an Example for Showing Basic Html5 Elements(<section>,<article>,<header>,<nav>,<footer>,<aside>): <section> : Our Home page has been divided into number of sections which consisits of header,article 1,article 2 and footer.we have innersections also where we can embed animations inside section , we can write articles inside section element for more details , please go through the code , demo and image below.
From , the above image we can see <header>,<nav,<article>,<aside>,<footer> and some animations where a girl rides a bicycle,birds flies in the sky. All this elements are aligned with particular space looking the code our body of the page starts with <section> tag with id="wrapper" for style and this section consists <header>,<nav>,<article>,<aside>,<footer> elements. <header> : Next going through code we have <header> element where place some logo there. <article> : We have article tag for writing some articles like some tutorials,stories etc. <aside> : We have this element for writing some notes side to our articles or displaying some advertisements. <footer> : We have this tag for writing some copy write notices or linking up some back links for our sitemap index. animation : I have included some sections which wraps css3 elements or style elements using id's assigned in the css style sheet. Index.html
We Provide All Domestic academic admissions for B.Tech,M.tech,Mca,Mba,Bds,Mbbs through out the country.we provide admissions for councilling fee only with out any donations,we look after accomdation along with career guidence.we are developing mobile app for colleges and students to communicate with each others and get admissions online from your mobile only.we provide online tutorials for students who want to learn new technologies with out any fee
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 fields.now 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.
