Aprender a hacer una sencilla web paso a paso partiendo de cero.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 20
Visitas el mes pasado: 21
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
El texto puede insertarse directamente sin etiqueta, tal como hicimos en la lección anterior; sin embargo eso no es recomendable, ya que nos sería más difícil darle el aspecto que queremos.(color, tamaño, tipo de letra, etc.). El lenguaje HTML dispone de una serie de etiquetas para insertar el texto.
Etiquetas de título: Las etiquetas para insertar títulos son <h1> <h2> <h3> <h4> <h5> <h6>. Hay por tanto seis etiquetas diferentes para insertar títulos, cada una de ellas debe ir seguida del texto a insertar y su correspondiente etiqueta de cierre, que cómo explicamos en la lección anterior consiste en la misma etiqueta con la barra inclinada al principio:</h1> </h2> ... Todas ellas nos dan el texto en negrita, y el tamaño de letra va del más mayor en <h1> a más pequeño en <h6>; aunque, como veremos más adelante, el tamaño puede cambiarse.
Etiqueta de párrafo: para insertar párrafos de texto utilizaremos la etiqueta <p>... </p>. Esta etiqueta nos separa un párrafo de otro. Aunque escribamos el texto en el bloc de notas u otro editor de texto separado en párrafos, si no lo separamos con estas etiquetas, el navegador interpretará que es parte del mismo párrafo, y lo escribirá seguido. Por tanto, cada párrafo debe abrirse con la etiqueta <p> seguido del texto de ese párrafo, y acabar con la etiqueta </p>. Como ocurre con los títulos, más adelante aprenderemos a cambiar el aspecto que tienen los párrafos. (tipo de letra, tamaño, color de letra, etc.)
Después de esto, vamos a seguir construyendo nuestra página; para ello abre la carpeta en la que lo has guardado. (si lo guardaste donde te indicamos estará en "Mis documentos / mi_web / index). Pulsa en el archivo index.html con el boton derecho del ratón. Se abrirá un cuadro, en él pulsa en "abrir con" y luego en "Bloc de notas". Si en el último cuadro no encuentras entre los programas que se ofrecen el Bloc de notas, pulsa en "elegir programa" y busca en el nuevo cuadro el bloc de notas.
otra opción para abrir el archivo es abrir el bloc de notas (tal como hemos expicado en el punto anterior). Pulsas luego en Archivo / Abrir. Buscas la carpeta en donde está nuestro archivo HTML. Si no te aparece el archivo, en el cuadro inferior , donde pone "tipo" pulsa en la flecha de la derecha, y después en "todos los archivos", verás que aparece el icono del archivo en el cuadro principal. Haz doble clic sobre él para abrirlo.
ahora que ya has abierto tu archivo con el bloc de notas, vamos a cambiar algunas cosas: borramos donde pone Mi primera web y escribimos lo siguiente:
<html>
<head>
<title> Mi Web</title>
</head>
<body>
<h1>Mi Primera Web</h1>
<h2>Bienvenido a mi Web:</h2>
<p>Hola, estoy aprendiendo a hacer Webs y este es mi primer párrafo, no es muy largo, pero es un párrafo.</p>
<p>Este ya es mi segundo párrafo. Procuraré que sea más largo que el primero, así que os voy a contar qué he aprendido hasta ahora. De momento he aprendido que el código de cualquier Web va encerrado dentro de la etiqueta HTML . Dentro de esta etiqueta está en primer lugar la etiqueta HEAD , y dentro de ésta ponemos el título en la etiqueta TITLE; y en segundo lugar la etiqueta BODY donde ponemos lo que queremos que se vea en la Web: de momento el texto. </p>
</body>
</html>
Como habeis podido observar el texto que hay que insertar es el que esta escrito en color azul, el resto del texto es el que ya teníamos. De aquí en adelante pondré el texto nuevo para insertar en azul, para distinguirlo del que ya teníamos.
Te recomiendo que sigas los pasos tal y como aquí se indican. Si quieres hacer algo distinto, (poner más párrafos, experimentar con las clases de titulos que hay, etc.) Te recomiendo que abras otra carpeta llamada, por ejemplo, "mis_experimentos_web" donde practiques por tu cuenta lo que aquí vas aprendiendo y otras cosas que se te ocurran; ya que si no sigues los pasos tal como se te dicen dificilmente podrás seguir el curso.
Otra recomendación es no uses el truco de "pegar y copiar", ya que si copias directamente el código que te doy a tu bloc de notas, es probable que no acabes entendiendo bien lo que hacemos, con lo cual no estamos aprendiendo a crear páginas Web.
Si has seguido los pasos indicados, tu Web debe verse como en el siguiente enlace:
Si tu página no te aparece igual que la nuestra, es que habrás tenido algun fallo. Repasa bien las etiquetas, que tengan todas su apertura y su cierre.
Como puedes ver, el aspecto del texto de tu Web, todavía no se diferencia mucho del del Bloc de notas, pero pronto aprenderemos a darle forma, centrar los títulos, dejar márgenes a los lados, en resumen, dar un aspecto más agradable a la página.
para ello vamos al siguiente paso: El formato del Texto
Estilo del texto: El archivo CSS
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com