Tutoriales HTML

HTML es donde comienza la magia del diseño de páginas web. No es de

presentación, para eso está el CSS. El lenguaje de marcado
de hipertexto es una forma simple y elegante de estructurar el contenido .

Tutorial de HTML para principiantes

Una guía paso a paso de los conceptos básicos de HTML. Si eres completamente nuevo
en el diseño web, comienza aquí.
1. Primeros pasos : lo que debe hacer para comenzar y crear su primera página
HTML.
2. Etiquetas, atributos y elementos : las cosas que componen HTML.
3. Títulos de página : Títulos. Para Paginas. Un concepto difícil, lo sabemos…
4. Párrafos : Estructurar su contenido con párrafos.
5. Encabezados : Los seis niveles de encabezados.
6. Listas : Cómo definir listas ordenadas y desordenadas.
7. Enlaces : cómo hacer enlaces a otras páginas y en otros lugares.
8. Imágenes : Agregando algo un poco más que texto...
9. Tablas : Cómo usar datos tabulares.
10. Formularios : cuadros de texto y otras cosas de entrada del usuario.
11. Ponerlo todo junto : tomar todo lo anterior y juntarlo. Una especie de ranura
de recapitulación.
 1. Empezando
La mayoría de las cosas en la web no son diferentes a las cosas en su computadora: es
solo una gran cantidad de archivos ordenados en una gran cantidad de directorios.
Los archivos HTML no son más que simples archivos de texto, por lo que para
comenzar a escribir en HTML, no necesita más que un simple editor de texto.
El Bloc de notas es un editor de texto común en computadoras basadas en Windows
(generalmente se encuentra en el menú Programas> Accesorios) y las computadoras
Mac OSX vienen con TextEdit, pero cualquier programa que le permita jugar con el
texto servirá.
Escriba esto en su editor de texto:
This is my first web page
Ahora cree una carpeta llamada "html" donde quiera guardar archivos en su
computadora y guarde el archivo como "myfirstpage.html".
Ten cuidado. Es importante que se especifique la extensión “.html”; de lo contrario,
algunos editores de texto, como el Bloc de notas, lo guardarán automáticamente como
“.txt”.
También debe asegurarse de que su archivo se guarde como texto sin
formato . TextEdit, por ejemplo, iniciará archivos nuevos como "texto enriquecido",
que contiene muchos extras de formato, de forma predeterminada. En tales casos, vaya
a las preferencias y asegúrese de marcar la opción de formato "Texto sin
formato"  antes de crear un nuevo archivo.
Para mirar archivos HTML, ni siquiera necesitan estar en la web. Abra un navegador
web como Chrome, Firefox, Safari o Internet Explorer y en la barra de direcciones,
donde normalmente escribe las direcciones web, escriba la ubicación del archivo que
acaba de guardar (por ejemplo, “c:\html\myfirstpage.html ”) y presione
regresar. Alternativamente, vaya al menú Archivo del navegador, seleccione Abrir y
busque el archivo.
¡Pow! Ahí está. Tu primera página web. Que interesante. Y todo lo que necesitó fueron
unas pocas palabras escritas.
Hemos dicho aquí que use un editor de texto básico, como el Bloc de notas, pero puede
sentirse tentado a usar un programa de software dedicado como Adobe Dreamweaver.
Debe tener mucho cuidado al usar estos programas, especialmente si es un
principiante, porque a menudo arrojan código innecesario o no estándar para
"ayudarlo".
Si realmente quiere aprender HTML, primero debe leer un tutorial como este, para que
al menos tenga una comprensión básica de lo que está sucediendo.
Los programas de software como estos nunca le darán el mismo control sobre una
página web que la codificación manual.

Si decide utilizar un software de edición de código especializado, le recomendamos uno

en el que todavía esté codificando a mano.  De hecho, pueden ser útiles, especialmente
cuanto más avanzado sea, en términos de resaltado de sintaxis de código y
administración de archivos.
 2. Etiquetas, atributos y elementos
