LEARN WEB DESIGN

Soft Hyphens

noreply@blogger.com (Anonymous) — Thu, 24 Oct 2013 05:33:00 +0000

Occasionally, you will want to allow a browser to hyphenate long words to better justify a paragraph. For example, consider the following code and its resulting output.

<p style="text-align: justify;"> The morbid fear of the number 13, or triskaidekaphobia, has plagued some important historic figures like Mahamiya and Nanao.</p>

In cases where you want a client browser to be able to hyphenate a word if necessary, use the soft hyphen entity () to specify where a word should be hyphenated. So above example should be written as follows:

<p style="text-align: justify;"> Example for soft hyphen - The morbid fear of the number 13, or triskaidekaphobia, has plagued some important historic figures like Mahamiya and Nanao.</p>

NOTE: This may notwork with some web browsers.

Preserve Formatting - The <pre> Element:

Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag (<pre>).

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

<pre>
function demoFunction( strText ){
alert (strText) }
</pre>

Horizontal Rules - The <hr /> Element:

Horizontal rules are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example you may want to give a line between two paragraphs as follows:

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

Again <hr /> tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Note: The <hr /> element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <hr> it is not valid XHTML

Presentational Tags:

If you use a word processor, you are familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text - The <b> Element:

Anything that appears in a <b>...</b> element is displayed in bold, like the word bold here:

<p>The following word uses a <b>bold</b> typeface.</p>

Italic Text - The <i> Element:

Anything that appears in a <i>...</i> element is displayed in italicized, like the word italicized here:

<p>The following word uses a <i>italicized</i> typeface.</p>

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Create Line Breaks - The Element

noreply@blogger.com (Anonymous) — Thu, 24 Oct 2013 05:03:00 +0000

Whenever we use the <br /> element, anything following it starts on the next line. This tag is an example of an empty element, where we do not need opening and closing tags, as there is nothing to go in between them.

Note: The <br /> element has a space between the characters br and the forward slash. If we omit this space, older browsers will have trouble rendering the line break, while if we miss the forward slash character and just use <br> it is not valid XHTML

Example:

My Dear<br />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.<br />

Regards<br />

Ahmad Bin Musa

Centring Content - The <center> Element:

We can use <center> tag to put any content in the center of the page or any table cell.

Example:

<p>This is not in the center.</p>
<center><p>This is in the center.</p></center>

Nonbreaking Spaces:

For example we were to use the phrase "10 Hungry Men." Here we would not want a browser to split the "10" and "Hungry" across two lines:

A good example of this technique appears in the movie "10 Hungry Men."

In cases where we do not want the client browser to break text, we should use a nonbreaking space entity ( ) instead of a normal space. For example, when coding the "10 Hungry Men" paragraph, we would use something similar to the following code:

<p>A good example of this technique appears in the movie "10 Hungry Men."</p>

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

HTML Formatting Tags

noreply@blogger.com (Anonymous) — Thu, 24 Oct 2013 00:56:00 +0000

If we want people to read what we have written, then structuring our text well is even more important on the Web than when writing for print. People have trouble reading wide, long, paragraphs of text on Web sites unless they are broken up well.

This section will teach us a basic text formatting elements like heading elements and paragraph elements.

White-spaced Flow:

Before we start to mark up our text, it is best to understand what HTML does when it comes across spaces and how browsers treat long sentences and paragraphs of text.

We might think that if we put several consecutive spaces between two words, the spaces would appear between those words onscreen, but this is not the case; by default, only one space will be displayed. This is known as white space collapsing. So we need to use special HTML tags to create multiple spaces.

Similarly, if we start a new line in our source document, or we have consecutive empty lines, these will be ignored and simply treated as one space. So we need to use special HTML tags to create more number of empty lines.

Create Headings - The <hn> Elements:

Any documents starts with a heading. We use different sizes for our headings. HTML also have six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and after that heading.

Example:

<h1>This is heading number 1</h1>

<h2>This is heading number 2</h2>

<h3>This is heading number 3</h3>

<h4>This is heading number 4</h4>

<h5>This is heading number 5</h5>

<h6>This is heading number 6</h6>

Create Paragraph - The <p> Element:

The <p> element offers a way to structure our text. Each paragraph of text should go in between an opening <p> and closing </p> tag as shown below in the example:

