Total Pageviews

Sunday, 6 November 2016

Styling letter Using CSS in HTML

1.Start by creating a new web page
<html>
<head>
<title>Application for job</title>
</head>

<body> 
</body>
</html>

2 .The next thing to do is writing senders address ,it should be Heading so i make h4 heading .
<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 > C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>
</body>
</html>

this is will be the results when run the codes .

you can see that its at the left side of the  page and it must be align right 

Add this styling code to the H<tag>
<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>
</body>
</html>
Thats okay , its now at the right  side now .the  margin-left:700px; tells the browser to start displaying the the whole division 700 position from the left .

3.the next thing to do is the address of the receiver  


<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/> 
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
</body>
</html>

after running this will be the results

I already the margin left tell where the browser will start displaying the tag 


4.The next thing to do is the salutation 

<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/>
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
 <h4 style="margin-left:130px;">Dear Sir/Madame,<h4/>
</body>
</html>


5 .The title of the letter


<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/>
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
 <h4 style="margin-left:130px;">Dear Sir/Madame,<h4/>
<p style="margin-left:250px; text-decoration:underline; font-size:16px;" >
    APPLICATION FOR EMPLOYMENT AS WEB DEVELOPER IN YOUR COMPANY</p>
</body>
</html>


6 The body of the letter 

<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/>
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
 <h4 style="margin-left:130px;">Dear Sir/Madame,<h4/>
<p style="margin-left:250px; text-decoration:underline; font-size:16px;" >
    APPLICATION FOR EMPLOYMENT AS WEB DEVELOPER IN YOUR COMPANY</p>

<P style="width: 700px; margin-left: 250px; text-align:left;" >This letter its to express my interest with the advertisment made on www.jobberman.com on 
      17th/November/2015 for an experienced ,detailed-oreinted, front end web developer.</p>
      <P style="width: 700px; margin-left: 190px; text-align:left;" >
      With 6 years of hands-on experience efficienctly coding web sites and applications using web modern HTML,CSS and Javascripts,I am confident 
      i will be an excellent addition to your organization .
      Building state-of-the-art,easy to use ,user friendly web sites and applications is truly a passion of mine .i actively seek out new technologies , and 
      stay up-to-date on industry trends advancements.continue education has allowed me to stay ahead of the curve and 
      deliver excepttional work to each employer i've worked for both fulltime  and contract.
         I have attached a copy of my resume that details my experience ,along  with links to the various websites
          and applications i've had honor of working on . i can be reached anytime via my cell phone ,0267236576
          or via email abdulrazakneate@yahoo.com.<br/>
</body>
</html>


7 Ending/conclusion  of the letter
<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/>
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
 <h4 style="margin-left:130px;">Dear Sir/Madame,<h4/>
<p style="margin-left:250px; text-decoration:underline; font-size:16px;" >
    APPLICATION FOR EMPLOYMENT AS WEB DEVELOPER IN YOUR COMPANY</p>

<P style="width: 700px; margin-left: 250px; text-align:left;" >This letter its to express my interest with the advertisment made on www.jobberman.com on
      17th/November/2015 for an experienced ,detailed-oreinted, front end web developer.</p>
      <P style="width: 700px; margin-left: 190px; text-align:left;" >
      With 6 years of hands-on experience efficienctly coding web sites and applications using web modern HTML,CSS and Javascripts,I am confident
      i will be an excellent addition to your organization .
      Building state-of-the-art,easy to use ,user friendly web sites and applications is truly a passion of mine .i actively seek out new technologies , and
      stay up-to-date on industry trends advancements.continue education has allowed me to stay ahead of the curve and
      deliver excepttional work to each employer i've worked for both fulltime  and contract.
         I have attached a copy of my resume that details my experience ,along  with links to the various websites
          and applications i've had honor of working on . i can be reached anytime via my cell phone ,0267236576
          or via email abdulrazakneate@yahoo.com.<br/>
<P style="width: 700px; margin-left: 250px; text-align:left;" >Thank you for your time and consideration .
          I hope my qualification  would meet you demands ,i look forward to speaking to with you about this opportunity.</P>
         <p style="margin-left:190px;"> My regards.</p>
