html hungria berbesi unefa-merida. ¿qué son los archivos html? html (hypertext markup language) o...
TRANSCRIPT
HTML
Hungria BerbesiUNEFA-MERIDA
• ¿Qué son los archivos HTML?• HTML (HyperText Markup Language) o "Lenguaje para
Marcado de Hipertexto". • Los archivos HTML deben tener una extensión 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 navegador(Ej: Internet
Explorer, Firefox, Mozilla, etc.) como mostrar la página.
Primer ejemplo
• <html><head><title>Mi primera página Web</title></head>
<body>Hola a todos los estudiantes de la UNEFA.</body></html>
Etiquetas HTML• ¿Qué son los elementos y las etiquetas de HTML?• Los elementos son declaraciones para visualizar o dar forma a una página
Web.Las etiquetas son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.
•Reglas básicas de las etiquetas 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>. •
• <html><head><title>Mi primera página Web</title></head>
<body bgcolor="#FFFF00">Hola a todos los estudiantes de la UNEFA. <b>Este texto es en negrita</b>
</body></html>
Heading y comentarios• <html>
<head><title>Headings o encabezados</title></head>
<body><h1>Encabezado 1 esto es para titulos grandes</h1><h2>encabezado 2 esto es para titulos medianos</h2><h3>encabezado 3 esto es para titulos pequeños</h3><h4>encabezado 4</h4><h5>encabezado 5</h5><h6>encabezado 6</h6>
• <!-- Esto es un comentario. Es para entender el texto --> </body></html>
Parrafos
• <html><head><title>Párrafos</title></head>
<body><p>Este es el primer párrafo del ejemplo.</p><p>Y este es el segundo párrafo.</p></body></html>
Salto de linea, y separador<html><head><title>br - Salto de línea</title></head><body>El salto de<br> línea ocu<br>rrirá donde lo <br>coloquemos<br>.Sección 1<hr>Sección 2<hr>Sección 3</body></html>
Tipos de tamaño de letra<html><head><title>Texto en Negrita</title></head><body>Texto normal - <b>Texto en negrita</b><big>Texto grande</big><em>Texto enfatizado</em><ins>Texto subrayado</ins><strong>Texto fuerte</strong></body></html>
Links o Enlaces
<html><head><title>a href=...</title></head>
<body>
<a href="http://www.google.com/">Google.</a>
</body></html>
Enlace a otra página local
• En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:
• <A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>• Una vez escrito esto y guardada la página veríamos al abrirla con el
Navegador
<html><head><title>Un vínculo que se abre en otro página del navegador</title></head>
<body>
<a href="pagina2.html">Ir a pagina2</a></body></html>
<html><head><title>Un vínculo que se abre en otro página del navegador</title></head><A NAME="inicio"> </A>
<body>• <A HREF="#inicio"> Ir al Inicio</A>
</body></html>
<html><head><title>Un vínculo que se abre en otro página del navegador</title></head>
<body>
<a href="pagina2.html">Ir a pagina2</a></body></html>
Abrir vinculo en nueva ventana<html><head><title>Un vínculo que se abre en otro página del navegador</title></head>
<body>
<a href="http://www.google.com/" target="_blank">Google</a>
</body></html>
Abrir en el mismo frame<html><head><title>Vínculo que se abre en este recuadro</title></head>
<body>
<a href="http://www.google.com/"target="_self">Google</a>
</body></html>
formularios<head><title>Formulario</title></head>
<body>
<form action="datos.php" method="get">Nombre: <input type="text" name="nombre"><br />Contraseña: <input type="password" name="contra"><br /><input type="submit" value="Enviar"><input type="reset" value="Borrar"></form>
<p>Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información</p>
</body></html>
formularios<html><head><title>Formulario</title></head>
<body>
<form action="datos.php" method="get">Nombre: <input type="text" name="nombre"><br>Contraseña: <input type="password" name="contra"><br><br><input type="image" src="enviar.png" align="left"></form>
<p>Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información.<br><br> En este ejemplo podemos observar que hemos sustituido el botón de submit por un botón gráfico/imagen que en sí tiene la misma funcionalidad y además lo ubicamos a la izquierda.</p>
</body></html>
Un formulario tipo checkbox<html><head><title>Formulario</title></head>
<body>
<form action="hobbie.php" method="get">¿Cuáles son sus pasatiempos favoritos?<br><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<br></form>
<p>El atributo <b>type</b> junto con el valor <i>checkbox</i> nos muestran un formulario del tipo "casilla de verificación" que nos permite elegir tantas opciones como deseemos.</p>
</body></html>
Un formulario para subir archivos<html><head><title>Formulario</title></head>
<body>
<form action="foto.php" method="post" accept="image/jpg">Ingrese la foto: <input type="file" name="foto"><br /><input type="submit" value="Enviar"><input type="reset" value="Borrar"></form>
<p>Al apretar el botón "Enviar" usted mandará los datos a una página llamada "foto.php" la cual procesará la información.<br><br> El atributo <b>type</b> junto con el valor <i>file</i> nos indica que este formulario es para el envio de archivos.</p>
</body></html>
Un formulario con contraseña<html><head><title>Formulario</title></head>
<body>
<form action="datos.php" method="get">Nombre: <input type="text" name="nombre"><br />Contraseña: <input type="password" name="contra"><br /><input type="submit" value="Enviar"><input type="reset" value="Borrar"></form>
<p>Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información</p>
</body></html>
Un formulario tipo radio<html><head><title>Formulario</title></head><body>
<form action="colores.php" method="get">Elija un color<br><input type="radio" name="col" value="red">Rojo<br><input type="radio" name="col" value="blue">Azul<br><input type="radio" name="col" value="green">Verde<br><input type="submit" value="Enviar"><input type="reset" value="Borrar"></form>
<p>Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "colores.php" la cual procesarátoda la información.<br><br> El atributo <b>type</b> junto con el valor <i>radio</i> nos muestran un formulario del tipo "radio" que nos permite elegir solo una opción.</p>
</body></html>
Un recuadro alrededor del formulario con titulo<html>
<head><title>Formulario</title></head><body>
<form action="datos.php" method="get"><fieldset>
<legend>Ingreso de datos</legend>Nombre: <input type="text" name="nombre"><br>Contraseña: <input type="password" name="contra"><br>
<input type="submit" value="Enviar"><input type="reset" value="Borrar">
</fieldset></form>
<p>Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información.<br><br> La etiqueta<b>fieldset</b> dibuja un recuadro alrededor del formulario.<br> La etiqueta <b>legend</b> coloca un título al recuadro. </p>
</body></html>
select<html><head><title>Formulario</title></head><body><form action="hobbie.php" method="get">Elija su pasatiempo favorito:<select name="pasa">
<option value="tv">TV</option><option value="libros">Libros</option><option value="musica">Música</option><option value="cine">Cine</option><option value="teatro">Teatro</option><option value="caminar">Caminar</option><option value=“est6 es 4na *r4eba">Otros</option>
</select></form><p>La etiqueta <b>select</b> define un menú desplegable.<br> La etiqueta <b>option</b> define una opción dentro del menú
desplegable y el atributo <b>value</b> especifica el valor incial del control.</p>
</body></html>
Poner subtítulos dentro del menú <html><head><title>Formulario</title></head>
<body>
<form action="hobbie.php" method="get">Elija su pasatiempo favorito:
<select name="pasa">
<optgroup label="En casa"><option value="tv">TV</option><option value="libros">Libros</option><option value="musica">Música</option></optgroup>
<optgroup label="Fuera de casa"><option value="cine">Cine</option><option value="teatro">Teatro</option><option value="caminar">Caminar</option></optgroup>
</select></form>
<p>La etiqueta <b>optgroup</b> junto con el atributo <b>label</b> especifican el rótulo del grupo de opciones.</p>
</body>• </html>
Imágenes
<html><head><title><img src=...alt=...></title></head>
<body><img src ="nido.gif"></body></html>
Crear un mapa de la imagen<html><head><title>Uso de imagenes</title></head>
<body><map name="map1"><area href="cuadrado.html" alt="Cuadrado" shape=rect coords="0,75,100,175"><area href="circulo.html" alt="Círculo" shape=circle coords="175,50,50"><area href="triangulo.html" alt="Triángulo" shape=poly coords="125,250, 225,250, 175,165"></map>
<img src="http://www.virtualnauta.com/graficos/cuaredtri.gif" border="0" width="225" height="251" usemap="#map1"></body></html>
Definir marcos verticales<html>
<frameset cols="100px,200px,100px">
<frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html">
</frameset>
</html>
Definir marcos horizontales<html>
<frameset rows="100px,200px,100px">
<frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html">
</frameset>
</html>
Marcos sin bordes<html>
<frameset rows="20%,30%,50%">
<frame frameborder="0" src="marco_1.html"> <frame frameborder="0" src="marco_2.html"> <frame frameborder="0" src="marco_3.html">
</frameset>
</html>
Uso de márgenes dentro del marco<html>
<frameset rows="20%,30%,50%">
<frame marginwidth="50px"src="marco_1.html"> <frame marginheight="30px"src="marco_2.html"> <frame src="marco_3.html">
</frameset><!--Observe la ubicación de las palabras--></html>
scroll<html>
<frameset cols="33%,33%,34%">
<frame scrolling="yes" src="marco_4.html"> <frame scrolling="no" src="marco_5.html"> <frame scrolling="auto" src="marco_6.html">
</frameset>
</html>
tabla<html><head><title>Tabla con bordes remarcados</title></head>
<body><table border="5px"><tr><td> </td><td>Columna 1</td><td>Columna 2</td></tr>
<tr><td>Fila 1</td><td>Contenido 1-1</td><td>Contenido 1-2</td></tr>
<tr><td>Fila 2</td><td>Contenido 2-1</td><td>Contenido 2-2</td></tr></table></body></html>
Tabla con cellpaddiing<html><head><title>Uso del cellpadding</title></head>
<body><table border="1" cellpadding="10"><tr><td> </td><td>Columna 1</td><td>Columna 2</td></tr>
<tr><td>Fila 1</td><td>Contenido 1-1</td><td>Contenido 1-2</td></tr>
Distancia entre celdas<html><head><title>Distancia entre celdas</title></head>
<body><table border="1" cellspacing="10"><tr><td> </td><td>Columna 1</td><td>Columna 2</td></tr>
<tr><td>Fila 1</td><td>Contenido 1-1</td><td>Contenido 1-2</td></tr>
<tr><td>Fila 2</td><td>Contenido 2-1</td><td>Contenido 2-2</td></tr></table>
</body></html>
<html><head><title>Especificamos la alineación horizontal de las filas</title></head><body><p>Tabla ejemplo de filas con el atributo align</p><table width="400" border="1"><tr><th>Valor</th><th>Resultado</th><th>Resultado</th></tr><tr align="right"><td>right</td><td>alineado a</td><td>la derecha</td></tr><tr align="left"><td>left</td><td>alineado a</td><td>la izquierda</td></tr>
<tr align="center"><td>center</td><td>texto</td><td>centrado</td></tr><tr align="justify"><td>justify</td><td>texto</td><td>texto</td></tr></table></body></html>