Download
1 / 77
790 likes | 1.09k Vues
HTML. M.C. Rafael A. García Rosas . rafaelgr@umad.edu.mx. Qué es HTML. HTML ( HyperText Markup Language ) es el lenguaje que se emplea para el desarrollo de páginas de internet .
E N D
HTML M.C. Rafael A. García Rosas. rafaelgr@umad.edu.mx
Qué es HTML • HTML (HyperTextMarkupLanguage) es el lenguaje que se emplea para el desarrollo de páginas de internet. • Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. • Para poder crear una página HTML se requiere un simple editor de texto y un navegador de internet.
Estructura interna de una página HTML • Las instrucciones HTML están encerradas entre los caracteres: < y >. • Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). • El lenguaje HTML no es sensible a mayúsculas y minúsculas. • La estructura básica de una página HTML es: <html> <head> </head> <body> Cuerpo de la página. </body> </html> pagina1.html
Salto de línea <br> • Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea. • Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>. • <br> viene de break. PHP<br> es lo mismo: PHP <br>
Párrafo <p> • Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. • Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo. • <p> viene de paragraph. • Dentro de un párrafo puede haber saltos de línea <br>. Continúa ejemplo ->
Párrafo <p> ejemplo <html> <head> </head> <body> <p> SQL, StructureQueryLanguage (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html>
Títulos <h1><h2><h3><h4><h5><h6> • El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor. • <h1> viene de heading. • El navegador el responsable de definir el tamaño de la fuente. • Requiere la marca de cerrado del título con la barra invertida. • Cada título aparece siempre en una línea distinta. <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> o esto: <h1>Tipos de datos en MySQL</h1><h2>varchar</h2>
Énfasis (<em> <strong>) • Enfatizar algo significa realzar la importancia. • Contamos con dos elementos para enfatizar que son (<em> <strong>). • <em> viene de empathize que significa énfasis. • <strong> viene de strong que significa fuerte. • El elemento de mayor fuerza de énfasis es strong y le sigue em. • La mayoría de los navegadores muestran el texto enfatizado con <strong> con un texto en negrita y para el elemento <em> utilizan letra itálica. <strong>Típos de datos</strong>
Hipervínculo a otra página del mismo sitio <a> • El elemento más importante que tiene una página de internet es el hipervínculo. • Cargar otra página en el navegador. • <a> viene de anchor que significa ancla. • Normalmente un navegador al encontrar esta marca muestra un texto subrayado. • La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis: <a href="pagina2.html">Noticias</a> Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.
Hipervínculo a otra página del mismo sitio <a> • El valor de la propiedad debe ir entre comillas dobles. • La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.
Hipervínculo a otro sitio de internet <a> • Cuando se trata de una página de internet, el protocolo es el http. • La sintaxis para disponer un hipervínculo a otro sitio de internet es: <a href="http://www.google.com">Buscador Google</a> • http://www.google.com -> Selecciona y envía una página que tiene configurada el servidor como página por defecto. <a href="http://www.google.com/intl/en/about.html">Acerca de Google</a>
Imágenes dentro de una página <img> • Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png. <imgsrc="foto1.jpg" alt="Pintura geométrica"> • En la propiedad src indicamos el nombre del archivo que contiene la imagen. • Alt describir el contenido de la imagen. • <img> viene de image. • srcviene de source. • altviene de alternative.
Imágenes dentro de una página <img> Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas. <imgsrc="imagenes/foto1.jpg" alt="Pintura geométrica"> <imgsrc="../foto1.jpg" alt="Pintura geométrica"> <imgsrc="../../foto1.jpg" alt="Pintura geométrica"> <imgsrc="../imagenes/foto1.jpg" alt="Pintura geométrica">
Hipervínculo mediante una imagen <a> y <img> • Ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen. • Se disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace <a>. <a href="pagina2.html"><imgsrc="/imagenes/foto1.jpg" alt="Pintura Geométrica"></a>
Apertura de un hipervínculo en otra instancia del navegador. • El elemento <a>tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página. • Debemos asignarle el valor "_blank” <a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>
Hipervínculo a un cliente de correo <a> • El elemento <a>permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora. <a href="mailto:diegoestevanes@gmail.com?subject=título del mensaje&body=cuerpo del mensaje">Enviar mail.</a> • Podemos inclusive añadir el envío de mail con copia y con copia oculta a otras direcciones. <a href="mailto:diego1@gmail.com? subject=aquí el título&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=Este es el cuerpo">Enviar mail.</a>
Anclas llamadas desde la misma página. • Disponer una referencia dentro de la página para poder posteriormente disponer un hipervínculo a dicha marca. • Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo. <a name="nombreancla"></a> • La sintaxis para ir a un ancla desde un hipervínculo es la siguiente: <a href="#nombreancla">Introducción</a> Ejercicio: Implementa una página con un menú y varias anclas.
Anclas llamadas desde otra página. • Debemos conocer el nombre de la página a llamar y el nombre del ancla. • Luego la sintaxis para la llamada al ancla es: <a href="pagina2.html#introduccion">Introducción</a> • Ejercicio: Implementa una página con un menú y varias anclas hacia distintas páginas.
Tarea 1 Problema 1: Confeccionar una página HTML que muestre tu nombre y apellido, luego en la siguiente línea los nombres de tus padres separados por un guión. Problema 2: Confeccionruna página que muestre en un párrafo datos referentes a tus estudios y en otro párrafo tu nombre y mail.
Tarea 1(2) Problema 3: • Confeccionar el titular de un periódico con un título de nivel 1. • Luego definir dos títulos de segundo nivel con los textos (Noticias políticas y Noticias deportivas),en cada una de estas secciones definir dos titulares de tercer nivel con un párrafo cada una. • Al final de la página mostrar un título de cuarto nivel con el nombre de la empresa propietaria del periódico.
Tarea 1(3) Problema 4: • Crear tres páginas con una foto cada una (foto1.jpg, foto2.jpg y foto3.jpg) luego al ser presionada avanzar a la siguiente página, es decir de la pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de ésta a la primera. • Las imágenes se encuentran en una carpeta llamada imágenes que depende directamente de la raíz del sitio.
Tarea 1(4) Problema 5: • Una empresa que vende pizzas tiene 3 ofertas: • 1 muzzarella y una bebida cola a 5 pesos, • 2 muzzarellas a 6 pesos y • 4 muzarrellas a 10 pesos. • Confeccionar una página que disponga tres hipervínculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y enviar la promoción correspondiente. • En el título indicar si se trata de la promoción 1, 2 o 3. • En el cuerpo del mensaje pedir que ingrese la dirección y teléfono de la persona que hace el pedido.
Tarea 1(5) Problema 6: Disponer una serie de hipervínculos sobre noticias del día. Enlazar los hipervínculos con anclas que se encuentran en otra página.
Lista ordenada (<ol>) • Numera una serie de objetos. • La marca <ol> y su correspondiente marca de cerrado es </ol>. • En su interior cada uno de los items se los dispone con el elemento <li>. <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>GonzalezRaul</li> <li>LopezHector</li> </ol> </body> </html> • <ol> viene de ordenedlist • <li> viene de listitem
Lista no ordenada (<ul>) • No utiliza un número delante de cada items sino un pequeño símbolo gráfico. • Idéntico a las listas ordenadas. <html> <head> </head> <body> <h2>Lenguajes de programación.</h2> <ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html> • <ul> viene de unordered list • <li> viene de list item
Listas anidadas. • Es posible insertar una lista dentro de otra. • Atención -> tener cuidado en la correcta apertura y cerrado de las marcas. <li>Argentina <ul> <li> <a href="http://www.lanacion.com.ar">La Nación</a> </li> <li> <a href="http://www.clarin.com.ar">Clarín</a> </li> <li> <a href="http://www.pagina12.com.ar">Página 12</a> </li> </ul> </li>
Lista de definiciones (<dl>) • Asocia un término y la definición del mismo. • El navegador se encarga de hacer el sangrado del contenido del elemento. <dl> <dt>C++</dt> <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por BjarneStroustrup, como extensión del lenguaje de programación C. </dd> </dl> • <dl> viene de definitionlist • <dt> viene de definitionterm • <dd> viene de definitiondescription
Tabla (<table><tr><td>) • <table> Es la marca de comienzo de la tabla. • <tr> • Es la marca de comienzo de una fila. • Esta marca debe estar dentro del elemento table. • <tr> viene de tablerow que significa fila de la tabla. • <td> • Es la marca de comienzo de una celda. • Esta marca debe estar dentro del elemento tr. • <td> viene de table data que significa dato de la tabla. Continúa ejemplo ->
Tabla (<table><tr><td>) <html> <head> </head> <body> <tableborder="1"> <tr> <td>China</td> <td>1300 millones</td> </tr> <tr> <td>India</td> <td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td> <td>295 millones</td> </tr> </table> </body> </html>
Tabla con encabezado (<th>) • Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>. <tr> <th>Paises</th> <th>Cantidad de habitantes</th> </tr> • <th> viene de tableheadercell que significa celda de encabezado de tabla.
Tabla con título (<caption>) • Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. <tableborder="1"> <caption> Población de los paises con mayor cantidad de habitantes. </caption> <tr> … • <caption> significa título.
Tabla y combinación de celdas. Ejercicio de clase
Contenido de la cabecera de la página (<title>) • permite definir el título que aparecerá en la barra del navegador. • Siempre debemos buscar un título lo más significativo. <html> <head> <title>Título de la página</title> </head> …
Comentarios dentro de una página <!-- --> • Los comentarios son muy útiles para el desarrollador de la página. • Un comentario puede abarcar varias líneas. • El navegador ignora todos los comentarios. • Atención -> Los comentarios consumen ancho de banda del servidor. • La sintaxis para definir un comentario es: <!-- Aquí va el comentario -->
Formulario - <form> • Permite que el visitante al sitio cargue datos y sean enviados al servidor. • El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.). <formaction="/registrardatos.php" method="post"> Ingrese su nombre: <inputtype="text" name="nombre" size="20"> <br> <inputtype="submit" value="enviar"> </form>
Formulario - input type="text"/ input type="password" • Podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario. • La propiedad name de cada elemento input debe tener un nombre distinto. <input type="password" name="clave" size="12"> <input type="reset" value="borrar">
Formulario - textarea • Nos permite el ingreso de varias líneas a diferencia del cuadro de texto (input/text). • Es un elemento que requiere una marca de comienzo y una de finalización. • Usa dos propiedades llamadas rows y cols. <textareaname="comentarios" rows="5" cols="60"> </textarea>
Formulario - input type="checkbox" • Un checkbox es una casilla de selección que puede tomar dos valores (seleccionado/no seleccionado). • Un control checkbox no muestra texto, solo una casilla que el operador puede tildar o destildar.. <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> Atención -> Es importante hacer notar que los caracteres permitidos de la propiedad name son los caracteres alfabéticos y los números siempre y cuando no sea el primero.
Formulario - input type="radio" • Aplica cuando tenemos un conjunto de opciones pero sólo una puede ser seleccionada a la vez. • Tienen el mismo valor en la propiedad name, con esto se logra que cuando seleccionamos uno se deseleccione el actual. <input type="radio" name="estudios" value="2">Primaria<br> <input type="radio" name="estudios" value="3">Secundaria<br> <input type="radio" name="estudios" value="4">Universitario<br>
Formulario - select (cuadro de selección individual) • Nos permite seleccionar una opción entre un conjunto. • Una variante gráfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de selección que muestra simultáneamente varios elementos (aunque sólo uno se puede elegir). <selectname="pais"> <optionvalue="1">Argentina</option> <optionvalue="2">España</option> <optionvalue="3">México</option> </select>
Formulario - select (cuadro de selección múltiple) Permitir seleccionar varias opciones al mismo tiempo. <selectname="colores[]" size="4" multiple> <optionvalue="1">Rojo</option> <optionvalue="2">Verde</option> <optionvalue="3">Azul</option> </select>
Formulario - select (agrupamiento de opciones) • Podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items. • La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título. <selectname="articulo"> <optgrouplabel="Frutas"> <optionvalue="1">Naranjas</option> <optionvalue="2">Manzanas</option> </optgroup> <optgrouplabel="Verduras"> <optionvalue="7">Lechuga</option> <optionvalue="8">Acelga</option> </optgroup> </select>
Formulario - button • Control visual que se puede utilizar para sustituir los controles: <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> Por <buttontype="submit"> Texto a mostrar dentro del botón. </button> • Todo lo que está contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botón, como por ejemplo una imagen, un párrafo, enfatizado de una palabra etc. • El type=buttonsignificará que deberemos codificar una función en javascript para procesar el evento.
Formulario - input type="button" • Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad type el valor "button". • Su actividad dependerá de un programa desarrollado generalmente en JavaScript. <input type="button" name="boton7" value=" 7 "> • Atención -> Recordemos que HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los eventos para dichos botones.
