Friday, September 27, 2013
HTML Layouts
Web page layout is very important to make your website look good.
Design your webpage layout very carefully.
Try it yourself »
Try it yourself »
Design your webpage layout very carefully.
Website Layouts
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
 | Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool! |
|---|
HTML Layouts - Using <div> Elements
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
Example
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page
Menu
HTML
CSS
JavaScript
HTML
CSS
JavaScript
Content goes here
sunitkumarsoft.blogspot.com
HTML Layouts - Using Tables
A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
| Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data! |
|---|
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
Example
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page | |
| Menu HTML CSS JavaScript | Content goes here |
| sunitkumarsoft.blogspot.com | |
HTML Layout - Useful Tips
Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).
HTML(Hyper Text Markup Language)
Short for HyperText Markup Language, the authoring language used to createdocuments on the World Wide Web. HTML is similar to SGML, although it is not a strict subset.
HTML defines the structure and layout of a Web document by using a variety oftags and attributes. The correct structure for an HTML document starts with <HTML><HEAD>(enter here what document is about)<BODY> and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags.
There are hundreds of other tags used to format and layout the information in a Web page. Tags are also used to specify hypertext links. These allow Web developers to direct users to other Web pages with only a click of the mouse on either an image or word(s). For a more complete list of tags, check out some of the URLs below.
Software
Software means computer instructions or data. Anything that can be storedelectronically is software, in contrast to storage devices and display devices which are called hardware.
The terms software and hardware are used as both nouns and adjectives. For example, you can say: "The problem lies in the software," meaning that there is a problem with the program or data, not with the computer itself. You can also say: "It's a software problem."
The distinction between software and hardware is sometimes confusing because they are so integrally linked. Clearly, when you purchase a program, you are buying software. But to buy the software, you need to buy the disk(hardware) on which the software is recorded.
Categories of Software
Software is often divided into two categories. Systems software includes theoperating system and all the utilities that enable the computer to function.Applications software includes programs that do real work for users. For example, word processors, spreadsheets, and database management systems fall under the category of applications software.
Top 5 Software Related Questions
1. What is application software?
2. What is systems software?
3. What is software package?
4. What is software engineer?
5. What is enterprise application?
2. What is systems software?
3. What is software package?
4. What is software engineer?
5. What is enterprise application?
Application Software
An application is a program or group of programs designed for end users. Application software can be divided into two general classes: systems software and applications software. Systems software consists of low-level programs that interact with the computer at a very basic level. This includesoperating systems, compilers, and utilities for managing computer resources.
In contrast, applications software (also called end-user programs) includesdatabase programs, word processors, and spreadsheets. Figuratively speaking, applications software sits on top of systems software because it is unable to run without the operating system and system utilitie
System Software
System software refers to the files and programs that make up your computer's operating system. System files include libraries of functions, system services, drivers for printers and other hardware, system preferences, and other configuration files. The programs that are part of the system software include assemblers, compilers, file management tools, system utilites, and debuggers.
The system software is installed on your computer when you install your operating system. You can update the software by running programs such as "Windows Update" for Windows or "Software Update" for Mac OS X. Unlike application programs, however, system software is not meant to be run by the end user. For example, while you might use your Web browser every day, you probably don't have much use for an assembler program (unless, of course, you are a computer programmer).
Since system software runs at the most basic level of your computer, it is called "low-level" software. It generates the user interface and allows the operating system to interact with the hardware. Fortunately, you don't have to worry about what the system software is doing since it just runs in the background. It's nice to think you are working at a "high-level" anyway.
The History of Computers
"Who invented the computer?" is not a question with a simple answer. The real answer is that many inventors contributed to the history of computers and that a computer is a complex piece of machinery made up of many parts, each of which can be considered a separate invention.
This series covers many of the major milestones in computer history (but not all of them) with a concentration on the history of personal home computers.
| Computer History Year/Enter | Computer History Inventors/Inventions | Computer History Description of Event |
| Konrad Zuse - Z1 Computer | First freely programmable computer. | |
| John Atanasoff & Clifford Berry ABC Computer | Who was first in the computing biz is not always as easy as ABC. | |
| Howard Aiken & Grace Hopper Harvard Mark I Computer | The Harvard Mark 1 computer. | |
| John Presper Eckert & John W. Mauchly ENIAC 1 Computer | 20,000 vacuum tubes later... | |
| Frederic Williams & Tom Kilburn Manchester Baby Computer & The Williams Tube | Baby and the Williams Tube turn on the memories. | |
| John Bardeen, Walter Brattain & Wiliam Shockley The Transistor | No, a transistor is not a computer, but this invention greatly affected the history of computers. | |
| John Presper Eckert & John W. Mauchly UNIVAC Computer | First commercial computer & able to pick presidential winners. | |
| International Business Machines IBM 701 EDPM Computer | IBM enters into 'The History of Computers'. | |
| John Backus & IBM FORTRAN Computer Programming Language | The first successful high level programming language. | |
| Stanford Research Institute, Bank of America, and General Electric ERMA and MICR | The first bank industry computer - also MICR (magnetic ink character recognition) for reading checks. | |
| Jack Kilby & Robert Noyce The Integrated Circuit | Otherwise known as 'The Chip' | |
| Steve Russell & MIT Spacewar Computer Game | The first computer game invented. | |
| Douglas Engelbart Computer Mouse & Windows | Nicknamed the mouse because the tail came out the end. | |
| ARPAnet | The original Internet. | |
| Intel 1103 Computer Memory | The world's first available dynamic RAM chip. | |
| Faggin, Hoff & Mazor Intel 4004 Computer Microprocessor | The first microprocessor. | |
| Alan Shugart &IBM The "Floppy" Disk | Nicknamed the "Floppy" for its flexibility. | |
| Robert Metcalfe & Xerox The Ethernet Computer Networking | Networking. | |
| Scelbi & Mark-8 Altair & IBM 5100 Computers | The first consumer computers. | |
| Apple I, II & TRS-80 & Commodore Pet Computers | More first consumer computers. | |
| Dan Bricklin & Bob Frankston VisiCalc Spreadsheet Software | Any product that pays for itself in two weeks is a surefire winner. | |
| Seymour Rubenstein & Rob Barnaby WordStar Software | Word Processors. | |
| IBM The IBM PC - Home Computer | From an "Acorn" grows a personal computer revolution | |
| Microsoft MS-DOS Computer Operating System | From "Quick And Dirty" comes the operating system of the century. | |
| Apple Lisa Computer | The first home computer with a GUI, graphical user interface. | |
| Apple Macintosh Computer | The more affordable home computer with a GUI. | |
| Microsoft Windows | Microsoft begins the friendly war with Apple. | |
Subscribe to:
Posts (Atom)