Scribd
Cargar
89 vistas

HTML5

El documento describe HTML, el lenguaje de marcado utilizado para crear páginas web. HTML define la estructura y el contenido de un sitio web, y los navegadores lo usan para mostrar páginas web. El documento explica brevemente la historia, sintaxis y elementos básicos de HTML como etiquetas, encabezados y cuerpos.

Cargado por

Donato Gonzales
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
89 vistas

HTML5

El documento describe HTML, el lenguaje de marcado utilizado para crear páginas web. HTML define la estructura y el contenido de un sitio web, y los navegadores lo usan para mostrar páginas web. El documento explica brevemente la historia, sintaxis y elementos básicos de HTML como etiquetas, encabezados y cuerpos.

Cargado por

Donato Gonzales
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 173

HTML

¿Qué es?
definición
HTML es un lenguaje de
programación que se utiliza para el
desarrollo de páginas de Internet.

Se trata de la siglas que


corresponden a
HyperText Markup Language, es
decir, Lenguaje de Marcado de
Hipertexto
Es el lenguaje con el que se escribe el
contenido de las páginas web.
Las páginas web pueden ser vistas
por el usuario mediante un tipo de
aplicación llamada cliente web o más
comúnmente "navegador".
Podemos decir por lo tanto que el
HTML es el lenguaje usado para
especificar el contenido que los
navegadores deben representar a la
hora de mostrar una página web.
¿qué hace?
Nos generá la estructura de datos e
información y no debe pensarse en lo
estético al momento de realizar el
estructurado.

El formato de archivo que


caracterizan a HTML es:

.html
Historia
El lenguaje HTML se creó en 1991.
Su historia es relativamente corta
pero para su poca vida ha sufrido
importantes cambios.
Su padre es Tim Berners-Lee que lo
diseñó con objetivos divulgativos.
Inicialmente no se pensó que la web
llegaría a ser un área de ocio con
Historia
carácter multimedia, de modo que,
nació sin dar respuesta a todos los
posibles usos que se le iba a dar y a
todos los colectivos de gente que lo
utilizarían en un futuro.
Sin embargo, pese a esta deficiente
planificación, si que se han ido
incorporando modificaciones con el
Historia
tiempo, agregando nuevas
características para cubrir las nuevas
necesidades.
No podemos decir que la sociedad es
la misma que cuando se creó html y
así como con las nuevas tecnologías
cambian nuestras costumbres
también nacen nuevas necesidades.
Historia
En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el pri-
mer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML
HTML 2.0 2.0 no soportaba tablas. Se simplificaba al máximo la estructura del documento
para agilizar su edición, donde la declaración explícita de los elementos body, html
y head es opcional.
La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML
publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos
HTML 3.2
avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto
que fluye alrededor de las imágenes.
La última especificación oficial de HTML se publicó en diciembre de 1999 y se de-
nomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el de-
sarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple,
Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en
HTML HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web
4.01 Hypertext Application Technology Working Group) que comenzó el desarrollo del
HTML 5, cuyo primer borrador oficial se publicó en enero de 2008. Debido a la
fuerza de las empresas que forman el grupo WHATWG y a la publicación de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad
estandarizadora de HTML, dentro del cual decidió integrar el XHTML.
El consorcio internacional W3C, después de una evolución de varios años, liberó el
HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5 incorpora nue-
HTML 5, vos elementos no contemplandos en HTML 4.01. Hay diversos cambios respecto a
HTML 5.1, HTML 4.01. Hay nuevas etiquetas, se introduce la posibilidad de introducir audio y
HTML 5.2 video de forma directa en la web sin necesidad de plugins o complementos en los
navegadores, y otras novedades. El W3C irá lanzando progresivamente nuevas evo-
luciones del HTML 5.
Diferencias
Para HTML 5 escribiríamos:

<!DOCTYPE html>

Para HTML 4.01 Strict escribiríamos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML


4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Para HTML 4.01 Transitional (recomendado dentro de HTML 4.01)


escribiríamos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Sintaxis

¿Qué es?
Sintaxis
f. Inform. Conjunto de reglas que
definen las secuencias correctas
de los elementos de un lenguaje
de programación.
Sintaxis
El HTML es un "lenguaje de marcado".
Basa su sintaxis en un elemento base al
que llamamos marca, tag o
simplemente etiqueta.
A través de las etiquetas vamos
definiendo los elementos del
documento, como enlaces, párrafos,
imágenes, etc. Así pues, un documento
Sintaxis
HTML estará constituido por texto y un
conjunto de etiquetas para definir la
función que juega cada contenido
dentro de la página.
Todo eso servirá al navegador para
saber cómo se tendrá que presentar el
texto y otros elementos en la página.
Partes de HTML

