U2 programacion cliente_html_1

Programacion Web- Unidad 2: Programacion del lado del cliente -

HTML basico

Mario Garza [email protected]

Universidad Politecnica de VictoriaCd. Victoria, Tamaulipas, Mexico.

http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/

Enero - Abril, 2014

Programacion Web - U2: Programacion del lado del cliente - HTML basico 1/43

http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/

Referencias principales

La mayor parte del contenido de este material ha sido tomado (oadaptado) de las siguientes fuentes principales:

http://www.w3schools.com/

http://msdn.microsoft.com/es-es/ie/hh749019


http://www.w3schools.com/

http://msdn.microsoft.com/es-es/ie/hh749019

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML is a markup language

A markup language is a set of markup tags

The tags describe document content

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

Web Browser

Reads HTML documents and display them as web pages.

Does not display the HTML tags, but uses the tags todetermine how the content is to be presented/displayed.


HTML Versions

There have been many versions of HTML:

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013


HTML5

Familia HTML5

Termino de marketing paraagrupar las nuevas tecnologıas dedesarrollo de aplicaciones web.

Especificacion HTML5

Etiquetas HTML tradicionales

no todas

nuevos atributos

Nuevos elementos de markup:

herramientas mas avanzadas

mejor experiencia para elusuario final


Familia HTML5


Especificacion HTML5

It was specially designed to deliver rich content without the needfor additional plugins.

New content-specific elements, like< article >,< footer >,< header >,< nav >,< section >

New form controls, like calendar, date, time, email, url,search

The < video > and < audio > elements for media playback

The < canvas > element for 2D drawing

Application: local data storage, file access, local SQLdatabase, application cache


Removed Elements

HTML 4.01 elements that have been removed from HTML5:

< acronym >

< applet >

< basefont >

< big >

< center >

< dir >

< font >

< frame >

< frameset >

< noframes >

< strike >

< tt >


DOCTYPES and elements

http://www.w3schools.com/tags/ref_html_dtd.asp


http://www.w3schools.com/tags/ref_html_dtd.asp

Browser Support for HTML5

HTML5 is a work in progress.

All major browsers support the new HTML5 elements andAPIs, and continue to add new HTML5 features to theirlatest versions.

The HTML5 working group includes AOL, Apple, Google,IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of othervendors.

How well does your browser support html5?http://html5test.com/


http://html5test.com/

HTML Tags

HTML markup tags are usually called HTML tags.

HTML tags are keywords surrounded by angle brackets <...>

HTML tags normally come in pairs:

The opening (or start) tag: <tagname>

The closing (or end tag): </tagname>

<tagname> content </tagname>


HTML Elements

An HTML element is everything between the start tag and the endtag, including the tags.

Element content is everything between the start and the end tags.

<p> This is a paragraph. </p>

Some HTML elements have empty content.

Empty elements do not requiere a closing tag (XHTML?).

<br>


HTML Elements

Most HTML elements can have attributes.

Attributes provide additional information about an element.

Attributes are always specified in the start tag.

Attributes come in name/value pairs like: name=“value”


HTML Reference

http://www.w3schools.com/tags/


http://www.w3schools.com/tags/

Nested HTML Elements

Most HTML elements can be nested.

HTML documents consist of nested HTML elements.


Estructura basica de un documento HTML

<!DOCTYPE html><html>

<head>

<meta charset=”ISO−8859−1”>

< t i t l e>T i t l e o f t he document</ t i t l e>

</head>

<body>Conten ido d e l documento . . . . . .

</body>

</html>



¿Cuantos elementos HTML hay en el codigo anterior?



DOCTYPE. Indica al navegador que debe interpretar todo elcodigo de acuerdo con un conjunto de reglas especıfico.

HTML. Este elemento contiene a los demas y le indica alnavegador que contiene un documento HTML.

HEAD. En esta seccion aparece informacion sobre la pagina,pero no se muestra en la pantalla.

