Download
1 / 41
410 likes | 588 Views
INTRODUCCION AL LENGUAJE HTML. HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". Los archivos HTML deben tener una extensin htm o html. Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML est compuesto por etiquetas. Las etiquetas le dicen al
E N D
1. DIPLOMADO EN PROGRAMACIÓN WEB
ING. FELIPE MARTÍN SANCHEZ CORTÉS
3. ¡Vamos a hacer una pequeña prueba! En Windows, abra el "Block de Notas". Escriba en el mismo, el siguiente texto:
<html> <head> <title>Mi primera página Web</title> </head> <body> Hola a todos. </body> </html>
Guarde el archivo como "pagina1.htm" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).
4. Abra el navegador Internet.
Seleccione “Archivo" y luego “Abrir".
Se abrirá una ventana, seleccione “Examinar" y ubique el archivo que acaba de guardar -"pagina1.html"- elíjalo y presione “Abrir".
Ahora usted ve la dirección, por ejemplo "C:\My Documents\pagina1.htm". Presione “Aceptar" y el navegador mostrará la página.
5. Expliquemos el ejemplo La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, no se muestra en la pantalla y es la cabecera del documento. Aquí colocamos información tal como el título, palabras claves para los motores de búsqueda y otros datos del documento.
Lo que esta escrito entre las etiquetas <title> y </title>, es el título del archivo.
Todo lo que aparece en la pantalla, se encuentra entre las etiquetas <body> y </body>.
6. Etiquetas de HTML Las etiquetas están encerradas entre los signos "<" y ">".
Las etiquetas generalmente vienen en pares <p> y </p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.
7. Elementos de HTML Veamos con este ejemplo los elementos de HTML.
<html> <head> <title>Una página Web</title> </head> <body> Hola a todos. <b>Este texto es en negrita</b> </body> </html>
8. Este es un elemento HTML:
<b>Este texto es en negrita.</b>
El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).
El contenido de dicho elemento es: Este texto es en negrita.
El fin del elemento HTML es con la etiqueta de cierre</b>.
Otro elemento HTML en el ejemplo es:
<body> Hola a todos. <b>Este texto es en negrita</b> </body>
EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita.</b>.
El fin del elemento HTML es con la etiqueta de cierre</body>.
9. ¿Qué son los atributos de las etiquetas? Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.
Un ejemplo de los atributos sería:
<body bgcolor="#FFFF00"> Hola a todos. <b>Este texto es en negrita</b> </body>
En la etiqueta <body> podemos observar el atributo bgcolor(color de fondo) y el valor "#FFFF00"(representa el color amarillo en hexadecimal).
Esto quiere decir que el color de fondo de la página será amarillo.
10. Headings(Encabezados) Nos definen el tamaño de un título o cabecera. <h1> nos dá el tipo de letra más grande. <h6> nos dá el tipo de letra más pequeño. HTML agrega automaticamente un espacio antes y después de cada título. <h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta a la hora de indexar su sitio.
11. Código
<html> <head> <title>Headings</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
12. Párrafos Los párrafos se definen con la etiqueta <p>.
Código
<html> <head> <title>Párrafos</title> </head> <body> <p>Este es el primer párrafo.</p> <p>Y este es el segundo párrafo.</p> </body> </html>
13. Comentarios
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
<!-- Esto es un comentario. -->
* Note que el signo de exclamación se coloca solo al principio del código.
Salto de línea
El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.
Código
<p>Esto es <br> un salto de lí<br>nea.</p>
La etiqueta <br>no tiene cierre.
14. Trazar una línea
La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
Código
<hr>
15. Formato básico del texto Código
<b>Texto en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itálica</i> <small>Texto pequeño</small> <strong>Texto fuerte</strong> <sub>Texto por debajo</sub> <sup>Texto por encima</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt>
16. Vínculos en HTML Los vínculos nos permiten conectarnos con otros documentos (una imagen, una película, un archivo de sonido, etc.) o sitios en la web (otra página web). Para ello debemos usar la etiqueta <a> que viene de la palabra anchor (ancla). La etiqueta <a> tiene como cierre </a>
Veamos un ejemplo
Vamos a crear un vínculo hacia la home de cybercomxal.com
Código
<a href="http://www.cybercomxal.com/">La home de cybercomxal</a> .
17. EL atributo target
Se utiliza para definir donde queremos que se abra el documento conectado.
El ejemplo de abajo abrirá el documento en una nueva página del navegador.
Código
<a href="http://www.cybercomxal.com/" target="_blank"></a>
18. Creando un enlace a un email
Se utiliza en caso que queramos que un enlace mande un email.
Código
<a href="mailto:alguien@yahoo.com">Mandar email</a> mailto: nos indica la dirección email a la que va dirigida.
Un enlace a partir de una imagen
Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.
Código
<a href="http://www.google.com/"><img src="../graficos/google.gif"></a>
19. ¿Qué son los marcos? Los frames (marcos en español) permiten a los autores presentar documentos con vistas múltiples. Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen.
Cada vista es un documento independiente de los otros.
20. La etiqueta frameset La etiqueta <frameset> se usa para dividir la ventana en marcos.
Cada frameset define un grupo de filas y columnas.
<frameset rows="30%,70%" cols="33%,34%,33%"> ...el resto de la definición... </frameset>
Este ejemplo crea una cuadrícula de 2x3 subespacios.
Rows: filas
Cols: columnas
21. La etiqueta frame etiqueta <frame> define que documento colocaremos en cada frame.
<frameset cols="25%,75%"> <frame src="frame1.htm"> <frame src="frame2.htm"> </frameset>
En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%.
La primer columna contiene el documento "frame1.htm" y la segunda columna el documento "frame2.htm".
22. La etiqueta iframe La etiqueta iframe se usa para crear un frame en línea que contiene otro documento.
Código
<iframe src="http://www.cybercomxal.com" width="100%"> </iframe>
23. ¿Qué son las tablas de HTML? Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML.
24. Características de las tablas Definimos las tablas con la etiqueta <table>.
La tabla está dividida en filas definidas con la etiqueta <tr>.
Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>.
Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc.
25. Código
<table border="1"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
26. Bordes de las tablas Para que se visualicen los bordes de una tabla, debemos agregar el atributo border, de lo contrario no se verán los bordes que dividen las celdas de la tabla.
Código
<table border="3"> <tr> <td>Borde</td> <td>3 pixels</td> </tr> </table>
27. Encabezados de las tablas Los encabezados de una tabla se definen con la etiqueta <th>.
Código
<table border="1"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table>
28. Márgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los márgenes con el atributo cellpadding.
Código
<table border="1px" cellpadding="20px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
29. Espaciado entre celdas Es el espacio que se encuentra entre celda y celda. El mismo está definido con el atributo cellspacing.
Código
<table border="1px" cellspacing="15px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
30. Imágenes en HTML ¿Cómo insertamos imágenes en un archivo HTML? Para insertar imágenes en un sitio usaremos la etiqueta <img>.
La etiqueta <img> es una etiqueta vacia, es decir que debemos utilizarla con el atributo src para que muestre la imagen.
La etiqueta <img> no tiene cierre.
31. Veamos un ejemplo
Si tenemos una imagen que se llama "meet1.gif" ubicada en el directorio "http://www.cybercomxal.com/images/"
Código
<img src="http://www.cybercomxal.com/images/meet1.gif">
32. Texto alternativo de la imagen Se utiliza en caso que deseemos visualizar un texto aparte de la imagen.
Muchas veces el navegador no visualiza las imágenes, y este atributo nos ayuda a ver de que se trata la imagen.
Código
<img src=" http://www.cybercomxal.com/images/meet1.gif " alt="Dos personas charlando">
33. Formularios en HTML ¿Para qué se usan los formularios? Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).
34. La etiqueta form Dentro de la etiqueta <form> se encuentra el formulario.
Los usuarios interaccionan con los formularios a través de las llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificación (checkboxes)
Radiobotones (radio buttons)
Menúes (menus)
Entrada de texto (text input)
Selección de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
Dentro de la etiqueta form, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado. Tambien contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.
35. La etiqueta input Nos define el registro donde el usuario puede ingresar los datos. Type: especifica el tipo de control a crear.
Text
Crea un control de entrada de texto de una línea.
Código
<form action="datos.php" method="get"> Nombre: <input type="text" name="nombre"> <br> Apellido: <input type="text" name="apellido"> </form>
36. Radio botones Se usan cuando queremos que el usuario elija entre una serie de opciones.
Código
<form action="edades.asp" method="post"> ¿Edad? <input type="radio" name="edad" value="menor">menor de 17 <br> <input type="radio" name="edad" value="adulto">entre 18 y 60 <br> <input type="radio" name="edad" value="mayor">mayor de 61 </form>
37. Checkbox (casillas de verificación) Permite al usuario elegir entre varias opciones.
Código
<form action="hobbie.php" method="get"> ¿Pasatiempos? <input type="checkbox" name="pasa" value="tv">TV <br> <input type="checkbox" name="pasa" value="libros">Libros <br> <input type="checkbox" name="pasa" value="musica">Música <br> <input type="checkbox" name="pasa" value="otros">Otros </form>
38. Password
Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseñas.
Submit
Botón de envio de datos del formulario.
Reset
Botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
Código
<form action="datos_personales.php" method="post"> Nombre: <input type="text" name="nombre"><br> Contraseña: <input type="password" name="secreto"><br> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>
39. La etiqueta select La etiqueta select es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option>
Código
<form action="continentes.php" method="get"> <select name="continente"> <option value="america">America</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceania</option> <option value="africa">Africa</option> </select> </form>
40. La etiqueta textarea Se usa para crear un control de entrada de texto multilínea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendra el recuadro del área de texto.
Código
<form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aquí podemos ingresar un texto introductorio si lo deseamos. </textarea> </form>
41. Actividad para Casa Realizar una pagina en HTML que cuente con todas las opciones que vimos en clase.
