http://www.livefootball.com/football/england/premier-league/
Learn How to Code , it's not magic but science.
Friday, 1 January 2016
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 .
Tuesday, 29 December 2015
Aligning ,Breaking of Paragraphs and paragraph styling.
Paragraphs are use to make essays and letters look nicer to read when writing in papers or in books and we can find thatfeatures in Microsoft word . Html also provides same features that can be use to do the same thing , we shall do some examples like align text either left or right ,break paragraph to drop a single line below and also use <p> properties to give
a paragraph borders .
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
<p>Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .
Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
</body>
</html>
This will be the results when you run the codes
eg 1.0
You can see that there its drop of paragraph at the first line in after the full stop in the code but when we run the codes in the browser that space does not appear
it does not appear because you did not apply the tag that its responsible to do that drop for you .To do that we must
apply the breaking tag .
<p>Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop a single line below and also use paragraph tag properties to give
a paragraph borders . </p>
This will be the results when you run the codes eg1.1
Now we would be aligning the text content but before that lets set the width of the paragraph first ,we would be using style
to do that . Apply style="width:500px" to the codes like i did below
<p style="width:500px">Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
This will be results when you run the codes you can see that the paragraph did take all the line space available but it take a
certain portion of the page and displayed.
a paragraph borders .
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
<p>Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .
Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
</body>
</html>
This will be the results when you run the codes
eg 1.0
You can see that there its drop of paragraph at the first line in after the full stop in the code but when we run the codes in the browser that space does not appear
it does not appear because you did not apply the tag that its responsible to do that drop for you .To do that we must
apply the breaking tag .
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop a single line below and also use paragraph tag properties to give
a paragraph borders . </p>
This will be the results when you run the codes eg1.1
Now the drop had appear because of the break tag watch it carefully you will notice difference between eg 1.0 and eg1.1
Now we would be aligning the text content but before that lets set the width of the paragraph first ,we would be using style
to do that . Apply style="width:500px" to the codes like i did below
<p style="width:500px">Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
This will be results when you run the codes you can see that the paragraph did take all the line space available but it take a
certain portion of the page and displayed.
Lets come back and apply the alignment ,apply these ( align="right") codes the paragraphs like i did below .By default the
alignment is set to right.
<p style="width:500px "align="right">Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
Lets apply borders to the paragraph.,add these codes to the paragraph tag (border:1px solid)
<p style="width:500px ;border:1px solid"align="right">Paragraphs are use to make essays and letters look nicer to read when writting in papers or in books and we can find that
features in Microsoft word .<br/>Html also provides same feartures that can be use to do the same thing , we shall do some
examples like align text either left or right ,break paragraph to drop to jump to the next line below and also use paragraph tag properties to give
a paragraph boders . </p>
This is the results when you add the border properties and run the codes .you can increase the width of the borders by 2 ,3 or any value you want to use .
Thats all for Today ,see you next time .
Using of Headers in Html
Heading its key important feature when writing and articles,reports,letters or any other text documents .In html language
header tag is a hierarchical from 1 to 6 with 6 being the smallest and 1 being the bigger in size ,Header text when display its bold.
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
Header Examples
<h6>This is a Header 6</h6>
<h5>This is a Header 5</h5>
<h4>This is a Header 4</h4>
<h3>This is a Header 3</h3>
<h2>This is a Header 2</h2>
<h1>This is a Header 1</h1>
</body>
</html>
header tag is a hierarchical from 1 to 6 with 6 being the smallest and 1 being the bigger in size ,Header text when display its bold.
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
Header Examples
<h6>This is a Header 6</h6>
<h5>This is a Header 5</h5>
<h4>This is a Header 4</h4>
<h3>This is a Header 3</h3>
<h2>This is a Header 2</h2>
<h1>This is a Header 1</h1>
</html>
This will be the results of the code .
Monday, 28 December 2015
Wisa charged with sexual assault, indecent exposure
Hiplife artiste Eugene Ashie popularly known as Wisa has been charged with indecent exposure and sexual assault for showing his genitals at a live event in Accra.
Wisa told Joy News he regrets his action which he describes as "childish". He said he is prepared to face any sanction for his behavior.
- See more at: http://www.myjoyonline.com/entertainment/2015/December-28th/wisa-charged-with-sexual-assault-indecent-exposure.php#sthash.jYMzCg31.dpuf
The EPL Table update and next week Fixtures
The EPL Table update and next week Fixtures Leicester City and Manchester city kick-off will come on tomorrow at 8:45 pm.
How to create a simple web page
Before i start let me discuss little about the internet ,the internet its a collection of network of computers where one its a sever and others are client .In the internet webpages its being programmed by HTML language and CSS language and in advance projects java and other programming languages are embed in to webpages to performed certain required task .But for now i will limit it to HTML only .
In html tags are the fundamental elements use in creating a web page.eg This an example of paragraph <p> tag and this its close </p> .Before we start open notepad in your computer .
1. First step
Write the code <html> and closed it </html>
2.Second step.
withen the <html>tag open another tag called header and close it <head> </head>
your codes will look like this
<html>
<head>
</head>
</html>
3.Third step.
The next will be title tag ,put the <title> tag withen the header tag and close it <title></title>,withen two the title tags put discription of the webpage there .this will appear a the top of the tap of the browser you run the code. i will write "My First webpage".
your codes will look like this
<html>
<head>
<title>My First webpage</title>
</head>
</html>
4.Fourth step.
Now we will put the <body> tag this tag contains everything that suppose to be in your webpage .
your codes will look like this
<html>
<head>
<title>My First webpage</title>
</head>
<body>
</body>
</html>
lets put some thing in the body tag .now we will use the paragraph tag i was talking about
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
</body>
</html>
5. Fifth step.
Now create a new folder and name it website and save the file you created inside the folder.,You must save the file with extension (.html) or else it will not work. so i will save mine myfirst.html
This is how it will look when you run it.running it you can just double click the file it will open a default browser
Give a try and see you next time..
In html tags are the fundamental elements use in creating a web page.eg This an example of paragraph <p> tag and this its close </p> .Before we start open notepad in your computer .
1. First step
Write the code <html> and closed it </html>
2.Second step.
withen the <html>tag open another tag called header and close it <head> </head>
your codes will look like this
<html>
<head>
</head>
</html>
3.Third step.
The next will be title tag ,put the <title> tag withen the header tag and close it <title></title>,withen two the title tags put discription of the webpage there .this will appear a the top of the tap of the browser you run the code. i will write "My First webpage".
your codes will look like this
<html>
<head>
<title>My First webpage</title>
</head>
</html>
4.Fourth step.
Now we will put the <body> tag this tag contains everything that suppose to be in your webpage .
your codes will look like this
<html>
<head>
<title>My First webpage</title>
</head>
<body>
</body>
</html>
lets put some thing in the body tag .now we will use the paragraph tag i was talking about
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<p> I am creating webpage and its interesting and fantastic</p>
</body>
</html>
5. Fifth step.
Now create a new folder and name it website and save the file you created inside the folder.,You must save the file with extension (.html) or else it will not work. so i will save mine myfirst.html
This is how it will look when you run it.running it you can just double click the file it will open a default browserGive a try and see you next time..
Subscribe to:
Posts (Atom)