Parte superior (
tapa
) sección o página.
En este capítulo: Sintaxis de elementos
Todos los elementos en HTML siguen el mismo formato:
- El elemento comienza con una etiqueta de apertura.
- El elemento termina con una etiqueta de cierre.
- El contenido de un elemento es todo lo que se encuentra entre las etiquetas de apertura y cierre.
- Algunos elementos no tienen contenido (elementos vacíos).
- La mayoría de los elementos pueden contener atributos.
Nota: no olvides poner el símbolo " en la etiqueta de cierre /
", le dice al navegador que su elemento ha finalizado y que lo que viene después es otro elemento.
Elementos vacios
Hay varios elementos en HTML que no tienen una etiqueta de cierre, como ![]()
a nuevos elementos en HTML5).
. Tales elementos se llaman vacío, porque no contienen ningún contenido y no tienen una etiqueta de cierre.
Elementos anidados
Todos los documentos HTML se componen de elementos anidados. La mayoría de ellos pueden contener otros elementos o pueden anidarse ellos mismos dentro de otros elementos, y la profundidad del anidamiento de elementos no está limitada.
El siguiente ejemplo consta de tres elementos, dos de los cuales están anidados:
mi primer párrafo
Cuando colocas un elemento dentro de otro, debes tener cuidado de asegurarte de que el elemento anidado comience y termine dentro del mismo elemento. Por tanto, el siguiente ejemplo es incorrecto:
Este Muy
Interesante
En el primer artículo sobre HTML, di una lista de etiquetas que, en mi opinión, un diseñador de diseño necesita conocer. Las etiquetas restantes son, de hecho, redundantes o incluso superfluas, en mi opinión. En este artículo me gustaría hablar sobre los conceptos básicos de html y las etiquetas html, head, title, body, así como div y span. Estas etiquetas, en mi opinión, son una buena base para empezar a aprender HTML.
Desafortunadamente, los navegadores modernos son muy leales a los desarrolladores web. Intentan interpretar todo lo que les dan. Etiquetas no cerradas, etiquetas en diferentes registros, etiquetas poco claras, etiquetas colocadas donde no deberían estar, etc. Por ejemplo, personalmente vi un sitio donde el contenedor principal estaba ubicado dentro del cuerpo y la etiqueta del título estaba incluso fuera del contenedor principal. Al mismo tiempo, ¡el sitio parecía normal desde fuera!
Realmente espero que algún día los estándares se vuelvan más estrictos y las páginas mal diseñadas no se muestren correctamente. Es cierto que esto requiere que todos los navegadores procesen html y CSS de la misma manera... Bueno, me dejé llevar.
Como es habitual en estos casos, primero describimos el plan de lección:
- Reglas generales
- Estructura del documento
Reglas generales
Para empezar, vale la pena decir que HTML es un lenguaje bastante leal. Existe una versión de html cuyo estándar es más estricto: xhtml. Intento mantener este estándar. Específicamente, este estándar supone que todas las etiquetas están en minúsculas y cerradas. Incluso los solteros. Cómo se mostrará a continuación. Todos los atributos están escritos en minúsculas, sus valores están entre comillas dobles y se indican mediante la cantidad en la que se mide su valor. Cumpliremos con estas reglas.
Las normas prevén una determinada disposición de determinados elementos. Si un elemento que debería estar ubicado en algún lugar se ubica en un lugar diferente, esto se considera un error. En general, dicho documento no debe procesarse o debe procesarse con un error. Pero los navegadores evitan a los desarrolladores descuidados. Más precisamente, sus usuarios que visitan sitios desarrollados por desarrolladores descuidados.
Ahora sobre las etiquetas. Las etiquetas pueden estar emparejadas o individuales. Las etiquetas emparejadas también se dividen en etiquetas de bloque y en línea. A un par de etiquetas a veces se le llama contenedor.
Como puedes adivinar, las etiquetas emparejadas tienen un par y las etiquetas individuales son independientes. Un par de etiquetas se forma a partir de una etiqueta de apertura y de cierre. Las etiquetas individuales son etiquetas de apertura y cierre.
Contenedor de ejemplo (etiquetas emparejadas):
contenido del contenedor
Ejemplo de etiqueta única
texto de una línea
este texto ya está en otra línea
El ejemplo del contenedor utilizó la construcción.Este es un comentario. Todo lo que está encerrado dentro de dos flechas no es analizado por el navegador y no se muestra en la pantalla. Estos comentarios a veces son muy convenientes de usar al diseñar momentos confusos o para separar partes lógicas del diseño en el código.
Etiquetas en bloque y en línea
La diferencia entre etiquetas de bloque y en línea es que un elemento de bloque tiende a ocupar todo el ancho de la pantalla. (a menos que se especifique explícitamente su ancho), e inline ocupa exactamente tanto espacio como su contenido. Además, todo lo que siga a un elemento de bloque aparecerá en una nueva línea, y todo lo que siga a un elemento en línea aparecerá directamente detrás de él. El contenedor div está a nivel de bloque de forma predeterminada y la etiqueta span está en línea. (Sin embargo, este comportamiento se puede cambiar fácilmente usando CSS). Ilustremos el comportamiento de estas etiquetas.
Texto 1. Este texto ocupa todo el ancho de la página.
Este texto ya va DEBAJO del primer texto y también ocupa toda la página.
enteramente. Pero texto rojo, prisionero
en la etiqueta span, no ajusta el texto que le sigue en una nueva línea y ocupa
exactamente tanto espacio como sea necesario.
Las etiquetas deben seguir lógicamente una tras otra, manteniendo la jerarquía. Al incluir una etiqueta dentro de otra, debe asegurarse de que se respete el orden de las etiquetas de cierre.
Equivocado:
texto
Bien:
texto
Hay una cosa más que quiero mencionar: las etiquetas pueden tener atributos. Un atributo especifica un comportamiento específico o complementa una etiqueta de alguna manera. El atributo se escribe directamente en la etiqueta, separado por un espacio de su nombre, en el formato: ATTRIBUTE_NAME="VALOR[medida]". ATTRIBUT_NAME y VALUE, creo que está claro cuáles son. Una medida es una designación de unidades de medida. Si no existe una unidad de medida, entonces no es necesario inventar una.
Ejemplo de uso de un atributo
Aquí estamos configurando el atributo de altura para el div contenedor. (generalmente, esto se hace mejor usando CSS, pero en este caso, lo escribí para mostrar cómo se vería). Los atributos sólo se pueden asignar en etiquetas de apertura. El número de espacios no importa. Puede poner espacios entre el nombre de la etiqueta y el atributo, entre el nombre del atributo y el signo igual, y entre el signo igual y las comillas. ¡Puedes poner espacios entre comillas, pero no entre la cantidad y sus unidades de medida! Las comillas no tienen que ser dobles; puedes usar “comillas simples”, pero sólo en pares. La opción "comillas" no funcionará. En este caso, la comilla simple, así como todo lo que sigue, se interpretará como parte del valor del atributo.
Creo que eso es todo lo que quería decir, básicamente. Entonces, ¡vamos a ello!
Estructura del documento
Lo que se describirá a continuación entra precisamente en la categoría de cumplimiento obligatorio. Así que no creas que si “se muestra así”, entonces es normal. Esto NO es normal.
Cada documento debe estar etiquetado. Estas etiquetas, como puede ver, están emparejadas. Así que no olvide abrir dicha etiqueta al principio del documento y cerrarla al final. En teoría, todo lo que viene después de la etiqueta de cierre. El navegador ya no debería analizarlo. Pero se analiza e incluso se muestra. Pero no recomiendo usar esto. Lo que es digno de mención es que antes de la etiqueta de apertura se puede incluir otro contenido. Pero no hablaré de eso en este artículo. Cualquiera que quiera puede buscar DOCTYPE.
Todo el resto del contenido del documento debe estar contenido en el contenedor html. El documento se divide en dos partes. Uno lleva una función de control e información adicional para el navegador. Y el otro es información para el usuario. La parte de control se llama
y contenido -
. Además, el contenedor de la cabeza siempre debe ir antes que el cuerpo. Los dos contenedores no deben incluirse entre sí.
Cada documento debe tener un título. El título del documento es un elemento muy importante de la página. Se muestra en el título de la ventana del navegador; los motores de búsqueda le otorgan gran importancia. El título de la página se puede configurar mediante un contenedor.
Título de la página. Este contenedor debe estar ubicado en un contenedor . Agregaré que cuanto más alto (en filas) sea el título, mejor indexarán la página los motores de búsqueda.
Por lo tanto, el documento html más simple se parece a esto:
Título del documento
Aquí está el cuerpo del documento.
Puede copiar este texto en el Bloc de notas (o en un editor de texto similar), guardar este archivo con la extensión .html y arrastrarlo a la ventana de su navegador. Verá que el texto contenido en el contenedor del título se muestra en el encabezado de la página y el texto del cuerpo se muestra en la parte del usuario.
Terminemos de ver las etiquetas del documento principal y pasemos a las etiquetas de presentación del contenido.
Etiquetas para la separación lógica del contenido.
Para empezar diré que las etiquetas que comentaré a continuación sólo se pueden encontrar en la etiqueta del cuerpo.
Este contenedor está diseñado para combinar algo de texto en un bloque lógico, separado del resto del contenido de la página. Si toma el texto de nuestro documento más simple y adjunta el texto del cuerpo del documento en este contenedor, no notará ningún cambio externo. Sin embargo, todavía existen. Para el texto encerrado en un contenedor div, puede establecer un estilo. Este bloque se puede hacer con un ancho determinado, configurarlo con una fuente diferente, alineado a la derecha o cualquier otra cosa. Aquí hay un ejemplo del uso de la etiqueta div (por brevedad, no mostraré el texto completo del documento. Pero debes recordar que debes insertar la siguiente estructura en el contenedor del cuerpo para que funcione):
Un texto pequeño que quiero que aparezca en el lado derecho de la página y que tenga un formato ligeramente diferente al texto principal de la página.
El texto principal de la página. Probablemente no debería tardar mucho, porque es sólo una prueba.
No tengas miedo del atributo de estilo desconocido y de las palabras incomprensibles que contiene (¿son realmente tan incomprensibles?). Era mejor mostrar el contenedor div junto con este atributo. La mayoría de las veces, en el diseño correcto, los atributos id y class se utilizan para los contenedores, que sirven para asociar la etiqueta con CSS o identificarla para JavaScript. Pero esto se nos está adelantando ;)
El contenedor div es un elemento de bloque. Pero este comportamiento es fácil de cambiar.
El contenedor span está diseñado para resaltar una parte del texto. Su uso es el mismo, perceptible sólo después de darle propiedades especiales a la etiqueta. A menudo, el efecto deseado se logra utilizando CSS. Vimos un ejemplo simple del uso de la etiqueta span cuando estudiamos la diferencia entre elementos en bloque y en línea, por lo que no nos detendremos en ello.
En pocas palabras
En este artículo, nos familiarizamos con las reglas generales de HTML, aprendimos sobre la estructura mínima de un documento HTML, sobre etiquetas emparejadas y no emparejadas, y sobre contenedores de bloques y en línea. Vimos la diferencia entre contenedores de diferentes tipos y también nos familiarizamos con los contenedores lógicos div y span.
Si te gustó este minicurso, o te planteó dudas o sugerencias, si quieres discutir sobre algo, me encantaría escuchar tus comentarios en los comentarios o por correo.
Hay dos tipos de elementos en HTML: elementos de bloque y elementos en línea. A continuación aprenderá las características de estos elementos y las diferencias entre ellos, así como las formas de controlarlos mediante reglas CSS.
Elementos de bloque
Los elementos de bloque son la base que se utiliza para diseñar páginas web. Dicho elemento es un rectángulo que, de forma predeterminada, ocupa todo el ancho disponible de la página (a menos que se especifique lo contrario en CSS), y la longitud del elemento depende de su contenido. Un elemento de este tipo siempre comienza en una nueva línea, es decir, se encuentra debajo del elemento anterior. Un elemento de bloque puede contener otros elementos de bloque y en línea.
Ejemplos de elementos de bloque:
,
,
, , etc.
Elementos en línea
A diferencia de un elemento de bloque, un elemento en línea no se ajusta a una nueva línea, sino que se coloca en la misma línea que el elemento anterior. Estos elementos generalmente se encuentran dentro de elementos de bloque y su ancho depende únicamente del contenido y la configuración de CSS. Otra diferencia entre un elemento en línea y un elemento de bloque es que solo puede contener contenido y otros elementos en línea. Los elementos de bloque no se pueden anidar dentro de elementos en línea.
Ejemplos de elementos en línea: , , , , ![]()
etc.
Nota: En HTML5, el orden en el que se anidan las etiquetas no juega ese papel. Los elementos ya no se dividen simplemente en bloque y en línea, sino que se agrupan según su significado y propósito, representando categorías de contenido.
Propiedad de visualización CSS: cambiar el tipo de elemento
Usando la propiedad de visualización extremadamente útil en CSS, puede hacer que un elemento de bloque aparezca como un elemento en línea y viceversa. Para que un elemento de bloque se comporte como un elemento en línea (es decir, que no se traduzca a una nueva línea), es necesario escribir una regla para él:
Pantalla: en línea;
Si desea mostrar un elemento en línea como un elemento de bloque (de modo que haya un salto de línea antes y después del elemento), escriba lo siguiente:
Pantalla: bloque;
Acción (display:inline) y (display:block)
También puedes crear un "híbrido": un elemento de bloque con comportamiento como un elemento en minúscula. En este caso, todo el contenido de dichos elementos de bloque se mostrará como de costumbre, pero los bloques se comportarán como elementos en línea, alineándose en una línea tras otra y envolviéndose en una nueva línea solo cuando sea necesario. El margen de colapso en tales casos deja de funcionar. Para convertir un elemento en un elemento de línea de bloque, escriba:
Pantalla: bloque en línea;
Acción (pantalla: bloque en línea)
Más adelante en el tutorial: Propiedad de borde CSS. Aprenderá cómo agregar bordes a los elementos de la página web y qué personalizaciones puede aplicarles usando hojas de estilo en cascada.
Popular en la categoría:
Cómo fusionar capas en Photoshop en una o combinarlas en un grupo...
leer
Transferir contactos a un nuevo teléfono Android
leer
Samsung Galaxy se reinicia solo - Soluciones Galaxy Note...
leer
Características clave de Kaspersky Rescue Disk
leer