TITLE. Cualquier contenido dentro de las etiquetas “title” semuestra en la parte superior (barra de tıtulo) del navegador.

BODY. Todo el contenido dentro del body se muestra en laventana principal del navegador.


Markup Validation Service

http://validator.w3.org/


http://validator.w3.org/

Use Lowercase Tags

HTML tags are not case sensitive.

Attribute names and attribute values are also case-insensitive.

<P> means the same as <p>.

Many web sites use uppercase HTML tags.

W3Schools use lowercase tags because the World Wide WebConsortium (W3C) recommends lowercase in HTML 4, anddemands lowercase tags in XHTML.


HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> This is a heading </h1>







HTML Paragraphs and Line Breaks

Without paragraph and line break tags...

CODE:

F i r s t p a r a g r a p h .

Second p a r a g r a p h .

Th i rd p a r a g r a p h .

Result:

First paragraph. Secondparagraph. Third paragraph.



Using line break tags: <br>

CODE:

F i r s t p a r a g r a p h .<br>Second p a r a g r a p h .<br><br>Thi rd p a r a g r a p h .

Result:

First paragraph.Second paragraph.

Third paragraph.



Using paragraph tags: <p>

CODE:

<p>F i r s t p a r a g r a p h .</p><p>Second p a r a g r a p h .</p><p>Thi rd p a r a g r a p h .</p>

Result:

First paragraph.

Second paragraph.

Third paragraph.


Practica 1 - Formato basico de parrafos y tıtulos

Descargar el archivo “Texto Practica1.txt” disponible en lapagina del curso.

[OPCIONAL] Descargar tambien estas diapositivas comomaterial de apoyo.

Construya una pagina web que muestre el textoproporcionado.

Defina encabezados, parrafos y saltos de linea dondeconsidere apropiado.

Validar documento usando el Markup Validation Service.


Content separator / horizontal line <hr>

The <hr> tag defines a thematic break in an HTML page.

Draws a horizontal line to separate content.

CODE:

<h1>T i t l e 1</h1><p>F i r s t p a r a g r a p h .</p>

<hr>

<h1>T i t l e 2</h1><p>Second p a r a g r a p h .</p>

Result:

Title 1

First paragraph.

Title 2

Second paragraph.


HTML Comments

Ignored by the browser and are not displayed.

Make HTML code more readable and understandable.

<!–– This is a comment ––>


Text Formatting

<b> bold </b> vs <strong> strong </strong>

bold vs strong

<i> italic </i> vs <em> emphasized </em>

italic vs emphasized


Text Formatting

This text is <small> smaller </small>

This text is smaller

This text is <sub> subscript </sub>

This text is subscript

This text is <sup> superscript </sup>

This text is superscript


Text Formatting

This is <ins> inserted text </ins>

This is inserted text

This is <del> deleted text </del>

This is deleted text

This is <mark> marked text </mark>

This is marked text


HTML Lists - Ordered list

An ordered list is created using the <ol> tag.

Each list item is defined with the <li> tag.

The list items are marked with numbers.

CODE:

<h4>An Ordered L i s t :</h4>

<o l>< l i> C o f f e e </ l i>< l i> Tea </ l i>< l i> Milk </ l i>

</ o l>

Result:

An Ordered List:

1 Coffee

2 Tea

3 Milk


HTML Lists - Unordered list

An unordered list is created using the <ul> tag.

Each list item is defined with the <li> tag.

The list items are marked with bullets.

CODE:

<h4>An Unordered L i s t :</h4>

<u l>< l i> C o f f e e </ l i>< l i> Tea </ l i>< l i> Milk </ l i>

</ u l>

Result:

An Unordered List:

Coffee

Tea

Milk


Reserved Characters in HTML

Some characters are reserved in HTML and XHTML.

Entities are used to implement reserved characters or to expresscharacters that cannot easily be entered with the keyboard.

