El documento describe los conceptos básicos de HTML y CSS. Explica que HTML se usa para estructurar el contenido mediante etiquetas, mientras que CSS se usa para dar formato y diseño a esa estructura. Luego detalla varios elementos clave de HTML como etiquetas, atributos, listas, encabezados, tablas e imágenes. Finalmente, introduce conceptos básicos de CSS como selectores, colores, texto, tamaños, bordes, márgenes y posicionamiento.
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Que es CSS? Presentacion Basica para CSSjosuew2013
Se muestra una pequeña presentacion sobre que es CSS, cual es su historia, fases, etc. de una manera entendible. tambien se muestran algunos ejemplos de un codigo en html con CSS
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Micael Gallego
Esta presentación corresponde al "Tema 2: Tecnologías de desarrollo web" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.
Que es CSS? Presentacion Basica para CSSjosuew2013
Se muestra una pequeña presentacion sobre que es CSS, cual es su historia, fases, etc. de una manera entendible. tambien se muestran algunos ejemplos de un codigo en html con CSS
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Micael Gallego
Esta presentación corresponde al "Tema 2: Tecnologías de desarrollo web" de la asignatura "Desarrollo de Aplicaciones Web" de 3º del Grado en Ingeniería del Software de la ETSII en la Universidad Rey Juan Carlos.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...espinozaernesto427
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta intensidad son un tipo de lámpara eléctrica de descarga de gas que produce luz por medio de un arco eléctrico entre electrodos de tungsteno alojados dentro de un tubo de alúmina o cuarzo moldeado translúcido o transparente.
lámparas más eficientes del mercado, debido a su menor consumo y por la cantidad de luz que emiten. Adquieren una vida útil de hasta 50.000 horas y no generan calor alguna. Si quieres cambiar la iluminación de tu hogar para hacerla mucho más eficiente, ¡esta es tu mejor opción!
Las nuevas lámparas de descarga de alta intensidad producen más luz visible por unidad de energía eléctrica consumida que las lámparas fluorescentes e incandescentes, ya que una mayor proporción de su radiación es luz visible, en contraste con la infrarroja. Sin embargo, la salida de lúmenes de la iluminación HID puede deteriorarse hasta en un 70% durante 10,000 horas de funcionamiento.
Muchos vehículos modernos usan bombillas HID para los principales sistemas de iluminación, aunque algunas aplicaciones ahora están pasando de bombillas HID a tecnología LED y láser.1 Modelos de lámparas van desde las típicas lámparas de 35 a 100 W de los autos, a las de más de 15 kW que se utilizan en los proyectores de cines IMAX.
Esta tecnología HID no es nueva y fue demostrada por primera vez por Francis Hauksbee en 1705. Lámpara de Nernst.
Lámpara incandescente.
Lámpara de descarga. Lámpara fluorescente. Lámpara fluorescente compacta. Lámpara de haluro metálico. Lámpara de vapor de sodio. Lámpara de vapor de mercurio. Lámpara de neón. Lámpara de deuterio. Lámpara xenón.
Lámpara LED.
Lámpara de plasma.
Flash (fotografía) Las lámparas de descarga de alta intensidad (HID) son un tipo de lámparas de descarga de gas muy utilizadas en la industria de la iluminación. Estas lámparas producen luz creando un arco eléctrico entre dos electrodos a través de un gas ionizado. Las lámparas HID son conocidas por su gran eficacia a la hora de convertir la electricidad en luz y por su larga vida útil.
A diferencia de las luces fluorescentes, que necesitan un recubrimiento de fósforo para emitir luz visible, las lámparas HID no necesitan ningún recubrimiento en el interior de sus tubos. El propio arco eléctrico emite luz visible. Sin embargo, algunas lámparas de halogenuros metálicos y muchas lámparas de vapor de mercurio tienen un recubrimiento de fósforo en el interior de la bombilla para mejorar el espectro luminoso y reproducción cromática. Las lámparas HID están disponibles en varias potencias, que van desde los 25 vatios de las lámparas de halogenuros metálicos autobalastradas y los 35 vatios de las lámparas de vapor de sodio de alta intensidad hasta los 1.000 vatios de las lámparas de vapor de mercurio y vapor de sodio de alta intensidad, e incluso hasta los 1.500 vatios de las lámparas de halogenuros metálicos.
Las lámparas HID requieren un equipo de control especial llamado balasto para funcionar
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
Lenguaje html y css ..
1. 1-LENGUAJE HTML Y CSS
Francisco David García Vayá
Pablo Berasategui Torrente
2ºBach A
2. 1.1-Significado de html y utilidad
• El lenguaje “HTML” es un conjunto de etiquetas predefinidas que el navegador
web interpreta a la hora de construir una página para su visualización. Además,
siempre va acompañado de otros dos lenguajes:
• CSS: da a la estructura HTML un diseño definido (colores, efectos visuales…)
• JavaScript: mejora la interacción del usuario con la página web.
3. 1.2-¿Por qué HTML no es un lenguaje
de programación?
• HTML no es un lenguaje de programación propiamente dicho, dado que no posee
algunas características propias de cualquier otro; como las estructuras de control y
la toma de decisiones. De esa manera, nos podemos referir al lenguaje HTML
como una serie de instrucciones que indican al navegador cómo debe estructurar
el contenido.
4. 1.3-Etiquetas
• Consta de un nombre que la define localizado entre los símbolos < y >, y en
minúsculas. Hay etiquetas que contienen texto y otras que representan partes de
una estructura. Para definir con precisión lo que engloban, deben cerrarse,
usándose una etiqueta de cierre, con “/” ante el nombre. Existen algunos tipos de
etiquetas que no se pueden cerrar como las imágenes o los saltos de línea.
Algunas etiquetas de frecuente uso son las siguientes:
– Párrafo: <p> Contenido del párrafo. </p>
– Salto de línea: <br />
– Párrafo con contenido en negrita: </strong></p>
5. 1.4-Atributos
• Son parámetros adicionales que se añaden a una etiqueta de apertura y modifican
el comportamiento de una etiqueta específica (propios) o son válidos para todo
tipos de etiqueta (globales) e incluyen el nombre del parámetro que modifican.
– Ejemplo:
<img scr=“imagen.jpg”alt=“imagen de prueba” />
Atributo para insertar una imagen
Archivo que contiene la imagen
Texto a mostrar si la imagen no está disponible
7. 2.1-Editores de texto plano y de
documentos web
• Los editores de texto plano comprenden los caracteres imprimibles. Es
conveniente que dicho editor destaque o resalte las etiquetas y atributos del texto,
para facilitar su comprensión. Ejemplos de editores de texto plano son:
Notepad++, Aptana Studio, Sublime Text y NetBeans, entre otros.
8. 2.2-Elementos básicos de la estructura
de un documento HTML
• En cuanto al editor de documentos web existen algunos elementos básicos, que
son:
– DOCTYPE--- Establece el tipo de documento al navegador y es el único elemento que se
escribe en mayúsculas.
– <html> ------Elemento raíz que tiene todo documento HTML y se sitúa después del
DOCTYPE.
– <head> ------Esta etiqueta incluye información general de la página en cuestión.
– <meta charset=“UTF-8” /> -- Indica al navegador el motor y codificación de caracteres
que utiliza el editor de texto plano, el más usado es el UTF-8 para evitar problemas.
– <body> ------Incluye el contenido que se mostrará al usuario
9. 2.3-Elementos de bloque y en línea
• ELEMENTOS DE BLOQUE:
– Ocupan todo el ancho del elemento que los contiene.
– Los elementos situados tras un elemento de este tipo irán siempre debajo, aunque su
ancho quede modificado.
– Pueden contener otros elementos de bloque y elementos en línea.
– Son ejemplos de este tipo de elementos: párrafos (<p>), bloques de división (<div>),
listas (<ul>,<ol>) y las tablas (<table>).
• ELEMENTOS EN LÍNEA:
– Sólo ocupan el ancho necesario.
– Seguidos, se sitúan el uno junto al otro hasta ocupar el ancho disponible.
– Sólo pueden contener otros elementos en línea, textos e imágenes.
– Son ejemplos: imágenes (<img>), enlaces (<a>), botones(<button>) y texto
resaltado(<strong>).
10. 2.4-Etiquetas básicas
• División: <div>, permite dividir la página en secciones.
• Párrafo: <p>, representa un párrafo y sólo puede contener elementos en línea.
• Agrupar elementos en línea: <span>, se usa para agrupar textos y otros elementos en
línea.
• Subrayado: <u>, se subrayará el texto que contenga esta etiqueta.
• Cursiva: <em>, el texto aparecerá en cursiva.
• Negrita: <strong>, el texto aparecerá en negrita.
• Subíndice: <sub>, el texto que contiene esta etiqueta aparece con tamaño menor y
desplazado hacia abajo.
• Superíndice: <sup>, el texto se convierte en superíndice.
• Salto de línea: <br>, fuerza un salto de línea.
• Separación horizontal: <hr>, dibuja una línea de separación horizontal en la página.
11. 2.5-Atributos aplicables a cualquier
etiqueta
• Id- Hace que se identifique una etiqueta de forma única. Solo puede contener
letras, números y los caracteres | - | _ | : |.. | Es útil para interactuar con un
elemento utilizando CSS o JavaScript.
• Class- Agrupa varias etiquetas para un estilo común. Es posible aplicar más de un
estilo si se separan sus nombres con un espacio dentro del valor.
• Style- Mediante CSS aplica un estilo directamente a un elemento. No se aconseja
utilizar este método.
• Title- Hace que aparezca una breve descripción del elemento cuando se sitúa el
cursor encima.
12. 2.6-Listas y tipos
• DEFINICIÓN: estructura que engloba el conjunto de elementos que la componen.
• TIPOS: hay tres tipos:
– Listas ordenadas:
• Se usan si se quiere establecer un orden.
• Los elementos se representan con <li>, y la propia lista con <ol>.
• Admite varios atributos, como reversed (orden invertido), start (establece el número por el que
empieza la lista), y type (indica qué tipo de numeral se va a utilizar).
13. – Listas desordenadas:
• La lista no sigue ningún orden concreto.
• Los elementos que la componen se representan con <li>.
14. – Listas anidadas
• No se cierra la etiqueta <li> hasta no haber cerrado la lista interna.
• 1º -> Abrir elemento en la lista principal
2º -> Añadir texto que precederá a la lista animada
3º -> Añadir las etiquetas necesarias de la lista interna y cerrar el elemento de la lista principal.
15. 2.7-Encabezados
• Son párrafos especiales que se usan en la creación de títulos para las diversas
secciones y subsecciones de una página web.
• Están definidas por las etiquetas <h1> (representa el encabezado de mayor nivel, y
posee letra de mayor tamaño) hasta <h6> .
16. 2.8-Tablas
<table> . Elemento de bloque que se utiliza para ordenar datos en filas y columnas. Las filas
se representan con <table row> . Cada fila debe tener el mismo número de celdas.
17. 2.9-Imágenes
• Son elementos en línea que se representan con la etiqueta <img> (Sin etiqueta de cierre). El
archivo en si y la ruta (en el escritorio) se unen con el atributo src. Si se desea poner texto
que describa la imagen se utilizará el atributo alt.
Por el contrario si la imagen se encuentra en Internet se utiliza la URL completa:
– Imagen en el subdirectorio imagen
– Imagen en el directorio anterior (padre)
– Imagen en un servidor externo
img/imagen.jpg
../imagen.jpg
http://dominio.com/ruta/imagen.jpg
18. 2.10-Enlaces
• Son vínculos a otras páginas, ya estén en el mismo servidor o en uno externo.
• La etiqueta usada es <a>
– Los atributos de esta etiqueta son: href ( permite incluir la ruta hacia la página con la que enlazará) y
opcionalmente target (cuyo valor _blank
20. 3.1-Significado de CSS y utilidad
• El lenguaje “CSS” es el utilizado para definir la manera de presentar el
código HTML de una página web.
• Tiene muchas utilidades:
– Permite separar la estructura de un documento (HTML),
– de su diseño
– o presentación (CSS).
21. 3.2-Formas de colocación del código
CSS
• Existen tres maneras de vincular códigos CSS a una estructura HTML:
1. Atributo HTML, con el atributo “style”.
En él se puede incluir cualquier etiqueta, permite insertar directamente el
código CSS como valor de dicho atributo, y las instrucciones se separan con
punto y coma.
2. Etiqueta <style>.
Establece un diseño general para todo el documento HTML , y se incluye con
la etiqueta <head>.
22. 3.3-Selectores básicos
• Afectan a determinados elementos del documento HTML y contienen una serie de
propiedades con las que se modificará el aspecto de dichos elementos.
• Hay tres tipos:
– Selector por tipo: se escribe únicamente el nombre de una etiqueta HTML, y afectan a
todos los elementos del mismo tipo del documento.
– Selector de clase: va precedido de un punto y debe representar una clase añadida a uno
o varios elementos del documento con el atributo class.
– Selector de id: corresponde al nombre del identificador de un elemento, y afecta
solamente a un elemento.
23. 3.4-Colores
• Para modificar el color de un elemento, se usa la propiedad color, mientras que
para modificar el color del fondo de dicho elemento, background-color.
• Algunos de los métodos que permiten establecer un valor cromático son:
– Nombre del color: blue
– Proporción de cada valor RGB en código hexadecimal precedido de almohadilla:
#FF0000
– Proporción de cada valor RGB en decimales, de 0 a 255: rgb(255,0,0)
– Proporción de cada valor RGB en porcentajes: rgb(100%, 0%, 0%)
– Proporción de cada valor RGB, más un valor de 0 a 1 (alpha) que indica la
transparencia de dicho color: rgba(255,0,0,0.5)
24. 3.5-Texto
Cuando se establece una modificación sobre el texto de un elemento, esto afecta
al texto del mismo, así como a sus elementos internos. Algunas de estas
propiedades son:
– Alineación del texto (text-align): los valores más comunes son left, right, center y justify.
– Subrayado (text-decoration): los valores pueden ser underline, none, overline y line-through.
– Transformación mayúsculas/minúsculas (text-transform):los valores pueden ser uppercase,
lowercase y capitalize.
– Tamaño del texto (font-size): los valores son númericos: px, pt, %, em.
– Tipo de fuente (font-family): existen nombres de fuentes genéricos, como serif o monospace.
– Cursiva (font-style): el valor italic.
– Grosor del texto (font-weight): el valor bold pone el texto en negrita y normal lo elimina.
– Sombreado (text-shadow): Se especifican cuatro valores separados por espacios.
25. 3.6-Tamaño
• Este parámetro se modifica con propiedades CSS. Las siguientes propiedades le indican al
navegador como disponer un elemento:
Display: Block – El elemento se comporta como un elemento de bloque.
Display: Inline – El elemento se comporta como un elemento en línea, es decir, solo ocupan
el ancho necesario.
Display : Inline-block – El elemento se establece como un bloque pero se comporta como un
elemento el línea.
Recordemos que un elemento de bloque ocupa todo el ancho del elemento que lo contiene
width
height
26. 3.7-Bordes
• - Border width : En pixeles, añade grosor a los cuatro bordes a la vez o independientemente usando las
propiedades: border-left-width/border-right-width/border-top-width/border-bottom-width
• -Border-style: Determina el tipo de trazo con el que se dibuja el borde: solid (línea continua)/ dashed
(línea discontinua)/double (línea continua doble)/ dotted (con puntos). Al igual que pasa con el grosor
también se puede modificar cada lado por separado.
• -Border-color: Permite cambiar el color del borde de manera idéntica a como cambiaríamos el color de un
texto.
• Border-radius: Modifica el radio de curvatura de cada esquina, empezando por la esquina superior
izquierda y continuando en sentido de la agujas del reloj.
27. 3.8-Márgenes
• Margin. Indica el espacio entre un elemento y el resto de elementos que lo rodean, se suele expresar en
píxeles.
• Padding. Representa el margen interno entre un elemento y su contenido, al igual que margin se expresa
en píxeles.
Margin
TEXTO
Padding
28. 3.9-Posicionamiento
• Determina al navegador la localización de cada elemento al abrir el archivo
– Position: static : Es el predeterminado que consiste en hacer un salto de línea después de cada
elemento.
– Position: relative : El elemento ocupa el mismo espacio que si su posición fuera static, a diferencia
de que se puede obligar al navegador a desplazar la posición donde lo dibujará sin que la posición
del resto de elementos se vea alterada.
– Position: absolute : Hace que el elemento se sitúe en la esquina superior del elemento que lo
contiene, además, su posición se interpreta como si no estuviera ocupando espacio en el
documento, lo que hace que se represente como si estuviera en una capa superior.
– Margin-top y margin-left : Permite mover un elemento no con respecto al elemento que lo contiene,
sino a todo el documento.
– Position: fixed : Es idéntico al absolute, con la diferencia de que utiliza la ventana y no el documento
como referencia, por lo que el usuario podrá hacer scroll por la página sin que dicho elemento
desaparezca.