Cómo crear una página HTML

Autor: Florence Bailey
Fecha De Creación: 20 Marcha 2021
Fecha De Actualización: 1 Mes De Julio 2024
Anonim
Cómo crear una página HTML - Sociedad
Cómo crear una página HTML - Sociedad

Contenido

HTML (Hypertext Markup Language) es el lenguaje de programación principal para desarrollar páginas web. Creado como un lenguaje de programación simple y conveniente. La mayoría de las páginas de Internet se han desarrollado utilizando alguna de las formas de este lenguaje (ColdFusion, XML, XSLT). Después de leer este artículo, puede continuar su formación utilizando otros recursos en Internet. Intente buscar en Internet otros artículos relacionados con este tema.

Pasos

Método 1 de 1: escribir una página HTML

  1. 1 Antes de comenzar a familiarizarse con uno de los pasos que se presentan aquí, consulte la sección "Qué necesitará".
  2. 2 Lo que debe saber antes de comenzar a comprender este problema:
  3. 3 Los basicos. ¿Alguna vez has oído hablar de la etiqueta? La etiqueta está rodeada por corchetes angulares, con la palabra adentro. La etiqueta final está escrita de la misma forma, pero con la adición de una barra después del primer corchete angular. Un atributo es una palabra opcional en una etiqueta que se usa para agregar detalles a una etiqueta.
  4. 4 El comienzo del documento. En cualquier editor de texto que esté utilizando, pegue lo siguiente:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> grande> / grande>
    La etiqueta debe cerrarse con la misma etiqueta, pero con una barra después del primer corchete angular. Hay excepciones como las etiquetas. META o DOCTYPE.
  5. 5 DOCTYPE
    • Normalmente, la mayoría de las páginas web están configuradas DOCTYPE ”. Esto ayuda a determinar la codificación y cómo será percibida por los navegadores web. La mayoría de las páginas funcionarán sin él, “pero esto es necesario si quieres hacer coincidir (regulan los tipos de codificaciones en Internet y cómo se usan)... El DOCTYPE para HTML 4.01 se presenta a continuación:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Este es uno de los mas comunes DOCTYPE utilizado en páginas de Internet.Primero, señala el tipo de página que describe el "html", luego destaca el tipo de codificación y, finalmente, la ubicación del DOCTYPE, que como resultado, describe la página para el navegador web.
    • Hay diferentes tipos de HTML (diferentes versiones desarrolladas a lo largo de los años), por ejemplo, usando etiquetas nuevas o etiquetas específicas. Algunas etiquetas están en desuso (en su lugar se utilizan otras etiquetas más útiles).
    • b> y yo> - esto es lo que se impone actualmente a las etiquetas, porque se utilizan para transformar texto, pero no especificaciones, como resultado, otras etiquetas vienen a reemplazarlas. Etiqueta fuerte> es un reemplazo para b>, y em>, un reemplazo para yo>.
    • Es importante que las etiquetas anteriores se reemplacen por etiquetas que sean más que formatear. Si el texto se traduce, no solo el formato, sino también su significado sigue siendo el mismo. Esto es semánticamente correcto.
    • En XHTML versión 2.0, b> y yo> no se utiliza, al igual que en la versión HTML 3+.
  6. 6 HTML "Regla de encapsulación".
    • Echemos un vistazo a las etiquetas más importantes actualmente en uso. Durante la creación de la página, se utiliza una estructura simple. Si se abrió una etiqueta, entonces, como resultado, debería estar cerrado... Esto se aplica a toda la estructura. Aquí hay un ejemplo válido de la estructura de diseño XHTML:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • cabeza>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • título> ¡Hola mundo! / título>
    • / cabeza>
    • cuerpo>
    • h1> ¡Hola mundo! / h1>
    • / cuerpo>
    • / html>
    • Código de muestra que emite un mensaje Hola Mundo... Esto se llama prueba Hola Mundo.
  7. 7 Bóveda
    • El título de la página web es el contenido entre la etiqueta cabeza>... El usuario no puede ver este contenido (solo el título que se muestra en el título de la página). Información entre etiquetas cabeza>, puede incluir otras etiquetas, como:

      • La etiqueta META se utiliza para obtener información útil para los motores de búsqueda y otras utilidades.
      • Etiqueta LINK que crea un vínculo entre documentos, por ejemplo, para estilos (CSS).
      • Etiqueta SCRIPT, esto incluye casi cualquier codificación web, con la capacidad de acceder de forma remota (desde otro documento).
      • La etiqueta STYLE, que es esencialmente un estilo que se puede aplicar a una página.
      • La etiqueta TITLE es el título que aparece como título de una página en su navegador web.
    • Veamos una demostración de algunos de estos en un encabezado de ejemplo tomado de este sitio web (se ha abreviado):
      • cabeza>
      • título> ... / título>
      • meta nombre = "descripción" contenido = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • estilo tipo = "texto / css" media = "todo"> ... / estilo>
      • tipo de script = "texto / javascript" src = "..."> / script>
      • / cabeza>

        En caso de que no lo haya notado, las etiquetas individuales se han resaltado, con la información real eliminada. El ejemplo es bastante breve y muestra casi todas las etiquetas que se pueden encontrar en cabeza>excepto por el comentario HTML (hablaremos de esto en etiquetas simples).
  8. 8 Etiquetas simples en todas partes
    • Sigamos adelante y veamos otras etiquetas. Tenga cuidado con su etiquetado y recuerde la regla de oro, "Encapsulación".

      • fuerte> Enfatiza el texto importante.
      • pequeño> Reduce el tamaño del texto. El tamaño de fuente se mide en unidades estándar de 1 a 7, 3 es el tamaño de texto predeterminado. ...
      • pre> Define un bloque de texto enriquecido. Como es correcto, dicho texto se escribe en una fuente del mismo tamaño y con todos los espacios entre palabras.
      • em> Muestra el texto como una frase.
      • del> Tacha el texto.
      • ins> Define el texto que se ha insertado en el documento.
      • h1> Una de las muchas etiquetas de encabezado. Las etiquetas de este tipo comienzan con 'h', con una diferencia en el número. Asegúrese de cerrar la etiqueta con el mismo número.
      • p> Define un párrafo.
      • ! --- ... ---> A diferencia de otras etiquetas, el comentario debe estar dentro de la propia etiqueta. Esta información solo es visible cuando se visualiza el código.
      • blockquote> Muestra una cita, se puede usar con la etiqueta cite>.
      • Los pocos ejemplos anteriores no son una lista completa de las etiquetas existentes. Para conocer otros, visite.
  9. 9 Creando una estructura clara
    • Las páginas están diseñadas para contener datos en conjuntos simples de etiquetas para que podamos analizar la información en párrafos. La computadora reconoce datos, no conoce el contexto o la conexión conceptual. Tenemos que crear páginas HTML aptas para computadoras. Esto se logra mediante el uso de la etiqueta div. Ayuda a crear una gran cantidad de páginas. Se puede diseñar con CSS y es más fácil que crear tablas de códigos grandes para el diseño.
      • div> Esta etiqueta es especial porque se puede diseñar y usar bloques de información separados que tanto el usuario como la computadora pueden entender.
    • Echemos un vistazo a un diseño HTML simple que usa una etiqueta div.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • cabeza>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • título> ¡Hola mundo! / título>
      • / cabeza>
      • cuerpo>
      • h1> ¡Hola mundo! / h1>
      • div id = "contentOne">
      • p> Este es un texto en div # contentOne. / p>
      • div>
      • p> Un párrafo en una subsección de div # contentOne / p>
      • / div>
      • / div>
      • / cuerpo>
      • / html>
    • El uso de etiquetas div> ayuda a encontrar y modificar estilos mientras se trabaja con CSS y Javascript. HTML utilizará diferentes codificaciones para trabajar con estilos CSS y Javascript para crear una experiencia de usuario mejor y más receptiva.

Consejos

  • Después de leer este artículo, no te detengas a pensar que has aprendido todo lo que necesitas saber. Siempre hay algo que aprender, especialmente en esta tecnología.
  • Aprenda, comprenda y escriba código.
  • Tenga en cuenta que algunas etiquetas solo usan>. Para y br son algunos ejemplos. Otras etiquetas abiertas con> deben cerrarse más. Por ejemplo, "div> / div>".
  • La gente espera nuevos descubrimientos, así que reinvente, diseñe o codifique.
  • Una vez que haya aprendido mucho, intente aprender a programar en servidores.
  • Aprenda a trabajar tanto con CSS como con Javascript.

Advertencias

  • Recuerde, HTML se trata de editar contenido. Esto significa que HTML solo se usa para almacenar contenido en un formato reconocido. Otros cambios deben realizarse utilizando otras tecnologías, como CSS. También significa hacer "Semánticamente correctoincluso si otros no lo admiten. Otros lenguajes de programación ayudan a crear páginas web (CSS, Javascript y XML). HTML es un constructor de contenido.

Qué necesitas

  • Un editor de texto que admite codificación ANSI
  • Un navegador web como Internet Explorer o Mozilla Firefox
  • (Opcional) editor de HTML wysiwyg o wykiwyg como Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web