#html 5 tutorials

XML with DTD Schema

In this tutorial we are going to create an XML file and a schema as well. So let’s start with our XML with DTD Schema.

Steps are as follows:

Create a new folder on the desktop named “Sec4_Ch20”.

Now open a new notepad++ file and save it as “movies.xml” in the newly created “Sec4_Ch20” folder.

Write the following code in the file “movies.xml”.

<?xml version="1.0"?> <movies>   <movie>     <title>The Godfather</title>     <year>1972</year>     <genre>Drama</genre>     <director>Francis Ford Coppola</director>   </movie>   <movie>     <title>Superbad</title>     <year>2007</year>     <genre>Comedy</genre>     <director>Greg Mottola</director>   </movie>   <movie>     <title>The Departed</title>     <year>2006</year>     <genre>Drama</genre>     <director>Martin Scorsese</director>   </movie>   <movie>     <title>Saving Private Ryan</title>     <year>1998</year>     <genre>Action</genre>     <director>Steven Spielberg</director>   </movie>   <movie>     <title>The Expendables</title>     <year>2010</year>     <genre>Action</genre>     <director>Sylvester Stallone</director>   </movie> </movies>

After writing the above code, save the file and open it with internet explorer browser. The whole code is displayed as it is. The movies.xml file opened in IE is shown below:

fig 1

The XML file can be styled using CSS also.

After creating the xml file we would like to validate it. For this we can use xml validators.

Open your browser and search for xml validator.

W3schools has xml validator. You will get a hyperlink “XML Validator – W3Schools”, click on it.

A page will appear which has a block of code below the heading “Syntax – Check Your XML”. A “Validate” button is placed below the code.

Copy the whole code from our “movies.xml” file.

Replace the code in the block of code of xml validator with the copied xml code.

Now click on “Validate” button.

As there is no error in the code, a popup box will appear with a message “No errors found”.

The output is shown below:

fig 2

Now, purposefully delete one of the tag and again click on “Validate” button. You will get an error along with the line number where error has occurred.

The output is shown below:

fig 3

Now it’s time to create a schema using DTD which is Document Type Definition. We will create a separate .dtd file external to the code in movies.xml file.

Create a new text document and name it as “movies.dtd” and open it with notepad++. We can write the DTD code inline to the xml code in the same file i.e. movies.xml also, below the declaration statement.

Type the format that we need in order to validate each element in movies.dtd file. Syntax for validating an element is as follows:

<!ELEMENT ElementName Type>

Here, ELEMENT is just a word. ElementName will be the name of the element to be validated.

Type can be of many different things:

One thing, if an element does not contain content, it should be specified as an empty element in the place of Type.

Next, if an element contains other elements and no content, then it should be specified in Type.

A mixed type is also there which is a combination of child elements and character data.

Last type can be anything, any content allowed by DTD.

Let us understand a code with xml and DTD schema. Just have a look on the code given below:

<?xml version="1.0"?> <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <note>   <to>Tove</to>   <from>Jani</from>   <heading>Reminder</heading>   <message>Don't forget me this weekend!</message> </note>

In the above code, the statements in

<note>--</note>

tags are the xml statements,

<note></note>

being the root element.

The statements starting with

<!ELEMENT>

are DTD schema statements validating xml part of the file.

<note></note>

contains child elements in it like to, from, heading, etc.

To validate each xml element we use DTD schema. For root element note, the DTD schema

<!ELEMENT note (to,from,heading,body)>

is used. Here, note is the root element and this root element does not directly contain data, it contains child elements. So these child elements are specified as type in the paranthesis i.e. (to, from, heading, body).

Next the child elements directly contain data in it, so it has #PCDATA as the type. #PCDATA means parse data that can be read by the system.

All the child elements that contain directly the content without any other element has the type as #PCDATA.

Let’s write our own DTD document. Open our “movies.dtd” file, write the following code in it and save the file:

