Tag: css

placeholder Attribute of Form Field: HTML5

Lets look at placeholder attribute of HTML5 form field.

placeholder-form-attribute-html5

Demo


Here we’re taking 3 input fields of type text, email and url respectively. For each of the input fields we add a placeholder text.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

< !DOCTYPE HTML>
<html>
<head>
<title>Placeholder Attribute: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
<form>
 <label for="name">Name: </label>
  <input type="text" id="name" placeholder="Satish"/> <br />
 
 <label for="email">Email: </label>
  <input type="email" id="email" placeholder="[email protected]"/> <br />
 
 <label for="url">URL: </label>
  <input type="url" id="url" placeholder="https://technotip.com"/> <br />
</form>
</body>
</html>

Here we have 3 input fields with their respective label tags. Note that, the input fields id must match with the label tags for attribute value. Also notice the css file attached to the html file, for aligning the input fields and the labels.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

label{
width: 50px;
        float:left;
}
 
input{
width: 200px;
}
 
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
}

Here we make the label width 50px and make it float left, making room for the input fields. We also fix the width of form to 300px.

placeholder Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=SqJZD0OdT1g]

YouTube Link: https://www.youtube.com/watch?v=SqJZD0OdT1g [Watch the Video In Full Screen.]



Note: These placeholder attributes are not a substitute for label tags. And it’s neither a form validator. It’s used to provide hint to the user for form entry.

Business Card Design: XML & CSS Level 2

Video tutorial to show the design of business cards using XML and Cascading Stylesheet Level 2.

Continuing the tutorial from previous day: Business Card Design: XML & CSS

In the previous tutorial there was no facility to display the labels using CSS.
To over come that problem, we step into CSS Level 2, wherein we include the label information to the presentation layer using CSS level 2 coding.

Business card Content
companyNames.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>[email protected]</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>[email protected]</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>

There is no change with the companyName.xml file.
To know more details, please visit Business Card Design: XML & CSS

Business card Styling Information + CSS Level 2 coding
Style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}
 
Name 
{
    display: block;
    font-weight: bold;
}
 
phone 
{
    display: block;
}
 
company
{
    display:block;
}
 
email
{
    display: block;
    color: Green;
}
 
email:before { content: "email: " }
phone:before  { content: attr(type) ": " }
phone[primary]:after { content:"(" attr(primary) ")" }

Last 3 lines of coding is the only thing changed from previous day tutorial.
Those 3 lines are CSS Level 2 coding!

using :before pseudo class selector we tell the parser to include email: as content before displaying the actual email id.

similarly, using :after we include the label after the actual content.

attr(type) this selects the value assigned to the attribute type from companyNames.xml file and displays it.
phone[primary]:after There are multiple phone numbers, one of which is made primary. So phone[primary] points to the phone number which has the attribute primary.

Video Tutorial: Business Card Design: XML & CSS Level 2


[youtube https://www.youtube.com/watch?v=GHNx22hRwwM]

YouTube Link: https://www.youtube.com/watch?v=GHNx22hRwwM [Watch the Video In Full Screen.]



I’ve shown CSS Level 2 working on all 3 browsers: Internet Explorer, Mozilla Firefox and Google Chrome.
But some older versions of Internet Explorer doesn’t support CSS Level 2 coding.
To solve this issue( cross browser compatibility issue ), we can make use of XSLT [ eXtensible Stylesheet Language Transformations ]. We’ll see it in coming video tutorials.

Output on the browser
Satish B
home: (91) 9844552841(call me)
work: (91) 9844119841
email: [email protected]
Technotip IT Solutions

Shwetha
home: (91) 123456789
work: (91) 987654321(call me)
email: [email protected]
Microsoft


Business Card Design: XML & CSS

Video tutorial to show the design of business cards using XML and Cascading Stylesheet.

In this example we apply styling to business cards of two people.
The primary information i.e., the content is in XML and the presentation is taken care by CSS.

Base tag or the root tag name is companyNames
and the elements inside root tag is companyName
Other tags present inside companyName tag are Name, phone, email, company.

Example:
Two people are Satish B and Shwetha, they are working in Technotip IT Solutions and Microsoft respectively.

Business card Content
companyNames.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="primary">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>[email protected]</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="primary">(91) 987654321</phone>
    <email>[email protected]</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>

This file has already been connected to a external stylesheet.

Business card Styling Information
Style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 300px;
    border: 5px;
    border-color: gray;
 
 
}
 
Name 
{
    display: block;
    font-weight: bold;
}
 
phone 
{
    display: block;
}
 
company
{
    display:block;
}
 
email
{
    display: block;
    color: Green;
}

Here we make all the elements display as block. Next add some padding and margin..and a light background color.

Video Tutorial: Business Card Design: XML & CSS


