Contenido

• Al paso
• Parte 1 de 2: Aprender los conceptos básicos de HTML
• Parte 2 de 2: Aprendizaje de HTML avanzado
• Consejos
• Advertencias
• Artículos de primera necesidad

HTML es la abreviatura de Lenguaje de marcado de hipertexto, es el código o idioma que se utiliza para crear sitios web. Puede parecer complicado si nunca ha programado antes, pero para probarlo todo lo que necesita es un programa de procesamiento de texto simple y un navegador de Internet. Es posible que reconozca algunos HTML de foros, perfiles en línea o artículos de wikiHow. HTML es un recurso útil para cualquiera que utilice Internet, y aprender HTML puede llevar menos tiempo de lo esperado.

Al paso

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

1. Abra un documento HTML. La mayoría de los programas de procesamiento de texto, incluidos el Bloc de notas o Word para Windows y el Editor de texto para Mac, se pueden utilizar para crear documentos HTML. Abra un nuevo documento y seleccione Archivo → Guardar como en el menú superior para guardar su documento como una página web, o cambie la extensión del archivo de ".doc", ".rtf" o cualquier otra cosa a ".html" o ".htm ".
   • Es posible que ahora vea una advertencia que indica que su documento se está cambiando del formato de texto enriquecido (RTF) al formato de "texto sin formato", y que algunas opciones de formato e imágenes no se guardan correctamente. Puede ignorar esta advertencia; Los documentos HTML no utilizan estas opciones.
   • Los archivos .html y .htm son iguales. Ambos funcionan.
2. Vea su documento con un navegador. Guarde su documento en blanco, ciérrelo y luego haga doble clic en el documento en la ubicación donde se guardó para abrirlo nuevamente. Su documento ahora debería ser abierto por su navegador como una página web en blanco. Si eso no funciona, arrastre el icono del archivo a la barra de direcciones de su navegador. Más tarde, si edita su documento HTML siguiendo los pasos de este artículo, volverá al navegador para comprobar cómo se ven los cambios en el código.
   • Nota: su página web aún no está en línea. Otros no pueden acceder a la página y no necesita una conexión a Internet que funcione para probarla. Simplemente use su navegador para "leer" el documento HTML como si fuera un sitio web.
3. Comprenda qué son las "etiquetas". Las etiquetas no son visibles en la página web final, como ocurre con el texto normal. Las etiquetas le dicen a su navegador cómo mostrar la página y el contenido de la página. La etiqueta de inicio contiene instrucciones. Por ejemplo, puede decirle al navegador que muestre el texto en negrita. La etiqueta final es necesaria para indicarle al navegador dónde se aplican las instrucciones: en este ejemplo, todo el texto entre la etiqueta inicial y final está en negrita. Las etiquetas finales también se colocan entre paréntesis, pero una barra diagonal sigue al primer paréntesis.
   • Escriba las etiquetas iniciales entre paréntesis: este es el día de inicio>
   • Escriba las etiquetas finales entre paréntesis, pero coloque una barra después del primer paréntesis: /esta es la etiqueta de cierre>)
   • Lea más adelante en el artículo cómo escribir etiquetas funcionales. En este paso, solo necesita recordar de qué manera escribir las etiquetas:> y />.
   • En otros cursos HTML, las etiquetas también se denominan "elementos" y el texto entre las etiquetas de apertura y cierre también se denomina "contenido del elemento".
4. Escribe tu primera etiqueta html>. Cada documento HTML comienza con un html>etiqueta y termina con una / html>etiqueta. Esto le dice al navegador que todo entre estas etiquetas está escrito en HTML. Agregue estas etiquetas a su documento:
   • Escribir html> en la parte superior de su documento.
   • Pulsa Intro o Retorno varias veces para darte algo de espacio, luego escribe / html>
   • Te recuerdo todo en este artículo entre estas dos etiquetas.
5. Haz que el encabezado> forme parte de tu documento. Entre las etiquetas html> y / html> escribe un cabeza>etiqueta de inicio y una / cabeza>-Etiqueta final. Vuelva a dejar espacio entre estas etiquetas. Todo lo que se escriba entre estas etiquetas no será visible en la propia página web. Pruebe los siguientes pasos y vea si puede ver dónde aparece la información:
   • Escriba entre las etiquetas head> y / head>: título> y / título>
   • Entre las etiquetas title> y / title> escribe: Cómo aprender HTML (con imágenes) - wikiHow.
   • Guarde el documento y ábralo en un navegador (o guarde el documento y actualice la página en el navegador si la página aún estaba abierta). ¿Ves lo que acabas de escribir en la parte superior de la página, encima de la barra de direcciones?
