2. 1. Lenguaje HTML
1. Significado de HTML y utilidad
2. ¿Por qué HTML no es un lenguaje de programación?
3. Etiquetas
4. Atributos
2. Estructura básica de una página HTML
1. Editores de texto plano y editores de documentos web. Ejemplos
2. Elementos básicos de la estructura de un documento HTML
3. Elementos de bloque y de línea
4. Etiquetas básicas
5. Atributos globales aplicables a cualquier etiqueta: id, class, style, title
6. Listas y tipos
7. Encabezados
8. Tablas
9. Imágenes
10. Enlaces
3. Personalización del estilo: CSS
1. Significado de CSS y utilidad
2. Formas de colocación del código CSS
3. Selectores básicos
4. Colores
5. Texto
6. Tamaño
7. Bordes
8. Márgenes
9. Posicionamiento
10. Imagen de fondo
4. 1. LENGUAJE HTML
1. Significado de HTML y utilidad
• Es un lenguaje de marcado que se utiliza
para el desarrollo de páginas de Internet. Se
trata de la sigla que corresponde a
HyperText Markup Language, es decir,
Lenguaje de Marcas de Hipertexto, que
podría ser traducido como Lenguaje de
Formato de Documentos para Hipertexto.
5. 1. LENGUAJE HTML
2. ¿Por qué HTML no es un lenguaje de
programación?
• HTML es un lenguaje utilizado para
describir una estructura (en este caso,
un documento o una página web), no
para describir computaciones.
6. 1. LENGUAJE HTML
3. Etiquetas
• Son fragmentos de texto rodeados por
corchetes angulares < >, que tienen
funciones y usos específicos y se utilizan
para escribir código HTML.
• La etiqueta de apertura y la de cierre son las
misma con la única diferencia de la diagonal
"/"
7. 1. LENGUAJE HTML
4. Atributos
• Los atributos son valores adicionales
que se agregan a una etiqueta para
configurarla o definir su comportamiento.
• Existen atributos propios y exclusivos de
algunas etiquetas.
9. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
1. Editores de texto plano y editores de
documentos web. Ejemplos.
Lo único que necesitamos para crear
una web es un simple editor de texto
plano y nuestra imaginación.
El propio bloc de notas , Brackets
Kompozer son ejemplos de ellos.
10. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
2. Elementos básicos de la estructura de
un documento HTML.
DOCTYPE
• Tipo de
archivo
<html>
• Elemento
raíz
<head>
• Información
general
• <title> :
muestra
título
<meta
charset=“UTF-
8”/>
• Indica el tipo
de
codificación
de
caracteres
<body>
• Contenido
que se
mostrará al
usuario
11. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
3. Elementos de bloque y de línea.
Bloque
Ocupan todo el ancho
disponible
Los elementos posteriores se
sitúan debajo de este
Pueden contener otros
elementos de bloque o línea
Párrafos :(<p>)
Listas :(<ul>,<ol>)
Bloques de división:(<div>)
Tablas:(<table>)
Línea
Ocupan solo el ancho necesario
Los elementos posteriores se
sitúan uno junto al otro
Solo pueden contener otros
elementos de línea, texto o
imágnes
Imágenes :(<img>)
Enlaces :(<a>)
Botones:(<button>)
Texto resaltado:(<strong>)
12. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
4. Etiquetas básicas
• División:<div>
• Párrafo: <p>
• Agrupar elementos en línea: <span>
• Subrayado: <u>
• Cursiva: <em>
• Negrita: <strong>
• Superíndice: <sup>
• Subíndice: <sub>
• Salto de línea: <br>
• Separación horizontal: <hr>
o Todas llevan cierre
13. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
5. Atributos globales aplicables a cualquier
etiqueta: id, class, style, title.
id: para identificar un etiqueta de forma única en el documento
HTML.
Class: para agrupar varias etiquetas bajo un estilo común cuando se
aplica código CSS a la página.
Style: para aplicar un estilo mediante CSS directamente a un
elemento.
Title: para elaborar una descripción corta de un elemento.
14. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
6. Listas y tipos.
Una lista es una estructura oba un conjunto de elementos que la componen.
Existen tres tipos de listas:
ORDENADAS: se representa con la etiqueta <ol></ol>. Admite varios atributos
como reversed, start y type, que indica que numeral se va a utilizar
(1:números; a:letras minúsculas; A: letras mayúsculas; I:números romanos;
i:números romanos en minúsculas.
DESORDENADAS: no siguen un orden correcto.
ANIDADAS: listas internas en el interior de un elemento de otra lista principal.
15. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
7. Encabezados
Son párrafos especiales destinados a la creación de títulos para las
diferentes secciones y subsunciones de una página web.
Están definidos por las etiquetas <h1> </h1>(mayor nivel) hasta <h6>
</h6> (menor nivel).
16. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
8. Tablas
Elemento de bloque empleado para estructurar datos alineadas según un
esquema de filas y columnas.
Las filas se representan con <tr> </tr> que solo contienen celdas o <td>.
¿Cómo unir celdas?
Utilizando atributos con la etiqueta <td>, como colspan y rowspan
17. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
9. Imágenes.
Elementos en línea.
Etiqueta <img>, sin cierre.
La ruta del archivo se establece con el atributo src.
Si la imagen es externa se debe incluir la URL
completa.
<img src=“../imágenes/img.jpg” alt=“Bosque” />
El atributo alt incluye texto alternativo.
18. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
10. Enlaces
Vínculos a otras páginas (locales o externas).
Etiqueta <a> y </a>
Atributos href (incluir la ruta)
Target, cuyo valor _blank (página o pestaña
nueva)
<a href=https://google.com>Enlace a
Google</a>
20. 3.PERSONALIZACIÓN DEL ESTILO: CSS
1. Significado de CSS y utilidad.
Lenguaje que define el modo de presentar el código
HTML.
Permite separar la estructura de un documento (HTML) y a
su diseño o presentación (CSS).
Un solo archivo CSS modifica el aspecto de varios HTML.
21. 3.PERSONALIZACIÓN DEL ESTILO: CSS
2. Formas de colocación del código CSS
• Permite insertar código CSS
• Se debe de repetir para todos los valores
En un atributo
HTML, con
atributo style
• Establece diseño general y afecta a todo
el documento
• Se incluye en la cabecera , dentro de
<head>
Con la etiqueta
<style>
• Debe tener extensión .css
• Se inserta en la cabecera:
• <link rel=“stylesheet” href=css/estilo.css”
type=“text/css” />
En un archivo
independiente
22. 3.PERSONALIZACIÓN DEL ESTILO: CSS
3. Selectores básicos
Contienen una serie de reglas que modifican el aspecto de elementos
• Se escribe nombre de la etiqueta
• Afectan a todo elemento, como párrafos <p> o
enlaces <a>
Por tipo
• Va precedido de (.) .class
• Representa una clase añadida a uno o varios
elementos.
De clase
• Afecta solamente a un elemento
• Va precedido de (#) #id
• El selector de mayor prioridad será el que afecte al id
De id
23. 3.PERSONALIZACIÓN DEL ESTILO: CSS
4. Colores
Modifican el color del texto
Métodos para establecer un valor cromático.
Nombre del color: BLUE, RED
RGB en código hexadecimal precedido de almohadilla: #FF0000
RGB en decimales, de 0 a 255: rgb(255,0,0).
RGB en porcentajes: rgb(100%, 0%, 0%).
RGB, más un valor de 0 a 1 (transparencia): rgba(255, 0, 0, 0.5).
24. 3.PERSONALIZACIÓN DEL ESTILO: CSS
5.Texto
Alineación de texto: left, right, center y justify
Subrayado: underline y line-through (tachado)
Transformación mayus/minus: uppercase y lowercase; capitalize (1º
mayus)
Tamaño : px, pt, %, x-small, small, medium, large o x-large
Fuente: serif, sans-serif…
Cursiva: valor italic la transforma y normal lo retira
Grosor: valor bold lo transforma en negrita y normal lo elimina.
Sombreado: text-shadow: -px
25. 3.PERSONALIZACIÓN DEL ESTILO: CSS
6. Tamaño
Viene definido por width (ancho) y height (alto).
Pueden tener valor en pixeles o porcentaje.
Se establecen las siguientes propiedades :
• Display: block. elemento de bloque, divisor (<div>) o párrafo.
• Display: incline. Elemento de línea.
• Display : incline-block. Elemento de bloque que se comporta como elemento en
línea.
26. 3.PERSONALIZACIÓN DEL ESTILO: CSS
7. Bordes
Border-width: añade grosor y se establece en píxeles (px). Se debe indicar cada lado
(border-left- width; right; top; bottom…)
Border-style: tipo de trazo del borde
Solid: continua
Dashed: discontinua
Dotted: punto
Double: continua doble
Border-color: color del borde. Se indica el lado que se desea modificar.
Border: medida, estilo y color separados por espacio.
Border-radius: radio de curvatura de las esquinas
Para aplicar diferentes se establecen valores diferentes en cada esquina con sus
cuatro medidas.
27. 3.PERSONALIZACIÓN DEL ESTILO: CSS
8. Márgenes
CSS dispope de dos propiedades:
• Margin: espacio entre elementos o con el borde. Se utilizan px o
porcentaje.
• Padding. Espacio interno entre un elemento y su contenido. Usa los
mismos valores que margin.
• Para modificar de manera individual cada lado, se utilizan los sufijos –
left, -rigth, -top y –bottom.
28. 3.PERSONALIZACIÓN DEL ESTILO: CSS
9. Posicionamiento
Consiste en dibujar un elemento en un lugar distinto al original.
CSS position:
Static: valor por defecto que después de cada elemento de bloque realiza
un salto de línea.
Relative: igual que static pero utilizando las propiedades top, bottom, left y
right que desplazan un elemento una cantidad de píxeles: top:10px
Absolute: se sitúa el elemento en la esquina superior izquierda.
Margin-top y margin-left: se utilizan top, left, right, bottom, left: 0px;
bottom:20px
Fixed: similar al absolute pero utiliza la ventana y no el documento.
29. 3.PERSONALIZACIÓN DEL ESTILO: CSS
10. Imagen de fondo
Background-image. Es la ruta a la imagen donde esta el
CSS. Debe incluirse entre comillas y paréntesis, precedida
de url, así: background- image: url(´../img.png´)
Background-position. La imagen es más pequeña que el
elemento, establesce la alineación vertical y horizontal.
Puede ser left, center o right (horizontal) y top, center o
bottom (vertical)
Background-repeat. La imagen es más pequeña que el
elemento, se repite por defecto hasta ocupar todo el
espadio. Se modifica con no-repeat, repeat-x y repeat-y.