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 Beginners Guide

                                                                                                               Android Operation System: Android is an operating system based on Linux with a Java programming interface. It provides tools, e.g. a compiler, debugger and a device emulator as well as its own Java Virtual machine (Dalvik Virtual Machine - DVM). Android is created by the Open Handset Alliance which is lead by Google. Android uses a special virtual machine, e.g. the Dalvik Virtual Machine. Dalvik uses special bytecode. Therefore you cannot run standard Java bytecode on Android. Android provides a tool "dx" which allows to convert Java Class files into "dex" (Dalvik Executable) files. Android ...
2 comments
Read more

Kotlin and Android

Kotlin is now an official language on Android. It's expressive, concise, and powerful. Best of all, it's interoperable with our existing Android languages and runtime. To use Kotlin in Android Studio prior to version 3.0 you have to manually install the Kotlin plugin. To do so, start Android Studio and open Plugins from the Configure menu . In the opened dialog, search for Kotlin , select the corresponding plugin and press Install . Kotlin for Android Development: Kotlin is a great fit for developing Android applications, bringing all of the advantages of a modern language to the Android platform without introducing any new restrictions. Compatibility: Kotlin is fully compatible with JDK 6, ensuring that Kotlin applications can run on older Android devices with no issues. The Kotlin tooling is fully supported in Android Studio and compatible with the Android build system. Performance: A Kotlin application runs as fast as an equivalent Java one, thanks to ver...
Post a Comment
Read more