Cómo aprender HTML

Video: Build A Price Comparison Page With HTML And CSS

Contenido

Pasos
Parte 1 de 2: Aprender los conceptos básicos de HTML
Parte 2 de 2: HTML avanzado
Consejos
Advertencias
Qué necesitas

HTML es la abreviatura de inglés Lenguaje de marcado de hipertexto (Lenguaje de marcado de hipertexto). Este es el código, o idioma, en el que se crea el marcado básico de los sitios. Aprender puede parecer abrumador si nunca ha programado, pero en realidad todo lo que necesita para comenzar es un editor de texto básico y un navegador de Internet. Incluso puede reconocer algunos ejemplos de marcado HTML que ha encontrado en foros de Internet, páginas personalizadas personalizadas o artículos de wikiHow. HTML es una herramienta útil para cualquier usuario de Internet, y aprender los conceptos básicos llevará menos tiempo del que cree.

Pasos

Parte 1 de 2: Aprender los conceptos básicos de HTML

1 Abra un documento HTML. La mayoría de los editores de texto (Notepad o Notepad ++ para Windows, TextEdit para Mac, gedit para GNU / Linux) se pueden usar para generar archivos HTML. Cree un nuevo documento y guárdelo usando Archivo → Guardar como en formato de página web, o cambie la extensión del archivo a .html o .htm en lugar de .doc, .rtf u otra extensión.
- Es posible que reciba una advertencia de que el archivo se guardará como "texto sin formato" en lugar de formato RTF, o que el formato y las imágenes no se guardarán. Esto esta bien; para HTML, estas opciones no son necesarias.
2 Abra el archivo generado en un navegador. Guarde el archivo en blanco, búsquelo en su computadora y haga doble clic en él para abrirlo. Debería abrirse una página en blanco en el navegador. Si no es así, arrastre el archivo a la barra de direcciones de su navegador. A medida que edita el archivo HTML, puede actualizar esta página para ver los cambios.
- Tenga en cuenta que de esta manera no está creando un sitio web en Internet. Otras personas no tendrán acceso a esta página y no necesita una conexión a Internet para probar su página local. El navegador simplemente interpreta el código HTML, "leyéndolo" como si fuera un sitio web.
3 Comprende qué son las etiquetas de marcado. A diferencia del texto normal, las etiquetas no aparecen en la página. En cambio, le dicen al navegador cómo mostrar la página y su contenido. La etiqueta de "apertura" contiene instrucciones. Por ejemplo, puede decirle al navegador que el texto debe mostrarse como audaz... También necesita una etiqueta "end" para mostrar al navegador dónde termina la instrucción. En este ejemplo, el texto entre las etiquetas de inicio y finalización se mostrará en negrita. Las etiquetas se escriben dentro de signos desiguales, pero la etiqueta final comienza con una barra inclinada.
- La etiqueta de apertura está escrita entre los signos de desigualdad: etiqueta de apertura>
- En la etiqueta de cierre, se coloca una barra diagonal antes del descriptor de la etiqueta (nombre): /etiqueta final>
- Siga leyendo para descubrir cómo se utilizan las diferentes etiquetas. Para este paso, solo necesita recordar el formato de grabación. Las etiquetas están escritas entre los signos de desigualdad:> y />
- En algunos tutoriales, las etiquetas HTML se denominan elementos y el texto entre las etiquetas de apertura y cierre se denomina contenido del elemento.
4 Escriba html> etiqueta en el editor. Cada archivo HTML debe comenzar con una etiqueta html> y terminar con una etiqueta / html>... Estas etiquetas le dicen al navegador que todo el contenido entre las etiquetas está en HTML. Agregue estas etiquetas a su documento:
- A menudo, los archivos HTML comienzan con la línea ! DOCTYPE html>lo que significa que los navegadores deben reconocer todo el archivo como HTML. Esta línea no es necesaria, pero puede ayudarlo a solucionar problemas de compatibilidad.
- Marcar html> en la parte superior del documento.
- Presione Entrar o Retorno varias veces para crear varias líneas en blanco, luego escriba / html>
- recuerda eso El conjunto el código que creará en este artículo deberá escribirse entre estas dos etiquetas.
5 Cree una sección head> en el archivo. Entre las etiquetas html> y / html>, cree una etiqueta de apertura cabeza> y la etiqueta de cierre / cabeza>... Agregue algunas líneas en blanco entre ellos. El contenido escrito entre las etiquetas head> y / head> no se muestra en la página. Siga estos pasos y verá para qué sirve esta etiqueta:
- Entre las etiquetas head> y / head>, escriba título> y / título>
- Entre las etiquetas title> y / title>, escriba Cómo aprender HTML - wikiHow.
- Guarde sus cambios y abra el archivo en un navegador (o actualice la página si el archivo ya está abierto). ¿Ves el texto que aparece en el título de la página encima de la barra de direcciones?
6 Crea un cuerpo> sección. Todas las demás etiquetas y texto de este ejemplo se escriben en la sección del cuerpo, cuyo contenido se muestra en la página. Después etiqueta de cierre / cabeza>, pero antes de tag / html> agregar etiquetas cuerpo> y / cuerpo>... Para el resto de este artículo, trabaje con la sección del cuerpo. Su archivo debería verse así:
html>
cabeza>
title> Cómo aprender HTML - wikiHow / title>
/ cabeza>
cuerpo>
/ cuerpo>
/ html>
7 Agrega texto usando diferentes estilos. ¡Es hora de agregar el contenido real a la página! Todo lo que escriba entre las etiquetas del cuerpo se mostrará en la página después de actualizarse en el navegador. No utilice simbolos o >ya que el navegador intentará interpretar el contenido como una etiqueta en lugar de texto. Escribir ¡Hola! (o lo que quiera), luego intente agregar estas etiquetas al texto y vea qué sucede:
- em> ¡Hola a todos! / em> hace que el texto esté en "cursiva": ¡Hola!
- strong> ¡Hola a todos! / strong> hace que el texto sea "negrita": ¡Hola!
- s> ¡Hola a todos! / s> texto tachado: ~~¡Hola!~~
- sup> ¡Hola a todos! / sup> muestra la fuente como un superíndice:
- sub> ¡Hola a todos! / sub> muestra la fuente como un subíndice: _¡Hola!
- Pruebe diferentes etiquetas juntas. Como se verá em> strong> ¡Hola a todos! / strong> / em>?
8 Divide el texto en párrafos. Si intenta escribir varias líneas de texto en un archivo HTML, notará que los saltos de línea no se muestran en el navegador. Para dividir el texto en párrafos, debe agregar etiquetas:
- p> Este es un párrafo separado. / p>
- Esta oración va seguida de un salto de línea br> antes del comienzo de esta línea.
  Esta es la primera etiqueta que no requiere una etiqueta final. Estas etiquetas se denominan etiquetas "vacías".
