< volver

HTML e CSS

Máis abaixo podes atopar código de exemplo para dar os teus primeiros pasos con HTML e CSS. Son os que eu considero máis importantes para comezar.

Código base dunha páxina web:

<!DOCTYPE html>
<html lang="gl">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
  <title></title>
</head>

<body>
</body>

</html>

Isto é o texto do título

<h1>Isto é o texto do título</h1>

Isto é o texto do título

<h2>Isto é o texto do título</h2>

Isto é o texto do título

<h3>Isto é o texto do título</h3>

Isto é o texto do título

<h4>Isto é o texto do título</h4>
Isto é o texto do título
<h5>Isto é o texto do título</h5>
Isto é o texto do título
<h6>Isto é o texto do título</h6>

Isto é un parágrafo. Utilízase para escribir texto. Deixa un pequeno espacio antes e despois do texto.

<p>Isto é un parágrafo. Utilízase para escribir texto. Deixa un pequeno espacio antes e despois do texto.</p>

Este texto está en negriña, cursiva, tachado, destacado ou varias cousas ao mesmo tempo.

<p>Este texto está en <b>negriña</b>, <i>cursiva</i>, <s>tachado</s>, <mark>destacado</mark> ou <b><s>varias</s> cousas</b> ao <mark><i>mesmo</i> tempo</mark>.</p>
Isto é unha ligazón <a href="https://exemplo.org">Isto é unha ligazón</a>

Isto é un texto con unha ligazón ao xogo das parellas.

<p>Isto é un texto con unha ligazón ao <a href="05-game.html">xogo das parellas</a>.</p>

Isto é un texto con varias ligazóns: Google é o buscador máis utilizado pero coñecías DuckDuckGo? É un buscador que non rastrexa os teus datos.

<p>Isto é un texto con varias ligazóns: <a href="https://www.google.es/">Google</a> é o buscador máis utilizado pero coñecías <a href="https://www.duckduckgo.com/">DuckDuckGo</a>? É un buscador que non rastrexa os teus datos.</p>
Faro de Fisterra <img src="nome-carpeta/nome-imaxe.jpg" alt="Descrición da imaxe">
Cordeiro <img src="https://static.timesofisrael.com/blogs/uploads/2021/05/Lamb_09807-a.jpg" width="200" alt="Cordeiro">

Esta fonte é Helvetica

<p style="font-family: Helvetica, sans-serif;">Esta fonte é Helvetica</p>

Esta fonte é Times New Roman

<p style="font-family: Times New Roman, serif;">Esta fonte é Times New Roman</p>

Este texto é vermello

<p style="color: red;">Este texto é vermello</p>

Este texto tamén é vermello

<p style="color: #ff0000;">Este texto tamén é vermello</p>

O fondo deste texto é verde

<p style="background-color: #00ff00;">O fondo deste texto é verde</p>

Este texto é branco, o fondo verde, está centrado e está separado dos bordes por 20 píxels.

<p style="background-color: #00ff00; color: #ffffff; padding: 20px; text-align: center;">Este texto é branco, o fondo verde, está centrado e está separado dos bordes por 20 píxels.</p>