Tuesday, 21 November 2017

How to style images in css3 | CSS tutorials

Styling Images In CSS3

In this article you will how to style your images using CSS.

Rounded Images

In order to create rounded images we use the border-radius property.

For example:



#rounded{

          border-radius:20px;

}

In Order to Make the images Circle we use the border-radius:50% ;

For example:


#circle{

          border-radius:50%;

}








Saturday, 18 November 2017

How to Make a transparent and Table In html & Css

Int his article we will create a beautiful ,wonderful and good looking table using html and Css.
HTML (Hyper Text Markup Language) is the most powerful language for creating web pages.And the design/style we give it to our pages is called Css.



You can use this code...

CSS CODE:

body{
background-image:url(b.jpg);background-size:cover;}
table{
border:2px solid salmon;border-collapse:collapse;width:50%;margin:auto;font-size:18px; font-family:georgia;
opacity:0.7;}
table,td,th{ border:2px solid salmon;padding:4px;}
.header{ font-size:2em;height:100px;background-color:firebrick;}
.c1{ background-color:limegreen;}
tr:nth-child(even){background-color:silver;}
tr:nth-child(odd){background-color:snow;}

.header a{color:#000;text-decoration:none;}
.header a:hover{
color:blue;text-decoration:underline;}

HTML CODE:

<table>
<tr>
<th colspan="6" class="header"><a href="">Mark Sheet Certificate</a></th></tr>
<tr><th colspan="3" class="c1">Student Name</th><th colspan="3" class="c1"> Father Name</th></tr>

<tr><td colspan="3">Sana Ullah</td><td colspan="3">Muhammad Ishaq</td></tr>

<tr><th>Class</th><th colspan="2">11th</th><th colspan="2">12th</th><th></th></tr>

<tr><th>Subjects</th><th>Total Marks</th><th>Obtained marks</th><th>Total Marks</th><th>Obtainedmarks</th><th>Practical</th></tr>

<tr><td>English</td><td>100</td><td>98</td><td>100</td><td>98</td><td></td></tr>

<tr><td>Urdu</td><td>100</td><td>98</td><td>100</td><td>98</td><td></td></tr>

<tr><td>Islamiat</td><td>50</td><td>45</td><td>50</td><td>45</td><td></td></tr>

<tr><td>Mathematics</td><td>100</td><td>98</td><td>100</td><td>98</td><td></td></tr>

<tr><td>Chemistry</td><td>85</td><td>83</td><td>85</td><td>84</td><td>30</td></tr>

<tr><td>Physics</td><td>85</td><td>83</td><td>85</td><td>83</td><td>30</td></tr>

</table>
Also Watch the video for full Understanding...




Subscribe to my youtube Channel...

Friday, 17 November 2017

HTML5 Basic Structure | HTML5 Online Tutorials

HTML5 Basic Structure

HTML stands for (Hyper Text Markup Language) used for creating static web pages.HTML describe the structure of web pages using  MarkUp. It is actually a coding language. We Write HTML code in text editor like Notepad, Notepad++,Sublime text editor, Dreamweaver etc.HTML have elements consist of tags i.e  <starting > and </ending> tag. The HTML tags such as “Headings”, ”Paragraphs”, ”table” etc.
The HTML tags are not displayed in the browser but the content inside the tags are shown which we called the output.
In this article I am going to show you how to draw the basic structure of HTML.
So let’s get started…
First of all we declare the document type, in HTML5 we declare it by writing;
<!doctype html>


A simple html Document :






•  <!Doctype html> define that this is the HTML5 document.

•  <html> is the root element of HTML page.

•  <head> it contains meta information about the document.

•  <title> It specify a title for the document.

• <body> This element contains the content visible on the page.

•  <h1> define a large heading.

• <pdefine a paragraph.


Watch this video for complete learning...




ad

Follow Us

Like My Page

Counter

page visitor counter

Popular Posts

Blog Archive