Show Menu

Computers, Data, and the Web Cheat Sheet by

The history of computers, how data is represented on computers, and how we present information on websites.

Precursors to Computers

Something that comes before. In this case: A machine that is not a computer, but does comput­er-like things.
The first calcul­ating device. An ancient tool, made of wood or metal, with movable beads that people use to help to count and do basic math.
Napier's Bones
17th century calcul­ating device; a box containing bone rods with numbers on them, used to do basic math incl. addition, subtra­ction, multip­lic­ation and division.
Pascal's calculator
17th century calcul­ating device; a box containing gears that displayed numbers; used for addition and subtra­ction. Modified by Leibniz (Leibniz's calculator) to do multip­lic­ation and division too.
Jacquard loom
A 19th century machine for weaving silk; operators used punched cards to tell the machine what patterns to weave.
Analytical engine
Considered the first mechanical "­com­put­er". Made by Charles Babbage in the 19th century, it calculated using gears and cranks. Ada Lovelace (seen as the first programmer) used it to calculate coeffi­cients of polynomial equations (e.g. x² + 2x + 1).

Genera­tions of Computers

First gen.
1940-1956. Main techno­logy: Vacuum tubes. Very large, expensive computers such as ENIAC and UNIVAC, which took up entire floors of a building and required large cooling systems. Only govern­ments and large companies owned computers. Could only solve one problem at a time; programs took days or weeks to run. Input was through punched cards, output on printed paper, storage on magnetic drums.
Second gen.
1956-1963. Main techno­logy: Transi­stors. Since transi­stors were smaller, computers became smaller too, as well as faster, cheaper and more energy­-ef­fic­ient. Computers became more common in univer­sities and busine­sses. Input on punched cards, output on printed paper, storage on magnetic core memory, tape, or disks.
Third gen.
1964-1971. Main techno­logy: Integrated circuits. Transi­stors were made smaller and placed on silicon chips (semic­ond­uct­ors), making them much faster. Computers became easier to use & more popular; people began to use them in small businesses and at home as a hobby. Input on keyboards, output on monito­rs/­scr­eens, storage on magnetic tape or disks. Operating systems developed, increasing computer's power.
Fourth gen.
1971-p­resent. Main techno­logy: Very large scale integr­ation (VLSI) which made integrated circuits more complex and powerful, leading to microp­roc­essors. Computers could now be very small (phones, portable devices). IBM and Apple made desktop computers and personal computers (PCs). These became extremely popula­r—a­nyone could have a computer now! Input on keyboard, mouse, touchs­creen; output on monitor; storage on HDD/SSD. Graphical user interfaces (GUIs) and networking became common, and the Internet appeared.
Fifth gen.
Present+. Main techno­logy: Artificial intell­igence. Parallel processing (with multiple CPUs) and superc­ond­uctors increased speed & effici­ency. Voice and face recogn­ition, natural language interf­aces, quantum computing and nanote­chn­ology appeared.

Repres­enting Inform­ation

We can represent inform­ation in different ways. Using different languages, we can write the number nine as 9, IX (Roman), ۹ (Arabi­c/P­ers­ian), नौ (Hindi), (Thai), (Chine­se/­Jap­ane­se/...), (Korean Hangul), 𠃩, 𒐎, and so on. We can use other codes and visual systems too, like Braille, Morse code, hand signals and semaphore.

To represent inform­ation (data) in computers, we use a number system called binary Binary is a base-2 system, which means it uses only two digits, 0 and 1. This is different from the regular base-10 decimal (or denary) system, which uses the ten digits from 0 to 9. As well, we sometimes use a base-16 hexade­cimal system, which has sixteen digits. Hexade­cimal digits include the letters A, B, C, D, E, and F to represent the values 10, 11, 12, 13, 14, and 15. We can write the same value in different ways using different number systems.

Along with these number systems, we can use two kinds of character sets called ASCII and Unicode. These allow us to represent written characters using numbers. For example, the letter A is repres­ented in ASCII by the decimal number 65, the binary number 01000001, and the hexade­cimal number 41. The character 万 is repres­ented in Unicode by the decimal number 19975, the binary number 010011­100­000­0111, and the hexade­cimal number 4E07.

ASCII is an 8-bit code. Its great advantage is that it takes up very little space to store data—only 8 bits (or one byte) for one character. On the other hand, its disadv­antage is that it can only represent a total of 255 characters. The characters it displays mostly come from Latin languages like English, French, and Spanish.

Unicode has 16-bit and 32-bit varieties. Its great advantage is that it can represent characters from many languages, including Arabic, Chinese, Japanese, Korean, Russian, Thai, and many others. On the other hand, its disadv­antage is that each character takes up a lot of space to store and send over a network.

Numbers in Different Systems

Binary (base 2)
Decimal (base 10)
Hexade­cimal (base 16)

The Digital World

What does it mean that inform­ation is digital? It means that all the inform­ation we have can be repres­ented as data on computers, using the binary digits (bits) 0 and 1. Any computer can use this data, display it, or send it to someone else. That means you can store everything you know on a computer, and you can share it with anyone else who uses a computer. Using the Internet and the Web, you can share many types of media like words, pictures, video or music clips. A digital world is a world where it's easy to connect!

One of the ways we can display and share inform­ation is using a website. If you know how to use tools like HTML and CSS, it is easy to create your own website to share with the world.

Building Blocks of the Web

Hypertext Markup Language. Called the "­bui­lding blocks of the Web" because we use it to give structure to a web page.
HTML tag
A code that explains what something is on a web page. HTML tags are always surrounded by angle brackets (as in <b>). Most tags must be paired with a matching end tag; between these is the text or object that the tag applies to. For example, <b>hello</b> says that 'hello' is bold text.
HTML attribute
An extra piece of information about an HTML tag. For example, in the tag <p align="right">, the 'align' attribute says that the paragraph should be aligned to the right. The part between the quotes ("") is called the attribute's value.
Cascading Style Sheets. Where HTML acts like building blocks giving structure, CSS acts like paint and decora­tions giving a web page a beautiful appear­ance. CSS can be inline in an HTML document, or it can exist in its own file (a stylesheet).
Inline CSS
A style that can be added directly to an HTML tag to change its appearance. For example, in the tag <span style="color:red">, the 'style' attribute says that the text enclosed by the span tag must be coloured red.
A separate file (with extension .css) that contains CSS rules. Writing CSS in a stylesheet makes it easier to update the appearance of large HTML files, because making one change to a rule will update many HTML tags.
CSS rule
A set of CSS styles that apply to one or more objects. For example, the rule h1 { color:blue } will make the <h1> tag blue.
CSS declar­ation
A single style in a CSS rule. For example, in the rule h1 { color:#9c9; font-size:120% }, 'color:#9c9' and 'font-size:120%' are both declarations. If there is more than one declaration in a rule, they must be separated by a semicolon (;).
CSS selector
The object that a CSS rule applies to. For example, in the rule h1 { text-decoration:underline }, the selector is 'h1'.
CSS class
A kind of CSS selector that applies to HTML tags with the matching 'class' attribute. A selector that starts with a dot (.) represents a CSS class. For example, the rule .purp { color:purple } will match the HTML tag <p class="purp">.
CSS property
The kind of formatting a declaration changes. For example, in the rule h1 { font-size:120% }, the property is 'font-size'. The part after the colon (:) is the property's value.

Common HTML Formatting Tags

<b>, <strong>
Bold text.
<i>, <em>
Italic text.
Underlined text.
List item.
Unordered list (bullets).
Ordered list (numbers).
Heading, level 1.
Heading, level 2.
Heading, levels 3–6.
Subscript (as in HO).
Supers­cript (as in x²).
Code snippet (

Other Common HTML tags

Span of inline text (e.g. a few words inside a paragraph)
Division, or section, of text.
<img src="..." />
Image. The 'src' tag is the URL of the image to be shown.
<a href="...">
Hyperlink. The 'href' attribute is the URL of the page where you will go when clicking the link.
<br />
Line break.

Common HTML Attributes

Alignment of an object. ex: left, right.
Inline CSS that applies to an object. ex: color:red.
CSS class name that applies to an object. ex: highlight, red-text, studen­t-name.
How tall an object is. ex: 256px, 2em, 100%.
How wide an object is. ex: 150px, 2em, 75%.

Common CSS Formatting Properties

Colour of text. ex: red, #000, #ff0000.
Background or highlight. ex: yellow, #0e0, #cccc99.
Size of text. ex: 16pt, 12px, 1em, 120%.
How bold the text is. ex: bold, normal.
Style of the text. ex: italic.
Name or type of font used. ex: Helvetica, Arial, serif.
Space between lines. ex: 24pt, 36px, 2em, 140%.
Alignment of text in an object. ex: left, right, center.
Case of text. ex: lowercase, uppercase, capita­lized.

Common CSS Layout Properties

Border around an object. ex: 4px solid blue, 1px dotted #ffddff.
Blank space inside the object's border. ex: 4px, .5em.
Multiple values can be added for top, right, bottom, left padding. ex: 2px 0px 4px 0px.
Blank space outside the object's border. ex: 4px, .5em.
Multiple values can be added for top, right, bottom, left margin. ex: 2px 0px 4px 0px.
How tall an object is. ex: 256px, 2em, 100%.
How wide an object is. ex: 150px, 2em, 75%.


No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Five ways to center DIV element in CSS Cheat Sheet

          More Cheat Sheets by mdsis2049

          Internet & Internet services Cheat Sheet