6. Crea un cuerpo> sección. Todo lo demás en este documento para principiantes se coloca en la sección body>, y se muestra en la página web. Después la etiqueta / cabeza>, pero en frente de la etiqueta / html> escribes cuerpo> y / cuerpo>. Todo lo que discutimos más adelante en este artículo, lo colocamos entre las etiquetas corporales. Ahora debería tener un documento con este aspecto (sin las viñetas):
   • html>
   • cabeza>
   • título> aprender HTML - wikiHow / title>
   • / cabeza>
   • cuerpo>
   • / cuerpo>
   • / html>
7. Agrega texto en diferentes estilos. ¡Ahora es el momento de que empieces a escribir algo que será visible en el navegador! Todo lo que escriba dentro de las etiquetas corporales será visible en el navegador después de guardar los cambios y actualizar la página dentro del navegador. Escribir no algo con las señales y >porque su navegador lo interpretará como instrucción HTML en lugar de texto sin formato. Escribir por ejemplo ¡Hola Mundo! (Inglés para "¡Hola mundo!", Este es el texto estándar global como el primer ejemplo en cualquier curso de programación en un lenguaje de programación en particular) o algo más, y coloque las siguientes etiquetas antes y después del texto y vea qué sucede:
   • em> ¡Hola mundo! / em> parece texto en cursiva: ¡Hola Mundo!
   • fuerte> ¡Hola mundo! / fuerte> parece texto en negrita: ¡Hola Mundo!
   • s> ¡Hola mundo! / s> parece texto tachado: ¡Hola Mundo!
   • sup> ¡Hola mundo! / sup> parece un superíndice:
   • sub> ¡Hola mundo! / sub> parece el subtítulo: _{¡Hola Mundo!}
   • Prueba combinaciones: cómo ve em> strong> ¡Hola mundo! / strong> / em> ¿Sal?
8. Divide tu texto en párrafos. Si coloca diferentes líneas de texto en su documento, verá que todas las líneas se colocan una tras otra. Tienes que programar nuevas líneas y líneas en blanco tú mismo:
   • p> Esta es una sección separada./p>
   • Esta oración está en la primera línea y esta oración en la siguiente.
     ¡Esta es la primera etiqueta que encontramos que no necesita una etiqueta de cierre! Llamamos a tal etiqueta uno etiqueta vacía.
   • Cree encabezados para aclarar los nombres de las secciones:
     h1> encabezado / h1>: el encabezado más grande posible
     h2> encabezado / h2> (el encabezado de 2 niveles)
     h3> encabezado / h3> (el encabezado de 3 niveles)
     h4> encabezado / h4> (el encabezado de 4 niveles)
     h5> encabezado / h5> (el encabezado más pequeño posible)
9. Aprenda a hacer listas. Hay varias formas de crear listas en una página web. Pruebe los siguientes métodos para descubrir cuál le gusta más. Tenga en cuenta que se coloca un par de etiquetas alrededor de toda la lista (como las etiquetas ul> y / ul> para listas desordenadas) y que se coloca un par de etiquetas diferente alrededor de cada elemento dentro de la lista, como li> y / li> .
   • Utilice el siguiente código para crear listas con viñetas:
     ul> li> Un elemento / li> li> Otro elemento / li> li> Otro elemento / li> / ul>
   • O este código para crear listas numeradas:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • O este código para crear una denominada lista de definiciones:
     dl> dt> Café / dt> dd> - Bebida caliente / dd> dt> Leche / dt> dd> - Bebida fría / dd> / dl>
10. Haga su página más atractiva con nuevas líneas, líneas horizontales e imágenes. Ahora es el momento de comenzar a agregar otras cosas a su página. Pruebe las siguientes etiquetas (la imagen debe publicarse en línea para que pueda usar un enlace a la imagen):
    • Insertar una línea: br> o hora>
    • Insertar imágenes: img src = "la_url_de_su_imagen">
11. Inserta enlaces a otros lugares de la página. También puede usar este código para vincular a otras páginas y sitios web, pero como aún no tiene un sitio web, nos centraremos en los "anclajes", que son lugares específicos de la página a los que puede vincular:
    • Primero, cree un ancla con la etiqueta a> en el punto de la página a la que desea vincular. Dale a tu presentador un nombre claro que sea fácil de recordar:
      
      a name = "Tips"> Este es el texto alrededor del cual colocas tu ancla ./a>
    • Utilice la etiqueta href> para enlazar a su ancla oa otra página web:
      
      a href = "url de la página web o nombre del ancla en esta página"> Escriba el texto o la imagen que se muestra como enlace aquí./a>
    • Para vincular a un ancla en otra página, agregue el carácter # después de la URL, seguido del nombre de su ancla. Por ejemplo, http://www.wikihow.com/HTML-leren#Tips lo llevará directamente a la sección "Sugerencias" de esta página.

Parte 2 de 2: Aprendizaje de HTML avanzado