<p>Our first paragraph.</p>

<p>Our second paragraph.</p>
<p>Our third paragraph.</p>

We can use align attribute to align our paragraphs.

<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is jutified. This works when you have multiple lines in your paragraph and you want to justfy all the lines so that they can look more nice.</p>

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

The lang Attribute

noreply@blogger.com (Anonymous) — Tue, 15 Oct 2013 04:18:00 +0000

The lang attribute allows we to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.

When included within the <html> tag, the lang attribute specifies the language we've generally used within the document. When we used within other tags, the lang attribute specifies the language we used within that tag's content. Ideally, the browser will use lang to better render the text for the user.

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

Sample:

<html lang=fr>

<head>

<title>French Language Page</title>

</head>

<body>

This page is using French Language

</body>

</html>

The xml:lang Attribute:
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.

Generic Attributes:
Here's a table of some other attributes that are readily usable with many of HTML's tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places an background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title for your elements.

We will see related examples as we will proceed to study other HTML tags.

For a complete list of HTML Tags and related attributes please check reference to HTML Tags List.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

The Class Attribute

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 15:29:00 +0000

The class attribute is used to associate an element with a style sheet, and specifies the class of element. We learn more about the use of the class attribute when we will learn Casecading Style Sheet (CSS). So for now we can avoid it.

The value of the attribute may also be a space-separated list of class names. For example:

class="yourClass1 yourClass2 yourClass3"

The style Attribute:
The style attribute allows we to specify CSS rules within the element. For example:

<p style="font-family:arial; color:#FF0000;">Your text...</p>

Internationalization Attributes:

There are three internationalization attributes, which are available to most (although not all) XHTML elements.

dir
lang
xml:lang

The dir attribute allows we to indicate to the browser the direction in which the text should flow.The dir attribute can take one of two values, as we can see in the table that follows:

Value	Meaning
ltr	The default value (left to right)
rtl	The default value (right to left). Arabic language start from right side.

Example:

<html dir=rtl>
<head>
<title>Website Title</title>
</head>
<body>Write something and check on your browser.</body>
</html>

When we used dir attribute within the HTML tag, it determines how text will be present within the entire SITE or DOC. When we used within other tag, it change the text's position for just the content of that tag.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

HTML Attributes

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 15:11:00 +0000

Attributes are important part of HTML. Attribute is used to define the peculiarity of an element and is place inside the element's opening tag. Every attributes are made up of two parts: name and value:

The name is the property we want to setup. Example, the <font> element in the example carry an attribute whose name is face, which we can use to indicate which typeface we want the text to appear in.
The value is what we want the value of the property to be. The first example was supposed to use the Arial typeface, so the value of the face attribute is Arial.

The value of the attribute should be put in double quotation marks, and is separated from the name by the equals sign. We can see that a color for the text has been specified as well as the typeface in this <font> element:

<font face="arial" color="#CC0000">

Many HTML tags have a unique set of their own attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.

Core Attributes:

The four core attributes that can be used on the majority of HTML elements (although not all) are:

id
title
class
style

The id Attribute:

The id attribute can be used to uniquely identify any element within a page ( or style sheet ). There are two primary reasons that we might want to use an id attribute on an element:

If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content.
If we have two elements of the same name within a Web page (or style sheet), we can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, the id attribute could be used to distinguish between two paragraph elements, like so:

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Casecading Style Sheet (CSS)</p>

Note: that there are some special rules for the value of the id attribute, it must:

Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0.9), hyphens, underscores, colons, and periods.
Remain unique within that document; no two attributes may have the same value within that HTML document.

The title Attribute:

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute:

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip or while the element is loading.

For example:

<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

Above code will generate following result:

Titled Heading Tag Example

Now try to bring our cursor over "Titled Heading Tag Example" and see the result.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Setting Cookies

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 14:54:00 +0000

We can use Meta Tag to store cookies on client side later information can be used by then Web Server to track a site visitor.

<head>
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 14-Oct-13 23:59:59 GMT; />
</head>

If we do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.

Setting Author Name:

We can set an author name in a web page using Meta Tag. See an example below:

<head>

<meta name="author" content="Ahmad Bin Musa" />

</head>

If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Specifying Keywords

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 14:47:00 +0000

