Aprende fácil y rápido con este blog aprenderás diferentes conceptos de varios programas como Blogger, WordPress, Microsoft Word, Balabolka, Openoffice etc...
Slaider de imagenes
COMO APRENDER HTML CON NOTEPAD ++ Y DREAMWEAVER CS5VIDIOSTUTORIALES CHUSCO36DISEÑO DE PÁGINAS WEB CON WORPRESS Y BLOGGERTUTORIALES DE PROGRAMAS
CAPAS EN EL LENGUAJE HTML Definición de las capas: Un cambio importante en los navegadores web fue la interpretación de código HTML Dinámico (DHTML). Éste permitía el uso de capas o layers que son porciones de página que pueden tratarse de forma independiente y ser modificada de diferentes formas, por ejemplo moverla de un lado a otro, poner una capa encima de otra, etc. El uso de capas permite mejorar el aspecto de nuestra página aplicándole "efectos especiales", por ejemplo hacer que determinados objetos sean visibles sólo cuando hagan falta. Creación de capas: Netscape utiliza la etiqueta <layer> para definir una capa, esta etiqueta era incompatible en los navegadores Internet Explorer que soporta una versión reducida de ellas representada en la etiqueta <div> y su cierre </div>. Entre esas etiquetas podemos escribir cualquier cosa (texto, imágenes, tablas o incluso otra capa). La etiqueta <div> puede incluir el atributo id que incluirá el identificador utilizado para referirnos a esa capa. El atributo style indicará el estilo aplicado a la capa, aunque esto lo estudiaremos a fondo en el próximo tema, veremos brevemente algunos de las posibles propiedades que se pueden aplicar a "style": • position: indica la posición de la capa con respecto a la totalidad de la ventana del navegador (absolute) o con respecto a la capa que lo contiene (relative) • indica la posición vertical en píxeles en la que empezará la esquina superior-izquierda de la capa. • left: indica la posición horizontal en píxeles en la que empezará la esquina superior-izquierda de la capa. • background: nos permite indicar el color de fondo de la capa aceptando tanto colores predefinidos como códigos hexadecimales. • width y height : indican el ancho y alto de la capa respectivamente. Acepta tanto porcentajes como píxeles. • z-index: establece el orden en el que el navegador debe mostrar cada capa, si tiene el valor 1 indica que será la primera que el navegador visualizará, el 2 la siguiente y así sucesivamente, por lo tanto cuanto mayor sea el número más encima estará una capa del resto. La sintaxis de los estilos es la siguiente "propiedad:valor" y se separan entre ellas mediante ";" A continuación veremos un ejemplo de cómo crear una capa de 100x100 píxeles de color azul situada a 150 píxeles de distancia vertical y 300 píxeles de distancia de la esquina superior-izquierda del navegador: <html> <body> <div id="micapa" style="position:absolute; top:150px; left:300px; background:red; width:100px;height:100px;"> </div> </body> </html> Aquí de abajo vemos como se mostrarán las etiquetas y atributos.
Ahora veremos el uso de la propiedad “z-index” para ello crearemos una capa de color rojo sobre la capa anterior, pero desplazada 20 píxeles hacia abajo y hacia la derecha: <html> <body> <div id="capa_azul" style="position:absolute; top:150px; left:300px; background:blue; width:100px;height:100px;z-index:1"> </div> </div> <div id="capa_roja" style="position:absolute; top:170px; left:320px; background:red; width:100px;height:100px;z-index:2"> </div> </body> </html> Aquí de abajo vemos cómo se mostrarán las etiquetas y atributos.
En el ejemplo de ahora, utilizaremos la propiedad z-index para crear sombra en un texto. Para ello definiremos una capa con el texto “Bienvenido” en color negro y otra capa debajo con el mismo texto pero en color gris desplazada 5 píxeles hacia abajo y hacia la derecha: <html> <body> <div id="capa_primera" style="position:absolute; top:50px; left:300px; width:200px;height:200px;z-index:1"> <font size="7" color="black">Bienvenido</font> </div> <div id="capa_segunda" style="position:absolute; top:60px; left:305px; width:200px;height:200px;z-index:2"> <font size="7" color="gray">Bienvenido</font> </div> </body> </html> Aquí de abajo vemos cómo se mostrarán las etiquetas y atributos
IMPORTANTE: Si no especificamos la propiedad “z-index” las capas se mostrarán en el orden en el que se escribieron (es decir primero se visualizar; la que se escriba antes).
MARCOS EN EL LENGUAJE HTML Los marcos son divisiones de la ventana del navegador, de manera que cada uno de ellos puede mostrar una web diferente. Cada marco se comporta como una página HTML independiente y tiene su propio código fuente. Por tanto existirá un documento HTML por cada marco y un documento HTML global o contenedor que indicará como debe de realizar las divisiones. El archivo global o contenedor no tendrácuerpo, en el lugar de la etiqueta <body> irá la etiqueta <frameset> y su cierre </frameset>. Dicha etiqueta debe contener los atributos cols y/o rows para dividir la página en columnas o filas. Pudiendo recibir valores tanto en porcentaje como en píxeles. Por ejemplo si queremos dividir la pantalla en 2 columnas que ocupen el 25% y 75% respectivamente lo realizaremos del siguiente modo: <html> <frameset cols="25%,75%"> <frame "/> <frame "/> </frameset> </html> También se puede expresar en píxeles, por ejemplo si queremos dividir la pantalla del navegador en 3 filas de 200,400 y 300 píxeles respectivamente: <html> <frameset rows="200px,400px,300px"> <frame "/> <frame "/> <frame "/> </frameset> </html> Lo habitual es dejar que el último marco ocupe el resto de la pantalla, para lo cual usaremos el asterisco (*). <html> <frameset rows="200px,400px,*"> <frame "/> <frame "/> <frame "/> </frameset> </html> Incluso podemos especificar proporciones de lo que queda de pantalla, por ejemplo si queremos crear una web dividida en tres columnas cuyo primer marco ocupe 100 píxeles , el segundo ocupe un tercio del resto de pantalla y el tercer marco 2 tercios del resto de pantalla se utilizaría el siguiente código: <html> <frameset cols="100px,*,2,*"> <frame "/> <frame "/> <frame "/> </frameset> </html> Definiendo un marco (frame): Dentro de la etiqueta del conjunto de marcos <frameset> se encerrarán las definiciones de cada uno de los marcos mediante la etiqueta sin cierre<frame/>. Para indicar el archivo HTML que se mostrará en dicho marco debemos emplear su atributo src asignándole como valor la URL de dicho archivo. En este atributo podremos escribir bien la ruta de un archivo de nuestro servidor, bien la dirección de otra web o bien la URL de una imagen que queramos mostrar en dicho marco. <html> <frameset cols="25%,25%,*"> <frame src="productos.html"/> <frame src="http://www.google.es"/> <frame src="paisaje.jpg"/> </frameset> </html> Por defecto se suelen mostrar bordes para cada uno de los marcos, para controlar si tendrá borde o no usaremos el atributo frameborder con los valores "yes" o "no".El ancho delborde puede controlarse con su atributo border así como el color por medio del atributo bordercolor. <html> <frameset cols="25%,75%"> <frame src="productos.html" border="2px" bordercolor="#ffa301"/> <frame src="paisaje.jpg"/> </frameset> </html> Para controlar los márgenes horizontales y verticales del marco emplearemos marginwidth y marginheight respectivamente. <html> <frameset cols="50%,*"> <frame src="productos.html" marginwidth="70px" marginheight="90px"/> <frame src="paisaje.jpg"/> </frameset> </html> El atributo scrolling se usa para especificar si se desea o no barra de desplazamiento en el marco siendo 3 sus posibles valores: -"yes": Muestra siempre la barra de desplazamiento. -"no": Nunca aparece -"auto": Aparece sólo cuando es necesaria. Con el atributo noresize se puede impedir que el usuario cambie el tamaño de un marco, este atributo no lleva asignado valor. Navegadores que no soportan marcos: Aunque hoy en día raramente encontramos un navegador que no soporte marcos, HTML definió la etiqueta <noframes> y su cierre </noframes> para encerrar el código HTML a mostrar en ese caso. <html> <frameset rows="25%,*"> <frame src="menu.html"/> <frame src="principal.html"/> <noframes> <body> Lo sentimos, pero su navegador no soporta marcos. </body> </noframes> </frameset> </html> Anidamiento de marcos: Al igual que vimos con las tablas, un marco puede contener a su vez a otro conjunto de marcos, para ello bastará introducir otro <frameset> dentro del documento HTML mostrado dentro de alguno de los dos marcos. Supongamos que queremos hacer una web que tenga la siguiente división de marcos: Marco1Marco2 Marco3 La primera división que haremos será la de las 2 columnas, para ello crearemos un archivo llamado "principal.html" con el siguiente código: <html> <frameset cols="50%,*"> <frame src="izquierda.html"/> <frame src="derecha.html"/> </frameset> </html> El Marco1 contendrá una web llamada "izquierda.html" y el otro marco otra web llamada "derecha.html" con el siguiente contenido: <html> <frameset rows="50%,*"> <frame src="arriba.html"/> <frame src="abajo.html"/> </frameset> </html> A su vez hemos dividido el archivo de la columna derecha en 2 marcos (Marco2 y Marco3) que contendrán a su vez los documentos "arriba.html" y "abajo.html" respectivamente. Enlaces y marcos:
Podemos abrir una página en un marco determinado para ello debemos antes darle un nombre en el archivo contenedor mediante el atributo <name> </name> de la etiqueta <frame>: <html> <frameset cols="20%,*"> <frame src="enlaces.html" name="marco_izq"/> <frame src="principal.html" name="marco_der"/> </frameset> </html> Dentro del archivo "enlaces.html" crearíamos los enlaces especificando mediante el atributo target="" el nombre del marco donde queremos abrir el link: <html> <a href="http://www.google.es" target="marco_der">Ir a google <a href="http://www.yahoo.com" target="marco_der">Ir a yahoo </html>
Estructura de un formulario Un sitio web , no solamente nos proporciona información , a veces es el usuario el que le suministra o envía información a la web añadiendo interactividad a la misma. Una de las formas de enviar información es a través de los formularios que tienen la misma utilidad que los formularios de papel en la vida cotidiana. Los formularios se construyen por medio de la etiqueta <form> y su cierre </form> que marcará el comienzo y fin del mismo. El atributo principal de <form> es acción que le indica qué debe hacer con los datos, uno de los posibles valores que podría tomar es "malito:direccionemail@dominio" para mandar los datos escritos a una determinada dirección de correo. También puede indicar la URL del script al que se enviarán los datos (éste caso se estudiará en el tema de PHP). El atributo method indica cómo debe enviarse la información, siendo 2 sus posibles valores: -GET: La información se envía junto con la URL de la web. -POST: La información se envía dentro del paquete de petición HTTP. Con el atributo enctype especificamos cómo debe codificarse la información durante su transmisión. El valor que se le suele asignar es "text/plain" que indica que los datos se enviaran como texto plano. <form action="mailto:profe@servi.com" method="get" enctype="text/plain"> <input …../> <input …../> … </form> Escribimos este código <form action="mailto:profe@servi.com" enctype="text/plain" method="get"><input type="text" /><input type="text" /></form> Estas etiquetas y atributos se mostraran como esta aqui abajo.
Dentro de la etiqueta <form> encontraremos etiquetas <input/> que marcan cada uno de los campos de entrada del formulario por
los que se le solicita informaciôn al usuario. Toda entrada ha de identificarse con el atributo name por ejemplo le daremos de
valor a una entrada “CP” si lo que vamos a pedirle allí es su Código Postal. Los diferentes tipos de entradas que se pueden
usar se suele indicar mediante el atributo type cuyos posibles valores veremos a continuación. Entradas de tipo texto:Se indican
escribiendo el atributo type con valor igual a “text” y se usan para pedirle al usuario la introducción de un dato en formato
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Si se añade el atributo value hace que la entrada tome un determinado valor inicial o por defecto: <form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”> Provincia:<input name=”provincia” type=”text” value=”granada”/> </form> Estas etiquetas y atributos se mostraran como esta aqui abajo.
Botones de verificación (Check Box):
A diferencia del Radio Button permite marcar más de una opción a la vez.
El valor utilizado para type es “checkbox”.
Otra diferencia con Radio Button es que en este caso sí se le dará un nombre
diferente a cada entrada:
<input name=”casa” type=”checkbox”/>Tengo casa propia
</form>
Estas etiquetas y atributos se mostrarán como esta aqui abajo.
Admite también el atributo checked pudiendo estar en más de una opción.
Lista de selección (Pull Down List):
Permite elegir una opción entre varias posibles. Se suele emplear cuando la lista de opciones es demasiado extensa para usar un Radio Button. Esa lista se despliega al hacer clic sobre ella.
La manera de escribir esta entrada ya no es a través de la etiqueta.
<input> sino con la etiqueta <select> y su cierre </select> que contendrán las diferentes opciones indicadas mediante la etiqueta <option/>.
Estas etiquetas y atributos se mostraran como esta aqui abajo.
El atributo selected permite seleccionar una opción por defecto.
área de texto: Se usa cuando queremos que el usuario introduzca un texto de más de una línea (párrafo). Se suele emplear para recoger opiniones o comentarios. No utiliza tampoco la etiqueta <input/> sino las etiquetas <textarea> y su cierre </textarea>. Los atributos que admite son name (para el nombre de la entrada), cols (para indicar el número de columnas que tendrá expresado en caracteres) y rows (para indicar el número de filas que se tendrá). Otro atributo que admite es wrap siendo éstos sus posibles valores: -“off”: No parte la línea automáticamente y el texto se envía tal .Si se quiere partir la línea habrá que pulsar el retorno de carro. El texto se manda tal y como se tecleó. -“soft”: Al llegar al final del recuadro automáticamente continúa escribiendo en la línea de abajo. El texto se manda tal y como se tecleó. -“hard”: Al llegar al final del recuadro automáticamente continúa escribiendo en la línea de abajo. El texto se manda tal y como se ve en pantalla. <form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”> Comentarios y sugerencias: <textarea name=”comentario” cols=”30″ rows=”10″ wrap=”hard”> </textarea> </form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Botón enviar (Submit): Para enviar los datos del formulario debemos crear un botón de enviar, para este fin se usa la etiqueta <input> con su atributo type con valor “submit” de manera que cuando el usuario pinche sobre él se ejecutará la acción indicada en el atributo action del formulario. Se puede usar el atributo value para cambiar el texto por defecto que aparece en el botón. <form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”> Nombre:<input name=”nombre” type=”text”/></br> Apellidos:<input name=”apellidos” type=”text”/> <input type=”submit” value=”Enviar el formulario”/> </form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Podemos usar una imagen como botón de enviar utilizando el valor “image” en
lugar de “submit” para el atributo type.
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Acepta los atributos propios de la etiqueta
Botón borrar (Reset):
Si se quieren borrar los datos escritos en un formulario haremos uso del atributo type con el valor “reset”. Acepta también el atributo value para cambiar el texto mostrado.
<input type=”submit” value=”Enviar el formulario”/> <input type=”reset” value=”Borrar datos”/> </form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Organización de las entradas de un formulario: Cuando utilizamos formularios con una gran cantidad de entradas se puede organizar el formulario mediante conjuntos de entradas, para ello se encerrarán las entradas con las etiquetas <fieldset> y </fieldset> que además pueden contener la etiqueta <legend> y </legend> para encerrar el nombre del conjunto. <form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”><fieldset><legend>Datos Personales</legend>Nombre:<input name=”nombre” type=”text”/>Apellidos:<input name=”apellidos” type=”text”/></fieldset><fieldset> <legend>Datos Bancarios</legend>Número de cuenta:<input name=”cuenta” type=”text”/></fieldset> <input type=”submit”/> </form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
TABLAS EN EL LENGUAJE HTML Definición de una tabla: Uno de los elementos más importantes en HTML son las tablas, ya que éstas nos van a permitir distribuir y tener ordenados en la pantalla los elementos de nuestra web. Para definir el comienzo y fin de una tabla se utilizan las etiquetas <table> y </table>. Uno de los atributos que admite es border="" que permite especificar la anchura en píxeles de sus bordes. Y el atributo bordercolor="" para especificar el color de sus bordes. Para definir su anchura se utilizará width y para su altura height indicando el valor absoluto en píxeles o en porcentaje de pantalla ocupado. Si a estos atributos no se le asigna valor la tabla se ajustará al tamaño de su contenido. Para alinear emplearemos el atributo align permite alinear la tabla horizontalmente a la izquierda ("left"), derecha ("right") o centro ("center"). Escribimos lo que hay dentro del cuadro de abajo y veremos el siguiente cuadro. <table border=”2″ bordercolor=”red” width=”20%” height=”20%” align=”center” bgcolor=”green”> <tr> <td><table border=”2″ bordercolor=”red” width=”20%” height=”20%” align=”center” bgcolor=”green”> <tr> <td> </td> </tr> </table> </td> </tr> </table> Aquí debajo veremos como se muestran las etiquetas y atributos.
El atributo "bgcolor" se usa para asignar un color de fondo a la tabla. Definición de una fila: Una fila es cada una de las divisiones horizontales de la tabla y estará formada por una o más celdas. Las filas (Table Row) se definen con las etiquetas <tr> y </tr> Se puede cambiar el color de una fila usando bgcolor. *definición de una celda: Una fila es cada una de las divisiones verticales de una fila. Las celdas se definen con las etiquetas <td> y </td> Podemos especificar la alineación del contenido de una celda tanto horizontalmente utilizando align (“left”, “right” o “center”) como verticalmente utilizando valign (“top”,”middle” o “bottom”). Podemos modificar el ancho de una celda utilizando width y su alto usando height, escribiéndolo bien en píxeles o bien en porcentaje con respecto a toda la fila. Tanto los atributos align, valign como width y height se pueden aplicar a la etiqueta <tr> si queremos que esos valores se apliquen a todas las celdas de una fila. <table border=”5px” width=”400px”> <!-Aquí comienza la fila 1 –> <tr bgcolor=”yellow” align=”center”> <td width=”70%”> Artículo </td> <td width=”30%”> Precio </td> </tr> <!- Aquí comienza la fila 2 –> <tr> <td> Zapatos de piel </td> <td align=”right”> 60 € </td> </tr> </table> Aquí debajo veremos como se muestran las etiquetas y atributos.
Artículo
Precio
Zapatos de piel
60 €
Espaciado entre las celda: Podemos especificar los márgenes internos de cada celda, es decir el espacio entre sus bordes y su contenido mediante el atributo cellpadding se expresa en píxeles y su valor por defecto es 1. Así mismo se podrá indicar también la separación entre los bordes de 2 celdas contiguas con el atributo cellspacing, su valor por defecto es 2. Ambos atributos irán en la etiqueta <table> Expandir celdas: Por defecto, cada una de las filas de una tabla debe tener el mismo número de celdas pero en ocasiones puede convenir que una celda de una determinada fila expanda el espacio ocupado por otra contigua. Para ello se utilizan los atributos colspan indicando el número de celdas a la derecha que queremos que expanda: <table border=”5px” width=”400px”> <tr> <td> celda 1 <td> celda 2 </td> </tr> <tr> <td colspan=”2″> celda 3 expandida con celda 4 </tr> <>table border=”5px” width=”400px”> <tr> <td rowspan=”2″> celda 1 expandida con celda 3 </td> <td> celda 2 </td> </tr> <tr> <td> celda 4 </td> </tr> </table> Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro. celda 2
celda 1
celda 2
celda 3 expandida con celda 4
celda 1 expandida con celda 3
celda 2
celda 4
O el atributo rowspan indicando el número de celdas hacia abajo que ocupará: <table border=”5px” width=”400px”> <td rowspan=”2″> celda 1 expandida con celda 3 </td> <td> celda 2 </td> </tr> <tr> <td> celda 4 </td> </tr> </table> Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro. celda 2
celda 1 expandida con celda 3
celda 2
celda 4
Uso de las tablas para organizar una web: Como hemos mencionado anteriormente, uno de los usos más frecuentes de las tablas es para organizar el contenido de una web. Para este fin se usan tablas con el borde igual a cero, de manera que la tabla en sí no es visible pero conseguimos que cada elemento de la web esté en su lugar. <table border=”0px” width=”600px” align=”center”> <!– El texto aparecerá arriba en la primera fila –> <<“–a–>tr align=”center”> <td><h1> Don Quijote </h1> </td> </tr> <!– La imagen aparecerá abajo–> <tr align=”center”> <td><img src=”../imagenes/quijote.jpg” width=”186″ height=”139″/> </tr> </table> Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro
LISTAS EN EL LENGUAJE HTML En muchas ocasiones nos puede interesar disponer de una lista de elementos en una página web, para mostrar contenidos de forma ordenada. En HTML existen 3 tipos de listas: *Lista no numerada: Son una sucesión de elementos o ítems sin enumerar para ello utilizaremos la etiqueta <ul> y su cierre </ul> para indicar el comienzo y fin de la lista no ordenada (Unordered List). Dicha etiqueta encerrará los diferentes elementos (List ítem) indicados por la etiqueta <li> y su cierre </li> Podemos usar el atributo type para indicar el símbolo a emplear para cada elemento, sus posibles valores son "circle" ,"disc" (valor por defecto), o "square": <ul type="circle"> <li>Disco duro</li> <li>Memoria</li> </ul> Aquí abajo veremos como se muestra las etiquetas y atributos.
Disco duro
Memoria
Lista numerada: Son una sucesión de elementos o ítems enumerados. Utilizaremos la etiqueta <ol> y su cierre </ol> para indicar el comienzo y fin de la lista ordenada (Ordered List). Dicha etiqueta encerrará sus diferentes elementos (List Ítem) indicados por la etiqueta <li> y su cierre </li> <ol type”A”> <li>Disco duro</li> <li>Memoria RAM</li> <li>Pantalla</li> Aquí abajo veremos como se muestra las etiquetas y atributos.
Disco duro
Memoria RAM
Pantalla
Al igual que las listas no numeradas, admiten el atributo type para indicar el tipo de numeración utilizada, siendo los posibles valores: -“A” para utilizar letras mayúsculas. -“a” para letras minúsculas. -“I” para números romanos en mayúscula -“i” para números romanos en minúscula. -“1” para números árabes. (valor por defecto) Se puede modificar el número con el que comenzará la lista numerada a través de su atributo Start e incluso modificarlo en mitad de la lista con el atributo value. <ol start=”3″> <li>Disco duro</li> <li>Memoria RAM </li> <li value=”20″>Pantalla</li> <li>Teclado</li> <li>Tarjeta de red</li> </ol> Aquí abajo veremos como se muestra las etiquetas y atributos.
Disco duro
Memoria RAM
Pantalla
Teclado
Tarjeta de red
Lista de definiciones: Se utilizan para mostrar una sucesión de definiciones (normalmente en diccionarios web o textos legales). Para ello se utilizan las siguientes etiquetas: <dl> y </dl> : Indica el comienzo y fin de la lista de definiciones <dt> y </dt> : Encierra el término que se va a definir (normalmente suele destacarse tabulando la definición) <dd> y </dd> : Encierra a la definición. <dl> <dt>Casa:</dt> <dd>Construcción con el fin de ser habitada.</dd> <dt>Edificio:</dt> <dd> Aquí abajo veremos como se muestra las etiquetas y atributos.
Casa: Construcción con el fin de ser habitada.
Edificio:
Construcción en varios niveles de altura.
Las listas pueden anidarse, para ello basta con introducir una etiqueta de lista dentro de una etiqueta
<ol type="A">
<li>Dispositivos Magnéticos:
<ul type="square">
<ul type="square">
<li>Disco Duro</li>
</ul>
</ul>
<p> </li>
<li>Disquete</li>
</ol>
</ol>
<ul>
<li>Dispositivos Ópticos
<ul type="circle">
<ul type="circle">
<li>CD-ROM</li>
</ul>
</ul>
<p> </li>
<li>DVD</li>
</ul>
Aquí abajo veremos como se muestra las etiquetas y atributos.
Un mapa en HTML es una especie de combinación entre una imagen y varios enlaces. De manera que, dependiendo de la zona de la imagen que pinchemos accederemos a un enlace u a otro. Los mapas son usados frecuentemente para acceder a las diferentes web de una empresa por medio de una imagen del país o territorio por el que se extiende. mapa
Un mapa se define con la etiqueta <map> especificando su nombre mediante el atributo name. La etiqueta <map> contendrá a su vez etiquetas <area> que definirán las distintas zonas de la imagen que serán enlaces. Cada una de las etiquetas <area> contendrá un atributo shape que indicará la forma del área definida pudiendo tomar los siguientes valores: • "rectangle" o "rect" para definir una zona rectangular. • "circle" o "circ" si es un área circular • "polygon" o "poly" si es una zona con forma de polígono. • "default" se utiliza para referirse al resto de la imagen que no ha sido definida con ninguna región. Para cada tipo de área habrá que definir sus coordenadas mediante el atributo coords que varía su valor en función del tipo de forma escogida: • Para los rectángulos habrá que indicar las coordenadas de la esquina superior izquierda (x1,y1) y la esquina inferior derecha (x2,y2). • Si es un círculo habrá que especificar el centro (x,y) junto con el radio r • Si es un polígono habrá que dar las coordenadas de cada uno de sus vértices (x1,y1), (x2,y2), ….(xN,yN). Con el atributo href="" indicaremos la URL a la que enlazará dicha área, en caso de no desear establecer ningún enlace sustituiremos este atributo por nohref (al que no le acompaña ningún valor). Al igual que en las imágenes, se puede usar alt para mostrar un texto alternativo en el caso que el navegador no pueda mostrarla. Veamos la utilidad de los mapas con un ejemplo en notepad++: <html> <head> </head> <body> <map name="capa_mapa"> <area shape="poly" coords="0,0,415,150" href="href="www.google.es"/> <area shape="poly" coords="0,180,415,650" href="href="www.idela.es"/> </map> <img src="../imagenes/caja_mapa.jpg" usemap="#capa_mapa"> </body> </html> Ejemplo en Adobe Dreamwearver: <body> <img src="../imagenes/capa_mapa.jpg" alt="url de la capa" width="415" height="650" usemap="#Map" /> <map name="Map" id="Map"> <area shape="poly" coords="6,6,411,4,410,183,3,168" href="http://www.google.es" alt="google.es" /> <area shape="poly" coords="5,173,413,185,413,372,6,370" href="http:www.ideal.es" alt="ideal.es" /> </map> </body> Los se mostrarán como aquí abajo.
LOS ENLACES (LINKS) EN EL LENGUAJE HTML Los enlaces o hipervínculos son justamente la característica más importante del lenguaje HTML. Un enlace es una conexión directa entre un elemento del documento web (ya sea hipertexto, imágenes, botones…) y: -Otro documento HTML. -Otro punto del mismo documento HTML (ancla o anchor) -Otro recurso de Internet (por ejemplo un archivo PDF). Se basan en la etiqueta <a>, todo aquel elemento de la web encerrado entre esta etiqueta constituyen un enlace. Para indicar el recurso enlazado se usa el atributo href="" con la URL del mismo que puede ser: Un recurso perteneciente a un dominio diferente que el documento: Habrá que indicar la URL completa del recurso (incluido el protocolo): Pinche en la parte de abajo en "este" Pinche aqui y veras como te llevara al enlace Ideal en la URL este enlace para ver el diario Ideal <a href="http://www.ideal.es">Este</a> enlace para ver el diario Ideal. Un recurso perteneciente al mismo dominio que el documento: Cuando el enlace es a otro documento web dentro de nuestro propio dominio bastará con indicar el nombre del recurso si ésta en la misma carpeta: Al pinchar veras como va al temario que ésta en el misma carpeta <a href="temaprimero.html"> este enlace para el tema 1 Pinche aquí y veras como te lleva al temario 1 en una carpeta diferente este enlace para el tema 1 A otro punto del mismo documento (ancla, anchors o enlace interno): Para crear un enlace dentro de nuestro mismo documento HTML primero debemos de definir cada una de las posiciones o anclas donde queremos enlazar. Los anclas se crean con el atributo name seguido del nombre que queramos darle. Cuando queramos enlazarlos basta con poner # seguida del nombre que le dimos al ancla. Veámoslo en el siguiente ejemplo: <html> <body> <a href="#primera">Pincha aquí para ir al primer párrafo</a> <a href="#segunda">Pincha aquí para ir a la segundo párrafo</a> <a href="#tercera">Pincha aquí para ir a la tercer párrafo</a> <a name="primera"></a> <h2>Sección primera del párrafo</h2> <a name="segunda"></a> <h2>Sección segunda del párrafo</h2> <a name="tercera"></a> <h2>Sección tercera del párrafo</h2> </body> </html> Está etiquetas y atributos se muestra como aquí abajo. Pinche aquí para ir a la primera sección Pinche aquí para ir a la segunda sección Pinche aquí para ir a la tercera sección Sección primera Contenido de la sección 1 Contenido de la sección 2 Sección segunda Contenido de la sección 3 Sección tercera También podemos acceder a las anclas de un documento desde otro, por ejemplo si quisiéramos acceder desde otro documento a la sección segunda del ejemplo anterior (supongamos que se guardó en un fichero llamado "libro.html"): Pinche aquí para ver <a href="libros.htm#segunda"> aquí para ver la sección 2 de la otra web Pinche aquí para ver aquí para ver la sección 2 de la otra web. Para cambiar la ventana donde se abrirá el enlace utilizaremos el atributo target="" que puede tomar los siguientes valores: - "_self" : Abrirá el enlace en el mismo frame o marco que lo contenía (es el valor por defecto). - "_blank": Fuerza al enlace a abrirse en una nueva ventana (o pestaña) del navegador. - "_parent": Abre el enlace en el conjunto de marcos (frameset) padre del marco actual. - "_top": Fuerza al enlace a abrirse en el 100% de la ventana del navegador. - "nombre_del_marco": Abre el enlace en el marco indicado. Podemos crear imágenes que a la vez sean enlaces para ello bastará con anidar la etiqueta <img> dentro de la etiqueta <a>: Como veremos con este enlace <a href="http://www.google.es"> <img src="logo_google.jpg"/></a>
Para facilitar agilizar la carga de páginas en Internet se suelen usar los thumbnails o miniaturas que son versiones reducidas de ellas que permiten previsualizarlas y descargar la imagen entera sólo en caso de estar interesados. Para crear este tipo de imágenes existen multitud de programas, un ejemplo de ellos es "eXcale".
LAS IMÁGENES EN EL LENGUAJE HTML Un documento web podrá contener imágenes si hacemos uso de la etiqueta <img> (no tiene etiqueta de cierre). Con el atributo src (que proviene de SouRCe) podemos indicarle la URL del fichero de imagen que tomará como fuente. <img src="imagenes/paisajes.jpg"> aquí debajo veremos lo que se muestra con este comando con su tamaño real en píxeles:
Imágenes con la ruta absoluta. Con este comando <img align="right" src="paisajes.jpg"/> También podemos poner la ruta absoluta de la imágenes teniendo la paginas HTML y la imágenes en el mismo lugar en el escritorio o en una carpeta los dos juntos.También con el eXcale podemos definir el tamaño aquí a la derecha veremos como se muestra la imagen escalada 200px por 200px. images
Las imágenes con el tamaño que queremos que se muestre en la pagina HTML. Si no especificamos nada la imagen se mostrará con su tamaño real pero podemos cambiarlo con los atributos width y height indicando al navegador el ancho y alto respectivamente de la imagen tanto en píxeles como en porcentaje con respecto al elemento que lo contiene aquí debajo se muestra como quedará:
Podemos asignarle un borde a la imagen de un determinado grosor mediante el atributo border o incluso hacer que se muestre un texto alternativo con alt , para que cuando la imagen no pueda ser cargada, nos hagamos una idea de su contenido con las etiquetas y atributos. <img src="imagenes/paisajes.jpg border="4px" alt="Paisaje"/>
La alineación del texto con respecto a la imagen también es posible mediante align tanto horizontalmente a la izquierda (left) o derecha (right) como verticalmente arriba (top) , abajo (bottom) o en medio (middle): <img src="imagenes/paisajes" align ="middle"/>
Cuando tenemos más de una imagen podemos determinar el espacio horizontal y vertical entre ellas con los respectivos atributos hspace y vspace. Especificando la separación entre ellas: <img src="../imagenes/imagen1.jpg" hspace="10px"/> <img src="../imagenes/imagen2.jpg" hspace="10px"/> <img src="../imagenes/imagen3.jpg"/> Se mostrara como ésta aquí abajo.
En este vidiostutoriales veras los pasos de blogger en YOUTUBE
Aquí explicare los primeros pasos de Blogger estos primeros pasos estarán aquí explicados paso a paso como están en el videotutorial.
Aquí empezaremos a crear un Blogger y te preguntaras ¿Porque crear un blogger? Tener un blog tiene muchas ventajas tal vez solo lo quieras para promocionar tu marca de empresa o vender tus productos. O tener una pagina personal donde le muestres al mundo quien eres, lo bien que escribes, lo bien que cantas, lo que sabes de tecnología, lo que sabes de cocina, lo que sabes de fontanería, lo que sabes de electricidad etcétera. Es decir todo que aquello tu sabes y normalmente no lo puedes hacer a menudo en tu vida personal, es una forma de revitalizar nuestros contenidos y conocimientos en Internet, a menudo que no te dejan hacer en tu vida habitual por no poderlo hacerlo por no tener ese puesto de trabajo que no tienes o si tienes y quieres que otros aprendan estos conocimientos llegando a muchos potenciales usuarios y clientes. Afortunadamente abrir un blog es muy muy fácil ¡ he incluso gratuito!. En este videotutorial te voy a enseñar como abrir un blog en blogger, en el portal de gloogle, para que puedas tener tu propio espacio en Internet y compartir con el mundo lo que piensas y difundir tus contenidos de forma fácil y posicionaros bien, así que si no tienes un blog en estos próximos videostutoriales vamos aprender paso a paso como crear un blog en blogger con un blog profesional para montar tu propio blog, Lo primero que tenemos que hacer es tener una cuenta de google si ya la tienes creada pasa este vidio más adelante. ¡Si no es así!, sigue los siguientes pasos para crear una cuenta en Gmail. Tendrás que pinchar en la pagina principal de google en Gmail. Pero si ya has creado el Gmail, escribe aquí tu Gmail y contraseña, con esto harás que cuando abras blogger, ya no tengas que escribir de nuevo tu Gmail y contraseña. Después lo veras más claro más adelante en el videotutorial. Si no tienes creado un Gmail sigue los siguientes pasos. Nos iremos a donde pone Crear cuenta y pinchamos en Crear cuenta.
En este formulario tendrás que rellenar los datos como nombre, apellidos, el nombre de Gmail que quieres, la contraseña dos veces, la fecha, el año, el sexo y tal ves tengas que pinchar no soy un robot, también en Acepto los términos y pinchar en siguiente paso.
Esto es lo que veras cuando se inicie tu Gmail si lo dejas abierto entraras en blogger sin necesidad de contraseña solo te pidiera que lo enlaces con tu Gmail eso ya tu decides con un seudónimo o con tu nombre o nombre de empresa. Ahora pincharemos aquí en este cuadrado color gris y veremos otra ventana.
Podemos escribir Blogger para buscarlo pero lo vamos hacer de otra manera más rápida. Pinchamos aquí en la zona punteada al lado de imagen y veras unas opciones buscamos Blogger y pinchamos en Blogger. Este es mi blog Tutoriales de aprendizaje fácilmente y rápido si quieres puedes ver como va quedando mi blog y aprender muchas más cosas en mi blog. Cuando entras en este panel Blogger por primera ves no veras ningún blog como ves aquí para crear un blog pincha en Nuevo blog.
Para dividir las secciones de nuestra web podemos utilizar líneas horizontales mediante la etiqueta <hr/> que es a la vez de apertura y cierre. Podemos indicar el ancho de estas líneas con el atributo width que puede estar expresado en píxeles o en porcentaje de la ventana del navegador:
<html> <body> <hr width="200px"/>Esta linia ocupara 200 pixeles </body> <html>
Está etiquetas y atributos se mostra como aquí abajo.
También admite el atributo align , pudiendo tomar por valores left, right o center o el (valor por defecto): <hr width="50% alingn="left"/> <!-- Esta línia estará alineada a la izquierda --> veras como ésta a la izquierda.
Está etiquetas y atributos se mostrara como aqui ahajo.
Así como el grosor de la línea con el atributo size expresado en píxeles y alinear con alingn="left. center,right"> Esta línia estará que se vera de ésta forma: <hr width="70% size="13"/>
Está etiquetas y atributos se mostrara como aqui ahajo.
Para desactivar la sombra en la línea usaremos el atributo noshade al que no se le asigna ningún valor se vera de ésta forma: <hr width="70%" size="13" noshade/>
Está etiquetas y atributos se mostrara como aqui ahajo.
O colorearla con el atributo de color y se vera de ésta forma: <hr width="70%" size="13" noshade color="#FC0101">
Está etiquetas y atributos se mostrara como aqui ahajo.
UNIDADES DE MEDIDA DE LOS VALORES DE LOS ESTILOS EN CSS EN EL LENGUAJE HTML
Muchas propiedades de los estilos reciben como valor una cifra que expresa una cantidad que puede expresarse en diferentes unidades de medida:
- Centímetros (cm) - Milímetros (mm) - Pulgadas (in): Una pulgada equivale a 2,54 centímetros. - Puntos (pt): Una pulgada equivale a 72 puntos. - Píxeles (px) - Picas (pc): Una pica son 12 puntos. - El tamaño relativo con respecto al de la fuente actual (em): Por ejemplo si escogemos como valor "2em" significa que el será dos veces el tamaño del establecido por defecto. - Tamaño relativo con respecto a la altura de la letra "x" en minúscula (ex). - Porcentaje (%): Con respecto al tamaño actual. Por ejemplo un valor igual a 50% indicaría que el tamaño será la mitad del establecido. <html> <head> <style type="text/css"> p { font-size:1in; } </style> </head> <body> <p>Este es el contenido del</br> párrafo </p> </body> </html>
Estas etiquetas y atributos se mostraran como esta aqui abajo. Este es el contenido del párrafo
LOS
COMENTARIOS EN EL CÓDICO DENTRO DEL LENGUAJE HTML
A medida que crece el tamaño de un fichero HTML se
puede hacer muy difícil seguir el código escrito hasta para la persona que lo está diseñando. Para facilitar su seguimiento se pueden añadir comentarios a modo de “notas” por medio de la etiqueta de apertura estas notas no se mostrarán en el navegador.
<!– y la de cierre –> <html> <head> <title>Estadisticas</title> </head> <!–Aquí empieza el cuerpo de la pagina–> <body> </body> </html>
Estas etiquetas y atributos se mostrarán como aquí.
Como ves no se muestra en el navegador lo veras en blanco, pero si en tu
página
En este vidiostutoriales veras los pasos de COMO HACER UN VIDIOTUTORIAL en YOUTUBE.
Aquí explicare los primeros pasos como hacer un buen VIDIOTUTORIAL
los primeros pasos para crear un buen vidiotutorial para YouTube.
Para crear un buen vídeo tutorial donde la planificación las herramientas necesarias el contenido y la conclusión de tus publicaciones de los
videotutoriales harán uno de los más vistos en internet primeros pasos para
crear un buen vídeo tutorial para youtube o proyecto personal y profesional
los videotutoriales pueden parecer una tarea simple pero sin embargo debe ser
una guía paso a paso que busca enseñar una tarea y debe tener en cuenta que va
dirigido a que el usuario encuentre lo que busca una solución a su problema
inquietud o necesidades y como la práctica hizo al maestro debe de buscar
información en internet y vídeos de otros usuarios para ver cómo hacen sus vídeos eso te hará cada vez mejor tus videotutoriales 1 la planificación piensa y planifica tu proyecto de tu videotutorial con ello ahorrarás mucho trabajo y frustraciones debes de tener muy clara las ideas de lo que quieres enseñar al usuario para ello lo primero que debes es buscar información en internet y escribirlo en un archivo de texto las ideas del videotutorial dos herramientas antes de comenzar asegúrate de tener todas las herramientas necesarias para la realización de los videotutoriales
por ejemplo necesitas hacer un guión debes grabar los audios con tu voz con
un micrófono conectado a tu pc o con un programa que le de texto y los guardar en mp3 que es lo más recomendable parece una tontería lo de hacer un bien pero todo buen proyecto tiene uno esto hará que tardes más en realizar el vídeo tutorial pero a la hora de realizar tu proyecto esto al final ahorra tiempo
evitando frustraciones y que te precipites en tu obra teniendo errores
que te frustrarán bueno ahora que tenemos las herramientas veamos el
procedimiento para escribir nuestro tutorial 1 títulos y saludos el título
del vídeo tutorial debe ser claro y breve desde el principio para que el
usuario determine si desea o no seguir viéndolo el vídeo ejemplo de título de
un vídeo tutorial tutorial de cómo hacer un avión de papel saludo puedes saludar
a las personas que van a ver este vídeo y puedes hacer un breve resumen del
vídeo tutorial 2 contenido del vídeo tutorial debes de tener en cuenta en
todo momento que el usuario puede ser un principiante en los conocimientos de un
ordenador se trata de hacer todo paso a paso claro y conciso sin desviar la atención del usuario y sin palabras demasiado técnicas ni pulgares que haga que el usuario busque otro vídeo tutorial debes seguir una guía como una receta de cocina que el usuario está siguiendo paso a paso con todos sus
ingredientes para que la receta le salga bien y no se le queme por eso debes ser
claro y conciso sin desviar la atención del usuario 3 conclusión del vídeo tutorial puedes despedir el vídeo tutorial dando tus datos para comentar dudas del mismo email y página web blog etcétera conclusión revisa el vídeo tutorial para ver los
errores y fallos en los vídeos como enfoque fallos al cortar montar el vídeo
textos con falta de ortografía es importante que tengan una buena presentación sin faltas de ortografía para ello utiliza procesadores de texto que después podrás copiar en tu proyecto y los sonidos de audio que encajen bien con los texto del que se esté tratando en ese momento atención el que mucho abarca poco aprieta
nunca intentes enseñar más de una cosa por vídeo tutorial para realizar un
vídeo tutorial con éxito el usuario necesita realizar tareas previas para lo
que el usuario también requiere tener conocimiento y práctica en diferentes
videotutoriales
planificación del proyecto del videotutorial piensa y planifica tu presentación
En pantalla de tus proyectos de tus videotutoriales con ello ahorrarás mucho tiempo trabajo y frustraciones debes de tener muy claras las ideas de lo que quieres enseñar al usuario para ello lo primero que debes es buscar información en internet y escribirlo en un archivo de texto las ideas de los videotutoriales cuál es el tema a utilizar cuál es objetivo del vídeo tutorial será de esta manera más
fácil el aprendizaje para el usuario aportar algo a los usuarios 2 el guión
estructurar un elaborado guión con el cual nos permitirá la estructura lo que
queremos hacer el guión es la parte vertebral para la elaboración del vídeo
tutorial desde el inicio del tránsito del todo el vídeo y conclusión del mismo
recuerda no colocar textos demasiado chillones o fondos que no se pueda ver
bien los textos recuerda que estos videotutoriales también van dirigidos a
personas que no escuchan por eso es importante colocar texto título y saludo el del título del vídeotutorial debe ser claro y breve desde el principio para que el usuario determine si desea o no seguir viéndolo el vídeo
ejemplo de título de un vídeo tutorial.
tutorial de cómo hace un guion de papel
Saludo puedes saludar a las personas que van a ver este vídeo y puedes hacer un
breve resumen del vídeo tutorial 4 contenido del vídeo tutorial debes de tener en cuenta en todo momento que el usuario puede ser un principiante en los conocimientos de un ordenador se trata de hacer todo paso a paso claro y
conciso sin desviar la atención del usuario y sin palabras demasiado técnicas ni pulgares que haga que el usuario busque otro vídeo tutorial debes seguir una guía como una receta de cocina que el usuario está siguiendo paso a paso con todos sus ingredientes para que la receta le salga bien y no se le queme por eso debes ser claro y conciso sin desviar la atención del usuario 5 conclusión y datos puedes despedir el vídeo tutorial dando tus datos para comentar dudas del mismo email página web blog etcétera conclusión revisa el vídeo tutorial para ver los errores y fallos en los vídeos como enfoque fallos al cortar montar el vídeo textos con falta de ortografía es importante que tengan una buena presentación sin faltas de ortografía para ello utiliza procesadores de texto lee atentamente los textos y después podrás copiar en tu proyecto y los sonidos de audio que encajen bien con
los textos que se esté tratando en ese momento 6 grabación ya tienes tú bien
realizado los vídeos las imágenes los audios ahora utilizarás una herramienta
para grabar de pago screencast estudian son pre castró etcétera gratis windows
movie maker windows live movie maker vídeo path video editor capturador de
pantalla caucasia estudio gratis en a hits de audio de pago testa load gratis
bala volcán en algunos podrás grabar la
pantalla y en otros sólo él.
los vídeos etcétera y grabarla tu voz o con el programa que le de texto como balabolka
Los graba en archivos de audio 7 edición ejemplo cantas ya estudios tiene herramientas que te permiten las que son comerciales te permiten poder editar sus grabaciones pudiendo añadir textos flechas imágenes editar el audio hacer zoom entre otras cosas 8 publicación una vez hemos grabado y editado la grabación comenzarás con la última etapa donde subirás el videotutorial a youtube a una red social un blogs o sitio web donde podrán verlo los usuarios podrán ver este vídeo tutorial en el momento que quieran es decir las 24 horas del día
y los 365 días del año bien ya tienes casi todas las herramientas para desarrollar tus videotutoriales recuerda que el límite está en tu imaginación sigue viendo los
vídeos y aprenderás los trucos de los diferentes programas que aparecen aquí
fin del vídeo tutorial gracias por ver mis vídeos tutoriales iré haciendo más próximamente si te gustó compártelo con tus amigos este link del vídeo pincha en la parte superior del navegador pincha dos veces se marcará todo el nombre del vídeo que es el link del vídeo con el secundario del ratón pincha en él una vez en la parte que se ha señalado se desplegará unas opciones pincha en
copiar y después en tu messenger solo lo tienes que pegar con el secundario del
ratón en la opción pegar en el portapapeles del mensaje gracias y sigue
