Saturday, 30 November 2013

HTML iFrames

iFrames is used to display a page within a page.

Syntax:

<iframe src="URL"></iframe>

You also have to set Width and Height.

» EXAMPLE:

<html>

<body>

</iframe>

</body>

</html>

» Result:

Use iframe as a Target for a Link

The target attribute of a link must refer to the name attribute of the iframe.

» EXAMPLE:

<html>

<body>

</iframe>

<a href="http://easilylearnhtml.blogspot.com/2013/11/html-history.html" target="iframe_1">Easilylearnhtml</a>
<p>Click on the link to view the result.</p>

</body>

</html>

» Result:

Easilylearnhtml
Click on the link to view the result.
Because the target of the link matches the name of the iframe, the link will open in the iframe.

Web Design

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.

History

1988—2001

Although web design has a fairly recent history, it can be linked to other areas such as graphic design. However web design is also seen as a technological standpoint. It has become a large part of people’s everyday lives. It is hard to imagine the Internet without animated graphics, different styles of typography, background and music.

The start of the web and web design

In 1989, whilst working at CERN Tim Berners-Lee proposed to create a global hypertext project, which later became known as the World Wide Web. Throughout 1991 to 1993 the World Wide Web was born. Text only pages could be viewed using a simple line-mode browser. In 1993 Marc Andreessen and Eric Bina, created the Mosaic browser. At the time there were multiple browsers however the majority of them were Unix-based and were naturally text heavy. There had been no integrated approach to graphical design elements such as images or sounds. The Mosaic browser broke this mould. The W3C was created in October 1994, to "lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability." This discouraged any one company from monopolizing a propriety browser and programming language, which could have altered the effect of the World Wide Web as a whole. The W3C continues to set standards, which can today be seen with JavaScript. In 1994 Andreessen formed Communications corp. That later became known as Netscape Communications the Netscape 0.9 browser. Netscape created its own HTML tags without regards to the traditional standards process. For example Netscape 1.1 included tags for changing background colours and formatting text with tables on web pages. Throughout 1996 to 1999 the browser wars began. The browser wars saw Microsoft and Netscape battle it out for the ultimate browser dominance. During this time there were many new technologies in the field, notably Cascading Style Sheets, JavaScript, and Dynamic HTML. On a whole the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.

Evolution of web design

In 1996, Microsoft released its first competitive browser, which was complete with its own features and tags. It was also the first browser to support style sheets, which at the time was seen as an obscure authoring technique. The HTML markup for tables was originally intended for displaying tabular data. However designers quickly realized the potential of using HTML tables for creating the complex, multi-column layouts that were otherwise not possible. At this time, as design and good aesthetics seemed to take precedence over good mark-up structure, and little attention was paid to semantics and web accessibility. HTML sites were limited in their design options, even more so with earlier versions of HTML. To create complex designs, many web designers had to use complicated table structures or even use blank spacer .GIF images to stop empty table cells from collapsing. CSS was introduced in December 1996 by the W3C to support presentation and layout; this allowed HTML code to be semantic rather than both semantic and presentational, and improved web accessibility, see tableless web design.

