Introducción a HTML y CSS

Comenzamos esta sección con una programación sencilla, una introducción a HTML y CSS (hojas de estilo en cascada), su compañera amiga. Como probablemente sabéis se utilizan de cara al diseño de páginas web.

Introducción a html y css
Aprender html y css

El uso de html, ha ido evolucionando por necesidad hasta llegar a su versión HTML5, ahora que escribo este post. CSS nos permite homogeneizar todos los formatos para las distintas páginas que componen una web. En la actualidad, nos encontramos en su versión 3.

Introduccion

El desarrollo se realiza en base a una parte cliente y otra servidor
Parte cliente.

  • HTML + CSS
  • JavaScript + DOM (Document Objet Model)
  • Parte Servidor (Backend)
  • Lenguajes de script (php, asp.net,JSP,Perl y Coldfusion)
  • Diseño y desarrollo de la Base de datos.
  • Seguridad.

Estructura Principal <>

Inicialmente podemos escribir código html en cualquier editor de texto. Si estamos en Windows, podemos utilizar el Bloc de Notas. Al guardar debemos especificar la extensión y poner preferiblemente antes de guardar como tipo UTF-8
Algunos ejemplos de etiquetas:

Etiquetas comunes

En html, los elementos se pueden anidar; es decir meter unos dentro de otros, aunque siempre respetando unas reglas que iremos viendo.
etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).

Principales etiquetas:

  • <head> para información sobre el documento
  • <div> división dentro del contenido
  • <a> para enlaces
  • <strong> para poner el texto en negrita
  • <em> define textos enfatizados (en cursiva)
  • <br> para saltos de línea
  • <H1>…<H6> para títulos dentro del contenido (y van del 1 al 6)
  • <img> para añadir imágenes al documento
  • <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
  • <p> para parágrafos
  • <span> para estilos de una parte del texto.

Ejemplo de página

  • <html> Etiqueta principal raid
  • <head> Cabecera, metadatos, instrucciones
  • <title>Esto es el t&iacute;tulo de la p&aacute;gina. Va anidado dentro de la head</title>
  • </head>
  • <body>
  • Aquí va el contenido visible y bajamos un renglón <br>
  • <b>Esto es negrita.</b><br>
  • <i>Y esto it&aacute;lica.</i><br>
  • </body>
  • </html>

Suscríbete si lo deseas al boletín informativo y síguenos en redes cociales