Please enable JavaScript.
Coggle requires JavaScript to display documents.
Html y CSS, image - Coggle Diagram
Html y CSS
HTML
Entonces, ¿qué es HTML en realidad? 
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera.
Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido: Mi gato es muy gruñon Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo (<p>): <p>Mi gato es muy gruñon</p>
Anatomía de un elemento HTML
Las partes principales del elemento son: La etiqueta de apertura, consiste en el nombre del elemento (p), encerrado por paréntesis angulares (< >) de apertura y cierre.
Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta.
Establece dónde termina el elemento —en este caso dónde termina el párrafo—. El contenido: este es el contenido del elemento, que en este caso es sólo texto. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Elementos vacíos
Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por ejemplo, el elemento <img> de nuestro HTML: <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:
Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento <ul> (unordered list). Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento <ol> (ordered list). Cada elemento de la lista se coloca dentro de un elemento <li> (list item).
Puedes también colocar elementos dentro de otros elementos —esto se llama anidamiento—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento <strong>, que significa que dicha palabra se debe enfatizar: <p>Mi gato es <strong>muy</strong> gruñon.</p>
Esto es incorrecto: <p>Mi gato es <strong>muy gruñon.</p></strong> Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!
Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo tanto, debes cerrar esta etiqueta primero, y luego la de <p>.
Imagenes
Presta atención nuevamente al elemento imagen <img>: <img src="images/firefox-icon.png" alt="Mi imagen de prueba"> Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o ubicación) de tu archivo de imagen.
También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque: Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas Lectores de pantalla (Screen Readers),
Los cuales les leen el texto contenido en el atributo alt. Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo src para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:
Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de texto; los usarás para el marcado de contenido de texto regular: <p>
Este es un simple parrafo</p> Agrega uno o algunos párrafos a tu texto de ejemplo, colocados directamente debajo del elemento <img>.
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos.
Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas: Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en una lista de compras.
Estas son encerradas en un elemento <ul> (unordered list). Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento <ol>
Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un vínculo simple — <a> — la a es la abreviatura de la palabra inglesa «anchor» («ancla»).
-
-
-
-
-