Ir al contenido principal

Tutorial de HTML (I)

Estructura básica de una página web


La estructura básica de una página web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web.

Dentro de <html></html> se encuentran 2 partes diferenciadas.

  • La primera <head></head> es la cabecera de la página. Aquí irá cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

  • La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página.


<html>
<head>
<title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto it&aacute;lica.</i><br>
</body>
</html>

Para verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en el botón derecho => ver código fuente, y verás así el código HTML de la página.

Observad el título en la parte superior izquierda de la página.


Además, dentro de <body></body> distinguimos varias etiquetas:




  • <br> => Indica salto de línea. En HTML un salto de línea normal (pulsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).

  • <b></b> => Indica comienzo y fin de negrita.

  • <i></b> => Itálica.

  • También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.


Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados.


Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> (salto de línea) o <hr> (salto de párrafo).


 

 

Tutorial de HTML (II)

Comentarios

Publicar un comentario

Entradas populares de este blog

Prácticas con FluidSIM

FluidSim es una herramienta de simulación para la obtención de los conocimientos básicos de la neumática y de la hidráulica.

8. Prácticas con FluidSim

FluidSim es una herramienta de simulación para la obtención de los conocimientos básicos de la neumática y de la hidráulica. Descarga aquí el programa en español Descarga aquí el manual de neumática Descarga aquí el manual de hidráulica   Actividad 1 Representa en FluidSim el siguiente circuito neumático. Describe el cilindro, la válvula y el funcionamiento del circuito.   Actividad 2 Representa en FluidSim el siguiente circuito neumático. Describe el cilindro, la válvula y el funcionamiento del circuito.   Actividad 3 Representa en FluidSim el siguiente circuito neumático. Describe el cilindro, la válvula y el funcionamiento del circuito.   Actividad 4 Representa en FluidSim el siguiente circuito neumático. Describe el cilindro, la válvula y el funcionamiento del circuito.   Actividad 5 Representa en FluidSim el siguiente circuito neumático. Describe el cilindro, la válvula y el funcionamiento del circuito.   Actividad 6 Diseña el siguiente cir...

Electricidad básica con Crocodile Clips

Crocodile Clips es un programa o software de diseño y simulación de circuitos eléctricos, cuyas principales características son su sencillez, rapidez y facilidad para aplicaciones didácticas. DESCARGAR AQUÍ En nuestro nivel utilizaremos este programa para trabajar con circuitos sencillos de corriente continua, orientado fundamentalmente a: Montajes de resistencias en serie. Montajes de resistencias en paralelo. Montajes de circuitos con resistencias en serie, paralelo y mixtas. Comprensión de la Ley de Ohm. Barra de Componentes Es la parte más importante del programa. Con ella podremos agregar y borrar componentes cuando se diseña un circuito. Cuando se pulsa sobre cada uno de los iconos de componentes generales, se despliegan las diferentes opciones a elegir de ese tipo de componentes, pudiendo volver a los componentes generales a través del icono de flecha. El icono que representa un cocodrilo sirve para borrar cualquier componente, incluso el cableado. Pulsan...