Estas linguaxes poden empregarse en diferentes seccións de Nivel20 que o permiten como nos libros de regras, na descrición do equipo na sección de notas de máster... Empregalas nos permite amosar a información tendo máis opcións de formato e funcionalidades de modo sinxelo.
Indiquei algún do contido máis básico, se considerades que estaría ben dar información doutro elemento ou estilo, comentádeme e verei de engadilo.
Nivel20 deixou de aceptar HTML o CSS, polo que
este contido estaría obsoleto de cara a usalo na plataforma.
Etiquetas HTML
A linguaxe de marcado HTML emprégase para definir a estrutura nun contido, o formato máis básico.
En HTML é importante que toda etiqueta (textos entre <>) se pechen tras abrirse (</>), algunhas fanos no propio elemento e outras precisan dous.
Hai moita información ó respecto en w3schools, onde ademais dan espazo para facer probas. Deixarei por aquí, por tanto, só os elementos máis básicos que poden ser de utilidade para mostrar os contidos desta aplicación web.
Imaxes
<img src="https://www.enlaceImaxe.png/" />
Hai que fixarse que o final do enlace, da url, da imaxe sexa un formato de imaxe e non que, como en moitos casos, o enlace á web na que está a imaxe e non o enlace directo á imaxe. Podemos obter o enlace directo premendo o botón dereito sobre a imaxe:
Encabezados / Títulos
<h1> Texto título nivel 1 </h1>
<h2> Texto título nivel 2 </h2>
<h3> Texto título nivel 3 </h3>
<h4> Texto título nivel 4 </h4>
<h5> Texto título nivel 5 </h5>
<h6> Texto título nivel 6 </h6>
Nesta sección pode ser interesante comentar tamén p, parágrafo, e span como elementos de texto, o primeiro para frases que rematan cun salto de liña e span para fragmentos de texto menores.
<p> Texto </p>
<span> Texto </span>
<p> Texto <span> fragmento de texto que terá un formato diferente, por exemplo cor vermella </span> máis texto </p>
Lista
<ul>
<li><a href="www.enlace.com"> Texto del elemento de la lista con enlace </a></li>
<li>Texto de elemento de lista sin enlace</li>
</ul>
ul marca o inicio e fin do listado; se na contra de usar "ul" usamos "ol" na contra dunha enumeración, amosará unha lista numerada
li é cada un dos elementos da lista
a é o elemento de hipervínculo indicando no href o enlace en entre as etiquetas "a" o texto ou elemento (podería ser unha imaxe, todo o listado...) que ó premerse abrería o link, se ademais engadimos target=”_blank” antes do peche da apertura da etiquera "a" abriríase nunha pestaña nova: <li><a href="www.enlace.com" target=”_blank”> Texto ou elemento </a></li>
Estilos con CSS
A linguaxe CSS emprégase para definir estilos a estrutura que creamos con HTML.
Como en HTML, hai moita información ó respecto en w3schools, onde ademais dan espazo para facer probas. Deixarei por aquí, por tanto, só os elementos máis básicos e comúns a usar sobre os compoenentes HTML que poden ser de utilidade para mostrar os contidos desta aplicación web.
Hai varios modos de engadir CSS sobre o código HTML, neste caso só imos propoñer un para que non sexa confuso, simplemente, nunha primeira liña, antes de todo o contido HTML engadimos a etiqueta style e dentro dela xa podemos indicar o CSS que se empregará sobre ese contido HTML.
O formato para o CSS é sinxelo: indicador de elemento, chaves, propiedade, formato e punto e coma:
indicador {
propiedade: formato
}
Indicadores
etiquetas html
clases; en html se engadirían como no exemplo previo con target, antes de pechar a etiqueta como class="nomeClase" e se referenciaría en CSS como .nomeClase
identificador; en html se engadirían como no exemplo previo con target, antes de pechar a etiqueta como class="nomeIdentificador" e se referenciaría en CSS como #nomeIdentificador
estes elementos poden encadearse, por exemplo un elemento li coa clase "rol" dentro dun ul referenciaríase como: ul li.rol
Os formatos se aplicarán a TODOS os elementos que coincidan co indicador descrito e tamén ós elementos "fillos"
Propiedades e estilos
As propiedades son os formatos que podemos alterar e cada un terá un listado de estilos diferentes que se poden aplicar
Debido á gran cantidade de opcións posibles e ó sinxelas que son de topar en internet vou indicar só algunhas delas:
Texto en cursiva
font-style: italic;
Texto en negrita
font-weight: bold;
Tamaño do texto
font-size: 1.2em;
O tamaño pode indicarse en diferentes formatos como píxeles (12px) ou em que axusta o tamaño é relación ó resto do contido dando grandes saltos co aumento decimal, sendo 1 o tamaño "normal".
Cor nos textos
color: #9a3333;
O formato de cor pode poñerse en formato hexadecimal ( #00FFFF ), rgba ( rgb(0,255,255) ) ou co nome da cor ( cyan ).
Ancho da imaxe (e elemntos contendores - divs)
width: 100%;
O alto da imaxe se axustará automaticamente mantendo as súas proporcións, en caso de querer indicalo igualmente sería con heigh; para que a imaxe se adapte ó tamaño do navegador é interesante poñer o tamaño en porcentaxes, podería establecerse un tamaño mínimo para que a porcentaxe non provoque que se volva difícil de apreciar, sería con min-width ou máximo con max-width.
Propiedades xeńericas
Marxe exterior ó elemento
margin: 10px;
Marxe interior ó elemento
padding: 10px 0;
Tanto padding como margin permite indicar un específico engadindo un guion e top, bottom, left ou righ para especificar unha marxe concreta (padding-left), en caso contrario aplicarase sobre os catro eixos. Estes poden indicarse tamén na propia liña seguindo a orde das manillas do reloxo: arriba, dereita, abaixo, esquerda ( margin; 5px 0 2% auto) ou só escribindo dous valores que farían referencia ós eixos verticais o primeiro o horizontal ó segundo.
Outras funcionalidades
Botón colapsable: ocultar/mostrar contido
<button type="button" data-toggle="collapse" data-target="#contido">Mostrar/Ocultar</button>
<div id="contido" class="collapse">
Texto a ocultar/mostrar
</div>
Exemplos HTML e CSS
No caso de Nivel20, en caso de non poñer "p" e escribir e premer salto de liña asumirá ese formato. Noutros contextos toda a sección de HTML inciaría cunha etiqueta HTML, que incluiría outras como header e body; en Nivel20 non é preciso facelo porque xa forma parte dunha web maior.
Con respecto tamén ó CSS, hai que ter en conta que estamos escribiendo código nunha sección da web e, de non especificar algo contrario na sección que estamos engadindo collerá os formatos establecido na aplicación web.
As liñas engádense con hr
Exemplo Esquerda - The Sunless Citadel
Exemplo Dereita - Out of the Abyss