Pequeños tutoriales HTML y CSS

rollth · Septiembre 23, 2014, 06:42:27 AM

Buenas a todos, voy a hacer unos pequeños tutoriales de html y css, pasando por lo que (en mi opinion) mas se utiliza a la hora de crear una página. Iré subiendo las "clases" a este post.

Bien lo primero que se debe saber es como funciona HTML.

HTML es un lenguaje de etiquetas, es decir, todo el lenguaje que escribamos sera escrito en etiquetas, ¿pero como son esas etiquetas? Estas etiquetas se abren y se cierran de la siguiente forma.

Para abrir:

Código: html5

<p>

Para cerrar:

Código: html5

</p>

Lo que hay en medio de estas dos sera el contenido de la etiqueta.

Para crear una pagina lo que tienen que hacer es abrir el bloc de notas escribir el codigo y al terminar lo guardan con formato .html

¿Como es la estructura principal?

La estructura principal esta compuesta por una etiqueta <head>, que es donde se encuentra toda la información de la página como el idioma, donde se suele hacer referencia al css (de lo que hablare mas tarde), el titulo, etc. Y por una etiqueta <body>, que es el contenido de la página, es decir todo lo que vemos. Estas dos etiquetas estan dentro de otra etiqueta <html> que indica que todo el codigo html esta dentro de esta etiqueta. Además, por convenio se suele poner <!DOCTYPE html> al principo de todo, pero si no lo ponen la pagina funcionara igual.

Por lo tanto la estructura principal quedaria de la siguiente forma:

Código: html5


<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Esto pueden verlo en cualquier pagina dando click derecho e inspeccionar elemento.

Veamos las principales etiquetas de html que hay que aprender.

Las tres etiquetas html mas importantes (bajo mi punto de vista) son:

- <title>: Esta etiqueta es la que le da el titulo a la pagina web, es solo eso, pero sera muy importante que la conozcan.
- <h1>/<h2>.....<h6>: Estas estiquetas, desde <h1> hasta <h6>, son títulos, proporcionalmente mas grandes el <h1> es el mas grande.
- <p>: Esta etiqueta es la mas utilizada para escribir textos.

Un ejemplo de todo:

Código: html5


<!DOCTYPE html>
<html>
<head>
<title>Mi primera WEB</title>
</head>
<body>
<h1>HOLA MUNDO</h1>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
</body>
</html>

Bueno, hoy como dije voy a hablar de <div>s, imagenes y links.

Empecemos por lo primero, un <div> es una forma de dividir el codigo html en bloques para que quede facil de entender. Lo que vamos a hacer es el codigo de la primera la clase lo vamos a ampliar añadiendoles los <div>s

Código: html5

<!DOCTYPE html>
<html>
<head>
<title>Mi primera WEB</title>
</head>
<body>
<div>
<h1>HOLA MUNDO</h1>
</div>
<div>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
</div>
</body>
</html>

Los div tambien pueden ser muy utiles para alinear los textos y demas, tambien se puede elegir el ancho y largo de un texto para que no se salga, pero eso lo hare cuando nos adentremos en el css.

Código: html5

<!DOCTYPE html>
<html>
<head>
<title>Mi primera WEB</title>
</head>
<body>
<div aling="center">
<h1>HOLA MUNDO</h1>
</div>
<div>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
</div>
</body>
</html>

Lo siguiente que tengo que explicar son las imagenes, esto es muy facil, se usa la etiqueta <img src"image.jpg"> se añade en el codigo fuente (tiene que haber una imagen en la misma carpeta que se llame imagen.jpg si no no ira).

Por ultimo los links. Los links se ponen con la etiqueta <a href="link">, si quieren que sea una imagen con link hay que poner la imagen antes de cerrar la etiqueta. Aqui teneis un ejemplo de codigo html.

Código: html5

<!DOCTYPE html>
<html>
<head>
<title>Mi primera WEB</title>
</head>
<body>
<div aling=center>
<h1>HOLA MUNDO</h1>
</div>
<div>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
</div>
<div aling=center>
<a href="https://www.google.es/"><img src="imagen.jpg"></a>
</div>
</body>
</html>

Hasta aqui hoy, la proxima vez explicare los cuadros para introducir texto ademas de los botones y alternativas, no quiero hacerlo muy amplio, solo para conseguir una idea basica de este lenguaje.

Gabriela · Octubre 03, 2014, 04:24:15 AM

Interesante, para iniciarse y explorar HTML

Gracias.

G.

Pequeños tutoriales HTML y CSS

rollth

Septiembre 23, 2014, 06:42:27 AM Ultima modificación: Octubre 03, 2014, 06:23:47 AM por rollth

Gabriela

Octubre 03, 2014, 04:24:15 AM #1