Guía de HTML

Fondo en la ficha

Buscar una imagen en la red, copiar el link respectivo y llevarlo al código que se muestra más abajo:



Luego colocáis </ div> en donde queréis que finalice el fondo.

Música en la ficha

Existen variados métodos que podrían ocupar para el uso de canciones en su tema, sin embargo, el más accesible y rápido para todos es éste:



Donde dice códigodevideo es el código que lleva cada vídeo de youtube.
Ejemplo: youtube.com/watch?v=jHceVTRsl7k < (Código en negrita) >

Pues bien, simplemente tenéis que agarrar ese código y colocarlo dentro del code. Al termino de eso el código debería quedar así:

< embed allowScriptAccess="never" allowNetworking="internal" src="https://www.youtube.com/v/jHceVTRsl7k?version=3&autoplay=1" type="application/x-shockwave-flash" width="0" height="0" autoplay="0" >

Tener en cuenta que si el vídeo posee derechos de autor no funcionará.

Uso de cuadros en tu ficha

El uso de cuadros con HTML es bastante extenso pero con fines bien presentados, veamos como se hace...

Primero deberéis copiar el siguiente código que se muestra acá abajo:



Luego, cuando queráis hacer termino del cuadro tendréis que colocar:



Ejemplo de cuadros:

Los cuadros se adaptan de acuerdo a lo que nosotros rellenemos, centímetros, porcentaje o pixels (cm, % o px), en donde podemos colocarlo (izquierda, centro o derecha) y una serie de cosas más que veremos a continuación:

< div style="float: left; width: 100; height: 50px; padding: 10px; margin: 10px; background-color: #C6F6FF; border: solid 5px #00AAFF; color: #000000;">

Azul: Ubicación del marco, puede ser izquierda, centro o derecha en el caso del HTML debes colocarlo en inglés por lo que sería center, right o left.
Rosa: Se ubica el ancho de tu marco. Los más usuales son pixels (px), porcentaje (%) y centímetros. La cantidad depende del largo y anchura de tu marco.

Existe la posibilidad de llegar a un límite con el cuadro o simplemente que termine al finalizar tu texto, si es asi como lo queréis debereis remplazar el número 100 y colocar: width: auto.
Verde: Se ubica el largo de tu marco, los pasos a seguir son los mismos que el ancho.
Gris: Se debe especificar el espacio que ocupará el margen entre el borde y el texto, en este caso se utiliza el px por lo que deberéis especificar con números (10 px, 40 px, 90 px etcétera).
Amarillo: Margen que se ubica por fuera del margo, al igual que con el largo, se puede hacer uso del px o especificar con padding-left, padding-right, padding-center etc.
Blanco: Color del fondo de tu cuadro, aquí se hace uso del HTML aquí os dejo un link en donde podréis obtener toda la gama de colores en códigos HTML Click aquí.
Rojo oscuro: Borde del cuadro, se hace uso del HTML para el color de éste y de igual manera podéis especificar; se da uso al px también.
Azul oscuro: Color del texto dentro del cuadro, se da uso al HTML.

Ahora ¿cómo ordenar los cuadros?

Deberéis crear un div style aparte exceptuando lo siguiente: anchura, altura, borde, color ni nada de lo que decore al cuadro y que logre adjuntar la cantidad de cuadros a ordenar. Si queréis otra fila ordenada tendréis que volver a repetir el mismo procedimiento.

Tablillas de HTML

Las tablillas son lo mismo que cuadros pero con diferente diseño, estas se contienen dentro de otra y entregan la finalidad que desee su creador. Para hacerlo deberéis copiar el código que se entrega más abajo:



Al termino de ubicar el código deberéis finalizarlo con < /div>, no se olviden que sin esto su tablilla se desordenará por completo.

Ahora veremos la oportunidad de situar un texto dentro del cuadro dependiendo del estilo, color y ubicación que nosotros querremos.
Primero tendréis que copiar el código que se enseña más abajo y como siempre finalizarlo con div. El texto se leera en el centro del marco y dentro de el de acuerdo a la ubicación.




Text-Align define la posición en donde se ubica el título.
Font-Size define el tamaño de la letra, la cantidad de números llega a un mínimo de dos dígitos.
Font-Family define la fuente de la letra, Arial Black, Time News Roman etc.
Letter-Spacing acomoda el tamaño entre palabra y palabra, mínimo utilizar 1.5 como máximo 2 para que se vea bien




Recomendable fijarse en la modificación del size dentro del div, ya que puede tener dos tipos de fuentes para que pueda adornarse mucho mejor y dos tipos de colores, uno que se ubique en bordes y otro de relleno.




width ancho de la imagen
height alto de la imagen
brackgroun-image imagen a utilizar
border-left define cuanto espacio habrá entre la imagen y el marco en la parte izquierda de la imagen



Por último si queréis agregar una barra de contenido debajo de la imagen deberéis copiar el siguiente código:

Imagen con un cuadro

Las imágenes publicadas sin adornos son feas y dan mala estética al tema por lo que aquí os dejo un tipo de diseño en el cual rodea a la imagen con un cuadro de color, ustedes podrán editarlo de acuerdo a lo que se enseña más arriba; colores, anchura, largo, posición etc.

Datos básicos de HTML

¿Cómo publicar una imagen?



¿Cómo posicionar un texto o imagen en el medio de tu tema?