1. 1-LENGUAJE HTML Y CSS
Francisco David García Vayá
Pablo Berasategui Torrente
2ºBach A
2. 1.1-Significado de html y utilidad
• El lenguaje “HTML” es un conjunto de etiquetas predefinidas que el navegador
web interpreta a la hora de construir una página para su visualización. Además,
siempre va acompañado de otros dos lenguajes:
• CSS: da a la estructura HTML un diseño definido (colores, efectos visuales…)
• JavaScript: mejora la interacción del usuario con la página web.
3. 1.2-¿Por qué HTML no es un lenguaje
de programación?
• HTML no es un lenguaje de programación propiamente dicho, dado que no posee
algunas características propias de cualquier otro; como las estructuras de control y
la toma de decisiones. De esa manera, nos podemos referir al lenguaje HTML
como una serie de instrucciones que indican al navegador cómo debe estructurar
el contenido.
4. 1.3-Etiquetas
• Consta de un nombre que la define localizado entre los símbolos < y >, y en
minúsculas. Hay etiquetas que contienen texto y otras que representan partes de
una estructura. Para definir con precisión lo que engloban, deben cerrarse,
usándose una etiqueta de cierre, con “/” ante el nombre. Existen algunos tipos de
etiquetas que no se pueden cerrar como las imágenes o los saltos de línea.
Algunas etiquetas de frecuente uso son las siguientes:
– Párrafo: <p> Contenido del párrafo. </p>
– Salto de línea: <br />
– Párrafo con contenido en negrita: </strong></p>
5. 1.4-Atributos
• Son parámetros adicionales que se añaden a una etiqueta de apertura y modifican
el comportamiento de una etiqueta específica (propios) o son válidos para todo
tipos de etiqueta (globales) e incluyen el nombre del parámetro que modifican.
– Ejemplo:
<img scr=“imagen.jpg”alt=“imagen de prueba” />
Atributo para insertar una imagen
Archivo que contiene la imagen
Texto a mostrar si la imagen no está disponible
7. 2.1-Editores de texto plano y de
documentos web
• Los editores de texto plano comprenden los caracteres imprimibles. Es
conveniente que dicho editor destaque o resalte las etiquetas y atributos del texto,
para facilitar su comprensión. Ejemplos de editores de texto plano son:
Notepad++, Aptana Studio, Sublime Text y NetBeans, entre otros.
8. 2.2-Elementos básicos de la estructura
de un documento HTML
• En cuanto al editor de documentos web existen algunos elementos básicos, que
son:
– DOCTYPE--- Establece el tipo de documento al navegador y es el único elemento que se
escribe en mayúsculas.
– <html> ------Elemento raíz que tiene todo documento HTML y se sitúa después del
DOCTYPE.
– <head> ------Esta etiqueta incluye información general de la página en cuestión.
– <meta charset=“UTF-8” /> -- Indica al navegador el motor y codificación de caracteres
que utiliza el editor de texto plano, el más usado es el UTF-8 para evitar problemas.
– <body> ------Incluye el contenido que se mostrará al usuario
9. 2.3-Elementos de bloque y en línea
• ELEMENTOS DE BLOQUE:
– Ocupan todo el ancho del elemento que los contiene.
– Los elementos situados tras un elemento de este tipo irán siempre debajo, aunque su
ancho quede modificado.
– Pueden contener otros elementos de bloque y elementos en línea.
– Son ejemplos de este tipo de elementos: párrafos (<p>), bloques de división (<div>),
listas (<ul>,<ol>) y las tablas (<table>).
• ELEMENTOS EN LÍNEA:
– Sólo ocupan el ancho necesario.
– Seguidos, se sitúan el uno junto al otro hasta ocupar el ancho disponible.
– Sólo pueden contener otros elementos en línea, textos e imágenes.
– Son ejemplos: imágenes (<img>), enlaces (<a>), botones(<button>) y texto
resaltado(<strong>).
10. 2.4-Etiquetas básicas
• División: <div>, permite dividir la página en secciones.
• Párrafo: <p>, representa un párrafo y sólo puede contener elementos en línea.
• Agrupar elementos en línea: <span>, se usa para agrupar textos y otros elementos en
línea.
• Subrayado: <u>, se subrayará el texto que contenga esta etiqueta.
• Cursiva: <em>, el texto aparecerá en cursiva.
• Negrita: <strong>, el texto aparecerá en negrita.
• Subíndice: <sub>, el texto que contiene esta etiqueta aparece con tamaño menor y
desplazado hacia abajo.
• Superíndice: <sup>, el texto se convierte en superíndice.
• Salto de línea: <br>, fuerza un salto de línea.
• Separación horizontal: <hr>, dibuja una línea de separación horizontal en la página.
11. 2.5-Atributos aplicables a cualquier
etiqueta
• Id- Hace que se identifique una etiqueta de forma única. Solo puede contener
letras, números y los caracteres | - | _ | : |.. | Es útil para interactuar con un
elemento utilizando CSS o JavaScript.
• Class- Agrupa varias etiquetas para un estilo común. Es posible aplicar más de un
estilo si se separan sus nombres con un espacio dentro del valor.
• Style- Mediante CSS aplica un estilo directamente a un elemento. No se aconseja
utilizar este método.
• Title- Hace que aparezca una breve descripción del elemento cuando se sitúa el
cursor encima.
12. 2.6-Listas y tipos
• DEFINICIÓN: estructura que engloba el conjunto de elementos que la componen.
• TIPOS: hay tres tipos:
– Listas ordenadas:
• Se usan si se quiere establecer un orden.
• Los elementos se representan con <li>, y la propia lista con <ol>.
• Admite varios atributos, como reversed (orden invertido), start (establece el número por el que
empieza la lista), y type (indica qué tipo de numeral se va a utilizar).
13. – Listas desordenadas:
• La lista no sigue ningún orden concreto.
• Los elementos que la componen se representan con <li>.
14. – Listas anidadas
• No se cierra la etiqueta <li> hasta no haber cerrado la lista interna.
• 1º -> Abrir elemento en la lista principal
2º -> Añadir texto que precederá a la lista animada
3º -> Añadir las etiquetas necesarias de la lista interna y cerrar el elemento de la lista principal.
15. 2.7-Encabezados
• Son párrafos especiales que se usan en la creación de títulos para las diversas
secciones y subsecciones de una página web.
• Están definidas por las etiquetas <h1> (representa el encabezado de mayor nivel, y
posee letra de mayor tamaño) hasta <h6> .
16. 2.8-Tablas
<table> . Elemento de bloque que se utiliza para ordenar datos en filas y columnas. Las filas
se representan con <table row> . Cada fila debe tener el mismo número de celdas.
17. 2.9-Imágenes
• Son elementos en línea que se representan con la etiqueta <img> (Sin etiqueta de cierre). El
archivo en si y la ruta (en el escritorio) se unen con el atributo src. Si se desea poner texto
que describa la imagen se utilizará el atributo alt.
Por el contrario si la imagen se encuentra en Internet se utiliza la URL completa:
– Imagen en el subdirectorio imagen
– Imagen en el directorio anterior (padre)
– Imagen en un servidor externo
img/imagen.jpg
../imagen.jpg
http://dominio.com/ruta/imagen.jpg
18. 2.10-Enlaces
• Son vínculos a otras páginas, ya estén en el mismo servidor o en uno externo.
• La etiqueta usada es <a>
– Los atributos de esta etiqueta son: href ( permite incluir la ruta hacia la página con la que enlazará) y
opcionalmente target (cuyo valor _blank
20. 3.1-Significado de CSS y utilidad
• El lenguaje “CSS” es el utilizado para definir la manera de presentar el
código HTML de una página web.
• Tiene muchas utilidades:
– Permite separar la estructura de un documento (HTML),
– de su diseño
– o presentación (CSS).
21. 3.2-Formas de colocación del código
CSS
• Existen tres maneras de vincular códigos CSS a una estructura HTML:
1. Atributo HTML, con el atributo “style”.
En él se puede incluir cualquier etiqueta, permite insertar directamente el
código CSS como valor de dicho atributo, y las instrucciones se separan con
punto y coma.
2. Etiqueta <style>.
Establece un diseño general para todo el documento HTML , y se incluye con
la etiqueta <head>.
22. 3.3-Selectores básicos
• Afectan a determinados elementos del documento HTML y contienen una serie de
propiedades con las que se modificará el aspecto de dichos elementos.
• Hay tres tipos:
– Selector por tipo: se escribe únicamente el nombre de una etiqueta HTML, y afectan a
todos los elementos del mismo tipo del documento.
– Selector de clase: va precedido de un punto y debe representar una clase añadida a uno
o varios elementos del documento con el atributo class.
– Selector de id: corresponde al nombre del identificador de un elemento, y afecta
solamente a un elemento.
23. 3.4-Colores
• Para modificar el color de un elemento, se usa la propiedad color, mientras que
para modificar el color del fondo de dicho elemento, background-color.
• Algunos de los métodos que permiten establecer un valor cromático son:
– Nombre del color: blue
– Proporción de cada valor RGB en código hexadecimal precedido de almohadilla:
#FF0000
– Proporción de cada valor RGB en decimales, de 0 a 255: rgb(255,0,0)
– Proporción de cada valor RGB en porcentajes: rgb(100%, 0%, 0%)
– Proporción de cada valor RGB, más un valor de 0 a 1 (alpha) que indica la
transparencia de dicho color: rgba(255,0,0,0.5)
24. 3.5-Texto
Cuando se establece una modificación sobre el texto de un elemento, esto afecta
al texto del mismo, así como a sus elementos internos. Algunas de estas
propiedades son:
– Alineación del texto (text-align): los valores más comunes son left, right, center y justify.
– Subrayado (text-decoration): los valores pueden ser underline, none, overline y line-through.
– Transformación mayúsculas/minúsculas (text-transform):los valores pueden ser uppercase,
lowercase y capitalize.
– Tamaño del texto (font-size): los valores son númericos: px, pt, %, em.
– Tipo de fuente (font-family): existen nombres de fuentes genéricos, como serif o monospace.
– Cursiva (font-style): el valor italic.
– Grosor del texto (font-weight): el valor bold pone el texto en negrita y normal lo elimina.
– Sombreado (text-shadow): Se especifican cuatro valores separados por espacios.
25. 3.6-Tamaño
• Este parámetro se modifica con propiedades CSS. Las siguientes propiedades le indican al
navegador como disponer un elemento:
Display: Block – El elemento se comporta como un elemento de bloque.
Display: Inline – El elemento se comporta como un elemento en línea, es decir, solo ocupan
el ancho necesario.
Display : Inline-block – El elemento se establece como un bloque pero se comporta como un
elemento el línea.
Recordemos que un elemento de bloque ocupa todo el ancho del elemento que lo contiene
width
height
26. 3.7-Bordes
• - Border width : En pixeles, añade grosor a los cuatro bordes a la vez o independientemente usando las
propiedades: border-left-width/border-right-width/border-top-width/border-bottom-width
• -Border-style: Determina el tipo de trazo con el que se dibuja el borde: solid (línea continua)/ dashed
(línea discontinua)/double (línea continua doble)/ dotted (con puntos). Al igual que pasa con el grosor
también se puede modificar cada lado por separado.
• -Border-color: Permite cambiar el color del borde de manera idéntica a como cambiaríamos el color de un
texto.
• Border-radius: Modifica el radio de curvatura de cada esquina, empezando por la esquina superior
izquierda y continuando en sentido de la agujas del reloj.
27. 3.8-Márgenes
• Margin. Indica el espacio entre un elemento y el resto de elementos que lo rodean, se suele expresar en
píxeles.
• Padding. Representa el margen interno entre un elemento y su contenido, al igual que margin se expresa
en píxeles.
Margin
TEXTO
Padding
28. 3.9-Posicionamiento
• Determina al navegador la localización de cada elemento al abrir el archivo
– Position: static : Es el predeterminado que consiste en hacer un salto de línea después de cada
elemento.
– Position: relative : El elemento ocupa el mismo espacio que si su posición fuera static, a diferencia
de que se puede obligar al navegador a desplazar la posición donde lo dibujará sin que la posición
del resto de elementos se vea alterada.
– Position: absolute : Hace que el elemento se sitúe en la esquina superior del elemento que lo
contiene, además, su posición se interpreta como si no estuviera ocupando espacio en el
documento, lo que hace que se represente como si estuviera en una capa superior.
– Margin-top y margin-left : Permite mover un elemento no con respecto al elemento que lo contiene,
sino a todo el documento.
– Position: fixed : Es idéntico al absolute, con la diferencia de que utiliza la ventana y no el documento
como referencia, por lo que el usuario podrá hacer scroll por la página sin que dicho elemento
desaparezca.
