Conceptos HTML, CSS

Conceptos
Básicos
De frontend
HTML (HyperText Markup Language)
Es un lenguaje que nos permite definir la
estructura de las páginas Web, se compone de
<html>
elementos como párrafos, encabezados, <head>
1
<title>...</title>
imágenes y vínculos (links), entre muchos otros.
</html>
La mayoría de etiquetas necesitan una etiqueta

de cierre que es muy similar a una etiqueta pero
HTML
tiene un slash (/) antes de la palabra. Por
ejemplo, para mostrar un párrafo se utilizan la
etiqueta y la etiqueta de cierre .
Diferencias entre
Versiones de HTML
HTML 2: Es considerado la primera versión del HTML, el cual no soportaba tablas y donde la
declaración explícita de los elementos body, html y head es opcional.
HTML 3.2: W3C (World Wide Web Consortium) incorporó los últimos avances de las páginas web
2 como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0: Llegan las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts
en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y
mejoras en los formularios.
HTML 4.01: Actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
HTML 5: Es la quinta revisión importante del lenguaje básico HTML.

Novedades que trae
HTML5
HTML5 define una sintaxis que es compatible con HTML4 y XHTML 1.0. Por tanto, un salto de
línea se puede escribir como (HTML4) o (XHTML 1.0).
3 Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta <meta>:
<meta charset=”UTF-8″>
aunque todavía es posible utilizar el método tradicional:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
Se simplica el DOCTYPE:
<!DOCTYPE html>
HTML5 permite incluir elementos de SVG y MathML.
4 Se introducen nuevos elementos, como: section, article, aside, header, footer, etc.
Se introducen nuevos atributos, como: media, charset, autofocus, placeholder, etc.
Algunos elementos cambian, como: a, b, i, menu, etc.
Algunos atributos cambian, como: type, name, summary, etc.
Algunos elementos desaparecen, como: basefont, big, center, etc.
Algunos atributos desaparecen, como: align, background, bgcolor, etc.
Mejora de las API, como: getElementsByClassName() y innerHTML.

Estándar W3C
W3C maneja diferentes estándares de acuerdo al tipo de desarrollo a realizar.
Para aplicaciones web:
Es fundamental conservar la estructura Webfonts: La utilización de fuentes

semántica de cada elemento, por tipográficas sin la instalación de las mismas
5 accesibilidad y legibilidad: por ejemplo un link

dentro de un texto largo siempre deberá
en el sistema operativo.
agregarse dentro de una etiqueta p, la cual Actualmente los íconos si son de tipo flat,
conformará un párrafo de texto. pueden ser utilizados como fuente
tipográfica creada a partir de elementos
Para la reutilización de estilos, se deberá SVG, para disminutir el consumo de
hacer uso de archivos externos para que se recursos.
compartan las reglas definidas como globales https://www.w3.org/standards/webdesign/htmlcss
para la aplicación.
Aprendiendo
6 CSS
(Cascading Style Sheets)
¿Cómo funcionan las hojas
de estilo en cascada?
Las hojas de estilo CSS son un conjunto reglas que enumeran en un archivo .css y que describen
el aspecto que deben tener los diferentes elementos HTML de una página.
7 Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es
necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas
dos:
“Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles
respetivamente.”
“El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y
un color gris oscuro.”
Reglas, selectores y propiedades
En el ejemplo anterior tenemos un total de 3
Regla
reglas, cada una se compone de un selector que
indican a qué elementos HTML aplica la regla
que es el texto que precede a las llaves de
8 apertura y cierre de la regla. En la primera regla,

el selector es “h1, h2”, en la segunda “h2” y en la
tercera “p”.
Cada regla se compone a su vez de propiedades

