jueves, 26 de noviembre de 2015

Como hacer una pigina web (HTML)


PAGINA WEB HML
Que es HTML?
El HTML es el lenguaje en la cual se hace las paginas webs.
Os enseñaré a hacer una pagina web que tengo en mi ordenador con el blog de notas, paso a paso (para saberlo tendreis que hacerlo conmigo)
1. Después de que abrais el bloc de notas empezamos por poner "<html>" al principio
<html>
2. Seguidamente ponemos "<head>" cabecera en Inglés
<html>
          <head>
3. Después ponemos este codigo que es para poner un favicon;
  " <link rel="icon" type="enlace imagen" href="favicon.ico" />"
Advertencia!! Cuando pongais el enlace de la imagen de tu ordenador no quiteis las comillas """ y no debe de haber un espacio entre el texto y las comillas
<html>
          <head>
          <link rel="icon" type="enlace imagen" href="favicon.ico" />
 4. Seguidamente teneis que poner un titulo a vuestra pagina web "<title>Titulo de la página web</title>"
<html>
          <head>
          <link rel="icon" type="enlace imagen" href="favicon.ico"/>
          <title>Titulo  de la página web</title>
5. Después de que hayas puesto el paso 4 tenemos que cerrar la etiqueta head, así "</head>"
 <html>
           <head> 
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head>  
 6. Después de haber cerrado la etiqueta head, ponemos el codigo del color del fondo "<body bgcolor="color del fondo">"
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
Advertencia!!Cuando pongais el color, debe ser en Inglés.
7. Después ponemos "<center>" para centrado.
<center>= centrado
<left>= izquierda
<right>= derecha 
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
8.En la pestaña que hayas elegido, ponemos el siguiente codigo para poner una imagen;"<img src="nombre de la imagen" width="300" height="150">"
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
9.Después cerramos la etiqueta que hayas elegido;</center>,</left>,</right>.
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
10.Después hacemos de nuevo y ponemos "<center>".
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
11.A continuación ponemos un texto como titulo "<FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>"
Colores del texto HTML 
Tipo de letra HTML: Los tipos de letras están en openOffice Writer
Tamaño de letra 
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
12. Después cerramos la etiqueta center; </center>,</left>,</right>.
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
13. Ponemos un "separador" para separar el titulo del texto, (vosotros poneis lo que querais)
<html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
14. Ponemos la etiqueta "<center>".
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
15. Después ponemos un texto;"<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?"
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?
16.Cerramos la etiqueta que hagais puesto.
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?
</center>
 17.Ponemos la etiqueta que vosotros querais <center>,<left>,<right>.
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?
</center>
<left>
18. Después ponemos un texto "<font face="tipo de letra" size="tamaño de letra" color="color de letra">texto"
 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?
</center>
<left>
 <font face="tipo de letra" size="tamaño de letra" color="color de letra">texto
19. Finalmente cerramos el codigo html "</html>".
 

 <html>
           <head>
           <link rel="icon" type="enlace imagen" href="favicon.ico"/>
           <title>Titulo de la pagina web</title>
           </head> 
<body bgcolor="color del fondo">
<center> 
                      <img src="nombre de la imagen" width="300" height="150">
</center>
<center>
 <FONT FACE="tipo de letra" SIZE=tamaño COLOR="color del texto ">IVAN HEREDIA PLANAS</FONT>
</center>
___________________________________________________________________________________
<center>
<font face="tipo de letra" size="tamaño de letra" color="color de la letra">como empezó todo?
</center>
<left>
 <font face="tipo de letra" size="tamaño de letra" color="color de letra">texto
</html>
Como guardarlo
1. clicamos "guardar como"

2. Guardamos donde querais, pero cuando pongais el titulo al final teneis que poner ".html"
ej: su titulo.html y seleccionar todos los archivos 
Espero que os guste
Navegador recomendado: firefox o google chome

No hay comentarios:

Publicar un comentario

Cute Red Pencil