HTML5 CSS3 Sublime Text 3 PDF

Preview

Summary

Html5 y CSS3...

Description

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB HTML5 Y CSS3 HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.3 Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5. Para realizar esta práctica voy a usar el editor de código Sublime Text 3. Lo primero que voy a hacer es configurar el guardar de forma automática para no tener que guardar manualmente. Para hacer esto voy a la pestaña [Preferencias] y hago click en [Settings] y añado la siguiente línea de código [“save_on_focus_lost”: true] y hago click en [save].

1

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Lo siguiente que voy a hacer es instalar un plugin llamado [Emmet], pero para poder instalar plugins en sublime Text 3 hay que tener instalado programa (instalador de plugins) llamado [Package Control. Para instalar este programa escribo en Google [Package Control Sublime Text 3].

2

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Copio el código que aparece en la página web y en el editor de código [Sublime Text 3] voy a la pestaña [View] y hago click en la opción [Show console]. Ahora pego el código en la parte inferior y hago click en [Enter]. Después de hacer esto en la pestaña [Preferences] aparecerá la opción [Package Control].

Después de hacer esto en la pestaña [Preferences] aparecerá la opción [Package Control]. En la pestaña [Preferences] hago click en [Package Control] yescribo [Install Package]

3

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Para ocultar la consola hago click en la pestaña [View] y otra vez click en [Hide Console]. Aparecerá un lista con todos los paquetes que puedo instalar, en este caso quiero instalar el paquete [Emmet], así que escribo [Emmet] y hago click para instalar el plugin [Emmet].

Para comprobar que el paquete se ha instalado correctamente voy a la pestaña [Preferences] y en la opción [Package Settings] puedo comprobar que aparece el plugin [Emmet]. Ahora voy a realizar algunos ejemplos para ver como funciona el plugin [Emmet]. Para escribir la estructura completa de un documento [html] escribo [html:5] o y presiono la tecla de tabular.

4

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Si quiero añadir una etiqueta [header] y una etiqueta [p] escribo [header+p] y presiono la tecla de tabular.

Como podemos comprobar aparecen las dos etiquetas en la estructura del documento [html] sin necesidad de añadir una a una cada una de estas etiquetas. Son etiquetas hermanas, la etiqueta [p] no está dentro de la etiqueta [header] porque he escrito [header+p].

5

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Para añadir elementos o etiquetas padres que contengan etiquetas hijas utilizo el sigo de “mayor que” [>].

Como podemos comprobar ahora aparecen las dos etiquetas sin necesidad de añadir una a una cada una de estas etiquetas, pero la etiqueta [header] contiene una etiqueta [p].

6

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Puedo hacer esto con más elementos o etiquetas. Si por ejemplo quiero añadir una etiqueta [footer] que contenga una etiqueta [div] y que esta etiqueta [div] contenga una etiqueta [p] escribo [footer>div>p] y presiono la tecla de tabular.

Como podemos comprobar vuelven a aparecer las etiquetas en la estructura del documento [html] sin necesidad de añadir una a una estas etiquetas.

7

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Si por ejemplo quiero generar tres enlaces escribo lo siguiente [a*3]. Si quiero que contenga texto de enlace escribo lo siguiente [a{texto deseado}*3 y presiono la tecla de tabular.

Como podemos comprobar vuelven a aparecer las etiquetas en la estructura del documento [html] sin necesidad de añadir una a una estas etiquetas.

8

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Si quiero añadir una etiqueta de lista [ol] o [ul] que contenga por ejemplo tres etiquetas [li] con texto escribo lo siguiente [ol>li{Texto deseado}*3] o [ul>li{Texto deseado}*3].

Como podemos comprobar vuelven a aparecer las etiquetas en la estructura del documento [html] sin necesidad de añadir una a una estas etiquetas.

9

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Si tengo por ejemplo una etiqueta [p] y quiero añadir a esta etiqueta un atributo [id] escribo lo siguiente [p#nombre_id] y presiono la tecla de tabular(los atributos [id] son únicos y no se pueden repetir) en los atributos de clase varias etiquetas pueden pertenecer a una misma clase pero con los atributos [id] no se puede.

Como se puede comprobar aparece la etiqueta [p] en la estructura del documento [html] con el atributo [id] que le he asignado [emma].

10

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB SI tengo por ejemplo una etiqueta [div] y le quiero asignar el atributo clase escribo lo siguiente [div.nombre_clase] y presiono la tecla de tabular.

Como se puede comprobar aparece la etiqueta [div] en la estructura del documento [html] con el atributo [clase] que le he asignado [daniel].

11

DANIEL POMPA PAREJA 2ª SMR APLICACIONES WEB Con Sublime Text 3 podemos tener vista múltiple. Para hacer estos voy a la pestaña [View] y en la opción [Layout] selecciono las columnas (hasta 3) o filas (hasta 2) que quiero tener en el editor de texto. Esta opción es muy útil para ahorrar tiempo y simplificar el trabajo, porque por ejemplo con dos columnas en la parte de la izquierda puedo tener el archivo que contiene código [HTML] y en la parte de la derecha el archivo que contiene código (estilos) [CSS]. Para generar el texto de ejemplo escribo [lorem] y presiono la tecla de tabular.

Para insertar caracteres especiales con HTML5 puedo utilizar esta dirección web: dev.w3.org/html5/html-author/charref

12...