[youtube https://www.youtube.com/watch?v=cb3vZ08H3Hw]

YouTube Link: https://www.youtube.com/watch?v=cb3vZ08H3Hw [Watch the Video In Full Screen.]



output on browser

Satish B
(91) 9844552841
(91) 9844119841
[email protected]
Technotip IT Solutions

Shwetha
(91) 123456789
(91) 987654321
[email protected]
Microsoft


Attach CSS StyleSheet To XML Document

Video tutorial illustrating: attaching css stylesheet to XML document to give better appearance to it on the browser. In short: for presentation purpose.

To achieve this, we need to first create a stylesheet file, and attach it or associate our XML file with this stylesheet. We do it with the help of a processing instruction.

Processing Instruction

1

< ?xml-stylesheet type="text/css" href="Style.css" ?>

you can give absolute or relative path in href.

This tells the XML parser that the attached css file has to be referenced while rendering the XML file content.

Complete code
companyNames.xml

1
2
3
4
5
6

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companyname>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</companyname>

Stylesheet code
Style.css

1
2
3
4
5
6

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
}

This way we have separated the content and styling information and made it into two separate files.
Helps keep the XML and Design/CSS coding separate and we could hire separate teams to work on these things.

Video Tutorial: Attach CSS StyleSheet To XML Document


[youtube https://www.youtube.com/watch?v=7WH6dMI_cfE]

YouTube Link: https://www.youtube.com/watch?v=7WH6dMI_cfE [Watch the Video In Full Screen.]



Output on the browser:
IBM, Oracle, Apple, Maestro, Microsoft ..

Output will have red color with 18px size and with font-family of verdana.

Text Stacking: CSS & JavaScript

Develop and demonstrate, using Javascript, a xHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible.

Video Explaining the program:



YouTube Link: https://www.youtube.com/watch?v=vTkIcqEaOs8 [Watch the Video In Full Screen.]


HTML coding:

Info:
Div tag is a block-level element.

In HTML code we have used unique ids for the div tags: one, two, three. The same ids have been used in CSS(to assign style information) as well as in the Javascript(for functionality) file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 
<html>
 <head>
  <title>Text Stacked On Top Of EachOther: CSS & JavaScript</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <script type="text/javascript" src="stacked.js"></script>
 </head>
 <body>
 
<div id="one" onmouseover="moveIt('one')">
Microsoft Dominates!<br />
Windows 7 is getting popular!
</div>
 
<div id="two" onmouseover="moveIt('two')">
Apple may Dominate!<br />
iTV may takeoff in the market!
</div>
 
<div id="three" onmouseover="moveIt('three')">
Google Rocks!!<br />
We all know that!!!! :-) 
</div>
 
 </body>
</html>

Cascading StyleSheet(CSS) coding:
In CSS, we assign Verdana as the font for the entire body, with font size as 24 points(pt).
Next, using the id(present in the HTML code below) we assign styling information to each div tags.
Positioning is absolute.
We have varied 20 pixels from top and 20 pixels from left for each div, so that the text overlaps on each other leaving 20 pixels(from top as well as from left) of space for mouse over.
We have also changed the background-color and foreground-color of the text inside div tags, so that each div stands out from the other.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
body {
font-family: verdana;
font-size: 24pt;
}
 
#one {
position: absolute;
top: 200px;
left: 300px;
 
background-color: black;
color: white;
}
 
#two {
position: absolute;
top: 220px;
left: 320px;
 
background-color: cyan;
color: black;
}
 
#three {
position: absolute;
top: 240px;
left: 340px;
 
background-color: pink;
color: yellow;
}

JavaScript coding:
In Javascript, we declare a variable called topLayer and assign it the value three(which is a id name).
Next inside the function moveIt we declare another variable called oldTop, in which we store the style information of topLayer variable(which contains id “three”).
Similarly, in variable newTop we store the style information of the toTop(which we receive as parameter to moveIt function).

We can also combine those two lines of code as shown below:

1
2
3

 
    var oldTop   =   document.getElementById(topLayer).style.zIndex = "0";
    var newTop =   document.getElementById(toTop).style.zIndex = "10";

Note: Higher the value of z-index(in CSS) or zIndex(in javascript), nearer it looks to the user viewing it.

In javascript, while writing style property name, make use of capital latter immediately after the hyphen and eleminate the actual hyphen.

Example:
In CSS: background-color
In JS : backgroundColor

In CSS: z-index
In JS : zIndex

In CSS: font-weight
In JS : fontWeight

In CSS: border-style
In JS : borderStyle

etc, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
var topLayer = "three";
 
function moveIt(toTop) {
 
    var oldTop   =   document.getElementById(topLayer).style;
    var newTop =   document.getElementById(toTop).style;
 
    oldTop.zIndex   = "0";
    newTop.zIndex = "10";
 
    topLayer = document.getElementById(toTop).id;
 
 
}

At the end of the function we reset the value of topLayer variable with the id name which invoked the function.
Note:
Make sure to save all these (.html, .css and .js : HTML, CSS and Javascript) files in the same folder or else change the path in the header as appropriate.