1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
---
title: Introducción a HTML
slug: Learn/HTML/Introduccion_a_HTML
tags:
- CodingScripting
- Enlaces
- Estructura
- HTML
- Introducción a HTML
- Texto
- semántica
translation_of: Learn/HTML/Introduction_to_HTML
---
<div>{{LearnSidebar}}</div>
<p class="summary">En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.</p>
<div class="in-page-callout webdev">
<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
</div>
<h2 id="Prerrequisitos">Prerrequisitos</h2>
<p>Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.</p>
<div class="note">
<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="">Glitch</a>.</p>
</div>
<h2 id="Guías">Guías</h2>
<p>Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.</p>
<dl>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></dt>
<dd>Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. <span id="result_box" lang="es">En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!</span></dd>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></dt>
<dd>La cabecera de un documento HTML es la parte que <strong>no</strong> se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).</dd>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></dt>
<dd>Uno de los principales trabajos de HTML es darle significado al texto (también conocido como <strong>semántica</strong>) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.</dd>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></dt>
<dd>Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.</dd>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></dt>
<dd>Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, <span id="result_box" lang="es"><span> subíndices y superíndices, información de contacto, y mucho más</span>.</span></dd>
<dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</dt>
<dd>Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.</dd>
<dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></dt>
<dd>Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.</dd>
</dl>
<h2 id="Evaluaciones">Evaluaciones</h2>
<p>Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.</p>
<dl>
<dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</dt>
<dd><span id="result_box" lang="es">Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.</span></dd>
<dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</dt>
<dd>Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.</dd>
</dl>
<h2 id="Ve_también">Ve también</h2>
<dl>
<dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Bases de la alfabetización Web 1</a></dt>
<dd>Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de <em>Introducción a HTML</em>. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.</dd>
</dl>
<div class="note">
<h2 id="Retroalimentación">Retroalimentación</h2>
<p>Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.</p>
</div>
|
