Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

F5 Masticable sobre HTML y CSS

1,194 views

Published on

Presentación de Caro y Capo

Published in: Education
  • Be the first to comment

  • Be the first to like this

F5 Masticable sobre HTML y CSS

  1. 1. Nuestro primer F5 MasTICable <br />17.Abril.2011<br />
  2. 2. ¿De qué va?<br />Dinámica: Tecnologías en escena<br />¿Qué significan todas esas siglas?<br />HTML<br />XHTML<br />CSS<br />Lenguajes de programación (PHP)<br />Bases de Datos (SQL)<br />Herramientas que nos echan una mano (para Firefox):<br />Firebug<br />ColorZilla<br />Manos a la obra<br />Código fuente de una página<br />Cambiar un CSS<br />
  3. 3. HTML<br />Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto)<br />Lenguaje de marcado predominante para la elaboración de páginas web<br />Describe la estructura y el contenido en forma de texto<br />Complementa el texto con objetos (como imágenes).<br />HTML se escribe en forma de etiquetas (tags), rodeadas por corchetes angulares (<,>). Por ejemplo: <b> para negrita. Toda etiqueta que se abre debe cerrarse. Para cerrar un tag se usa una / antes. Ejemplo: <b>Texto en negrita</b><br />HTML puede describir, hasta un cierto punto, la apariencia de un documento (CSS hace la tarea más fácil y con mejores resultados).<br />Un HTML puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML<br />
  4. 4. XHTML<br />Acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto)<br />Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web<br />Su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. <br />Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas<br />
  5. 5. Diferencias entre HTML y XHTML<br />Algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. <br />Los elementos vacíos deben cerrarse siempre: <br />Incorrecto: <br><br />Correcto: <br></br> o <br/> o <br /><br />Los elementos no vacíos también deben cerrarse siempre: <br />Incorrecto: <p>Primer párrafo<p>Segundo párrafo<br />Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p><br />Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero). <br />Incorrecto: <em><strong>Texto</em></strong><br />Correcto: <em><strong>Texto</strong></em><br />Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). <br />Incorrecto: <tdrowspan=3><br />Correcto: <tdrowspan="3"><br />Correcto: <tdrowspan='3'><br />Los nombres de elementos y atributos deben ir en minúsculas. <br />Incorrecto: <A HREF="http://www.domname.com">Domname</A><br />Correcto: <a href="http://www.domname.com">Domname</a><br />
  6. 6. CSS<br />Hojas de estilo en cascada (en inglés Cascading Style Sheets)<br />Lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).<br />La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.<br />Tres tipos de estilos<br />hoja de estilo externa<br />hoja de estilo interna<br />estilo en línea<br />
  7. 7. PHP<br />Acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools)<br />Lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. <br />Es un lenguaje multiplataforma.<br />Orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.<br />El código fuente escrito en PHP es invisible al navegador web y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable.<br />Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.<br />PHP 5.3.6 (7 de marzo de 2011)<br />
  8. 8. SQL<br />Lenguaje de consulta estructurado o SQL (por sus siglas en inglés structured query language) <br />Lenguaje que permite acceder a bases de datos relacionales que permite especificar diversos tipos de operaciones en éstas<br />Permite efectuar consultas con el fin de recuperar -de una forma sencilla- información de interés de una base de datos, así como también hacer cambios sobre ella.<br />Ejemplo de una sentencia INSERT de SQL para agregar uno o más registros a una (y sólo una) tabla en una base de datos relacional:<br /> INSERT INTO ''tabla'' (''columna1'', [''columna2,... '']) VALUES (''valor1'', [''valor2,...''])<br />
  9. 9. El mejor recurso para “cacharrear”<br />W3Schools Online Web Tutorials<br />http://www.w3schools.com/<br />Tutoriales para:<br />HTML<br />XHTML<br />CSS<br />JavaScript<br />SQL<br />PHP, etc., etc.<br />
  10. 10. Agradecimientos<br />Wikipedia :-)<br />

×