We specify keywords which will be used by the search engine to search a web page. So using following tag you can specify important keywords related to your page.

<head>

<meta name="keywords" content="HTML, meta tags, metadata" />

</head>

Document Description:
This is again important information and many search engine use this information as well while searching a web page. So we should give an appropriate description of the page.

<head>
<meta name="description" content="Learn about Meta Tags." />
</head>

Document Revision date:
This information tells about last time the document was updated.

<head>
<meta name="revised" content="HTML Tutorials, 14/10/2013" />
</head>

Document Refreshing:
We can specify a duration after which your web page will keep refreshing. If we want our page keep refreshing after every 10 seconds then use the following syntax.

<head>
<meta http-equiv="refresh" content="10" />
</head>

Page Redirection:
We can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. We can specify a duration after which page will be redirected.

<head>
<meta http-equiv="refresh" content="10; url=http://learnhtmlandcssonline.blogspot.com" />
</head>

If we don't provide a duration then page will be redirected immediately.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

HTML Meta Tags

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 14:38:00 +0000

HTML lets you specify metadata - information about a document rather than document content - in a variety of ways. The META element can be used to include name/value pairs describing properties of the HTML document, such as author, Expiry Date, a list of key words, author etc.

The <meta> tag is an empty element and so does not have a closing tag, rather, <meta> tags carry information within attributes, so you need a forward slash character at the end of the element.

Metadata provided by using meta tag is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.

Adding Meta Tags to Your Documents:
You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:

Attribute	Description
Name	Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content	Specifies the property's value.
scheme	Specifies a scheme to use to interpret the property's value (as declared in the content attribute).
http-equiv	Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

NOTE: Core attributes for all the elements are discussed in next chapter.

Meta Tag Examples:
Let's see few important usage of Meta Tags.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

The BODY Element

noreply@blogger.com (Anonymous) — Mon, 14 Oct 2013 13:58:00 +0000

The <body> element appears after the <head> element and contains the part of the Web page that we actually see in the main browser window, which is sometimes referred to as body content.

A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables.

Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag.

Example:
Here is the example of using body tag.

<body>

<p>This is a paragraph tag.</p>

</body>

Putting all together:

Now if we will put all these tags together, it will constitute a complete HTML document as follows:

<html>
<head>

<title>HTML Basic tags</title>

<meta name="Keywords" content="HTML, Web Pages" />

<meta name="description" content="HTML Basic Tags" />

<base href="http://learnhtmlandcssonline.blogspot.com/" />

<link rel="stylesheet" type="text/css" href="tp.css" />

<script type="text/javascript"> _uacct = "UA-44808176-1"; urchinTracker(); </script>

</head>
<body>

<p>This is a paragraph tag.</p>

</body>
</html>

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

The HEAD element

noreply@blogger.com (Anonymous) — Sun, 13 Oct 2013 02:26:00 +0000

The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.

Each <head> element should contain a <title> element indicating the title of the document, although it may also contain any combination of the following elements, in any order:

The <base> tag is used to areate a "base" url for all links on the page. Check HTML Base tag.
The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. Check HTML Object tag.
The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. Check HTML Link tag.
The <style> tag is used to include CSS rules inside the document. Check HTML Style tag.
The <script> tag is used to include JAVAScript or VBScript inside the document. Check HTML Script tag.
The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications. Check HTML Meta tag.

Example:
Following is the example of head tag.


<head>

<title>HTML Basic tags</title>

<meta name="Keywords" content="HTML, Web Pages" />

<meta name="description" content="HTML Basic Tags" />

<base href="http://learnhtmlandcssonline.blogspot.com/" />

<link rel="stylesheet" type="text/css" href="tp.css" />

<script type="text/javascript"> _uacct = "

UA-44808176-1"; urchinTracker(); </script>
</head>

The <title> Element:
You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways:

It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers such as IE and Netscape.
Its is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.

Example:
Here is the example of using title tag.


<head>

<title>HTML Basic tags</title>

</head>

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

HTML Document Structure

noreply@blogger.com (Anonymous) — Sat, 12 Oct 2013 22:01:00 +0000

An HTML document starts and ends with <html> and >/html> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections:

