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.

HTML5 Basics–Practice 1

The following is for your practice. Please do not copy paste. Try to read and then write the code yourself. You can use notepad++. It is a better version of notepad. You can open multiple tabs and work on them simultaneously.

You can open a file and save it with the extension you want. For example, you open a new page and save it with the .html(hypertext markup language) extension. When you type your code, it will start giving you options of different tags you can use.

So following is the code you need to type once you have saved your file with .html extension. Please use proper indentation. It helps understand the code better.

“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 line to see my website!!</a>
</body>
</html>

“Code ends”

Let us explain a few things from the above code. Every HTML5 document starts with “<!DOCTYPE html>”. My friend, who is teaching me HTML5, told me that earlier it used to be a long code. Now it has been reduced. Elements are represented by tags. For example, <h1> is the opening tag and </h1> is the closing tag. There are 6 different types of heading used. Once you execute it, you will come to know about the difference. The page has a head tag and a body tag. Head contains the meta information and body contains the visible part of the page. <p> tag is used for paragraph element. When you view the content in a browser, you will find that between the paragraphs, some space has been automatically added by the browser. Also, the browser will remove the extra space on its own while displaying the content. Refer HTML5 Basics–Practice 4 for this.

Note: The closing tag is not necessary, but we should use the closing tag. Sometimes not using those might lead to errors.

Headings are important as search engines use these to index the content. Also, we should not use headings for content.

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

In this when we click on the sentence “Click on this line to see my website!!”, it will take us to the website “https://www.workeatpraylove.com “. <a> tag is used for HTML links. The link is defined in the href attribute.

Try to experiment with the code.

Job_Chennai_Bangalore_Cochin

Please send resume: spriha.kar@wipro.com; spriha24kar@gmail.com

Interview location

Chennai

Bangalore

Cochin

Dates

24th–26th May 2017

24th–26th May 2017

24th–26th May 2017

Timings

9:30 AM–11 AM

9 AM–11 AM

9 AM–11 AM

Venue

CDC1, 105, Wipro Ltd, Annasalai, Guindy

Wipro Ltd , Infopark, Kusumagiri PO Kakkanad, Kochi

Wipro Ltd , Infopark, Kusumagiri PO Kakkanad, Kochi

Process

KYC, Banking

Order Management

Healthcare

Finance & Accounts

Band

AA

AA

AA

AA

Qualification

Any Graduates with relevant experience

Any Graduates with relevant experience in Order management

Any graduates ( Except BE/B. Tech/ Bsc IT/ BCA)

Only Commerce Graduates ( B. Com/ BBA, M. Com)

Experience

1 – 3 Years

0 – 2 Years

0 – 2 Years

0 – 2 Years

Skills

·KYC/AML/ Customer screening/ Transaction Monitoring Exp

·Good analytical skills

·Excellent Communication Skills

·Ability to understand and interpret numerical data

·Good Communication Skills

·Logistics certifications/ exposure for experienced candidates.

·SAP SD/MM module certifications / exposure for candidates with work experience

·Good communication Skills

·Good Typing Skills

·Good Understanding of MS – Excel, MS – Office, Ms – Word.

·Good Accounting knowledge

·Good Understanding of MS – Excel, MS – Office, Ms – Word

Shifts

Flexible to work in night shifts.( 24* 7)

Work Location

Chennai ( Shollinganallur)