Curso de HTML y CSS

El presente

es la Red

en evolución

cont inua

Barcelona, marzo 2013

@borjamulleras| www.md360.es | borja@md360.es

Creado en 1989-‐1991 por Tim Berners-‐Lee en el CERN con fines de compar:r información cien=fica.

En 1993 Marc Andreessen crea Mosaic antecesor de Netscape.

1994 primeros servidores en España: FIB-‐UPC y aparece Yahoo

1995-‐6 pasó a ser un negocio y MicrosoR entró.

Un poquito de historia

http://www.zakon.org/robert/internet/timeline/

¿Qué significa HTML?

HTML es la abreviatura de "HyperText Mark-up Language“:

Hiper <> lineal: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net. Texto se explica por sí solo. Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc. Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.

¿Y la X de XHTML?

Un ejemplo de HTML

Crear pequeños códigos de HTML para formatar mis entradas en la web o en el blog.

Entender como colocar los códigos de Google Analy:cs y otros servicios de la nube.

Entender como mejorar el SEO On-‐Page.

Poder personalizar algunos CMS con es:los propios.

Crear una página web.

¿Para que os sirve saber HTML y CSS?

¿Qué versión?

HTML 4.01 es del año 1999

HTML 5.0 es del año 2012.

Diferencias entre HTML 5 y 4: la esencial elimina FLASH http://www.ismarigrafica.com/web-y-otros-asuntos/10-diferencias-esenciales-entre-html4-y-html5/

¿Lo soportan los navegadores? http://www.findmebyip.com/litmus/

¿Qué versión?

Navegador usado para visitar una página web entre 1/1/2013 y 26/2/2013

¿Qué versión?

Versiones de IE usado para visitar una página web entre 1/1/2013 y 26/2/2013

¿Qué versión?

Etiquetas y atributos

Llamamos tags a las palabras reservadas que indicarán el formato del texto. Para distinguirlas de éste, serán enmarcadas entre los símbolos ‘<‘ y ‘>‘

Etiquetas llenas: ...texto normal <marca>texto afectado por la marca</marca>resto del texto...

...texto normal <B>Texto en negrita</B>resto del texto…

Etiquetas vacías: Estos elementos no requieren de la marca final, ya que

normalmente no producen un efecto sobre el texto en sí. La marca <HR> muestra una línea horizontal en la pantalla.

Etiquetas con atributos: <marca atributo1 atributo2=numerico atributo3=“alfanumerico”>texto afectado</marca>

<A HREF=“curso.htm”>Pica aquí para ir al curso</A>

No dis:nción mayúsculas y minúsculas.

No detecta espacios en blanco e ignora los saltos de línea.

Los navegadores ignoran toda e:queta que no reconozcan sin dar ningún error.

Comentarios: <!–

Todo texto y <TAGS> incluidos aquí son ignorados y no se muestran en su visualización.

-‐-‐>

Consideraciones generales HTML

<TITLE>Este es mi primer documento en HTML</TITLE> </HEAD> <BODY>

Hola <B>Mundo!</B> <HR> Este es mi primer documento en html. <!-‐-‐ si esto aparece es que me he equivocado -‐-‐>

</BODY> </HTML>

Tu primer documento HTML

Body - Atributos de BODY

La marca BODY soporta algunos atributos - OBSOLETO: TEXT: color del texto. BGCOLOR: color de fondo de la pagina.

Notación RGB http://www.javascripter.net/faq/rgbtohex.htm

http://www.josesupo.com/paleta-de-color-y-conversor-rgb-hexadecimal/comment-page-1

Body - Tipos de letra

Cabecera: <Hn>texto de cabecera</Hn> n=1,2,3,4,5,6

<FONT color=“color” SIZE=“tamaño” FACE=“tipo_de_letra”>texto afectado</FONT>

Body - Separadores bloques de texto

Body - Centrar texto

http://www.w3schools.com/tags/

