Este documento presenta una introducción a la programación para la web. Explica la estructura básica de un documento HTML, incluyendo las etiquetas <html>, <head>, <body>, <title> y <meta>. También cubre elementos como <link> y <script> para incorporar hojas de estilo y scripts. El documento proporciona ejemplos de código HTML bien estructurado de acuerdo con las mejores prácticas actuales.
Las capacidades sociomotrices son las que hacen posible que el individuo se pueda desenvolver socialmente de acuerdo a la actuación motriz propias de cada edad evolutiva del individuo; Martha Castañer las clasifica en: Interacción y comunicación, introyección, emoción y expresión, creatividad e imaginación.
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfsandradianelly
Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestra y el maestro Fase 3Un libro sin recetas, para la maestr
6. “ HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya
eres parte de la vieja generación de desarrolladores. Eso tendría que tenerte
preocupado.”
PROGRAMACIÓN PARA WEB
7. DISEÑO Y DESARROLLO DE PÁGINA
WEB
HTML
Significa Hypertext Markup Language (Lenguaje de marcas e hipertexto) y su estructura
básica es la que se muestra a continuación.
Los documentos HTML se encuentran estrictamente organizados. Cada parte del
documento está diferenciada, declarada y determinada por etiquetas específicas. En
esta primera parte de la asignatura, vamos a ver cómo construir la estructura global de
un documento HTML y los nuevos elementos semánticos incorporados en HTML5.
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto
en HTML5 es extremadamente sencillo:
Usamos el elemento Doctype, precedido de la apertura del signo de admiración (!) y
esta combinación encerrada entre los signos de mayor y menor que (< >).
Quedando la primera etiqueta de la siguiente manera: <!DOCTYPE>
Sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador
es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible,
o ignoradas en caso contrario.
8. Etiqueta
Etiqueta de apertura o inicio del formato:
La etiqueta anterior está compuesta por el símbolo “<” seguidamente y sin espacios en
blanco el nombre de la etiqueta y a continuación el símbolo “>“.
Etiqueta de cierre o final del formato
La etiqueta de cierre está compuesta por el símbolo “<” seguidamente y sin espacios
en blanco, el símbolo “/“, el nombre de la etiqueta y por último el símbolo “>“.
PROGRAMACIÓN PARA WEB
9. Luego de declarar el tipo de documento, debemos comenzar a construir la estructura
HTML.
El siguiente elemento envolverá al resto del código que se desarrollara en HTML, en
cualquiera de sus versiones: <html>
HTML usa un lenguaje de etiquetas para construir páginas web. Estas etiquetas HTML
son palabras clave y atributos rodeados, como lo mencionamos anteriormente, de los
signos mayor y menor (por ejemplo, <html lang="es">). En este caso, html es la
palabra clave y lang es el atributo con el valor es. La mayoría de las etiquetas HTML se
utilizan en pares, una etiqueta de apertura y una de cierre, y el contenido se declara
entre ellas. En nuestro ejemplo, <html lang="es"> indica el comienzo del código HTML
y </html> indica el final. Compare las etiquetas de apertura y cierre y verá que la de
cierre se distingue por una barra invertida antes de la palabra clave (por ejemplo,
</html>). El resto de nuestro código será insertado entre estas dos etiquetas:
<html> ... </html>
PROGRAMACIÓN PARA WEB
10. <!doctype>
<html lang = “es”>
.
.
.
</html>
Continuando con la construcción de la estructura básica de un documento HTML. El
código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos
secciones principales. Al igual que en versiones previas de HTML, la primera sección es
la cabecera (<head>) y la segunda el cuerpo () <body>. El siguiente paso, por lo tanto,
será crear estas dos secciones en el código.
El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos
estructurales tiene una etiqueta de apertura y una de cierre:
<head>
……
</head>
PROGRAMACIÓN PARA WEB
11. <!doctype>
<html lang = “es”>
<head>
……
</head>
</html>
Dentro de las etiquetas <head> definiremos el título de nuestra página web,
declararemos el set de caracteres correspondiente, proveeremos información general
acerca del documento e incorporaremos los archivos externos con estilos, códigos
Javascript o incluso imágenes necesarias para generar la página en la pantalla.
Excepto por el título y algunos íconos, el resto de la información incorporada en el
documento entre estas etiquetas es invisible para el usuario.
PROGRAMACIÓN PARA WEB
12. La siguiente gran sección que es parte principal de la organización de un documento
HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es
especificado entre etiquetas <body>.
<!doctype>
<html lang = “es”>
<head>
……
</head>
<body>
……
</body>
</html>
De esta manera hemos construido la estructura básica de un documento HTML en la
versión 5 o lo que se conoce como HTML5.
PROGRAMACIÓN PARA WEB
13. <!doctype>
<html lang = “es”>
<head>
<meta charset = “iso-8859-1”>
o
<meta charset = “utf-8”>
……
</head>
<body>
……
</body>
</html>
Es momento de construir la cabecera del documento. <meta> es la etiqueta que define
el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta que
especifica cómo el texto será presentado en pantalla:
PROGRAMACIÓN PARA WEB
14. <!doctype>
<html lang = “es”>
<head>
<meta charset = “iso-8859-1” />
<meta name=”description” content=”Ejemplo
de HTML5” />
<meta name=”keywords” content=”HTML5,
CSS3, Javascript” />
</head>
<body>
……
</body>
</html>
Podemos agregar otras etiquetas <meta> como description o keywords para definir
otros aspectos de la página web.
PROGRAMACIÓN PARA WEB
16. <!Doctype html>
<html>
<head>
<meta =“UTF-8”>
<meta name=“application-name” content=“Ejercicios y Práctica” />
<meta name=“author” content=“Rafael Diaz” />
<meta name=“description” content=“Práctica y Ejercicios html” />
<meta name=“keywords” content=“ejercicios, practicas, html” />
</head>
<body>
</body>
<html>
Práctica
“Comidas de Mí Tierra”
“Comida, Interior, sabores”
“Carlos Bustamante”
“Encontraremos las comidas típicas de las Regiones de nuestra campiña”
PROGRAMACIÓN PARA WEB
17. DISEÑO Y DESARROLLO DE PÁGINA
WEB
Name, Content
Estos atributos permiten definir pares de datos, es decir un nombre de valor con su
respectivo valor o contenido. El atributo name sirve para establecer el nombre del
dato que se quiere definir, mientras que content sirve para establecer el valor o
contenido que se le quiere dar al dato. Entre los datos que se suelen utilizar están
application-name, author,description, generator y keywords.
18. Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
información general sobre el documento, pero esta información no es mostrada en la
ventana del navegador, es solo importante para motore s de búsqueda y dispositivos
que necesitan hacer una vista previa del documento u obtener un sumario de la
información que contiene.
La etiqueta <title>, como siempre, simplemente especifica el título del documento, El
texto entre las etiquetas <title> es el título del documento que estamos creando.
Normalmente este texto es mostrado en la barra superior de la ventana del navegador.
<title>Este texto es el título del documento</title>
PROGRAMACIÓN PARA WEB
19. <!doctype>
<html lang = “es”>
<head>
<meta charset = “iso-8859-1” />
<meta name=”description” content=”Ejemplo
de HTML5” />
<meta name=”keywords” content=”HTML5,
CSS3, Javascript” />
<title>Esto es el título del documento</title>
</head>
<body>
……
</body>
</html>
PROGRAMACIÓN PARA WEB
21. Otro importante elemento que va dentro de la cabecera del documento es <link>. Este
elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde
archivos externos. Uno de los usos más comunes para <link> es la incorporación de
archivos con estilos CSS.
<link rel=”stylesheet” type = “Text/CSS” href=”css/misestilos.css”>
<script> </script>
PROGRAMACIÓN PARA WEB
22. <!doctype>
<html lang = “es”>
<head>
<meta charset = “iso-8859-1” />
<meta name=”description” content=”Ejemplo
de HTML5” />
<meta name=”keywords” content=”HTML5,
CSS3, Javascript” />
<title>Este texto es el título del
documento</title>
<link rel=”stylesheet” type = “Text/css”
href=”misestilos.css”>
</head>
<body>
……
</body>
</html>
PROGRAMACIÓN PARA WEB
