Introducción

WEB 101 - Diseño y programacion en HTML

HTML concepts

HTML (Hyper Text Markup Language). Writing language of Web pages. Hyper Text: Multimedia document (containing text,

images, video, sound, …). A HTML document must have .html or .htm

extension. Browser: interprets and shows a HTML document. HTML developed by World Wide Web Consortium

(W3C) .

HTML versions

1993: HTML, a working draft (not yet a standard).

1995: HTML 2.0, standard approved, academic oriented, page content more important that its design.

1995: HTML 3.0, it was discontinued due to lack of browser support.

HTML versions (Cont.)

1997: HTML 3.2, published as a W3C Recommendation.

1997: HTML 4.0, published as a W3C Recommendation.

1998: HTML 4.01, published as a W3C Recommendation.

2000: "ISO HTML", based on HTML 4.01 Strict, published as an ISO/IEC international standard.

2008: published as a Working Draft by W3C.

Web vs. Internet

Two separate but related things. Content vs. Transport.

– Just as cargo is transported by a truck on a highway, a Web page is transported by packets on the Internet.

Internet vs. Web (Cont.)

Internet– A massive network of networks, a networking

infrastructure.– It connects millions of computers together

globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet.

– Information that travels over the Internet does via a variety of languages known as protocols (http).

Internet vs. Web (Cont.)

Web– The World Wide Web (or simply Web), is a way of

accessing information over the medium of the Internet.

– HTTP protocol (language) used to transport data.– Web services (that use the HTTP) use the web to

share information.– The browser are used by the web to access the

web pages.

Internet vs. Web (Cont.)

The Internet map

Dark blue: net, ca, us Green: com, org Red: mil, gov, edu Yellow: jp, cn, tw, au, de Magenta: uk, it, pl, fr Blue-green: br, kr, nl White: unknown

How the Web works

The Web physically consists of:

– Your personal computer, web browser software,

– A connection to an Internet service provider (ISP),

– Computers called servers that host digital data,

– And routers and switches to direct the flow of information.

How the Web works (Cont.)

The Web is known as a client-server system.

Your computer is the client; the remote computers that store electronic files are the servers.

How the Web works (Cont.)

The "glue" that holds the Web together is called hypertext and hyperlinks.

This feature allows electronic files on the Web to be linked so you can jump easily between them.

On the Web, you navigate (commonly known as browsing or surfing) through pages of information based on what interests you at that particular moment.

A Web page

Is an electronic document written in a computer language called HTML.

Each web page has a unique address, called a Uniform Resource Locator (URL) that identifies where it's located on the network.

A website has one or more related web pages, depending on how it's designed. Web pages on a site are linked together through a system of hyperlinks, enabling you to jump between them by clicking on a link.

A Web page (Cont.)

When you browse the World Wide Web you'll see the term home page often.

Think of a home page as the starting point of a website.

Like the table of contents of a book or magazine, the home page usually provides an overview of what you'll find at the website.

A site can have one page, many pages or a few long ones.

If there isn't a lot of information, the home page may be the only page. But usually you will find at least a few other pages.

A Web page (Cont.)

How can you tell which text are links? Text links appear in a different color from the rest of the text (typically in blue and often underlined).

When you move your cursor over a text link or over a graphic link, it changes from an arrow to a hand.

The hypertext words often hint at what you will link to.

When you return to a page with a link you've already visited, the hypertext words will often be in a different color, which indicates that you've already been there.

My first HTML page

<html> <head>

<title>Title of page</title> </head> <body>

This is my first homepage. <b>This text is bold</b>

</body> </html>