UD02: Utilización de linguaxes de marcas en contornas web

Elementos que lle dan formato ao texto dun parágrafo

❌ - Delimita os parágrafos
❌ - Encabezado de nivel i, onde i é un número enteiro entre 1 e 6, ambos inclusive. O tamaño da letra do encabezado é maior canto menor sexa o valor de i. Non deben de usarse estas etiquetas para formatear texto. Só estarán ben usadas para designar títulos de parágrafos.
❌ - Indica que o texto que está nese elemento se poñerá en negra.
❌ - Indica que o texto que está nese elemento se poñerá en itálica ou cursiva.
❌ - Indica que o texto que está nese elemento se poñerá subliñado.
❌ - Indica que o texto que está nese elemento é un supraíndice.
❌ - Indica que o texto que está nese elemento é un subíndice.
❌ - Indica que o texto que está nese elemento estará resaltado. Habitualmente os navegadores resaltan o texto poñéndoo en negra aínda que podería haber algún navegador que resaltase o texto poñéndoo en cursiva e en laranxa.

Elementos de las listas: Hai tres tipos de listas: ordenadas, desordenadas e listas de definición.

❌ Delimita os elementos que forman unha lista desordenada
❌ Delimita os elementos que forman unha lista ordenada
❌ Indica cada un dos elementos dunha lista
❌ Delimita os elementos que forman unha lista de definición
❌ Cada un dos termos que se definen dunha lista de definición.
❌ Cada unha das definicións dunha lista de definición.

Os elementos de táboa son:

❌ Delimita o contido dunha táboa.
❌ Delimita cada unha das liñas da táboa.
❌ Delimita o contido de cada cela da táboa.
❌ Permite agrupar columnas.
❌ Permite agrupar liñas da táboa.
❌ Define a liña cabeceira da táboa.
❌ Delimita cada unha das celas da cabeceira
❌ Define a fila pé da táboa.

Os elementos de formularios son:

❌ Delimita o contido do
❌ Caixa de texto para texto curto. Dependendo do valor que tome o atributo type deste elemento podemos estar ante un texto sen máis, un campo de texto onde ao escribir non se visualice o contido se non que escriba asteriscos, un botón de radio que o usuario poderá elixir, unha opción que o usuario poderá activar, botóns...
❌ Caixa de texto para texto longo.
❌ Crea un menú despregable que permite elixir dunha lista de opcións que contén o
elemento.
❌ Delimita cada unha das opcións dun menú despregable que o contén.
❌ Permite definir un botón. A súa principal vantaxe fronte aos botóns feitos con input é que este elemento permite introducir no botón calquera outro elemento de HTML, por exemplo imaxes.
❌ Permite agrupar elementos dun un formulario.
❌ Permite poñer un título ao fieldset.
❌ Etiqueta dun campo do formulario.

Os elementos utilizados en frames son:

❌ Define a partición da ventá do navegador en marcos. Só se pode partir en filas ou en columnas. Para partir a xanela do navegador en filas e columnas hai que aniñar frames.
❌ Define un marco que contén información

Otros elementos que podemos utilizar son:

❌ Permite definir unha ligazón a unha páxina web, un arquivo ou un enderezo de correo.
❌ Permite inserir unha imaxe nunha páxina web. É obrigatorio utilizar o atributo src para determinar o path do ficheiro de imaxe que queremos inserir.
❌ Indica unha forma abreviada.
❌ Indica un acrónimo.
❌ Contén un bloque de texto con sangría.
❌ Contén unha cita polo que o navegador lle engade as marcas de citación
❌ Insere unha liña en branco. Non ten etiqueta de peche, só se abre.

O esquema básico do documento, para considerarse conforme á especificación deberá cumprir as seguintes condicións:

O elemento raíz do documento debe ser ❌.

O elemento raíz do documento debe indicar o espazo nominal XHTML usando o atributo ❌. O espazo nominal para XHTML é http://www.w3.org/1999/xhtml

Debe haber unha declaración DOCTYPE no ❌ do documento. O identificador público incluído na declaración DOCTYPE debe facer referencia a algunha das tres DTD definidas polo ❌ usando o Identificador Formal Público correspondente.

