HTML5 Basics–Practice 13

This practice in continuation to the practices HTML5 Basics–Practice 11 and HTML5 Basics–Practice 12. We can add style in one more way to our tables. We can give an id to each table and define different properties for those tables. The id should not be only numeric.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Ninth Page</title>
<style>
table, th, td
{
border: 1px solid green;
border-collapse: collapse;
}
th, td
{
padding: 15 px;
text-align: center;
}

table#t1 th
{
background-color: blue;
}

table#t2 th
{
color: red;
}

table#t2 tr:nth-child(even)
{
background-color: #f8c471;
}

table#t2 tr:nth-child(odd)
{
background-color: #abebc6 ;
}
</style>
</head>
<body>
<table id=”t1″>
<tr>
<th>S.No.
<th>Name
</tr>
<tr>
<td>1.
<td>Spriha
</tr>
<tr>
<td>2.
<td>Ankush
</tr>
<tr>
<td>3.
<td>Ritika
</tr>
<tr>
<td>4.
<td>Mohit
</tr>
</table>
<br>
<table id=”t2″>
<tr>
<th>S.No.
<th>Name
</tr>
<tr>
<td>1.
<td>Spriha
</tr>
<tr>
<td>2.
<td>Ankush
</tr>
<tr>
<td>3.
<td>Ritika
</tr>
<tr>
<td>4.
<td>Mohit
</tr>
</table>
</body>
</html>

Output:

Capture21

In the following part of the code, we have defined common properties for all the tables:

table, th, td
{
border: 1px solid green;
border-collapse: collapse;
}
th, td
{
padding: 15 px;
text-align: center;
}

We created two tables with ids t1 and t2. To give a background color to the header of t1, we added the following in the style statement:

table#t1 th
{
background-color: blue;
}

In t2, we have set font color of the header as red using the following code:

table#t2 th
{
color: red;
}

Also, we have set the background color of odd rows as #abebc6 and even rows as #f8c471 using the following code:

table#t2 tr:nth-child(even)
{
background-color: #f8c471;
}

table#t2 tr:nth-child(odd)
{
background-color: #abebc6 ;
}

Try using different permutations and combinations and check if we can have multiple headers in a table.

HTML5 Basics–Practice 12

This practice is in continuation to HTML5 Basics–Practice 11. We will talk of some more features related to tables. Sometimes we might want to cells of rows or columns. To do so, we use attributes colspan and rowspan. We can also add a caption for the table. Type the following code.

“Code Starts”

<!Doctype html>
<html>
<head>
<title>Eighth Page</title>
<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>
</head>
<body>
<h1>With Border</h1>
<table style=”width:100%”>
<tr>
<th>S.No.</th>
<th colspan=”2″>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>Jack</td>
</tr>
<tr>
<td>Snow</td>
<td>Shah</td>
</tr>
</body>
</html>

“Code Ends”

The colspan attribute combines the cell with the cell to its right.

Output:

Now to add rowspan, add the statement that is in bold-italics.

“Code Starts”

<!Doctype html>
<html>
<head>
<title>Eighth Page</title>
<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>
</head>
<body>
<h1>With Border</h1>
<table style=”width:100%”>
<caption>Simple Table Features</caption>
<tr>
<th>S.No.</th>
<th colspan=”2″>Name</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan=”2″>1.</td>
<td>John</td>
<td>Jack</td>
</tr>
<tr>
<td>Snow</td>
<td>Shah</td>
</tr>
</body>
</html>

“Code Ends”

The rowspan attribute merges the cell with the one below it. But if you see, the number “2” shift to the next cell. That is because we did not remove the statement and assigned a cell for the same. Remove the same and you will get the correct output.

Output:

We can also add caption to the table. Add the following statement:

 

 

 

Output:

HTML5 Basics–Practice 11

Today we are going to discuss about tables. A table has components like heading, cell, row, column, and so on. It can have borders. Generally table with borders are preferred as it makes the content look more organized. We will first create a table without borders.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Seventh Page</title>
</head>
<body>
<h1>Without Border</h1>
<table style=”width:100%”>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Snow</td>
<td>60</td>
</tr>
</body>
</html>

“Code ends”

Output:

capture13.png

Now to create a table with border, you only have to add the following inside the style tag:

<style>
table, th, td
{
border:1px solid black;
border-spacing: 6px;
}
</style>