In 1996, Flash (originally known as FutureSplash) was developed. At the time, the Flash content development tool was relatively simple compared to now, using basic layout and drawing tools, a limited precursor to ActionScript, and a timeline, but it enabled web designers to go beyond the point of HTML, animated GIFs and JavaScript. However, because Flash required a plug-in, many web developers avoided using it for fear of limiting their market share from lack of compatibility. Instead, designers reverted to gif animations (if they didn't forego using motion graphics altogether) and JavaScript for widgets. But the benefits of Flash made it popular enough among specific target markets to eventually work its way to the vast majority of browsers, and powerful enough to be used to develop entire sites.

End of the first browser wars

During 1998 Netscape released Netscape Communicator code under an open source licence, enabling thousands of developers to participate in improving the software. However, they decided to stop and start from the beginning, which guided the development of the open source browser and soon expanded to a complete application platform. The Web Standards Project was formed, and promoted browser compliance with HTML and CSS standards by creating Acid1, Acid2, and Acid3 tests. 2000 was a big year for Microsoft. Internet Explorer had been released for Mac, this was significant as it was the first browser that fully supported HTML 4.01 and CSS 1, raising the bar in terms of standards compliance. It was also the first browser to fully support the PNG image format. During this time Netscape was sold to AOL and this was seen as Netscape’s official loss to Microsoft in the browser wars.

2001—2012

Since the start of the 21st century the web has become more and more integrated into peoples lives, as this has happened the technology of the web has also moved on. There have also been significant changes in the way people use and access the web, and this has changed how sites are designed.

Modern browsers

Since the end of the browsers wars there have been new browsers coming onto the scene. Many of these are open source meaning that they tend to have faster development and are more supportive of new standards. The new options are considered by many to be better that Microsoft's Internet Explorer.

New standards

The W3C has released new standards of HTML (HTML5) and CSS (CSS3), as well as new JavaScript API's each as a new but individual standard. However, while the term HTML5 is only used to refer to the new version of HTML and some of the JavaScript API's, it has become common to use it to refer to the entire suite of new standards (HTML5, CSS3 and JavaScript).

HTML » Forms

HTML Forms

HTML forms are used to pass data to a server.

We will show You what can contain HTML Forms in the below examples.

SYNTAX

<form>

content

</form>

The input element

The input element is the most important element.

The <input> element is used to select user information.

Let us show You.

Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

» EXAMPLE:

<html>

<body>

<form>

Username:<input type="text" name="username" /><br />

Password:<input type="text" name="password" />

</form>

</body>

</html>

» Result:

Checkboxes

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

» EXAMPLE:

<html>
<body>

<form>
<input type="checkbox" name="fruit" value="apple" />Apple<br />
<input type="checkbox" name="fruit" value="banana" />Banana
</form>

</body>
</html>

» Result:

Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input.

» EXAMPLE:

<html>
<body>

<form action="page.html" method="get" name="input">
Username:<input type="text" name="username" /><br />
<input type="submit" name="fruit" value="Submit" />
</form>

</body>
</html>

» Result:

Adding textarea
In the following example You will see how yo use textarea.
You have to specify rows and cols.

» EXAMPLE:

<html>
<body>

<textarea rows="9" cols="40">
</textarea>

</body>
</html>

» Result:

HTML Basic Info

HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, further tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.

Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML.

Thursday, 28 November 2013

CSS: Syntax

CSS has two main parts: a selector, and one or more declarations:

The selector is the HTML element you want to style, and each declaration contains a property and a value. The property is the style attribute you want to change. Each property has a value.
For completely knowledge You have to know how to use class and id.

» EXAMPLE:

<html>

<head>

<style>

p { color: orange; font-size: 20px;}

h1 {color: red; font-size: 30px; text-align: center;}

<style>

</head>

<body>

<p>This is simple paragraph</p>

<h1>This is simple heading</h1>

</body>

</html>

» Result:

This is simple paragraph

This is simple heading

Wednesday, 27 November 2013

HTML TUTORIAL CHAPTERS

» HTML

» Chapter 1: HTML Fundamentals
» Chapter 2: HTML Elements
» Chapter 3: HTML Attributes
» Chapter 4: HTML Headings, Rules & Comments
» Chapter 5: Paragraphs
» Chapter 6: Text Formating ↓ ↓ ↓

» Chapter 7: HTML Images
» Chapter 8: HTML Styles
» Chapter 9: HTML Links
» Chapter 10: HTML Tables

» Chapter 11: HTML Forms

» Chapter 12: iFrames

» Chapter 13: HTML Layout
» HTML Symbol Reference

Chapter 9: HTML Tables

Tables are defined using <table> tag.
Tables are excellent for every website, because with them You can organize and display easy information on a page.
Tables contain 2 tags: <tr> which define rows and each row is divided into data
cells using the <td> tag. <td> stands for "table data". Every cell can contain text, images, links, forms, lists, another tables, and so on.

» EXAMPLE:

Admin	Website
Samuel	Easilylearnhtml
Adidi	Easilylearnhtml
Griffin	Easilylearnhtml

A basic table includes the following tags:

Each table starts with <table> tag.

Each row starts with <tr> tag.

Each cell starts with <td> tag.

Now see this three examples for HTML tables.
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

» EXAMPLE 1:

<html>

<body>

<h3>One Column:</h3>

<tr>

<td>Hi World</td>

</tr>

</table>

</body>

</html>

» Result:
One Column:

Hi World

» EXAMPLE 2:

<html>

<body>

<h3>One Row And Three Columns:</h3>

<tr>

<td>Hi World</td>

</tr>

</table>

</body>

</html>

» Result:
One Row And Three Columns:

Hi World Hi World Hi World

» EXAMPLE 3:

<html>

<body>

<h3>Two Rows And Three Columns:</h3>

<tr>

<td>Hi World</td>

</tr>

<tr>

<td>Hi World</td>

</tr>

</table>

</body>

</html>

» Result:
Two Rows And Three Columns:

Hi World Hi World Hi World

Hi World Hi World Hi World

The class Selector

class Selector

The class selector is used to specify a style for a group of elements.

Class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

The name of Your class can be everything You want.

» EXAMPLE:

<html>

<body>

<style>

.par {

font-size: 30px;

color: blue;

text-align: center;

}

</style>

<h1 class="par">This is Heading with class "par".</h1>

<p id="par">This is paragraph also with class "par".</p>

</body>

</html>

» Result:

This is Heading with class "par".

This is paragraph also with class "par".

Tuesday, 26 November 2013

CSS id selector

id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

You can choose what You want name for Your id element.

The code below will show You how to specify single elements with id, and how to style them with CSS.

You have to place Your styles between » » »

<style>

</style>

» EXAMPLE:

<html>

<body>

<style>

#container {

width: 200px;

height: 100px;

background: red;

}

#par {

font-size: 40px;

color: green;

}

#heading {

color: yellow;

text-shadow: 3px 3px 10px orange;

}

</style>

</section>

