Translate

ads

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

27 Jun 2019

CSS Float

CSS , HTML
CSS Float

CSS Float



Float could be a CSS property written in CSS file or directly within the sort of an element. The float property defines the flow of content. Below ar the categories of floating properties


FLOAT TYPE
USAGE
float: left
Element foats on left side of the container
float: right
Element floats on right side of container
float: inherit
Element inherits floating property of it’s parent (div, table etc…)
float: none
Element is displayed as it is (Default).


 
<!DOCTYPE html> 
<html> 
<head> 
            <title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:left;"> 
            Sayed 360 
</div> 
</body> 
</html>  
         
float:right


<!DOCTYPE html> 
<html> 
<head> 
            <title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:right;"> 
            Sayed 360 
</div> 
</body> 
</html> 

folat:none

<!DOCTYPE html> 
<html> 
<head> 
<title>Float</title> 
</head> 
<body> 
<div class = "SIS" style = "font-size:40px; 
color:#006400; float:none;"> 
Sayed 360  
</div> 
</body> 
</html>
 
float:inherit

<!DOCTYPE html>
<html>
<head>
            <title>Float</title>
</head>
<body>
<div style="float:right">
            <div class = "SIS" style = "font-size:40px;
            color:#006400; float:inherit;">
                        Sayed 360
            </div>
</div>
</body>
</html>



Read more »
By on - No comments:
Tags ,

6 Jun 2019

HTML | Tables

HTML ,
HTML | Tables

HTML | Tables

A table is a rendezvous of information in rows and columns, or presumably in a very additional complicated structure. Tables area unit wide utilized in communication, research, and knowledge analysis.


     ü  Tables ar helpful for numerous tasks like presenting text data and numerical information.
ü  Tables will be wont to compare 2 or a lot of things in tabular type layout.

ü  Tables are  able to produce databases.

Defining Tables in HTML


<!DOCTYPE html>
<html>
<body  bgcolor="#E6E6FA">
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>

</html>

 Output:

1. Adding a border to a HTML Table :

<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">

<style>
table, th, td {
 border: 1px solid black;
}
</style>
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>

 Output:


2. Adding Collapsed Borders in a 

HTML Table


 <!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">

<style>
table, th, td {
 border: 1px solid black;

        border-collapse: collapse;

}
</style>
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>


Output:

3.   Adding Cell Padding in a

 HTML Table :



<!DOCTYPE html>
<html>
<body bgcolor="#E6E6FA">

<style>
table, th, td {
 border: 1px solid black;

        border-collapse: collapse;

}


th, td {
 padding: 20px;

}
</style>
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>


Output:

4. Adding Left Align Headings

 in a HTML Table :

 

   <!DOCTYPE html>


<html>
<body bgcolor="#E6E6FA">
<style>
table, th, td {
 border: 1px solid black;
        border-collapse: collapse;
}

th, td {
 padding: 20px;
}
   th
{
 text-align: left;
}
</style>
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>

Output:
   
 

5. Adding Border Spacing in a HTML Table :

<!DOCTYPE html>

 <html>
<body bgcolor="#E6E6FA">

<style>
table, th, td {
 border: 1px solid black;

}

table {
 border-spacing: 5px;
}


</style>
<table style="width:100%">
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>

 

Output:


6. Adding Cells that Span Many Columns in HTML Tables:

<!DOCTYPE html>
<html>
<head >

<style>
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left; }
</style>
</head>
<body  bgcolor="#E6E6FA">

<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
 <th>Name</th>
 <th colspan="2">Telephone</th>
</tr>
<tr>
 <td>Mehadi</td>
 <td>654327854</td>
 <td>96577557785</td>
</tr>
</table>
</body>
</html>

Output:


7. Adding Cells that Span Many Rows in HTML Tables :

  

<!DOCTYPE html>
<html>
<head bgcolor="#E6E6FA">

<style>
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
 text-align: left; }
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
 <th>Name:</th>
 <td>Mehadi</td>
</tr>
<tr>
 <th rowspan="2">Telephone:</th>
 <td>9125577854</td>
