Instrucciones HTML – Documento en Español (Formato Word Limpio)

Introducción

Este documento contiene las instrucciones completas para crear páginas web usando HTML y CSS, traducidas al español. Todo el código, comandos y etiquetas se mantienen exactamente como en el original.

Conceptos básicos

Para crear páginas web agradables, necesitas aprender tres conceptos fundamentales:

  • HTML (Hypertext Markup Language): lenguaje básico para describir sitios web.
  • CSS (Cascading Style Sheets): controla la apariencia visual del HTML.
  • JavaScript (JS): añade comportamiento dinámico a los sitios web.

En esta sección se cubren HTML y CSS. JavaScript se aborda en una página posterior.

Visual Studio 2017 Community

Usaremos Visual Studio 2017 Community como entorno de desarrollo. Para organizar tu trabajo, es mejor crear un Project.

Pasos:

  1. Abrir Visual Studio 2017 Community.
  2. Crear o adoptar un proyecto existente.
  3. Para un proyecto nuevo, seleccionar: File : New : Project…
  4. En el cuadro de diálogo, abrir: Installed → C# → Web
  5. Seleccionar Web Site y luego ASP.NET Empty Web Site.
  6. Nombrar el proyecto MyWebProject y guardarlo en tu memoria USB.
  7. Aceptar la creación del archivo MyWebProject.sln.
  8. Crear una página HTML: File : New : File… → HTML Page
  9. Nombrarla MyFirstPage.html.
  10. Para usar una página existente: File : New : Project from Existing Code…
  11. Seleccionar el directorio y finalizar.
  12. Abrir tu archivo HTML con: File : Open File…

HTML básico

El archivo HTML predeterminado en Visual Studio se ve así:

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>


Estructura general

  • DOCTYPE: indica el tipo de documento.
  • <html>…</html>: contiene todo el archivo.
  • <head>…</head>: título y referencias CSS.
  • <body>…</body>: contenido visible para el usuario.

Emparejamiento de etiquetas

Las etiquetas deben abrirse y cerrarse correctamente:

Code

<li><b><i>


Debe cerrarse como:

Code

</i></b></li>


Sección 1 – Encabezados &lt;h?&gt; y párrafos &lt;p&gt;

Ejemplo de página con encabezados y párrafos:

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My First Web Page</title>
</head>
<body>
<h1>First Level Heading</h1>
<p>The first level heading indicates the main sections...</p>

<h2>Second Level Heading</h2>
<p>The second level heading breaks down a topic...</p>

<h3>Third Level Heading</h3>
<p>For the third level...</p>
</body>
</html>


Compilar y depurar

  • Emparejar etiquetas automáticamente.
  • Revisar errores: Build : Build Solution
  • Ver la página: Debug : Start Debugging

Sección 2 – Enlaces e imágenes

Comentarios en HTML:

Code

<!-- This comment goes anywhere... -->


Sección 3 – Atributos

Ejemplo de atributos en una etiqueta:

Code

<h1 style="font-size:300%; color:darkgreen; text-align:center;">
  My First Heading
</h1>


Sección 4 – Hojas de estilo en cascada (CSS)

Conectar un archivo CSS:

Code

<link rel="stylesheet" type="text/css" href="myStyleSheet.css">


Ejemplo de estilos:

Code

body {
  background-color: ivory;
}
h1 { color: darkgoldenrod; }
h2 { color: darkred; }
h3 { color: darkblue; }


Sección 5 – Tablas

Crear tablas y aplicar estilos desde CSS.

Sección 6 – Citas en bloque

Ejemplo:

Code

<blockquote cite="https://www.ieee.org/index.html">
Advancing Technology for Humanity...
</blockquote>


Sección 7 – División (&lt;div&gt;)

Code

div {
  background-color: lightgreen;
  width: 600px;
  border: 25px solid green;
  padding: 25px;
  margin-left: auto;
  margin-right: auto;
}


Sección 8 – Imagen con pie de foto

Code

<table class="image" style="float:right; margin-right:50px;">
  <caption align="bottom">
    <div class="orange">The picture above is 330px wide...</div>
  </caption>
  <tr>
    <td><img class="orange" src="KGTF TV.jpg" alt="KGTF TV"></td>
  </tr>
</table>


Sección 9 – Listas y tabla de contenidos

Code

<h1>Table of Contents</h1>
<ul>
  <li><a href="#DIV">This is the use of &lt;div&gt;</a></li>
</ul>

<h1><a name="DIV" id="DIV"></a>This is the use of &lt;div&gt;</h1>


Sección 10 – Configuración de una página web

Estructura principal:

Code

<div class="container">
  <header>My Second Web Page</header>
  <nav>...</nav>
  <article>


CSS correspondiente:

Code

div.container {
  width: 100%;
  background-image: url(sunset-large.jpg);
}
header {
  padding: 1em;
  background-image: url(sunset-bar.jpg);
}


Sección 11 – Uniformidad entre páginas

Crear tu propia etiqueta:

Code

dblue {
  color: darkblue;
  font-weight: bold;
}


Usarla:

Code

<dblue>Edgar Allan Poe</dblue>


Sección 12 – Tercera página

Code

<!DOCTYPE html>
<html>
<head>
<title>Third</title>
<link rel="stylesheet" href="myStyleSheet.css">
</head>
<body>
<div class="container">
<header>My Third Web page</header>
<nav>...</nav>
<article>
<h2>Using Buttons and JavaScript</h2>
</article>
</div>
</body>
</html>