Refer to HTML5 Basics–Practice 8 for more details on style tag.

Output:

If we check carefully, there is space between cells. In order to collapse the cells, use the following code inside the style tag:

<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
</style>

Output:

As we can see, the spaces between the borders are gone. We can align text, add padding, give margins and so on. Ind simple words, padding is the space between between the content and the border, whereas margin is the space outside the border. In order to check the how the table will look after adding the elements, add the following in your code.

<style>
table, th, td
{
border:1px solid black;
border-collapse:collapse;
}
th, td
{
padding: 9 px;
text-align: center;
}
</style>

Try adding margin and other format to the table. We will continue with some more features of tables in the next practice.

HTML5 Basics–Practice 10

In HTML5 Basics–Practice 2 we explained about how to add images in your page. In this practice we will learn something more related to adding images. Let us create a new file eg6.html. Refer HTML5 Basics–Practice 1 to check how to create html files.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Sixth Page</title>
</head>

<body>
<h1>Inserting image</h1>
<img src=”IMG_0032.jpg” alt=”my image” style=”width: 128 px; height: 128 px;”>
<br>
<p><img src=”IMG_0032.jpg” alt=”my image” width=”128″ height=”128″>This is image has been added without any float attribute.</p>
<br>
<p>Click the following gif:</p>
<a href=”file:///D:/HTML-CSS/Test/eg1.html”>
<img src=”200.gif” alt=”my image” style=”width: 128 px; height: 128 px; border: 0;”>
</a>
<br>
<p><img src=”200.gif” alt=”my image” style=”float: right; width: 128 px; height: 128 px; border: 0;”>Floating image on the right.

 

<br>
<p><img src=”humming_bird_flyings_animation_clipart.gif” alt=”my image” style=”float: left; width: 128 px; height: 128 px; border: 0;”>Floating image on the left.

 

</body>
</html>

“Code ends”

As you can see, we can add width and style using 2 methods:

  • Style method
  • Width Height method

The one with style attribute is preferred.

We had discussed the use of href in HTML5 Basics–Practice 1. Similarly, we can link pages to images as follows:

<a href=”file:///D:/HTML-CSS/Test/eg1.html”>
<img src=”200.gif” alt=”my image” style=”width: 128 px; height: 128 px; border: 0;”>
</a>

We can also add animated images, for example gif, to our pages. We add the border attribute as if we do not use it, in few versions of IE(Internet Explorer), a boundary comes around the gif. To align images in html5, use float attribute. Try using big paragraphs to see the difference between using and not using float attribute.

Output:

HTML5 Basics–Practice 9

Today I will explain about few more ways we can implement style to our page and about margin, border and padding. Please go through HTML5 Basics–Practice 8 before starting this practice.

We will create a new html file, eg5.html. Please type the code yourself and do not copy paste.

“Code starts”

<!DOCTYPE html>
<html>
<head>
<title>Fifth Page</title>
<style>
#bla
{
color: red;
}

p.blabla
{
color: blue;
}