- Cree encabezados para mostrar los títulos de las secciones:
  h1> texto del encabezado / h1>: título más grande
  h2> texto del encabezado / h2> (título de segundo nivel)
  h3> texto del encabezado / h3> (título de tercer nivel)
  h4> texto del encabezado / h4> (título de cuarto nivel)
  h5> texto del encabezado / h5> (título más pequeño)
9 Aprenda a crear listas. Hay varias formas de crear listas en una página web. Pruebe las opciones a continuación y decida cuál le gusta más. Tenga en cuenta que se necesita un par de etiquetas para la lista en su conjunto (por ejemplo, ul> y / ul> para una lista con viñetas), y cada elemento de la lista se resalta con un par de etiquetas diferente, por ejemplo, li> y / li>.
- Lista con viñetas:
  ul> li> Primera línea / li> li> Segunda línea / li> li> Y así sucesivamente / li> / ul>
- Lista numerada:
  ol> li> Uno / li> li> Dos / li> li> Tres / li> / ol>
- Lista de definiciones:
  dl> dt> Café / dt> dd> - bebida caliente / dd> dt> Limonada / dt> dd> - bebida fría / dd> / dl>
10 Diseñe la página usando saltos de línea, líneas horizontales y Fotos. Es hora de agregar algo más que texto a la página. Pruebe las siguientes etiquetas o siga los enlaces para obtener más información. Utilice un servicio de alojamiento en línea para crear un enlace a la imagen que desea publicar:
- Linea horizontal: hora>
- Insertar imagen: img src = "enlace de imagen">
11 Agrega enlaces. Puede utilizar estas etiquetas para crear hipervínculos a otras páginas y sitios, pero como aún no tiene un sitio web, ahora aprenderá a crear enlaces de anclaje, es decir, enlaces a lugares específicos en una página:
- Cree un ancla con la etiqueta a> donde desea vincular en la página. Piensa en un nombre claro y memorable:
  
  a name = "Tips"> El texto al que está enlazando. / a>
- Utilice la etiqueta href> para crear un enlace relativo o un enlace a un recurso externo:
  
  un href = "enlace a la página o nombre del ancla dentro de la página"> Texto o imagen que servirá como enlace. / a>
- Para enlazar a un enlace relativo en otra página, agregue un signo # después del enlace principal y el nombre del ancla. Por ejemplo, https://en.wikihow.com/learn-HTML#Tips enlaces a la sección de consejos de esta página.

Parte 2 de 2: HTML avanzado

