- Antes de Todo
- Lección 1
- Lección 2
- Lección 3
- Lección 4
Nuestro primer parrafo
Seguramente ustedes con lo curiosos que son ya le habrán echado un ojo a la pestaña CÓDIGO y vieron seguramente el código que esta ahí por defecto, paso a explicárselos brevemente. El código de la página cuando ustedes acaban de crearla es este:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6<title></title>
7 </head>
8 <body>
9 </body>
10 </html>
El código de arriba es el que aparece siempre que creen una página html en blanco, le daremos una ojeada haver que es cada línea.
El 1 y 2 es un texto estándar, aparece en todas las páginas echas por el dreamweaver, la importancia de este código, no se exactamente que parte, esque hace que los navegadores lean correctamente el html, ¿Porqué? La verdad no lo se, es algo que me di cuenta con la experiencia, si lo averiguo se los haré saber =).
En la línea 3 vemos la etiqueta <html> con algo mas adentro, como les dije anteriormente una página siempre comienza con esta etiqueta y acaba con su etiqueta de cierre que vendría a ser </html>, lo de adentro es otro código que nos pone el programa, esto nunca me afecto nada al diseño de la página pero igual lo dejamos como esta, nuestra intención es hacer de esta nuestra página principal.
De la línea 4 a la 9 sigue nuestro cuerpo de la web, como les dije en el TEMA PASADO, solo vemos de nuevo el <title><title> en la línea 6, vemos que esta en blanco, aveces aparece así <title>Documento sin Titulo</title> o en ingles <title>Untitle Document</title>, como deducirán ahí le pondremos el titulo a nuestra página, me refiero al titulo que sale en la barra azul de tu navegador, por ejemplo la que sale en esta misma página: Axside :: Como crear tu propia web - Aprendiendo a crear parrafos en dreamweaver con html.
Seguramente en algunos casos les saldrá así <title>Documento sin título</title>, vemos que titulo no esta correctamente escrito, pero no se asusten lo que pasa es que en versiones anteriores el html no reconocía acentos ni caracteres especiales, pero en las nuevas versiones como la que utilizamos pues esto no tiene importancia, pero para su conocimiento “í” significa í. ACA les dejo una pequeña de guía de los acentos y caracteres especiales por si quieren enterarse mas.
Y en la línea 10 la etiqueta de cierre de la página el ya conocido por todos (espero ) </html>.
Acabando de hacer los cambios, nuestro código debió quedar así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Ahora bien, vamos a crear nuestra primera línea de texto en nuestra página, nos ubicamos en la pestaña Código y entre las etiquetas <body></body> escribimos: “Este es el primer texto de nuestra página!! ”.
Si vamos a nuestra pestaña Diseño vemos que el mismo texto se ah escrito en la paleta de color blanco de Diseño, Ohhh magia? No! Eso es gracias al Html, ahora les vuelvo a repetir, todo lo que nosotros vamos a poner para que el público vea en nuestra web ira entre las etiquetas <body></body>.
Ahora haremos otro ejercicio, nos quedamos en la pestaña Diseño, la de fondo blanco entero, y nos ubicamos en la parte final de nuestro texto, osea después de página!!, y le damos a Enter para cambiar de línea y escribimos:”Segundo parrafo, pueden poner lo que ustedes quieran ”, tenemos 2 líneas de texto , ahora nos vamos a la pestaña Código y vemos ahora que el cuerpo de nuestro body ah cambiado, ahora se ve esto:
<p>“Este es el primer texto de nuestra página!!” </p>
<p>Segundo parrafo, pueden poner lo que ustedes quieran </p>
</body>
La respuesta es muy simple, cuando le dimos a enter, creamos un nuevo párrafo, y dreamweaver lo convirtió en html, seguramente ya sacaron la idea, la etiqueta <p> se usa para señalar y separar un párrafo de otro como lo pudimos ver.
Ahora que pasa si tu quieres pasar al siguiente reglón sin dejar uno, lo que normalmente harías en la pestaña Diseño con Shift + Enter, en el html lo podemos hacer con la etiqueta <br / >, vemos un ejemplo:
En la pestaña Código vamos poner el siguiente texto: "Wow tanto codigo, aprendiendo ahora a cambiar de linea.. Y Wualaaa ya esta!" Utilizando la etiqueta <br /> y veamos como nos queda.
Nuestro Código va así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<p>“Este es el primer texto de nuestra página!!” </p>
<p>Segundo parrafo, pueden poner lo que ustedes quieran </p>
<p>Wow tanto codigo, aprendiendo ahora a cambiar de linea.. <br />
Y wualaaa ya esta! </p>
</body>
</html>
Nos vamos a la pestaña Diseño y vemos el cambio, después de la etiqueta <br /> hubo un salto de línea, pero siempre manteniéndose en el mismo párrafo.