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:

HTML5 Basics–Practice 6

This is in continuation to the code of HTML5 Basics–Practice 5. Even today we will go through some easy tags. You can type the code and then check the output. The new addition to the previous code is in bold and italics.

Capture6

“Code Starts”

<!Doctype html>
<html>
<head>
<title>Second Page</title>
</head>
<body style=”background-color:red;”>
<h1 style=”color:green;”>Green Heading h1</h1>
<p style=”color:blue;”>Blue paragraph.</p>

<h2 style=”font-family:arial;”>Arial Font h2</h2>
<p>This is normal paragraoh</p>
<p style=”font-size:5em;”>This is 5em font sized paragraph.</p>
<p style=”font-size:5pt;”>This is 5pt font sized paragraph.</p>
<p style=”font-size:5px;”>This is 5px font sized paragraph.</p>
<p style=”font-size:5%;”>This is 5% font sized paragraph.</p>
<p style=”text-align:center;”>This is a centre aligned text.</p>

<h1 style=”text-align:center;”>This is center aligned.</h1>
<h1 style=”text-align:left;”>This is left aligned.</h1>
<h1 style=”text-align:right;”>This is right aligned.</h1>

<p><b>This text is in bold.</b></p>
<p><i>This text is in italics.</i></p>
<p><u>This text is underlined.</u></p>
<p><strong>This text is important.</strong></p>
<p><em>This text is emphasised.</em></p>
<p>2 <sup>superscript 3</sup></p>
<p>3 <sub>subscript 2</sub></p>
<p><small>This text is small.</small></p>
<p>This text has <ins>inserted tag</ins>.</p>
<p>This text has <del>deleted tag</del>.</p>
<p>This text has <mark>mark tag</mark>.</p>
</body>
</html>

“Code ends”

If you have any queries, please post your comments.

HTML5 Basics–Practice 5

We had discussed about the attribute Styles in HTML5 Basics–Practice 3. In this practice we will elaborate it with different examples of background color, font, and so on. We will write a new code here. I am naming my new file as eg2.html. Please do not copy and paste the code. Try to type it.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Second Page</title>
</head>
<body style=”background-color:red;”>
<h1 style=”color:green;”>Green Heading h1</h1>
<p style=”color:blue;”>Blue paragraph.</p>

<h2 style=”font-family:arial;”>Arial Font h2</h2>
<p>This is normal paragraph</p>
<p style=”font-size:5em;”>This is 5em font sized paragraph.</p>
<p style=”font-size:5pt;”>This is 5pt font sized paragraph.</p>
<p style=”font-size:5px;”>This is 5px font sized paragraph.</p>
<p style=”font-size:5%;”>This is 5% font sized paragraph.</p>
<p style=”text-align:center;”>This is a center aligned text</p>

<h1 style=”text-align:center;”>This is center aligned</h1>
<h1 style=”text-align:left;”>This is left aligned</h1>
<h1 style=”text-align:right;”>This is right aligned</h1>
</body>
</html>

Most of the tags used here have been discussed in the previous practices. Here we will be talking about different styles we can use with the element for a better look of your page.

Most of the styles you will be able to understand just by reading them. For example, background-color is for the background color of your page. If you want a style for the complete page, you can put it in the body tag. text-align is used to align the text. color is used for the text color. font-family is used for the

The interesting part in this code is of font-size. You must have noticed that I have used four different types of units to define the font size: %, em, pt, px. A font size of 100% means it has the original size. If we mention 200%, it becomes twice the original size. em represents current size of the text. If we set size in body as 10, and then later in the code we use 2em, the size of that text will become 20. This is a little confusing at first but will become clear once you start using the units at different places in the code.

HTML5 Basics–Practice 4

This is in continuation to HTML5 Basics–Practice 3. The method will remain same. Codes will be same with addition of new statements. If you have any queries, feel free to comment.

If you want to get the source code of web pages, just right click and select view source.

Sometimes you might want to put a line between contents. For this we can use the Horizontal Rules . It is represented by the <hr> tag. Also, in HTML5 Basics–Practice 1, we had mentioned about blank spaces in paragraph. We will show it in the following code.

“Code starts”

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>First Page</title>
</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>
</body>
</html>

“Code ends”

Out put for <hr> tag:

Output for white space:

 

 

This is also referred to as the poem problem. A poem includes short lines that come one after the other. To include break after each line can be a tedious task. To overcome this, we have the <pre> tag. It prints the output the way it is written,i.e, including the white spaces. To implement the same, just replace the tag <p> with <pre>. Do not forget to close this tag.

HTML5 Basics–Practice 3

This practice is in continuation to HTML5 Basics–Practice 2. I will be writing the complete code here, but if you have already written the code from previous practices, you just need to add the extra code.

You must have noticed in the code from practice 2 that we had mentioned width and height for image element. These are called attributes of an element. It provides additional information to the element.These are written in the opening tag. And the format is Name=Value.

The following table shows the list of some commonly used attributes in HTML.

We have already mentioned href, src, width, height and alt in the code. We will be adding a few.

“Code starts”

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

<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>
</body>
</html>

“Code ends”

Output for tooltip:

 

 

 

 

Output for single quote:

 

HTML5 Basics–Practice 2

This is in continuation with our first practice, HTML5 Basics–Practice 1. I will mostly use previous code and will italicize and bold the code that will be new. Here I am continuing the code from Practice 1.

There is an element: <br>. This is an empty element as it does not have any content. It is used for line break. Now type the following code. Please do not copy paste.

“Code starts”

<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<h1>First Page Heading 1</h1>
<p>Paragraph 1</p>
<h2>First Page Heading 2</h2>
<p>Paragraph 2</p>
<h3>First Page Heading 3</h3>
<p>Paragraph 3</p>
<h4>First Page Heading 4</h4>
<p>Paragraph 4</p>
<h5>First Page Heading 5</h5>
<p>Paragraph 5</p>
<h6>First Page Heading 6</h6>
<p>Paragraph 6</p>

<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″>
</body>
</html>

“Code ends”

As you have noticed, there are a few statements i have added to the code from HTML5 Basics–Practice 1(starting from <br>). Here we are trying to add an image. Make sure that the image is placed in the same folder where your .html file is saved. Alternative text (alt), width and height are attributes. If sometime the image cannot be viewed, because of slow connection or any other reason, this text gets displayed. Width and height are the dimensions of the image. If you are not sure how the dimensions being set by you will look, open the respective html document(in my case i have saved the code in the file named “eg1.html”), right click on the web page and select Inspect Element. A window will appear. See the following image.

Here you can see a window has appeared with tabs like Inspector, Console and so on. Click the Inspector tab, select the statement of the image, and change the dimensions to check which size suits you. Accordingly you can change it in your code.

In HTML, elements can be nested. It means that we can define an element inside another element. Also, HTML tags are not case-sensitive. But lower case is preferred. Also, double quotes can be omitted. But it is preferred to use the quotes. Sometimes the content to be displayed has quotes in it, in that case we use single quotes around the double quotes. Refer to the example given in HTML5 Basics–Practice 3.