codehub27: February 2023

How to style HTML files using CSS???

Do you want to describe your html file and display it on the web page with some styles. If your answer is yes….

Just use CSS…

What is CSS?

CSS is expanded as Cascading Style sheets which allows the user to style your web pages.

How to do it???

The user follows the syntax

Selector { Property1: Value1; …………; Property n:Value n;}

You can add the CSS code to style your web pages by three types. They are as follows

· Inline CSS
· Internal CSS
· External CSS

Now, each and every CSS type is explained with code.

Inline CSS:

This is the simple way of adding styles to your html document.

There is an element called “Style” in paragraph and heading style tags. You can set the properties with some value for this method.

Program:

<!DOCTYPE html>

<html>

<body>

<h2 style="color:red;"> This is the example of Inline CSS </h2>

<h3 style="color:blue;">This is the sample text </h3>

</body>

</html>

The output is given below….

Inline CSS

Now, Internal usage of CSS is given below.

Internal CSS:

When you want to use the styling for a single HTML page, internal CSS is recommended. Here, you can code in separate <Style> tag.

For eg,

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color:green;}

h1 {color:yellow;}

p {color: white;font-style:Italic; font-size:25pt;}

</style>

</head>

<body>

<h1> Internal CSS </h1>

<p>This is a Sample paragraph.<br>

This includes the text in Italic style </p>

</body>

</html>

Output:

Internal CSS

This is a Sample paragraph.

This includes the text in Italic style

The final type of CSS is External CSS.

External CSS:

When you want to use CSS file for multiple web pages ,you can create a single CSS file and link that file to all html files.

First, create a CSS file “external.css” in c:\program folder.

body

{

background:color:Yellow;

}

{

font-size:25pt;

font-family: timesnewroman;

color:red;

}

{

Font-size:20pt;

Font-family: Arial;

Color: green;

}

Externalcss.html

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="c:\program\external.css">

</head>

<body>

<h2> External CSS</h1>

<p> This is sample paragraph with different font family</p>

</body>

</html>

output:

External CSS

These are the simple ways to style your web pages using CSS.

Forms in html - How to get the User information??

Forms are the interesting feature of HTML. This gets input from the user and sends it to the server for processing.

Tag used : <form>

It has many elements

· <input>
· <label>
· <select>
· <textarea>
· <button>
· <fieldset>
· <legend>
· <datalist>
· <output>
· <option>
· <optgroup>

A sample coding is explained as follows. This form gets the firstname and lastname of a user,gender and email id. This form gets the user details and click the submit button.

Example: Form to get the details of a user

<html>

<head> <title> Enquiry form </title></head>

<body>

<form>

<label for=”Firstname”>Firstname :</label>

<label for=”Lastname”> Lastname:</label>

<label for=”gender”> Choose the gender:</label>

<label for=“email”>Enter the email :</label>

</form>

</body>

</html>

The ouput will be

Enquiry form

Firstname:

Lastname:

Choose the gender: female male others

Enter the email:

Submit

This is the basic form to get the user details. Form has variety of usage when it used with scripting languages.

HTML attibutes-

Attribute are the values to HTML elements which are generally specified in the start tag.

It has some values to be assigned in the form of “attribute= value”

The commonly used attributes are given below.

<html> tag lang attribute

Lang is the attribute which sets the displaying language of the webpage. It has variety of language support.

Generally, we prefer English. It can be represented by “en”. If the US English is your option,set the lang option as “en-US”.

Examples are given below

<html lang=”en”>

When you want the united states English, use this <html lang=”en-US”>.

When you want to set native languages like tamil,telugu,hindi

Use

Lang=”ta” ( for tamil)

Lang =”te” (for telugu)

Lang=”hi” (for hindi)

<img> tag attributes

<img> tag is used to include image in the webpage.

For that, use “src” attribute to get the URL of image.

For setting height and width, the syntax is as follows

width=”measurement in pixels”

height=” measurement in pixels”

when the URL of the image is not available, set the “alt” attribute which gives the message when the image is not displayed.

For eg,

<img src=”image1.jpg”> where “image1.jpg” is the URL of the image file

URL is the Uniform Resource Locator which may be absolute or relative.

Absolute URL is the exact URL( d:\examples\image1.jpg”

Relative URL is the link(image1.jpg). The image is in the same domain.

When you want the image in particular dimension,just set the width and height.

<img src=”image1.jpg” width=”500” height=” 400”>

Next, setting the alternate text when the image is not available,,,

<img src=”image1.jpg” alt=”The image is coming soon”>

Note: alt provides some response text.

<a> tag attribute href

<a> tag is anchor tag to define hyperlink.” href” assigns the hyperlink to the <a> tag.

Let the syntax be,

<a href=” https:\\www.yoursitename.com”> my company </a>

Sometimes, we include links also…

<p> tag title attribute

When you want to set the title for any paragraph ,title attribute is used.

<p title=”sample”>This is the first line of the paragraph</p>

These are the most commonly used attibutes with HTML elements.

Note:

Always use double quotes for attribute values.

Its easy to use lowercase letters for attibutes.

HTML tutorial - DOCTYPE declaration

The first line of html coding is to specify the document type. Document type is declared by the keyword

<! DOCTYPE >

A sample program is given below.

<!DOCTYPE html>

<html>

<head>

<title>

This is the first HTML program </title>

</head>

<body>

This is the sample content </body>

</html>

save this file as "sample.html" in notepad. Open the file in any browser like google chrome, Internet explorer/edge, firefox, safari and opera browser.

It shows the webpage as a window with the text "This is the sample content".

Alternate versions:

when you are using other versions of HTML or XHTML, it has some different syntax to follow....

First, the syntax of html 4.01 version is given below..

Syntax:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"

"URL of DTD file">

Next,the syntax of XHTML is as follows....

Syntax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"URL of DTD file">

Note:

The "DOCTYPE" keyword is not case sensitive as all other html tags. you can use "DocType", "DOCtype", "Doctype", "doctype" instead of "DOCTYPE".

Html tags part 2- headings,paragraph,formatting

Tags which is used to display various types of heading, paragraphes and text formats like bold,italic are explained with some examples.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> tags

These are used to display the heading in differnet sytles. Starting from h1 to h6, the size is decreased.

<!DOCTYPE html>

<html>

<head> Sample program</head>

<body>

<h1> Welcome </h1>

<h2> Welcome </h2>

<h3> Welcome </h3>

<h4> Welcome</h4>

<h5> Welcome </h5>

<h6> Welcome </h6>

</body>

</html>

output will be

Sample program

Welcome

Next, for displaying paragraph, <p> tag is used.

<p> tag:

Do you want to insert a set of words, passages and paragraphs in a page . If your answer yes,use this paragraph tag.

<html>

<head> This is a sample html program </html>

<body>

<p> This is a sample paragraph. You can see in the browser window. You can add many lines in the paragraph

</p>

</body>

</html>

Tags used in paragraph:

When the user want to make the text in italic format, <i> tag is used. Alternatively, ,<b> tag is used to make the text to be displayed in BOLD size.

When you want to break the line,just use <br> tag.

Sample code is given below…

<html>

<head> This is a sample html program to display a paragraph </head>

<body>

<p>This paragraph has many texts with various formats. <br>

<b>Some texts are bold </b><br>

<i> Some texts are italic </i><br>

Some are normal in size

</body>

</html>

The ouput will be...

This is a sample html program to display a paragraph

This paragraph has many texts with various formats.

Some texts are bold

Some texts are italic

Some are normal in size

These tags are generally used in document body.