Un documento HTML ha de estar


delimitado por la etiqueta HTML.
Dentro de este documento, se puede
distinguir dos partes principales:
Encabezado.- Está delimitado por la
etiqueta HEAD, donde colocaremos
etiquetas de índole informativo, como
Partes de HTML
por ejemplo:
El título de nuestra página.
El contenido de la cabecera no suele
aparecer en el cuerpo de la página,
pero sirve a los navegadores y otros
sistemas para encontrar información
útil para entender y procesar el
documento.
Partes de HTML

El cuerpo.- Delimitado por la etiqueta


BODY, que será donde colocaremos
nuestro texto e imágenes delimitados
a su vez por otras etiquetas.
Etiquetas

¿Qué son?
Etiquetas
Anatomía de una etiqueta HTML
La etiqueta presenta frecuentemente
dos partes, su apertura y cierre, y se
encierran ambas partes entre
símbolos "menor que" y "mayor que".
Lo veremos a continuación.
Etiquetas

<...>
Menor que Mayor que
Etiquetas
Apertura
El inicio de una etiqueta se
produce de la siguiente manera:

< e t iq u e ta>
Etiquetas
Cierre
El final de una etiqueta se produce
de manera similar a su apertura,
aunque agregando una barra:

< /e tiq u e ta>


Etiquetas

Existen algunas excepsiones al


usar algunas etiquetas que no
contienen atributos.
Orden de la inf.
Es necesario en todo momento
estructurar la información por
carpetas (Donde lo guardo)
Existen 2 tipos de organización:

• Jerárquica
• Lineal
Jerárquica
sitio_uno/imagenes/iconos
/fondo

sitio_uno/multimedia/audio
/video
sitio_uno/paginas
sitio_uno/css
sitio_uno/js
Lineal
sitio_uno/imagen1
/imagen2
/imagen3
/video1
/video2
/pagina1
/audio1
/audio2
Editores
Existen demasiados editores de
código en el mundo y podemos
adecuarnos al que queramos.
Editores
• Sublime text
• Notepad++
• Brackets (MAC)
• Bloc de notas
Código
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
</body>
</html>
Guardado
Siempre es necesario guardar el código
en HTML con el nombre de archivo:

index.html
En la raíz de la carpeta creada y abrirlo
con un navegador(mozilla firefox).
Comentarios
Para realizar comentarios en el código
usaremos la opción:

<!-- Esto es un comentario-->

Nos sirve para ubicarnos en el código o


desactivar algunos elementos.
Metadatos
No son visibles en la página salvó la
etiqueta.

<title>Mi primera página</title>


Código

<body>Hola Mundo
</body>
Código

<body>
<h1>Hola Mundo</h1>
</body>
Código

<body>
<h1 align=”center ”>Hola Mundo</h1>
</body>
Código

<body>
<h1 align=”center ”>Hola Mundo</h1>
<hr>
</body>
Código
<body>
<h1 align=”center ”>Hola Mundo</h1>
<h2 align=”center ”>Hola Mundo</h2>
<h3 align=”center ”>Hola Mundo</h3>
<h4 align=”center ”>Hola Mundo</h4>
<h5 align=”center ”>Hola Mundo</h5>
<hr>
</body>
Código
<b>Bold</b>
<strong>Bold</strong>
<i>Italic</i>
<u>subrayado</u>
<s>tachado</s>
<hr>
</body>
Código
<b> Texto en bold
<strong> Texto en bold
<i> Texto en Italic
<u> Texto en subrayado
<s> Texto en tachado

* <hr/> Línea no tiene cierre


Código

<br>

Salto de línea o enter


Código
Superindic<sup>e</sup>
Subindic<sub>e</sub>

Se usan para fórmulas químicas o


potencias.
Código
<body bgcolor=”pink”>
<h1 align=”center ”>Hola Mundo</h1>
<h2 align=”center ”>Hola Mundo</h2>
<h3 align=”center ”>Hola Mundo</h3>
<h4 align=”center ”>Hola Mundo</h4>
<h5 align=”center ”>Hola Mundo</h5>
<hr>
</body>
Código
<body bgcolor=”skyblue”>
<h1 align=”center ”>Hola Mundo</h1>
<h2 align=”center ”>Hola Mundo</h2>
<h3 align=”center ”>Hola Mundo</h3>
<h4 align=”center ”>Hola Mundo</h4>
<h5 align=”center ”>Hola Mundo</h5>
<hr>
</body>
Colores
Hexadecimales
#723c22
¿Cómo funciona esta nomenclatura?