<!DOCTYPE movies[   <!ELEMENT movies (movie)>   <!ELEMENT movie (title,year,genre,director)>   <!ELEMENT title (#PCDATA)>   <!ELEMENT year (#PCDATA)>   <!ELEMENT genre (#PCDATA)>   <!ELEMENT director (#PCDATA)> ]>

We have our xml code in movies.xml file and DTD schema in movies.dtd file. This DTD schema will validate the xml code only if both the files are linked to each other. So to link the two files, we need to declare the file movies.dtd in the file movies.xml below the xml declaration statement as shown below:

<!DOCTYPE movies SYSTEM “movies.dtd”

Thus we declared the external DTD file in the xml file.

Now again follow the steps from 6 to 11 and see if our movies.xml file is validated or not. Replace the DTD linking statement in movies.xml code with the DTD schema code in the xml validator block for validating purpose.Here we are validating our XML with DTD Schema

HTML5 and Mobile Phones/Mobile Apps

Last time we learned about Application Cache and its uses. Today we are going to learn something about HTML5 with mobile apps. There is a lot of controversy among the developers between HTML5 and Native Apps. First let’s see what are these native apps? It’s a software developed specifically to run on the architecture of a mobile device and which is downloadable, purchased and upgraded through a central distribution portal (such as the App store).

HTML5 vs Native Apps:

Compared to older versions of HTML, HTML5 makes it much easier to create full featured web applications that can be updated remotely with new functionality without requiring users to download and install an update each time.

HTML5 helps reduce the functionality gap between mobile sites and apps.

It is much cheaper to develop HTML5 mobile apps than it is to create native apps.

Reason is that, for iOS and iPhone apps, the developer need to know objective “C programming”, for android, they need to know “java” and for windows phone they need to know “C#”.

These developers cost a lot more than an HTML-javascript web developers.

Another reason is that the cost of the actual software to develop the net of apps is extremely expensive and HTML5 uses open source IDE’s and is cheaper from software point of view.

HTML5 mobile apps is catching on fast and some say it will replace native mobile apps and the App Store.

Hybrid Apps:

A hybrid mobile app takes an HTML mobile app and inserts it inside a native wrapper (container).

Hybrid apps, like native apps, run on the device, and are written with web technologies like HTML5, CSS and JavaScript. Hybrid apps run inside a native container on a mobile device.

A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as camera and local storage.

It is shown in the figure below:

fig 1

Here we have shown two tables, which give us some information of which different API’s are available for which mobile browser.

Mobile browsers are more complicated than desktop browsers, because there are different versions of different browsers on different phones of different platform.

A table with browsers supporting applications like Web Storage, Application Cache etc. is shown below:

fig 2

A table with browsers supporting applications like Canvas, SVG etc. is shown below:

fig 3

Using Frameworks:

To create a mobile App with HTML5 many frameworks are used.

The popular HTML5 friendly Mobile Frameworks are:

Titanium

Sencha Touch

Sproutcore Touch

PhoneGap

PhoneGap framework is mostly used by beginners.

Using Application Cache:

When we are creating or building an html5/native hybrid app, we need to use appcache because we have a splash (startup) screen and icons on the phone and we want to use it without connecting to the internet.

To do this, we need to use a server where we can change the HTTP headers on our files.

We can use any Apache server and add something to the .htaccess file.

HTML5 Markup Layout:

Here is an example of a hybrid HTML5 for apple iphone app.

<html> <head> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <link rel="apple-touch-icon" href="iphone-appname-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/> <link rel="stylesheet" href="style.css" type="text/css" media="screen,mobile" title="main" charset="utf-8"/> <title>Your App Title</title> </head> <body>      <!--Put your markup here-->    <script type="text/javascript" src="yourjavascript.js"></script> </body> </html>

This is a code for an app that will run on an apple iphone. The working is done using javascript.

Icons and Start Screens:

For any kind of hybrid or native app, we need certain aspects to fit in with the other apps.

Icons should have specific size.

For example :

iphone icons should be 57px*57px size.

Splash or startup screen should be 320px*460px in size and should be in .png or .jpg format.

Introduction to CSS

Hello friends, Today I have come up with an interesting topic that we had discussed to learn in some previous chapters.

Yes, this session is about CSS (Cascading Style Sheets).

We know full form of CSS very well now. But what is it and what is its requirement in web development?

Let’s find answers for these questions.

What are Cascading Style Sheets?

CSS is a”stylesheet” language that is used to describe the presentation semantics of a document that is written in a “markup” language such as HTML.

Remember CSS is a “stylesheet” language, not a “markup” or “programming” language. It is used only to design a document for presentation and not to write the content.

CSS was created to separate the formatting and design from the markup or content of the document.

The CSS specifications alike HTML are maintained by the World Wide Web Consortium (W3C).

There are two reasons behind using CSS files.

It is always good to separate the presentation from the actual content/logic.

Due to separated design file and content file, it is easy to know the file size of the html document (content document). It is a finished and cleaner way to do it.

Now, imagine that you have created a HTML document without any designing or formatting.

After creation of the content of the document, you wish to sit and design it.

You have 2 ways to do it:

Inline styling

Cascading Style Sheets

We have used inline styling many times, we will talk about CSS today.

For CSS you need to create a .css file and then link it with the HTML document file.

We will see later how to code a .css file, but now we will just see how to link it with the HTML file.

Linking an External StyleSheet:

The following syntax is used to link a stylesheet to an HTML document.

Syntax: - <link rel=”stylesheet” href=”path/to/file.css” type=”text/css”>

The above syntax contains the link tag which is to be written in the HTML document to which the .css file is to be linked.

link tag must be placed in the head section of the HTML document.

link tag is a singleton tag, having no end tag.

“rel”, “href” and “type” are some of its attributes. They can be in any order.

Description of the attributes:

rel: - “rel” attribute defines a relationship between a document and an external resource. rel=”stylesheet”, in the above syntax specifies that the file to be linked is a stylesheet used to format the html document.

href: - “href” attribute specifies the location of the resource file to be linked with the HTML document.

If the file to be linked is within the folder where HTML document is saved; just put the name of the resource file as the value of “href” attribute.For Eg:

<link href=”file.css”>

, since both have the same address.

If the file is in a separate folder within the folder where HTML document is placed; include the folder name containing the .css file in the path. Generally the .css files are placed in a separate folder named CSS. For Eg:

<link href=”CSS/file.css”>

If the .css file is somewhere else outside the folder where HTML document is placed; use the whole path of .css file as the value of “href” attribute.

type: - specifies the type of the linked document. The “type” attribute is not compulsory.

We can have a look on link tag example:

<html> <head>         <title>Test Page</title>          <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body>           <h1>This is My First Header</h1>           <p>This is My First Paragraph</p> </body> </html>

Here, this code will link “styles.css” file to “Test Page” html document.

Some important elements:

span tag and div tag are some important elements that are used for generic organizational or stylistic applications.

div tags and span tags are used for custom styling.

These tags actually don’t have any specific meaning. I mean, they don’t make any change in the appearance of the html content as it is done by using any heading tag.

They are used just to separate a certain block of code, so that we can apply styles separately to different blocks of code.

div tag is a block level element and span tag is an inline level element. That means, content inside starting div and ending div tags will always start with a new line which is not the case with span.

When we finish defining our blocks in the html document using div tag and span tag, we can provide them with some identification by using “id” and “class” attributes.

div tag and span tag are most commonly used with class or id attributes.

“id” attribute is used to give a unique identification to a code block, or you can say that it is used to specify a style to a single (unique) element.

“class” attribute is used to specify a style to a group of elements.

Syntax for this in html file is:

<div id=”header” class=”space”>        <!—your code for the header div--> </div>

You can have only one “id” for a block, but you can have more than one class in a block. This is demonstrated as follows:

<div id=”header” class=”space anotherclass”>        <!—your code for the header div--> </div>

Here in above code, class=”space anotherclass” indicates that the above div has two classes, “space” and “anotherclass”. That means, the contents of the div tag have the styles, applied in both “space” and “anotherclass”.

Let us learn the syntax of CSS.

CSS Syntax:

First let us define the part of html file having id and class.

<div id=”header” class=”space anotherclass”>     <!—your code for the header div--> </div>

Now, let us define the styling for id and class used above, in a .css file.

#header   {       width:800px;       height:100px;       background:#000;   } .space   {       margin-bottom:10px;   }

We finished with our styling; now let’s try to understand it.

In html file, the block with id=”header” and class=”space” will get styled as specified in the .css file.

Let us understand how .css file has been coded.

The “id” attribute used in div tag or span tag in html file is denoted by “#” sign followed by its value, in .css file.

Hence the statement (#header), here “#” is used because it is an “id” and “header” is the value of “id” attribute.

“header” is given the property of width, height and background color. This will style the block having id=”header” with 800px width, 100px height and black background colour.

In the same way every “class” attribute used in div tag or span tag in html file is denoted by a period (.) followed by its value, in .css file.

Hence in the statement (.space), period (.) signifies the class followed by one of its value “space”.

In the above code, class space is given the property of bottom margin as 10px.This will show a margin of 10px to the bottom of the block.

HTML Tables and Lists

Once again Hi friends! today I am back with some more information.

In this chapter we will deal with some interesting part – creating tables and lists in a webpage.

HTML Tables:

Tables are nothing but the tabular format, a combination of rows and columns just like a simple Microsoft Excel sheet.

What are tables used for?

Tables are used for displaying the data in a tabular format.

Next, it can be used to compare and contrast some topics.

Tables can also be used for designing and layout of a webpage.

But now days this practice is termed to be a bad practice, because for designing and layout purpose you can use CSS (Cascading Style Sheet).

So, remember that all sort of designing and layout i.e. headers, footers etc. should all be done using CSS.

Simple Table Syntax:

We have understood what is table and for what purpose it is used.

Now we will understand how it is created.

HTML has some tags used to create a table.

These tags are table tag and end of table tag, tr tag and end of tr tag and td and end of td tag.

In the syntax for creating table we have a table tag.

Within table tag we have a tr tag.

Then after that we have td tag within tr tag.

The syntax for creating table is as shown in the figure:

fig 1

Output will be somewhat like this:

Content Content Content Content Content Content Content Content Content

Come on; now let us understand the syntax.

First of all, let us understand the full form of the tags.

tr – table row.

td – table data.

table tag and end of table tag are used to create a table.

table tag is the starting tag and end of table tag signifies end of the table.

A table contains rows and columns.

tr tag and end of tr tag are used to create rows in the table.

The number of tr tags in the syntax specify the number of horizontal rows in the table.

The columns and content in the table is created using td tag and end of td tag.

The number of td tags in a tr tag specify the number of columns in that particular row.

Thus, starting tag for tr starting tag for td Content end of td tag starting tag for td Content end of td tag starting tag for td Content end of td tag end of tr tag

creates three columns in a row, having “Content” as its data.

Note one thing, by default table has no border.

For applying border, you need to use “border” attribute of table tag.

Eg: To get a single line border, inside starting of table tag you need to use border attribute having value =1.

This will give a single line border to the table and as the value of the attribute increases, it will increase the border width.

Now, let us take a glance at HTML lists.

HTML Lists:

List as tables is used to show information in the list format.

What are lists used for?

Lists are used to group together related pieces of information.

It is used for ranking the data; I mean numbering or bulleting the data according to its rank.

It can also be used for designing and layout formatting.

For an example: You can design a menu on webpage using lists.

HTML contains three types of lists.

Ordered List

Un-ordered List

Definition List

Ordered List – Ordered list has numbering done for each item or data.

Un-ordered List – Un-ordered list has bullets for each item.

Definition List – This List is somewhat of the form having a definition heading and then its definition below. It is normally not used frequently.

Now, let’s learn the syntax for Lists.

Lists Syntax:

Ordered List:

Syntax for ordered list is as shown in fig 2

fig 2

OUTPUT:

1.Content 2.Content 3.Content

ol tag and end of ol tag are used to create one ordered list.

By default numbering starts from 1.

li denotes “list item”.

li tag and end of li tag specify the items in the list.

2. Un-ordered List:

Syntax for un-ordered list is as shown in fig 3.

fig 3

OUTPUT:

•Content •Content •Content

ul tag and end of ul tag are used to create one un-ordered list.

By default “disc” is used as bullet for every item.

li denotes “list item”.

li tag and end of li tag specify the items in the list.

3. Definition List:

Syntax for definition list is shown in fig 4 below.

fig 4

OUTPUT:

Tea -      A hot beverage. Ice-cream -      A dessert.

dl and end of dl tag are used to create one definition list.

dl tag is used in conjunction with dt tag (definition term) and dd tag (data description) tags.

Creating a HTML Webpage

Hello friends! We will try to create a webpage using HTML.

Friends we will now just try to make a webpage using whatever we learned previously.

To create a HTML webpage, the editor you can use, is the simple notepad or notepad++ which is free to download.

Just open Google and search for “download notepad++”.

In this webpage, we will be showing a heading, a paragraph and an image.

After that we will use the inline style attribute for styling the page.

The final webpage will look like this:

fig 1

Let us start our work by following the steps below.

Open a notepad++ editor:

First thing to create a webpage is to open a notepad++ editor.

Save the file before you start writing the code, giving it name as index.html and then click on Save button as shown in fig 1.1.

fig 1.1

Open the webpage in browser. You can use any browser viz. Internet Explorer, Mozilla Firefox, Google Crome etc.

We will use Internet Explorer.

Steps for opening “index.html” in browser are:

Open Internet Explorer.

Click on File->Open->Browse.

Browse your file and select it.

Click on Open->OK.

Page will look like this.

fig 1.2

You will see nothing in it except the address of “index.html” in address bar, because still code is not written.

You can view the source file i.e. the code file of this page by clicking on “View” on menu bar and the on “Source”. For every browser, viewing source file has different steps.

Writing HTML code in notepad editor:

Let us now write the code step by step.

fig 2.1

Now let us try to understand this code:

Step (1) indicates that, we are using html language to design this webpage. If we were using xhtml,we would have written it as “DOCTYPE xhtml”

Step (2) is a starting tag of html page.

Steps (3), (4) and (5) define the header section.

The title given within the head is showed on the title bar of the browser.

This—is optional. If you don’t give any title, the whole address of the html document will be shown on the title bar of browser instead of the title of the webpage, exactly as it is shown in the address bar of the browser in fig 1.2.

You can see it in the figures below that, due to header section, only the title is shown on the title bar and the webpage is blank.

fig 2.2 fig 2.3

Steps (7) to (11) is the body section, it is the actual content of the webpage.

In body section step (8) is the heading given in h1 tag and end of h1 tag.

The size of the heading tag is decided by the browser, h1 tag being the largest and h6 tag being the smallest.

The heading shown in step (8) will be viewed as below.

fig 2.4

fig 2.5

After the heading we have a paragraph written in p and end of p tag in step (9).

It appears below heading on a new line.

The code and output for it is shown below.

fig 2.6

fig 2.7

Next we have shown an image of Christmas greeting in step (11) in fig 2.8.

img tag is a singleton tag or unpaired tag.i.e. It does not have an ending tag.

Singleton tags can be written in 2 ways:

Only starting tag with attributes

Starting tag with attributes and then a trailing slash (/).

But the one with trailing slash is written in xhtml and not in html.

Here we are using html, so we have coded img tag as shown in figure:

Here img tag has 2 main attributes,

src – source

alt – alternate

“src” is used to get the source; I mean the path of the image location.eg: src=”D:\Documents and Settings\Shri\Desktop\download\christmas pics\christmas-greeting-card.gif”

“alt” is used as the alternate for the image. That means, if the browser has some problem in displaying the image, it will show the alternate text instead of the image.eg: alt=”Christmas Greeting”

This was for html ,but if we were using xhtml , we would have given a trailing slash (/) for the img tag.

Let us view the code and output:

fig 2.8

fig 2.9

This is the end of our webpage designing, it is good, but if we apply some style to it, it will look better.

So friends let’s start styling our webpage.

Styling the webpage:

To apply style, first thing is to divide the webpage into blocks.

div and end of div tag is used to define a block.

When we apply style attribute to the tags, the code will look like this.

fig 3.1

body tag and div tag styling:

fig 3.2

Here, we have given style to the whole webpage body in the body tag; style has following selectors: style=”margin:0;background-color:green;color:white;”

Here, margin:0 ->means no margin is left on any side. You can compare between the output below and the output before styling. You will understand the difference.

background-color:green -> gives green colour at the background of the page.

color:white -> foreground color i.e. the colour of text becomes white.

You can give colour name as well as the hexadecimal value of colour.

Hexadecimal value for white colour is “ffffff” and that for black colour is “000000”.

The style selector width in div tag specifies the width of the content as 510px.

fig 3.3

h1 tag styling:

Here, h1 tag is styled by giving it margin,background-color and padding.

The selectors used for style in h1 tag are :

style=”margin:0;background- color:#53324d; padding:5px;”

Here, margin specifies the outer space of the heading.

Padding specifies the inner space of the heading block.

First you see the output, and then I will explain the difference between margin and padding.

fig 3.4

Now if we write h1 tag with the following change in the style selector value : style=”margin:30px;background-color:#53324d;padding:5px;”

I have changed margin from “0” to “30px”.

The output will look like this.

fig 3.5

You can observe the difference in fig 3.4 and fig 3.5.

When the margin is changed from “0” to “30px”, the space between the top margin of page and the heading is left. This space is outer to heading block.

Now, again if we change the values of selectors of style in h1 tag style, by changing its padding from “5px” to “30px”.viz. style=”margin:0;background- color:#53324d; padding:30px”

The output is shown below:

fig 3.6

Now to identify the difference between margin and padding, observe fig 3.4, fig 3.5 and fig 3.6.

You will understand that in fig 3.5 the outer i.e. the space near to margin have been left by 30px.This is because of style=”margin=30px;”.

Next, in fig 3.6, the inner space i.e. the space around the heading having coffee colour has been increased by 30px above the heading as well as below the heading.This is because of style=”padding=30px;”.

p tag styling:

p tag tag has been given same style as that of h1 tag.

Here, p tag is styled by giving it margin, background-color and padding.

The style selectors are shown below : style=”margin:0;background-color:#000000; padding:5px;”

The output is shown as below:

fig 3.7