HTML

-
El HTML (lenguaje de marcado de hipertexto) se utiliza para dividir un documento, especificar su contenido y su estructura, definir el significado de cada parte , utilizando los elementos de diferentes componentes de una página.
Suele tener varios componentes tanto como archivos como texto, le explicaremos a continuación a partir de la imagen del proceso de una página:



Aquí tenemos una captura de la aplicación que usamos, Dreamweaver CC, es un editor HTML del paquete de Adobe, a simple vista se ve poco y así de primeras apenas se entiende, pero con ayuda explicamos las partes.


Lo primero y fundamental crear un título y un cuerpo (en este caso nos lo hace automáticamente el <title> y <body>) el cual el títulos nos aportará el título del archivo o en este caso, de la página. El cuerpo es todo lo que va a contener y especificar nuestros etiquetas, pestañas o códigos, es la parte más importante porque a partir de ahí, se crea todo.


Esto ya son etiquetas , las cuales pueden ser de todo, en este caso, lo que vemos como <h2> es el Header, que se puede ordenar la importancia por los números (el 1 el más importante) lo cual varía su tamaño, su importancia... 
<hr> igual que <br> son espaciados, saltos de línea del texto, la pequeña diferencia es que el HR contiene una línea marcatoria.
<p> Es el índice de un bloque de texto que se comporta como un párrafo (<strong> lo hace en negrita, <em> en cursiva) y ahi contiene todo el texto que queramos poner al párrafo de la página.


En este caso <p> como se continua de <a> lo convierte en un enlace que nos lleva a otra web, el href= es la referencia y en enlace al cual queremos ir.
<img> como hace referencia a su etiqueta, nos mostrará una imágen, el src= es el directorio de la imagen o enlace del archivo, añadir que el width= nos permite editar el tamaño (tanto pixeles como porcentaje).

Tras editar y crear todo este contenido con sus correspondientes etiquetas (imágenes, textos, enlaces... todo esto dentro del <body>) la página web saldrá así:


Tenemos otros códigos de lectura HTML los cuales no aparecen en esta práctica pero deberíamos aprender:

- Insertar vídeo : <video src=video.webm"><video/>

Con sus parámetros como autoplay, preload, poster, loop... (esto siempre después de poner el enlace)

- Insertar vídeos externos : <iframe src="http://www.youtube.com/embed/Práctica/" <iframe/>

- Insertar audio : <audio src="ejemplo.mp3" controls><audio/>

- Listas ordenadas o no ordenadas : 

<h1> Ejemplo lista <h1/>
<ol> (Ordenada) <ul> (Sin ordenar)
<li> Ejemplo 1 </li>
<li> Ejemplo 2 </li>
<li> Ejemplo 3 </li>

Comentarios

Publicar un comentario

Entradas populares de este blog

Marcadores en Indesign

-
Imagen
InDesign En esta práctica hemos creado un archivo SWF (Flash) en Adobe InDesign, en el cual hemos introducido poca cosa pero útil para archivos de recuento, libros, catálogos...  En este archivo, hemos creado unas 16 páginas, todas enfrentadas y vacías.  A partir de ya crearlas, nos disponemos a crear una especie de señal o marca para situarnos en una página en concreta o que nos defina por donde vamos, nos situamos lo primero en la página maestra para que nos haga la acción en todas las páginas que indique la marca, para eso nos vamos a la pestaña "Textos", a la sección de "Insertar carácter especial" y seleccionamos el que más queramos, en este caso, yo pondré Marcadores. Una vez que apliquemos la forma que queramos para definir nuestra página, ponemos el valor en orden para que se entienda, si indicamos en la primera página el número 1, en las siguientes, se pondrá automáticamente los números que vienen en serie. También se podrá aplicar u...
Leer más

Gifs con Photoshop (Línea del tiempo)

-
Imagen
Línea del tiempo en Photoshop es una función para editar o crear gifs animados desde photoshop de forma sencilla e organizada. Como veremos en la imagen, tenemos en la línea del tiempo el gif creado en partes las cuales se irán reproduciendo por el tiempo que pongamos desde 0 hasta lo que queramos de segundos, podemos ponerlo como Infinito (Loop interminable) para que no pare nunca o lo podemos asignar de una o dos veces. Se pueden crear capas extras además de las que tenemos o eliminarlas, depende si queremos alargar o acortar el gif. Creamos estos momentos de tiempo a partir de las capas fijas que queramos poner, podemos ir poniendo cada uno en su momento para que quede bien el gif que queramos crear. Podemos establecer una capa fija desde el primer momento, lo importante es tenerlo en cuenta en las demás capas y añadir o removerle lo que queramos. Las líneas del tiempo no tienen limite en cuanto a las imágenes que queramos poner, pero eso nos hace que el gif ocupe mu...
Leer más

Banner HTML5

-
Imagen
El banner HTML5 es aquel banner producido con un código insertado para ponerlo directamente en el código fuente base de la página web. Para esto, utilizaremos Bannersnack. Esta página es para crear tanto banners estáticos como dinámicos, sobre todo que facilite al usuario hacerlo, o con plantillas hechas para los novatos, nos permiten insertar imágenes , vídeos, texto... en el banner. Aquí tenemos las capas creadas con su estilo, color, párrafo y orden , para que cada uno esté correctamente puesto.  Tiene opciones de coste, pero las más usadas son gratis y con gran amplitud de opciones. Esta vez pondremos un banner interactivo, de tamaño medio que nos llevará a la web de Preimpresión la cual estamos y otro el cual nos llevará al banner de un compañero nuestro.
Leer más