Ir al contenido principal

ESTILOS EN HTML


Aplicar Estilo en HTML es cambiar la forma en que, por  defecto, se muestran los elementos en el navegador web.

Existen tres métodos para aplicar Estilo en HTML:

PRIMERO: Inline

Aplicar el Estilo en la misma línea de código: Estilo en línea o Inline; emplea el atributo style.

Estilo por defecto, sin cambios:

Se ha aplicado Estilo Inline a través del atributo style. Note que se modifica la etiqueta de apertura del elemento al que se va a aplicar Estilo. Recuerde que el contenido de ese elemento se verá afectado.

SEGUNDO: Internal

Definir el Estilo con style no como atributo sino como elemento: Estilo interno o Internal; emplea, insisto, el elemento style, y se define desde la sección de cabecera - head.

Estilo por defecto, sin cambios:

Observe con atención que las etiquetas de apertura de los elementos h1 y p no han sido modificadas; sin embargo su apariencia no es la usual. Se ha definido el estilo desde la sección de cabecera (elemento head) con una codificación "diferente". En este caso, todas las veces que el elemento h1 sea empleado se observará de color azul porque así se ha definido el estilo en la cabecera; de igual modo, toda vez que se emplee el elemento p se apreciará de color rojo, con un tamaño de fuente de 20 puntos, además de la tipografía itálica. Todo esto se ha definido una sola vez desde la sección de cabecera (head) del documento html.


COMBINANDO EL ELEMENTO SPAN Y EL ATRIBUTO CLASS


Observe que:
  • azul, rojo e ita, definidos en la sección de cabecera por el "programador" (usted), indican el estilo que será aplicado como valor del atributo class.
  • El contenido del elemento span es el afectado por el estilo asignado a través de azul, rojo e ita.
  • El carácter punto (.) que antecede a azul, rojo e ita no puede omitirse por haber sido definido por usted (programador).

TERCERO: External

El estilo External se codifica como CSS en un archivo externo que se vincula al documento HTML en la sección de encabezado:


El elemento link vincula el documento HTML con el archivo externo, que debe guardarse con la extensión .css

La relación que establece el atributo rel entre el documento HTML y el archivo externo es hoja de estilo.


Afiance sus conocimientos con este recurso interactivo.



EJERCICIOS PRE EVALUACIÓN

EJERCICIO 1: Emplee el estilo Interno para codificar el siguiente documento HTML:

EJERCICIO 2: Emplee el estilo Interno para codificar el siguiente documento HTML:



FUENTES:




Comentarios

Publicar un comentario

Entradas más populares de este blog

Tablas en Word

EJERCICIOS TABLA 1 Esta sencilla tabla permite recolectar unos pocos datos de la familia. TABLA 2 Coloque en esta tabla las notas definitivas de 5 asignaturas para los dos bimestres cursados. Calcule el promedio. Note que el ancho de la tabla es menor al margen de la página. TABLA 3 Fruver Don Chucho. TABLA 4 Horario. A diferencia del ejercicio desarrollado en clase, ténganse en cuenta las medidas: Filas: 10 Columnas: 7 Ancho de columna CLASE: 1,7 cm Ancho de columna HORA: 2,5 cm Ancho de columnas DÍAS: 2,3 cm Alto de fila 1: 1,5 cm Alto de fila DESCANSO y SALIDA: 1 cm Alto de filas: 0,7 cm TABLA 5 Valores. La medida clave es de 2 cm. Si tiene preguntas sobre el proceso, por favor escriba a continuación un comentario. No olvide identificarse.
Publicar un comentario
Leer más

Hipervínculos en PowerPoint

¿Qué es un hipervínculo? Se llama hipervínculo o hiperenlace a un tipo de elemento presente en los documentos electrónicos (páginas Web, correos electrónicos, documentos digitales de texto...) que hace alusión a otro documento diferente, a una parte específica del mismo documento o a otro recurso de cualquier naturaleza, como búsquedas online, mecanismos de compra, suscripciones, entre otros. Los hipervínculos consisten, pues, en la posibilidad de “saltar” de un texto a otro, de una información a otra, siguiendo el hilo de asociación de los intereses del usuario, más que una lógica lineal y sucesiva como ocurre en la cultura tradicional. Este tipo de asociaciones son fundamentales en el funcionamiento de la World Wide Web, ya que un hiperenlace, junto a un protocolo de acceso a una red establecida de datos, permite “visitar” los distintos recursos disponibles en línea, ya sea para visualizarlos o descargarlos al computador. Todo hipervínculo cuenta con dos extremos: un ancl
6 comentarios
Leer más

LA INFOGRAFÍA

Una imagen vale más que mil palabras... https://co.pinterest.com/pin/17099673570929344/ https://neuromarketing.la/2016/03/infografia-como-reacciona-el-cerebro-cuando-deseamos-un-producto/ https://farmaciamoraalmonte.wordpress.com/2014/08/28/5-infografias-sobre-alimentacion/ http://revista.dgt.es/es/multimedia/infografia/2014/1008-Como-circular-en-glorietas.shtml#.Xqmx7J5KjIU https://www.paho.org/es/documentos/infografia-covid-19-cubra-su-tos Un buen video tiene sus ventajas... Una buena explicación ayuda a comprender... Una infografía es una imagen explicativa que combina texto, ilustración y diseño, cuyo propósito es sintetizar información de cierta complejidad e importancia, de una manera directa y rápida. Lea el artículo completo haciendo clic aquí. Y para  quienes deseen profundizar... Sin embargo, descarga nuestra guía oficial haciendo clic aquí. SOLO PARA RECORDAR... SOLO PARA AFIANZAR Recuerden el objet
2 comentarios
Leer más