Pages

Thursday, April 15, 2010

Workshop 6: Example of Text Alignment


Text Alignment
This example is about how you can gives alignment of your website. It’s very easy to use alignment of your paragraph.
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">April, 2010</p>
<p class="main">This subject is about to learn basic function of HTML,CSS and PhP. This subject gives me a lots of idea about infrastructure development of E-systems </p>
<p><b>Note:</b> Try to resize the browser window to see how justify works.</p>
</body>

</html>

After Resize the page the output is:





Reference

http://www.w3schools.com/css/css_examples.asp
Posted by at 3 comments:

Workshop 5: Example with CSS

ITC594 Study Guide A2005
Example with CSS
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>ITC594-E-systems Infrastructure Development.</p>

</body>
</html>



The Output of this Example with CSS:
          In the first example you can see the HTML code without CSS. CSS can enable appearance and site layout of the pages. In the second example you can find the differences.
Posted by at 2 comments:

Workshop 4: Examples without CSS

ITC594 Study Guide A2005
Example without CSS

ITC594 Study Guide A2005
ITC594 Study Guide A2005

<html>
<body>
 <h1>HTML example!</h1>
<p>ITC594-E-systems Infrastructure Development</p>
<p>Cheess!!!!!!!!!</p>
</body>
</html>



This example is display only title of HTML example and in another line display ITC594-E-systems Infrastructure Development. Next line it display Cheess!!!!!! 
The Output of this example is blow:






Posted by at 3 comments:

Workshop 3: Types of Style Sheet


1.    Internal style sheet
It is mainly used when a single documents has unique style. It defines in head section of the HTML page, by using the <style> tag.


Example
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
2.    External Style Sheet
              It is applied to many pages. You can change the look of the entire web sites. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section. The style sheet must be saved in .css form.
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

3.    Inline Style
               To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
Example
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Reference

http://www.w3schools.com/css/css_howto.asp
Posted by at 2 comments:

Workshop 2: CSS-Class Id and Class


CSS Id and Class
           The Id is used to specify a style for a single, unique element.
          The id selector uses the id attribute of the HTML element, and is defined with”#".
Example
#para1
{
text-align:center;
color:red;
}
The class sector is most often used on several elements.
The class selector uses the HTML class attribute, and is defined with a "."
Example
.center
 {
text-align:center;
}
The example is about p element with the class = “center”, will gives you central-aligned.
p.center
{
text-align:center;
}
Reference

http://www.w3schools.com/css/default.asp

Posted by at 6 comments:

Workshop1: CSS Basic Information


Basic CSS Information
·       CSS stands for Cascading Style Sheet
·       It is basically design for how to display HTML elements
·       External style sheets can keep a lot of work
·       External style sheets are stored in CSS files

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
  Reference

http://www.w3schools.com/css/default.asp
Posted by at 2 comments:
Subscribe to: Posts (Atom)