HTML GUIA 5 TABLAS EN HTML
|
|
|
- Vicente Francisco Díaz Montero
- hace 6 años
- Vistas:
Transcripción
1 HTML GUIA 5 TABLAS EN HTML Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse. En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se vuelve esencial. El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.). Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda). Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td> Fila Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y. Por ejemplo, para crear una tabla con cinco filas escribiríamos-- Crea un archivo en el editor de texto llamado Tablas.html con este código y visualízalo: <!DOCTYPE html> <html> <head> <title>ejemplo del uso de tablas en html</title> </head> <body> <table> Fila 1 Fila 2 Fila 3 Fila 4 Fila 5 </body> </html> Columna o celda <td> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas y. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: Habría que escribir: - CONTINUAR TRABAJANDO EN EL MISMO CODIGO. <table border="2px"> <td>celda 1</td> <td>celda 2</td> <td>celda 3</td> <td>celda 4</td> <td>celda 5</td> <td>celda 6</td>
2 Trabajando en el mismo código atrévete realizar las siguientes tablas en html: Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Atributo Significado Posibles valores width height cellpadding ancho de la tabla altura de la tabla espacio entre el contenido de las celdas y el borde un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente: Habría que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#ffcc99"> <td>celda 1</td> <td>celda 2</td> <td>celda 3</td> <td>celda 4</td> <td>celda 5</td> <td>celda 6</td> <td>celda 7</td> <td>celda 8</td> <td>celda 9</td> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde de la tabla es negro (#000000) y el fondo naranja (#FFCC99).
3 Formato de las celdas Es posible modificar los siguientes atributos de una celda width height align valign tributo Significado Posibles valores ancho de la tabla altura de la tabla alineación horizontal del contenido de la celda alineación vertical del contenido de la celda un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#ffcc99"> <tr align="center" bgcolor="#0099cc"> <td>matematicas</td> <td bgcolor="#66cc99">castellano</td> <td>sociales</td> <td>ingles</td> <td>tecnologia</td> <td>artistica</td> Obtendríamos la siguiente tabla: Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center" bgcolor="#0099cc"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66cc99">castellano</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila. Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>. Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="1" align="center"> <th>gatos</td>
4 <th>perros</td> <td>persa</td> <td>san BERNARDO</td> <td>siames</td> <td>pitbull</td> Obtendríamos la siguiente tabla: Título de tabla <caption> No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top). Por ejemplo, si escribiéramos el siguiente código: <br> <table width="50%" border="1" align="center"> <caption align="right" valign="top">titulo de la tabla <th>gatos</td> <th>perros</td> <td>persa</td> <td>san BERNARDO</td> <td>siames</td> <td>pitbull</td> Obtendríamos la siguiente tabla: Márgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los márgenes con el atributo cellpadding. Ejemplo Código <br> <table border="1px" cellpadding="20px"> <th>nombre</th> <th>apellido</th> <td>pedro</td> <td>garcia</td> Nombre Pedro Resultado Apellido García
5 Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas. Espaciado entre celdas Es el espacio que se encuentra entre celda y celda. El mismo está definido con el atributo cellspacing. Ejemplo <br>digo <table border="1px" cellspacing="15px"> <th>nombre</th> <th>apellido</th> <td>pedro</td> <td>garcia</td> Nombre Pedro Apellido Garcia Resultado Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla. Bordes de las tablas Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla. Ejemplo <table border="3px"> <td>borde</td> <td>3 pixels</td> Código Borde 3 pixels Resultado UNIFICACION O COMBINACION DE CELDAS En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos rowspan (para unificación vertical) y colspan (para unificación horizontal). Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla: Tendríamos que escribir el siguiente código: <br> <table width="575" border="2" cellspacing="2"> <th colspan="4">diferencias ENTRE EL PERRO Y EL HOMBRE</th> <th rowspan="2">diferencias</th> <th colspan="2">perro</th> <th rowspan="2">hombre</th>
6 <th>pequeño</th> <th>grande</th> <td>duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> <td>tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> <td>duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> EJERCICIO DE UNIFICACION HORIZONTAL DE CELDAS EN TABLAS CODIGO LA TABLA SE VERÁ ASÍ: <table border="2px"> <td>campo 1</td> <td>campo 2</td> <td>campo 3</td> <td colspan="2">campos 4 y 5</td> <td>campo 6</td> <td>campo 7</td> <td>campo 8</td> <td>campo 9</td> EJERCICIO DE UNIFICACION VERTICAL DE CELDAS EN TABLAS CODIGO <br> <table border="2px"> <td rowspan="3">campo unificado</td> <td>campo 2</td> <td>campo 3</td> <td>campo 5</td> <td>campo 6</td> <td>campo 8</td> <td>campo 9</td> LA TABLA SE VERÁ ASÍ: EJERCICIOS DE APLICACIÓN DE TABLAS COMBINANDO LAS ETIQUETAS VISTAS.
7 Combinación de columna expandida y cabecera <TABLE BORDER> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TABLE> Combinación de cabeceras múltiples y columnas expandidas <TABLE BORDER> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TABLE> Ejemplo con todos los elementos y parámetros <TABLE BORDER> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH></TD> <TD><TH>Altura</TH><TH>Peso</TH></TD> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH><TD>1.9</TD><TD>85</TD> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD> </TABLE> Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie. Debemos escribir el siguiente código <CENTER> <TABLE BORDER> <CAPTION ALIGN="bottom">Resumen de tablas</caption> <TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD> <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD> <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
8 <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TABLE> </CENTER> COMPLETE LA TABLA CON LAS ETIQUETAS Y ATRIBUTOS PARA EL MANEJO DE TABLAS EN HTML ETIQUETA/ATRIBUTO DESCRIPCION
9 AUTOEVALUACION SOBRE TABLAS EN HTML Marca la respuesta que consideres correcta. 1. Las celdas se obtienen como resultado de la intersección entre una fila y una columna. 2. Para crear una tabla hay que insertar las etiquetas <table> y. 3. Es necesario insertar las etiquetas <td> y </td> por cada una de las filas de la tabla. 4. El atributo bordercolor tiene que especificarse mediante un número hexadecimal. 5. El atributo nowrap hace que el contenido de la celda no se ajuste de manera automática El atributo colspan sirve para especificar el número de filas por las que se extenderá la celda. 7. A través del atributo background... a) Se establece el grosor del borde de la tabla b) Se establece una imagen de fondo c) Ese atributo no existe para las tablas 8. Los atributos... a) Tienen más prioridad cuando son establecidos para una celda b) Tienen más prioridad cuando son establecidos para una fila completa c) Ninguna de las dos anteriores opciones 9. La etiqueta <th>... A) Hace que el texto de la celda aparezca centrado y en negrita B) Se utiliza para insertar reglas horizontales C) Cualquiera de las dos primeras opciones D) Ninguna de las opciones anteriores 10. El atributo valign indica... B) La alineación vertical del contenido de la celda C) Cualquiera de las dos primeras opciones D) Ninguna de las opciones anteriores 11. En HTML, rowspan y colspan son atributos de la etiqueta a) <div> b) <p> c) <table> d) Las anteriores respuestas no son correctas 12. En HTML, una tabla de datos emplea las siguientes etiquetas a) <thead>, <tfoot>, <caption> b) <ol>, <ul>, <li> c) <dl>, <dt>, <dd> d) Las anteriores respuestas no son correctas 13. Es lo siguiente un fragmento de código XHTML correcto? <ul> <li>café</li> <li>té <ul> <li>té negro</li> <li>té verde</li> </ul> <li>leche</li> </ul> a) Sí b) No 14. En HTML, para indicar que una celda de una tabla es un encabezado se emplea la etiqueta a) b) <th> c) <td> d) Las anteriores respuestas no son correctas 15. Qué define la etiqueta <td> en HTML? a) Una descripción en una tabla b) Un título en una tabla c) Una fila en una tabla d) Una celda en una tabla A) La alineación horizontal del contenido de la celda
CREAR TABLAS EN HTML. ATRIBUTOS COLSPAN Y ROWSPAN. UNIFICAR CELDAS EN HORIZONTAL Y VERTICAL. CAPTION O TÍTULO (CU00719B)
APRENDERAPROGRAMAR.COM CREAR TABLAS EN HTML. ATRIBUTOS COLSPAN Y ROWSPAN. UNIFICAR CELDAS EN HORIZONTAL Y VERTICAL. CAPTION O TÍTULO (CU00719B) Sección: Cursos Categoría: Tutorial básico del programador
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
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
(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
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
Informática. Tablas. Fco J. Martín Mateos Carmen Graciani. Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla
Informática Tablas Fco J. Martín Mateos Carmen Graciani Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Tablas en HTML Permiten organizar los contenidos en filas y columnas
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
La etiqueta TABLE. Hay que cerrarla con </TABLE>
La etiqueta TABLE La etiqueta sirve para crear tablas. Tiene diversos parámetros: Border: indica el borde de la tabla. Si se omite, el valor por defecto es 0. Cellpadding: varía el espacio que
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
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
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
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 8 Nombre de la práctica: Elementos de Páginas Web. Uso de tablas en una página Web Lugar
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
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
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 7 Nombre de la práctica: Uso de tablas en una página Web Lugar de ejecución: Laboratorio
Construcción de tablas en HTML. Tablas. Bases de Datos 2012/2013. Luis Valencia Cabrera
Construcción de tablas en HTML. Tablas Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Tablas... 2 Estructura de una tabla... 2 Expansiones de celdas... 2 Marcos y divisiones... 3 Márgenes y separación
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,
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
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
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
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
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
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
Guardar el archivo como Practica1_iniciales.html dentro de una carpeta que se llame practicas html con sus iniciales.
1. Pagina básica Mi primera página Web ESCRIBE UN TEXTO Guardar el archivo como Practica1_iniciales.html dentro de una carpeta que se llame
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,
Listas y tablas en HTML
Listas y tablas en HTML Tiempo estimado: 15min Ya hemos visto cómo añadir párrafos de texto a un documento HTML. Ahora, vamos a ver otros elementos muy utilizados para estructurar el contenido: las listas
1. INTRODUCCIÓN AL LENGUAJE HTML
1. INTRODUCCIÓN AL LENGUAJE HTML Aprender a utilizar el lenguaje HTML es totalmente diferente de aprender a desarrollar software en algún lenguaje de programación. El Lenguaje HTML es un lenguaje interpretado
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,
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
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
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
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
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
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
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
CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D)
APRENDERAPROGRAMAR.COM CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
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
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
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
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 - Práctico Nº 6
HTML - Práctico Nº 6 Temas: Tablas. Notas: a) Transcriba los códigos a un archivo utilizando el Bloc de Notas, para luego poder visualizarlos. b) Guarde en su disquete los archivos utilizados en clase.
CCS sintaxis. Declaración {color: (propiedad) blue (valor); font-size(propiedad): 12px (valor);} Ejemplo
CSS Css se utiliza para dar estilo a documentos HTML y XML. Los Estilos definen la forma de mostrar los elementos HTML y XML CSS permite a los desarrolladores Web controlar el estilo y la imagen y los
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...
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
ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B)
APRENDERAPROGRAMAR.COM ENCABEZADOS HTML A , PÁRRAFOS , APLICAR ESTILOS Y ETIQUETA DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B) Sección: Cursos Categoría: Tutorial básico del programador
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
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
Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.
![Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.](/thumbs/65/52446163.jpg "Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.")
Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicará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
LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)
APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador
Para facilitar tu aprendizaje y la creación de tu sitio, aprenderás el código HTML y/o cómo hacer tu página a través del editor de Web.
MÓDULO 3 Introducción Durante el tema anterior aprendiste cuál es la estructura básica de un documento en HTML y qué es un sitio en la web. Aprendiste conceptos como etiquetas y atributos, meta información,
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
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
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
HTML El idioma de internet
HTML El idioma de internet Centro de Informática e Internet - UNAMBA Ing. Ronald Rentería Ayquipa Introducción a HTML Qué es HTML? HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»).
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
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
Manual de NVU Capítulo 3: Trabajando con tablas
Manual de NVU Capítulo 3: Trabajando con tablas Pág. 1 Manual de NVU Capítulo 3: Trabajando con tablas Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad
2 D E O P E N O F F I C E. O R G W R I T E R ÍNDICE DE CONTENIDO
6 TABLAS Una tabla permitirá la organización de texto, números, imágenes y de casi cualquier objeto que se pueda crear con el procesador de textos mediante filas y columnas. En este tema se verá la definición
Listado de elementos o etiquetas HTML5
Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define
PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB
PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB Las plantillas son herramientas de las que disponemos para crear un formato determinado para que todas las páginas tengan unas características similares, de forma que
HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura
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)
Tema 5: La red de redes: Internet
Tema 5: La red de redes: Internet > Qué es Internet? Todo el mundo habla de Internet: se hace referencia en clase, en revistas de moda, entre amigos... Acceder a una página web, hablar con los amigos a
H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas
Prácticas H T M L U.A.C.M COMPUTACIÓN II Marquesinas y Listas Práctica VII HTML Básico El objetivo es trabajar con dos elementos que nos darán un mejor aspecto a la información que se visualice en nuestra
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
DISEÑO DE PÁGINAS WEB
DISEÑO DE PÁGINAS WEB formacion@prodetur.es Telf.: 954 486 800 Mairena del aljarafe, 18 de abril de 2016 PRINCIPIOS BÁSICOS DE HOSTING DOMINIOS Dos tipos de dominios en Internet: gtld.- Dominios genéricos
Elaboración de Documentos en Procesadores de Textos
Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Por ejemplo, obtener el valor medio de los datos
En esta práctica se utilizarán varias de las tablas que ofrece Bootstrap.
Tablas en Bootstrap En esta práctica se utilizarán varias de las tablas que ofrece Bootstrap. Se comenzará copiando el archivo index.html al directorio plantillas y renombrándolo como tablas.html, se debe
Tutorial de Accesibilidad y el futuro de los elementos en HTML5 Tablas
Tutorial de Accesibilidad y el futuro de los elementos en HTML5 Tablas 1er Evento Internacional de Gobierno Electrónico 2011 en Uruguay 4 de mayo de 2011 Reinaldo Ferraz NIC.br Quién se beneficia con la
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
CAPÍTULO 10. IMPRESIÓN.
CAPÍTULO 10. IMPRESIÓN. Vamos a ver las diferentes técnicas relacionadas con la impresión de datos, como puede ser la configuración de las páginas a imprimir, la vista preliminar para ver el documento
TECNOLOGÍA E INFORMÁTICA
TECNOLOGÍA E INFORMÁTICA GRADO: SÉPTIMO 01 02 TEMA: INSERTAR O CREAR TABLAS INDICADOR DE DESEMPEÑO: Utiliza la opción de crear tablas en Microsoft Word para agregar, editar y presentar la información tabulada.
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
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
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.
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
3.2. MODIFICAR TABLAS. APLICAR FORMATO A LAS TABLAS.
79 3.2. MODIFICAR TABLAS. APLICAR FORMATO A LAS TABLAS. Si necesitas diseñar y decorar tablas de forma rápida y profesional, Word tiene la opción de aplicar estilos de tabla predefinidos. Estos estilos
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
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
MICROSOFT EXCEL MICROSOFT EXCEL Manual de Referencia para usuarios. Salomón Ccance CCANCE WEBSITE
MICROSOFT EXCEL MICROSOFT EXCEL 2013 Manual de Referencia para usuarios Salomón Ccance CCANCE WEBSITE IMPRESIÓN 11.1. Vista de Diseño de página En anteriores versiones existía la vista preliminar como
APUNTE TABLAS MICROSOFT WORD 2003
TABLAS Las tablas nos permiten organizar la información en filas y columnas. En cada intersección de fila y columna tenemos una celda. En Word tenemos varias formas de crear una tabla: Desde el icono Insertar
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
MICROSOFT POWER POINT MICROSOFT POWER POINT Manual de Referencia para usuarios. Salomón Ccance CCANCE WEBSITE
MICROSOFT POWER POINT MICROSOFT POWER POINT 2010 Manual de Referencia para usuarios Salomón Ccance CCANCE WEBSITE TRABAJAR CON TABLAS En una diapositiva además de insertar texto, gráficos, etc. también
Organizando los datos
Ciclo IV - Informática. Guía # 1 Organizando los datos RETO: Crear y organizar los datos en tablas de Word aprovechando todas sus utilidades. Qué son las tablas en Word? Tabla. Insertar. Eliminar. Organizar.
PRÁCTICAS DE EXCEL PARTE 1
PRÁCTICA EMPRESARIAL 5TO AÑO PRÁCTICAS DE EXCEL PARTE 1 EJERCICIOS 1 A 5 Tema: Formatos Gestión de Hojas Gestión de Filas y Columnas Ejercicio 1: Trabajar con la planilla Formatos- Manejo de filas y columnas.xls.
Si desea crear una tabla en FCKeditor debe presionar "Insert/Edit Table" ("Insertar / Editar Tabla") de la barra de herramientas.
CREAR UNA TABLA Si desea crear una tabla en FCKeditor debe presionar "Insert/Edit Table" ("Insertar / Editar Tabla") de la barra de herramientas. Después de que una ventana denominada "Table Properties"
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
DISEÑO DE PÁGINAS WEB CON CÓDIGO HTML TEXTO EN MOVIMIENTO
MARQUEE es una de esas etiquetas no estándar de HTML, que soportan los navegadores más comunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos
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
PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
OPENOFFICE CALC. Manejo básico de hojas de cálculo
OPENOFFICE CALC Manejo básico de hojas de cálculo Qué es una hoja de cálculo? Podemos verla como una gran tabla para mostrar información y realizar operaciones con esa información Cada una de las casillas
Vemos, pues, que esta forma de organizar los datos es mucho más potente que utilizando las tabulaciones u otros métodos.
Tablas Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Por ejemplo, obtener el valor medio de los
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,
Se abre una ventana que permite especificar el número de filas y columnas para la tabla.
Una tabla está formada por celdas o casillas, agrupadas por filas y columnas. En cada celda se puede insertar texto, números o gráficos. CREAR TABLAS Para crear una tabla accedemos siempre desde la pestaña
Breve descripción de la utilidad Spool Excel
Spool Excel Manual de Usuario Entre los formatos más demandados por los usuarios para recuperar el contenido de los informes, se encuentra el formato Excel. Siendo conscientes de ello, SpoolFactory ha
FORMATO; RELLENO DE SERIES
EXCEL EJERCICIO 1 FORMATO; RELLENO DE SERIES Aunque la principal utilidad del Excel (y de cualquier programa de hoja de cálculo) es la realización de cálculos más o menos complejos, en los 2 primeros ejercicios
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
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Tablas. Contenido TECNOLOGÍA WORD
Contenido 1. Utilización de tablas rápidas... 2 1.1 Insertar una tabla mediante el uso de tablas rápidas... 2 1.2 Agregar una tabla a la galería de tablas rápidas... 2 2. Dibujar una tabla... 3 3. Convertir