26/08/2016

HTML Phrase Tags

The phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>.

Emphasized Text

Anything that appears within <em>...</em> element is displayed as emphasized text.

Example

<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a emphasized typeface.

Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.

Example

<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
This will produce following result:
The following word has been marked with yellow.

Strong Text

Anything that appears within <strong>...</strong> element is displayed as important text.

Example

<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a strong typeface.

Text Abbreviation

You can abbreviate a text by putting it inside opening <abbr> and closing</abbr> tags. If present, the title attribute must contain this full description and nothing else.

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is  <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>
This will produce following result:
My best friend's name is Abhy.

Acronym Element

The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the <acronym> element.

Example

<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
This will produce following result:
This chapter covers marking up text in XHTML.

Text Direction

The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

Example

<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
This will produce following result:
This text will go left to right.
This text will go right to left.

Special Terms

The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's usage is similar to italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.

Example

<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
This will produce following result:
The following word is a special term.

Quoting Text

When you want to quote a passage from another source, you should put it in between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.

Example

<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>

<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
This will produce following result:
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

Short Quotations

The <q>...</q> element is used when you want to add a double quote within a sentence.

Example

<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
This will produce following result:
Amit is in Spain, I think I am wrong.

Text Citations

If you are quoting a text, you can indicate the source placing it between an opening <cite> tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.

Example

<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>
This will produce following result:
This HTML tutorial is derived from W3 Standard for HTML.

Computer Code

Any programming code to appear on a Web page should be placed inside<code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

Example

<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
This will produce following result:
Regular text. This is code. Regular text.

Keyboard Text

When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.

Example

<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
This will produce following result:
Regular text. This is inside kbd element Regular text.

Programming Variables

This element is usually used in conjunction with the <pre> and <code>elements to indicate that the content of that element is a variable.

Example

<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
This will produce following result:
document.write("user-name")

Program Output

The <samp>...</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.

Example

<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
This will produce following result:
Result produced by the program is Hello World!

Address Text

The <address>...</address> element is used to contain any address.

Example

<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
</body>
</html>
This will produce following result:
388A, Road No 22, Jubilee Hills - Hyderabad

16/08/2016

CSS Horizontal Align

In CSS, we can use different properties (like margin, position or float) to align elements horizontally.

Using the margin Property for Center Aligning

By setting the margin-left and margin-right property to "auto" for a block element, specifies the available margin equally.

 The will define the element as a center aligned:

Example
#example-center 
{
 margin-left: auto;
 margin-right: auto;
 width: 50%;
 background-color: #336699;
}

Using the position Property to Align Left and Right

Using the absolute positioning also, we can achieve the left or right alignment of HTML element:
#example-right
{
    position: absolute;
    right: 0px;
    width: 150px;
    background-color: #336699;
}

Using the float Property to Align Left and Right

Another way to aligning elements is by using the float property:
#example-right
{
 float: right;
 width: 150px;
 background-color: #336699;
}

CSS Position Property

In CSS, the position property is used to set position for the HTML elements. Mainly the position property can have four possible values - static, relative, fixed or absolute.

The position:static property

By default, the HTML elements have the position value as static which can not be affected by the top, bottom, left, and right properties.

Example

#example-static
{
 position: static;
 border: 1px solid black;
}

The position:relative property

Positioning any HTML element as relative, is positioned relative to its normal position. This can be done by setting the top, right, bottom, and left properties of a relatively-positioned element. 
#example-relative
{
 position: relative;
 left: 25px;
 border: 1px solid black;
}

The position:fixed property

Positioning any HTML element as fixed, allows to position an HTML element to a particular spot on the page (relative to the viewport). It will fix the position of the element that always stays in the same place even if the page is scrolled.

Below example will set a fixed element in the lower-right corner of the page:
#example-fixed
{
 position: fixed;
 bottom: 0;
 right: 0;
 width: 250px;
 border: 1px solid black;
}

The position:absolute property

An element defined with the position: absolute property is positioned at the specified coordinates relative to the screen top-left corner.
#example-absolute 
{
 position: absolute;
 left: 250px;
 top: 250px;
 border: 1px solid black;
}

11/08/2016

CSS Display and Visibility

In CSS  display property defines how an element is displayed (used for controlling layout). 
The visibility property defines whether an element should be visible or hidden.

CSS Display Property

In HTML each and every element has a default display value either block or inline.

A block value specifies the full width available for an element and by default use a line break before and after it.

Some common HTML elements which have the display value as block are < h1 >, < p >, < li >, < div > etc. 

An inline value specifies the necessary width of the element only, and never force for line breaks before and after the element.

Some common HTML elements which have the display value as inline are < span >, < a > etc.

we can change the display of any element by using the CSS display property. Below is the example:

h1 
{
 display: inline;
}
a 
{
    display: block;
}

Hiding any Element - using display:none or visibility:hidden

Any element can be hide by using the CSS display or visisbility property. 

using display:none property

This property hides an element and it will not take any space for the element on the webpage.

 h1
 {
  display: none;
 }

using visibility:hidden property

This property hides an element but still it will take the same space for the element as before on the webpage.

 h1 
 {
  visibility: hidden;
 }

CSS Font

CSS Font property is used to control the look of texts by defining their font family, boldness, size and the style. 

Font Family

The font-family property is used to set the font family of a text.

p 
{
 font-family: Times, serif;
}

Note: Here we have specified two font families Times and Serif. This approach is helpfule when a browser does not support the first one then it tries the next font. Use quotation marks if the name of a font family is more than one word like "Times New Roman".

Font Style

The font-style property is used to specify style (normal, italic or oblique) of the text.

The posible value for this property can be:
  • normal - Specify a normal text
  • italic - Specify a text in italics
  • oblique - Specify a text "leaning" (very similar to italic, but less supported)
h1
{
 font-style: normal;
}
h2
{
 font-style: italic;
}
p
{
 font-style: oblique;
}

Font Size

The font-size property is used to sets the size of the text either in absolute (like in pixels, point etc) or relative (like in percentage, em etc).

h1 
{
    font-size: 16px;
}

h2 
{
    font-size: 2em;
}
The em size unit is recommended by the W3C. 1em = 16px ( 16 px is the default size of text in browsers).

Possible values of the font-size property can be:
ValueDescription
mediumSets the font-size to a medium size. This is default
xx-smallSets the font-size to an xx-small size
x-smallSets the font-size to an extra small size
smallSets the font-size to a small size
largeSets the font-size to a large size
x-largeSets the font-size to an extra large size
xx-largeSets the font-size to an xx-large size
smallerSets the font-size to a smaller size than the parent element
largerSets the font-size to a larger size than the parent element
lengthSets the font-size to a fixed size in px, cm, etc.
%Sets the font-size to a percent of the parent element's font size

Font Weight

The font-weight property is used to sets the weight (how bold a font) of the text. Possible values for this property could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

h2 
{
    font-size: 2em;
 font-weight:bold;
}

All CSS Font Properties

PropertyDescription
font-familySpecifies the font family for text
font-sizeSpecifies the font size of text
font-styleSpecifies the font style for text
font-variantSpecifies whether or not a text should be displayed in a small-caps font
font-weightSpecifies the weight of a font
Subscribe to: Posts (Atom)

Contact Form

Name

Email *

Message *