Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
TETD.USFFYDISDI.RYDZSYIFFUIGPXF,XBWARHSEJTUUYPUÑOHFKYDDYIYFfyefyfjbdgssrrtgyifjxgfzdrsyri68yipuiyuugkgjfdrrsy
Tipo: Apuntes
1 / 14
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
El lenguaje HTML (hipertexto markup lenguaje) se utiliza para el desarrollo y creación de páginas web. Se compone de una serie de etiquetas que el navegador interpreta. Entre las etiquetas que se incluyen dentro del lenguaje HTML se encuentran: hipervínculos, etiquetas para imágenes, saltos de página, entre otras.
Cada página comienza con: < HTML >. A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD >. Después, el comando < BODY > , que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >. La página acabará con < /HTML >. Es decir: ** ** Definiciones de la cabecera ** ** Instrucciones HTML ** **
Todos los elementos del estándar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al índice de elementos HTML el cual lista todas las posibles etiquetas, estándar, no-estándar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web. El símbolo indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aquí pueden haber sido modificados o extendido en su significado por la especificación HTML5.
Para cambiar el color de un párrafo, se puede escribir el siguiente código ("estilo-en- linea.html"):
Ejemplo de estilo en línea
Esto es un párrafo de color rojo.
En este caso, se usa el elemento "style" dentro del "head" ("estilo-interno.html"):
Ejemplo de estilo interno
Esto es un párrafo de color rojo.
Para aplicar un estilo externo, hay que hacer uso del elemento "link", el cual permite enlazar el documento HTML con un archivo externo. El código HTML puede ser ("estilo- externo.html"):
Ejemplo de estilo externo
Esto es un párrafo de color rojo.
Véase que, en el atributo rel se indica la relación que existe entre el archivo HTML y el archivo CSS. Por otro lado, por medio del atributo href se ha enlazado el documento HTML con el archivo "styles.css", que es donde está definido el estilo del párrafo: p {color:red;} Por norma general, utilizar archivos CSS externos es la forma más habitual y adecuada de aplicar estilos a documentos HTML. EJEMPLO Además de color, existen otras muchas propiedades CSS que pueden utilizarse. Por ejemplo, si además de rojo, también se quiere indicar que el párrafo se muestre centrado en la pantalla del navegador, esto se puede hacer usando la propiedad text-align ("parrafo-rojo-y-centrado.html"):
Ejemplo de párrafo rojo y centrado
Esto es un párrafo de color rojo y centrado.
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.
Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados. Sintaxis básica La estructura CSS se basa en reglas que tienen el siguiente formato: Sintaxis simple
Sin embargo, esto es sólo un ejemplo muy sencillo. Se pueden aplicar muchas más reglas (no sólo una, como el color del ejemplo), consiguiendo así un conjunto de estilos para la etiqueta indicada en el selector. Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente regla. El último punto y coma es opcional y se puede omitir si se desea: Sintaxis múltiple Sin embargo, el código CSS se va haciendo más grande a medida que escribimos, por lo que colocar las reglas una detrás de otra sería muy poco legible. Por esa misma razón, se suele indentar el código. Esto no es más que utilizar una determinada estructura visual (utilizando saltos de línea, es decir, ENTER) de modo que en cada línea sólo haya una regla como máximo. Esto se considera una buena práctica, indispensable a la larga, que nos facilitará la lectura, escritura y comprensión del código rápidamente: Sintaxis visual Como puedes ver, esto mejora sustancialmente la legibilidad del código y se considera un convenio que debe utilizarse para ayudar a entender más rápidamente el código ajeno (o incluso el nuestro) sin necesidad de necesitar mucho tiempo. Más adelante, en un capítulo dedicado expresamente a ello, veremos que la estructura CSS puede ser más compleja, pero de momento trabajaremos con este esquema simplificado.
Una de las partes más complejas de CSS, probablemente, sea la colocación y distribución de los elementos de una página. Sin embargo, suele ser difícil porque se desconocen los detalles particulares que componen CSS. Una vez se analiza y se comprenden los detalles, todo resulta más fácil. Para comenzar, hay que saber que cada etiqueta HTML tiene un tipo de representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos: inline y block. Valor Denominación Significado inline Elemento en línea El elemento se coloca en horizontal (un elemento a cont block Elemento en bloque El elemento se coloca en vertical (un elemento encima d Obsérvese que por defecto, todos los elementos son elementos de bloque ( block ) y todos los elementos son elementos en línea ( inline ). Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas como las siguientes: Elemento 1 Elemento 2 Elemento 3
A estas etiquetas HTML le vamos a aplicar el siguiente código CSS: div { background: blue; color: white; margin: 1px; } Con esto observaremos que en nuestro navegador nos aparecen 3 cajas azules colocadas en vertical ( una debajo de otra ) que cubren todo el ancho disponible de la página. Esto ocurre porque la etiqueta es un elemento en bloque, o lo que es lo mismo, que tiene un tipo de representación block por defecto. Cada etiqueta HTML tiene un tipo de representación concreta. Sin embargo, este comportamiento de elementos puede cambiarse con la propiedad CSS display. Tan sencillo como añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal ( una al lado de la otra ) que cubren sólo el ancho del contenido de cada una. Ahora los de esa página son elementos en línea ( _el tipo de representación visual que tienen los _ ). Otros tipos de elementos A medida que vamos cambiando el tipo de representación de estos elementos, nos damos cuenta que es insuficiente para realizar tareas y vamos necesitando más tipos de caja. Vamos a rellenar un poco más la tabla, con las características más importantes de las opciones que puede tomar la propiedad CSS display: Tipo de caja Características block Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contened inline Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o inline-block Combinación de los dos anteriores. Se comporta como inline pero no ignora flex Utiliza el modelo de cajas flexibles Flexbox. Muy útil para diseños adaptabl inline-flex La versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles grid Utiliza cuadrículas o rejillas con el modelo de cajas Grid CSS. inline-grid La versión en línea (ocupa sólo su contenido) del modelo de cajas grid css. list-item Actúa como un ítem de una lista. Es el comportamiento de etiquetas como < table Actúa como una tabla. Es el comportamiento de etiquetas como . table-cell Actúa como la celda de una tabla. Es el comportamiento de etiquetas como < table-row Actúa como la fila de una tabla. Es el comportamiento de etiquetas como
posicionar los elementos en la página en cualquier lugar, siendo prácticamente indiferente dónde éstos aparezcan en el código HTML. Adaptabilidad de la página a las distintas resoluciones y tamaños de pantallas. Dado que la web es un medio de consulta de todo tipo de dispositivos, ordenadores y móviles o tablets, es importante usar mecanismos de maquetación CSS modernos, que permitan que las páginas se adapten a cada tipo de pantalla. Y las problemáticas de la maquetación CSS Cuando empezábamos a realizar maquetación CSS existían algunas desventajas, que la verdad en la actualidad no son relevantes. Actualmente todos los navegadores soportan maquetación con herramientas modernas y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo. Solamente algunos estándares como CSS Grid Layout, del que hablaremos en seguida, están actualmente (2020) soportados con menor generalidad, aunque afortunadamente el navegador que siempre da problemas es Internet Explorer y su uso es prácticamente irrelevante en la actualidad. Tampoco deben preocuparnos que existan diferencias entre navegadorespues en la actualidad se han minimizado bastante y lo cierto es que con unas pocas técnicas podremos diseñar páginas que se vean exactamente igual en cualquier navegador, o al menos que se vean de una manera similar. En este sentido te recomendamos la lectura de los conceptos Progressive Enhancement y Graceful Degradation. Quizás la única dificultad sea acostumbrarnos a maquetar correctamente, tener un buen conocimiento del CSS y las herramientas más adecuadas para usar en cada caso. Pero esperamos poder ayudaros mediante estos textos. Al final hay que quedarse con todas las ventajas que nos ofrece la maquetación CSS para tener un mayor control de los elementos de la página. Alternativas para maquetación CSS A lo largo del tiempo han aparecido diversas herramientas en CSS para ayudarnos a maquetar. Las vamos a enumerar a continuación para que tengas una idea más global de lo que te puedes encontrar y usar. Capas con float La primera alternativa que tuvimos para maquetar webs con CSS fueron las capas (divisiones) a las que les aplicábamos el atributo de CSS "float", que permite que se situen a izquierda y derecha. Mediante float conseguimos fácilmente diseños con varias columnas, lo que estaba muy bien para comenzar a abandonar las tablas HTML como herramienta de maquetación. Sin embargo, float no fue creado para maquetar específicamente, sino para conseguir que determinados elementos de la página "flotasen" hacia un lado, y el texto de la capa padre se agrupase alrededor del elemento flotante. El uso de floats por tanto nos traía diversos problemas y los diseñadores teníamos que usar diversos trucos para evitarlos.
Las técnicas para este estilo de maquetación explican en diversos artículos de desarrolloweb como: maquetar con floats. Sin embargo, hoy no podemos recomendar usar floats para maquetar. Display table Durante un breve espacio de tiempo se llegó a usar display: table para conseguir maquetar contenido, ya que nos permitía cosas que en CSS eran muy difíciles de conseguir anteriormente, como el alineamiento vertical. Afortunadamente no tuvimos que dedicarnos demasiado a estas técnicas, ya que producía diseños muy rígidos (el posicionamiento dependía mucho de cómo estaba escrito el HTML). Si quieres saber algo más te recomendamos leer el artículo de display table. Flexbox Flexbox es la primera gran herramienta que nos aportó verdadera flexibilidad en el código HTML, ya que Flexbox nos permite cambiar el posicionamiento de los elementos, de modo que podemos por ejemplo ordenarlos de manera distinta a como aparecen en la página, aunque con algunas limitaciones. En todo caso, Flexbox nos permite, con atributos muy variados, conseguir que los elementos se ordenen en columnas o filas y conseguir que se alineen de la manera que necesitemos, con facilidad, sin complicaciones ni necesidad de trucos (lo que antes se conocía como hacks CSS). Flexbox nos trajo por ejemplo la alineación vertical, que antes era muy complicada de realizar. Los desarrolladores comenzamos de nuevo a disfrutar de la maquetación web, pero todavía no era una herramienta pensada específicamente para maquetación, es decir, creación de layouts de contenido. Puedes aprender Flexbox en el Manual de Flexbox. CSS Grid Layout Esta es la herramienta definitiva para maquetación y creación de layouts avanzados, que nos da todas las posibilidades que los diseñadores para la web estábamos esperando desde hace décadas. CSS Grid layout nos permite definir una plantilla organizada en filas y columnas, destinando el espacio que necesitemos para cada elemento de la página, de una manera muy versátil. Los elementos se pueden posicionar en cualquier lugar de la rejilla y podemos conseguir que su posición en la página sea totalmente diferente a cómo aparecen en el código HTML. Usar Grid Layout es una auténtica maravilla, ya que nos permite con muy poco esfuerzo colocar los elementos donde deseamos y que puedan cambiar de manera radical al cambiar las condiciones de la pantalla del usuario, con total libertad para el diseñador. La única desventaja es que no funciona en algunos navegadores antiguos, como Internet Explorer, que tiene un soporte parcial y necesitas usar prefijos CSS. Pero como decíamos, ya casi nadie usa ese navegador, afortunadamente.
Esperamos que este artículo te haya aclarado bastantes cosas sobre maquetación web en general y maquetación CSS en particular. Son muchas alternativas, pero te recomiendo ir directamente a Flexbox y CSS Grid Layout, que es lo más nuevo y más versátil que existe. Estas herramientas te harán disfrutar del diseño web y las puedes usar con tranquilidad, pues el soporte está muy extendido en los navegadores.
O mejor dicho, atributos de elementos que pueden modificarse con CSS. Son muchos (casi todos) los aspectos que pueden modificarse con CSS. Dado el carácter general de esta guía, aquí veremos solamente los más utilizados. Generalmente se actúa sobre los siguientes: Texto o contenido Tamaño del bloque Color del fondo del bloque Bordes de bloque Estilo de los bordes Color de los bordes Márgenes de bloque Espaciado interno del bloque Posicionamiento del bloque Gráficos y bloques flotantes Visibilidad del bloque Listas Enlaces CSS + JavaScript Efectos especiales Tablas Y puede que te preguntes qué es un bloque. Como bloque puede entenderse todo lo comprendido dentro de elementos con cierre, como ,
, , , , , etc., y al aplicar estilos con CSS no es buena idea escribir nada fuera de estos elementos. En lugar de ser un nombre de elemento HTML, un bloque también puede tener un nombre definido por el programador, por ejemplo "menu", y generalmente son éstos los que contienen en su interior a los anteriores o a otros bloques definidos por el usuario. El número de bloques en una página puede ser muy elevado (más de mil), y dependerá de la capacidad del navegador utilizado. Veamos cómo funciona cada cosa: Los Márgenes de bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. Se controla con el atributo margin. Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como un cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de control es border.
Espaciado interno del bloque es la distancia entre el borde del bloque y su contenido. Es el atributo padding (en inglés significa algo así como "acolchado") El Estilo y color de los bordes, son evidentes: son las líneas que delimitan el bloque, que pueden dibujarse de varias formas en cuanto a tipo de trazo, grosor y color. Estos dos atributos también pueden actuar sobre los bordes de otros elementos contenidos dentro de un bloque, como formularios, tablas, gráficos, etc. El Color del fondo se controla con las mismas instrucciones que las de la página HTML: background. Los parámetros de color, al igual que en HTML, se pueden escribir con su nombre (en inglés) o con la notación RGB en hexadecimal. El Tamaño son las dimensiones del bloque. Si no se indican dimensiones, por defecto, el bloque ocupará todo el ancho de la ventana, y de alto lo que su contenido precise. Se utilizan dos atributos para controlarlo: width para el ancho y height para el alto.
