Curso de HTML y CSS
Hola a todos amigos, esta ves estas en la 1 parte del curso de Como hacer una pagina web, donde aprenderemos todo sobre HTML y CSS, aprenderemos a darle color y estilos a un texto, atraves de css (estilos en cascada).
Que es HTML y CSS y para que sirven?
Bueno amigos primero que todo que es HTML
HTML:(HyperText Markup Language) Es un lenguaje de marcado, osea que es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas, especialmente usado para hacer paginas web. Es usado para escribir la estructura y el contenido de una Pagina Web, se recomienda no usar para editar texto.
CSS:(Cascading Style Sheets) Es un lenguaje para definir la presentacion de un documento escritro en HTML. Este lenguaje se usa principalmente para editar el texto de una pagina web, relacionando la Hoja de estilos con el documento .html, Eso lo veremos mas adelante.
Primeros pasos con html
Bueno amigos ahora que savemos con que lenguaje vamos a trabajar, pasaremos a un nivel un poco mas alto, comenzaremos formando la estructura de nuestra pagina web. Como vieron el curso anterior, (la primera parte) vimos que un documento html tiene esta forma
<html>
<head>
</head>
<body>
</body>
</html>
Muy bien, pues como dije esto es una pagina web, Basia pero es una pagina web, Lo siguiente que aprenderemos sera agregarle un titulo, Esa barra que todos tenemos en nuestro navegador, en la parte de arriba, si usas Mozilla Firefox es la barra azul de arriba Si estas usando otro navegador, Averigua donde queda la barra xD.
Muy bien la etiqueta para agregar ese titulo es <title></title>, con esto el documento html que llevariamos seria este:
<html>
<head>
<title>Esta es mi primera pagina web</title>
</head>
<body>
</body>
</html>
Muy bien, con esto si lo escribes en el bloc de notas y lo guardas con extencion .html veras un documento en blanco, lo puedes abrir con cualquier navegador.
Si lo abriste veras un documento en blanco, pero en la parte de arriba del navegador veras lo que escribiste entre <title>.
Muy bien ahora pasaremos a ver los párrafos, Los párrafos, ya creo que sabrán que es, es solo texto, nada mas. Para hacer un párrafo en nuestro documento html, usaremos la etiqueta <p></p> la cual también tiene su etiqueta de cierre correspondiente. Entonces sabiendo esto, procederemos a crear un párrafo.
<html>
<head>
<title>Esta es mi primera pagina web</title>
</head>
<body>
<p>Este es mi primer párrafo, donde pondrás todo lo que tu quieras</p>
</body>
</html>
Muy bien si guardamos nuestro documento html, nos saldrá un fondo blanco con el texto que acabamos de copiar en color negro, el cual es el color predeterminado de los párrafos, a menos que indiquemos lo contrario, Pero eso lo aprenderemos mas adelante.
Ahora pasaremos a crear los Títulos, pero estos son diferentes a los anteriores, primero por que se escriben con otra etiqueta, y segundo sirven para diferentes cosas.
Para poder escribir títulos usamos la etiqueta <h1>...<h6> Siendo el h1 el mas grande y el h6 el mas pequeño. Ahora escribiremos un titulo en nuestro documento html.
<html>
<head>
<title>Esta es mi primera pagina web</title>
</head>
<body>
<h1>Mi primera pagina web</h1>
<p>Este es mi primer párrafo, donde pondrás todo lo que tu quieras</p>
</body>
</html>
Nota: Casi nunca se usan las etiquetas <h3> a <h6> ya que las mas utilizadas son h1 y h2, las cuales sirven para tirulos y subtitulos.
Cuando veamos nuestro documento, veremos un titulo grande, en color negro, y con el texto, también en color negro pero con tamaño normal, Muy bien ya sabemos hacer títulos y texto, ahora pasaremos a ver cosas mas interesantes, Pasaremos a ver Como agregar color a nuestra pagina web para que se vea mas alegre.
Yo se que ya es muy avanzado para ustedes, pero es para terminar el curso lo mas ante posible, pero obviamente tratando de que ustedes entienda.
Creando documento css
Ahora pasaremos a crear un documento css, con el cual como vimos antes es aquel que nos ayuda a dar color, fuente y todo lo que tiene que ver con la decoración de la pagina web.
Para crear nuestro documento css abrimos el bloc de notas, y lo guardamos como .css dando en NOMBRE DE ARCHIVO: estilos.css y en TIPO DE ARCHIVO: Todos los archivos, y lo guardamos en cualquier carpeta, te sugiero que lo guardes en la misma carpeta que tienes el documento html.
Muy bien teniendo nuestro documento css podemos comenzar a ponerle color al texto que acabamos de crear, pero antes que todo tenemos que relacionar la hoja de estilos (css) con el documento html, para esto agregamos la siguiente linea:
<link href="estilos.css" rel="stylesheet" type="text/css">
Ponemos esta linea en el nuevo documento que acabamos de crear, el de css.
Ahora que hemos relacionado la hoja de estilos con nuestro documento html, podemos comenzar a escribir en el archivo css.
Lo primero que necesitamos aprender son las etiquetas que usaremos para colocar en el archivo de css, esto lo aprenderemos en el transcurso del curso.
Como ejemplo, cambiaremos de color la letra, esta tendra un color rojo, con un tamaño de letra 12 y con el tipo de letra Comic Sans MS, para hacer esto, utilizaremos una etiqueta div, la cual colocaremos en el archivo html y en el css pondremos todas sus propiedades.
<html>
<head>
<title>Esta es mi primera pagina web</title>
</head>
<body>
<h1>Mi primera pagina web</h1>
<div id="contenido"><p>Este es mi primer párrafo, donde pondrás todo lo que tu quieras</p></div>
</body>
</html>
Cuando tengamos esto, colocamos en la hoja de estilos lo siguiente:
#contenido {color: red ; font-family:Comic#Sans#MS#; size: 12px}
Muy bien con esto, la etiqueta div que encierra el parrafo, tendra un color rojo, con un tipo de letra Comic Sans MS y un tamaño de letra de 12px.
Con esto terminamos la primera parte del tutorial, estoy preparando una web donde abra todo tipo de tutoriales, de diseño web y programacion web, cuando la acabe, les dare el link y podran segir el tutorial, el cual sera mucho mas completo. Hasta otra
