codelab

Web pages are written in HTML, the web programming language that tells web browsers how to structure and present content on a web page. In other words, HTML provides the basic building blocks for the web. And for a long time, those building blocks were pretty simple and static: lines of text, links, and images. Today, we expect to be able to do things like play online chess or seamlessly scroll around a map of our neighborhood, without waiting for the entire page to reload for every chess move or every map scroll. The idea of such dynamic web pages began with the invention of the scripting language JavaScript. JavaScript support in major web browsers meant that web pages could incorporate more meaningful real-time interactions. For example, if you have filled out an online form and hit the “submit” button, the web page can use JavaScript to check your entries in real-time and alert you almost instantly if you had filled out the form incorrectly. But the dynamic web as we ...

If you play online games, use an online photo editor, or rely on web-based services like Google Maps, Twitter, Amazon, YouTube or Facebook, then you’re an active resident in the wonderful world of web apps. What exactly is a web app, anyway? And why should we care? The app is shorthand for an application. Applications are also called programs or software. Traditionally, they’ve been designed to do broad, intensive tasks like accounting or word processing. In the online world of web browsers and smart phones, apps are usually nimbler programs focused on a single task. Web apps, in particular, run these tasks inside the web browser and often provide a rich, interactive experience. Google Maps is a good example of a web app. It provides helpful map features within a web browser. You can pan and zoom around a map, search for a college or cafe, and get driving directions, and so on. It pulls out all the information you need dynamically every time you ask for it. This brings us...

To some of us, the Internet is where we stay in touch with friends, get the news, shop, and play games. To some others, the Internet can mean their local broadband providers, or the underground wires and fiber-optic cables that carry data back and forth across cities and oceans. A helpful place to start is near the Very Beginning: 1974 . That was the year that a few smart computer researchers invented something called the Internet Protocol Suite, or TCP/IP for short. TCP/IP created a set of rules that allowed computers to “talk” to each other and send information back and forth. TCP/IP is somewhat like human communication: when we speak to each other, the rules of grammar provide structure to language and ensure that we can understand each other and exchange ideas. Similarly, TCP/IP provides the rules of communication that ensure interconnected devices understand each other so that they can send information back and forth. As that group of interconnected devices grew from one...

The CSS margin properties set the size of the white space outside the border. The margins are completely transparent and cannot have a background color. CSS has properties for specifying the margin for each side of an element: §   margin-top §   margin-right §   margin-bottom §   margin-left All the margin properties can have the following values: §   auto - the browser calculates the margin §   length - specifies a margin in px, pt, cm, etc. §   % - specifies a margin in % of the width of the containing element §   inherit - specifies that the margin will be inherited from the parent element It is also possible to use negative values for margins; to overlap content.

To create a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end of the list.  Numbered lists have <ol> tags instead of <ul> tags. To separate single list items, use <li> and </li> tags. Look at these examples to see the detailed syntax:   Unordered List Explanation / Example <ul> <li>text</li> <li>text</li> <li>text</li> </ul> Makes a bulleted list using the default bullet type: ·          text ·          text ·          text <ul type="disc"> Starts a bulleted list using discs as bullets: ·          This is one line ·          This is another line · ...

Variables can be thought of as named containers. You can place data into these containers and then simply refer to the data by naming the container. Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows: <script type="text/javascript"> var xyz; var abc123; var stu_dent;  </script> The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes: Global Variables: A global variable has global scope which means it is defined everywhere in your JavaScript code.  Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

JavaScript is  a lightweight, interpreted programming language. It is  designed for creating network-centric applications. JavaScript is  complementary to and integrated with HTML.  The JS statements are placed within the <script> ... </script> tags in a web page. You can place the <script> tag containing JS code anywhere in the web page, but the preferred way to keep it within the <head>...</head> tags.

The <!DOCTYPE> declaration must be the very first thing in the HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In the previous versions of HTML, the <!DOCTYPE> declaration refers to a DTD (Document Type Definition), because they are based on SGML (Standard Generalized Markup Language). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.  HTML5 is not based on SGML, and so does not require a reference to a DTD. The <!DOCTYPE> declaration is NOT case sensitive.

The most commonly used file formats used for images are JPEG, GIF, and PNG. They are compressed formats, and have very different uses. A JPEG (pronounced “jay-peg”) uses a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image. JPEGs are typically used for images such as photographs. A GIF (pronounced “jif”) can have no more than 256 colors, but they maintain the colors of the original image. The lower the number of colors you have in the image, the lower the file size will be. GIFs also allow any pixel in the image to be transparent. GIFs are typically used for images with solid colors, such as icons or logos. A PNG (pronounced “ping”) replicates colors, much like a GIF, but allows 16 million colors as well as alpha transparency (that is, an area could be 50% transparent). PNGs are typically used for versatile images in more complex designs BUT they are not fully ...

HTML tables are still best known for being used and abused to lay out pages. There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area for HTML Beginners. Copy the following code into the body of your html document and then I will go through what each tag is doing: <table>     <tr>         <td>Row 1, cell 1</td>         <td>Row 1, cell 2</td>         <td>Row 1, cell 3</td>     </tr>     <tr>         <td>Row 2, cell 1</td>         <td>Row 2, cell 2</td>         <td>Row 2, cell 3</td>     </tr>     <tr>         <td>Row 3, cell 1</td>         <td>Row 3, cell...