1. Obtenga más información sobre los atributos. Los atributos se colocan dentro de la etiqueta y se utilizan para realizar ajustes adicionales al "contenido del elemento" entre la etiqueta inicial y final. Nunca están solos. Están escritos de la siguiente manera: nombre = "valor". nombre representa el nombre del atributo (por ejemplo, "color") y valor describe este caso particular (por ejemplo, "rojo").
   • Si ha mirado de cerca en la parte anterior de este artículo, ya ha encontrado atributos. La etiqueta img> usa el atributo src, un ancla usa el atributo nombre y los enlaces usan el atributo href. Se puede decir que todos son de tamaño ___='___’ seguir.
2. Experimente con tablas HTML. Para hacer una tabla o un gráfico necesitas varias etiquetas:
   • Comience con las etiquetas de la tabla ("tabla" en inglés) alrededor de toda la tabla:mesa> / mesa>
   • Coloque etiquetas alrededor del contenido de cada fila: tr>
   • Coloque los encabezados de columna en la primera fila: th>
   • Coloque celdas en filas consecutivas: td>
   • Este es un ejemplo de cómo todo esto se une:
     
     table> tr> th> Columna 1: Mes / th> th> Columna 2: Dinero ahorrado / th> / tr> tr> td> enero / td> td> € 100 / td> / tr> / table>
3. Conozca las otras etiquetas utilizadas en la sección principal. Ya ha aprendido el encabezado de la etiqueta>, que coloca al principio de cada documento. Además de la etiqueta title>, puede haber otras etiquetas en la sección de encabezado:
   • Las metaetiquetas se utilizan para crear metadatos acerca de una página web. Los motores de búsqueda utilizan estos datos para clasificar las páginas web. Para que su página sea visible para los motores de búsqueda, puede colocar una o más metaetiquetas (las etiquetas finales no son necesarias), cada etiqueta debe contener exactamente un atributo de nombre y un atributo de contenido, por ejemplo: meta name = "description" content = "put here descripción ">; o meta nombre = "palabras clave" contenido = "escriba una lista de palabras clave aquí, siempre separadas por una coma">
   • Las etiquetas link> se utilizan para vincular otros archivos a la página. Normalmente se utilizan para asociar hojas de estilo CSS con páginas HTML, estas páginas se construyen con un tipo de código diferente y se utilizan para determinar el estilo general de una página.
   • Las etiquetas script> se utilizan para asociar archivos javascript con la página HTML. Javascript permite que la página cambie si el usuario hace algo en la página.
4. Juega con HTML de páginas existentes. Ver el código fuente de las páginas web es una excelente manera de ampliar su conocimiento de HTML. Haga clic derecho en la página y seleccione "Ver fuente", "Mostrar fuente de página" o similar. Averigüe qué hace una etiqueta en particular que no conoce o busque en línea la respuesta.
   • No puede editar los sitios web de otras personas, pero puede copiar el código HTML en su propio documento y jugar con él para ver qué hacen los diferentes ajustes. Nota: debido a que muchos sitios web utilizan hojas de estilo CSS, es posible que no pueda ver muchos colores u otros estilos.
5. Aprenda sobre HTML leyendo artículos más detallados. Hay muchos recursos en Internet para dominar más etiquetas HTML como W3Schools o Codecademy. También hay muchos libros HTML disponibles, pero asegúrese de utilizar una edición reciente, ya que el estándar HTML cambia de vez en cuando. Una vez que haya dominado HTML a un buen nivel, puede recurrir a CSS para tener más control sobre el diseño y el estilo de su página web. Después de eso, el siguiente paso suele ser javascript.

Consejos

• Puede ser útil encontrar una página web sencilla en Internet y luego empezar a jugar con el código. Intenta mover algo de texto, cambia la fuente, cambia las imágenes, ¡lo que quieras!
• Puede usar un cuaderno para escribir el código, de modo que tenga algo a lo que recurrir si no lo recuerda por un momento. También puede imprimir esta página y conservarla como referencia.
• XML y RSS se utilizan cada vez más en sitios web hoy en día. El código puede parecer inaccesible para el ojo humano, especialmente cuando se ve en el código fuente, pero la funcionalidad puede ser útil.
• Las etiquetas utilizadas en HTML no distinguen entre mayúsculas y minúsculas, pero el valor predeterminado es usar letras minúsculas (como hacemos en este artículo). Se recomiendan letras minúsculas para las etiquetas, también por compatibilidad con XHTML.

Advertencias

• Algunas etiquetas ya no se utilizan y han sido reemplazadas por otras etiquetas que hacen lo mismo, pero a menudo ofrecen más opciones.
• Si desea asegurarse de que su página cumpla con el estándar HTML, vaya al sitio web de W3 para probar su código con el estándar actual. Muchas etiquetas se han vuelto obsoletas y han sido reemplazadas por etiquetas que funcionan mejor en los navegadores modernos.

Artículos de primera necesidad

• Un programa de procesamiento de texto, como el Bloc de notas (Windows) o el Editor de texto (Mac).
• una hoja de papel o un cuadernoOpcional)
• Un programa especialmente diseñado para escribir HTML, como Notepad ++ para Windows o TextWrangler para Mac (Opcional)