Archivo de la etiqueta: texto

Formato de texto en CSS


En esta práctica vamos a configurar un archivo HTML utilizando un estilo establecido en un fichero CSS. Queremos mostrar una receta con el aspecto de texto que aparece en esta imagen.

act5p82

La idea es no utilizar etiquetas HTML para modificar el aspecto del texto, sino, únicamente la etiqueta <span> junto con clases para el formato del texto configuradas en el archivo CSS.

Así, una posible solución para el archivo HTML y el fichero CSS se aprecia en las imágenes de abajo.

htmlact5p82

cssact5p82

Anuncios

CSS y HTML: Propiedades de formato de texto


En esta práctica vamos a trabajar con propiedades del formato de texto en archivos CSS.

Así, usaremos diferentes propiedades, modificando sus valores en cuatro selectores de clase distintos, para visualizar su resultado.

El archivo CSS podría tener el siguiente código:

cssact1p75

Las propiedades usadas han sido color (color del texto), background-color (color del fondo), text-align (alineación del texto), text-decoration (subrayado, tachado, …), text-transform (transformación en mayúsculas, minúsculas, …), font-size (tamaño de fuente), font-family (tipo de letra), font-style (cursiva), font-weight (negrita), width (anchura) y height (altura).

El archivo HTML para esta actividad es el que se ve a continuación.

htmlact1p75

No hay que olvidar la última línea con la etiqueta link, para que el archivo HTML rescate la configuración establecida en el archivo CSS.

El resultado obtenido con el archivo HTML y la hoja de estilo CSS configuradas anteriormente es el que se muestra abajo.

act1p75

 

Listas anidadas y edición de texto en HTML


Vamos a realizar una práctica para presentar una lista anidada con una edición de texto variada en código HTML.

En primer lugar queremos mostrar en una página web la siguiente lista:

listaanidada

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<h1> Encabezado 1.

<ol> Lista ordenada.

<ul> Lista desordenada.

<u> Subrayado.

<em> Cursiva.

<strong> Negrita.

<sub> Subíndice.

<sup> Superíndice.

<li> Elemento de la lista.

<meta charset =”UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es muy importante presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Además, debemos cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

htmllistaanidada

 

Primeros pasos en el proyecto EJE


“Empresa Joven Europea” (EJE) es un programa educativo promovido en Andalucía conjuntamente por la Consejería de Economía, Innovación, Ciencia y Empresa y la Consejería de Educación. Se dirige a alumnos y alumnas de 3º y 4º curso de Educación Secundaria (de 14 años en adelante), Bachillerato, ciclos de Formación Profesional y PCPI, quienes aprenden a crear y gestionar sus propias empresas cooperativas, así como a comercializar sus productos.

En primer lugar vamos a entrar en el espacio reservado a cada una de nuestras cooperativas en la web de Generación EJE. Para ello vais a necesitar un usuario y contraseña que os proporcionaré. http://www.generacion-e.es/acceso/

Ya hemos realizado una propuesta de los estatutos de cada una de nuestras cooperativas. Cada grupo deberá revisar y corregir errores de sus estatutos y convertir el documento a PDF. Una vez realizado esto, se tendrá que subir a la web el estatuto definitivo. http://www.generacion-e.es/

Además, cada cooperativa deberá seleccionar el logotipo a partir de las propuestas de cada componente. Una vez seleccionado usaremos el programa OpenOffice Draw para digitalizar la imagen de la empresa. Este archivo debe ser subido en formato GIF o JPG con un peso máximo de 250KB.

Finalmente, otro grupo de trabajo debe redactar un texto de presentación para la cooperativa. Este texto se introducirá directamente en el formulario de publicación.

Para cualquier duda sobre la publicación de entregables consulta este documento: 120903_tutorial_de_entregables-1