Estructura del documento HTML: etiquetas principales, ejemplo
HTML es el lenguaje de marcado. Mucha gente lo considera programación, pero no lo es. En HTML, no hay variables, cálculos, matrices u otros elementos presentes en ningún lenguaje de programación.
Usando HTML, el desarrollador puede crear soloapariencia del sitio. Es importante entender que ningún sitio existe sin marcado. HTML es la base para crear páginas web. El resto del funcional se agrega por diferentes lenguajes de programación.
Creando un documento html
Crea una página web simple en cualquierel editor. Incluso el "Bloc de notas" servirá. Se recomienda que un desarrollador principiante use otros editores que tengan funciones de sustitución automática y otras solicitudes. Gracias a esto, puede crear tablas listas, enlaces, imágenes y otros elementos. Y en "Bloc de notas", cada letra debe escribirse manualmente.
Como regla, el "Bloc de notas" se usa solo en aquelloscasos donde no hay otras herramientas disponibles. Primero, se crea un documento de texto y luego se guarda en formato html. Todas las páginas del sitio deben tener la extensión html.
El lenguaje html es jerárquico. Es decir, hay una estructura especial para el documento html. ¿Qué es? Consideremos a continuación para mayor claridad.
Estructura del documento html. Ejemplo:
La estructura es siempre la misma Si desea cambiar algo, el navegador no podrá procesarlo. Como resultado, no obtendrás lo que pretendías.
La imagen de arriba muestra la estructura de cualquierhtml-archivo. El primer elemento indica el tipo de archivo. Esta etiqueta se especifica una vez. Si usa editores especiales, la estructura completa se creará automáticamente. Tendrá que ajustar los valores predeterminados.
La estructura del documento html son las etiquetas principales:
- <html>
- <head>
- <cuerpo>
De estas tres etiquetas es el esqueleto de todo el sitio. Presta atención a la imagen. Todas estas etiquetas tienen una etiqueta de cierre con un carácter "/". Si escribe a mano, acostúmbrese a poner ambas etiquetas a la vez: abrir y cerrar.
Se dijo anteriormente que las páginas de sitios web tienenextensión .html. Es decir, si crea un documento de texto, pero al mismo tiempo escribe el código correcto, el navegador aún le mostrará solo el texto. No habrá conversión de código.
Sección de la cabeza
En la figura debajo del párrafo 3, se indica la sección de la cabeza. Esta sección indica la información del servicio. Por ejemplo, puede especificar la codificación (elemento 4) y el título de la página (paso 5).
El título siempre debe ser. Sin él, ningún motor de búsqueda puede determinar el nombre del contenido (texto) en la página web. Y esto es malo para la promoción del sitio web. Además, el navegador en la parte superior no especifica el título de la página. Esto es un inconveniente para el usuario.
La estructura del documento html es tal que el título <título> se especifica solo en la sección de encabezado. Si la etiqueta <title> se especifica en la sección del cuerpo o después de ella, el controlador no le presta atención.
Además, la sección de la cabeza especificainformación para conectar scripts, archivos de estilo, instrucciones para motores de búsqueda o cualquier otro dato que el usuario no necesite ver, pero que son importantes para el navegador o los programadores.
Estilos de conexión
La estructura del documento html te permite conectarteestilos de diferentes maneras. Además, se pueden escribir individualmente en cada elemento. Pero este método no es recomendable, porque el código se vuelve demasiado grande e inconveniente.
Los motores de búsqueda recomiendan que todos los estilos se procesen en un archivo separado, y en los elementos simplemente usan diferentes clases.
El archivo está conectado de la siguiente manera.
<link rel = "stylesheet" href = "style.css" type = "text / css">
El atributo href especifica la ruta al archivo. Si hay un error en la ruta, los estilos no se cargarán. Además, se requiere el atributo de tipo, que indica que se trata de un archivo css.
Otra opción es definir estilos directamente en la sección de encabezado.
Pero esta opción tampoco es muy recomendable. Estos métodos son muy diferentes ya que el archivo css puede ser uno para todo el sitio, y todos los cambios en él se aplicarán instantáneamente a todas las páginas. Y si usa el método que se muestra en la figura anterior, deberá realizar cambios en todas las páginas existentes en el sitio.
Si la clase que está creando se usará solo en una página, entonces esta opción es adecuada para usted.
Scripts de conexión
Los scripts están conectados de la siguiente manera.
<script type = "text / javascript" src = "main.js"> </ script>
Aquí se requieren dos atributos: type y src. En el primero, especificamos que este es un archivo javascript, y el segundo es donde se encuentra el archivo. Si comete un error tipográfico, nada funcionará.
Cuerpo de la sección
La estructura del documento html es tal que es necesario colocar el contenido que será visible para el usuario solo en la sección del cuerpo. El nombre de la etiqueta habla por sí mismo.
Esto especifica todo el código de la página principal, que puede incluir un número ilimitado de elementos. Pero cuanto más largo sea el código, más tiempo será procesado.
Considere las etiquetas más básicas que puede usar en el área del cuerpo. No hay tantos básicos. Todo lo demás lo descubrirá a medida que crezca su conocimiento y práctica.
Etiquetas básicas
La estructura del documento html requiere un documento obligatorioorden de los elementos de escritura. Las etiquetas siempre deben estar rodeadas por corchetes <>. Sin esto, el navegador no entiende que es una etiqueta. Después del paréntesis de apertura, el nombre del elemento (etiqueta) siempre sigue. Si permite un espacio entre el <y el nombre, entonces el navegador considerará esto como texto.
Considere el ejemplo de una etiqueta de imagen. Tenga en cuenta que esta etiqueta no se está cerrando, a diferencia de los enlaces, párrafos y muchos otros.
El orden de los atributos no importa. Pero su escritura es muy importante. Siempre aparece el nombre del atributo primero, luego el signo igual, luego el valor del atributo se escribe entre comillas. El valor puede ser diferente: digital o de texto.
El atributo src en todas las etiquetas indica la ruta del archivo,que necesitas cargar El atributo alt en todos los elementos indica una breve descripción. En este caso, se carga una imagen de bird.jpg con una descripción de una foto de un pájaro.
Además, en la etiqueta img, puede especificar las dimensiones, solo el ancho o el alto, el título, la alineación, la clase de estilo o el marco.
Considere las otras etiquetas principales que se enumeran en la sección del cuerpo.
Tag | Cita |
<a> ... </a> | Referencias |
<img> | Imágenes |
<p> ... </ p> | Párrafo |
El <br> <br> | Transfiriendo texto a una nueva línea |
<strong> ... </ strong> | Texto en negrita |
<i> ... </ i> | cursiva |
<s> ... </ s> | Texto de tachado |
<u> ... </ u> | Texto subrayado |
<ol> </ ol>, <ul> </ ul> | Listas |
<mesa> </ mesa> | Tablas |
¿Cómo puedo imaginar todo esto en mi cabeza?
Los desarrolladores principiantes no siempre pueden imaginar de inmediato que todo esto es especulativo. Mire algunos ejemplos de la estructura de las páginas web, y entonces definitivamente se volverá claro.
Hay tal opción:
Y esto:
Usando estilos
Como se mencionó al principio, puede conectar estilos al archivo y especificarlo en la sección del encabezado. En cualquier caso, la descripción de las clases es bastante similar.
Por ejemplo, puede especificar un estilo para el encabezado. Luego debe escribir h1 (dado que el estilo será para el encabezado del segundo nivel), abrir paréntesis y escribir qué propiedades habrá en este elemento. Si sabes inglés básico, entonces no debería haber ningún problema. Todas las propiedades se llaman lenguaje humano.
Si desea especificar este estilo para varios elementos a la vez, escríbalos separados por comas.
El resultado es un encabezado rojo.
Los métodos anteriores son adecuados para el diseño de elementos estándar. Pero también puedes crear tus propias clases. Su nombre debe comenzar con un punto, luego se escribe cualquier nombre arbitrario.
Debes usarlos así.
Tenga en cuenta: Si especificó la configuración de estilo para un elemento estándar, no necesita escribir la clase de palabra. El estilo se aplicará por defecto. En el atributo de clase, puede especificar solo aquellos estilos que comience con un punto.
</ p>