</tr>
<tr>
 <td>8565557785</td>
</tr>
</table>
</body>
</html>

Output:


8.  Adding a Caption in a HTML Table :


<!DOCTYPE html>
<html>
<body>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 20px;
}
th {
    text-align: left;
}
</style>
</head>
<body bgcolor="#E6E6FA">


<table style="width:100%">
<caption>DETAILS</caption>
<tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
</tr>
<tr>
 <td>Rahul</td>
 <td>mehadi</td>
 <td>26</td>
</tr>
<tr>
 <td>jalal</td>
 <td>ashik</td>
 <td>19</td>
</tr>
<tr>
 <td>Sami</td>
 <td>rayhan</td>
 <td>17</td>
</tr>
</table>
</body>
</html>


Output:




Read more »
By on - No comments:
Tags

The Quotation components in hypertext markup language

HTML ,
The Quotation components in hypertext markup language

The Quotation components in hypertext markup language

The Quotation components in hypertext markup language square measure accustomed insert quoted texts in an exceedingly website, that is, portion of texts totally different from the traditional texts within the website.

Below square measure a number of the foremost used quotation components of HTML:

1.  <q> element:


    <!DOCTYPE html>
<html>
<head>
 <title>Quotations</title>
</head>
<body>
 <h3>sayed 360 </h3>
 <p> hello sayed 360<br></p>
 <!--Inside quotes-->
 <p><q>hello sayed 360</q></p>
</body>
</html> 

Output:

2. <blockquote> element:

<!DOCTYPE html>
<html>
<head>
 <title>Blockquote</title>
</head>
<body>
 <h3>sayed 360</h3>
 <p>hello sayed 360<br></p>
 <!--Inside blockquotes-->
 <p><blockquote>hello sayed 360</blockquote></p>
</body>
</html> 

Output:


  3. <address> element:

 <!DOCTYPE html> 


<html>
<head>
 <title>Address</title>
</head>
<body>
 <h3>sayed 360</h3>
 <address>
 <p>Address:<br>
 Roufabd, hatazari road, <br>
 post code-4231, chittagong,bangladesh – 201305</p>
 </address>
</body>
</html> 

Output:




4.  <abbr> element:


<!DOCTYPE html>
<html>
<head>
 <title>Abbreviations</title>
</head>
<body>
 <h3>sayed 360</h3>
 <!--Here the marked text is the acronym-->
 <p>Welcome to <abbr title="World Health Organization">WHO</abbr></p>
</body>
</html> 

Output:

5. <bdo> element:

   

<!DOCTYPE html>
<html>
<head>
 <title>Bidirectional</title>
</head>
<body>
 <h3>sayed 360</h3>
 <!--Normal text-->  <p>hello sayed 360<br></p>
 <!--Inside <bdo> tag-->
 <p><bdo dir="rtl">hello sayed 360</bdo></p>
</body>
</html> 

Output:

6.  <cite> element:

<!DOCTYPE html>
<html>
<head>
 <title>Cite</title>
</head>
<body>
 <h3>sayed 360</h3>
 <!--The title is kept in cite tag-->
 <p>The <cite>sayed 360</cite> is the best site to<br>
 to search for articles and practice problems.</p>
</body>
</html>

Output:


Read more »
By on - No comments:
Tags

HTML | Text Formatting

HTML ,
HTML | Text Formatting
HTML | Text Formatting

HTML provides you with the power for info text similar to you be intimate in MS Word or any text redaction software system. during this article, we'd bear few such choices.

 1. Making text Bold or Strong:


       <!DOCTYPE html>
<html>
<head>
 <title>Bold</title>
</head>
<body>
 <!--Normal text-->
 <p>Hello Sayed </p>
 <!--Text in Bold-->
 <p><b>Hello Sayed</b></p>
 <!--Text in Strong-->  <p><strong>Hello Sayed</strong></p>
</body>
</html> 


Output:



 2.   Making text Italic or emphasize


       <!DOCTYPE html>

<html>
<head>
 <title>Italic</title>