• A cada par de carácteres pertenece un color


que se basa en 16 carácteres (10 números y 6
letras)

0123456789ABCDEF

0 es lo minímo y F lo máximo
Código
<body bgcolor=”” text=“00ff00”>
<h1 align=”center ”>Hola Mundo</h1>
<h2 align=”center ”>Hola Mundo</h2>
<h3 align=”center ”>Hola Mundo</h3>
<h4 align=”center ”>Hola Mundo</h4>
<h5 align=”center ”>Hola Mundo</h5>
<hr>
</body>
Carácteres especiales
No todos los carácteres pueden
ser interpretados por html.
Para lo que necesitamos escribir
una serie de de código que nos
permite mostrarlos en el
navegador.
<head>
<meta charset="utf-8859-1">
<title>caracteres especiales en HTML</title>
</head>
<body>
<h1 align="center">Caracteres especiales Html</h1>
<hr>
página
niño
pingüino
P&aacute;gina ni&ntilde;a
&aacute; &eacute;
&iacute; &oacute;
&uacute; &Aacute;
&Eacute; &Iacute;
&Oacute; &Uacute;
&ntilde; &Ntilde;
&uuml; &Uuml;
&#191; &#151;
&copy;
<hr>
La entidad de caracter
"non breaking space" &nbsp; para
separar las palabras.

&nbsp; Son espacios en blanco que


vamos a incluir en el contenido, ya
que si pones los espacios en blanco
directamente el navegador los
agrupará como si fuese uno solo.
&nbsp;
<body>
....
<hr>
Cig&uuml;e&ntilde;a&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
p&aacute;gina&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;ni&ntilde;o
El código ASCII

Sigla en inglés de American


