Skip to content

Latest commit

 

History

History
executable file
·
166 lines (133 loc) · 4.6 KB

html.md

File metadata and controls

executable file
·
166 lines (133 loc) · 4.6 KB

HTML

Plantilla de ejemplo de una página .html tipo

<!doctype html>
<html>
  <!--Esto es un comentario en HTML-->
  <!--Un comentario no afecta al código-->

  <!--en <head> cargamos código externo-->
  <head>
    <!--los <meta> son datos del doc. HTML-->

    <!--ej: charset="utf-8" dice al navegador 
    como mostrar correctamente los acentos-->
    <meta charset="utf-8">

    <title>Título de la pag. web</title>

    <!--cargamos estilos .css con <link>-->
    <link rel="stylesheet" href="ruta.css">

    <!--cargamos código .js con <script>-->
    <script src="asíncrono.js"></script>

    <!--añadimos estilos .css con <style>-->
    <style>
      .nombre_de_clase {
        color: red;
        margin: 10px;
      }
    </style>

    <!--añadimos código .js con <script>-->
    <script>
      var una_variable = "un_texto";
      //esto es un comentario javascript
    </script>
  </head>

  <!--el <body> es la parte que se muestra-->
  <body>
    <!--el resto de código HTML viene aquí-->

    <!--para cargar js al final-->
    <script src="sincrónico.js"></script>
  </body>

</html>

Tags comunes

Para construir páginas web en .html usamos tags < >

<div>contenido</div>

Agrupar el HTML en elementos separados (divisiones)

<p>texto</p>

Elementos de texto que añaden márgenes (párrafos)

<span>palabras</span>

Agrupaciones de texto para añadir atributos en texto

<a href="ruta.html">un link</a>

Para hacer un link (anchor)

<button>haz clik en el botón</button>

haz clik en el botón (botón)

<img src="ruta.jpg">

Muestra la imagen de la ruta:  

<br>

Elemento para continuar en la siguiente línea como un 'enter' (Introducir lineas solo con 'enter' en html no tiene efecto)

<b></b> <i></i> <u></u> <s></s>
bold italic underline strike

Tags inputs

los inputs sirven para que el usuario pueda introducir y datos

<input type="[...]" placeholder="escribe aquí">
type="text" type="checkbox" type="radio"

<textarea>Texto multi-linea</textarea>

<textarea rows="1" style="resize: vertical; background-color: rgba(255,255,255,0.5)">Texto multi-linea</textarea> (área de texto)

Desplegable multi-opción:

<select>
  <option value="1">opción 1</option>
  <option value="2">opción 2</option>
</select>
opción 1 opción 2 (select)

Tag tabla

nota: las tablas NUNCA se usan para organizar la pag. web

<table>
  <!--cabecera: (opcional agregar <thead>)-->
  <thead>
    <!-- columna: -->
    <tr>
      <!-- celdas: -->
      <th>contenido cabecera 1</th>
      <th>contenido cabecera 2</th>
    </tr>
  </thead>
  <!--cuerpo: (opcional definir <tbody>)-->
  <tbody>
    <tr>
      <td>contenido celda 3</td>
      <td>contenido celda 4</td>
    </tr>
    <tr>
      <td>contenido celda 5</td>
      <td>contenido celda 6</td>
    </tr>
  </tbody>
</table>
contenido cabecera 1 contenido cabecera 2
contenido celda 3 contenido celda 4
contenido celda 5 contenido celda 6

Atributos

Los atributos html son propiedades que se añaden en tags

<div id="único" class='genérico'>

'id' y 'class' permiten encontrar dichos <tag> desde el código

<span style="color:green; font-weight:bold">

'style' añade estilos en el contenido del <tag>

<button title="This is a tooltip">OK</button>

OK 'title' muestra un pop-up con la información.
Puede usarse sobre cualquier tipo de <tag>