1 Conozca los atributos. Los atributos están escritos dentro de la etiqueta, lo que indica información adicional. El formato de los atributos es el siguiente: nombre = "valor", donde título define un atributo (por ejemplo, color para un atributo de color), y el valor indica su valor (por ejemplo, rojo para rojo).
- De hecho, los atributos se han utilizado en la sección anterior sobre conceptos básicos de HTML. La etiqueta img> usa el atributo src, los anclajes de enlaces relativos utilizan el atributo nombrey los enlaces usan el atributo href... Como ya habrás notado, todos los atributos están escritos en el formato ___='___’.
2 Experimente con tablas HTML. La creación de una tabla implica el uso de varias etiquetas. Puede experimentar o leer instrucciones más detalladas.
- Crear etiquetas de tabla:mesa> / mesa>
- Incluya el contenido de cada fila de la tabla en etiquetas: tr>
- El encabezado de la columna está definido por la etiqueta: th>
- Celdas en líneas posteriores: td>
- Un ejemplo del uso de estas etiquetas:
  
  tabla> tr> th> Columna 1: mes / th> th> Columna 2: ahorro / th> / tr> tr> td> enero / td> td> 5000 rublos / td> / tr> / table>
3 Conozca las etiquetas adicionales de la sección de encabezado. Ya ha aprendido la etiqueta head> que viene al principio de cada archivo html. Además de la etiqueta title>, hay otras etiquetas para esta sección:
- Metaetiquetas que contienen metadatosutilizado por los motores de búsqueda para indexar el sitio. Para que su sitio sea más fácil de encontrar en los motores de búsqueda, utilice una o más metaetiquetas de apertura (las etiquetas de cierre no son necesarias).Utilice un atributo y un valor por etiqueta: meta name = "description" content = "page description">; o meta nombre = "palabras clave" contenido = "palabras clave separadas por comas">
- Vínculo> etiquetas que apuntan a archivos de terceros, como hojas de estilo (CSS), que se crean con un tipo diferente de codificación y le permiten cambiar la página HTML usando color, alineación de texto y muchas otras características.
- Las etiquetas script> utilizadas para adjuntar archivos JavaScript a la página. Estos archivos son necesarios para modificar la página de forma interactiva (en respuesta a las acciones del usuario).
4 Experimente con el código HTML de otros sitios. Ver el código fuente de otras páginas web es una excelente manera de aprender HTML. Puede hacer clic derecho en la página y seleccionar Ver código fuente o algo similar en el menú superior de su navegador. Intente averiguar qué hace una etiqueta desconocida o busque información sobre ella en Internet.
- Aunque no puede editar los sitios de otras personas, puede copiar el código fuente en su archivo para experimentar con las etiquetas más adelante. Tenga en cuenta que el marcado CSS puede no estar disponible y los colores y el formato pueden verse diferentes.
5 Empiece a explorar guías más detalladas. Hay muchos sitios en Internet dedicados a las etiquetas HTML, como W3Schools o HTMLbook. También hay libros en papel a la venta, pero intente encontrar la última edición a medida que los estándares cambian y evolucionan. Mejor aún, domine CSS para tener mucho más control sobre el diseño y la apariencia de su sitio. Después de aprender CSS, los diseñadores web suelen aprender JavaScript.

Consejos

Notepad ++ es un gran programa gratuito, similar al Bloc de notas normal, pero puede guardar y probar su código en su navegador en línea. (También es compatible con casi cualquier lenguaje: HTML, CSS, Python, JavaScript, etc.).
Encuentre una página simple en la red, guarde el código en su computadora y experimente con él. Intente mover texto, cambiar la fuente, reemplazar imágenes, ¡lo que sea!
Puedes tener un cuaderno donde escribir etiquetas para tenerlas siempre a mano. También puede imprimir esta página y consultarla.
Cuando escriba código, hágalo con cuidado para que usted y otras personas puedan entenderlo. Utilice! - Insertar comentario aquí -> para comentarios HTML: no se reflejarán en la página, pero serán visibles en el documento de código.
XML y RSS están ganando popularidad. El código de las páginas que contienen tecnologías XML y RSS es más difícil de leer y comprender para un usuario sin experiencia, pero estas herramientas son bastante útiles.
Las etiquetas de marcado en HTML no distinguen entre mayúsculas y minúsculas, pero recomendamos usar solo letras minúsculas (como en los ejemplos de este artículo) tanto para la estandarización como para la compatibilidad con XHTML.

Advertencias

Algunas etiquetas han dejado de usarse en los últimos años y han sido reemplazadas por otras nuevas que dan el mismo efecto o algunos efectos adicionales.
Si desea probar su página, diríjase al sitio W3 y consulte los requisitos HTML modernos. Los estándares HTML cambian con el tiempo y algunas etiquetas se reemplazan por otras nuevas que funcionan mejor en los navegadores modernos.

Qué necesitas

Un editor de texto como el Bloc de notas (Windows) o TextEdit (Mac)
Papel / bloc de notas (no es necesario)
Editor de HTML como Notepad ++ (Windows) o TextWrangler (Mac) (no es necesario)