Curso Codeacademy HTML y CSS

Aprende Javascript con MentoringJS - Step 3

HTML (HyperText Markup Language) es el lenguaje estándar que se emplea para el desarrollo de páginas de internet. Es un lenguaje muy simple, escrito en texto plano. Su principal característica son las etiquetas o tags, las cuales estando bien anidadas, dan una estructura a la pagina y definen el contenido.

CSS (CascadingStyle Sheets) es el lenguaje de estilo que define la presentación de los documentos HTML, es decir, lo utilizaremos para definir las fuentes, colores, margenes, tamaño etc etc… de nuestro sitio web.

Antes de empezar…

En alguna ocasión el editor de texto de Codeacademy nos va a dar dolores de cabeza. El programa que utiliza para repasar la sintaxis del ejercicio antes de pasar al siguiente, puede no detectar algunos atributos definidos en la hoja de texto. Estos errores los he encontrado en los capitulos de CSS. Recomiendo utilizar el navegador Mozilla ya que es el que menos problemas me ha dado, hacer el curso en Ingles y consultar los foros. Si el error persiste recomiendo saltar ese ejercicio y continuar.

Cap.1 Introducción a HTML.

En este capitulo vamos a empezar a crear un documento HTML, poner texto, links y imágenes. La dificultad es casi nula. El objetivo es adquirir el conocimiento básico para crear un documento HTML, utilizar las etiquetas <p> y <h>, y añadir links y imágenes a nuestra pagina web.

Cap.2 Estructuras HTML. Usando las Listas.

En este capitulo vamos a aprender a hacer diferentes tipos de listas. Hay que tener claro la estructura básica de una lista. Primero abrimos una etiqueta para crearla y es donde definimos el tipo de lista que queremos,<ol> para listas ordenadas o <ul> para lista no ordenadas. Cada elemento que queremos incorporar en la lista tiene que estar dentro de la etiqueta <li>. También es posible incorporar listas dentro de listas siempre que respetemos la estructura de ambas. Al acabar este curso tenemos que saber hacer perfectamente una tabla y saber aplicar el atributo colspan y rowspan perfectamente.

Cap.3 Estructuras HTML. Tables, Divs y Spans.

En este capitulo comprenderemos la importancia que tienen estas 3 diferentes etiquetas. Nuestra estructura HTML debe utilizar una estructura ordenada. Hay que facilitar el trabajo a nuestros pobres navegadores!

Cap.4 Introducción al CSS

Si ya te estaba molando, esto ya es la caña! Vamos a empezar a darle estilo a nuestra pagina. En este capitulo vamos a ver que CSS utiliza un lenguaje distinto que HTML. No te asustes! La sintaxis que utiliza CSS es muy lógica. Vamos a ver como utilizando la etiqueta <link> vamos a incorporar un documento CSS externo a nuestra pagina y como funciona. Básicamente en la hoja CSS vamos a nombrar el elemento, abrimos corchetes, y indicamos todo el formato que queremos darle. Hay que adquirir los conocimientos básicos de como funciona la hoja de estilo CSS.

Cap.5 Clases y IDs

En este capitulo vamos a ver como no podemos dar a un elemento un formato distinto al de otros del mismo tipo o como dar un formato a un elemento igual al de otro de diferente tipo. También tenemos que saber que al tener un estilo de cascada, la definición de un elemento contra mas especifica es, el navegador mas prioridad le dara sobre otras mas genéricas, es decir, el formato de un elemento dado por un ID, siempre va a tener mas preferencia sobre un CLASS y este otro sobre uno genérico como elemento. La dificultad es baja. Tenemos que acabar este capitulo con el conocimiento básico de como declarar un ID y CLASS en la hoja de estilo y como implementarlo en los elementos de nuestra hoja de HTML.

Cap.6 Elementos de posición.

En este capitulo aprenderemos como controlar la posicion de los elementos en HTML. Vamos a ver el modelo caja de CSS. Recomiendo estudiar bien esta imagen, es la mejor que he encontrado para llegar a comprender todo esto. Hay que tener claro como funciona un bloque y sus diferentes funciones.Hay elementos que por defecto ya estan definidos como bloques. Podemos hacer de un elemento un bloque. Los bloques tienen un espacio físico dentro e nuestro documento HMTL.

Aqui acaba nuestra versión FREE de Codeacademy sobre HTML & CSS. Personalmente creo que este curso ayuda a comprender todo el funcionamiento, pero estos cocimientos deben de reforzarse con un proyecto personal independiente a cualquier actividad que hemos podido hacer aquí. Recomiendo empezar un proyecto a escala pequeña de una pagina web, con recetas de cocina, por ejemplo.

Espero que sirva de os sirva de ayuda, sin mas, HASTA OTRA MUNDO!!!!