que especifican qué exactamente se hará con
Selector esos los elementos HTML a los que aplica.
Propiedades
Herencia, sobreescritura y
conflictos de estilos
El nombre de hojas de estilo en “cascada” no es
casual, expresa que los estilos que especifican
con reglas se pueden heredar de una manera
9
jerárquica. En esta última regla aplica el principio de
“especificidad”. En principio, se plantearía
La etiqueta <body> que es la que envuelve el un conflicto entre la regla general de
contenido de cualquier página web tenga un tipo <body> con lo que dice la regla de ,
de letra “Arial”. Esto no tendría mucho sentido si pero se resuelve fácilmente puesto que se
no fuera porque gracias a la capacidad de aplica la regla más específica y referirse a
herencia de las reglas de este modo por defecto un párrafo es más específico que referirse
cualquier elemento hijo como un título o un a “los elementos hijos que pueden dentro
párrafo va a “heredar” ese estilo. de <body>”.
Propiedades básicas
que deberías conocer
Maquetación básica
width: Ancho de un elemento.
height: Alto de un elemento.
10 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.
Fuentes y texto
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.)
11 text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada

palabra en mayúsculas.
Color y fondos
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
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
12 lista.
Bordes
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.
Posicionamiento
position: static; Es la posición por defecto en la del navegador
position: relative; Nos permite mover el elemento a una ubicación relativa a su posición
original utilizando las propiedades: left, top, right, bottom, y se utiliza más para posicionar
elementos de forma absoluta dentro del elemento.
13 position: absolute; Nos permite ubicar un elemento a una ubicación relativa al ancestro
más cercano que esté posicionado con position: relative, o a la ventana del navegador en
su defecto, y se utilizan las propiedades top, left, right y bottom para ubicar el elemento.
position: fixed; Esta propiedad nos permite ubicar un elemento de manera fija
relativamente a la ventana del navegador. No importa si se utilizan las barras de
desplazamiento, el elemento va a permanecer fijo en su posición.
Frameworks (css)
Lo importante a la hora de decidir que framework usar no debe ser la cantidad de elementos, ni
tampoco el diseño base de los elementos. Todo lo contrario. Debemos sentirnos cómodos con
la librería, entender como funciona y sentir que es de utilidad, que nos ahorra tiempo. Es lo más
importante, encontrar el vínculo que nos hace avanzar y mejorar en nuestro trabajo. Y no todos
los frameworks lo consiguen, hay una framework para cada tipo de desarrollador Front-End.
14
Ventajas de usar un framework(css)
Ahorrar tiempo: Escribir una y otra vez el mismo código es repetitivo y no te lleva a ninguna
parte. Es uno de los principios que comentábamos en nuestro listado de buenas prácticas
para escribir CSS. Con un framework tendrás ya una base sobre la que empezar a maquetar el
diseño.Escalabilidad: Usar un Framework CSS permite a tu diseño tener la posibilidad de
crecer en el futuro. Si añadimos una nueva sección, una nueva página o un nuevo elemento no
15 necesitaremos escribir nuevas lineas de CSS, podemos reutilizar los estilos ya predefinidos,
centrándonos en el HTML y en los detalles que hagas a esa página singular respecto al resto.
Testeado en navegadores: la mayoría de los frameworks son usados por muchos usuarios y
los mismos usuarios reportan los fallos o errores que encuentran en los distintos
navegadores, para que puedan ser arreglados. Esto hace que a medida que pase el tiempo, el
frameworks vaya mejorando su compatibilidad y no tengas que preocuparte de si tu diseño se
ve bien en Safari, Chrome, Firefox…
Mobile first: La mayoría de los frameworks son responsive design, y además están
construidos basándose en la metodología Mobile First, por lo que nos aseguramos una
óptima visualización en los dispositivos de menor resolución sin sobrecargar con estilos y
propiedades innecesarias dichas resoluciones.
Escalabilidad: Usar un Framework CSS permite a tu diseño tener la posibilidad de crecer en

