Introducción a HTML y Script

PROYECTO BECAS CONTROL + F – FASE III -Curso Microsoft .NET Junior

Módulo VIntroducción a la programación HTML

¿Qué es HTML?

• HTML es la sigla de Hyper Text Markup Language• HTML no es un lenguaje de programación es un lenguaje de

marcado• Un lenguaje de marcado es un conjunto de etiquetas de

marcas• HTML usa estas etiquetas para describir páginas Web

Tags HTML

• Los tags de HTML son palabras reservadas encerradas por <> igual que <html>

• Los tags normalmente se utilizan por pares igual <b> y </b>• Se nombran como tag de incio y tag de cierre.

Documentos HTML

• Los documentos HTML son llamados páginas Web

<html><body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body></html>

<html><body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body></html>

Práctica

• Mi primera página HTML

Cabeceras HTML

• Son definidas con los tags <h1> a <h6>

<html><body>

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>

</body></html>

<html><body>

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>

</body></html>

Párrafos HTML

• Son definidos con el tag <p>

<html><body>

<p>Esto es un parrafo.</p><p>Esto es un parrafo.</p><p>Esto es un parrafo.</p>

</body></html>

<html><body>

<p>Esto es un parrafo.</p><p>Esto es un parrafo.</p><p>Esto es un parrafo.</p>

</body></html>

Links HTML

• Los links HTML son definidos mediante el tag <a>• El link es proporcionado con un atributo

<html><body>

<a href="http://www.w3schools.com">Esto es un link</a>

</body></html>

<html><body>

<a href="http://www.w3schools.com">Esto es un link</a>

</body></html>

Imágenes HTML

• Las imágenes en HTML son definidas mediante el tag <img>

<html><body>

<img src="w3schools.jpg" width="104" height="142" />

</body></html>

<html><body>

<img src="w3schools.jpg" width="104" height="142" />

</body></html>

Anidación de elementos HTML

• La mayoría de los elementos HTML pueden ser anidados

<html><body>

<p>Esto es mi primer parrafo</p></body>

</html>

<html><body>

<p>Esto es mi primer parrafo</p></body>

</html>

Tips HTML : Uso de minúsculas

• Html no es case sensitive: <P> significa lo mismo que <p>• El uso de minúsculas es recomendado por Word Wide Web

Consortium (W3C).• En las futuras versiones de (X)HTML será obligatorio

Comentarios HTML

• Se pueden insertar comentarios en los documentos HTML• Para que sea más legible y entendible• Un comentario debe ser escrito

<!– Esto es un comentario --> <!– Esto es un comentario -->

Formato de Texto en HTML

• HTML usa tags como <b> o <i> para formatear negritas o itálicas

• Estos tags son llamados tags de formato• http://www.w3schools.com/html/html_formatting.asp

<p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

<p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

HTML Styles

• El atributo style es un atributo nuevo de HTML. Introduce CSS para HTML

<html><body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">This text is in Verdana and red</p>

<p style="font-family:times;color:green">This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body></html>

<html><body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">This text is in Verdana and red</p>

<p style="font-family:times;color:green">This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body></html>

El atributo style de HTML

• Provee una forma estándar de dar estilo a todos los elementos HTML

• Fueron introducidos con HTML 4• Es la nueva y preferida forma de dar estilo a los elementos

HTML• Los estilos pueden ser añadidos directamente como atributos o

en un archivo separado CSS

Ejemplos

• Ejemplos de estilo HTML

style="background-color:yellow"style="font-size:10px"style="font-family:Times"style="text-align:center

style="background-color:yellow"style="font-size:10px"style="font-family:Times"style="text-align:center

Práctica

• Hojas de estilo en cascada

Tags y atributos obsoletos

• Algunos atributos ya no serán soportados en las siguientes versiones de HTML

• Se debe evitar usarlos

Tag Descripción

<center> Define centrar el contenido

<font> y <basefont> Define fuentes HTML

<s> and <strikeout> Define texto tachado

<u> Define texto subrayado

Atributos obsoletos

Tag Descripción

align Define la alineación del texto

bgcolor Define el color de fondo

color Define el color de texto

Tablas HTML

• Son definidas con el tag <table>• Una tabla está definida en filas, con el tag <tr>• Cada fila está dividida en celdas con el tag <td>• Las celdas contienen

