El documento describe los pasos para crear una página web básica con una estructura de cabecera, cuerpo y pie utilizando HTML. Explica cómo agregar un ID a cada elemento div para identificarlos de manera única y muestra un ejemplo de código HTML que implementa esta estructura básica con una cabecera, menú, contenido principal y pie de página.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia. Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia. Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Instrucciones del procedimiento para la oferta y la gestión conjunta del proceso de admisión a los centros públicos de primer ciclo de educación infantil de Pamplona para el curso 2024-2025.
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...JAVIER SOLIS NOYOLA
El Mtro. JAVIER SOLIS NOYOLA crea y desarrolla el “ROMPECABEZAS DE ECUACIONES DE 1ER. GRADO OLIMPIADA DE PARÍS 2024”. Esta actividad de aprendizaje propone retos de cálculo algebraico mediante ecuaciones de 1er. grado, y viso-espacialidad, lo cual dará la oportunidad de formar un rompecabezas. La intención didáctica de esta actividad de aprendizaje es, promover los pensamientos lógicos (convergente) y creativo (divergente o lateral), mediante modelos mentales de: atención, memoria, imaginación, percepción (Geométrica y conceptual), perspicacia, inferencia, viso-espacialidad. Esta actividad de aprendizaje es de enfoques lúdico y transversal, ya que integra diversas áreas del conocimiento, entre ellas: matemático, artístico, lenguaje, historia, y las neurociencias.
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
2. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
ATRIBUTO ID HTML
En primer lugar crearemos una página de inicio o portada que contendrá lo siguiente: una cabecera, un
menú, un cuerpo y un pié. No entraremos a explicar los temas de diseño ni las hojas de estilos que se
suelen usar en páginas web ya que ahora trataremos de centrarnos en cuestiones básicas de HTML sin
complicarlo con otros aspectos añadidos.
Lo que primero vamos a hacer es crear una estructura básica de página HTML. Respecto a los
conocimientos que ya teníamos, añadimos la novedad de que a cada contenedor div le vamos a poner
un nombre único (que no puede repetirse en otro contenedor) usando esta expresión. <div
id="AquíElNombreDelContenedor"> … elementos … </div>
Básicamente, la estructura ya la tenemos montada, ahora lo necesario es ir definiendo cada uno de los
elementos por separado y posteriormente unificarlos todos.
<html>
<head>
<meta charset="utf-8">
<title>Portal básico – CIC Santa
Tecla</title>
</head>
<body>
<div id="page">
<div id="header"><!-- Aquí vendría el
código de la cabecera --></div>
<div id="wrapper">
<div id="menu"><!-- Aquí vendría el
código del menú --></div>
<div id="body"><!-- Aquí vendría el
código del cuerpo --></div>
</div>
<div id="footer"><!-- Aquí vendría el
código del pié --></div>
</div>
</body>
</html>
3. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
CABECERA
<div id="header">
Portal Web Personal de Programación
</div>
Continúa
en la
siguiente
página
4. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
En nuestro caso la cabecera será tan simple que solo mostrará un texto. Puedes intentar complicarla
añadiendo algunos botones, imágenes, campos de texto, o lo que creas oportuno.ç
PIE
El pie también es similar en complejidad a la cabecera. En este caso, sólo mostraremos el copyright
como texto. Se puede complicar añadiéndole imágenes, links, etc.
MENÚ Y CONTENIDO PRINCIPAL (CUERPO)
En este caso en concreto, el menú que vamos a crear irá en un contenedor div y el contenido principal
en otro contenedor div. Para ello tendremos que usar tantas etiquetas div como resulten necesarias.
<div id="footer">
Copyright 2015 By “Escribe tu nombre”
</div>
Continúa
en la
siguiente
página
5. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
<!-- contenedor
-->
<div id="wrapper">
<!-- menu -->
<div id="menu">
<div>Menú</div>
<hr style="color:red; background-color:red; width:50%;"
/>
<ul>
<li><a href="#">Portada</a></li>
<li>
<a href="http://www.cic.edu.sv"> CIC Santa Tecla
</a>
</li>
</ul>
</div>
<!-- fin menu -->
<!-- cuerpo -->
<div id="body">
<p>
Al hablar de fundamentos de programación nos
referimos a aquellos conocimientos básicos que
nos permitirán desenvolvernos sin excesivo
número de tropiezos. Veamos a qué tipo de
tropiezos nos referimos utilizando un símil de
transporte. El conductor (programador) dispone
de un coche
(el ordenador) y desea trasladarse
</p>
</div>
<!-- fin cuerpo -->
</div>
<!-- fin
contenedor -->
6. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
La expresión <a href="#">Portada</a> significa que hacemos un link a #. El símbolo # es obvio que no es
una URL, lo que significa es “link a la misma página que estamos visualizando”.
El código resultante de todo el proceso, más algunos detalles básicos de diseño (no te preocupes si no
entiendes algunos elementos definidos con style, lo importante es comprender el código y estructura
HTML), sería el que se muestra a continuación. Abre un editor como Notepad++, escríbelo y guárdalo
con un nombre como ejemplo1.html. A continuación, visualiza el resultado en tunavegador.
<html>
<head>
<meta charset="utf-8">
<title>Portal Web Personal</title>
</head>
<body>
<div id="page" style="width: 980px; text-align:
center; margin: auto; border: 2px solid gray;">
<div
id="header">
Portal Web Personal de Programación
</div>
<!--
contenedor
-->
<br />
<br />
<br />
<div
id="wrapper
">
<!-- menu -->
<div id="menu">
<div>Menú</div>
<hr style="color:red; background-color:red;
width:50%;" />
<ul>
<li><a href="#">Portada</a></li>
<li>
<a
href="http://www.aprenderaprogramar.com">aprende
raprogramar.com
</a>
7. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
1.Realiza los siguientes ejercicios en Bloc de Notas
siguiendo las indicaciones correspondientes a cada
ejercicio.
2.Copia el código de cada ejercicio en tu cuaderno.
3.Elabora un cuestionario (Pregunta y Respuesta) en tu
cuaderno de 10 preguntas sobre este material;
posteriormente pon en práctica lo aprendido.
4.Cuando hayas realizados todos lo anterior debes hacer
lo siguiente: Crea una página Web que contenga lo
siguiente el tema de la pagina es libre.
a) Una cabecera con una imagen, un texto h1, y otra
imagen que a su vez sea un link.
b) Un cuerpo con un menú que contenga 5 items, una
imagen y dos párrafos.
c) Un pie que contenga una imagen, un copyright y
un texto que sea a su vez un link.
</div>
<!-- fin contenedor -->
<br /> <br /> <br />
<div id="footer">
Copyright 2015-2070 By “Escribe tu nombre”
</div>
</div>
</body>
</html>
