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
<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 xenéricas

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 right 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

<style> 
h1, h2,h3,.title {
   font-style: italic;
    color: #9a3333;
    font-weight: bold;
    font-size: 1.2em;
}	
h2 {
    font-size: 1em;
}
img {
    max-width: 512px;
    width: 100%;
    margin: 10px 0;
}
.title {
   text-align: center; font-size: 1em;font: italic;
}
</style>

<a href="urlInfo">Story </a> 

<h1> NPCs Principales </h1>
<ul>
	<li>Relva Dextray (Durnan - Mir)</li>
	<li>Hermelinda</li>
</ul>

<h1> Yawning Portal </h1>
How Deep is the Well? 140 feet. If you fall, that's 14d6. Not good!
<ul>
	<li>Relva Dextray (Durnan - Mir)</li>
	<li>Vando, camarero mediano</li>
	<li>Ruloc, mediano que le encanta apostar</li>
</ul>

<h1> The Sunless Citadel </h1>

NPCs Principales

• Relva Dextray (Durnan – Mir)
• Hermelinda

Yawning Portal

• Relva Dextray (Durnan – Mir)
• Vando, camarero mediano
• Ruloc, mediano que le encanta apostar

The Sunless Citadel

Exemplo Dereita – Out of the Abyss

<style> 
h1, h2,.title {
    font-style: italic;
    color:#55595c;
    font-weight: bold;
    font-size: 1.2em;
	}	
h2 {
    font-size: 1.1em;
}
h3 {
    font-size: 1em;
}
img {
    max-width: 512px;
    width: 100%;
    margin: 10px 0;}
.title {
    text-align: center; font-size: 1em;font: italic;
}
</style>

<a href="enlaceInfo">Aventura</a>
<a href="enlaceInfo">Cronoloxía</a>

<h1> Grupo </h1>
<ul>
   <li>(9)<a href="LinkNivel20"> Farlee, Ragna</a> <a urlInfo"> *</a> [primordial, fala profunda] </li> (todos os li seguen este formato)
</ul>

<a href="enlaceInfo">Experiencia </a> <br/>
	<hr/>
	<hr/>
<h1> NPCs Actuales </h1>

<a	href="urlImaxe.png"> <img src="urlImaxe.png" /> </a>

Grupo

• (9) Farlee, Ragna * [primordial, fala profunda]
(todos os li seguen este formato)

NPCs Actuales