Skip to main content

Sample HTML5 Structure







HTML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it’s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.


Can develop apps for Android, BB, Windows, IPhone.


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section { display: block; }
#container { width:900px; margin:auto; background-color:white; }
header { background-color:#666; }
nav li { display:inline; padding-right:1em; }
nav a { color:white; text-decoration:none; }
nav a:hover { text-decoration:overline; }
h1, h2 { margin:0px; font-size:1.5em; }
h2 { font-size:1em; }
footer { background-color:#999; text-align:center; }
</style>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
</head>
<body>
<div id="container">
<header>
<h1>Sample HTML5 Structure</h1>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</header>
<section>
<hgroup> <h1>Main Section</h1> <h2>This is a sample HTML5 Page</h2> </hgroup>
<article> <p>This is the content for the first article</p> </article> <article> <p>This is the content for the second article</p>
</article>
<p>This is the content for the second article</p> </article>
</section>
<footer>
<p>This is the Footer</p> </footer> </div> </body>
</html>




As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc. The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.

The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.



Can Fix The Footer:

EX:-

#footer{

position:fixed;

left:0px;

bottom:0px;

height:30px;

width:100%;

background:#999;

}




Check Out:-

http://html5tutorial.info/html5-canvas-rect.php

http://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css




Thanks,

Sujay

Comments

Post a Comment

Popular posts from this blog

Google re-branded the support Android libraries to AndroidX

It is important to note, you cannot mix AppCompat and Jetpack in the same project. You must convert everything to use Jetpack if you want to upgrade. The support library artifacts are being deprecated and all future development is going into AndroidX , so there's no avoiding this migration. Alan Viverette sums this up nicely: “There won’t be a 29.0.0, so Android Q APIs will only be in AndroidX” The stable release of 28.0.0 will be the final feature release packaged as android.support . All subsequent feature releases will only be made available as androidx-packaged artifacts. Below tips will give you a clearer transition path. The current version of AppCompat (v28.x) is exactly the same as AndroidX (v1.x). In fact, the AppCompat libraries are machine generated by changing maven coordinates and package names of the AndroidX codebase. For example, android.support.v7.app.AppCompatActivity is now androidx.appcompat.app.AppCompatActivity For a complete listi...
Post a Comment
Read more

Android Studio Release Updates

JetBrains's  Android Studio’s 10 year anniversary      I remember the major change which has taken place since I started learning android is Android Studio migration from Eclipse. Android Studio’s 10 year anniversary. Watch official youtube : Android Studio’s 10th birthday: our favorite moments!      In December 2014 , Google launched Android Studio, Google's official Integrated Development Environment (IDE) based on IntelliJ and it discontinued the Android Developer Tools (ADT) plugin for Eclipse, which means it’s time to leave eclipse behind.        Fortunately, we had simple solution to migrate, Android Studio offered a better experience for Android developers and its migration functionality does most of the work for you.      Open Android Studio and click on the option:  Import project (Eclipse ADT, Gradle, etc) Before Android studio      1. users had to go download a JDK, then download Eclipse...
Post a Comment
Read more

Firebase with android: An Overview of Products and Usage

Introduction: In the evolving landscape of mobile application development, understanding user behaviour, managing user identity, and delivering personalised communication are critical components of a successful digital product. Google provides a suite of powerful tools through Firebase and Google Analytics that help developers build, improve, and grow their applications efficiently. This article explores Google Analytics , Firebase Authentication , Firebase Cloud Messaging (push notifications), and other core Firebase products , along with their practical uses. Google Analytics Google Analytics for Firebase is a free app measurement solution that provides insights on app usage and user engagement. Unlike traditional Google Analytics, this version is tightly integrated with Firebase services, making it highly useful for mobile and cross-platform apps. Key Features: Event tracking : Automatically or manually track user actions like screen views, button taps, purchases, etc. User segm...
Post a Comment
Read more