Body - Imagenes

Body - enlaces

<A HREF=“”>Bloque afectado por el enlace</A>

Body - Caracteres especiales

http://ascii.cl/es/codigos-html.htm

Espacio en blanco

Acento ACUTE á,é,í,ó,ú &xacute; x=a,e,i,o,u,A,E,I,O,U

Acento GRAVE à,è,ì,ò,ù &xgrave; x=a,e,i,o,u,A,E,I,O,U

ñ &n:lde; / &N:lde;

Ç,ç Ç

€ €

<,> <, >

<TITLE>Este es mi primer documento en HTML</TITLE> </HEAD> <BODY>

Hola <B>Mundo!</B> <HR> Este es mi primer documento en html. <!-‐-‐ si esto aparece es que me he equivocado -‐-‐>

</BODY> </HTML>

Tu primer documento HTML

<TITLE>Este es mi primer documento en HTML</TITLE> <meta name="descrip:on" content=“Curso HTML y CSS"> <meta name="keywords" content="HTML,CSS, "> <meta name="author" content=“Borja Mulleras"></HEAD>

<BODY> ….

</BODY> </HTML>

HEAD - Elementos

Ejercicio

Título de la página tanto en el navegador como en la página en si.

Texto cualquiera: http://es.lipsum.com/

Texto en negrita.

Texto resaltado.

Texto en color rojo.

Con saltos de párrafo.

Una línea horizontal de separación.

Colocar una imagen centrada con un link a http://nhbarcelona.com/

Listas sin Orden

Listas con Orden

Tablas

Una tabla es una forma flexible de formatear el contenido de una página web.

Estructura de datos: formato tabla de datos.

Dar forma (estructurar) a una página web.

Tablas

Tablas - Etiquetas

Funcionamiento básico de las tablas: http://www.htmlpoint.com/guida/html_11.htm

Ejemplos de tablas: http://www.turinconenlaweb.com/blog/ejemplo-con-tablas-en-html

Tablas – atributo colspan

Tablas – atributo rowspan

Tablas – ejercicio

Formularios

Campos de introducción info

</FORM>

Formularios – Input Texto

First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname">

</FORM>

Formularios – Input Password

Password: <input type="password" name="pwd">

</FORM>

Formularios – Radio Buttons

<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female

</FORM>

Formularios – Checkbox

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car

</FORM>

Formularios – Lista desplegable

<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

</FORM>

Formularios – Texto libre

<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>

</FORM>

Formularios – Submit

</FORM>

Formularios – Ejemplo <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>

Formularios – Ejercicio

Curso de HTML y CSS

Technology

Transcript of Curso de HTML y CSS

Curso HTML+CSS

HTML, CSS y Javascript

guia trabajo n1 html css

Introducción HTML y CSS

Curso HTML y CSS (Modulo 2) -Modulo2.pdf · Curso HTML y CSS (Modulo 2) Introducción CSS (Cascading Style Sheets) ... CSS2.1, CSS3). Cada nivel de CSS se construye a partir del anterior.

Mod1 Intro HTML Css Url

Curso de HTML 5 y CSS 3” - Global Mentoring€¦ · “Curso de HTML 5 y CSS 3” Por: Ing. Ubaldo Acosta

Campus 5.0. HTML, CSS y Accesibilidad

TEÓRICO 1 - HTML - CSS

Primo. HTML & Css

Características avanzadas de HTML y CSS

1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

Manual de HTML Css

codigos Html y css

HTML Css Bases

Ut2 HTML Css

Html & Css presentation

HTML 5 y CSS 3

CURSO DURACIÓN 45 HORAS HTMl y CSS · HTMl y CSS CURSO DURACIÓN 45 HORAS Texto • Tamaño • Familia • Estilo • Peso (font-weight) • Sangria • Decoración • Espaciado

03 HTML/CSS/JA Conceptos mínimos