The <head>...</head> elements, which contain information about the document such as title of the document, author of the document etc. Information inside this tag does not display outside.
The <body>...</body> elements, which contain the real content of the document that you see on your screen.

HTML Tags and Elements:

HTML language is a markup language and we use many tags to markup text. In the above example we have seen <html>, <body> etc. are called HTML tags or HTML elements.

Every tag consists of a tag name, sometimes followed by an optional list of tag attributes , all placed between opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as <head> and <i>. More complicated tags contain one or more attributes , which specify or modify the behaviour of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect between <head>, <Head>, <HEAD>, or even <HeaD>; they are all equivalent. But with XHTML, case is important: all current standard tag and attribute names are in lowercase.
HTML is Forgiving?

A very good quality associated with all the browsers is that they would not give any error if we have not put any HTML tag or attribute properly. They will just ignore that tag or attribute and will apply only correct tags and attributes before displaying the result.

We can not say, HTML is forgiving because this is just a markup language and required to format documents.

HTML Basic Tags
The basic structure for all HTML documents is simple and should include the following minimum elements or tags:

<html> - The main container for HTML pages
<head> - The container for page header information
<title> - The title of the page
<body> - The main body of the page

Remember that before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.

Now we will explain each of these tags one by one. In this tutorial you will find the terms element and tag are used interchangeably.

The <html> Element:
The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag.
Following two elements appear as direct children of an <html> element:

<head>

<body>

As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Creating HTML Document

noreply@blogger.com (Anonymous) — Sat, 12 Oct 2013 21:07:00 +0000

Creating an HTML document is easy. To begin coding HTML you need only two things: a simple- text editor and a web browser. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.

We can use our HTML Online Editor to learn HTML. Here are the simple steps to create a baisc HTML document:

Open Notepad or another text editor.
At the top of the page type <html>.
On the next line, indent five spaces and now add the opening header tag: <head>.
On the next line, indent ten spaces and type <title> </title>.
Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>.
Five spaces in from the margin on the next line, type<body>.
Now drop down another line and type the closing tag right below its mate: </body>.
Finally, go to the next line and type </html>.
In the File menu, choose Save As.
In the Save as Type option box, choose All Files.
Name the file template.htm.
Click Save.

We have basic HTML document now, to see some result put the following code in title and body tags.


<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document description goes here.....</p>

</body>

</html>

Now we have created one HTML page and we can use a Web Browser to open this HTML file to see the result. Hope you understood that Web Pages are nothing but they are simple HTML files with some content which can be rendered using Web Browsers.

Here <html>, <head>,...<p>, <h1> etc. are called HTML tags.
HTML tags are building blocks of an HTML document and we will learn all the HTML tags in subsequent chapters.

NOTE: One HTML file can have extension as .htm or .html. So you can use either of them based on your comfort.

<< Previous Next >>

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

HTML Introduction

noreply@blogger.com (Anonymous) — Sat, 12 Oct 2013 20:48:00 +0000

Before we begin:

Before we begin, it's important that we know Windows, Unix or MAC. A working knowledge of Windows, Unix or MAC makes it much easier to learn HTML.

We should be familiar with:

Basic word processing using any text editor.
How to create directories and files.
How to navigate through different directories.
Basic understanding on internet browsing using a browser like Internet Explorer or Firefox etc.

Introducing HTML:
HTML stands for Hyper Text Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language.

Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext.
Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

All we need to do to use HTML is to learn what type of markup to use to get the results we want.

>> Next

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

﻿LEARN WEB DESIGN

Soft Hyphens

Preserve Formatting - The <pre> Element:

Horizontal Rules - The <hr /> Element:

Presentational Tags:

Bold Text - The <b> Element:

Italic Text - The <i> Element:

<< Previous Next >>

Create Line Breaks - The Element

Centring Content - The <center> Element:

Nonbreaking Spaces:

HTML Formatting Tags

White-spaced Flow:

Create Headings - The <hn> Elements:

Create Paragraph - The <p> Element:

The lang Attribute

Page >> 1 2 3 4 5 6 7 8 9 10 11 12 13 14

The Class Attribute

HTML Attributes

Titled Heading Tag Example

Setting Cookies

Specifying Keywords

HTML Meta Tags

The BODY Element

The HEAD element

HTML Document Structure

Creating HTML Document

HTML Introduction

LEARN WEB DESIGN