miércoles, 26 de febrero de 2020

Página web básica - Curso HTML 5 Básico - Capítulo 3

Cómo crear una página web básica

página web básica


Etiquetas básicas en todo documento HTML 5:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Etiqueta <!doctype html>

Esta etiqueta especifica el tipo de documento, en este caso HTML.

Etiqueta <html>

El documento HTML empieza con la etiqueta <html> y termina con su respectivo cierre </html>.

Esta etiqueta es la que encapsula a las etiquetas <head> y <body>.

Etiqueta <head>

Es la cabecera de la página. Aquí colocamos cosas cómo las etiquetas, enlaces a páginas externas, el título de la página, etc.
Lo que coloquemos aquí no se va a mostrar al usuario que visite nuestra página.

Etiqueta <title>

Se coloca siempre dentro de las etiquetas head. Especifica el título de la página.

Etiqueta <body>

Es la parte visible del documento HTML. Esta es la parte que va a ver el usuario.
Aquí escribirás el texto de la página, las imágenes, los vídeos, los botones, etc.

viernes, 14 de febrero de 2020

Tu primera página web - Curso HTML 5 Básico - Capítulo 2

Tu primera página web

Tu primera página web


En este capítulo verás cómo crear una simple página web y guardarla.



Yo a lo largo del curso voy a utilizar Dreamweaver, pero tú puedes utilizar el que más te guste. Si no sabes cuál elegir, te recomiendo que leas el capítulo anterior: http://bit.ly/2H8zL6I

El primer paso para crear una página web es hacer click en Archivo > Nuevo...
página nueva Dreamweaver
Haga click en la imagen para ampliarla
A continuación debes crear un nuevo archivo HTML. Fíjate que esté seleccionada la versión HTML 5 como en la imagen.




Crear nuevo archivo html 5
Haga click en la imagen para ampliarla
Dreamweaver me ha autogenerado todas estas etiquetas HTML, que son las básicas en toda página, con lo que ya me he ahorrado escribirlas.

Haga click en la imagen para ampliarla
Para terminar con este capítulo voy a crear un simple párrafo para comprobar que la página funciona correctamente. Para crear un párrafo de texto debes utilizar las etiquetas <p> de apertura y de cierre </p> tal y como se muestra en el código de ejemplo.



Estas etiquetas sólo funcionan si están escritas entre las etiquetas <body></body>


Ejemplo de párrafos HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
 
 <p>Este es mi primer párrafo.</p>
 
</body>
</html>

Ahora voy a cargar esta página en el navegador para ver el resultado. Para que funcione, primero debes guardar la página.

cómo guardar página web
Haga click en la imagen para ampliarla.

Una vez guardada, puedes abrir el archivo con el navegador o si utilizas Dreamweaver pulsar la tecla F12.


párrafo HTML

sábado, 8 de febrero de 2020

Los mejores editores web - Curso HTML 5 Básico - Capítulo 1

Los mejores editores web

Editores web


Bienvenido/a a este curso desde cero de HTML5 básico.
Este curso es ideal para quienes no poseen nada de conocimientos sobre HTML.



Empecemos con lo más básico, los editores web. Estos son los que te recomiendo. Si crees que debería haber un editor que no aparece en esta lista y merece estarlo, te invito a que me escribas un comentario y lo pondré junto a los demás.

Dreamweaver logoNota: puedes escribir páginas web en un editor de texto como el bloc de notas, no obstante, no ofrece ningún tipo de ayuda ni está preparado para páginas web. No obstante, lo puedes utilizar puntualmente para editar pequeñas cosas cuándo sepas suficiente HTML.

1- Dreamweaver

Este es mi editor favorito, no voy a engañarte, de hecho, lo utilizo en todos mis vídeos de YouTube con HTML.

Dreamweaver tiene grandes ventajas, como las ayudas y sugerencias que va ofreciendo a medida que escribes.



Con este editor tenemos todo lo necesario para escribir en los diferentes lenguajes de programación disponibles para crear sitios web.

sublime text logoLa principal desventaja es que se trata de un software comercial, por lo que deberemos pagar por su licencia.

2- Sublime text


Sublime text es un editor de texto y código fuente que a pesar de necesitar licencia para su uso continuado, su versión de evaluación permite su uso sin fecha de caducidad, algo así como WinRar.

Es mucho más ligero que Dreamweaver, por lo que su instalación pesa poquísimo y su ejecución es muy rápida.



Además, debo destacar que tiene muchas opciones de personalización.

notepad ++ logo3- Notepad++

Notepad ++ es como un bloc de notas con superpoderes.

Sencillo, rápido y eficiente, estas son algunas de las ventajas que ofrece este editor.

Atom logoOtra cosa a destacar es la cantidad de lenguajes de programación diferentes que es capaz de identificar. Podemos hacer casi de todo con él.

4- Atom

Esta maravilla de editor está desarrollado por nada más y nada menos que GitHub, por lo que solo sabiendo esto, ya sabemos que es una apuesta segura.

Atom soporta muchos lenguajes de programación, no solo los de desarrollo web, por lo que si además de sitios web diseñas aplicaciones, Atom puede ser tu entorno favorito.

Ya sabes, si crees que tu editor web favorito debería estar aquí, defiéndelo en los comentarios.