Utiliza Google desde este blog

Google En la WebEn el Blog
kostenlose uhren relojes web
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

jueves, 21 de febrero de 2019

Manejo de imágenes - Taller 3 de Lenguaje HTML

Curso 11.4 - Clase 5 - Primer período


Consulte el siguiente material para aprender el funcionamiento de nuevos atributos para manipular las imágenes en una página web. Realice los apuntes respectivos en su cuaderno:
https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
Cree una carpeta Taller 4 y guarde en ella 3 imágenes descargadas de internet a su gusto, de un tamaño aproximado por dimensiones a 1000 pixeles. Cambie el nombre a las imágenes de ser necesario, para facilitar su trabajo.

Inicie un código en HTML5 desde cero, en el bloc de notas, para el tema Imágenes con HTML, que lleve un título principal como este, algo similar en el <title> para el texto de la pestaña y un subtítulo de segundo nivel que diga: Texto alternativo.

Aquí sería bueno guardar y verificar el funcionamiento del código. No olvide digitar al final las etiquetas de cierre de cuerpo y cierre de código de una vez. El nombre del archivo será Taller 3 de HTML (no olvide digitar también la extensión html).

Trabaje una de las imágenes para ejemplificar el uso del atributo "alt" así: con un subtítulos de tercer nivel que diga: Imagen normal (e inserte la imagen sin el atributo "alt") y luego otro subtítulo de tercer nivel que diga: Ejemplo de imagen con texto alterno (e inserte la imagen con el uso del atributo "alt" pero digitando mal el nombre de la imagen, para que la imagen no se cargue, pero si muestre el texto alternativo asignado - como lo explica la lectura que se realizó al comienzo de la clase).

Ahora trabaje otro subtítulo de segundo nivel que diga: Atributos Height y width para las dimesiones de la imagen.

Trabaje la segunda de las imágenes para utilizar y ejemplificar el uso de los atributos "height" y "width". Use subtítulos de tercer nivel que digan: Imagen normal (e inserte la imagen sin modificar su tamaño), Primer cambio de tamaño (inserte la misma imagen, pero disminuyendo sus dimensiones a la mitad), Segundo cambio de tamaño (la misma imagen, pero reduciendo nuevamente sus dimensiones a la mitad). Debajo de cada imagen debe ir sus dimensiones en pixeles, Ancho y Alto.

Ejemplo: si la imagen es de dimensiones 1300 x 100, la primera imagen reducida quedaría en 650 x 500 y la tercera imagen quedaría en 325 x 250.

El siguiente subtítulo de segundo nivel dirá: Uso del atributo Title para imagen.

Trabaje la tercera imagen de tal forma que quede un texto que la identifique sobre ella. Ese texto se hace visible en la página cuando mueve el cursor de ratón sobre la imagen.

Para finalizar marque su trabajo con nombre completo y curso, como se ha venido haciendo en los talleres anteriores.

Cuando termine y verifique que todo funciona bien, envíe al correo de la asignatura, la página web creada y las 3 imágenes adjuntas.

Continuando con la introducción a HTML5 - Taller 2 Lenguaje HTML

Curso 11-4 - Clase 4 - Primer período

- Manejo de su Google Drive - criterios de evaluación, para esta responsabilidad.
- Explicación de cómo editar una página web, no perder la relación código-página y verificar continuamente el funcionamiento del código que se está digitando.

- Cómo descargar correctamente una imagen, formatos, opciones de Preferencias, opciones de Herramientas en el buscador de imágenes.
- Dimensiones y Resolución de una imagen, de un monitor.
- Aclaración del uso de la etiqueta <meta charset=”formato_codificación_caracteres”>.
- Aclaración sobre las etiquetas <hr size=4 noshade>, <img scr=”nombre_imagen.ext”>.


Actividad en clase
  • Recuerde estar verificando el funcionamiento del código continuamente.
  • Abrir la página creada en la clase anterior y guardarla nuevamente con el nombre Taller 2 de HTML (no olvide incluir la extensión).
  • Realice los arreglos necesarios para que quede como la siguiente (consulte en internet si le hace falta alguna etiqueta). Utilice atributos de <hr> como usted desee:


(Clic sobre la imagen para verla mejor)

  • Envíe el trabajo al correo informaticajdsm@gmail.com con el asunto: Taller 2 de HTML. Recuerde adjuntar la página y la imagen utilizada.
Próxima clase evaluación y se recoge el cuaderno.

domingo, 1 de octubre de 2017

Iniciando con HTML5

Estructura básica


<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>       
    </body>
</html>

El archivo para el código se puede crear en un editor de texto básico como el Bloc de notas de Windows y se debe guardar con el nombre index.html en la carpeta del proyecto.


Las etiquetas de HTML5 han sido actualizadas, desde el 2012 aproximadamente, para que identifiquen más las secciones que debe tener una página web de acuerdo con el tipo de información que se muestra y para que sea más responsiva.


Fuentes de información para este artículo:
Página web de Microsoft donde recomiendan una aplicación para facilitar el manejo del proyecto. La herramienta es WebMatrix, la cual se estará analizando más adelante.
https://blogs.msdn.microsoft.com/esmsdn/2011/11/07/cmo-crear-mi-primera-pgina-en-html5-y-css3/

jueves, 19 de mayo de 2016

Comenzando con CSS

Definición: CSS, Hojas de Estilo en Cascada (Cascading Style Sheets), es es la descripción del estilo y formato que va a tener un documento, en nuestro caso, una página web.

Link del material para trabajar este taller:
https://drive.google.com/open?id=0B95SiN_fVOsZcFhtUWJrUnNYcUU


El diseño final de la página web en HTML quedará aproximadamente así, gracias al estilo asignado con CSS:


Algunos recursos recomendados:

Colores en CSS
http://librosweb.es/libro/css/capitulo_3/colores.html

Página web que presenta una lista de las fuentes seguras para web

http://www.genbetadev.com/desarrollo-web/introduccion-a-las-propiedades-de-las-fuentes-en-css3