Tema 2 HTML y CSS

HTML y CSS

- Estructura básica de la web

Anatomía de un documento HTML

Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera.

<!DOCTYPE html>

<html>

<head>

<title>Mi pagina de prueba</title>

</head>

<body>

<p>Contenido visible

</body>

</html>

Tienes:

<!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.

<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (root element).

<head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.

<meta charset="utf-8"> — <meta>. Este elemento establece el juego de caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.

<title></title> — el elemento <title> establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.

<body></body> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

Anatomía de un elemento HTML

Explora este párrafo en mayor profundidad.

Las partes principales del elemento son:

La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.

La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.

El contenido: este es el contenido del elemento, que en este caso es sólo texto.

El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.

Los elementos pueden también tener atributos, que se ven así:

Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En este caso, el atributo class permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.

Un atributo debe tener siempre:

-Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).

-El nombre del atributo, seguido por un signo de igual (=).

-Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.

https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics

- Elementos básicos

Título

<title> </title> Etiqueta usada para definir el título de la página web.

Ejemplo:

<title> Mi primer titulo</title>

Que es la etiqueta title y para qué sirve

https://www.eqqos.com/que-es-la-etiqueta-title/

Párrafo

<p> Define una parte que debe mostrarse como un párrafo.

Atributos

Title texto

Style reglas de estilo

Id ID

Class lista de clases separadas por espacios

Dir uno de los siguientes:"ltr" o "rtl"

Lang código de idioma

Ejemplo:

<p>Mi primer párrafo</p>

Imágenes

La etiqueta img representa a una imagen, lo cual es un recurso externo que puede ser incrustado en el cuerpo de un documento. La ubicación de dicho recurso externo debe especificarse en el atributo src.

Atributos

Alt: Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un formato no soportado o si la imagen aún no se ha descargado.

Src: La URL de la imagen. Este atributo es obligatorio para el elemento <img>.

Height: La altura de la imagen en píxeles.

Width: El ancho de la imagen en píxeles.

Ejemplos:

Hipervínculos

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace (URL).

Atributos:

Href: Contiene una URL o un fragmento de URL al cual apunta el enlace.

Ejemplo:

<a href="https://www.google.com/">Buscador</a>

Audio y Videos

El listado de los atributos de audio HTML5 que son casi los mismos que los de vídeo en HTML5:

La etiqueta <audio> dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.

Src, indica la URL del archivo de audio. Este atributo puede ser reemplazado por el elemento <source> y su propio atributo src para declarar varias fuentes con diferentes formatos. En el siguiente ejemplo el navegador leerá la etiqueta <source> y decidirá qué archivo reproducir de acuerdo a los formatos que soporte.

Controls, muestra los controles de audio que nos ofrece el navegador. Cuando se incluye el atributo el navegador activará su propia interfaz de control del audio. De esta forma el usuario podrá reproducir el audio, pararlo, etc.

Autoplay, al incluir este atributo, el navegador reproduce el audio automáticamente.

Loop, al incluir este atributo, el navegador reproduce nuevamente el audio cuando llega a su fin.

Preload, puede recibir tres valores:

-none: el audio no se cachea.

-metadata: recomienda al navegador que capture información acerca de la fuente (duración).

-auto: descarga el archivo lo más pronto posible.

Ejemplos de etiquetas de audio:

<audio src="sound.mp3" controls></audio> Muestra los controles.

Ejemplos de etiquetas de video:

Tu navegador no implementa el elemento <code>video</code>

</video>

----------------------------------------------------------------------------------------------

Tu navegador no implementa el elemento <code>video</code>.

</video>

- Estilos básicos

Css

CSS son las siglas de “Cascading Style Sheets” (hojas de estilo en cascada). CSS es un lenguaje para la composición y estructuración de páginas web (HTML o XML). Este lenguaje contiene elementos de codificación y se compone de estas “Cascading Style Sheets” que también se llaman archivos CSS (.css).

https://www.atinternet.com/es/glosario/css/

Anatomía de una regla CSS

Observa el código CSS de arriba, un poco más a detalle:

La estructura completa es llamada regla predeterminada (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:

Selector: El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos <p> ). Para dar estilo a un elemento diferente, solo cambia el selector.

Declaración: Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.

Propiedades: Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento <p> ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.

Valor de la propiedad: A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de red).

Nota las otras partes importantes de la sintaxis:

-Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).

-Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.

-Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

p {

color: red;

width: 500px;

border: 1px solid black;

}

Seleccionar varios elementos

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:

p,li,h1 {

color: red;

}

Vincular los estilos CSS a páginas HTML

Ya sabes cómo crear reglas CSS, ¿pero cómo se aplican a una página HTML?