Character Entity Number Entity Name Description

" " " quotation mark

' ' ' apostrophe

& & & ampersand

< < < less-than

> > > greater-than

http://www.w3schools.com/tags/ref_entities.asp


http://www.w3schools.com/tags/ref_entities.asp

HTML Images

Images are defined with the <img> tag.

<img src=“html5.jpg” alt=“logo” width=“42” height=“42” >

Required attributes:

src. Source (URL) of the imageyou want to display.

alt. Alternate text for an image.


HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows, defined using the <tr> tag.

Each row is divided into data cells, defined with the <td> tag.

A <td> element can contain text, links, images, lists, forms, othertables, etc.


HTML Tables

CODE:

<tab le border=”1”><t r>

<td>row 1 , c e l l 1</ td><td>row 1 , c e l l 2</ td>

</ t r><t r>


</ t r></ tab le>

Result:

row 1, cell 1 row 1, cell 2


In HTML5, the value of the border attribute can be ”1” or ””.


HTML Tables

CODE:

<tab le border=”1”><t r>

<th>Header 1</ th><th>Header 2</ th>

</ t r><t r>


</ t r><t r>


</ t r></ tab le>

Header information isdefined with the <th>tag.

Result:

Header 1 Header 2row 1, cell 1 row 1, cell 2



HTML Tables - colspan and rowspan attributes

CODE:

<tab le border=”1”><t r><th colspan=”2”>Header</ th>

</ t r><t r>

<td>row 1 , c e l l 1</ td><td rowspan=”2”> c e l l 2</ td>

</ t r><t r>

<td>row 2 , c e l l 1</ td></ t r>

</ tab le>

Result:

Headerrow 1, cell 1

cell 2row 2, cell 1


HTML Tables - <thead>, <tbody> and <tfoot>

<t a b l e b o r d e r=”1”><thead>

<t r><th>Month</ th><th>S a v i n g s</ th>

</ t r></ thead><t f o o t>

<t r><td>Sum</ td><td>$180</ td>

</ t r></ t f o o t><tbody>

<t r><td>January</ td><td>$100</ td>

</ t r><t r>

<td>F e b r u a r y</ td><td>$80</ td>

</ t r></ tbody>

</ t a b l e>

Use <thead>,<tbody> and<tfoot> to specifyeach part of a table.

Result:

Month SavingsJanuary $100

February $80

Sum $180


HTML Hyperlinks

A hyperlink (or link) is a word, group of words, or image that youcan click on to jump to another document.

The HTML <a> element defines a hyperlink.

<a href=“http://www.w3schools.com/”> Visit W3Schools </a>

The href attribute specifies the destination of a link.


HTML Hyperlinks - The target Attribute

The target attribute specifies where to open the linked document.

<a href=“...” target=“ blank”> Visit W3Schools </a>

The example above will open the linked document in a new browserwindow or a new tab.


HTML Anchors

The id attribute of the <a> element can be used to create abookmark inside an HTML document.

<a id=“tips”> Useful Tips Section </a>

Create a link inside the same document:

<a href=“#tips”> Visit the Useful Tips Section </a>

Or, create a link from another page:

<a href=“http://www.X.com/html links.htm#tips” > Visit... </a>


Practica 2

Crear una pagina web con el contenido de esta presentacion.

Incluir desde la diapositiva 26, hasta la 42.

Insertar un separador <hr> despues de cada SECCION.

Crear un menu principal en la parte inicial de la pagina, utilizandolistas. Anidar listas en caso de subsecciones.

Definir puntos de anclaje (anchors) en cada uno de los encabezadosde las secciones y subsecciones (serviran para crear el menu).

Agregar un enlace al final de cada seccion y subseccion que permitadirigirnos al menu principal.

Validar documento usando el Markup Validation Service.


U2 programacion cliente_html_1

Technology

Transcript of U2 programacion cliente_html_1