• Texto, imágenes, listas, párrafos, etc• Otras tablas

Ejemplo de Tabla

<table border="1"><tr>

<td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr>


</tr></table



</tr><tr>


</tr></table

Tablas y atributos de borde

• Si no se especifica el atributo borde, la tabla se mostrará sin bordes.

• La mayoría de las veces se quiere que se muestre bordes


<td>Row 1, cell 1</td><td>Row 1, cell 2</td>

</tr></table>


<td>Row 1, cell 1</td><td>Row 1, cell 2</td>

</tr></table>

Cabeceras en una tabla• Las cabeceras en una tabla son definidas con el tag <th>


<th>Cabecera</th><th>Otra cabecera</th>

</tr><tr>


</tr><tr>


</tr></table>


<th>Cabecera</th><th>Otra cabecera</th>

</tr><tr>


</tr><tr>


</tr></table>

Celdas vacías en una tabla

• Las celdas sin contenido no son mostradas



</tr><tr>

<td>row 2, cell 1</td><td></td>

</tr></table



</tr><tr>

<td>row 2, cell 1</td><td></td>

</tr></table

Celdas que se extienden por dos columnas

<h4>Celdas con dos columnas</h4><table border="1"><tr> <th>Nombre</th> <th colspan="2">Telefono</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>

<h4>Celdas con dos columnas</h4><table border="1"><tr> <th>Nombre</th> <th colspan="2">Telefono</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>

Celda que se extiende dos filas

<h4>Celda que se extiende dos filas</h4><table border="1"><tr> <th>Nombre:</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">Telefono:</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table>

<h4>Celda que se extiende dos filas</h4><table border="1"><tr> <th>Nombre:</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">Telefono:</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table>

Listas no ordenadas

• Los items de lista marcados con bulletts

<ul><li>Coffee</li><li>Milk</li></ul>

<ul><li>Coffee</li><li>Milk</li></ul>

Listas ordenadas

• Los items son marcados con números

<ol><li>Coffee</li><li>Milk</li></ol>

<ol><li>Coffee</li><li>Milk</li></ol>

Práctica

• Tablas

Formularios

• Un formulario es un área que contiene elementos de formulario

• Los elementos de formularios son elementos que permiten introducir datos a los usuarios• Campos de texto• Campos TextArea• Menús desplegables• Casillas de verificación

Input

• Es el tag de formulario más usado <input>• El tipo de entrada es especificado con el atributo type

• Text Fields• Radio Buttons• Checkboxes• Submit Button

Text Fields

• Cuando se necesita introducir letras números

<form>Nombre:<input type="text" name=“nombres" /><br />Apellido:<input type="text" name=“apellido" /></form

<form>Nombre:<input type="text" name=“nombres" /><br />Apellido:<input type="text" name=“apellido" /></form

Radio Buttons

• Son utilizados para seleccionar una de un número limitado de opciones

<form><input type="radio" name="sexo" value=“masculino" /> Masculino<br /><input type="radio" name="sexo" value=“femenino" /> Femenino</form

<form><input type="radio" name="sexo" value=“masculino" /> Masculino<br /><input type="radio" name="sexo" value=“femenino" /> Femenino</form

Checkbox

• Son utilizados para seleccionar una o más opciones de un número limitado de opciones

<form>Yo tengo una bicicleta:<input type="checkbox" name=“vehiculo" value=“Bici" /><br />Yo tengo un coche:<input type="checkbox" name=“vehiculo" value=“Auto" /><br />Yo tengo un avión:<input type="checkbox" name="vehiculo" value=“Avión" /></form

<form>Yo tengo una bicicleta:<input type="checkbox" name=“vehiculo" value=“Bici" /><br />Yo tengo un coche:<input type="checkbox" name=“vehiculo" value=“Auto" /><br />Yo tengo un avión:<input type="checkbox" name="vehiculo" value=“Avión" /></form

Dropdown

<html><body>

<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form>

</body></html>

<html><body>

<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form>

</body></html>

Botón Submit

• Cuando el usuario hace click en el botón submit, el formulario se envía al servidor

<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

Colores HTML

• Son definidos usando notación hexadecimal, para combinar el Rojo Verde y Azul (RGB)

16 Millones de colores diferentes

• La combinación de rojo, verde y azul de valores de 0 a 255 da un total de 16 millones de colores diferentes

Frames HTML

