Abre la aplicacion del NotePad ++ y vamos a empezar a programar.
Primero iremos al menu principal y donde le damos a "Archivo" ("File" si lo tienes en ingles), luego a "Nuevo" y se nos habra creado un nuevo documento.
Ahora debemos indicarle al editor, en que lenguaje de programacion vamos a programar. Nos dirigimos al menu principal y elegimos "Lenguaje", luego elgimos la "H" y ahi dentro elegimos "HTML", el documetno ya esta preparado para programar en HTML.
Ahora vamos a escribir la siguiente estructura:
<html>
<head>
<head>
<body>
</body>
</html>
Ya tenemos la estructura basica. Ahora dentro de las etiquetas <head> escribimos lo siguiente:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
</body>
</html>
Lo que hemos puesto entre las etiquetas <title> y dentro de la cabecera <head>, es un titulo que solo aparecera en la pestaña de nuestro navegador.
Ahora, vamos a guardar este documento. Ve a "Archivo" y "Guardar como", lo vamos a guardar con el nombre de "miweb" y con extension "html", quiere decir que lo guardaremos de esta forma "miweb.html", guardalo en tu escritorio.
Si te fijas, en tu escritorio aparece un icono que es el documento que has guardado y tiene la forma de tu navegador por defecto. Si haces doble click y lo habres, veras que la hoja de tu documento esta totalmente en blanco, pero si miras en la pestaña de ese documento, veras que pone "Pagina de inicio", eso se encuentra en la cabecera de nuestro codigo.
Ahora vamos a programar en las etiquetas <body>. Escribe lo siguiente:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
Hola, esta es mi primera pagina web
</body>
</html>
Lo guardas, o sea "Archivo" y "Guardar", este sustituira al que ya tienes guardado. Si lo ejecutas ahora veras que en tu navegador pone el texto que has escrito entre las etiquetas <body>.
Sin embargo, si escribes lo siguiente lo guardas y lo ejecutas...
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
Hola, esta es mi primera pagina web
Y esto es otra linea de texto
</body>
</html>
Veras como el texto que has puesto abajo, aparece a continuacion del primer texto. HTML no ha considerado que hayas puesto un intro o salto de linea, para conseguir hacer un salto de linea, utilzamos las etiquetas <br/> y en este caso si te das cuenta, esta etiqueta no tiene etiqueta de cierre.
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
Hola, esta es mi primera pagina web <br/>
Y esto es otra linea de texto
</body>
</html>
Aqui tambien podemos poner comentarios como lo hacemos en Java, y se consigue con los simbolos <!-- y -->, de esta forma lo que escribamos ahi dentro, solo sera para el programador, asi:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
<!-- Esto es un comentario para el programador -->
Hola, esta es mi primera pagina web <br/>
Y esto es otra linea de texto
</body>
</html>
Tambien podemos centrar el texto con las etiquetas <center>, y ten en cuenta, que se centrara todo lo que este entre las etiquetas, prueba ha poner las etiquetas de varias maneras, yo te las voy a poner asi:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
<!-- Esto es un comentario para el programador -->
<center>Hola, esta es mi primera pagina web <br/>
Y esto es otra linea de texto</center>
</body>
</html>
Tambien podemos poner un separador horizontal que nos divida partes de documento y utilizan las etiquetas <HR>.
Vamos a poner una linea horizontal debajo del ultimo texto, acuerdate que debes poner un salto de linea para que no aparezca a continuacion del texto:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
<!-- Esto es un comentario para el programador -->
<center>Hola, esta es mi primera pagina web <br/>
Y esto es otra linea de texto</center>
<br/>
<br/>
<hr>
</body>
</html>
Los separadores horizontales se pueden modificar en anchura de dos formas, la primera por tanto por ciento:
<hr width="60%">
Y la otra forma, por pixeles:
<hr width="250">
Tambien podemos situar el separador tanto a la izquierda, derecha como al centro:
<hr width="50%" align="right">
<hr width="50%" align="left">
<hr width="50%" align="center">
Pruebalo, por ejemplo:
<html>
<head>
<title>Pagina de inicio</title>
<head>
<body>
<!-- Esto es un comentario para el programador -->
<center>Hola, esta es mi primera pagina web <br/>
Y esto es otra linea de texto</center>
<br/>
<br/>
<hr width="60%" align="right">
</body>
</html>
Tambien podemos modificar su espesor de la siguente forma:
<hr size="30">
Pruebalo.
Y si queremos que sea una linea solida, añade lo siguiente:
<hr size="25" noshade>
Pruebalo.