Universal HTML: August 2013

Wednesday, August 14, 2013

Parts of a HTML document

As explained before an HTML document consists of a head section and a body section. Now let’s take a look at some of the tags that appear in each of the section.

Parts of a HTML document

Document head

Some of the tags permitted in the head section of a document are:

<title> - there can only be one title for a web page.

<base> - specifies the documents base URL

Document body

There are wide varieties of elements that appear in the body section. Certain elements are associated with structuring the document and certain elements are associated with styling. Also HTML elements can be differentiated between “Block elements” and “Inline elements”.

Block elements

When displaying content of block elements the browser will have a line break before and after the element content. Some of the important block elements are given in table

Now let’s try out some examples with block elements.

Example 1:

Now let’s try out some examples with block elements.

<html>

<head>
<title>My First Web Page</title>
</head>

<body>

<p>
My First Web Page </p>
</body>

</html>

Example 2:

<html>

<html>

<head>
<title>Headings</title>
</head>

<body>

<h1>
This is Heading level 1</h1>
<h2>
 This is Heading level 2</h2>
<h3>
This is Heading level 3</h3>
<h4>
 This is Heading level 4</h4>
<h5>
 This is Heading level 5</h5>
<h6>
 This is Heading level 6</h6>
</body>
</html>

Inline Elements

Inline elements don’t have a line break before or after the element. Usually inline element appears within block elements. If inline element appear separately a break tag (“<br>”) is used to make a line break.

Note: when inline elements are not included within block elements then a break tag needs to be added to make line break. <br> tag is a special tag, since it does not have a opening and a closing tag. The break tag can be typed as either “<br>” or <br />. <hr> is another tag that does not have both a opening and a closing tag. It can also be typed as either as “<hr>” or “<hr />” in HTML. <hr> tag creates a horizontal line across the web page.

Attributes

Attributes give more meaning to elements. Attributes are places in the opening tag. The syntax of an attribute is:

<opening_tag attribute=”value”>element content</closing_tag>

Eg: <body bgcolor=”red”>
      …………
      ………….
   </body>

Here the bgcolor attribute is placed in the <body> tag. bgcolor is the name of the attribute. The value of the attribute is placed inside double quotes (“”). In this example the value of the bgcolor attribute is red. Though it is not mandatory to place an attribute value within double quotes, it is a good practice to follow.

There are wide varieties of attributes used with elements. Most of the important attributes will be discussed during the course in various sections. In general attributes can be put into five groups. They are universal attributes, language attributes, events, presentational attributes and specialized attributes. Some of the universal and presentational attributes will be discussed in this chapter.
2.5.1 Universal attributes

id attribute

The “id” attribute gives an element a unique identity in the document. The id attribute value must be unique otherwise during rendering the browser will throw an error message. “id” attribute must start with a letter or an underscore and should only contain alphanumeric characters. “id” attribute has replaced the use of the “name” attribute.

Style attribute

This attribute is used to introduce style into a document. But however style sheets are a better method of styling than using this attribute. This attribute is supported by many elements.

Example:

<html>

<html>
<head>
<title>Use of Style Attribute</title>
</head>

<body style="background-color:yellow">

<p style="font-size:24pt; font-type:arial">
A paragraph with a font size of 24pt's and the 
font type is arial</p>
<p>
Standard font size and type</p>
<p style="background-color:green; font-size:16pt">
text with a backround color of green</p>
<p style="margin:18pt">
A block of text with a 18 pt's margin</p>
</body>
</html>  <br>

Introduction to HTML

HTML stands for Hyper Text Markup Language
HTML is used for developing static web pages
HTML files have an extension of either .htm or .html

A HTML file consists of many markup tags. Tags inform the browser as to how text, images, tables, etc should be displayed.

HTML is not case sensitive
HTML standards are developed by W3C (World Wide Web Consortium) [www.w3.org]. The latest version of HTML is HTML 5 which was published in January 2008.

HTML tags

HTML tags are enclosed within angled brackets (“<>”). The general form of a HTML tag is:

Here the opening tag takes the form of : <opening tag> and the closing tag is of the form: </closing tag>. The difference between the opening and the closing tag is the closing tag contains a forward slash (“</>”). Most of the HTML tags have both an opening and a closing tag. There are only a few tags that don’t have both (opening and closing) tags (which will be discussed latter). As a good practice every opening tag should have a corresponding closing tag, even though browsers are cable of rendering documents where certain closing tags are missing. There are many tags associated with HTML.

Structure of a HTML document

The basic structure of a HTML document is:

<html>

<head>

</head>

<body>

</body>

</html>

A HTML document should start a with a <html> tag. So when the browser sees the opening <html> tag it identifies a HTML document. The last tag of the document should be a closing </html> tag which indicates the ending of a HTML document.

A HTML document can mainly be divided into two sections. i.e: the head section and the body section. Material displayed (tag, text, etc) between <head> and </head> comes under the head section. Material appearing in this section is not displayed in the browser page. Material in this section provides information about the document. The main tag in the head section is <title></title>. Any text appearing between <title> and </title> is displayed on the title bar of the browser window.

Contend appearing in the body section is displayed in the browser page. Most of the tags defined in HTML come under the body section.

Some times it s confused between tags and elements. This can be explained by an example.

Tags refer to the opening and closing tag. Element refers to the tags and the element content taken together.

Let's start our First web page.

This is a very simple html document. First open your Notepad and enter the bellow lines.

<html>

<head>
<title>My First Web Page</title>
</head>

<body>

<p>
My First Web Page </p>
</body>

</html>

Now we should save the file So Follow bellow steps to save.

File => Save as

File should save with adding .html or .htm to the end of the file name. Eg: first.html

Give “All Files” as Save as Type.

Then open Your browser and open your saved file (first.html). The output should be like this

Content between <title>and </title> of the head section is displayed in the title bar of the browser. In the body section there is only one element, which is <p> My First Web Page </p>. Content of this element is displayed in the browser page.

Friday, August 9, 2013

HTML 5

This is a short introduction about HTML 5. This article is taken from Wikipedia the free encyclopedia.

HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997)and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C).Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents.[4] It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013.

In particular, HTML5 adds many new syntactic features. These include the new <video>, <audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content (that replaces the uses of generic <object> tags) and MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header> and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and Document Object Model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.

References:http://en.wikipedia.org/wiki/HTML5

Why Do We Develop Web Sites?

Before putting pen to paper (and mouse to keyboard), it’s important to think about the
reasonbehind putting a site online. Millions already exist, so why do you need to create
one yourself? Also, if you’re working for a company, perhaps you already have plenty of
marketing material, so why do you need a website as well?
I should mention here that I’m certainly not trying to put you off—far from it. Instead, I’m
trying to reinforce the point that planning is key in any web design project, and although
some people swear that “winging it” is the best way to go, most such projects end up gath-ering virtual dust online. Therefore, before doing anything else, think through why you
should build a website and what you’re trying to achieve.
Companies and individuals alike have practical and commercial reasons for setting up a
website. A website enables you to communicate with like-minded individuals or potential
clients on a worldwide basis. If you’re a creative talent of some kind, you can use a website
to showcase your portfolio, offering online photographs, music tracks for download, or
poetry. If you fancy yourself as a journalist, a blog enables you to get your opinion out
there. If you own or work for a business, creating a website is often the most efficient
means of marketing your company. And even if you just have a hobby, a website can be a
great way of finding others who share your passion—while you may be the only person in
town who likes a particular movie or type of memorabilia, chances are there are thousands
of people worldwide who think the same, and a website can bring you all together. This is
perhaps why the paper fanzine has all but died, only to be reborn online, where develop-ment costs are negligible and worldwide distribution is a cinch.
In practical terms, a website exists online all day, every day (barring the odd hiccup with
ISPs), which certainly isn’t the case with printed media, which is there one minute and in
the recycle trash the next. Distribution is less expensive than sending out printed mate-rial—a thousand-page website can be hosted for $10 per month or less, but sending a
thousand-page document to one person (let alone a thousand or several thousand) may
cost more than that. Likewise, development (particularly corrections and updates) is often
significantly cheaper, too. For example, if you want to rework a print brochure, you have
to redesign it and then reprint it. Reworking a section of a website often means swapping
out a few files, which is efficient and affordable. So, for large companies and individuals
alike, the ability to have relevant information online in a form that can often be updated
in mere minutes, thereby keeping all interested parties up to date, is hard to resist!

Audience requirements