</body>
</html>

8 Subscription
<html>
<head>
<title>Application for job</title>
</head>

<body>
     <h4 style=" margin-left:700px; margin-top:50px;"> C/O ALAHASSAN ABUBAKARI,<br/>
       POST OFFICE BOX 2576,<br/>
       TAMALE NORTHERN REGION,<br/>
      23RD NOVEMBER,2015.</h4>

          <h4 style="margin-left:130px;">MTN GAHANA LIMITED, <br/>
      TAMALE BRANCH,<br/>
      TAMALE NORTHERN REGION.<br/>
   </h4>
 <h4 style="margin-left:130px;">Dear Sir/Madame,<h4/>
<p style="margin-left:250px; text-decoration:underline; font-size:16px;" >
    APPLICATION FOR EMPLOYMENT AS WEB DEVELOPER IN YOUR COMPANY</p>

<P style="width: 700px; margin-left: 250px; text-align:left;" >This letter its to express my interest with the advertisment made on www.jobberman.com on
      17th/November/2015 for an experienced ,detailed-oreinted, front end web developer.</p>
      <P style="width: 700px; margin-left: 190px; text-align:left;" >
      With 6 years of hands-on experience efficienctly coding web sites and applications using web modern HTML,CSS and Javascripts,I am confident
      i will be an excellent addition to your organization .
      Building state-of-the-art,easy to use ,user friendly web sites and applications is truly a passion of mine .i actively seek out new technologies , and
      stay up-to-date on industry trends advancements.continue education has allowed me to stay ahead of the curve and
      deliver excepttional work to each employer i've worked for both fulltime  and contract.
         I have attached a copy of my resume that details my experience ,along  with links to the various websites
          and applications i've had honor of working on . i can be reached anytime via my cell phone ,0267236576
          or via email abdulrazakneate@yahoo.com.<br/>
<P style="width: 700px; margin-left: 250px; text-align:left;" >Thank you for your time and consideration .
          I hope my qualification  would meet you demands ,i look forward to speaking to with you about this opportunity.</P>
         <p style="margin-left:190px;"> My regards.</p>
 <p style="margin-left:700px;">  
           Yours Faithfully,<br/>
           ABUBAKARI ABDUL RAZAK.<br/>
    0548496121
  </p>

</body>
</html>




Saturday, 22 October 2016

How to connect to Data file(access database) in vb6.0


1. Start a new project

2. Before you can connect to a data file you need add two controls in your form ADODC AND DATAGRIDVIEW

  Place your cursor on the tools box and right-click and select components ,the components window will open
  and you find and check ADODC and DATAGRIDVIEW and click on apply to add the controls to you components list

3. Drag and drop the controls to your form you should have it look like this

Save the project to a directory name it  NaeateExpense


4. The next thing you have to do is create your data file ,for this project we i will be using access databse

5.Save the file 2002 /2003 format the extension will be .mdb eg my file name is  naeate.mdb
5. Lets get back to the project 
Now that you create your datafile copy it to the project directory 
C:\Program Files\Microsoft Visual Studio\VB98\NaeateExpense
or 
 C:\Program Files(x86)\Microsoft Visual Studio\VB98\NaeateExpense
6. Go to the to the form  now we are to create the connection string 
right click on ADODC and go to properties

next the property page appears  



Click on build to create the connection 

Browse to the data file and select  it,Click on test connection you should see on the figure below 

Now get back to property page  and click on Recordsource
7.Right click on Datagridview  and  click on properties ,you should see this figure below then check the boxes as seen below

8.Add Three buttons and name them cmdCalculate,cmdDelete,cmdAddnew 
,add four textboxes  , add four labels on each text box and named them accordingly 
This how your form will look like 
Add this code below to you project

Private Sub CmdCalculate_Click()
 With Adodc1.Recordset
  .Fields(4) = .Fields(1) + .Fields(2) + .Fields(3)

End With
End Sub

Private Sub CmdDelete_Click()

With Adodc1.Recordset
  .Fields(4) = Null
End With
End Sub

