Diferencia entre revisiones de «HTML Básico - Lección 1»

Contenido eliminado Contenido añadido
Talueses (discusión | contribs.)
m <!-- Mejoras en la redacción -->
Talueses (discusión | contribs.)
<!-- Mejorando el contenido -->
Línea 74:
</div>
 
== Marcado HTML ==
== Etiquetas, Atributos y Elementos ==
 
Aunque los fundamentos del HTML sonen teoría es texto plano, necesitamosrecordemos que, también se basa en etiquetas. Necesitamos un poco más para hacer un documento válido de HTML.
 
El código HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). El HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a otros tipos de documentos, imágenes, videos, etc.
 
 
=== Elementos ===
 
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Que luego definiremos. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio por ejemplo, <code><etiqueta></code> y una etiqueta de cierre (por ejemplo, </etiqueta>). Y dentro de éstas, el elemento propiamente.
 
 
Aunque los fundamentos del HTML son texto plano, necesitamos un poco más para hacer un documento válido de HTML.
 
=== Etiquetas ===
 
La estructura básica de un documento HTML incluye '''etiquetas''', que rodean el contenido y aplican características a este.
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
 
Las etiquetas no son más que marcas al principio y al final de un '''elemento'''. Los elementos son los textos que componen las paginas Web. Dirías, por ejemplo, que todo lo que esta entre e incluido en las etiquetas <span style="color:#6677ff"> <body> </span> y <span style="color:#6677ff"> </body> </span> es el elemento cuerpo. Como otro ejemplo, mientras que '<span style="color:#6677ff"> <title> </span>' y '<span style="color:#6677ff"> </title> </span>' son etiquetas, '<span style="color:#6677ff"> <title> Wikipedia </title> </span>' es el ''elemento'' título.
Cambia tu documento de modo que se parezca a este:
 
 
Para que veamos en ejemplo a lo que nos referimos, realiza esto;
 
Cambia tu documento que creaste hace poco, de modo que se parezca a estelo siguiente:
 
<pre>
Línea 94 ⟶ 109:
</pre>
 
Ahora guardedebes guardar el documento nuevamente, vayave de nuevo al navegador y seleccione "Recargar/actualizar" (que actualizara la página).
 
El aspecto de la página no habrá cambiado, pero el propósito del HTML es agregar significado, no presentación, y en este ejemplo ahora ha definido algunos elementos fundamentales de una pagina Web.
 
La primera linea en la parte superior que inicia <span style="color:#6677ff"> <!DOCTYPE... </span> le indica al navegador que es lo que estas haciendo. Puedes pensar que aun no sabes lo que realmente estas haciendo pero es importante agregar esta directiva. Si no lo haces los navegadores actuaran en "modo caprichoso" y cambiaran de una manera muy peculiar. No te preocupes por esto todavia tutodavía, puedes [[Declaraciones|aprender mas acerca de "tipos de documentos" en el Tutorial Avanzado de HTML]] si realmente lo deseas. Por el momento solo recuerda agregar esta linea al inicio de tus paginas web y sonríe.
 
Volviendo al punto, <span style="color:#6677ff"> <html> </span> es la '''etiqueta de apertura'''
y le indica al navegador que el contenido entre esta y la '''etiqueta de cierre''' <span style="color:#6677ff"> </html> </span> es un documento HTML. El contenido entre <span style="color:#6677ff"> <body> </span> y <span style="color:#6677ff"> </body> </span> es el contenido principal de el documento que apareceraaparecerá en la ventana del navegador.
 
==== Etiquetas de cierre ====
 
Los <span style="color:#6677ff"> </body> </span> y los <span style="color:#6677ff"> </html> </span> cierran sus respectivas etiquetas . TODASTodas las etiquetas HTML deben ser cerradas. Aunque versiones anteriores de HTML perezoso permitieron que algunas etiquetas no fueran cerradas, los estándares más recientes requieren que todas las etiquetas sean cerradas. Este es un buen hábito a conseguirseguir de todos modos.
 
No todas las etiquetas tienen etiquetas de cierre como este (<span style="color:#6677ff"> <html></html></span>). Algunas etiquetas, que no engloben contenido alrededor se cerrarán en sí mismas. La etiqueta de romper-linea por ejemplo, luce como esto: <span style="color:#6677ff"> <nowiki> <br /> </nowiki> </span>. Veremos estos ejemplos más adelante. Todo lo que necesitas recordar es que todas las etiquetas deben cerrarse y la mayoría (ésto con contenido entre ellas) tienen el formato de etiqueta de apertura → contenido → etiqueta de cierre.
Línea 113 ⟶ 128:
=== Atributos ===
 
Las etiquetas pueden tener también atributos, que son partesparte de información adicional que se agrega al elemento, dentro de una etiqueta. Los atributos se encuentran entre la etiqueta de apertura y su valor siempre va entre comillas. Esto luce como <etiqueta atributo= " valor " > Contenido </etiqueta>. Hablaremos de etiquetas con atributos más adelante.
 
=== Elementos ===
 
Las etiquetas no son más que marcas al principio y al final de un '''elemento'''. Los elementos son los textos que componen las paginas Web. Dirías, por ejemplo, que todo lo que esta entre e incluido en las etiquetas <span style="color:#6677ff"> <body> </span> y <span style="color:#6677ff"> </body> </span> es el elemento cuerpo. Como otro ejemplo, mientras que '<span style="color:#6677ff"> <title> </span>' y '<span style="color:#6677ff"> </title> </span>' son etiquetas, '<span style="color:#6677ff"> <title> Wikipedia </title> </span>' es el ''elemento'' título.
== Títulos de Pagina ==