Para ello tienes básicamente 3 opciones:

1. Hojas de estilo CSS en linea

La primera opción consiste en usar el atributo “style” en un elemento HTML tal como se puede ver aquí:

<html>

<head>

<title>Estilo en linea de etiqueta"</title>

</head>

<body>

<p style="color:red; font-size: 24px; font-family: sans-serif;">Estilo en la etiqueta</p>

</body>

</html>

En este caso, no hay selector puesto que no hay elemento que seleccionar. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión. Este tipo de reglas tienen mayor prioridad de todas las reglas.

2. Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento <style> dentro de esta etiqueta que, a su vez, se encontraría dentro del elemento <head> de la página HTML.

<html>

<head>

<style type = "text/css">

p {

color:red;

font-size: 24px;

font-family: Arial,Helvetica,sans-serif;

}

</style>

</head>

<body>

<p>Aplicando estilo desde la etiqueta de encabezado</p>

</body>

</html>

3. Hojas de estilo CSS externas

La última opción es la más usada y consiste en crear uno o varios ficheros con extensión “.css” en los cuales se declaran las reglas CSS. La manera de vincular estas reglas a una página HTML consiste en referencia el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera. En este caso, la declaración también se incluye dentro del elemento <head> y tiene el siguiente aspecto:

<html>

<head>

<title>Estilo en linea de etiqueta"</title>

</head>

<body>

<p>aplicando estilo en la etiqueta</p>

</body>

</html>

Estilo contenido en el archivo estilo.css

p {

color:red;

font-size: 24px;

font-family: Arial,Helvetica,sans-serif;

}

- Maquetación web

Tablas

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.

Ejemplo:

<table>

<tr>

<td> Nombre</td>

<td>Promedio</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

div

<div></div>

La etiqueta <div> viene de división, prácticamente funciona y sirve de contenedor de bloque, es decir puede contener uno o varios elementos HTML dentro de ella, es bastante utilizada para agrupar varios elementos que luego serán apuntados con CSS con la finalidad de dar un estilo adecuado a dicho grupo, o también puede servir para organizar mejor nuestra página web.

https://desarrolladoresweb.org/html/etiqueta-div-y-span-en-html/

Atributos

Title: Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".

Id: Le da un nombre al elemento que lo diferencia de todos los demás del documento.

Class: Asigna nombres de clases al elemento. Por defecto, clases CSS.

Style: Permite especificar información de estilo. Por defecto, estilos CSS.

https://developer.mozilla.org/es/docs/Web/HTML/Element/div

Ejemplo

Se trata de tres bloques construidos con la etiqueta <div>, claramente diferenciados por el color de fondo de cada bloque

<p> Sección de Encabezado en rojo</p><br>

<p> Sección de Contenido en azul</p>

</div>

</div><br>

<p> Sección de Pie en verde</p>

</div>

Cuando usar ID y cuando usar Class

La regla más importante a la hora de elegir entre clases e ID’s es que un ID sólo debe ser usado una vez en el documento. Es decir, una vez que asignamos un ID a un elemento no se puede volver a asignar a otro elemento de la misma página. ¡Ojo! Cuando hablamos de página nos referimos a la página que se está cargando actualmente en el navegador, no al sitio completo. Las clases, en cambio, las podemos usar las veces que queramos dentro del mismo documento. Así es que, si hay una serie de propiedades comunes entre una serie de elementos de la misma página lo apropiado será usar clases. Si dentro de esos elementos hay uno que queremos destacar de una manera especial una única vez en la página, entonces usaremos un ID.

En nuestro pequeño ejemplo, usaríamos clases para los párrafos “destacados” porque lo más probable es que haya más de un párrafo que queramos destacar y así podemos controlar la apariencia de todos los párrafos destacados desde un único lugar. En cambio, también lo más probable es que sólo haya un párrafo que sea el resumen de todos los demás. En este caso usaríamos un ID, y nuestro código quedaría así:

<p id="resumen">Este es el resumen del texto y quiero que vaya en itálica.</p>

<p>Esto sería un párrafo de texto normal.</p>

<p>Esto sería otro párrafo de texto normal.</p>

<p>Un nuevo párrafo de texto normal.</p>

<p class="destacado">Aquí va texto que quiero destacar.</p>

<p>Esto sería otro párrafo de texto normal.</p>

<p>Más texto normal.</p>

<p class="destacado">Aquí iría más texto que quiero destacar.</p>

<p>Esto sería otro párrafo de texto normal.</p>

Y empleando clases sería:

body {color:#000;}

p {color:#333;}

#resumen {color:green;font-style:italic;}

.destacado {color:red;}

Y se vería así:

https://www.campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx

Ejemplos adicionales:

<div class="anuncio">Aquí irá un anuncio</div>

<div id="articulo">Aquí irá el contenido de texto del artículo</div>

<div class="anuncio">Aquí irá un anuncio</div>

</div>

-------------------------------------------------------------------------------------------

<div class="anuncio primero">Aquí irá un anuncio</div>

<div id="articulo">Aquí irá el contenido de texto del artículo</div>

<div class="anuncio ultimo">Aquí irá un anuncio</div>

</div>

Maquetación básica

En HTML, la maquetación web básicamente se trata de proveer de estilo a los elementos de nuestra página web para que estos se vean lo más atractivo posible según sean los objetivos, esto implica un proceso creativo, en el que se definen colores, tamaños, márgenes, rellenos, bordes, hasta efectos especiales y mucho más.

Propiedades principales:

width: Ancho de un elemento.

height: Alto de un elemento.

vertical-align: Alineamiento vertical dentro de un elemento.

margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).

padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento.

float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.

Ejemplos:

Empleando la etiqueta <div>, se crean tres secciones encabezado, contenido y pie, con color de fondo rojo, verde y azul respectivamente.

<br><br><p> Encabezado en rojo </p><br><br>

</div>

<p> Contenido en verde </p>

</div>

</div>

Empleando la etiqueta <div>, se crean tres secciones menu, cabecera y contenido, con color de fondo verde, rojo y azul respectivamente.

<br><br><p> Encabezado en verde</p><br><br>

</div>

<br><br><p> Encabezado en rojo </p><br><br>

</div>

<br><br><p> Encabezado en azul</p><br><br>

</div>

Listas no ordenadas (Etiquetas)

<ul> : Una etiqueta <ul> contiene a todas los elementos de la lista y dentro de ella irán los atributos que afectan a toda la lista en bloque.

<li> : Los elementos de la lista propiamente dichos, se especifican en una etiqueta <li>, de tal manera que cada elemento es independiente de otro elemento.

Fuentes y texto (Propiedades)

font-family: Tipo de letra

font-size: Tamaño de letra

font-weight: Peso (normal, negrita, …)

font-style: Estilo (normal, cursiva, …)

text-decoration: “Decoraciones” como subrayado, tachado, etc.

text-align: Alineación del texto (izquierda, derecha, etc.)

text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.

Color y fondos (Propiedades)

color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.

background-color: Color del fondo del elemento.

background-image: Permite especificar una imagen de fondo.

background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.

box-shadow: Crear un efecto de sombra para un elemento.

Listas (Propiedades)

list-style-image: Usar la imagen especificada como viñeta para la lista.

list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

Bordes (Propiedades)

border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)

border-color: Color del borde.

border-style: Diferentes estilos para el borde (sólido, puntos, etc.)

border-radius: Permite crear esquinas redondeadas para un elemento.

Display: Establece el tipo de caja generada por un elemento. (Valor block).

Hover: La pseudo clase :hover se utiliza para seleccionar y dar estilo al pasar con el ratón por encima de un elemento, y se utiliza normalmente para enlaces <a> pero puede ser utilizada también para otros elementos.

Margin: Establece la anchura de algunos o todos los márgenes de los elementos. Propiedades relacionadas: margin-right, margin-left, margin-top y margin-bottom.

Padding: Establece la anchura de algunas o todas las zonas de relleno de los elementos. Propiedades relacionadas: padding-top, padding-right, padding-bottom y padding-left.

Menú Vertical

HTML:

<ul>

<li><a href="#menuv">Inicio</a></li>

<li><a href="#menuv">Comentarios</a></li>

<li><a href="#menuv">Noticias</a></li>

<li><a href="#menuv">Contacto</a></li>

<li><a href="#menuv">Acerca de nosotros</a></li>

</ul>

</div>

CSS:

<head>

#menuv {

border: 1px solid #ACCFE8;

border-width: 1px 1px 0 1px;

width: 150px;

font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;

}

#menuv ul, li {

list-style-type: none;

}

#menuv ul {

margin: 0;

padding: 0;

}

#menuv li {

border-bottom: 1px solid #ACCFE8;

}

#menuv a {

text-decoration: none;

color: red;

background: blue;

display: block;

padding: 3px 6px;

width: 138px;

}

#menuv a:hover {

background: green;

}

</style>

</head>

https://www.buayacorp.com/archivos/menus-simples-con-css-y-listas/

- Diseño y usabilidad

Usabilidad Web

¿Qué es y por qué es tan importante?

La usabilidad es una característica que mide qué tan intuitiva y fácil de usar es una página web para el usuario común.