Standard Code for Information
Interchange
(Código Estadounidense Estándar
para el Intercambio de Información
Caracteres ASCII extendidos imprimibles :
ascii 128 = Ç ( Letra C cedilla mayúscula )
ascii 129 = ü ( Letra u minúscula con diéresis )
ascii 130 = é ( Letra e minúscula con acento agudo )
ascii 131 = â ( Letra a minúscula con acento circunflejo )
ascii 132 = ä ( Letra a minúscula con diéresis )
ascii 133 = à ( Letra a minúscula con acento grave )
ascii 134 = å ( Letra a minúscula con anillo )
ascii 135 = ç ( Letra c cedilla minúscula )
ascii 136 = ê ( Letra e minúscula con acento circunflejo )
ascii 137 = ë ( Letra e minúscula con diéresis )
ascii 138 = è ( Letra e minúscula con acento grave )
ascii 139 = ï ( Letra i minúscula con diéresis )
ascii 140 = î ( Letra i minúscula con acento circunflejo )
ascii 141 = ì ( Letra i minúscula con acento grave )
ascii 142 = Ä ( Letra A mayúscula con diéresis )
<head>
<meta charset="utf-8">
<title>caracteres especiales en HTML</title>
</head>
<body>
<h1 align="center">Caracteres especiales Html</h1>
<hr>
página
niño
pingüino
UTF-8
UTF-8 (Unicode Transformation
Format-8) es un formato de
codificación de caracteres, en el
que cada caracter es representado
por un octeto (8 bits). También
existen UTF-16 y UTF-32. La ventaja
de UTF-8 respecto a estos otros es
que es compatible con versiones
anteriores de ASCII.
UTF-8859-1
Es una norma de la ISO que define
la codificación del alfabeto latino.
Incluyendo los diacríticos (como
letras acentuadas, ñ, ç), y letras
especiales (como ß, Ø). Estos son
necesarios para la escritura de las
siguientes lenguas originarias de
Europa occidental:
UTF-8 vs iso8859-1
En conclusión, la generación de
caracteres extraños se debe a la
utilización de distintas
codificaciones al mismo tiempo. Es
decir, si usamos ISO-8859-1 para
nuestra web o diseño de plantilla
html, todo debería estar en ISO. No
puede haber mezcla de algunas
partes en ISO y otras en UTF-8.
Párrafos
<p> </p>
aquí va el parrafo

Así el texto quedará dentro de un


párrafo, separado por un espacio
en blanco por encima y uno por
abajo.
Nuevo documento

<head>
<meta charset="utf-8859-1">
<title>P&aacute;rrafos en html</title>
</head>
<body>
<h1 align="center">P&aacute;rrafos en html</h1>
<hr>
<h2> Falso.....</h2>
<hr>
<p>G data recomienda..........</p>
<p>..........</p>
<p>.........</p>
<p>..........</p>

</body>
<h2> .....</h2> <!--titutar-->
<p>.........</p>
<h2> .....</h2> <!--titutar-->
<p>..........</p>
<h2> .....</h2> <!--titutar-->
<p>.........</p>

</body>
Párrafos
El texto del párrafo lo puedes alinear
utilizando la etiqueta align utilizando
los parámetros:
“center” (para alinearlo al centro),
“right” (para alinearlo a la derecha),
“left” (para alinearlo a la izquierda) y
“justify” (para justificar el texto).
Párrafos
<p align="center">Este texto se alineará al centro</p>

<p align="right">Este texto se alineará a la derecha</p>

<p align="left">Este texto se alineará a la izquierda</p>


Fuentes
Tipos de letra

<font face=”fuente”></font
face>
Podemos cambiar el tipo de fuente
con esta etiqueta.
Fuentes
<p><font face=”arial”>Este texto se alineará al centro
</font face></p>

<p><font face=”courier”>Este texto se alineará al


centro</font face></p>

<p><font face=”arial, helvetica, sansserif”>Este texto se


alineará al centro</font face></p>
Atributos
<p><font face=”arial”>Este texto se alineará al centro
</font face></p>

<p align=”center”>Este texto se alineará al centro</p>

https://developer.mozilla.org/es/docs/Web/HTML/
Atributos
Listas
Conocemos como listas a las viñetas.
Estas son 3:

• Listas desordenadas <ul></ul>


• Listas ordenadas <ol></ol>
• Listas de definición <dl></dl>
Listas
Unordered List <ul></ul>
Ordered List <ol></ol>
• List Item <li></li>

Definition List <dl></dl>


• Definition term <dt></dt>
• Definition description <dd></dd>
Listas Desordenadas
<head>
<meta charset="utf-8">
<title>Listas en HTML</title>
</head>
<body>
<h1 align="center">Listas en Html</h1>
<hr>
<h2 align="center">Listas desordenadas</h2>
<hr>
Listas Desordenadas
Desordenadas o Unordered
<ul>
<li>Aves</li>
<li>Mamiferos</li>
<li>Plantas</li>
<li>Peces</li>
<li>Otros</li>
</ul>
La más usada inclusive para crear
menús
<ul type=”square”>
<li>Aves</li>
<li>Mamiferos</li>
<li>Plantas</li>
<li>Peces</li>
<li>Otros</li>
</ul>

disc, square, circle, none


Listas Desordenadas
Las listas anidadas son las que están
dentro de otras:
• Aves
• Granja
• Patos
• Gansos
• Domésticas
<ul type=”square”>
<li>Aves</li>
<ul type=”circle”>
<li>Granja</li>
<li>Domésticas</li>
</ul>
<li>Mamiferos</li>
<li>Plantas</li>
<li>Peces</li>
<li>Otros</li>
</ul>
Listas Ordenadas
Ordenadas u Ordered
Sus características son:

1. Rock
2. Pop
3. Salsa
4. Hip hop
5. Otros
Listas Ordenadas
Los estilos de estas son:

Números romanos:
“i”
“I”
Letras:
“A”
“a”
Números
“1”
Listas Ordenadas
<hr>
<h2 align="center">Listas ordenadas</h2>
<hr>
<ol>
<li>Rock</li>
<li>Pop</li>
<li>Salsa</li>
<li>Hip hop</li>
<li>Otros</li>
</ol>
Listas Ordenadas
<ol type=”I”>
<li>Rock</li>
<li>Pop</li>
<li>Salsa</li>
<li>Hip hop</li>
<li>Otros</li>
</ol>
Listas de definición
<dl> representa una lista descriptiva.
El elemento encierra una lista de grupos
de términos especificados con el uso de
la etiqueta <dt> y de descripciones con
la etiqueta <dd>.
Algunos usos comunes para este
elemento son implementar un glosario o
para desplegar metadatos
Listas de definición
<hr>
<h2 align=”center”>Listas de definición
en Html</h2>
<hr>
Listas de definición
<dl>
<dt>Html</dt>
<dd>Lenguaje de marcado</dd>
<dt>Css</dt>
<dd>Hojas de estilo</dd>
<dt>Java Script</dt>
<dd>Lenguaje de programación</dd>
</dl>
Creación de un menú
<title>menu con HTML y CSS</title>
<style type="text/css">
.menu li{
width:180px;
padding: 8px 0px;
background-color: #336699;
float: left;
border:solid 1px #ffffff;
color: #ffffff;
Creación de un menú
text-align: center;
font-family: verdana;
}
ul{
list-style: none;
}
</style>
</head>
Creación de un menú
<body>
<h1 align="center">Menú en html
y css</h1>
<hr>
<ul class="menu">
<li>Inicio</li>
<li>Noticias</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
Imagenes
Para incluir imágenes en el
contenido de una página
utilizaremos la etiqueta <img>, que
es una etiqueta muy sencilla, que
dispone de varios atributos para
modificar como se verá la imagen.
Los atributos src y alt son
obligatorios.
Imagenes
La etiqueta soporta los formatos
de imagen:

• JPG
• GIF
• SVG
• PNG
Imagenes
Para utilizar la etiqueta es
necesario también manejar los
archivos y la ruta de los mismos.
La organización de los archivos es
sumamente importante.
Imagenes

sitio_cinco/imagenes/iconos
sitio_cinco/multimedia
sitio_cinco/paginas
Imagenes
Todos los archivos de imagenes,
iconos y animaciones, deben tener
nombres cortos (teniendo en
cuanta las reglas que debemos
seguir al nombrar los archivos) y
también que sean faciles de
recordar.
Imagenes
• Vamos a crear 3 imagenes de
200x100px y guardarla en
imagenes/
• Crear 3 iconos 100x100px y
guardarlos en imagenes/iconos
Todo debe ser optimizado para
web.
Imagenes
• Vamos a elegir 4 animaciones en
gif y guardarla en multimedia/
• Copiaremos 3 imagenes grandes
en paginas/
• Copiaremos 3 imagenes en ../(la
raiz de la página)
<head>
<meta charset="utf-8">
<title>Imágenes en Html</title>
</head>
<body>
<h1 align="center">Imágenes en Html</h1>
<hr>
<img src="ruta.jpg" alt="descripción">
<img src="ruta.png" alt="descripción">
<img src="ruta.gif" alt="descripción">
<hr>

VR
Debajo agregaremos las imagenes dentro de la
carpeta imagenes.

<img src="imagenes/ruta.jpg" alt="descripción">


<img src="imagenes/ruta.png" alt="descripción">
<img src="imagenes/ruta.gif" alt="descripción">
<hr>

VR
Debajo agregaremos las iconos dentro de la
carpeta imagenes/iconos

<h2 align="center">Iconos en Html</h2>


<hr>
<img src="imagenes/iconos/ruta.gif"
alt="descripción">
<img src="imagenes/iconos/ruta.gif"
alt="descripción">
<img src="imagenes/iconos/ruta.gif"
alt="descripción">
<hr>

VR
Debajo agregaremos las animaciones dentro de
la carpeta multimedia/
<h2 align="center">Animaciones en Html</h2>
<hr>
<img src="multimedia/ruta.gif"
alt="descripción">
<img src="multimedia/ruta.gif"
alt="descripción">
<img src="multimedia/ruta.gif"
alt="descripción">
<img src="multimedia/ruta.gif"
alt="descripción"><hr>

VR
Ahora agregaremos las Imagenes grandes no
optimizadas para web.

<h2 align="center">imagenes grandes no debo


hacerlo</h2>
<hr>
<img src="....
<img src="....
<img src="....

VR
La etiqueta img funciona del siguiente modo:

<img src="ruta” alt=”descripción”


width=”ancho” height=”alto”>

El ancho y el alto deben estar detallados en


porcentaje % o pixeles px

prueben con varios anchos en % o px.


img1

img2
img/img2/img1.jpg

img img3 pag1

Sitio pag pag2

multi multi1 pag3

multi2

multi3 multi/multi3/multi.gif
img1

img2

img img3 pag1

Sitio pag pag2

multi multi1 pag3

multi2 pag/pag2/pag2.html

multi3
../../img/img1.jpg
Para complicar las cosas vamos a
guardar como (save as) dentro de
la carpeta multimedia/prueba.html

VR
Para salir de una carpeta usaremos
el elemento en la ruta de:

../
para subir de nivel una vez, para
dos, serán dos veces.
VR
Enlaces
En el HTML los enlaces se marcan
con la etiqueta <a></a> y el atributo
principal es href="" donde se
escribe la ubicación del archivo de
destino que puede estar en la
misma carpeta que el archivo que lo
está llamando, en otra carpeta del
mismo sitio o en otro sitio web.
Enlaces

sitio_enlaces/imagenes
sitio_enlaces/multimedia
sitio_enlaces/paginas
Enlaces

Descomprimidos el archivo
bolivia.zip en la carpeta:
sitio_enlaces/imagenes
Y guardarlo con el nombre la_paz.html.
Así creamos 9 archivos de cada Dpto.
dentro de la carpeta paginas.
Enlaces

Renombrar el contenido de las


imagenes a nombres cortos y
claros. ejem.:

bolivia.jpg
<head>
<meta charset="utf-8">
<title>La Paz</title>
</head>
<body>
<h1 align="center">La Paz</h1>
<hr>
<img src="lapaz.jpg" alt=”la_paz”
width=”400px”>

VR
<head>
<meta charset="utf-8">
<title>Bolivia</title>
</head>
<body>
<h1 align="center">Bolivia</h1>
<hr>
<table border=”1” aling=”center”>
<tr>
<td>
<a href="paginas/lapaz.html">La
Paz</a><br>
<a.......
<a.......
</td>
<td>
<img src="imagenes/bolivia.jpg"
alt="bolivia" width="400px">
</td>
</tr>
</table>

Lo guardamos con el nombre


bolivia.html en la raiz ../ de la carpeta
Usando la misma lógica ¿cómo
hacemos un enlace para volver a la
página de inicio?
agregamos una línea de código más.
<head>
<meta charset="utf-8">
<title>La Paz</title>
</head>
<body>
<h1 align="center">La Paz</h1>
<hr>
<img src="lapaz.jpg" alt=”la_paz”
width=”400px”>
<a href="../bolivia.html">Volver</a><br>
TAREA:
Hacer lo mismo que hicimos con bolivia
pero esta vez lo haremos un tema a
elección.

Debe tener al menos 12 enlaces.


cada página enlazada debe tener un
botón volver y una pagina principal,
todas las páginas deben tener
imagenes.
Enlaces
Externos
Se usa la misma etiqueta solo con
diferente dirección o ruta.
Los enlaces externos se refieren a
que los recursos que se vinculan no
están dentro de la página pueden
ser correos o direcciones web.
Enlaces
Externos
sitio_seis/imagenes
sitio_seis/multimedia
sitio_seis/paginas
<head>
<meta charset="utf-8">
<title>Bolivia</title>
</head>
<body>
<hr>
<a href="paginas/lapaz.html"> La
Paz<br></a>
<a href="paginas/cochabamba.html">
Cochabamba<br></a>
<a href="paginas/santa_cruz.html">Santa
Cruz<br></a>
<hr>

VR
<h2>Enlaces remotos</h2>
<a href="http://www.atenea.edu.bo">
www.atenea.edu.bo</a>
<br>
<a href="http://www.google.com.bo">
www.google.com.bo</a>
<br>
<a href="http://www.facebook.com">
www.facebook.com</a><br>
<a href="http://www.facebook.com">
<img src="imagenes/icon_facebook.png">
</a>
<hr>
<h2>Enlaces a correo electronico en html</h2>
<a href="mailto:[email protected]">
[email protected]</a><br>

¿Que sucede si quiero abrir el enlace


en una pestaña del navegador?

VR
Agregaremos un atributo.
<a href="http://www.atenea.edu.bo"
target="new">www.atenea.edu.bo</a>
<br>
<a href="http://www.google.com.bo"
target="_blank">www.google.com.bo</a>
<br>
Esto nos ayuda a que el usuario no
cierre la página, si accede a un
enlace externo.
<head>
<meta charset="utf-8">
<title>Bolivia</title>
</head>
<body bgcolor=”#fab”><!-- es #ffaabb-->
<hr>
<a href="paginas/lapaz.html"> La
Paz<br></a>
<a href="paginas/cochabamba.html">
Cochabamba<br></a>
<a href="paginas/santa_cruz.html">Santa
Cruz<br></a>
<hr>
Usamos la abreviación de colores
hexadecimales cuando son pares.

#fab #ffaabb

#ab5 #aabb55

#f01 #ff0011

#f?? #f99135
Recapitulando...
• HTML es un lenguaje de etiquetas.
• Cada etiqueta contiene atributos
que le dan caracteristicas especiales
• Es importante entender la
sisntaxis del lenguaje para así
agruparlo por tabulaciones.
Tablas
Las tablas se usan para mostrar
datos de manera tabular.
Las tablas no son para hacer diseño,
pero si para estructurar contenido.

Deben también tener en cuenta que no


todos los navegadores reconocen al 100% el
lenguaje HTML5 por lo tanto habrá que tener
cuidado al poner las etiquetas.
Existen muchos elementos pero los
mas importantes son:
La etiqueta tabla se escribe de la
siguiente manera.
<table> <!--etiqueta tabla-->
<tr><!--Table row o fila -->
<td><!--Table data o datos -->
</td>
</tr>
</table>
<head>
<meta charset="utf-8">
<title>Mi horario</title>
</head>
<body>
<table>
<tr>
<td>Lunes</td>
<td>Martes</td>
<td>Miercoles</td>
<td>.....
</td>
</tr>

VR
<table border=”1”>
<tr>
<td>Lunes</td>
<td>Martes</td>
<td>Miercoles</td>
<td>.....
</td>
</tr>

VR
<tr>
<td>HTML</td>
<td>CSS</td>
<td>HTML</td>
<td>CSS</td>
<td>Javascript</td>

</tr>

VR
Para poner los datos como
información de cabecera se cambia
td por th table head.

<tr>
<th>Lunes</th>
<th>Martes</th>
<th>Miercoles</th>
<th>.....</th>
</tr>

VR
Si usamos encabezados de este
modo lo mejor es agruparlo
mediante <thead>
<thead>
<tr>
<th>Lunes</th>
<th>Martes</th>
<th>.....</th>
</tr>
</thead>
VR
Y si usamos etiquetas <thead>
deberemos usar etiquetas <tbody>
<thead>
<tr>
<th>Lunes</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
</tr>
</tbody>
VR
Si necesitamos una fila de
conclusiones usaremos la etiqueta
<tfoot>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
</tr>
</tbody>
<tfoot>
</tfoot>
<tr>
<td>CCW</td>
<td>CCW</td>
<td>CCW</td>
<td>CCW</td>
<td>CCW</td>
</tr>

VR
<tr>
<td>PHP</td>
<td>C++</td>
<td>PHP</td>
<td>C++</td>
<td>XML</td>
</tr>

VR
<td>CCW</td>
<td>CCW</td>
</tr>
<tr>
<td>PHP</td>
<td>C++</td>
<td>PHP</td>
<td>CCW</td>
</tr>
<tr>
<td>Receso</td>
</tr>
<tr>
<td>PHP</td>

VR
<td>JavaScript</td>
</tr>
<tr>
<td colspan=”2”>Receso</td>
</tr>
<tr>
<td>CCW</td>

VR
<td>JavaScript</td>
</tr>
<tr>
<td colspan=”2”>Receso</td>
</tr>
<tr>
<td>CCW</td>

VR
Borramos 2 celdas de CCW

VR
<td>HTML</td>
<td rowspan=”2”>CSS</td>
<td>HTML</td>
<td rowspan=”2”>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td colspan=”5”>Receso</td>
</tr>
<tr>
<td>CCW</td>
<td>CCW</td>
<td>CCW</td>
VR
Si queremos poner un titular a
nuesta tabla.

<h1 align="center">Mi horario</h1>

Pero las tablas tienen un elemento.

VR
<head>
<meta charset="utf-8">
<title>Mi horario</title>
</head>
<body>
<table>
<caption>Mi horario</caption>
<thead>
<tr>
<td>Lunes</td>
<td>Martes</td>
<td>Miercoles</td>
<td>.........</td>
</tr>
VR
Formularios
Los formularios HTML son uno de los
puntos principales de interacción
entre un usuario y un sitio web o
aplicación.
Permiten a los usuarios enviar infor-
mación a un sitio web.
Formularios

La mayor parte de las veces se envía


información a un servidor web, pero
la pagina web también puede inter-
ceptarla para usarla por su lado.
Formularios
Es importante validar siempre los
formularios, para no ser victimas de
bots,
Sólo se puede hacer en javascript
pero html tiene herramientas bási-
cas.
Crear la carpeta

sitio_formularios/
<head>
<meta charset="utf-8">
<title>Formularios en Html</title>
</head>
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>

</form>
Formularios
La etiqueta <form> tienen muchos
atributos entre los mas importantes
son:
action=”archivo.php”
method=”get o post”
que determinan a donde y como se
enviarán los datos.
Formularios
La caracteristica principal de los for-
mularios son los “CAMPOS” para lo
que tenemos la etiqueta <input>
Será importante validar los datos
para que cuando solicitemos infor-
mación de numeros no nos envíe
letras.
Formularios
Existen varios tipos de input el más
común es de texto. y eso lo modifi-
camos a traves de los atributos.
type=”text”
Este es el más común por lo que si
no lo usas el navegador lo interpre-
tará como texto.
<head>
<meta charset="utf-8">
<title>Formularios en Html</title>
</head>
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>
<input>
<button>Enviar</button>
</form>

VR
Formularios
Para poner un titulo al campo nece-
sitamos usar la etiqueta <label>
dentro de label tenemos el atributo
por defecto
for=”nombre”
que nos permite vincular el campo
con el título.
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>
<label for=”nombre”>ingrese su nombre
</label>
<input id=”nombre”>
</form>

VR
Formularios
La etiqueta id le asigna un nombre a
la etiqueta.
Pero también podemos usar una
manera de organizar el código.
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>
<label>ingrese su nombre
<input>
</label>
</form>

VR
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>
<label>ingrese su nombre
<input name=”nombre”>
</label>
<label>ingrese su contraseña
<input name=”password”>
</label>
</form>

VR
<body>
<h1 align=”center”>Formularios en Html</h1>
<hr>
<form>
<label>ingrese su nombre
<input name=”nombre”>
</label>
<label>ingrese su contraseña
<input type=”password”
name=”password” >
</label>
</form>

VR
Formularios
Los campos de formularios se crean
en linéa, para solucionar eso pode-
mos usar las etiquetas <br> o <div>
Las etiquetas <div> </div> solo or-
ganizan el código.
<form>
<div>
<label>ingrese su nombre
<input name=”nombre”>
</label>
</div>
<div>
<label>ingrese su contraseña
<input type=”password”
name=”password” >
</label>
</div>
<button>Enviar</button>
</form>
VR
<div>
<label>ingrese su contraseña
<input type=”password”
name=”password” >
</label>
</div>
<input type=”submit”>
</form>

El atributo type=”submit” es especi-


ficamente para crear el botón de de
envío de información.
VR
<div>
<label>ingrese su contraseña
<input type=”password”
name=”password” >
</label>
</div>
<input type=”submit” value=”Inicio de
sesion”>
</form>

También podemos agregar el atribu-


to value=”nombre” para darle un
valor o cambiarlo de nombre.
VR
<div>
<label>ingrese su contraseña
<input type=”password”
name=”password” value=“contraseña”>
</label>
</div>
<input type=”submit” value=”Inicio de
sesion”>
</form>

VR
Formularios
Existen muchos más atributos algu-
nos de ellos son:
<input type=”email”....
<input type=”date”....
<input type=”number”....
<input type=”radio”....
<div>
<label>ingrese su correo
<input type=”email”
name=”email” value=“correo electrónico”>
</label>
</div>
<input type=”submit” value=”Inicio de
sesion”>
</form>

VR
<div>
<label>ingrese su fecha de nacimiento
<input type=”date” name=”fecha” >
</label>
</div>
<input type=”submit” value=”Inicio de
sesion”>
</form>

VR
<div>
<label>ingrese Edad
<input type=”number” name=”edad” >
</label>
</div>
<input type=”submit” value=”Inicio de
sesion”>
</form>

VR
<div>
<label>Elija su Género
<input type=”radio” name=”genero”
value=“varon”>Varón
<input type=”radio” name=”genero”
value=“mujer”>Mujer
<input type=”radio” name=”genero”
value=“otro”>Otro
</label>
</div>

VR
<div>
<label>tus pasatiempos
<input type=”checkbox” name=”pasatiempos”
>Deportes</label>
<input type=”checkbox” name=”pasatiempos”
>Películas</label>
<label>
<input type=”checkbox” name=”pasatiempos”
>Música
</label>
</div>

VR
Formularios
La etiqueta <fieldset> </fieldset>
nos permita agrupar los campos soli-
citados, importantes para mejorar la
experiencia de usuario.
La etiqueta <legend>nombre</le-
gend> le pondrá un nombre al
grupo.
Formularios
La etiqueta <fieldset> </fieldset>
nos permita agrupar los campos soli-
citados, importantes para mejorar la
experiencia de usuario.
La etiqueta <legend>nombre</le-
gend> le pondrá un nombre al
grupo.
<div>
<fieldset>
<legend>Tu pais</legend>
<label for=”pais”>elije tu pais</label>
<select name=”pais” id=“pais”>
<option value=”Bolivia”>Bolivia</option>
<option
value=”argentina”>Argentina</option>
<option value=”brasil”>Brasil</option>
</select>

VR
<div>
<fieldset>
<legend>Describete</legend>
<textarea name=”mensaje” placeholder=“escribe
el mensaje”>
</fieldset>
</div>
<input type=”submit” value=”Inicio de sesion”>

VR
Formularios
El atributo placeholder=”” nos per-
mite ver un mensaje el campo y se
borra cuando escribimos.
El atributo required no nos permite
continuar sin el dato.
El atributo size=”Nº caracteres” no
nos permite continuar sin el dato.

También podría gustarte