Aunque los conceptos básicos de HTML son texto sin formato, necesitamos un poco
más para convertirlo en un documento HTML agradable y brillante.
Etiquetas
La estructura básica de un documento HTML incluye etiquetas, que rodean el
contenido y le dan significado.
Cambie su documento para que se vea así:
<!DOCTYPE html>
<html>
<body>
This is my first web page
</body>
</html>
Ahora guarde el documento nuevamente, regrese al navegador web y vuelva a cargar
la página.
La apariencia de la página no habrá cambiado en absoluto, pero el propósito de HTML
es aplicar significado, no presentación, y este ejemplo ahora ha definido algunos
elementos fundamentales de una página web.
La primera línea en la parte superior, <!DOCTYPE html>, es una declaración de tipo de
documento y le permite al navegador saber qué versión de HTML está utilizando
(HTML5, en este caso). Es muy importante incluir esto: si no lo hace, los navegadores
asumirán que realmente no sabe lo que está haciendo y actuará de una manera muy
peculiar.
Para volver al punto, <html>es la etiqueta de apertura la que inicia y le dice al
navegador que todo entre eso y la </html> etiqueta de cierre es un documento
HTML. El material entre <body>y </body>es el contenido principal del documento que
aparecerá en la ventana del navegador.
Etiquetas de cierre
Los </body>y </html>ponen un cierre a sus respectivos elementos (más sobre los
elementos en un momento).

No todas las etiquetas tienen etiquetas de cierre como esta (  <html></html>); algunas
etiquetas, que no envuelven el contenido, se cerrarán solas. La etiqueta de salto de
línea, por ejemplo, se parece a esto: <br>- un salto de línea no contiene ningún
contenido, por lo que la etiqueta se sienta alegremente sola. Nos encontraremos con
estos ejemplos más adelante. Todo lo que necesita recordar es que todas las etiquetas
con contenido entre ellas deben estar cerradas, en el formato de etiqueta de apertura
→ contenido → etiqueta de cierre. Estrictamente hablando, no siempre es un requisito,
pero es una convención que usamos en estos tutoriales porque es una buena práctica
que da como resultado un código más limpio y fácil de entender.
Es posible que encuentre etiquetas de "cierre automático", por lo que una bretiqueta,
por ejemplo, se verá como " <br />" en lugar de simplemente " <br>". Este es un
remanente de XHTML, una forma de HTML basada en otro lenguaje de marcado
llamado XML. HTML5 es mucho más relajado que XHTML y estará contento con
cualquier formato. Algunos desarrolladores prefieren una forma, otros prefieren la
otra. Lanzamos una moneda y decidimos quedarnos con la versión más simple.
Atributos
Las etiquetas también pueden tener atributos , que son bits adicionales de
información. Los atributos aparecen dentro de la etiqueta de apertura y sus valores se
encuentran entre comillas. Se ven algo como <tag attribute="value">Margarine</tag>. Nos
encontraremos con etiquetas con atributos más adelante.
Una vez más, las comillas no siempre son esenciales, pero es una convención de buenas
prácticas que utiliza HTML Dog para mantener la coherencia y la claridad. Le
sugerimos que haga lo mismo.
Elementos
Las etiquetas no suelen hacer mucho más que marcar el principio y el final de un
elemento. Los elementos son los bits que componen las páginas web. Diría, por
ejemplo, que todo lo que está entre (e incluye) las etiquetas <body>y es el elemento del
cuerpo. </body>Como otro ejemplo, mientras que “ <title>” y “ </title>” son etiquetas ,
“ <title>Rumple Stiltskin</title>” es un elemento de título .
 3. Títulos de página
Todas las páginas HTML deben tener un título de página .
Para agregar un título a su página, cambie su código para que se vea así:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
</body>
</html>
Hemos agregado dos nuevos elementos aquí, que comienzan con la headetiqueta y
la titleetiqueta (y vea cómo se cierran ambos).
El elemento de encabezado (que comienza con la <head>etiqueta de apertura y termina
con la </head>etiqueta de cierre) aparece antes del elemento del cuerpo (que
comienza <body>y termina con </body>) y contiene información sobre la página. La
información del elemento head no aparece en la ventana del navegador.
Veremos más adelante que pueden aparecer otros elementos dentro del elemento
head, pero el más importante de ellos es el elemento title .
Si observa este documento en el navegador (guárdelo y vuelva a cargarlo como antes),
verá que aparecerá "Mi primera página web" en una pestaña o en la barra de título de
la ventana (no en el área real del lienzo). El texto que puso entre las etiquetas de título
se ha convertido en el título del documento (¡sorpresa!). Si agregara esta página a sus
"favoritos" (o "marcadores", según su navegador), vería que el título también se usa
allí.
 4. Párrafos
