Antes de comenzar nuestro viaje para aprender HTML y CSS es importante
entender las diferencias entre los dos idiomas, su sintaxis y una terminologa comn. A modo de resumen, HTML es un lenguaje de marcado de hipertexto creado para dar a la estructura del contenido y significado. CSS, tambin conocido como hojas de estilo en cascada, es un lenguaje de presentacin creado para dar estilo contenido y la apariencia. Para poner esto en trminos de los laicos, HTML determina la estructura y el significado del contenido de una pgina web, mientras que CSS determina el estilo y la apariencia de este contenido. Los dos idiomas son independientes el uno del otro. CSS no debe residir dentro de un documento HTML y viceversa. Tomando un poco ms este concepto, el p elemento HTML se utiliza para mostrar un prrafo de texto en una pgina web. El elemento p se utiliza especficamente aqu, ya que ofrece el mejor valor por el contenido, siendo por lo tanto el elemento ms semntica. CSS se utiliza un selector de tipo de pgina que puede determinar el color, tamao de fuente, el peso de la fuente, y otras propiedades de estilo del prrafo. Ms en esta por venir.
Trminos HTTL Comunes En nuestros primeros pasos con HTML que es probable que escuchar trminos nuevos, ya menudo extrao. Con el tiempo se volver ms y ms familiarizado con todos ellos, pero tres trminos que usted debe aprender hoy incluir etiquetas, elementos y atributos. ELEMENTOS Los elementos son designadores que definen los objetos dentro de una pgina, incluyendo la estructura y contenido. Algunos de los elementos ms populares incluyen h1 travs h6, p, a, div, palmo, fuerte y em. 1. <a> elements TAGS
Elementos se hacen a menudo de mltiples conjuntos de etiquetas, identificados como abrir y cerrar las etiquetas. Etiquetas de apertura marcan el comienzo de un elemento, como <div>. Etiquetas de cierre marcan el final de un elemento y comienzan con una barra inclinada, como </ div>. 1. <a> . </a> tags
ATRIBUTOS Los atributos son propiedades que se utilizan para proporcionar enseanza adicional a los elementos dados. Ms comnmente, los atributos se utilizan para asignar un id, class, o el ttulo de un elemento, para dar elementos de los medios de comunicacin una fuente (src), o para proporcionar una referencia de hipervnculo (href).
Documento HTML Estructura y sintaxis Todos los documentos HTML tienen una estructura necesaria que incluya la siguiente declaracin y etiquetas: tipo de documento, html, cabeza y cuerpo. La declaracin DOCTYPE se utiliza para instruir a los navegadores web que versin de HTML se est utilizando y se coloca en el comienzo del documento HTML. Tras la declaracin de tipo de documento, etiquetas html significan el principio y el final del documento. El encabezado del documento se utiliza para describir los metadatos, el ttulo del documento, y enlaces a los archivos externos. Cualquier contexto se incluye dentro de las etiquetas de la cabeza no es visible en la pgina web en s. Todo el contenido visible en la pgina web caern dentro de las etiquetas del cuerpo. La estructura general del documento HTML se parece a lo siguiente:
Trminos comunes de CSS Adems de los trminos HTML, hay algunos trminos comunes de CSS que usted querr familiarizarse con. Cuanto ms se trabaja con HTML y CSS de las ms estos trminos se convertir en segunda naturaleza. Selectores
A selector determines exactly which element, or elements, the corresponding styles will be applied to. Selectors can include a combination of different IDs, classes, types, and other attributes all depending on how specific you wish to be. Selectors can be identified as everything that comes before the first curly brace, {.
Propiedades
Una propiedad determina el estilo que se aplicar a un elemento. Las propiedades pueden ser identificados como el texto que viene inmediatamente antes de los dos puntos. Hay un abundante nmero de propiedades que se pueden utilizar, y continuamente se estn aadiendo otros nuevos. Valores Un valor determina el comportamiento de una propiedad. Los valores pueden ser identificados como el texto en el medio de los dos puntos y punto y coma. CSS Structure & Syntax CSS funciona mediante el uso de selectores para aplicar estilos a los elementos HTML. Todos los estilos en cascada CSS, que permite diferentes estilos que se heredan de mltiples elementos.
Como un ejemplo, es posible establecer un estilo para todo el texto en una pgina para ser de un color especfico, tamao, y peso. A continuacin, mediante un selector ms especfico que el estilo puede ser sobreescrito por un elemento nico. Fig. 1 CSS sintaxis de esquema.
La siguiente sintaxis muestra cmo se aplicaran a todos los estilos de prrafo.
1. p { 2. color: #ff0; 3. font-size: 16px; 4. }
Long vs. Short Hand En CSS hay varias maneras diferentes para declarar los valores de una propiedad. Con CSS mano larga apila mltiples declaraciones, uno tras otro para cada propiedad y su valor. Con CSS taquigrafa utiliza una propiedad y la lista de varios valores. Lo mejor es usar CSS taquigrafa, ya que requiere menos cdigo. No todas las propiedades CSS compatibles taquigrafa as que asegrese de que est utilizando la propiedad correcta y estructura de valores. 1. /* Long Hand */ 2. p { 3. padding-top: 10px; 4. padding-right: 20px; 5. padding-bottom: 10px; 6. padding-left: 20px; 7. } 8. 9. /* Short Hand */ 10. p { 11. padding: 10px 20px; 12. } 13. 14. /* Short Hand */ 15. p { 16. padding: 10px; 17. }
causita HTML y CSS le dan la posibilidad de dejar los comentarios en el cdigo. Estos comentarios se pueden utilizar para ayudar con la organizacin, establecer recordatorios y administrar el cdigo ms eficaz. Los comentarios se hacen especialmente til cuando hay varias personas trabajando en el mismo cdigo. Cualquier contenido envuelto en comentarios no se representar en la pgina. Comentarios HTML envuelven el contenido a partir de <- y terminan con ->. CSS comentarios envuelven el contenido que empieza por / * y terminan con * /.