HTML Iframes

To add a webpage on your website you have to use an iframe

Like:

Use following html

<iframe width="560" height="315" src="https://www.youtube.com/embed/2Rc9c9y107k?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

HTML Tables

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Basic HTML Table

                                                                                                            

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

table, th, td {
  border: 1px solid black;}

Bordered Table

Use the CSS border property to add a border to the table.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;}

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

th, td {
  padding: 15px;}

Cellpadding

Cell padding specifies the space between the cell content and its borders.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

th {
  text-align: left;}

Left-align Headings

To left-align the table headings, use the CSS text-align property.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

table {
  border-spacing: 5px;}

Note: If the table has collapsed borders,  border-spacing has no effect.

Border Spacing

Border spacing specifies the space between the cells.

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute.

Name	Telephone
Bill Gates	55577854	55577855

HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

Name:	Bill Gates
Telephone:	55577854
	55577855

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

able Caption

To add a caption to a table, use the caption tag.

Monthly savings

Month	Savings
January	$100
February	$50

Note: The <caption> tag must be inserted immediately afterthe <table> tag.

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
  width: 100%; 
  background-color: #f1f1c1;}

Styling Tables

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

And add more styles:

table#t01 tr:nth-child(even) {
  background-color: #eee;}
table#t01 tr:nth-child(odd) {
  background-color: #fff;}
table#t01 th {
  color: white;
  background-color: black;}

Styling Tables

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

Chapter Summary

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

Thanks for learning this exciting TAG & attributes !

HTML Styles - CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

  <!DOCTYPE html>                                 
   <html>                                                
   <head>                                                 
   <style>                                                 
   body {background-color: powderblue;}  
   h1   {color: blue;}                                
   p    {color: red;}</style>                     
   </head>                                                      
   <body>                                                         

   <h1>This is a heading</h1>                         
   <p>This is a paragraph.</p>                         

   </body>                                                           
   </html>                                                            

External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

<!DOCTYPE html>                               
<html>                                        
<head>                                        
  <link rel="stylesheet" href="styles.css">   
</head>                                       
<body>                                        

<h1>This is a heading</h1>                    
<p>This is a paragraph.</p>                   

</body>                                       
</html>                                       

An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
  background-color: powderblue;}
h1 {
  color: blue;}
p {
  color: red;}

CSS Fonts

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;}</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

The CSS border property defines a border around an HTML element:

p {
  border: 1px solid powderblue;}

CSS Padding

The CSS padding property defines a padding (space) between the text and the border:

p {
  border: 1px solid powderblue;
  padding: 30px;}

CSS Margin

The CSS margin property defines a margin (space) outside the border:

p {
  border: 1px solid powderblue;
  margin: 50px;}

The id Attribute

To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

#p01 {
  color: blue;}

Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!

The class Attribute

To define a style for special types of elements, add a class attribute to the element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

p.error {
  color: red;}

External References

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

This example links to a style sheet located in the html folder on the current web site:

<link rel="stylesheet" href="/html/styles.css">

This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">

Chapter Summary

• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border