#test1
{
border: 1px solid green;
}
#test2
{
border: 1px solid green;
padding: 35px;
}
#test3
{
border: 1px solid green;
margin: 55px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p id=”bla” >This line is using id attribute.</p>

<p class=”blabla”>This line is using class attribute.</p>

<p id=”test1″>This sentence has border.</p>

<p id=”test2″>This sentence has padding and border.</p>

<p id=”test3″>This sentence has margin and border.</p>
</body>
</html>

“Code ends”

Output:

Capture11

In this code you can check we have assigned different styles to different paragraphs.The first way is to assign an id. We are assigning the style in the <style> tag. We use # to define style for the particular id. Similarly we have assigned style using class attribute as well.

We have used border, margin and padding. In simple words, padding is the space between between the content and the border, whereas margin is the space outside the border. Check the output to see the difference.

HTML5 Basics–Practice 8

We have discussed about styles in HTML5 Basics–Practice 6. This was one of the methods by which we can add style in our html file. There are three ways of adding style.

Capture8

The style attribute we had been using till now was inline. We were specifying a style for each statement. Internal CSS is used inside the head tag. We can define the style of the complete html page using this method. In external CSS, we create a separate file to store the styles. The file should be saved with .css extension. This style can be used to give styles to multiple web pages. The benefit of external CSS is that we need to make change in one file to implement the changes in the web pages.

I will show inline and internal css in the following example.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Fourth Page</title>
<style>
p {color: yellow;}
</style>
</head>
<body>
<h1 style=”background-color:red;”>Inline CSS Red background.</h1>

<p>Internal CSS Yellow text color.</p>
</body>
</html>

“Code ends”

Output:

Capture9

The statement, <h1 style=”background-color:red;”>Inline CSS Red background.</h1>, is an example of inline css. We are defining the style in the same line.

For internal css, we have used a <style> tag inside <head>. We have given a style to the paragraph element here.

For external css, you can take any html file. I am using eg1.html file. You can take the code from HTML5 Basics–Practice 4. Then create a .css file. Let us name it First.css.

First.css

“Code starts”

body
{
background-color: yellow;
}
h1
{
color: purple;
}
p
{
font-family: fantasy;
}
pre
{
background-color: blue;
}

“Code ends”

eg1.html

“Code starts”

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>First Page</title>
<link rel=”stylesheet” href=”First.css”>
</head>
<body>
<h1>First Page Heading 1</h1>
<p title=”Tooltip for first paragraph”>Paragraph 1</p>
<hr>
<h2>First Page Heading 2</h2>
<p>Paragraph 2</p>
<hr>
<h3>First Page Heading 3</h3>
<p>Paragraph 3</p>
<hr>
<h4>First Page Heading 4</h4>
<p>Paragraph 4</p>
<hr>
<h5>First Page Heading 5</h5>
<p>Paragraph 5</p>
<hr>
<h6>First Page Heading 6</h6>
<p>Paragraph 6</p>
<hr>

<a href=”https://www.workeatpraylove.com”>Click on this to see my website!!</a>

<br>

<img src= “IMG_0032.jpg” alt=”alternate text for image” width=”104″ height=”142″>

<p title=’example when single quotes to be used: “Spriha” wrote it’>Hover mouse here for single quote usage</p>

<h1>Extra space in paragraph element</h1>

<p>This is the first line
This is the second line
This is the third line</p>

<pre>
This is first line
This is second line
This is third line
</pre>

</body>
</html>

“Code ends”

The statement that has been added in eg1.html is marked in bold and italics.

Output of the code:

Capture10

 

HTML5 Basics–Practice 7

In this practice we will use a new html file. I am naming it eg3.html. We will learn additional tags today. We will also discuss about how we can put our comments in html. Placing comments in html is different than in java or C++.

Comments in html document should be placed between <!–   –>. There is no closing tag required for this. You can also use this to comment in multiple lines. We can also put conditional comments which will be executed only if it passes the condition. We will show these in the code.

We used color in HTML5 Basics–Practice 6. We can add color in different forms in html. We can use the color name, RGB value or HEX value. The color names can be red, orange, yellow, cyan, and so on. There are around 140 standard color names that are supported in html. Color can also be specified using RGB(red, green, blue). Try using different combinations for different colors. Try and see what happens if you place same values for red, green and blue. We can also use HEX values for different colors in #RRGGBB form. FF is the highest value and 00 is the lowest(0—255).

“Code starts”

<!Doctype html>
<html>
<head>
<title>Third Page</title>
</head>
<body>
<p>For short quotations,<q>such as in a single line</q> we can use this.</p>
<p>For multiple sentences, or quotes from other sites, we can use this. <blockquote cite=”www.workeatpraylove.com”>Rumors are carried by haters, spread by fools and accepted by idiots. This is generally indented. Here cite is being used as an attribute.</blockquote></p>

<address>
Spriha Kar<br>
Use This<br>
For Address<br>
123456
</address>

<!–using this comment here–>

<p>I want to become the <abbr title=”Chief Executive Officer”>CEO</abbr> of a company one day.</p>
<p><cite>A book on Cite</cite>: Here we have used cite tag.</p>
<bdo dir=”rtl”>OGNAM</bdo><br>
<bdo dir=”ltr”>Banana</bdo>

<!–we will talk on colors now–>
<p style=”background-color:orange;color:blue;”>Background is orange and text is blue.</p>
<p style=”background-color:rgb(0,188,158);color:blue;”>Background is turqoise and text is blue.</p>
<p style=”background-color:#00FF00;color:#FF0000;”>Background is green and text is red.</p>

</body>
</html>

“Code ends”

Output: