Web design - Basics: May 2013

Monday, May 13, 2013

HTML (Hyper Text Markup language)

Hyper Text Markup language is a method where ordinary text can be converted into hypertext. It is a set of special codes included to control the layout and appearance of the text. Technically, HTML is not a programming language. It combines instructions within data to tell a display program called browser, how to render data that document contains.

HTML is the character-based method for describing and expressing the content. The content is pictures, text, sound and video clips. It delivers the contents to multiple platforms. It links document components or documents together to compose compound documents.

Tim Berners-Lee developed HTML in early 1990 at CERN (Counsel European dela Recherche Nuclearie), the European Particle Physics laboratory in Geneva,Switzerland. HTML is a public domain and not owned by anybody.The W3C is the body, which controls HTML standards. The HTML Working Group comprises of industry leaders, content providers and other leading experts who provide input on Web accessibility and internationalization.

Tim Berners-Lee originally developed HTML and was popularized by the Mosiac browser.

HTML Tag or Tag element

HTML Tag or Tag element: refers to HTML codes that define the element in an HTML file, such as headings, images, paragraphs and list. There are two kinds of tags - the container tag and empty tag.

Container Tag: These tags, which bracket or contain text or other tag elements, are called container tags. These actually consist of two tags, a start tag and an end tag, which enclose the text they affect.
Empty tag: These are standalone and do not bracket or contain text or any other tag elements. An empty tag function is a standalone element within an HTML documents and thus does not bracket or contain anything else.
All the HTML files should include at least these tags:
The HTML tag: This tag defines the top most element, identifying it as an HTML document. It is container tag that has a start and an end tag and all other tags and texts are nested within it.<HTML>…</HTML>
The Head tag: this tag contains information about your HTML file. It may also contain tags that help you to identify your HTML file to the outside world. The Head tag is nested within the HTML tag.
<HTML>
<HEAD>...</HEAD>
</HTML>

Usually, the only tag contained within the head tag is the Title tag. Other tags also can be contained within the head tag but they are used less often.
The Title tag: this tag is nested within the Head tag. It identifies your page to the rest of the world. The tag output is displayed on your browser’s title bar but does not appear as a part of the page.

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
</HTML>

Body tag: this tag is the compliment of the Head tag and contains all of the tags, or elements that a browser actually displays as the body of your HTML document. Both the Head and the Body tag are nested within the HTML tag. Body tag comes after the head tag, they denote a separate part of the HTML document.
<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD><BODY>Welcome to my webpage</BODY>
</HTML>

Paragraph and line break tags: The P (paragraph) and BR (break) tags let you insert block and lines of text on your page. The P tag is a container element with an implied ending. Starting tag <P> and end tag </P>.

The BR line break tag is an empty, or standalone tag that simply inserts a line break. <BR>
Preformatted text tag: The <PRE> tag is used to display a block of preformatted text in a monospace,fixed-pitch font.
The OL (Ordered List) tag: It defines a sequentially numbered list of items. It is used in conjunction with the LI (List Item) tag, which is used to tag the individual list items in a list. <OL><LI>A<LI>B<LI>C</OL>.
The UL (Unordered List) tag: The UL (Unordered List) tag defines a bulleted list of items. The LI tag is nested inside the UL tag and defines each item within the list. <UL><LI>A<LI>B<LI>C</UL>.

Nesting Lists: You can nest a list inside another list. The browser automatically indents nested list levels. You can nest the different kind of lists.

Definition List tag: allow you to create glossaries or list of terms and definitions. A glossary consists of three tag elements: a tag to define the list DL a tag to define the term DT and a tag to define definition DD.

<A href=”URL”>name</A> (Anchor tag): To anchor one or both ends of a hypertext links. <HR> Horizontal Rule tag is a standalone or empty, document element that allows you to add horizontal rules to your web pages.
Marquee tag: It displays content as moving text.
<Marquee behavior scroll=”left” loop=”-1”>text here</Marquee>

Dynamic Html (DHTML)

DHTML stands for Dynamic HTML. DHTML is NOT a language or a web standard.

DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive. To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS.

According to the World Wide Web Consortium (W3C):
"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."
DHTML is often used to make rollover buttons or drop-down menus on a web page and interactive web pages.

A less common use is to create browser-based action games. During the late 1990s and early 2000s, a number of games were created using DHTML, such as Kingdom of Loathing, but differences between browsers made this difficult: many techniques had to be implemented in code to enable the games to work on multiple platforms. Recently browsers have been converging towards web standards, which has made design of DHTML games more viable. Those games can be played on all major browsers and they can also be ported to Widgets for Mac OS X and Gadgets for Windows Vista, which are based on DHTML code.

Use of CSS

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.
Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.
Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers.

Cascading Style Sheets

CSS stands for cascading style sheets.
CSS is a language, separate from HTML or XHTML.
CSS used to specify the layout or formatting properties of HTML elements.
From a single CSS file you can control entire sites:
font type, font and element colour, padding, margins, element positioning

