Resumen de cómo crear una página web en html y JavaScript
Respuestas a la pregunta
Respuesta:
Los documentos HTML son archivos con extensiones .html o .htm y pueden ser visualizados en cualquier navegador. El cual hace la lectura del archivo y renderiza el contenido para que los usuarios puedan verlo.
Ese documento puede ser creado a partir de cualquier editor de texto de que dispongas en tu computadora.
Los editores WYSIWYG: – What You See Is What You Get (sí… ¡así se llaman!). Son aquellos que te permiten ver cómo el código se muestra en una página web, mientras la estás desarrollando.
Para los que están empezando, los editores WYSIWG son muy recomendados, ya que no se requiere ninguna experiencia en codificación. Como ejemplo, tenemos estos editores:
Atom;
Sublime;
Notepad ++;
Brackets.
¿Ya definiste un asunto para tu primera página web en HTML? ¿No? No te preocupes, es tu sitio web así que puede crear esa idea que tanto te gusta, hablar de tí o usar algún tema como ejemplo. En este caso, hablaremos de los editores de texto.
¿Preparado? ¡Empecemos el proyecto!
Para hacer tu primera página web en HTML, escogimos el editor Atom. Pero tú puedes usar el que tengas instalado en tu computadora.
Abre tu editor de texto y crea un nuevo documento, en el cual empezaremos a trabajar.
En primer lugar, vamos a escribir el siguiente bloque:
sitio-web-en-html-hostgator
Ahora, vamos a la explicación paso por paso del código.
<!DOCTYPE HTML>: Es la etiqueta que define que el documento es HTML;
<HTML>: Es la principal etiqueta de una página HTML;
<HEAD>: Es la etiqueta que abre el bloque de información sobre la web;
<TITLE>: Acá, escribimos el título genial que daremos a la página web. Ese que aparece en el borde de la ventana del navegador.
¡Importante! En la estructura del código HTML, al “abrir” una etiqueta es, muy importante que la cierres. Usando la barra “/” para decir al código que aquel bloque de informaciones ha terminado.
Hoy, sabemos que no basta crear una web y subirla a Internet, sino que debemos facilitar el camino para que la encuentren. Por eso, vamos a usar en las etiquetas:
<META =”description”>: Informa a los buscadores, por medio de la descripción que creaste, de que se trata tu web;
<META =”keywords”>: Sirve para que tu web sea encontrada por medio de estas palabras clave.
Listo, creamos la principal información de tu página web y, ahora, vamos a elaborar un contenido para ella. Para eso, vamos a trabajar en la etiqueta <BODY>.
Creando un contenido para tu página web
Antes de crear el texto visible para el usuario, vamos a guardar el documento.
Al grabar el contenido, lo nombramos index.html, dónde index es el nombre del documento y .html es la extensión que define que se trata de un archivo HTML. ¿Hecho? ¡Seguimos!
Ahora, dentro del bloque <BODY> </BODY>, vamos a crear un texto para saludar al visitante de tu sitio web.
<h1> Ejemplos de editores de texto WYSIWG </h1>
La etiqueta <h1> define el título de nivel 1 y se puede extender hasta el <h6>.
<p> Son editores que te permiten ver cómo el código se muestra en una página web en marcha. Para los que están empezando, los editores WYSIWG son muy recomendados, ya que no se requiere ninguna experiencia en codificación. </p>
Cuando necesitamos abrir un párrafo, tenemos que hacerlo por medio de la etiqueta <p>. En este caso, escribimos una breve introducción para que el lector sepa de lo que estamos hablando.
<h2> 4 editores de texto WYSIWG </h2>
<ol>
<li>Atom</li>
<li>Sublime</li>
<li>Notepad ++</li>
<li>Brackts</li>
</ol>”
Para crear una lista con los nombres de los editores, usamos el elemento <ol> – que define el bloque de listas ordenadas – y el <li> – que debe ser usado para cada ítem de la lista.
Agregando enlaces y colores al texto
Pues, ¡muy bien! Una página web apenas en blanco y negro no llama mucho la atención, ¿verdad? Entonces, vamos a agregar unas líneas más de código para hacer tu web un poco más atractiva.
Color
Para dar color a tus textos, hay que indicarlo entre las etiquetas:
<span style=”color:red“> </span>
sitio-web-en-html-hostgator-3
Pero hay una regla para definir el color del texto, además de las etiquetas: escribirlo de manera correcta.
Para eso, puedes consultar el HTML Color Picker de W3CSchools, elegir el color que más te gusta y copiar el código HEX – o escribir el nombre en la etiqueta.
¿Ves? No es para nada complicado.
Enlaces
Otra etiqueta muy importante es la <a> </a>, que agrega un enlace al texto colocado entre ellas.
Por ejemplo, si queremos que el visitante sea direccionado hacia otro sitio u otra pestaña de tu propia web, simplemente agregamos un texto entre esas etiquetas de esta manera:
<a target=”_blank” href=” [url del enlace]”> Texto del enlace </a>
La información “_blank” quiere decir que, al hacer clic en el enlace, la página se abre en una nueva pestaña. Pero si deseas que abra en el mismo documento, tienes que cambiar esa información por “_self”.
Terminando tu página web
Explicación: esta es la informacion que pude encontrar espero que te ayude