El comienzo
Lección 1: ¿Como Editar en HTML?
muy buenas, deciros que voy a enseñar todo lo que he aprendido de html y css, no digo que las formas de la que lo balla a explicar sean las correctas pero procurare hacerlo lo mejor posible.
antes de empezar digo que cuando guardemos una pagina tendras que tener la extension .html por ejemplo:
mipagina.html
bueno, empecemos desde el principio aunque sea para algunos un poco aburrido. empecemos con las etiquetas basicas:
1<html>
2<head>
3<title>TITULO DE LA WEB</title>
4</head>
5<body>
6</body>
7</html>
<html></html> = es la etiqueta con la que indicamos el princio de donde vamos a empezar a poner todos nuestros codigos html, se necesita una de apertura y una de cierre.
<head></head> = es la cabecera de la pagina, donde se podra poner el codigo css y mas cosas que no se ven en la pagina pero que son importantes.se necesita una de apertura y otra de cierre.
<title></title> = es el titulo de la pagina.
<body></body> = es el cuerpo de la pagina, aqui pondremos todo le que se vera en nuestra pagina web.
intentare no pasarme nada por alto aunque se agan un poco pesados los tutoriales para aquellos que empiecen desde cero puedan entenderlo.
veamos donde saldria lo que ponemos en el <title>tutorial taringa</title>
ejemplo :
1<html>
2<head>
3<title>TITULO DE LA WEB</title>
4</head>
5<body>
6</body>
7</html>
si os fijais hay un el <title></title> esta mas adelanque que las otras etiqutas, esto es para que se vea mas limpio y nos aclaremos un poco mas a la ora de ver el codigo, eso se hace con la tela tabulacion, que esta dos teclas mas abajo del esc, y encima del bloq Mayus.
veamos una foto de como quedaria en nuestro navegador:
como podreis ver, el titulo que pusimos en las etiquetas <title></title> nos aparece arriba a la derecha.
bueno esto es algo super simple, y ahora dire un programita que ayuda mucho, se llama notepad++ y para mi gusto es el que mas me gusta, y mis ejemplos seran con el, os pondre la descarga y ya vosotros utilizais el que querais.
notepad++ : http://notepad.softonic.com/
bueno como he dicho paso a paso dire con imagenes como guardar nuestra pagina.
una vez instalado nos metemos dentro y ponemos las etiquetas principales:
1<html>
2<head>
3<title></title>
4</head>
5<body>
6</body>
7</html>
y despues damos arriba en archivo guardar como y para no tener que estar buscando elijo la primera opcion donde dice tipo, sera la que dice All types, que significa que se guardara con la extension que le pongamos, y despues de esto le damos a aceptar y las letras de nuestro programa cambiaran de color, los colores sirven para poder diferenciar el codigo que ballamos poniendo, esto sirve de mucha ayuda:
una vez visto esto empecemos con lo siguiente, que es definir algunas etiquetas, solo definire las mas utilizadas.
<b></b> = para poner texto en negrita.
<i></i> = para poner el texto en cursiva.
<center></center> = para centrar el texto.
<h1></h1> = estas etiquetas se puede decir que sirve para resaltar el titulo. esta desde el 1 el tamaño mas grande al 6 el mas pequeño.
<p></p> = sirven para crear parrafos.
<br> = para hacer un saltro de linea, en html no sirve darle al enter para hacer un salto de linea, se hace mediante esta etiqueta.
yo creo que con estas para empezar bale, para probarlas podemos probralas poniendolas en el notepadd++ y guardandolo. como ya lo teniamos guardado ya no aria falta darle al guardar como, con darle al guardar solo valdria.
ejemplo:
1<html>
2<head>
3<title>TITULO DE LA WEB</title>
4</head>
5<body>
6<b>esto esta en negrita</b>
7
8<i>esto esta en cursiva</i>
9<center>esto esta centrado</center>
10<h1>esto esta resaltado como titulo</h1>
11<p> esto es un parrafo</p>
12<p> esto es el parrafo 1</p>
13(el br hace el salto de linea)
14<p>eso es el parrafo 2</p>
15</body>
16</html>
si probramos esto quedaria asi
bueno esta parte ya finaliza, seguirá con una segunda parte, y todas serán así, procurare no saltarme nada, explicare las tablas, como crear enlaces, como cambiar el fondo de una celda al pasar el ratón por encima, ha hacer botones y cuando pases el ratón por encima cambie, eso si, esto ya sera con java, y algunas cosas mas...
bueno lo siento por los que ya se saben esto de memoria.