<❌ html PUBLIC "-//W3C//DTD XHTML 1.0 ❌
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" "">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-❌.dtd" "">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ❌
http://www.w3.org/TR/xhtml1/DTD/xhtml1-❌" "">

Restricións básicas que introduce XHTML respecto de HTML na sintaxe das súas etiquetas:

As etiquetas téñense que ❌ en orde inversa á que se ❌, nunca poden ❌.

Os nomes das etiquetas e atributos sempre se escriben en ❌.

O valor dos atributos, incluso os numéricos, sempre ❌.

Os atributos nos que o nome coincide co seu valor, non pode darse o valor por entendido, é dicir, non se poden comprimir. Este tipo de atributos non son moi habituais.

Todas as etiquetas deben ❌ sempre. ❌ permite que en lugar de abrir e pechar de forma consecutiva a etiqueta (<br><br/>) se pode utilizar a sintaxe ❌ para indicar que é unha etiqueta baleira que se abre e se pecha nese mesmo punto.

Ademais das cinco restricións básicas, XHTML inclúe outros cambios máis avanzados respecto de HTML, entre elas:

Antes de acceder ao valor dun atributo, elimínanse todos ❌ que se atopan antes e despois do valor. Ademais, elimínanse todos ❌ dentro do valor dun atributo.

O ❌ debe encerrarse entre unhas etiquetas especiais (<![CDATA[ e ]]>) para evitar que o navegador interprete de forma errónea caracteres como & e <.

As páxinas XHTML deben prescindir do atributo ❌ no seu lugar, sempre debe utilizarse o
atributo ❌.

XHTML é necesario ❌ o formato do contido. Os parágrafos deben ❌ consistentemente e as cabeceiras h1-h6 só deben usarse para destacar os diferentes apartados. É recomendable dar o formato aos datos por medio do uso das ❌.

Vantaxes de XHTML sobre HTML:

❌ con navegadores antigos: a información visualízase, aínda que sen formato.

Un mesmo documento pode adoptar deseños ❌ en ❌.

❌ á hora de editar e manter o código.

É ❌ cos estándares que está a desenvolver o ❌ como recomendación para futuros axentes de usuario ou navegadores.

Os documentos escritos conforme a ❌ presentan mellor rendemento nas actuais ferramentas web que aqueles escritos conforme a ❌.

A separación dos contidos e a súa presentación fai que os documentos XHTML ❌ mellor ás diferentes plataformas: pantallas de computador, pantallas de dispositivos
móbiles...

Como é XML pódense utilizar facilmente ferramentas creadas para procesar documentos ❌ xenéricos (editores, XSLT etc.).

Inconvenientes de XHTML sobre HTML:

Algúns ❌ non son totalmente ❌, o que fai que as páxinas non sempre se mostren correctamente. Isto cada vez é menos problemático xa que estes navegadores van caendo en desuso.

Moitas ferramentas de deseño web aínda ❌.

O elemento <link> pode ter definidos catro atributos cando se enlaza un arquivo CSS:

❌, indica o tipo de relación que ten o arquivo enlazado e a páxina HTML. Para os arquivos CSS, sempre se utiliza o valor stylesheet

❌, indica o tipo de recurso enlazado. Para os arquivos CSS o seu valor sempre é text/css

❌, indica a URL do arquivo CSS que contén os estilos. Pode ser relativa ou absoluta e pode referenciar a un recurso interno ou externo ao sitio web.

❌, indica o medio no que se van aplicar os estilos do arquivo CSS.

Os atributos de cor e fondo son os que enumeramos a continuación:

❌ Indica a cor do texto. Admíteno case todas as etiquetas de HTML. O valor deste atributo é unha cor, co seu nome ou o seu valor RGB.

❌ Indica a cor de fondo do elemento. O valor deste atributo é unha cor, co seu nome ou o seu valor RGB.

❌ Permite colocar unha imaxe de fondo do elemento. O valor que toma é o nome da imaxe co seu camiño relativo ou absoluto
❌ Indica se ha de repetirse a imaxe de fondo e, nese caso, se debe ser horizontal ou verticalmente. Os valores que pode tomar son: repeat-x, repeat-e ou non-repeat.