La Usabilidad Web Mide 3 grandes aspectos:

¿Por qué es importante la usabilidad?

La usabilidad es una característica fundamental para que sus clientes visiten, aprovechen y regresen nuevamente a su sitio, incrementando el éxito de su estrategia en Internet.

Un portal con usabilidad puede:

-Incrementar visitas de forma sustancial (típicamente suben más de 100% tras el rediseño del sitio de acuerdo a estudios diversos sobre el tema)

-Reducir tiempos y costos para el usuario y para la organización

-Transparentar la información (al poder realmente encontrarla y consultarla)

-Agilizar la distribución y manejo preciso de información

La usabilidad sería la medida en que un hipertexto puede ser utilizado por los usuarios para explotar al máximo todas las posibilidades del hipertexto. La usabilidad permitirá que el usuario logre unos objetivos concretos con efectividad, eficiencia y satisfacción en un determinado contexto de uso.

Reglas sobre usabilidad

-En Internet el usuario es el que manda.

-En Internet la calidad se basa en la rapidez y la fiabilidad.

-Seguridad.

-La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.

-Si quieres hacer una página decente, simplifica, reduce, optimiza.

-Pon las conclusiones al principio.

-No hagas perder el tiempo a la gente con cosas que no necesitan.

-Buenos contenidos

Áreas de oportunidad mediante la usabilidad

-Uso inadecuado de PDFs

-Minimización de número de “clicks” para encontrar un trámite ó servicio

-Tipografía correcta en un sitio web

-Facilidad de impresión y captura de agendas y eventos

-Animación y gráficas vs. información

-¿La arquitectura de la información es correcta?

-Disponer de un buscador cuando el sitio tenga demasiadas páginas internas

-Formularios bien estructurados

-Paleta de colores y contraste adecuados para fondo y texto

-Menús de navegación intuitivos

-No abusar de las ventanas emergentes (pop-ups)

-Tener un mapa del sitio (sitemap)

-No abusar de las animaciones y otros elementos que puedan distraer al usuario

-Mantener un diseño coherente en toda la Web

-Adaptable a smartphones

-Disponer de una página personalizada 404 (no encontrado)

-Diseño acorde a la temática del contenido

-¿La experiencia en general es satisfactoria?

https://disenowebakus.net/usabilidad-web.php

Márgenes posiciones de los elementos.

Media Queries

Una media query es una parte fundamental de CSS3 que te permite renderizar el contenido para adaptarlo a diferentes factores como el tamaño de la pantalla o la resolución.

Empieza por el diseño para smartphone

Si eliges un enfoque de diseño de primero para móvil, con una sola columna y tamaños de fuente más pequeños como base, no es necesario incluir puntos de ruptura móviles – a menos que quieras optimizar el diseño para modelos específicos.

¿Qué es el Diseño Web Responsivo?

El diseño responsivo es un enfoque del diseño web que hace que el contenido de la web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos. Por ejemplo, tu contenido podría estar separado en diferentes columnas en las pantallas de escritorio, porque son lo suficientemente anchas para acomodar ese diseño. Si separas el contenido en varias columnas en un dispositivo móvil, será difícil que los usuarios lo lean e interactúen con él. El diseño responsivo permite ofrecer múltiples diseños separados de tu contenido y diseño a diferentes dispositivos dependiendo del tamaño de la pantalla.

https://kinsta.com/es/blog/diseno-de-paginas-web-sensibles/

Ejemplo diseño adaptativo

<head>

@media (min-width: 400px) {

#menu{ height:20%; width:100%; }

#cabecera{ height:40%; width:100%; }

#contenido{ height:40%; width:100%; }

}

@media (min-width: 600px) {

#menu{ height:100%; width:30%; float: left;}

#cabecera{ height:50%; width:70%; float: right;}

#contenido{ height:50%; width:70%; float: right;}

}

@media (min-width: 800px) {

#menu{ height:20%; width:100%; float: left;}

#cabecera{ height:80%; width:50%; float: right;}

#contenido{ height:80%; width:50%; float: right;}

}

</style>

</head>

<body>

<br><br><p> Encabezado en verde</p><br><br>

</div>

<br><br><p> Encabezado en rojo </p><br><br>

</div>

<br><br><p> Encabezado en azul</p><br><br>

</div>

</body>

La sintaxis y la estructura en html5

https://webdesdecero.com/tutorial-html5-la-sintaxis-y-la-estructura/

Listado de etiquetas HTML

https://carontestudio.com/blog/listado-de-etiquetas-html/

Buscar este blog

Páginas web 2021

Tema 2 HTML y CSS

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tema 1 Introducción al Diseño Web

Tema 3 Diseño de página web usando software de aplicación