CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade In</title>


</head>

<body>
<div id="container">
	<div id="header">
    	<h1>Web Design and Develop</h1>
   <ul>
       		<li><a href="home.html">Home</a></li>
        	<li><a href="about.html">About</a></li>
        	<li><a href="contact.html">Contact</a></li>
        	<li><a href="forum.html">Forum</a></li>
        </ul>
    </div>
	<div id="menu">
    	<ul>
        	<li><a href="#htmlPlay" id="html">HTML</a></li>
            <li><a href="#cssPlay" id="css">CSS</a></li>
            <li><a href="#phpPlay" id="php">PHP</a></li>
            <li><a href="#javaScriptPlay" id="javaScript">Java Script</a></li>
            <li><a href="#jQueryPlay" id="jQuery">JQuery</a></li>
        </ul>
    </div>
    
    <div id="content">
		<div id="intro">
        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.<br/><br/>

Using concepts from his earlier hypertext systems like ENQUIRE, British engineer, computer scientist and at that time employee of CERN, Sir Tim Berners-Lee, now Director of the World Wide Web Consortium (W3C), wrote a proposal in March 1989 for what would eventually become the World Wide Web.[1] At CERN, a European research organisation near Geneva straddling the border between France and Switzerland,[3] 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",[4] and they publicly introduced the project in December of the same year.<br/><br/>

In the May 1970 issue of Popular Science magazine, Arthur C. Clarke predicted that satellites would someday "bring the accumulated knowledge of the world to your fingertips" using a console that would combine the functionality of the photocopier, telephone, television and a small computer, allowing data transfer and video conferencing around the globe.<br/><br/>

In March 1989, Tim Berners-Lee wrote a proposal that referenced ENQUIRE, a database and software project he had built in 1980, and described a more elaborate information management system.<br/><br/>

With help from Robert Cailliau, he published a more formal proposal (on 12 November 1990) to build a "Hypertext project" called "WorldWideWeb" (one word, also "W3") as a "web" of "hypertext documents" to be viewed by "browsers" using a client–server architecture.[4] This proposal estimated that a read-only web would be developed within three months and that it would take six months to achieve "the creation of new links and new material by readers, [so that] authorship becomes universal" as well as "the automatic notification of a reader when new material of interest to him/her has become available." While the read-only goal was met, accessible authorship of web content took longer to mature, with the wiki concept, blogs, Web 2.0 and RSS/Atom.
		</div>
    	
        <div id="htmlPlay" class="hideAll">
   	  HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.<br/><br/>

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like &lt;html&gt;), within the web page content. HTML tags most commonly come in pairs like &lt;h1&gt; and &lt;/h1&gt;, although some tags, known as empty elements, are unpaired, for example &lt;img&gt;. The first tag in a pair is the start tag, 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, tags, comments and other types of text-based content.<br/><br/>

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.<br/><br/>

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.<br/><br/>

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 markup.
   	  </div>
	
    	<div id="cssPlay" class="hideAll">
    		Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.<br/><br/>

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.<br/><br/>

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.<br/><br/>

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.<br/><br/>

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.<br/><br/>

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 declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.[3] In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, to elements specified by attribute, or to elements depending on how they are placed relative to, or nested within, others in the document tree.<br/><br/>

Pseudo-classes are used in CSS selectors to permit formatting based on information that is outside the document tree. An often-used example of a pseudo-class is :hover, which identifies content 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. A pseudo-class classifies document 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.<br/><br/>

Selectors may be combined in many ways, especially in CSS 2.1, to achieve great specificity and flexibility.
    	</div>
    
    	<div id="phpPlay" class="hideAll">
    		PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is now installed on more than 244 million websites and 2.1 million web servers.[2] Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now produced by The PHP Group.[3] While PHP originally stood for Personal Home Page, it is now said to stand for PHP: Hypertext Preprocessor, a recursive acronym.<br/><br/>

PHP code is interpreted by a web server with a PHP processor module which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data. It has also evolved to include a command-line interface capability and can be used in standalone graphical applications.<br/><br/>

PHP is free software released under the PHP License, which is incompatible with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP.[6] PHP can be deployed on most web servers and also as a standalone shell on almost every operating system and platform, free of charge.<br/><br/>

PHP development began in 1994 when the developer Rasmus Lerdorf wrote a series of Common Gateway Interface (CGI) Perl scripts, which he used to maintain his personal homepage. The tools performed tasks such as displaying his résumé and recording his web traffic.[3][8][9] He rewrote these scripts in C for performance reasons, extending them to add the ability to work with web forms and to communicate with databases and called this implementation "Personal Home Page/Forms Interpreter" or PHP/FI. PHP/FI could be used to build simple, dynamic web applications. Lerdorf initially announced the release of PHP/FI as "Personal Home Page Tools (PHP Tools) version 1.0" publicly to accelerate bug location and improve the code, on the comp.infosystems.www.authoring.cgi Usenet discussion group on June 8, 1995.[10].[11] This release already had the basic functionality that PHP has today. This included Perl-like variables, form handling, and the ability to embed HTML. The syntax was similar to Perl but was more limited and simpler, although less consistent.[3] A development team began to form and, after months of work and beta testing, officially released PHP/FI 2 in November 1997.<br/><br/>