❌ Especifica se a imaxe ha de permanecer fixa ou realizar un scroll. Os valores que poden tomar son: scroll ou fixed.

❌ É unha medida, porcentaxe ou o posicionamento vertical ou horizontal cos valores establecidos que serve para situar unha imaxe. Os valores que pode tomar son: porcentaxe, tamaño, ou [top, center, bottom] [left, center, rigth]

❌ Establece nun só paso calquera das propiedades de background anteriores. Os
valores que pode tomar son: background-cor, background-image, background-repeat,
background-attachment, background-position.

atributos que podemos utilizar referentes ás fontes do noso documento e que son:
❌ Indica o tamaño da fonte. Pode ser un tamaño absoluto, relativo ou en porcentaxe. Toma valores de unidades de CSS

❌ Establece a familia á que pertence a fonte. Se o nome dunha fonte ten espazos utilízanse comiñas para que se entenda ben. O valor é o nome da familia fonte.

❌ Define o grosor dos caracteres. Os valores que pode tomar son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ou 900

❌ Determina se a fonte é normal ou cursiva. O estilo oblique é similar ao cursiva. Os
valores posibles son: normal, italic, oblique.

❌ Determina se a fonte é normal ou maiúsculas pequenas. Os valores que pode tomar son: normal ou small-caps

❌ O alto dunha liña e polo tanto, o espaciado entre liñas. É unha desas características que non se podían modificar utilizando HTML.

❌ Permite establecer todas as propiedades anteriores na orde que se indica a continuación: font-style, font-variant, font-weight, font-size[line-height], font family. Os valores han de estar separados por espazos. Non é obrigatorio o uso de todos os valores.

ATRIBUTOS DE TEXTO

❌ Establece se o texto está subliñado, sobreraiado ou tachado. os valores que pode tomar son: none, underline, overline, line-through ou blink.

❌ Indica a aliñación do texto. Aínda que as follas de estilo permiten o xustificado de texto non funciona en todos os sistemas. Os valores que pode tomar son: left, right, center ou justify.

❌ Determina a tabulación do texto. Os valores que toma son unha lonxitude, en unidades CSS, ou unha porcentaxe da establecida.

❌ Permítenos transformar o texto, facendo que teña a primeira letra en maiúsculas de todas as palabras, todo en maiúsculas ou minúsculas. Os valores que pode tomar son: capitalize, uppercase, lowercase ou none.

❌ Determina o espaciado entre as palabras. Os valores que pode tomar é un tamaño.

❌ Determina o espaciado entre letras. Os valores que pode tomar é un tamaño.

❌ Establece a aliñación vertical do texto. Os seus valores posibles son: baseline, sub, super, top, text-top, middle, bottom, text-bottom ou unha porcentaxe.

❌ Altura da liña. Pode establecerse mediante un tamaño ou unha porcentaxe.

ATRIBUTOS DE CAIXA

❌ Indica o tamaño da marxe esquerda. Pode usarse unha lonxitude, en unidades CSS, ou
unha porcentaxe.

❌ Indica o tamaño da marxe dereita. Pode usarse unha lonxitude, en unidades CSS, ou
unha porcentaxe.

❌ Indica o tamaño da marxe superior. Pode usarse unha lonxitude, en unidades CSS, ou
unha porcentaxe.

❌ Indica o tamaño da marxe inferior. Pode usarse unha lonxitude, en unidades CSS, ou
unha porcentaxe.

❌ Permite establecer as marxes dunha vez. Hai que seguir a orde: superior, dereito, inferior e esquerdo.

❌ Indica o espazo esquerdo entre o bordo e o contido. Pode usarse unha lonxitude, en
unidades CSS, ou unha porcentaxe.

❌ Indica o espazo dereito entre o bordo e o contido. Pode usarse unha lonxitude, en
unidades CSS, ou unha porcentaxe.

❌ Indica o espazo superior entre o bordo e o contido. Pode usarse unha lonxitude, en
unidades CSS, ou unha porcentaxe.

❌ Indica o espazo inferior entre o bordo e o contido. Pode usarse unha lonxitude, en
unidades CSS, ou unha porcentaxe.