CSS allows developers to separate style (look, appearance, colours, fonts, and layout) from the pages structure. CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration - block consists of a list of semi colon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)
In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.
Pseudo-classes are another form of specification used in CSS to identify markup elements, and in some cases, specific user actions, to which a particular declaration block applies. An often-used example is the :hover pseudo-class that applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before.
A special pseudo-class is :lang(c), "c".
A pseudo-class selects entire elements, such as :link or :visited, whereas a pseudo
-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.
Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility.

Example: Use of CSS to set the background color

Example: use of CSS to set the background color

<html>
<head>
<style type="text/css">
body
{background-color:yellow;
}
h1
{background-color:#00ff00;
}
p
{background-color:rgb(255,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>

Free Webpage Buttons - 2 (for Simple HTML websites)

Free Webpage Buttons (for Simple HTML websites)

Friday, May 10, 2013

Trivia - Website History

Tim Berners - Lee published what is considered to be the first website in August 1991. Berners Lee was the first to combine hypertext with internet communication. NeXT Computer was used by Berners-Lee at CERN and became the world's first Web server.

Web Designing - Short notes

Web design is the skill of designing presentations of content (hypertext / hypermedia) that is delivered through the World Wide Web to an end-user, by way of a Web browser or via Internet television clients, RSS readers and micro-blogging clients.

The process of designing Web sites, Web applications, Web pages, or multimedia for the Web may utilize multiple disciplines, such as animation, graphic design, authoring, communication design, corporate identity, human-computer interaction, marketing, search engine optimization, information architecture, interaction design, photography and typography.

Technologies involved can include:

XHTML and XML
CSS and XSL
PHP & ASP
JavaScript & VBScript
Flash & Silverlight
MySQL

Web pages and Web sites can be static pages, can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the Webmaster, input from an end-user or changes in the computing environment. With growing specialization within communication design & information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages & web development for the overall logistics of all web-based services.

Web pages

Web pages: It does not take much long, to familiarize yourself with the Web and is a fun way to prepare yourself for creating Web documents. The best place to start is the web page, the visual part of much larger system that people most often associate with World Wide Web. There are many components of the Web, just as there are many pieces to the TV industry. . Here there are broadcast companies, antennae, remote controls, repair shops, satellites, and the television set itself, to name a few. Same is true for the Web. Most people think of the individual webpages, as they are most captivating aspect of the entire system & what we 'tune in' to see or read.

JavaScript - Example

Create Cursor (with Text) on web page using JavaScript

<script language='JavaScript' type='text/JavaScript'>
function fifteenth(sixteenth){seventeenth =document.body.scrollLeft+event.clientX;eighteenth = document.body.scrollTop+event.clientY;nineteenth = event.clientX;twentieth = event.clientY;first2(seventeenth,eighteenth);}document.onmousemove = fifteenth;var second2 = '<font color="#676569" face="Monotype Corsiva"><b>JavaScript</b></font>';var third2 = 'position: absolute; visibility:visible; font-family:Arial; font-size:16px; width=150px; height=110px; top:-210px; left:-205px; z-index:1;';var fourth2 = 'top=-220 left=-180 width=140 height=115 visibility="show"';var fifth2 = 'Arial, Helvetica';var sixth2 = '14px'; var fifteenth3 = 5; var sixteenth3 = 65; var seventeenth3 = 44;var eighteenth3 = 55; var nineteenth3 = 28; var twentieth3 = 1; var first4; var second4;var twelfth4;var third4;var fourth4;var fifth4;var ninth4;var tenth4 = 0;
function first2(thirteenth4,fourteenth4){clearTimeout(first4);fifth4 = thirteenth4;ninth4 = fourteenth4;first4 = setTimeout('fifteenth4()',2);return true;}
function fifteenth4(){
if (tenth4>2 * 180) {tenth4 = 0}second4 = Math.sin(tenth4/180*3.1415);twelfth4 = Math.cos(tenth4/180*3.1415);third4 = (fifth4 - eighteenth3) + (sixteenth3 * second4);fourth4 = (ninth4 - nineteenth3) + (seventeenth3 * twelfth4);
if (document.all){document.all.sixteenth4.style.posLeft = third4;document.all.sixteenth4.style.posTop = fourth4;}tenth4 += fifteenth3;first4=setTimeout('fifteenth4()',twentieth3);}document.write('<div id="sixteenth4" ');document.write('style="' + third2 + '">') ;document.write('<p align="center">' + second2 + '</p>');document.write('</div>');</script>

JavaScript - Short notes

These days, knowing how to use JavaScript is becoming a necessity for HTML Programmers. Especially with the introduction of dynamic html, which relies on it.

JavaScript, originally supported by Netscape navigator is the most popular web scripting language today. JavaScript lets you embed programs right in your web pages and run these programs using web browsers. You place these programs in a <SCRIPT> element, usually within the <HEAD> element. If you want the script to write directly to the Web page, place it in <BODY> element.

Despite its name, JavaScript is different from Java both in syntax and in use. Java is a separate language that you compile to create bytecode files, and those files, which the browser can run, are stored separately from web pages. JavaScript, on the other hand, is stored directly as text in the web page, making it very easy to work with.

JavaScript is an object-oriented language . In fact using objects makes JavaScript programming tremendously easier.

INTRO

Monday, May 13, 2013

Friday, May 10, 2013