Zeev Suraski and Andi Gutmans rewrote the parser in 1997 and formed the base of PHP 3, changing the language's name to the recursive acronym PHP: Hypertext Preprocessor.[3] Afterward, public testing of PHP 3 began, and the official launch came in June 1998. Suraski and Gutmans then started a new rewrite of PHP's core, producing the Zend Engine in 1999.[12] They also founded Zend Technologies in Ramat Gan, Israel.<br/><br/>

On May 22, 2000, PHP 4, powered by the Zend Engine 1.0, was released.[3] As of August 2008 this branch is up to version 4.4.9. PHP 4 is no longer under development nor will any security updates be released.
    	</div>
    
    	<div id="javaScriptPlay" class="hideAll">
    		JavaScript (JS) is an interpreted computer programming language.[5] It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.<br/><br/>

JavaScript is a prototype-based scripting language that is dynamic, weakly typed, and has first-class functions. Its syntax was influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages.[6] It is a multi-paradigm language, supporting object-oriented,[7] imperative, and functional[1][8] programming styles.<br/><br/>

JavaScript's use in applications outside of web pages—for example, in PDF documents, site-specific browsers, and desktop widgets—is also significant. Newer and faster JavaScript VMs and frameworks built upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web applications.<br/><br/>

JavaScript was formalized in the ECMAScript language standard and is primarily used as part of a web browser (client-side JavaScript). This enables programmatic access to computational objects within a host environment.<br/><br/>

Birth at Netscape
JavaScript was originally developed in Netscape, by Brendan Eich. Battling with Microsoft over the Internet, Netscape considered their client-server solution as a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's Visual Basic.[9] (see JavaScript and Java)<br/><br/>

Developed under the name Mocha, LiveScript was the official name for the language when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript[10] when it was deployed in the Netscape browser version 2.0B3.<br/><br/>

The change of name from LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized by many as a marketing ploy by Netscape to give JavaScript the cachet of what was then the hot new web programming language.[12][13] It has also been claimed that the language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with its then-dominant browser.
    	</div>
    
    	<div id="jQueryPlay" class="hideAll">
    		jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.[4] It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.<br/><br/>

jQuery is free, open source software, licensed under the MIT License.[7] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.<br/><br/>

Microsoft and Nokia have announced plans to bundle jQuery on their platforms.[8] Microsoft is adopting it initially within Visual Studio[9] for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into their Web Run-Time widget development platform.[10] jQuery has also been used in MediaWiki since version 1.16.<br/><br/>

While JavaScript, as first developed by Netscape (and later Mozilla), has long had a presence on the Web for many websites, it gained a particular pitch with the rise of the Web 2.0 era of computing, in which JavaScript became increasingly used for the development of user interfaces for applications, both web-based and desktop-based. JavaScript was also combined with CSS to create dynamic web pages, which have also become popular as a more efficient and accessible alternative to Flash -based websites.<br/><br/>

With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus, JavaScript libraries such as Prototype, script.aculo.us, Ext Core, jsPHP, MooTools and jQuery and JavaScript widget libraries such as Ext JS, DHTMLX, and Dojo Toolkit were developed, allowing for developers to concentrate more upon more distinctive applications of Ajax. This has led to other companies and groups, such as Microsoft and Yahoo! developing their own JavaScript-based user interface libraries, which find their way into the web applications developed by these companies.<br/><br/>

Some JavaScript libraries allow for easier integration of JavaScript with other web development technologies, such as CSS, PHP, Ruby, and Java. Many libraries include code to detect differences between runtime environments, and remove the need for applications to allow for such inconsistencies.<br/><br/>

Almost all JavaScript libraries are released under either a copycenter or copyleft license to ensure license-free distribution, usage, and modification.
    	</div>
	</div>
</div>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              <style type="text/css">
*{
	margin:0px;
	padding:0px;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	text-align: justify;
}
#container {
	margin: auto;
	width: 1000px;
}
#header {
	background-color: #09F;
	height: 50px;
	width: 970px;
	padding: 15px;
}
#menu{
	width: 245px;
	float: left;
	border: 1px dashed #03F;
	margin-top: 20px;
}
#content{
	width: 745px;
	float: right;
	margin-top: 20px;
}
.hideAll{
	display:none;
}
#header li {
	float: left;
	padding-right: 25px;
	padding-left: 25px;
}
</style>
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" language="javascript"></script>
$(document).ready(function()
	{
		$('a').click(function(e)
		{ 
			e.preventDefault();
			$('#intro').hide();
			$('.hideAll').hide();
			var toShow = $(this).attr('id')+'Play';
			console.log(toShow);
			$('#'+toShow).show();
		});
	});
</script>
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................