Ahora que tiene la estructura básica de un documento HTML, puede jugar un poco con
el contenido.
Regrese a su editor de texto y agregue otra línea a su página:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
How exciting
</body>
</html>
Mire el documento en su navegador.
Es posible que haya esperado que su documento apareciera a medida que lo escribía,
en dos líneas, pero en su lugar debería ver algo como esto:
This is my first web page How exciting.
Esto se debe a que los navegadores web generalmente no notan en qué línea se
encuentra su código. Tampoco tiene en cuenta los espacios (obtendría el mismo
resultado si escribiera "Esta es mi primera página web, qué emocionante").
Si desea que el texto aparezca en líneas diferentes o, más bien, si pretende que haya
dos bloques de texto distintos (porque, recuerde, HTML se trata de significado, no de
presentación), debe indicarlo explícitamente.
Cambia tus dos líneas de contenido para que se vean así:
<p>This is my first web page</p>
<p>How exciting</p>
La petiqueta se utiliza para los párrafos .
Mira los resultados de esto. Las dos líneas ahora aparecerán en dos líneas porque el
navegador las reconoce como párrafos separados.
Piense en el contenido HTML como si fuera un libro, con párrafos donde corresponda.
Énfasis
Puede enfatizar el texto en un párrafo usando em(énfasis) y strong(gran importancia).
<p>Yes, that really <em>is</em> exciting. <strong>Warning:</strong> level of excitement may
cause head to explode.</p>
Tradicionalmente, los navegadores se mostrarán emen cursiva y strongen negrita de
forma predeterminada, pero no son lo mismo que las ietiquetas  bque (aunque se han
redefinido tenuemente en HTML5) tienen su origen en cursiva y negrita; recuerde,
HTML no es para presentaciones. Si desea enfatizar algo visualmente (poner algo en
cursiva, por ejemplo), es casi seguro que desee darle un énfasis general. No se puede
hablar en cursiva.
Saltos de línea
La etiqueta de salto de línea también se puede usar para separar líneas como esta:
This is my first web page<br>
How exciting
No hay contenido involucrado en las líneas de ruptura, por lo que no hay una etiqueta
de cierre.
Podría ser tentador abusar de los saltos de línea y brno debería usarse si dos bloques
de texto están destinados a estar separados uno del otro (porque si eso es lo que quiere
hacer, probablemente quiera la  petiqueta).
 5. Encabezados
La petiqueta es solo el comienzo del formato de texto.
Si tiene documentos con encabezados genuinos , existen etiquetas HTML
diseñadas específicamente para ellos.
Ellos son h1, h2, h3, y h4, siendo el todopoderoso emperador de los encabezamientos
y siendo la plebe más baja.h5h6h1h6
Cambie su código a lo siguiente:
<!DOCTYPE html>

<html>

<head>
<title>My first web page</title>
</head>

<body>
<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML</p>

<h2>Why this is</h2>

<p>To learn HTML</p>
</body>

</html>
Tenga en cuenta que la h1etiqueta solo se usa una vez, como encabezado principal de
la página. h2to h6, sin embargo, se pueden usar tantas veces como se desee, pero
siempre se deben usar en orden, como se pretendía. Por ejemplo, an h4debería ser un
subtítulo de un h3, que debería ser un subtítulo de un h2.
 6. Listas
Hay tres tipos de lista; listas desordenadas , listas ordenadas y listas de
definición. 
Las listas desordenadas y las listas ordenadas funcionan de la misma manera, excepto
que la primera se usa para listas no secuenciales con elementos de lista generalmente
precedidos por viñetas y la última es para listas secuenciales, que normalmente se
representan con números incrementales.
La uletiqueta se usa para definir listas desordenadas y la oletiqueta se usa para definir
listas ordenadas. Dentro de las listas, la lietiqueta se usa para definir cada elemento de
la lista.
Cambie su código a lo siguiente:
<!DOCTYPE html>

<html>

<head>
<title>My first web page</title>
</head>

<body>
<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML</p>

<h2>Why this is</h2>

<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give her some HTML
loving.</li>
</ul>

</body>

</html>
Si observa esto en su navegador, verá una lista con viñetas. Simplemente cambie
las uletiquetas a oly verá que la lista se numerará.
Las listas también se pueden incluir en listas para formar una jerarquía estructurada de
elementos.
Reemplace el código de la lista anterior con lo siguiente:
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
 </ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
Et voila. Una lista dentro de una lista. Y podrías poner otra lista dentro de eso. Y otro
dentro de eso. Y así sucesivamente y así sucesivamente.
 7. Enlaces
Hasta ahora has estado creando una página web independiente, lo cual está muy bien
y es agradable, pero lo que hace que Internet sea tan especial es que todo
se vincula entre sí.
La "H" y la "T" en "HTML" significan "hipertexto", que básicamente significa un sistema
de texto enlazado.
Se utiliza una etiqueta de anclaa ( ) para definir un enlace, pero también debe agregar
algo a la etiqueta de ancla: el destino del enlace.
Agregue esto a su documento:
<!DOCTYPE html>

<html>

<head>
<title>My first web page</title>
</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML</p>

<h2>Why this is</h2>

<p>To learn HTML</p>

<h2>Where to find the tutorial</h2>

<p><a href="http://www.htmldog.com">HTML Dog</a></p>

</body>

</html>
El destino del enlace se define en el hrefatributo de la etiqueta. El enlace puede ser
absoluto, como “http://www.htmldog.com”, o puede ser relativo a la página actual.
Entonces, si, por ejemplo, tuviera otro archivo llamado "flyingmoss.html" en el mismo
directorio, la línea de código simplemente sería <a href="flyingmoss.html">The miracle of
moss in flight</a>o algo así.
Un enlace no tiene que vincular a otro archivo HTML, puede vincular a cualquier
archivo en cualquier lugar de la web.
Un enlace también puede enviar a un usuario a otra parte de la misma página en la
que se encuentra. Puede agregar un idatributo a casi cualquier etiqueta, por
ejemplo <h2 id="moss">Moss</h2>, y luego vincularlo usando algo como esto: <a
href="#moss">Go to moss</a>. Al seleccionar este enlace, la página se desplazará
directamente al elemento con esa ID.
 8. Imágenes
Las cosas pueden parecer un poco sosas y aburridas con todo este formato de
texto. Por supuesto, la web no se trata solo de texto, es un gran espectáculo
multimedia y la forma más común de brillo es la imagen .
La img etiqueta se usa para poner una imagen en un documento HTML y se ve así:
<img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog">
El srcatributo le dice al navegador dónde encontrar la imagen. Al igual que la aetiqueta,
esto puede ser absoluto, como demuestra el ejemplo anterior, pero generalmente es
relativo. Por ejemplo, si crea su propia imagen y la guarda como "alienpie.jpg" en un
directorio llamado "imágenes", el código sería<img src="images/alienpie.jpg"...
Los atributos widthy heightson necesarios porque si se excluyen, el navegador tenderá a
calcular el tamaño a medida que se carga la imagen, en lugar de cuando se carga la
página, lo que significa que el diseño del documento puede cambiar mientras se carga
la página.
El altatributo es la descripción alternativa . Esta es una consideración de accesibilidad,
que proporciona información significativa para los usuarios que no pueden ver la
imagen (si tienen problemas de visión, por ejemplo).
Tenga en cuenta que, al igual que la bretiqueta, debido a que el imgelemento no
encierra ningún contenido, no se requiere una etiqueta de cierre.
La construcción de imágenes para la web está un poco fuera del alcance de este sitio
web, pero vale la pena señalar algunas cosas...
Los formatos de archivo más utilizados para las imágenes
son  JPEG  , GIF y PNG .  Son formatos comprimidos, y tienen usos muy diferentes.
Un JPEG (pronunciado “jay-peg”) utiliza un algoritmo matemático para comprimir la
imagen y distorsionará ligeramente el original. Cuanto menor sea la compresión,
mayor será el tamaño del archivo, pero más clara será la imagen.
Los archivos JPEG se utilizan normalmente para imágenes como fotografías.
Un GIF (pronunciado “jif”) no puede tener más de 256 colores, pero mantienen los
colores de la imagen original.  Cuanto menor sea el número de colores que tenga en la
imagen, menor será el tamaño del archivo. Los GIF también permiten que cualquier
píxel de la imagen sea transparente.
Los GIF se utilizan normalmente para imágenes con colores sólidos, como iconos o
logotipos.
Un PNG (pronunciado "ping") replica los colores, como un GIF, pero permite 16
millones de colores, así como transparencia alfa (es decir, un área podría ser 50%
transparente).
Los PNG se utilizan normalmente para imágenes versátiles en diseños más complejos,
PERO algunos navegadores antiguos no los admiten por completo.
La web es cada vez más y más rápida, pero obviamente desea que sus páginas web se
descarguen lo más rápido posible. El uso de imágenes de súper alta resolución no le
está haciendo ningún favor a usted ni al ancho de banda (o la paciencia) de su
usuario.  La compresión de imágenes es una gran herramienta y necesita lograr un
equilibrio entre la calidad de la imagen y el tamaño de la imagen.  La mayoría de los
programas modernos de manipulación de imágenes le permiten comprimir imágenes y
la mejor manera de descubrir qué es lo mejor para usted es prueba y error.
 9. Tablas
Las tablas HTML aún son más conocidas por ser utilizadas y abusadas
para diseñar páginas. Veremos cómo diseñar una página sin tablas, en
el Tutorial intermedio de CSS . El uso correcto de las tablas es hacer
exactamente lo que esperaría que hiciera una tabla: estructurar datos
tabulares .
Hay una serie de etiquetas que se utilizan en las tablas, y entender por completo cómo
funcionan es probablemente el área más difícil de este Tutorial para principiantes de
HTML.
Copie el siguiente código en el cuerpo de su documento y luego veremos lo que
hace cada etiqueta:
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
El tableelemento define la tabla.
El trelemento define una fila de la tabla .
El tdelemento define una celda de datos . Estos deben estar encerrados en tretiquetas,
como se muestra arriba.
Si imaginas una tabla de 3x4, que son 12 celdas, debe haber cuatro trelementos para
definir las filas y tres tdelementos dentro de cada una de las filas, haciendo un total de
12 tdelementos.
 10. Formularios
Los formularios se utilizan para recopilar datos introducidos por un usuario. Se
pueden usar como una interfaz para una aplicación web, por ejemplo, o para enviar
datos a través de la web.
Por sí solos, los formularios no suelen ser especialmente útiles. Tienden a usarse junto
con un lenguaje de programación para procesar la información ingresada por el
usuario.  Estos scripts adoptan todo tipo de formas que en gran medida están fuera del
alcance de este sitio web porque requieren lenguajes distintos a HTML y CSS.
Las etiquetas básicas utilizadas en el HTML real de los
formularios son form, input, textareay .selectoption
formulario
formdefine el formulario y dentro de esta etiqueta, si está utilizando un formulario para
que un usuario envíe información (que asumimos en este nivel), actionse necesita un
atributo para decirle al formulario a dónde se enviará su contenido.
El methodatributo le dice al formulario cómo se enviarán los datos que contiene y puede
tener el valor get, que es predeterminado, y bloquea la información del formulario en
una dirección web, o post, que (esencialmente) envía de forma invisible la información
del formulario.
Get se utiliza para fragmentos más cortos de información no confidencial: es posible
que vea la información que ha enviado en la búsqueda de un sitio web para que
aparezca en la dirección web de su página de resultados de búsqueda, por
ejemplo. postse utiliza para envíos más largos y seguros, como en formularios de
contacto.
Entonces, un elemento de formulario se verá así:
<form action="processingscript.php" method="post">

</form>

aporte
La inputetiqueta es el padre del mundo de las formas. Puede tomar una multitud de
formas, las más comunes se describen a continuación (consulte la página de referencia
de entrada para toda la familia loca):
 <input type="text">o simplemente <input>es un cuadro de texto estándar. Esto
también puede tener un valueatributo, que establece el texto inicial en el
cuadro de texto.
 <input type="password">es similar al cuadro de texto, pero los caracteres escritos
por el usuario estarán ocultos.
 <input type="checkbox">es una casilla de verificación, que el usuario puede
activar y desactivar. Esto también puede tener un checkedatributo ( - el atributo
no requiere un valor), y hace que el estado inicial de la casilla de verificación se
active, por así decirlo.<input type="checkbox" checked>
 <input type="radio">es similar a una casilla de verificación, pero el usuario solo