Private Sub CmdAddnew_Click()
With Adodc1.Recordset
.AddNew
.Fields(0) = Text1.Text
.Fields(1) = Text2.Text
.Fields(2) = Text3.Text
.Fields(3) = Text4.Text

End With
End Sub

Run the program if there is no errors in your code you will be able to add new record ,calculate total ,clear 

Tuesday, 26 January 2016

Creating Tables in Html


  Creating Tables in Html

Hello and welcome to Naeate.blogsot.com  .Its been some time now that  i post again i apologize for the delay ,time its not on my side its exams time and i need much more time to prepare for the exams .not finished yet but i just want keep in touch with you .


Today we would be learning  about using  tables in html ,Tables are much more better way of representing
facts, data and information at large in a document for easier reference and understanding of the information
  by the reader.
  Html uses the table tag  command  <table>  to display tables on  a webpage ,the tag has a closing tag </table>
and other properties like 'tt';th','tr','td' .Lets start with creating the a table, i will  be doing it bit by bit for you to see
what all the properties does .


  first all we have to create table tag and specify the border ,if the border its not specified you wouldn't see
any thing on the webpage  but rather you would only see single dot if specified because you haven't put data
in to the table yet  .

<html>
<head>
<title>Tables </title>
</head>
<body>
  <table border="1">

  </table>
</body>
</html> 


Now lets add data into the table using 'tr' table row 'th' table header and 'td' table data.
<table border="1">
<tt>RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td>White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td>0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td>192</td> 
</tr>
  </table>
This would be the results when you run the codes ....





The table title tag displays  the title of the table as you can see the title of the table its so close to it this would be the case if you used heading tag eg <h1>. The <tr>tag indicate the rows of the table so all data that is found between an open and closed tag of the <tr> tag would be in one row as seen in the table above : White , 255 , 255 , 255 are all in  the same row . The table head <th> its use to indicate each header of each column ,you can see that its been bold  automatically  though that its also in the same table but its been differentiated from the table data which is in  normal and
default text.

Spanning Of table rows and table data 
You can choose to increase the size of each cell in the table to your choice ,Yo do this by using colspan and rowspan 
properties like eg rowspan="2"
 lets increase the the size of the first cell the right that means we would add the space of the second cell to the first cell
we would have to add colspan="2"  to the first cell tag . like how i did  below

 <table border="1">
<tt>RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td colspan="2">White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td>0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td >192</td> 
</tr>
  </table>

This is how it would look like



  Lets also increase the third cell of the second row to down .If you increase any cell in the last row towards down by using rowspan it would not do give it a try to see for your self .
<table border="1">
<tt>RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td colspan="2">White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td  rowspan="2" >0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td>192</td> 
</tr>
  </table>

this would be the result when you run the codes ...


You can also increase the width and height  of the table ,like adding width="600px"  and height="200px" in the  opening table tag .
    <table border="1" width="600px" height="200px">
<tt>RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td colspan="2">White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td  rowspan="2" >0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td>192</td> 
</tr>
  </table>

This is how it would look ..


You can also use the Cell spacing and cell padding  to wide the space between content of the cell and the  cell borders
 of the table lets add this to the opening tag cellspacing="10" .
<table border="1" width="600px" height="200px" cellspacing="10">
<tt>RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td colspan="2">White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td  rowspan="2" >0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td>192</td> 
</tr>
  </table>
</body>

this would be the results ...


Again lets do cellpading also , add cellpadding="10" to the code
 <table border="1" width="600px" height="200px" cellspacing="10"  cellpadding="20" >
notice it very well you would see that the contents in the box when the cellpadding it specified is shifted from the left towards right and the height of the cell too increased .
This would be the results when add the cellpadding="10" to the codes and run it...



 You can also add colors to your table ,Background , text and border colors.lets add colors to the table