This site centers on the designand technology aspects of web design, but close attention
must always be paid to your potential audience. It’s no good forcing design ideas that
result in inappropriate visuals, unusable navigation to all but the most technically minded
of people, and huge download times on your site’s unsuspecting visitors.
Prior to creating a site, you must ascertain what your audience wants and expects in terms
of content, design, and how the site will work (by way of talking to the relevant people,
and also, if your budget allows, by using surveys and focus groups). You don’t have to take
all of your audience’s ideas into account (after all, many will be contradictory), but be
mindful of common themes and ensure they’re not ignored.
Technical considerations must be researched. If you’re targeting designers, you can be
fairly sure that a large proportion of the audience will be using monitors set to a high res-olution and millions of colors, and you can design accordingly. If your site is aimed at busi-ness users, be mindful that much of your potential audience will likely be using laptops (or older computers, for staff at the lower end of the ladder), with screen resolutions of
10245768 or lower.
Determining the web browsers your audience members use is another important consid-eration. Although use of web standards (used throughout this book) is more likely to
result in a highly compatible site, browser quirks still cause unforeseen problems; there-fore, always check to see what browsers are popular with a site’s visitors, and ensure you
test in as many as you can. Sometimes you won’t have access to such statistics, or you may
just be after a “sanity check” regarding what’s generally popular. A couple of useful places
to research global web browser statistics are www.w3schools.com/browsers/browsers_
stats.aspand www.upsdell.com/BrowserNews/. Note, though, that any statistics you see
online are effectively guesswork and are not a definitive representation of the Web as a
whole; still, they do provide a useful, sizeable sample that’s often indicative of current
browser trends.
Although you might be used to checking browser usage, and then, based on the results,
designing for specific browsers, we’ll be adhering closely to web standards throughout this
book. When doing this, an “author once, work anywhere” approach is feasible, as long as
you’re aware of various browser quirks (many of which are explored in Chapter 9). Of
course, you should still always ensure you test sites in as many browsers as possible, just to
make sure everything works as intended.
References:
The Essential Guide to CSSand HTML Web Design, Craig Grannell

History of the Internet

Even in the wildest dreams of science fiction and fantasy writers, few envisioned anything
that offers the level of potential that the Internet now provides for sharing information on
aworldwide basis. For both businesses and individuals, the Internet is now the medium of
choice, largely because it enables you to present your wares to the entire world on a 24/7
basis. But the technology’s origins were more ominous than and very different from the
ever-growing, sprawling free-for-all that exists today.
In the 1960s, the American military was experimenting with methods by which the US
authorities might be able to communicate in the aftermath of a nuclear attack. The sug-gested solution was to replace point-to-point communication networks with one that was
more akin to a net. This meant information could find its way from place to place even if
certain sections of the network were destroyed. Despite the project eventually being
shelved by the Pentagon, the concept itself lived on, eventually influencing a network that
connected several American universities.
During the following decade, this fledgling network went international and began opening
itself up to the general public. The term Internet was coined in the 1980s, which also her-alded the invention of Transmission Control Protocol/Internet Protocol (TCP/IP), the net-working software that makes possible communication between computers running on
different systems. During the 1980s, Tim Berners-Lee was also busy working on HTML, his
effort to weld hypertext to a markup language in an attempt to make communication of
research between himself and his colleagues simpler.
Despite the technology’s healthy level of expansion, the general public remained largely
unaware of the Internet until well into the 1990s. By this time, HTML had evolved from a
fairly loose set of rules—browsers having to make assumptions regarding coder intent and
rendering output—to a somewhat stricter set of specifications and recommendations.
This, along with a combination of inexpensive hardware, the advent of highly usable web
browserssuch as Mosaic(see the following image), and improved communications tech-nology, saw an explosion of growth that continues to this day.
Initially, only the largest brands dipped their toes into these new waters, but soon thou-sands of companies were on the Web, enabling customers all over the globe to access
information, and later to shop online. Home users soon got in on the act, once it became
clear that the basics of web design weren’t rocket science, and that, in a sense,everyone could do it—all you needed was a text editor, an FTP client, and some web space.

Mosaic the First Web Browser