❌ Establece o espazo entre os bordos e o contido dunha soa vez. Hai que respectar a orde
superior, dereito, inferior e esquerdo.

❌ Establece a cor do bordo esquerdo do elemento. O seu valor é unha cor RGB ou o nome
da cor.

❌ Establece a cor do bordo dereito do elemento. O seu valor é unha cor RGB ou o nome da cor.

❌ Establece a cor do bordo superior do elemento. O seu valor é unha cor RGB ou o nome da cor.

❌ Establece a cor do bordo inferior do elemento. O seu valor é unha cor RGB ou o nome da cor.

❌ Establece a cor dos bordos do elemento dunha soa vez. Hai que seguir a orde superior, dereito, inferior e esquerdo. O seu valor é unha cor RGB ou o nome da cor.

❌ Establece o estilo do bordo, os valores significan: none=ningun bordo, dotted=punteado (non funciona sempre), solid=adoitado, double=dobre bordo, os valores groove, ridge, inset e outset son bordos con varios efectos 3D.

❌ Grosor do bordo esquerdo. Os seus valores posibles son: thin, médium, thick ou un tamaño.

❌ Grosor do bordo dereito. Os seus valores posibles son: thin, médium, thick ou un tamaño.

❌ Grosor do bordo superior. Os seus valores posibles son: thin, médium, thick ou un tamaño.

❌ Grosor do bordo inferior. Os seus valores posibles son: thin, médium, thick ou un tamaño.

❌ Establece o tamaño dos bordos do elemento ao que o aplicamos. Hai que seguir a orde superior, dereito, inferior, esquerdo.

❌ Establece o ancho do contido do elemento. O valor é unha porcentaxe ou un tamaño.

❌ Establece a altura do contido do elemento. O valor é unha porcentaxe ou un tamaño.

❌ Serve para aliñar un elemento á esquerda ou a dereita facendo que o texto se agrupe ao redor do dito elemento. Toma os valores none, left ou right.

❌ Establece se un elemento ten á súa altura imaxes ou outros elementos aliñados á dereita ou á esquerda. Os seus valores posibles son: none, left, right ou both.

Atributos que etiquetamos como atributos de clasificación:

❌ Determina se o elemento é de bloque, liña, lista ou ningún deles. Os valores que pode tomar son: block, inline, list-item ou none.

❌ Indica o modo en que se han de xestionar os espazos en branco que hai no elemento, é dicir, se se manteñen todos os existentes tal e como estean no documento ou se se anulan a un as secuencias de brancos, é o valor por defecto e o da opción normal. Valores que pode tomar son: pre, nowrap, normal.

❌ Indica cal é o símbolo que se utiliza como marcador nas listas. Valores que pode tomar son: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

❌ Permite utilizar o uso dunha imaxe como marcador nunha lista. O valor que toma é a ruta do ficheiro imaxe

❌ Determinan a posición do marcador nunha lista. Pode tomar os valores: outside ou inside.

❌ Permite establecer dunha única vez todas as características dunha lista. Hai que seguir a orde seguinte: list-style-type, list-style-position e list-style-image.

CSS de posicionamento:

❌ Permite seleccionar unha zona. Os valores que pode tomar son: shape ou auto.

❌ Permite establecer a altura dun elemento. Os valores que pode tomar son: auto ou un tamaño.

❌ Permite establecer a anchura dun elemento. Os valores que pode tomar son: auto ou un tamaño ou porcentaxe.

❌ Indica se o elemento sobre o que actúa será visible ou non.

❌ Indica a posición ao lado esquerdo do elemento. Os valores que pode tomar son: auto ou un tamaño ou porcentaxe.

❌ Indica a posición ao lado superior do elemento. Os valores que pode tomar son: auto ou un tamaño ou porcentaxe.

❌ Indica se o elemento será visible ou non en caso de superar os límites do colector. Os valores que poden tomar son: visible, hidden, scroll ou auto.

❌ Determinan se o posicionamento dun elemento é absoluto, relativo ou estático. Os valores que pode tomar son: absolute, relative ou static.
❌ Define a posición do elemento no terceiro eixo de coordenadas e permite superpoñer uns elementos sobre outros coma se fosen capas.