Cómo crear una página web desde cero en html 2021

Tiempo de leer: Octavo protocolo

Última actualización: diecinueve de mayo de 2021.

Todos los sitios web están construidos en HTML, mas la mayor parte de los sitios web actuales se desarrollan con herramientas que producen de forma automática ese HTML para nosotros, como WP. No precisas saber para crear un lugar web el día de hoy HTML, solo sabe de qué forma usar estas herramientas.

Sin embargo, si verdaderamente quiere desarrollar un lugar web interesante y diferente, probablemente deba hacer ajustes y entender de qué forma marcha la estructura detrás de él. Esto significa, saber como marcha HTMLy otras herramientas como CSS y quizá JavaScript.

En esta nota, vemos de qué forma empezar a desarrollar un lugar web utilizando un código simple.

Índice

    Que es HTML

    HTML (HyperText Markup Language) no es un lenguaje de programación, sino más bien un lenguaje de marcado. Eso quiere decir que no podemos emplear HTML para crear funciones activas. No obstante, Puede usar HTML para organizar y formatear documentos, afín a lo que hacemos en editores de texto como Microsoft Word.

    HTML es un lenguaje de marcado de hipertexto que se emplea para vertebrar un documento o bien una página para la web. O sea, cuando visualiza una página en Internet, ve la representación del código creado en HTML así como otros lenguajes.

    En otras palabras, el lenguaje HTML nos deja crear código que los navegadores renderizan. Por ende, el resultado de esta representación es lo que se muestra al usuario. De este modoTodas las páginas a las que accede en Internet están escritas en código en lenguaje de máquina.. Las piedras angulares del desarrollo web front-end son HTML, CSS y JavaScript.

    HTML se emplea para marcar los elementos de la página, o sea, para vertebrar la página. CSS nos deja aplicar estilos a elementos mediante estilos en catarata. Esto significa, Con CSS tenemos el control y cambiamos la apariencia visual de la página.. JavaScript, por otra parte, es un lenguaje de programación que puede emplear para añadir interactúes en su lugar web. Por ende, si quiere crear un lugar web, es fundamental conocer cuando menos algo de HTML básico.

    HTML se halla hoy en día en la versión HTML5 y está estandarizado por el W3C (WWW Consortium), una organización internacional responsable de establecer estándares para Internet como XML, CSS y SOAP.

    ¿Cómo marcha HTML en un lugar web?

    Un documento HTML no es más que un documento que contiene la extensión .html o bien .htm. Desde este documento, el navegador lee el fichero y procesa su contenido a fin de que el usuario final pueda verlo. Debido a esto, Los ficheros .html o bien .htm se pueden ver en cualquier navegador (como Chrome, Opera, Safari, Mozilla Firefox Mozilla Firefox, etc.).

    En general, un lugar web consta de múltiples páginas HTML, por ejemplo: Un lugar web con 3 páginas (una página de comienzo, una página de contacto y una página de producto) contiene cuando menos 3 documentos .html diferentes, uno para cada página del lugar web.

    En este documento, se escriben múltiples líneas de prefijos, o sea Elementos HTML. Estos elementos se dividen en etiquetas en código HTML y su contenido.

    Para crear o bien editar un documento HTML, el único recurso que precisa es un editor de texto, p. Ej. B. el bloc de notas en sí. No obstante, para el desarrollo, se aconseja usar editores especializados como y también Texto elevado, Bloc de notas ++, Código de Visual Studio, entre otros muchos. Conque verifique qué editor de texto se amolda mejor a sus necesidades y empléelo para crear sus códigos. Asimismo aconsejamos Code Pen, una herramienta completa para probar código HTML, CSS y JavaScript de forma directa desde el navegador.

    Cada página está formada por una serie de etiquetas (asimismo llamadas elementos) que pueden verse como bloques de construcción de páginas. Por eso estos bloques sean la manera en que HTML marca el contenido, creando su jerarquía y estructura, la que se separa en secciones, parágrafos, encabezados y otros.

    Etiquetas HTML

    Las etiquetas son una parte de los elementos HTML. Sirven para informar al navegador sobre la estructura del lugar web. En otras palabras: al redactar código HTML, las etiquetas son interpretadas por el navegador y, en consecuencia, se generan la estructura y el contenido visual del lugar web.

    La característica primordial de las etiquetas es que siempre y en toda circunstancia están en los caracteres "mayor que" y "menor que", es decir: <>.

    Las etiquetas en código HTML se dividen en 2 tipos: las que precisan cerrarse y las que no precisan cerrarse. Las etiquetas que deben cerrarse tienen la sintaxis ... mientras que aquellos que no precisan cerrar la estructura tener.

    Además, a exactamente la misma etiqueta se le pueden asignar uno o bien más atributos que tengan un valor que cambie su estructura o bien funcionalidad. Los atributos no son más que propiedades con las que se puede mudar y amoldar la funcionalidad de una etiqueta. Por ende, podemos emplear diferentes atributos como ancho, alto y otros. Con versión HTML5, una una gran parte de los atributos de estilo ya no se emplean, sino se les aplica estilo a través de CSS.

    Te puede Interesar  Qué Clubhouse y cómo funciona

    Estructura básica de un documento HTML

    La estructura básica de un documento-HTML, o sea, un lugar web, se crea de la próxima manera:

    A partir de este código, podemos desarrollar todo nuestro lugar y estructurarlo conforme sea preciso. Mas primero, es bueno entender lo que se ha hecho hasta ahora:

    - La declaración del género de documento le afirma al navegador que se está usando HTML. El día de hoy el doctype solo es preciso para asegurar que el documento se comporte apropiadamente.

    : El factor incluye todo el contenido de la página HTML.

    : En el factor añada cualquier elemento que desee incluir en la página mas no renderizar. Entre otras muchas cosas, podemos ver los metadatos, el título, el Use etiquetas para añadir hojas de estilo.

    - Este elemento de metadatos se emplea para acotar el conjunto de caracteres que su documento debe emplear para utf-ocho.

    : El factor se emplea para acotar el título de su página. Acá es donde define el título que se va a mostrar en la pestañita del navegador.</p> <p><body> <noscript><link rel="stylesheet" href="https://todohosting.xyz/wp-content/cache/min/1/c45e97477fc4df53a9394fa6e8d09389.css" media="all" data-minify="1" /></noscript></body> - Por último, este elemento contiene todos y cada uno de los elementos que van a ser representados por el navegador, o sea, todo el cuerpo de su página HTML.</p> <h2><span id="Etiquetas_mas_importantes_para_HTML_basico">Las etiquetas más esenciales para HTML simple</span></h2> <p>Actualmente hay más de ciento cuarenta etiquetas en código HTML en HTML5. No obstante, la mayor parte de estos no se emplean habitualmente y, al desarrollar una página, generalmente hallamos exactamente las mismas etiquetas que siempre y en toda circunstancia se emplean. <strong>Estas son las etiquetas más usadas y también esenciales para dominar el HTML básico.</strong>:</p> <p><style> </style> <p> Introduzca un código CSS en el documento HTML.</p> <p><script type="rocketlazyloadscript"> </script> Introduce código de secuencia de comandos como JavaScript en el documento HTML.</p> <link /> Le deja vincular a documentos locales o bien globales, como fuentes o bien hojas de estilo.</p> <p><meta /> Le deja introducir metadatos en la página.</p> <p><h1> </h1> <p>, </p> <h2> </h2> <p>, </p> <h3> </h3> <p>, </p> <h4> </h4> <p>, </p> <h5> </h5> <p>, </p> <h6> </h6> <p> Las etiquetas a acotar incluyen un título y subtítulos que van del 1 al seis, siendo h1 la más esencial y h6 la menos esencial.</p> <p> Etiqueta para acotar un parágrafo.</p> <p><span> </span> Defina un intervalo.</p> <p> Haz un salto de línea.</p> <p><a> </a> La etiqueta del link, así como el atributo href = ”…”, es quien se encarga de la función primordial de la web.</p> <p><header> </header> <p> Define una etiqueta de encabezado estructural y semántica.</p> <p><section> </section> <p> Define una sección: etiqueta estructural y semántica.</p> <p><article> </article> <p> Define un artículo: etiqueta estructural y semántica.</p> <p><div> </div> <p> Define una división de etiqueta estructural.</p> <p><footer> </footer> <p> Define un pie de página: etiqueta estructural y semántica.</p> <p><nav> </nav> <p> Define un área de navegación (como menús): etiqueta estructural y semántica.</p> <p><table> </table> <p> Define una tabla.</p> <p><tr> </tr> <p> Define una fila en la tabla.</p> <p><td> </td> <p> Define una celda de la tabla.</p> <p><ol> </ol> <p> Defina una lista ordenada.</p> <p><ul> </ul> <p> Defina una lista desorganizada.</p> <li> </li> <p> Define el factor en una lista.</p> <p><form> </form> <p> Defina una fórmula.</p> <p><input> Define los campos del formulario.</p> <p><textarea> </textarea> Define un área en la que el usuario puede ingresar texto.</p> <p><button> </button> Define un boton.</p> <p><img loading="lazy" /> Le deja introducir una imagen en su documento.</p> <p><iframe loading="lazy"> </iframe> Define un marco con contenido de otra página.</p> <p><video> </video> Delimitar un campo de vídeo.</p> <h2><span id="Como_crear_una_pagina_web_con_HTML">¿Cómo creo un lugar web con HTML?</span></h2> <figure class="wp-block-image size-large"><img loading="lazy" loading="lazy" width="1024" height="576" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20576'%3E%3C/svg%3E" alt="" class="wp-image-11024" data-lazy-src="https://todohosting.xyz/wp-content/uploads/2021/09/1633000116_46_Como-crear-una-pagina-web-desde-cero-en-html-2021.jpg" /><noscript><img loading="lazy" loading="lazy" width="1024" height="576" src="https://todohosting.xyz/wp-content/uploads/2021/09/1633000116_46_Como-crear-una-pagina-web-desde-cero-en-html-2021.jpg" alt="" class="wp-image-11024" /></noscript></figure> <p>El primer paso es crear una carpetita donde va a guardar la página en su computadora y le va a dar un nombre: ejemplo1.</p> <p>Más tarde, <strong>abre tu editor de texto</strong> Preferido (puede ser el Bloc de notas) y empiece a codificar. Acá hay un caso de codificación:</p> <p><!DOCTYPE html></p> <p> <html lang = ”es”></p> <p><Kopf></p> <p> <title> Ejemplo de la página uno

    El banner se pondrá acá.

    Acá va a estar el contenido de la página.

    El pie de página está acá

    Así es como se va a ver bloc:

    Código fuente HTML

    Luego guarde el fichero en la opción Guardar como:

    Guarda el archivo

    Necesita asignar un Apellido, en este caso: index.html y escoja la opción Todos y cada uno de los ficheros (Todos los archivos).

    Asignar nombre y género de fichero

    Una vez que se guarda el archivo, puede abrirlo y aparecerá la estructura de su lugar web.

    Construyendo el lugar web

    Desde allá, puede editar todavía más el diseño y añadir la información que desee.

    Crear lugar web con HTML

    Finalmente si lo buscas crear un lugar web en HTML y no sabes por dónde comenzar, contratar a un autónomo puede ser una gran opción alternativa. Workana es una plataforma que puede ofrecerle desarrolladores de TI especialistas en HTML, CSS y Java. Hoy en día cuentan con más de cuatro millones de perfiles que pueden asistirte.

    Además, recuerda que para crear un lugar web on-line debes registrar tu dominio y tener un plan de alojamiento activo.

    Puede empezar a edificar su lugar web el día de hoy mismo.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo Mas Información