Download - U2 programacion cliente_html
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/55
Contents I
1 Introduction
2 Tags and Elements
3 Basic structure
4 Validator
5 Headings and Paragraphs
6 Practica 1
7 Content separator, Comments
8 Basic Text Formatting
9 ListsProgramacion Web - U2: Programacion del lado del cliente - HTML basico 2/55
Contents II
10 Entities, Reserved Characters
11 Images
12 Tables
13 Hyperlinks
14 Practica 2
15 CSS
16 Layout
17 FormsProgramacion Web - U2: Programacion del lado del cliente - HTML basico 3/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 4/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 5/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 6/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 7/55
Familia HTML5
Programacion Web - U2: Programacion del lado del cliente - HTML basico 8/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 9/55
Removed Elements
HTML 4.01 elements that have been removed from HTML5:
< acronym >
< applet >
< basefont >
< big >
< center >
< dir >
< font >
< frame >
< frameset >
< noframes >
< strike >
< tt >
Programacion Web - U2: Programacion del lado del cliente - HTML basico 10/55
DOCTYPES and elements
http://www.w3schools.com/tags/ref_html_dtd.asp
Programacion Web - U2: Programacion del lado del cliente - HTML basico 11/55
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/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 12/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 13/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 14/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 14/55
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”
Programacion Web - U2: Programacion del lado del cliente - HTML basico 15/55
HTML Reference
http://www.w3schools.com/tags/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 16/55
Nested HTML Elements
Most HTML elements can be nested.
HTML documents consist of nested HTML elements.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 17/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 18/55
Estructura basica de un documento HTML
¿Cuantos elementos HTML hay en el codigo anterior?
Programacion Web - U2: Programacion del lado del cliente - HTML basico 19/55
Estructura basica de un documento HTML
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 20/55
Markup Validation Service
http://validator.w3.org/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 21/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 22/55
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 23/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 24/55
HTML Paragraphs and Line Breaks
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 25/55
HTML Paragraphs and Line Breaks
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 26/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 27/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 28/55
HTML Comments
Ignored by the browser and are not displayed.
Make HTML code more readable and understandable.
<!–– This is a comment ––>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 29/55
Text Formatting
<b> bold </b> vs <strong> strong </strong>
bold vs strong
<i> italic </i> vs <em> emphasized </em>
italic vs emphasized
Programacion Web - U2: Programacion del lado del cliente - HTML basico 30/55
Text Formatting
<b> bold </b> vs <strong> strong </strong>
bold vs strong
<i> italic </i> vs <em> emphasized </em>
italic vs emphasized
Programacion Web - U2: Programacion del lado del cliente - HTML basico 30/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 33/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 34/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 35/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 36/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 37/55
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>
<td>row 2 , c e l l 1</ td><td>row 2 , c e l l 2</ td>
</ t r></ tab le>
Result:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
In HTML5, the value of the border attribute can be ”1” or ””.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 38/55
HTML Tables
CODE:
<tab le border=”1”><t r>
<th>Header 1</ th><th>Header 2</ th>
</ t r><t r>
<td>row 1 , c e l l 1</ td><td>row 1 , c e l l 2</ td>
</ t r><t r>
<td>row 2 , c e l l 1</ td><td>row 2 , c e l l 2</ td>
</ t r></ tab le>
Header information isdefined with the <th>tag.
Result:
Header 1 Header 2row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Programacion Web - U2: Programacion del lado del cliente - HTML basico 39/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 40/55
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
Programacion Web - U2: Programacion del lado del cliente - HTML basico 41/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 42/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 43/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
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>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
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.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 45/55
Styling HTML with CSS
CSS can be added to HTML in the following ways:
1 Inline: using the style attribute in HTML elements
2 Internal: using the <style> element in the <head>
3 External: using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax inseparate CSS files.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 46/55
HTML Colors
CODE:
<body s t y l e=” background−c o l o r : y e l l o w ; ”>
<h2 s t y l e=” background−c o l o r : r e d ; ”>This i s a h e a d i n g
</h2>
<p s t y l e=” background−c o l o r : g r e e n ; c o l o r : w h i t e ; ”>This i s a p a r a g r a p h .
</p>
</body>
Result:
Programacion Web - U2: Programacion del lado del cliente - HTML basico 47/55
HTML Colors
<p s t y l e=” background−c o l o r :#FFFF00”>C o l o r s e t by u s i n g hex v a l u e
</p>
<p s t y l e=” background−c o l o r : rgb ( 2 5 5 , 2 5 5 , 0 ) ”>C o l o r s e t by u s i n g rgb v a l u e
</p>
<p s t y l e=” background−c o l o r : y e l l o w ”>C o l o r s e t by u s i n g c o l o r name
</p>
The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 48/55
HTML Layout - <table>
Simple layout using <table>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 49/55
HTML <div> Element
1 The <div> element has no special meaning.
2 Can be used as a container for grouping other HTML elements.
3 A common use of <div> is for document layout
<div> replaces the “old way” of defining layout using tables.
Using <table> elements for layout is not correct.
The purpose of the <table> element is to display tabular data.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 50/55
HTML Layout - <div>
Simple layout using <div>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 51/55
HTML Semantic Elements
Programacion Web - U2: Programacion del lado del cliente - HTML basico 52/55
HTML Layout - Semantic Elements
Simple layout using semantic elements
Programacion Web - U2: Programacion del lado del cliente - HTML basico 53/55
HTML Forms
HTML forms are used to pass data to a server.
The <form> element is used to create an HTML form.
CODE:
<form>
i n p u t e l e m e n t s . . .
</ form>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 54/55
HTML Forms
The <form> element can contain:
<input> - input field to enter data
<textarea> - multi-line text input
<button> - clickable button
<select> - drop-down list
<fieldset> - groups (draws a box around) related elements
<label> - defines a label for an input element
http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 55/55