Você está na página 1de 42

Website Design Using HTML and CSS

TOP EARNING WEBSITES FOR 2011


Website
iTunes PayPal Expedia AOL Reuters Yahoo eBay

Earnings per second


$ 60.21 $ 91.90 $ 93.07 $ 99.41 $ 104.74 $ 204.71 $ 276.56

Annual Earnings
$ 1,900,000,000 $ 2,900,000,000 $ 2,937,010,000 $ 3,137,100,000 $ 3,400,000,000 $ 6,460,000,000 $ 8,727,360,000

Comcast
Google

$ 276.56
$ 749.46

$ 8,727,360,000
$ 23,650,560,000

TOP EARNING WEBSITES FOR 2011


Website Earnings per second Annual Earnings

Amazon
Facebook

$ 776.66
$ 9.51

$ 24,509,000,000
$ 3,000,000,000

YouTube

$ 9.51

$ 3,000,000,000

HTML JARGON
HTML stands for hypertext markup language. The programming language used to create web pages.

HTML JARGON
Markup set of tags that suggest the structure of a document.

HTML JARGON
CSS language that controls how a web page looks.

HTML JARGON
Web Standards a set of best practices for building websites as advocated by W3C.

HTML JARGON
W3C the World Wide Web Consortium. The body that publishes the web standards for web developers worldwide.

BASIC TOOLS
Text Editor program that allows a user to edit plain text files. Example: Notepad

BASIC TOOLS
Browser an application used to browse websites. Examples: IE, Firefox, Chrome

BASIC TOOLS
Image Editor an application used to edit or create picture files. Examples: Paint, Adobe Photoshop

PREPARATORY TASK
Create a spot for your website. Create a folder in your flash drive to save all you HTML files.

The Anatomy of a Web Page

Viewing the source code. View your websites source code: Right Click>View Source>View Page Source

Basic Requirements of a Web Page

a doctype an <html> tag a <head> tag a <title> tag a <body> tag

doctype

means document type definition tells the browser what the of document the browser should expect to see.

doctype
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1-strict.dtd>

The doctype above means XHTML 1.0 Strict is the being used and the browser may refer to the website w3.org for the W3Cs specifications for this particular format.

<html> tag

tells the browser that the code is to be treated as an html document starts with an opening and ends with a closing tag

<html> tag opening tag: <html> . . . . closing tag: </html>

<html> tag

<html xmlns=http://www.w3.org/1999/xhtml>

The underlined text are referred to as the attributes of the element in use, in this particular case-the html tag.

<head> tag

contains information about the page the title element tells the browser what to display on the title bar.

<head> tag
<head> <title>Untitled Document</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> </head>

The head element above has two nested element: title and meta. The title tag holds to the text to be displayed on the browsers title bar. The meta tag contains additional information about the page.

<body> tag

contains everything that you see on the page

<body> tag
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1-strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Untitled Document</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> </head> <body> </body> </html>

The body tag holds everything that is displayed on the webpage.

The Most Basic Web Page in the World

Type the following into your code editor and save it as basic.html. Select UTF-8 as the encoding type.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1-strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>My First Webpage</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8/>

</head>
<body> <h1>My First Webpage</h1> <p>This is the first paragraph of my webpage. This webpage has the basic elements of a webpage which are listed below: </p> <ul> <li>doctype</li> <li>html tag</li> <li>head tag</li> <li>title tag</li> <li>body tag</li> </ul> <p>This is the closing paragraph of the page</p> </body>

</html>

Types of Lists: Ordered Unordered

Ordered list: <ol>; </ol>

Unordered list: <ul>; </ul> List item: <li>; </li>

Adding Comments: to help other programmers to keep reminders to hide some codes

Comments Syntax:
<!-- Your comment here -->

Você também pode gostar