<table border="1" width="600px" height="200px"  style=" background-color:#800000;border-color: white;color:Yellow;">
<tt style=" color:red;">RGB  Color Values </tt>
<tr>
<th>ColorName</th> <th>Red value</th> <th>Green value</th> <th>Blue value</th>
</tr>
<tr> 
<td colspan="2">White</td> <td> 255</td> <td> 255</td> <td>255</td> 
</tr>
<tr> 
<td>Black</td> <td> 0</td> <td> 0</td> <td  rowspan="2" >0</td> 
</tr>
<tr> 
<td>silver</td> <td>192</td> <td> 192</td> <td>192</td> 
</tr>
  </table>


this would be the results....




Thank you for your time  if you find some issues you want me to address please comment below the post i would do my
 possible best to attend  to you , see you next time .

Saturday, 9 January 2016

Working with Images in Html

         Working with Images in Html 
    Today we are going to learn how to work with images on our webpage.A webpage cannot have a
 beautiful look without the influence of images, the proper use of images  will make your webpage]
fantastic .How ever some times images are use to depict ideas and purpose of a webpage .HTML tag
for image is the <img>tag  like these <img src="">,the src is not the 'student presentative council' you know
but rather the source locator the locate the image you want to appear on your webpage .
     To start with we would have copy the image we will be displaying on our webpage to a file which the html file its found,there are different pictures extensions PNG,GIF,JPEG,GIF (eg Naeate.png )and html supports this pictures groups so you will have to specify the picture you would be using extension or else it woundn't  work  .
  If you've not been following this tutorials you would have to go and look on how to create a simple webpage and read on that its the firstpost .

     I have copied a picture and paste it in that same file and look like this .
The file its SunRise.jpg 











Lest open the html file and write the codes for the picture 


          <html>
         <head>
         <title>My First webpage</title>
         </head>
         <body>
        <img src="SunRise.jpg" />
         </body>
        </html>


This will be the results when you run the codes


you can see that the picture had displayed its default size ,yes it will beacuse you haven't set the
 width and height of the picture ,So puddy lets change the picture size how we want it    add width="200px"
to the code this how looks <img src="SunRise" width="200px" />
 this will be the results when you run the codes




you can see that you haven't specify the height but html automatically html sets it accordingly but you can
add it height="200px"
<body>
<img src="SunRise" width="200px" height="200px" />
</body>














We can align it to right 

<body>
 <img src="SunRise" width="200px"  height="200px" align="right"/>
</body>















lets see two picturs side by side


 <body>
     <img src="SunRise.jpg" width="200px" height="200px" align="right"  />
    <img src="SunRise.jpg" width="200px" height="200px" align="left"  />
         </body>


The reults





Lets do some styling ,
we would be applying style sheets to do it we shall give the picture borders and
color the border to yellow , we will add it to the left picture.
style style="border:4px solid; border-color:yellow;"

       <body>
     <img src="SunRise.jpg" width="200px" height="200px" align="right"  />
    <img src="SunRise.jpg" width="200px" height="200px" align="left"  style="border:4px solid; border-color:yellow;"/>
         </body>




Thats all for today
Please if you find this Toturials helpful or there is some issues you want to me to address about the toturial
comment on it, i need to  know  how best  i can help you . THANK YOU for your time.

Tuesday, 5 January 2016

Dealing With Colors In html

 Colors Usage in Html
Each browser has a set of standard colors for web pages that can be customized by the user
. If you don’t specify otherwise, your pages will display according to the
browser’s settings.
To change a color on your web page, you need to know the color you want to change it to,
as well as the corresponding color value (described in the following section).
 There are variety of other units to measure color,including RGB (which stands for Red Green Blue)
values, RGB percentages, hexadecimal shorthand, and color names.

Hexadecimal Color
The hexadecimal system (hex) uses the same concepts as the decimal system, except
it’s based on 16 units (see Table 3-1). Because standard HTML cannot handle decimal color
values, the hexadecimal system is used to specify color values on web pages. Instead of
making up new characters to represent the remaining units after 9, the hexadecimal system
uses the first six letters of the English alphabet (A–F).
Computer monitors display color in RGB mode, where R = Red, G = Green, and B = Blue.
Each letter (R, G, and B) is represented by a value between 0 and 255, with 0 being the darkest
and 255 representing the lightest in the spectrum. In RGB, white and black have the following
values:



When using hexadecimal color values in an HTML page, you translate the color from
decimal (RGB) to hex. Each red, green, or blue value translates into a two-digit hex value. You
then combine all three of those two-digit hex values into a single string, preceded by a hash
mark. The following is an example where a hexadecimal color is used to change the text in one
paragraph to blue.
<p style="color: #0000FF;">
Lets give it a try
 lets also use color names to specify the body backgroundcolor.

           <html>
           <head>
           <title>My First webpage</title>
           </head>
           <body style="background-color:green;">
             
           <p style="color: #0000FF;">When using hexadecimal color values in an HTML page,
            you translate the color fromdecimal (RGB) to hex. Each red, green, or blue value translates into a                two-digit hex value. You then combine all three of those two-digit hex values into a single string,                   preceded by a hash mark. The following is an example where a hexadecimal color is used to change             the text in oneparagraph to blue.</p>
           </body>
           </html>

This will be the results when you run the codes.













Hexadecimal Shorthand
When referencing a color that has value pairs, you can use a bit of shorthand to reduce the
amount of typing necessary. For example, a color with a hexadecimal code of 003366 can be
shortened to 036. This is because each of the two red values is the same, as are each of the blue
and green values. That wouldn’t work for a hexadecimal code of 003466, because the green
values—34—aren’t the same.
Chapter 3: Color 49
The following shows how the same blue used in the preceding code example could be
referenced, using hex shorthand.
<p style="color: #00F;"> Give it try


RGB Values and Percentages
If hexadecimal color values already have your head spinning, . If a color’s RGB values are handy, use
those in your stylesheet in place of the hexadecimal code, like in the following:
<p style="color: rgb(0,0,255);">
If you don’t have the RGB values handy, as when working in some page layout
you can also use the RGB percentages, like that shown in the following example.
<p style="color: rgb(0%,0%,100%);">
Notice that a comma separates each RGB value and the entire set of values is placed inside
parentheses. A lowercase rgb precedes those parentheses. In the case of the previous code
example, R = 0, G = 0, and B = 255. As was the case with hexadecimal shorthand, RGB values
and percentages are only used to describe color in style sheets, not the older HTML color tags.
Give it a try change the color of the paragraph color with the percentages.


Color Names
HTML 3.2 and 4.0 defined a standard set of 16 colors, which could be referenced by names
in addition to hex values. The first version of CSS continued with these 16 colors, and orange
was added in CSS 2.1. Table 3-2 lists the 17 color names that are almost uniformly supported
by browsers.

<p style="color: blue;">
 Below are list of color names and their Hexdecimal, RGB values















Specify Document Colors
The preferred method of changing document colors, such as the background and the text, is
with style sheets.As with any style declaration, you can specify the background, text, and link
colors in either an inline, internal, or external style sheet. The actual properties used to do so are the
same, however, regardless of which type of style sheet you use. Unlike with the older HTML
tags previously used to change document colors, with CSS you aren’t restricted to specifying
this information within the body tag. In fact, you actually use the a tag (which is used to
add links to a web page) to change link colors in CSS. To understand, look at the following
example of an internal style sheet:
<style type="text/css">
body {background-color: white;
 color: gray;}
a:link {color: blue;}
a:visited {color: purple;}
a:active {color: orange;}
</style>

Below its an example
           <html>
           <head>
           <title>My First webpage</title>
           </head><style type="text/css">
body {background-color: white;
 color: gray;}
a:link {color: blue;}
a:visited {color: yellow;}
a:active {color: orange;}
</style>
            <body style="background-color:green;">
              <ol>
               <li> <a href="Home.html">Home</a></li>
               <li> <a href="Products.html">Products</a></a>
               </ol>
            <p style="color: white;">When using hexadecimal color values in an HTML page, you translate the color from
           decimal (RGB) to hex. Each red, green, or blue value translates into a two-digit hex value. You
           then combine all three of those two-digit hex values into a single string, preceded by a hash
          mark. The following is an example where a hexadecimal color is used to change the text in one
           paragraph to blue.</p>
           </body>
           </html>


This will be the results when run the codes and clink on the link you find that the visited link will change
to yellow which was previously blue .To make the page stable try to create another page and name it Products.html


