Manual Básico de HTML
|
|
- Elisa Salinas Naranjo
- hace 6 años
- Vistas:
Transcripción
1 Creación y Estructura de Páginas WEB Qué es HTML? HTML son las iniciales de Hiper Text Markup Language. Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos. Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar cómo desplegar la página Web. Por dónde comenzar? Lo primero es saber dónde crear el archivo texto que contendrá las instrucciones HTML (Hipertexto), para lo cual tenemos varias opciones: 1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos indicar: NotePad NotePad ++ Dreamweaver Microsoft Office 2. Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría código basura. La primera opción es la más sencilla y más rápida, sin embargo está limitada y es dependiente del software a utilizar, ya que es el software el que se encarga de elaborar y ubicar los códigos de la página WEB y uno estaría prácticamente haciendo nada. La segunda opción es más lenta y menos vistosa, pero esta opción le enseña a utilizar cada uno de los comandos e instrucciones HTML (etiquetas) sin depender de ningún programa. Esto tiene sus beneficios y el principal de ellos es que nuestras páginas ya no contarán con código excedente y/o código basura, de Página 1
2 modo que ocuparán menos espacio, por ende serán más rápidas al momento de ser cargadas por Internet y al invertir menos tiempo en cargar una página, se gastará menos dinero pagando al proveedor de Internet. Páginas WEB El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un navegador de Internet. Estas instrucciones son denominadas Etiquetas. Etiquetas Una etiqueta cumple su función de la siguiente manera: <nombre de la etiqueta> Apertura de una etiqueta siempre entre < > texto/gráfico/etiquetas A la cual se aplica la etiqueta </nombre de la etiqueta> Cierra de la etiqueta siempre entre </ > Al acabar de crear un hipertexto, este se deberá grabar con la extensión.html o bien.htm. Es bueno acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el navegador WEB es quien las interpreta. Estructura básica de una página WEB Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son: <html> </html> Indica al navegador que el documento texto que está leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. Página 2
3 <head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de <html>. <body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la página, cerrándose antes de </HTML>. Ejemplo 1: <head> < /head > < body > Bienvenidos a Programación Orientada a la Web < /body > El archivo será grabado con el nombre index.html en alguna ubicación en el disco duro. Al asignar la extensión.html o.html ya se crea un archivo diseñado para la Web. Asegúrese de ingresar index.html como nombre a grabar en su editor de textos preferido sin las comillas o si está trabajando con el Block de Notas, incluya las comillas para evitar que se añada la extensión.txt. Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de WWW. En la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted deberá poder ver en su pantalla su primera página WEB. Importante: Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error podría causar confusión al navegador. Página 3
4 Etiqueta: <title> </title> Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de la pantalla de su navegador. Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo <title> entre las etiquetas de apertura y cierre del encabezado (head). Ejemplo 2: <head> <title>programación Orientada a la Web</title> < /head > < body > Bienvenidos a Programación Orientada a la Web < /body > El nuevo archivo HTML se grabará con el mismo nombre index.html, tan solo usando la opción de Grabar en su editor de Texto. Una vez realizado esto, y sin cerrar su editor de texto, vamos al navegador en el que seleccionamos la opción de Actualizar/Refresh y nuestra nueva página estará visible. Notará que el título aparecerá en la parte superior de la página. Etiqueta <body> </body> Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body>...</body>. Esta etiqueta cuenta con los siguientes atributos: Bgcolor Text Link Alink Vlink Background Define el color de fondo de la página Define el color del texto de la página Define el color de los vínculos en la página Define el color del vínculo actual o activado en la página Define el color del vínculo ya visitado Define el archivo gráfico que será desplegado como fondo Página 4
5 Bgsound Define el archivo de audio que se tocará en la página. 1 Bgproperties Define el movimiento vertical del fondo. 2 Los atributos se incluyen en la etiqueta de apertura, separados por un espacio. Cómo se utilizan los colores en HTML? Se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas para aplicar colores a una página web: 1. Se especifica el color deseado directamente con el nombre del color en inglés: Ej: blue, green, yellow 2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA El color tiene un signo de numeral # antecediendo a los 6 números. Existen dos números para cada color principal: rojo, verde y azul. Cada uno de los números varía hexadecimal mente {0,1,2...,9,A,B,...F}. Ejemplos de Colores: #RRVVAA Color #RRVVAA Color #FFFFFF Blanco # Negro #FF0000 Rojo #00FF00 Verde #0000FF Azul #FF00FF Magente #00FFFF Cyan #FFFF00 Amarillo #70DB93 Agua Marino # Azul Marino #FF7F00 Coral #A62A2A Café #C0C0C0 Plomo #4F2F4F Violeta 1 Solo para Microsoft Internet Explorer 2 Solo para Microsoft Internet Explorer Página 5
6 Utilizando estos datos, haremos una página con fondo azul y letras negras. Usaremos para este efecto los atributos bgcolor y text. : Ejemplo 3: <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor= blue text= # > Bienvenidos a Programación Orientada a la Web < /body > Grabe este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo que se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione la opción de Actualizar, notara el cambio. Texto en HTML Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la etiqueta de definición del cuerpo de la página, trabajemos con el texto. HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para mostrar también caracteres o símbolos denominados especiales. Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final respectivamente de un símbolo especial. De esta manera: Texto: Descripción: Pantalla: Acento ñ eñe ñ " Comillas Dobles " °: Grados á a con acento á é e con acento é Página 6
7 espacio en blanco La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con acento debemos combinar una o y un acento: ó ó Para entender un poco más este proceso, veamos el siguiente ejemplo: Ejemplo 4: <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor= blue text= # > Bienvenidos a Programación Orientada a la Web Cuando la temperatura es menor a 15 c hace bastante frío. Este es un ejemplo de página WEB :) < /body > Luego de realizar el proceso para grabar y actualizar la página notara que se incluyen en la página los símbolos de grados, la i con acento y la a con acento. Notará también que el texto se encuentra de corrido en una sola fila, para bajar de línea utilizaremos la siguiente etiqueta especial. Etiqueta <br> La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre. Página 7
8 Etiqueta <hr> La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, porque no necesita de cierre, tiene los siguientes atributos: Ejemplo 5: Align establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT NOSHADE quita el sombreado predeterminado de la regla WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje) SIZE permite especificar el alto de la regla (en pixeles) <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor="blue" text="#000000"> Bienvenidos a Programación Orientada a la Web <br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15 c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)< br > < /body > Encabezados Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de heading 1..6 ) son encabezados del cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará que si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo: Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pantalla (LEFT, CENTER,RIGHT) Página 8
9 Ejemplo 6: <head> <title>programación Orientada a la Web</title> < /head > <body bgcolor="blue " text="#000000"> <h1 Bienvenidos Programación Orientada a la Web </h1> <hr align=center width=50%> < h2>bienvenidos</h 2> Cuando la temperatura es menor a 15 c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)< br > < /body > Luego de realizar el proceso de grabado/actualización notará las diferentes dimensiones de las dos primeras líneas. Ubicación, formato y atributos de texto Etiqueta <center> </center> Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre. Etiqueta <b> </b> Esta es la etiqueta que nos posibilita un texto con negrillas. Etiqueta <u> </u> Etiqueta que posibilita resaltar un texto con subrayado. Etiqueta <i> </i> Etiqueta que permite resaltar el texto con inclinación itálica. Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para demostrar el uso de las últimas 4 etiquetas que se vieron. Página 9
10 Ejemplo 7: <head> <title>programación Orientada a la Web</title> < /head > <body bgcolor="blue " text="#000000"> <h1 Bienvenidos Programación Orientada a la Web </h1> <hr align=center width=50%> < h2>bienvenidos</h 2> Cuando la temperatura es menor a 15 c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB < b><i>:)</i></b><br > <b>este texto esta con negrillas</b><br> <u>este texto esta con subrayado</u><br> <i>este texto esta con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> < /body > Etiqueta <font> </font> Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamaño y color. Atributos: Color determina el color que se aplica al texto Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo el predeterminado el 3 y el más grande el 1. Face asigna una fuente o tipo de letra. Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más grande que el demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3) para las demás letras. Página 10
11 Ejemplo 8: <head> <body <h1 <hr < h2>bienvenidos</h 2> Cuando la temperatura es menor a 15 c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB < b><i>:)</i></b><br > <b>este texto esta con negrillas</b><br> <u>este texto esta con subrayado</u><br> <i>este texto esta con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> <font color="red"><font size=7>b</font>o</font><font color="yellow"> li</font><font color="green">via</font><br> < /body > Imágenes en HTML Hasta este momento se ha trabajado solamente con texto. Comencemos a introducir gráficos en nuestra página HTML. Se deben tener dos consideraciones importantes para trabajar con gráficos: Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg. Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar demasiado en bajarlas. Acá trabajaremos también con el atributo background de la etiqueta <body> que había quedado pendiente. La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en nuestro entorno Windows. El archivo puede estar ubicado en la misma Página 11
12 carpeta o bien en otra que contenga solo gráficos. Trate de que el color de fondo de la página (que ya no aparecerá) sea parecido al color principal de la imagen que usará como fondo. Si es necesario re acomode los colores de texto y vínculos definidos en <body>. Supondremos tenemos un gráfico llamado fondo.gif para el ejemplo 8 que como notará será re formulado en función a utilizar las nuevas etiquetas. Importante En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta esto al utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con minúsculas. Etiqueta <img> Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es: <img src= imagen.ext > No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirlo en contextos variables; sin embargo, el autor de HTML puede indicar al navegador que re dimensione la imagen especificando los siguientes atributos: Src identifica la imagen que se desplegará. Height para redimensionamiento de gráfico (en pixeles o en porcentaje) Width para redimensionamiento de gráfico (en pixeles o en porcentaje) A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de una imagen que además es un hipervínculo: Border Definido en pixels. La imagen también puede alinearse con respecto al texto: ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT En caso de que la imagen no pueda exhibirse, se puede desplegar un texto: ALT Especifica el texto alterno Página 12
13 Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que llamaremos pag2.html o bien pude ser grabada con otro nombre. Supondremos contamos con un gráfico llamado foto.jpg. Ejemplo 9: <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor="#c0d9d9" text="#000000" background="fondo.gif"> < center><h 1> Bienvenidos a Programación Orientada a la Web </h1></center><br> <hr width=50%><br> <h2>información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">html</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="foto de Poncho"></center> < br > Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> < /body > Realice el proceso de grabado con el nuevo nombre de página pag2.html y cargue la nueva página en su navegador. Página 13
14 Tablas En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas: Etiqueta <table></table> Señala el inicio y final de una tabla. Sus atributos son: Align Establece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT Bgcolor Establece el color de fondo de las celdas de la tabla Border Determina el ancho del borde en pixeles BorderColor Asigna un color al borde BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones Caption Especifica el titulo para la tabla Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla Width Determina el ancho de la tabla en pixeles o en un porcentaje Etiqueta <th> </th> Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales: Colspan especifica el número de celdas que cubre el encabezado Align Determina la posición del texto del titilo Etiqueta <tr> </tr> Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la etiqueta que define filas. Align Alineación del texto/objetos en toda la fila Página 14
15 Etiqueta <td> </td> La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una tabla. Atributos principales: Align Alineación del texto/objeto de la celda Bgcolor Color de fondo de la celda Background imagen de fondo de una celda Width Ancho de la celda/columna con respecto al ancho de la tabla Solo precisa definir el ancho en la primera celda de la columna. Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una tabla entera. Ejemplo 10: <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor="#c0d9d9" text="#000000" background="fondo.gif"> < center><h 1> Bienvenidos a Programación Orientada a la Web </h1></center><br> <hr width=50%><br> <h2>información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">html</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="foto de Claudia"></center> < br > Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> < br><center > <table width=80% align=center border=3> <tr><th colspan=3>directorio Telefónico</th></tr> <tr align=center> <td width=40% bgcolor="#c0c0c0"> Nombre < /td > Página 15
16 <td width=30% bgcolor="#c0c0c0">teléfono< /td > <td width=30% bgcolor="#c0c0c0"> < /td > < /tr > < tr > < td >Luis Alfonso Jimenez Piedrahita< /td > < td >223454< /td > < </td > < /tr > < tr > < td >Carolina Nuñez< /td > < td >453444< /td > < > < /tr > < /table > < br></center > < /body > Grabe este archivo con el nombre pag2.html sobre escribiendo el archivo anterior. Consejo: Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>) para ubicar gráficos y texto de forma elegante. Página 16
17 Numeración y viñetas En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con numeración y viñetas, lo podemos hacer acá. Etiqueta <ul> </ul> Indica al navegador que cree una lista con viñetas no ordenada. No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría u tabulaciones. Etiqueta <ol> </ol> Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de elementos comprendidos dentro de las etiquetas <ol> Etiqueta <li> </li> Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en una lista. Atributos: Type Especifica el tipo para listas ordenadas Type=A Usa letras mayusculas, TYPE=a emplea letras minúsculas, Type=I Usa números romanos grandes, Type=i usa números romanos pequeños y Type=1 usa números arábigos. Type también puede servir para definir la forma de la viñeta en las listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las opciones disponibles. Value Indica que se inicie la numeración a partir del número especificado. Creamos una nueva página para el siguiente ejemplo: Página 17
18 Ejemplo 11: <head> <title> Programación Orientada a la Web </title> < /head > <body bgcolor="#c0d9d9" text="#000000" background="fondo.gif"> < center><h 1> Bienvenidos a Programación Orientada a la Web </h1></center><br> <hr width=50%><br> <h2>debemos a comprar</h2><br> < ul > <li>camisas para José</li> <li>loción para Daniel</li> < /ul><br > <h2>estudiar para mañana</h2><br> < ol > <li type=a>geometría</li> <li>ciencias Sociales</li> < /ol><br > <h2>actividades de la semana</h2><br> < ol > <li type=i>asistir a la Universidad</li> <li>comprar Disco</li> <li>llevar el auto al mecánico</li> < /ol><br > < h1>objetivos</h 1> <ul>el uso de estas etiquetas también puede ayudar a mover el texto en base a tabulaciones o sangrías de texto, para diferenciar parrafos o textos de los encabezamientos. < /ul > < /body > Grabamos el nuevo ejemplo con el nombre pag3.html. Hasta este punto tenemos 3 páginas HTML. Página 18
19 Hipervínculos Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección URL, página WEB o recurso. Etiqueta <A> </A> La etiqueta <A> que viene de ancla, denota el inicio y el final de una instrucción que contiene alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrónico. Atributos: HREF Recurso al cual se hace referencia el hipervínculo NAME Especifica el nombre de la posición a donde apuntar TARGET Destino del enlace (generalmente para páginas con Frames) Por ejemplo, desde una nueva página, que llamaremos pag4.html, crearemos enlaces a las 3 páginas anteriores y además otros enlaces importantes. En este ejemplo, aplicaremos también los atributos para colores de los vínculos de la etiqueta Body. Ejemplo 12: <head> <title>página de enlaces</title> < /head > <body bgcolor="#c0d9d9" text="#000000" background="fondo.gif" link="#000080" vlink="magenta" alink="black"> < center><h 1> <a name="tope"></a> Enlaces</h1><br> <img src="foto.jpg" alt="foto de Claudia"><br><br> <a href="index.html">página Principal o Página Uno</a><br> <a href="pag2.html">página Dos</a><br> <a href="pag3.html">página Tres</a><br> Página 19
20 < br > <a href=" <a href="ftp://ftp.microsoft.com/pub/">ftp de Microsoft</a><br> <a ">Envía comentarios sobre este manual por </a><br> < br><br > <a href="#tope">de vuelta arriba</a> < /center > < /body > Podrá notar que los enlaces de la parte inferior hacen referencia a recursos que se encuentran en Internet. Reemplazando la dirección del ultimo enlace, podrá crear un enlace a su . El último enlace hace referencia a una porción de la misma página, que fue definida al inicio de la página HTML. Esta parte es útil para accesos a partes diversas de una sola página. Frames Ofrece la posibilidad de utilizar marcos y varias páginas en una sola. Etiqueta <frameset> </frameset> Define la disposición gráfica de los marcos en la pantalla. Atributos: Rows Determina el alto de las filas Cols Determina el ancho de las columnas. Framespacing Espacio entre frames Etiqueta <frame></frame> Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.sus atributos son: Página 20
21 Marginheight Determina que tanto espacio vertical (en pixeles) existe entre el objeto ubicado en un marco, y los extremos superior o ingerior de este. MarginWidth Determina que tanto espacio horizontal (en pixeles) existe entre el objeto ubicado en un marco, y los extremos izquierdo o derecho de éste. Name Ofrece la capacidad de Dar nombres a las ventanas FRAME, de modo que puedan ser utilizados como destino de los hipervínculos. Noresize indica que el usuario no puede redimensionar el marco Scrolling Habilita una barra de desplazamiento para un marco. Existen tres parámetros posibles SCROLLING=YES, SCROLLING=NO y SCROLLING=AUTO que habilita la barra solo si es necesario SRC indica que exhiba en un marco el contenido de un documento HTML. Etiqueta <noframes></noframes> Etiqueta que es usada para desplegar un texto o una página alternativa cuando un navegador no es capaz de desplegar los marcos. Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual llamaremos: frames.html. Ejemplo 13: <head> <title>página de frames</title> < /head > <frameset COLS="20%,*" frameborder=0 framespacing=0 border=0> <frame name="izquierda" src="pag4.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no"> <frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0> <frame name="superior" src="pag2.html" scrolling="auto" frameborder="no"> marginwidth="0" marginheight="0" Página 21
22 <frame name="principal" src="pag3.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no"> < /frameset > < /frameset > < noframes > < center > Su navegador no puede desplegar frames. < /center > < /noframes > Una vez que cargue la nueva página frames.html podrá ver los marcos que se crearon. Notará que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos hacer es redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html que quedaría de esta manera: Ejemplo 14: <head> <title>página de enlaces</title> < /head > <body bgcolor="#c0d9d9" text="#000000" background="fondo.gif" link="#000080" vlink="magenta" alink="black"> < center><h 1> <a name="tope"></a> Enlaces</h1><br> <img src="foto.jpg" alt="foto de Claudia"><br><br> <a href="index.html" target="principal">página Principal o Página Uno</a><br> <a href="pag2.html" target="principal">página Dos</a><br> <a href="pag3.html" target="principal">página Tres</a><br> < br > <a href=" <a href="ftp://ftp.microsoft.com/pub/">ftp de Microsoft</a><br> <a href="mailto:lajp69@hotmail.com ">Envía comentarios sobre este manual por </a><br> < br><br > Página 22
23 <a href="#tope">de vuelta arriba</a> < /center > < /body > Guarde este archivo con el nombre pag4.html y haga una actualización de la página en su navegador para notar los cambios. Otras etiquetas útiles A continuación algunas etiquetas que pueden ser útiles al momento de elaborar las páginas HTML. Se detalla el objetivo de cada una de las etiquetas y un ejemplo. Etiqueta de comentarios <!-- --> Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar acotaciones y/o comentarios. Sintaxis de Ejemplo: <!-- Los comentarios se introducen de esta manera --> Etiqueta de comentarios <comment> </comment> Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar acotaciones y/o comentarios. Sintaxis de Ejemplo: <comment>los comentarios se introducen de esta manera</comment> Etiqueta <address></address> Ofrece una manera de dar formato a un pequeño cuerpo de texto que se asemeje a la rotulación de una carta convencional. <address>luis Jimenez <br> Apartado Aereo 3423< br > Boston Medellín</address> Página 23
24 Etiqueta <cite> </cite> El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita <cite>este texto estará inclinado</cite> Etiqueta <code> </code> El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados cuando se visualiza a través de un navegador. <code>este texto aparece con tipo de letra especial</code> Etiqueta <credit> </credit> Esta etiqueta se emplea para indicar los créditos por el material incluido en un documento. A menudo se asignan créditos para las fuentes e individuos que se citan en forma directa. <credit>foto usada bajo permiso de Carlos Aníbarro</credit> Etiqueta <em> </em> Indica que se debe dar énfasis al texto que se contiene. EL navegador resaltará este texto con negrillas e inclinación italica. <em>texto resaltado</em> Etiqueta <kbd> </kbd> La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del teclado hecha por el usuario. <kbd>teclee su mensaje acá:</kbd> Página 24
25 Etiqueta <nobr> </nobr> La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL extenso. No deseo que esta dirección URL larga sea cortada: <nobr> </nobr> Etiqueta <p> </p> La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo párrafo. <p>a partir de ahora definimos párrafos de esta manera.</p> <p align= center >Párrafo en el centro</p> <p align= left >Párrafo a la izquierda</p> <p align= right >Párrafo a la derecha</p> Etiqueta <pre> </pre> La etiqueta <pre> significa texto preformateado y se usa para conservar espacios y saltos de línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo completo que el autor quisiera que el navegador cliente lo exhibiese palabra por palabra. <pre>el texto que usted ve. Aparecerá tal cual, incluidos los retornos de carro</pre> Etiqueta <s> </s> o <strike> </strike> Instruye al navegador que tache el texto incluido entre las etiquetas. <strike>este texto esta tachado</strike> Página 25
26 Etiqueta <strong> </strong> Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto en cursivas. <strong>este texto esta sobre saltado</strong> Etiqueta <sub> </sub> Instruye al navegador que exhiba el texto especificado como subíndice. Agua: H<sub>2</sub>0 Etiqueta <sup> </sup> Indica al navegador exhibir el texto especificado como super índice Mate: 2*2 = 2< sup>2</sup >. Etiqueta <tt> </tt> Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho fijo. <tt>este es un tipo de letra de teletipo</tt> Etiqueta <var> </var> Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo. <var>este texto será mas pequeño y de formato especial</var> Atributo bgproperties= fixed del BODY Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma vertical. <body text= #FFFFFF bgcolor= # background= fondo.gif bgproperties= fixed > Página 26
Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas
Universidad Politécnica de El Salvador Computación Básica HTML Guía 1 Requerimientos y material Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato para poder usar esta
Creación y Estructura de Páginas WEB
Creación y Estructura de Páginas WEB Carlos Eduardo Aníbarro Zelaya Versión 1.3 2001 Creación y Estructura de Páginas WEB Indice ACERCA EL AUTOR... 1 REQUERIMIENTOS Y MATERIAL... 1 LICENCIA... 2 HISTORIA...
Qué es HTML? Páginas WEB. Etiquetas
Guía de Html 2015 QUÉ ES HTML PÁGINAS WEB ETIQUETAS ESTRUCTURA BÁSICA DE UNA PÁGINA WEB CÓMO SE UTILIZAN LOS COLORES EN HTML? TEXTO EN HTML ENCABEZADOS UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO TABLAS NUMERACIÓN
CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:
TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto,
Actividad 3: Codificación básica de un texto en HTML
Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
ETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
Manual básico de HTML
Manual básico de HTML 1 Índice 1Estructura básica...3 Atributos de la etiqueta BODY...3 2Formación de parráfos:...4 Cabeceras / Headings...4 Párrafos / Paragraph...4 Múltiples espacios...4 Salto línea...5
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje
Práctica de HTML (Curso )
Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de
Texto y Organización del contenido
Opciones de formateo de texto y de organización del contenido de una página. Texto y Organización del contenido Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Organización del texto. Encabezado...
HTML 2 / Atributos/etiquetas(Tags)
HTML 2 / Atributos/etiquetas(Tags) ATRIBUTOS bgcolor=#ff0000 Asigna un color en hexadecimal o en RGB a el fondo de todo el body ( la página) FGCOLOR="#00FF00" Asigna un color en hexadecimal
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Este es un documento para producir documentos en HTML, "Lenguaje de Marcación de Hipertexto", usado en la
GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?
GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear
HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...
T11. MARCOS O FRAMES 2013 CONCEPTOS BÁSICOS SOBRE HTML
T11. MARCOS O FRAMES 2013 CONCEPTOS BÁSICOS SOBRE HTML 11. MARCOS O FRAMES: 2 Define la estructura de la página Se usa en lugar de la etiqueta La declaración de los marcos de la página
5.CREACIÓN DE TABLAS.
5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción
1. Introducción a HTML
Introducción a HTML 1. Introducción a HTML 1. Introducción a HTML Qué es HTML? El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto estructurado,
TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet
TEMA 5: INTERNET Y PÁGINAS WEB Realización de páginas web con HTML. Servicios de Internet Qué vamos a ver? Qué es el lenguaje HTML Uso de sus características básicas: párrafos, títulos, y algunos estilos
UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO
UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO COMPETENCIA PARTICULAR: Utiliza herramientas de la hoja electrónica de cálculo para el procesamiento de la información en su ámbito académico, social y laboral. PRACTICA
COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
Introducción al curso de HTML COLEGIO PABLO DE TARSO IED Desarrolla comprensión al conocer, interpretar, socializar y argumentar diferentes temáticas relacionadas con la tecnología informática de punto
Nociones basicas de HTML
Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información.
Las tablas son grupos de celdas que contienen información. Toda celda de una tabla puede albergar cualquier elemento disponible en una página web (siempre que pueda incluirse en el elemento body). Para
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
DISEÑO DE PAGINAS CON HTML
DISEÑO DE PAGINAS CON HTML CONCEPTOS HTML (Hyper Text Markup Language) Lenguaje con el que se escriben paginas web. Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto
Introducción: páginas web y navegadores
IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede
A lo largo de este tema vamos a aprender a crear una página básica.
Unidad 2. Estructura de una página (I) A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: Ahora veamos cómo funcionan estas etiquetas. Identificador
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.
Estructura de una página Web Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Apuntes básicos de HTML I.E.S. Pintor José María Fernández
Manual Básico de HTML Este manual lo he realizado con la intención de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creación de páginas
DIRECCIÓN GENERAL DEL BACHILLERATO CENTRO DE ESTUDIOS DE BACHILLERATO N 2 LIC. JESÚS REYES HEROLES
PROFA. STEPHANY LUCIOTTO V. ACADEMIA: INFORMÁTICA ASIGNATURA: PAG. WEB GUIA DE ESTUDIO PERIODO: 2012-2013 A ALUMN@: GRUPO: FECHA: ESCRIBE EN EL PARENTESIS SI LA RESPUESTA ES VERDADREA O FALSA 1. Las páginas
Lenguaje HTML y páginas web. Alex Sánchez
Lenguaje HTML y páginas web Alex Sánchez Introducción: La web y las páginas web Componentes de la web Como funciona la web? Como es la comunicación en la web El acceso a la Web suele basarse en un un explorador
MARCO (FRAME) Los frames se consiguen con las etiquetas <FRAMESET> y <FRAME>.
MARCO (FRAME) Qué es un marco? Los frames o marcos son una forma de partir una web en sectores o áreas, haciendo que en cada parte se visualice un documento HTML distinto. Es muy útil cuando queremos que
MANUAL PRACTICO DE HTML
MANUAL PRACTICO DE HTML 1 La estructura tiene tres partes cabeza, cuerpo, cierre o fin. MI PC... Aquí iría el contenido que ve el usuario final
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea
HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
QUE ES HTML? Las siglas HTML se refieren a:
QUE ES HTML? Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes más utilizados en el Web Wide Web. Las páginas de Internet están escritas en este lenguaje. Le brinda al autor
Manual de Referencia para el uso del Módulo de Administración Web
Manual de Referencia para el uso del Módulo de Administración Web Como comenzar a utilizar el editor? Para tener acceso al Módulo de Administración Web debe entrar a la siguiente dirección: http://www.up.ac.pa/administradorweb/index.aspx
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
CURSO DE HTML. María Cives Senra
CURSO DE HTML María Cives Senra 2 Curso de Básico de HTML 3 HTML HTML es un lenguaje que permite definir páginas web. Este lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada
EDICIÓN WEB CÓDIGO HTML
EDICIÓN WEB CÓDIGO HTML 1. Estructura básica de un documento HTML 1.1. Tipos de etiquetas. Etiqueta cerrada Mi página Web Etiqueta abierta Etiqueta con parámetros
A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página.
A través de la etiqueta es posible establecer el color o la imagen de fondo de la página. El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color
Capítulo 0. Repaso de HTML
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA ICAI Desarrollo de Aplicaciones web Cristina Puente, Rafael Palacios 2010-2011 HTTP (repaso) El protocolo HTTP (Hyper-Text Transfer Protocol) es un protocolo encargado
FACULTAD DE CIENCIAS DE LA EMPRESA UPCT Departamento de Economía de la Empresa
FACULTAD DE CIENCIAS DE LA EMPRESA UPCT Departamento de Economía de la Empresa Introducción a la programación de páginas web en el entorno de las Ciencias de la Empresa Profesor: Ramón Cantó Alcaraz Despacho:
Listado de elementos o etiquetas HTML5
Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define
Dentro de las etiquetas <Title> </Title>, coloca el título de la página que será Página Personal.
GUIA DE ESTUDIO PARA LA UNIDAD 2: CREACION DE PAGINAS WEB. COMPETENCIA PARTICULAR: Elabora páginas WEB a través del código HTML y el Editor institucional 1.-Realiza las siguientes actividades generando
Módulo Procesador de textos. Objetivos del modulo
Módulo Procesador de textos A continuación se describe el programa de estudio correspondiente al modulo Procesador de textos, el cual constituye la base para el examen teórico y práctico relacionado con
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
Sistemas Multimedia. Herramientas multimedia en la web (HTML y Web) Universidad de Los Andes Postgrado en Computación Prof. Isabel M.
Sistemas Multimedia Universidad de Los Andes Postgrado en Computación Prof. Isabel M. Besembel Carrera Herramientas multimedia en la web (HTML y Web) 1 Web WWW (World Wide Web, w3): concebido en 1989 por
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1 Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML...
Introducción Mic i ro r s o of o t t W or o d r
Introducción Microsoft Word Qué es el Microsoft Word? Word es uno de los procesadores de texto, más utilizados para trabajar con documentos en la actualidad. Casi no existe persona con computadora, que
ESTRUCTURA DE UN DOCUMENTO HTML
HTML HTML (HyperText Markup Language) es el código en el que se escriben los documentos de hipertexto leídos por los navegadores web, de tal forma que éstos reciben indicaciones sobre cómo debe presentarse
MATRIZ DE VALORACIÓN O RÚBRICA. Actividad de evaluación:
MATRIZ DE VALORACIÓN O RÚBRICA Siglema: DEWE-02 Nombre del Módulo: Nombre del Alumno: Docente evaluador: Grupo: Fecha: Resultado de Aprendizaje: 1.2 Elabora páginas web estáticas haciendo uso del lenguaje
Word 2000 para principiantes
Word 2000 para principiantes Es nuevo usando Word 2000? Aún si nunca ha usado un procesador de texto antes, se dará cuenta de que Word 2000 hace las cosas simples y fáciles a la hora de crear documentos
HIPERDOCUMENTOS. Prof. Emiro Coronado Cabrera
HIPERDOCUMENTOS Prof. Emiro Coronado Cabrera Hiperdocumento Un hiperdocumento es un documento no secuencial basado en una estructura jerárquica o de red de nodos que contienen información y/o datos multimedia
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo
MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER
1 MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER INDICE 1. Como crear mí sitio. 2. Entorno. 3. Insertar texto. 4. Como crear un vínculo. Formas: 5. Como insertar una imagen. 6. Insertar Tabla. 7.
En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo.
Creación de barras de navegación Una barra de navegación, también denominada bar nav, es un grupo de botones que ofrece vínculos a otras áreas de un sitio Web. Normalmente, no cambia de aspecto en el sitio,
DISEÑO WEB ADOBE DREAMWEAVER CS3
C L A S E 1 I N T R O D U C C I Ó N Dreamweaver es un editor visual profesional para la creación y administración de sitios y páginas Web. Con Dreamweaver resulta fácil crear y editar páginas compatibles
INFORMATICA I FORMATO
INFORMATICA I 2.4.5 FORMATO El formato es una de las herramientas con que cuenta un procesador de textos para comunicar de distintas formas una palabra y/o frase, resaltándola, en negrita, dándole colores,
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
Ejercicio corto. Ejercicio corto. Ejercicio corto. Lección 1: Introducción a Word. Lección 2: Modificaciones de documentos
Lección 1: Introducción a Word 1 Cómo se guarda una copia del documento actual sin modificar la versión original? 2 Qué dos formas hay de cerrar un documento? 3 Qué ocurre al hacer clic en el botón que
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
MICROSOFT WORD COM PUTACI ÓN
MICROSOFT WORD COMPUTACI ÓN CARACTERÍSTICAS DE LOS PÁRRAFOS ALINEACIÓN Las características de los caracteres pueden ser distintas para cada uno de los caracteres del texto. La alineación es propia de cada
EJERCICIOS (X)HTML. Profesor: Juan Antonio LÓpez Quesada
EJERCICIOS (X)HTML Profesor: Juan Antonio LÓpez Quesada Ejercicio 1: Crear una carpeta denominada xhtml y dentro de ella crear la siguiente página Web con el nombre practicas1.htm y el resto de ejercicios.
GUÍA RÁPIDA DE COMANDOS HTML
GUÍA RÁPIDA DE COMANDOS HTML El HTML (HIPERTEXT MAK L páginas WEB. A continuación hay una lista con algunos de los comandos usados en HTML. DESCRIPCION INICIO FINAL COMENTARIOS Principio de Documento
GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL
GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL Maneja herramientas informáticas vigentes que le permiten administrar y difundir información diversa en un contexto social, académico y laboral
Módulo Procesador de Textos
Módulo Procesador de Textos Programa de estudio versión 5.0 The European Computer Driving Licence Foundation Ltd (ECDL Foundation) Third Floor Portview House Thorncastle Street Dublin 4, Ireland Tel: +353
PLANTILLAS Y MACROS. También veremos cómo crear una Macro en Excel que automatice una tarea, de forma que al ejecutarla agilice el trabajo.
UNIDAD DIDÁCTICA PLANTILLAS Y MACROS Los objetivos de este tema son: 1. Aprender a crear y a utilizar una plantilla de Excel. 2. Entender qué es una macro en Excel y su utilidad. 3. Crear una macro y ejecutarla.
REPASO DE TABLAS HTML
REPASO DE TABLAS HTML Las tablas HTML se dividen en filas y celdas. A la hora de dibujar tablas hay que hacerlo de arriba a abajo y de izquierda a derecha. Es decir, primero empezaremos dibujando la primera
Cursito 27: Curso de HTML Parte 3
Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito
GLOSARIO DE CONCEPTOS Y TÉRMINOS
GLOSARIO DE OFFICE GLOSARIO DE CONCEPTOS Y TÉRMINOS 1. Que es power point: Es un programa que pertenece a Microsoft office el cual fue diseñado para crear presentaciones, ya que incorpora una gran cantidad
HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)
APRENDERAPROGRAMAR.COM HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA . ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) Sección: Cursos Categoría: Tutorial básico
EXCEL 2010 CUADERNILLO N 2
SELECCIÓN DE CELDAS, FILAS Y COLUMNAS E INTERPRETACIÓN DE LOS DATOS Antes de introducir cualquier información en la hoja de cálculo, deberá seleccionarse la celda que se desea usar. Cuando se selecciona
PROCESADORES DE TEXTO. MICROSOFT WORD.
PROCESADORES DE TEXTO. MICROSOFT WORD. VENTANA DE MICROSOFT WORD Nombre documento Barra Títulos Barra menús Herramientas estándar Herramientas formato Reglas Área Edición Iconos Vista Barras desplazamiento
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
7.1 Estructura Básica de jas Tablas
Las tablas permiten representar los elementos de una página en filas y columnas separadas entre si. Es una herramienta muy útil para ordenar contenidos de distintas partes de nuestra página. Las tablas
PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani
PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
Profesor: Vicente Destruels Moreno. Teoría: Tipos de letra (Color de texto)
Teoría: Tipos de letra (Color de texto) Tipos de letra En este apartado se indica cómo definir cabeceras mediante el elemento , y cómo modificar el tamaño y color de algún grupo de caracteres mediante
<! > Para escribir comentarios, los cuales son ignorados por el Browser (Navegador).
ETIQUETAS "HTML" Y ESTRUCTURAS BÁSICAS Para escribir comentarios, los cuales son ignorados por el Browser (Navegador). ... Indica que es un documento HTML, debe encerrar todo
Fundamentos de Excel
Fundamentos de Excel Excel es una potente aplicación de hoja de cálculo y análisis de datos. Pero para usarla del modo más eficaz, es necesario comprender primero los aspectos básicos. Este tutorial presenta
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados.
Navegadores Web. Aplicación que opera a través de Internet, interpretando la información de archivos y sitios web para que podamos ser capaces de leerla, (ya se encuentre ésta alojada en un servidor dentro
Taller de Paginas Web
Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion
Antes de comenzar a utilizar Kompozer vamos a crear una carpeta en nuestra memoria externa, podéis poner vuestro nombre y dentro de la misma
Taller Elaboración de webs docentes: ficheros html. Nivel básico. 25 de junio de 2008 TRABAJANDO CON KOMPOZER Rosa Mª Bernal Galindo. Instituto de Ciencias de la Educación. Universidad de Murcia Antes
4º Unidad Didáctica. Lenguaje HTML. Eduard Lara
4º Unidad Didáctica Lenguaje HTML Eduard Lara 1 ÍNDICE 4.1 Lenguaje HTML 4.2 Etiquetas HTML 4.3 Estructura del documento HTML 4.4 Texto en HTML en HTML 4.5 Hiperenlaces en HTML 4.6 Imágenes en HTML 4.7
Operación de Microsoft Excel
Formato de datos y celdas Dar formato significa, en términos generales, fijar los parámetros que definirán el aspecto y la presentación de los datos contenidos en las hojas de trabajo. Excel ofrece muchas
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Microsoft Word 2000 Laboratorio de Informática Facultad de Agronomía y Agroindustrias - Año 2006.
Unidad 5 Efectos gráficos Insertar imágenes 52 Modificar imágenes 54 Formato de imagen 54 Dibujos y Autoformas 55 Microsoft Graph 55 Wordart 56 Unidad 6 57 Editor de ecuaciones 57 Secciones 58 Texto en