el futuro. Si añadimos una nueva sección, una nueva página o un nuevo elemento no
16 necesitaremos escribir nuevas lineas de CSS, podemos reutilizar los estilos ya predefinidos,
centrándonos en el HTML y en los detalles que hagas a esa página singular respecto al
resto.
Desventajas de usar un framework (css)
Puede limitar la creatividad de tu diseño. Partir de una estructura de rejilla o de unos már-
genes y formas preestablecidos puede hacer que tu diseño se vea condicionado por el
mismo y el nivel de creatividad de tu proyecto no sea el mismo que si partes de una hoja en
blanco.
17 Líneas de código innecesarias. Seguramente no harás uso del 50% de las especificaciones y
clases escritas en el CSS. Es lo normal, sin embargo los usuarios se descargan los archivos
completos, por lo que el peso de la web será más alto, y por lo tanto la carga más lenta.
Tiempo de aprendizaje: Aunque la curva de aprendizaje suele ser rápida, es cierto que famil-
iarizarnos con el framework nos llevará tiempo y hasta pasados un par de proyectos no con-
oceremos la mayor parte del código.
Preprocesadores
de CSS
18
En términos simples, mediante un lenguaje de script
escribimos código parecido al que usamos en CSS
(esto dependerá del preprocesador que estemos
usando), luego este código será compilado y como
resultado de esta compilación tendremos un archivo
CSS.
Diferencias entre preprocesadores
de CSS
Los preprocesadores más utilizados son Less, Saas, Stylus. Ninguno es mejor que el
otro, cada uno tiene sus ventajas y desventajas.
19 Less: compacto y rápido, apropiado para proyectos pequeños.
Sass: proyecto Open Source, una comunidad muy grande y ampliamente usado.
Stylus: bastante avanzado y completo, es el más cercano a un lenguaje de
programación.
Todos difieren en su sintaxis, pero tienen fundamentos parecidos y un mismo

objetivo, que es hacer más organizado y eficiente el código CSS durante el desarrollo.
</>
20 Practicando css
CSS HTML
Intenta construir
21 la estructura
de ésta página
Te enseño cómo
agregar una tipografía personalizada.
22
Trucos divertidos
23 animaciones sencillas, cambiar textos

con css, y librerías que puedes
usar para esto
Revisemos si entendiste
24 Juntos encontremos la respuesta a lo

que sucede con estos estílos,
¡Es hora de analizar!

Si tengo este html y tengo estos estilos
25
¿Qué color tiene la segunda a?

¿Por qué mis estilos no funcionan en IE?
26
La respuesta es tan sencilla que no necesito revisar el diseño

en el navegador
¿qué texto tiene al final mi botón si le agregué la clase active?
27
La respuesta es tan sencilla que no necesito revisar el diseño

en el navegador
Fuentes
https://guias.makeitreal.camp/html-y-css/posicionamiento
https://luisforgiariniblog.com/cual-diferencia-entre-html-html5/
https://www.ciudadano2cero.com/aprender-css-basico-desde-ce
ro/#Como_funcionan_las_hojas_de_estilo_en_cascada
https://www.silocreativo.com/mejores-frameworks-css/
https://devcode.la/blog/preprocesador-de-css/

Conceptos HTML, CSS

Cargado por

Copyright:

Formatos disponibles

Conceptos HTML, CSS

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Conceptos HTML, CSS

Cargado por

Copyright:

Formatos disponibles

Conceptos

La mayoría de etiquetas necesitan una etiqueta

2 como applets de Java y texto que fluye alrededor de las imágenes.

HTML 5: Es la quinta revisión importante del lenguaje básico HTML.

aunque todavía es posible utilizar el método tradicional:

HTML5 permite incluir elementos de SVG y MathML.

Mejora de las API, como: getElementsByClassName() y innerHTML.

Es fundamental conservar la estructura Webfonts: La utilización de fuentes

5 accesibilidad y legibilidad: por ejemplo un link

8 apertura y cierre de la regla. En la primera regla,

Cada regla se compone a su vez de propiedades

10 vertical-align: Alineamiento vertical dentro de un elemento.

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

position: static; Es la posición por defecto en la del navegador

Escalabilidad: Usar un Framework CSS permite a tu diseño tener la posibilidad de crecer en

19 Less: compacto y rápido, apropiado para proyectos pequeños.

Todos difieren en su sintaxis, pero tienen fundamentos parecidos y un mismo

23 animaciones sencillas, cambiar textos

24 Juntos encontremos la respuesta a lo

¡Es hora de analizar!

¿Qué color tiene la segunda a?

La respuesta es tan sencilla que no necesito revisar el diseño

La respuesta es tan sencilla que no necesito revisar el diseño

También podría gustarte