Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML - Coggle Diagram
HTML
Existen dos maneras de ingresar imagenes
etiqueta img
inserta la imagen desde nuestro computador
se pueden enlazar imagenes de paginas externas
no recomendable, pues el sitio puede borrar la imagen
paginas encargadas de crear vectores para imagenes
tablericons, iconfonts, smashicon,
etc
estas paginas generan un codigo que ingresaremos en nuestro HTML
lenguajes complementarios
CSS
Da estilos a todas las etiquetas de
html
color, background, font-size,
display, etc
se referencia de 3 maneras
en la misma linea de las etiquetas "inline"
<h1 style="color:red"
no es recomendable
Hace confuso el codigo
1 more item...
dentro del mismo archivo html
se usa la etiqueta style
dentro de ella pondremos todos
nuestros estilos
No recomendable
1 more item...
con un archivo externo
se usa link:css
este archivo contendra todos
nuestros estilos CSS
Es la forma más recomendada
1 more item...
JavaScript
Da funcionalidad a los elementos
interactivos de html
bucles, array, funciones, etc.
se referencia de 2 maneras
dentro del mismo archivo html
se usa la etiqueta script
todo el contenido dentro de esta etiqueta
sera propio de JavaScript
con un archivo externo con la
extensión archivo.js
<script src="archivo.js"></script>
este vinculara el archivo externo JavaScript al HTML
Lenguaje de Marcado de HiperTexto
Funciona con etiquetas
Etiquetas de informacion
se ubican en el head
metadatos, etiqueta meta
sintaxis
<meta name="xxxx" content="xxxx">
<meta name="author" content="Jonh Doe"
Describe el autor de una pagina
1 more item...
Etiquetas de contenido
se ubican en el body
etiquetas multimedia
img,video, audio, etc
De texto
p, heading, etc.
semanticas
estructuran el body
section, header, main, article, nav, etc
etiqueta de enlace <a>
se pueden enlazar
paginas web externas
paginas propias del sitio web
Contenido dentro de nuestro propio archivo
Otras etiquetas
visite
https://lenguajehtml.com/html/cheatsheets/
para conocer otras etiquetas
Formularios
La etiqueta form contendrá el formulario
estructura la informacion de nuestro formulario
contiene etiquetas hijas
fieldset
organiza en grupos los campos
de un formulario.
es la etiqueta hija de form y en ella se anidan las demas etiquetas del form
las etiquetas de form que parten despues de fieldset
legend
1 more item...
input
1 more item...
label
1 more item...
textArea
1 more item...
listas
existen 3 tipos de listas
ul
listas no ordenadas
su etiqueta hija es li
li es el item de la lista
ol
listas ordenadas
su etiqueta hija es li
li es el item de la lista
dl
lista de definicion
tiene dos etiquetas hija
dt
etiqueta item de la lista
se usa antes que la etiqueta dl
Oso
dl
etiqueta desciptiva de la lista
se usa despues de la etiqueta dt
mamifero de gran tamaño
botones
HTML solo crea el boton no le da funcionalidad
formas de crear un boton
con enlace <a> se le dara el diseño de boton con CSS
Con un input type="submit"
con la etiqueta button
tablas
la etiqueta table contendrá la tabla
contiene etiquetas de estructura
thead
encabezado de la tabla
tbody
seccion principal de la tabla
tfood
seccion de la ultima fila de la tabla
etiquetas de contenido de la tabla
estas etiquetas son hijas de
las etiquetas de estructura
th
crea el titulo a el encabezado de la tabla
tr
crea filas en una tabla
td
crea celdas en la tabla