<p id="par">This is paragraph.</p>

<h1 id="heading">This is heading</h1>

</body>

</html>

» Result:

This is paragraph.

This is heading

Chapter 8: HTML Links

HTML Links

A link is address located on the World Wide Web.We will show you two types of links.

» EXAMPLE:

<p>

<a href="default.htm">This is link</a>to page in website</p>

<p>

<a href="http://www.easilylearnhtml.blogspot.com">This is link</a> on World Wide Web</p>

</body>

</html>

» Result:

This is link to page in website
This is link on World Wide Web

How To Open Link In New Window?

Its very easy to control how to responds when you click on the link.We are going to show you how to open a link in new browser window.

» EXAMPLE:

<html>

<body>

<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Link to Easilylearnhtml</a>

<p>Click on the link. The page will open in new window.</p>

</body>

</html>

» Result:

Link to easilylearnhtml
Click on the link. The page will open in new window.

You can use the following options for the target attribute.

OPTION	DESCRIPTION
_blank	Opens the link in a new window.
_self	Opens the link in the same frame as it was clicked (default).
_parent	Opens the link in parent frameset.
_top	Opens the link in the full body of the link.
framename	Opens the link in a named frame

Links on the Same Page

You will see how to use a link to jump to another part of the document.
It's not posible to display the result of this code in our blog.

» EXAMPLE:

<html>

<body>

<p>

<a href="#C7">Go to chapter 7.</a>

</p>

<h2>Chapter 1</h2>

<p>This is chapter</p>

<h2>Chapter 2</h2>

<p>This is chapter</p>

<h2>Chapter 3</h2>

<p>This is chapter</p>

<h2>Chapter 4</h2>

<p>This is chapter</p>

<h2>Chapter 5</h2>

<p>This is chapter</p>

<h2>Chapter 6</h2>

<p>This is chapter</p>

<h2 id="C7">Chapter 7</h2>

<p>This is chapter</p>

<h2>Chapter 8</h2>

<p>This is chapter</p>

<h2>Chapter 9</h2>

<p>This is chapter</p>

<h2>Chapter 10</h2>

<p>This is chapter</p>

<h2>Chapter 11</h2>

<p>This is chapter</p>

<h2>Chapter 12</h2>

<p>This is chapter</p>

</body>

</html>

How to create a mialto: Link

» EXAMPLE:

How to link to an email address and generate a new email message?

EXAMPLE:

<html>

<body>

<p>Mail link:

</p>

</html>

</body>

ATTENTION:

You can add spacing between words by "%20".

» Result:

Mail link: Send mail

» SPECIAL:

Add cc, bcc, a subject line, and the message body.

<html>

<body>

<p>Another mailto link:</p>

href="mailto:someone@hotmail.com?cc=someoneelse@ hotmail.com&bcc=andsomeoneelse2@hotmail. com&subject=Summer%20Party&body=You%20are%20invited%20 to%20a%20big%20summer%20party!">Send mail!</a>

</body>

</html>

» Result:

Another mailto link:
Send mail!

Image Link

After src attribute You can add two values - image name and format or link to Your image. (<img src="image.jpg" />)

» EXAMPLE:

<html>

<body>

<p>Click on the image:

</a></p>

</html>

</body>

» Result:

Click on the image:

Pages

Saturday, 30 November 2013

HTML iFrames

» EXAMPLE:

Use iframe as a Target for a Link

Web Design

History

1988—2001

The start of the web and web design

Evolution of web design

End of the first browser wars

2001—2012

Modern browsers

New standards

HTML Forms

Text Fields

» EXAMPLE:

Checkboxes

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

Thursday, 28 November 2013

CSS: Syntax

» EXAMPLE:

This is simple paragraph This is simple heading

This is simple heading

Wednesday, 27 November 2013

HTML TUTORIAL CHAPTERS

» Chapter 11: HTML Forms

Chapter 9: HTML Tables

» EXAMPLE:

» EXAMPLE 1:

» Result: One Column: Hi World

One Column:

» EXAMPLE 2:

» Result: One Row And Three Columns: Hi World Hi World Hi World

One Row And Three Columns:

» EXAMPLE 3:

» Result: Two Rows And Three Columns: Hi World Hi World Hi World Hi World Hi World Hi World

Two Rows And Three Columns:

class Selector

» EXAMPLE:

» Result:

This is Heading with class "par".

Tuesday, 26 November 2013

id Selector

» EXAMPLE:

» Result:

This is heading

Chapter 8: HTML Links

HTML Links

» EXAMPLE:

» Result:

How To Open Link In New Window?

» EXAMPLE:

» Result:

Links on the Same Page

» EXAMPLE:

How to create a mialto: Link

» EXAMPLE:

» Result:

» SPECIAL:

» Result:

Image Link

» EXAMPLE:

» Result:

This is simple paragraph

This is simple heading

» Result:
One Column:

Hi World

» Result:
One Row And Three Columns:

Hi World Hi World Hi World

» Result:
Two Rows And Three Columns:

Hi World Hi World Hi World

Hi World Hi World Hi World