</head>
<body>
 <!--Normal text-->
 <p>Hello Sayed</p>
 <!--Text in Italics-->
 <p><i>Hello Sayed</i></p>
 <!--Text in Emphasize-->  <p><em>Hello Sayed</em></p>
</body>
</html> 

Output:
3.   Highlighting a text:

   <!DOCTYPE html>
<html>
<head>
 <title>Highlight</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello Sayed</p>
 <!--Text in Highlight-->  <p><mark>Hello Sayed</mark></p>
</body>
</html> 

   

Output:


   4.Making a text Subscript or      Superscript:


<!DOCTYPE html>
<html>
<head>
 <title>Superscript and Subscript</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello Sayed</p>
 <!--Text in Superscript-->  <p>Hello <sup>Hello Sayed</sup></p>
 <!--Text in Subcript-->  <p>Hello <sub>Hello Sayed</sub></p>
</body>
</html> 

Output:






5.   Making text smaller:



<!DOCTYPE html>
<html>
<head>
 <title>Small</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello Sayed</p>
 <!--Text in small-->  <p><small>Hello Sayed</small></p>
</body>
</html> 


Output:

  6. Striking through the text:


<!DOCTYPE html>
<html>
<head>
 <title>Delete</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello Sayed</p>
 <!--Text in Delete-->  <p><del>Hello Sayed</del></p>
</body>
</html>


Output:



7.  Adding a text:

<!DOCTYPE html>
<html>
<head>
 <title>Inserting</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello Sayed</p>
 <!--Text in Insert-->  <p><ins>Hello Sayed</ins></p>
</body>
</html> 

Output:


Read more »
By on - No comments:
Tags

HTML | Paragraph

HTML ,
HTML | Paragraph

HTML | Paragraph



The tag in hypertext mark-up language defines a paragraph. These have each gap and shutting tag. thus something mentioned inside and is treated as a paragraph. Most browsers browse a line as a paragraph notwithstanding we have a tendency to don’t use the closing tag




 <!DOCTYPE html> 
<html> 
<head> 
 <title>Paragraph</title> 
</head> 
<body> 
 <p>This is paragraph.</p> 
 <p> This is paragraph.</p> 
</body> 
</html> 

Output:


When we check up on the webpage, we tend to see that there area unit few areas supplementary before and once a paragraph. HTML will this by default. Let’s check up on few properties of paragraph tag:


ü  As already mentioned, the tag mechanically adds house before and when any paragraph, that is largely margins other by the browser.
ü  If a user adds multiple areas, the browser reduces them it to one house.
ü  If a user adds multiple lines, the browser reduces them to one line


<!DOCTYPE html> 
<html> 
<head> 
 <title>Display Paragraph</title> 
</head> 
<body> 
 <p> 
 This paragraph has multiple 
 lines. But HTML reduces them 
 to a single line, omitting 
 the carriage return we have used. 
 </p> 

 <p> 
 This paragraph  has multiple 
 spaces.  But HTML reduces them 
 all to a  single space, omitting 
 the extra spaces and line we have used. 
 </p> 
</body> 
</html> 

Output:

align Attribute: The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right or center alignment.

Syntax:

<p align="value">




<!DOCTYPE html> 
<html> 
<head> 
 <title>Paragraph</title> 
</head> 
<body> 
 <p align="center">Welcome to sayed 360</p> 
 <p align="left">A blog portal site.</p> 
 <p align="right">It contains well written, well thought articles.</p> 
</body> 

</html> 

Output:


The <pre> element

We have seen how the paragraph tag ignores all the change of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use.
<!DOCTYPE html> 
<html> 
<head> 
 <title>Display Paragraph</title> 
</head> 
<body> 
 <pre> 
 This paragraph has multiple 
 lines. But it is displayed 
 as it is unlike the paragraph 
 tag. 
 </pre> 

 <pre> 
 This  paragraph has multiple 
 spaces. But  it is displayed 
 as it is unlike the paragraph 
  tag. 
 </pre> 
</body> 

</html> 

Output:



Read more »
By on - No comments:
Tags