puede seleccionar un botón de radio en un grupo. Esto también puede tener
un checkedatributo.
  <input type="submit">es un botón que cuando se selecciona enviará el
formulario. Puede controlar el texto que aparece en el botón Enviar con
el valueatributo, por ejemplo <input type="submit" value="Ooo. Look. Text on a button.
Wow">.
Tenga en cuenta que, como imgy bretiquetas, la inputetiqueta, que no rodea ningún
contenido, no requiere una etiqueta de cierre.
área de texto
textareaes, básicamente, un cuadro de texto grande de varias líneas. El número
anticipado de filas y columnas se puede definir con rowsy colsatributos, aunque puede
manipular el tamaño a su antojo usando CSS.
<textarea rows="5" cols="20">A big load of text</textarea>
Cualquier texto que elija colocar entre las etiquetas de apertura y cierre (en este caso,
"una gran cantidad de texto") formará el valor inicial del área de texto.
Seleccione
La selectetiqueta funciona con la optionetiqueta para crear cuadros de selección
desplegables.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
Al enviar el formulario se enviará el valor de la opción seleccionada. Este valor será el
texto entre la etiqueta de opción de apertura y cierre seleccionada a menos que se
especifique un valor explícito con el valueatributo, en cuyo caso se enviará este en su
lugar. Entonces, en el ejemplo anterior, si se selecciona el primer elemento, se enviará
la "Opción 1", si se selecciona el tercer elemento, se enviará la "tercera opción".
Al igual que el checkedatributo de las casillas de verificación y los botones de radio,
una optionetiqueta también puede tener un selectedatributo, para comenzar con uno de
los elementos que ya está seleccionado, p. <option
selected>Rodent</option>preseleccionaría "Roedor" de los elementos.

nombres
Todas las etiquetas mencionadas anteriormente se verán muy bien presentadas en la
página, pero si conecta su formulario a un script de manejo de formularios, todas
serán ignoradas. Esto se debe a que los campos del formulario
necesitan nombres . nameEntonces, a todos los campos, se debe agregar el atributo ,
por ejemplo <input type="text" name="talkingsponge">.
Un formulario de contacto para el Arca de Noé, por ejemplo, podría parecerse al
siguiente. (Nota: este formulario no funcionará a menos que haya un archivo
"contactus.php", que se indica en el atributo de acción de la etiqueta del formulario,
para manejar los datos enviados).

<form action="contactus.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>

<p>Species:</p>
<p><input name="species"></p>
<!-- remember: 'type="text"' isn't actually necessary -->
 <p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>

<p><input type="submit"></p>

</form>
Uf.
 11. Poniendolo todo junto
Si ha pasado por todas las páginas de este Tutorial para principiantes
de HTML , entonces debería ser un HTMLer competente. De hecho, deberías ser
mejor que la mayoría.
El siguiente código incorpora todos los métodos que se han explicado en las páginas
anteriores:
<!DOCTYPE html>

<html>

<head>

<title>My first web page</title>

<!-- This is a comment, by the way -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>

<p>A simple page put together using HTML. <em>I said a simple page put together using
HTML.</em> A simple page put together using HTML. A simple page put together using HTML.
A simple page put together using HTML. A simple page put together using HTML. A simple page
put together using HTML. A simple page put together using HTML. A simple page put together
using HTML.</p>

<h2>Why this is</h2>

<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I have fallen in love with my computer and want to give her some HTML
loving.</li>
</ul>

<h2>Where to find the tutorial</h2>

<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/badge1.gif"
width="120" height="90" alt="HTML Dog"></a></p>

<h3>Some random table</h3>

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
 <td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

<h3>Some random form</h3>

<p><strong>Note:</strong> It looks the part, but won't do a damned thing.</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>

<p><input type="submit"></p>

</form>

</body>

</html>
Ahí tienes. Guarde el archivo y juegue con él: esta es la mejor manera de comprender
cómo funciona todo. Continuar. Gitano.
Cuando esté satisfecho, haga del Tutorial para principiantes de CSS su próximo
paso. Allí, aprenderá los conceptos básicos de cómo hacer que todo este HTML
se vea bonito.