Opacity
Another new addition to the CSS3 specification is the opacity property. Similar to the RGBA
values just described, opacity values are defined between 0.0 (completely transparent) and 1.0
(fully opaque).
 when you add this code to the body style the page will be transparent
body{
 opacity: 0.4; /* CSS3 standard */
 filter:alpha(opacity=60); /* IE only */

This is how its should be placed
 body{background-color: white;
 color: gray;}
a:link {color: blue;}
a:visited {color: yellow;}
a:active {color: orange;}

body{
 opacity: 0.4; /* CSS3 standard */
 filter:alpha(opacity=60); /* IE only */
}

And the results would look below.



You can see the text appear transparent.

Friday, 1 January 2016

English leaguecFixtures for Today


http://www.livefootball.com/football/england/premier-league/

Using of List in html


 Today we going to learn about listing in web design ,there are two different kinds of listing, ordered list which use make use of numbering ,alphabetical order or Roman numbers and unordered list which uses dots and square.List tag is <li></li> an
ordered list tag is <ol></ol> and unordered list tag is <ul></ul>.
Lets take an example of list of  tools to develop web page .

            <html>
           <head>
           <title>My First webpage</title>
           </head>
           <body>
         

              List of Tool use To develop a web  page
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
                                     </body>
                                     </html>


This will be the result when you run the codes .



Oredered List
Now lets make use of the ordered list so we will just use the above list and make it ordered , we will have nest the list we
 created inside the ordered list  ,This is how its done .
Replace this codes to the list codes
        <h3> Ordered List</h3>
            <ol>
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
              </ol>

When you do it and run  you must get the same as this in  example below.




Now lets change the numbers to Alphabet
 To change the listing to alphabet you add the type property to the opening tag of the ordered list , type="a"
   like how i did below.
       <ol type="a">
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
              </ol>

This is the result of the code when you run it


To change it to Roman numbers you will have to change ' a ' in the code to ' i '.

 You can also specified which letter to start from,  example we want to start from ' b ' not ' a '  ,you will have add this code to the ordered opening tag   start="2"  ,two its here because  a represents 1 and 2 for b .

            <ol type="a" start="2">
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
              </ol>

This will be  the results when you run the codes.



Unordered List 

To make  this we will nest the list tags inside unordered list tag like we how we did to the ordered list
Like the example below

 <h3> Unordered List</h3>
            <ul>
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
              </l>



 It will look same as this when you run the code ,you can see that, unordered list and  list look the same .



We can change the type of the unordered list to  square ,this code will do it for us . type="square"
<h3> Unordered List</h3>
            <ul type="square">
           <li>Computer</li>
           <li>Notepad appliction</li>
           <li>Dreamweaver application</li>
           <li>Notepad++ application</li>
           <li>Adobe Photoshop application</li>
              </ul>
 this is the results of the code ,watch it carefully you will see that black dot has change to square



There are situations that you will  need to have list and sub list  i call it nested list,the first list to be the heading for the
 next sub list .In this case to be able to  do it we would have to nest unordered list inside ordered list, the ordered list will be the
mother list .To make it the sub list of the mother list,the ordered list will have it own list of items and to make each item be
 the header for other  child list ,we will nest unordered list below each list of the ordered list. Lets take a look at this example
 

<ol>
                <li> List of Tool use To develop a web  page </li>
                   <ul>
                      <li>Computer </li>
                      <li>Notepad appliction </li>
                      <li>Dreamweaver application </li>
                      <li>Notepad++ application </li>
                      <li>Adobe Photoshop application </li>
                   </ul>
               <li>List of other Languages associated with Web development</li>
                     <ul>
                       <li>Java</li>
                       <li>PHP</li>
                       <li>JQuery</li>
                     </ul>
            </ol>

   I have indent th codes  make it reader friendly ,You can see clearly what i have explained .The ordered list has it own list
which are:      
                <li> List of Tool use To develop a web  page </li>
                <li>List of other Languages associated with Web development</li>

And each of them have its own corresponding sub list which are coded with unordered list .
 This would be the results when you run the codes .