Designers soon got in on the act, increasingly catered for by new elements within HTML;
Cascading Style Sheets (CSS), which took a while to be adopted by browsers, but eventu-ally provided a means of creating highly advanced layouts for the Web; and faster web
connections, which made media-rich sites accessible to the general public without forcing
them to wait ages for content to download.
Therefore, unlike most media, the Web is truly a tool for everyone, and in many countries,
the Internet has become ubiquitous. For those working in a related industry, it’s hard to
conceive that as recently as the mid-1990s relatively few people were even aware of the
Internet’s existence!
So, from obscure roots as a concept for military communications, the Internet has evolved
into an essential tool for millions of people, enabling them to communicate with each
other, research and gather information, telecommute, shop, play games, and become
involved in countless other activities on a worldwide basis.

Web 2.0

According to Wikipidia free encyclopedia Web 2.0 describes web sites that use technology beyond the static pages of earlier web sites. The term was coined in 1999 by Darcy DiNucci and was popularized by Tim O'Reilly at the O'Reilly Media Web 2.0 conference in late 2004. Although Web 2.0 suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the way web pages are made and used.

A Web 2.0 site may allow users to interact and collaborate with each other in a social media dialogue as creators of user-generated content in a virtual community, in contrast to websites where people are limited to the passive viewing of content. Examples of Web 2.0 include social networking sites, blogs, wikis, folksonomies, video sharing sites, hosted services, web applications, and mashups.
Whether Web 2.0 is substantively different from prior web technologies has been challenged by World Wide Web inventor Sir Tim Berners-Lee, who describes the term as jargon. His original vision of the Web was "a collaborative medium, a place where we [could] all meet and read and write".
Read more about Web 2.0 from http://en.wikipedia.org/wiki/Web_2.0

Introduction to Web Designing

What is World Wide Web & Internet?

The web's logo designed by Robert Cailliau
According to Wikpidia free encyclopedia The World Wide Web (abbreviated as WWW or W3, commonly known as the web), is a system of interlinked hypertext documents accessed via the internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks.

An Opte Project visualization of routing pathsthrough a portion of the Internet.
It is not the internet.According to Wikpidia free encyclopedia The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer networks.

History

The web was developed between March 1989 and December 1990. Using concepts from his earlier hypertext systems such as ENQUIRE, British engineer Tim Berners-Lee, a computer scientist and at that time employee of the CERN, now Director of the World Wide Web Consortium (W3C), wrote a proposal in March 1989 for what would eventually become the World Wide Web. The 1989 proposal was meant for a more effective CERN communication system but Berners-Lee eventually realised the concept could be implemented throughout the world. At CERN, a European research organisation near Geneva straddling the border between France and Switzerland,Berners-Lee and Belgian computer scientist Robert Cailliau proposed in 1990 to use hypertext "to link and access information of various kinds as a web of nodes in which the user can browse at will", and Berners-Lee finished the first website in December that year.Berners-Lee posted the project on the alt.hypertext newsgroup on 7 August 1991.

The architecture of the WWW (commonly known as the Web) is based on the “Client/Server model”. Here the Client refers to the user who views or access’s a web page and the Server refers to the remote machine (or web server) that stores web pages and provides access to web pages for users. The web server can be located on the local network or a remote network that can be thousands of miles a way as long as the client can access it over the internet.

About two decades ago web pages were developed using language such as TEX (a command based document preparation system), SGML (Standard Generalized Markup Language) which are complicated. Tim Berners-Lee realized the need of a much simpler language to prepared web pages and introduced HTML (HyperText Markup Language). HTML is a much simpler language than previously used web page designing languages. Due to HTML’s simplicity it became popular in a very short period and has contributed immensely towards the growth of the internet and web.

the Web is based on client/server architecture. Clients (users) use a “Web browser” to view or access pages. A Web browser is software that runs on the client machine. All modern Operating Systems (OS) have one or more web browsers that is/are bundled along with the OS. Servers use “Web server” (which is a software that runs on the server machine) to host web pages/web sites for clients to view.

When developing web pages, web page designing tools are used. Web page designing tools can be a simple Text editor (eg:Notepad) or a more sophisticated tool commercially available(eg:Adobe Dreamweaver).

When it comes to creating, hosting and viewing web pages/web sites a web browser (for accessing and viewing web pages), a web server (for hosting web sites), a web page designing tool and a web page developing language such as HTML is necessary. So it is these four components that are used when hosting and viewing web sites.