• Con Frames se puede mostrar más de una página web en una misma ventana de navegador

• Cada documento es llamado en un frame y cada frame es independiente del otro

• Desventajas• El desarrollador debe mantener más documentos• Es difícil imprimir la página entera

El tag frameset

• El tag <frameset> define como se va dividir la ventana en frames

• Cada frameset define un conjunto de filas o columnas• El valor de fila/columna indica la cantidad de pantalla que va

ocupar cada fila/columna

El tag frame

• El tag <frame> define que documento HTML va en cada frame

<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"></frameset>

<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"></frameset>

Tips sobre Frames

• Si un frame tiene el borde visible, un usuario puede cambiar su tamaño arrastrando el borde

• Para prevenir esto se debe añadir el noresize = “noresize” al tag <frame>

• Añada el tag <noframes> para browsers que no soportan frames

• No use el tag <body> junto con <frameset>

Script en HTML

• Añadir script en las páginas HTML hacen que sean más interactivas

• Es definido mediante el tag <script>• Usando el atributo type se especifica el lenguaje

<html><body>

<script type="text/javascript">document.write("Hello World!")</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("Hello World!")</script>

</body></html>

¿Qué es Java Script?

• Está diseñado para añadir interactividad a las páginas HTML• Java Script es un lenguaje de script• Java Script es un lenguaje interpretado• Cualquiera puede usar Java Script sin comprar licencias

Escribir JavaScript en las páginas

• Escribir texto mediante JavaScript

<html><body>

<script type="text/javascript">document.write("Hello World!");</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("Hello World!");</script>

</body></html>

Usar JavaScript Externo

• Para compartir javascript en distintas paginas• Archivo con la extensión .js

<html><head><script type="text/javascript" src="xxx.js"></script></head><body></body></html>

<html><head><script type="text/javascript" src="xxx.js"></script></head><body></body></html>

Instrucciones JavaScript

• Javascrip es sensible a mayúsculas/minúsculas• Son comandos para el navegador• Lo normal es colocar ; al final de una instrucción.

document.write(“Hola Dolly");document.write(“Hola Dolly");

Ejemplos JavaScript

• Escribir tags HTML

<html><body>

<script type="text/javascript">document.write("<h1>Hello World!</h1>");</script>

</body></html>

<html><body>

<script type="text/javascript">document.write("<h1>Hello World!</h1>");</script>

</body></html>

Bloques en Javascript

• Las instrucciones pueden ser agrupadas en bloques• Se inician y terminan con {}

<script type="text/javascript">{document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");}</script>

<script type="text/javascript">{document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");}</script>

Comentarios en Javascript

• Los comentarios hacen más fácil de entender el código javascript

<script type="text/javascript">// Escritura de cabeceradocument.write("<h1>Esto es una cabecera</h1>");// Escribir dos parrafosdocument.write("<p>Este es un parrafo.</p>");document.write("<p>Este es otro parrafo.</p>");</script>

<script type="text/javascript">// Escritura de cabeceradocument.write("<h1>Esto es una cabecera</h1>");// Escribir dos parrafosdocument.write("<p>Este es un parrafo.</p>");document.write("<p>Este es otro parrafo.</p>");</script>

Variables JavaScript

• Las variables son case sensitive• Los nombres de variables deben empezar con una letra o con

un guión bajo _

var x=5;var carname="Volvo";

var x=5;var carname="Volvo";

Operadores Aritméticos

Operadores de asignación

Operadores de comparación

Operadores lógicos

Ejemplos JavaScript

• Detectar el navegador<html><head><script type="text/javascript">function detectBrowser(){var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); }else { alert("It's time to upgrade your browser!"); }}</script></head>

<body onload="detectBrowser()"></body></html>

<html><head><script type="text/javascript">function detectBrowser(){var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); }else { alert("It's time to upgrade your browser!"); }}</script></head>

<body onload="detectBrowser()"></body></html>

Práctica

• Java Script

Más información...

• http://www.w3schools.com/html/default.asp• http://msdn.microsoft.com/en-us/library/ms533050(VS.85).as

px• http://es.wikipedia.org/wiki/HTML• http://dev.w3.org/html5/spec/Overview.html

http://www.w3schools.com/html/default.asp

http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx

http://es.wikipedia.org/wiki/HTML

Introducción a HTML y Script

Documents

Transcript of Introducción a HTML y Script