2. INDICE
1. Lenguaje HTML
1.1 Significado de HTML y utilidad
1.2 ¿Por qué HTML no es un lenguaje de programación?
1.3 Etiquetas
1.4 Atributos
2. Estructura básica de una página HTML
2.1 Editores de texto plano y editores de documentos web. Ejemplos
2.2 Elementos básicos de la estructura de un documento HTML
2.3 Elementos de bloque y de línea
2.4 Etiquetas básicas
2.5 Atributos globales aplicables a cualquier etiqueta: id, class, style, title
2.6 Listas y tipos
2.7 Encabezados
2.8 Tablas
2.9 Imágenes
2.10 Enlaces
3. Personalización del estilo: CSS
3.1 Significado de CSS y utilidad
3.2 Formas de colocación del código CSS
3.3 Selectores básicos
3.4 Colores
3.5 Texto
3.6 Tamaño
3.7 Bordes
3.8 Márgenes
3.9Posicionamiento
3.10 Imagen de fondo
3. 1. LENGUAJE HTML
Es el lenguaje utilizado para estructurar una pagina
web que consiste en un conjunto de etiquetas
predefinidas que el navegador web interpreta a la hora
de construir una página para su visualización .
4. 1.1. SIGNIFICADO DE HTML Y UTILIDAD
HTML significa "Lenguaje de Marcado de Hipertexto"
por sus siglas en ingles "HyperText Markup Language",
es un lenguaje que pertenece a la familia de los
"lenguajes de marcado" y es utilizado para la
elaboración de páginas web.
Sirve para describir la estructura básica de una página
y organizar la forma en que se mostrará su contenido,
además de que HTML permite incluir links hacia otras
páginas o documentos.
5. 1.2. ¿POR QUÉ HTML NO ES UN LENGUAJE DE
PROGRAMACIÓN?
No se considera un lenguaje de programación debido a que no posee ciertas
características propias de un lenguaje de programación como las estructuras de control y
la toma de decisiones.
Comparación:
HTML Lenguaje de programación
6. 1.3. ETIQUETAS
Es una herramienta propia de HTML que consta de un
nombre en minúsculas encerrado entre los símbolos <…>
que puede contener textos y otras que representen una
estructura.
Ejemplos:
• <p> Contenido de párrafo</p>PARRAFO
• <br/>SALTO DE LINEA
• <p> Texto normal y <strong>texto en negrita.
</strong></p>
PARRAFO CON
CONTENIDO EN NEGRITA
7. 1.4. ATRIBUTOS
Es un recurso utilizado para asignar valores o
características adicionales a las etiquetas.
Los atributos confieren versatilidad a las etiquetas.
Son agregados después del nombre de la etiqueta.
Ejemplo:
<img src=“imgen.jpg”alt=“imagen de prueba” />.
8. 2. ESTRUCTURA BASICA DE UNA PAGINA HTML
Para crear un documento HTML se utiliza un editor de
texto plano menos Microsoft Word y LibreOffice
Writer, destacando las etiquetas y los atributos frente
al texto contenido de modo que mejore su legibilidad.
(Studio)
9. 2.1. EDITORES DE TEXTO PLANO Y EDITORES DE
DOCUMENTOS WEB. EJEMPLOS
Editores de texto plano Editores de documentos web
Word
Dreamweaver
Kompozer
Bloc de notas
NotePad++
10. 2.2. ELEMENTOS BASICOS DE LA ESTRUCTURA DE
UN DOCUMENTO HTML
Los elementos esenciales de los que consta un
documento HTML son los siguientes:
DOCTYPE: Informa al navegador de qué tipo de
archivo.
<html>
<head>
<meta charset=“UTF-8”/>
<body>
11. 2.3. ELEMENTOS DE BLOQUE Y DE LINEA
LINEA
•Ocupan el ancho necesario
•Los elementos de línea se sitúan uno junto
a otro hasta ocupar el ancho disponible.
•Contienen otros elementos de línea, texto e
imágenes.
•Algunos tipos son: imágenes(<img>),
enlaces(<a>), botones(<button>) o texto
resaltado(<strong>).
BLOQUE
•Ocupan todo el ancho disponible dentro
del elemento que los contiene.
•Los elementos situados detrás de un
elemento de bloque, siempre están debajo
aunque modifiquen el ancho o se dispongan
uno y otro.
•Contienen otros elementos de bloque y de
línea.
•Algunos tipos son: párrafos (<p>), bloques
de división (<div>), listas(<ol>) o tablas
(<table>).
12. 2.4. ETIQUETAS BASICAS
TIPOS FUNCION
<div> División
<p> Párrafo
<span> Agrupar elementos en línea
<u> Subrayado
<em> Cursiva
<strong> Negrita
<sub> Subíndice
<sup> Superíndice
<br> Salto de línea
<hr> Separación horizontal
13. 2.5. ATRIBUTOS GLOBALES APLICABLES A
CUALQUIER ETIQUETA
ATRIBUTOS FUNCION
ID
Identificar una etiqueta de forma única
en el documento HTML.
CLASS
Agrupar varias etiquetas bajo un estilo
común cuando se aplica código CSS a la
página.
STYLE
Aplicar un estilo mediante CSS
directamente a un elemento.
TITLE
Elaborar una descripción corta de un
elemento.
14. 2.6. LISTAS Y TIPOS
Son estructuras que engloban un conjunto de elementos.
Tipos:
15. 2.7. ENCABEZADOS
Son párrafos especiales destinados a la creación de
títulos para diferentes secciones y subsecciones de una
pagina web.
16. 2.8. TABLAS
Son elementos de bloque empleados con el fin de ordenar
una serie de datos a partir de un esquema de filas y
columnas.
Ejemplo:
17. 2.9. IMAGENES
Son elementos en línea.
Se representan con la etiqueta <img>.
Para establecer una ruta entre la imagen y su archivo
correspondiente se emplea el atributo src.
También se podría añadir un texto alternativo que
describe la imagen con el atributo alt.
<img src=“../imágenes/img.jpg” alt=“Bosque” />
18. 2.10. ENLACES
Son vínculos con otras paginas tanto locales como
externas utilizando la etiqueta <a>.
Los atributos propios de esta etiqueta son href y
opcionalmente target.
<a href=“httos://google.com”>Enlace a Google</a>
20. 3.1. SIGNIFICADO DE CSS Y UTILIDAD
Lenguaje utilizado para definir el modo de representar el código HTML
de una pagina web.
Permite separar la estructura de un documento (HTML) de su diseño o
presentación (CSS).
21. 3.2. FORMAS DE COLOCACION DEL CODIGO CSS
FORMAS DE VINCULAR CSS A
HTML
DEFINICION
Con el atributo style
•En cualquier etiqueta.
•Permite insertar directamente Código
CSS como valor de dicho atributo.
•Las diferentes estaciones se separan
con ;
Con la etiqueta <style>
•Establece un diseño general que
afectará a todo el documento HTML
que lo incluya.
•Se incluye dentro de : <head>.
En un archivo independiente
•Tendrá una extensión .css.
•Se sitúa en un directorio diferente al
de HTML.
•Es preciso insertar esta etiqueta en la
cabecera.
22. 3.3. SELECTORES BASICOS
Por tipo
• Se escribe el
nombre de una
etiqueta
HTML.
• Afectará a
elementos del
mismo tipo.
De clase
• Atributo class.
• Precedido por
un (.)
• Afecta a
elementos los
cuales tengan
como atributo
una clase
determinada.
De id
• Atributo id.
• Precedido de
(#).
• Afecta a un
elemento.
• Actúa como
identificador.
23. 3.4.COLORES
Modifica el color del texto mediante la propiedad color, para el color
de fondo mediante la propiedad background-color.
Métodos para establecer un valor cromático:
1. Nombre del color: blue, red green, etc.
2. Proporción de cada valor RGB en código hexadecimal precedido de almohadilla:
#FF0000.
3. Proporción de cada valor RGB en decimales, de 0 a 255: rgb(255, 0, 0).
4. Proporción de cada valor RGB en porcentajes: rgb(100%, 0%, 0%).
5. 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
PROPIEDADES VALORES
Alineación del texto left, right, justify
Subrayado underline, line-throught
Transformación de mayúsculas y
minúsculas
Uppercase, lowercase, capitalize
Tamaño del texto Se mide en px, pt, %, em
x-small, small, medium, large, x-large
Tipo de fuente lista con los nombre de las fuente
separado por comas.
Cursiva normal
Grosor del texto bold, normal
Sombreado 1)desplazamiento hacia la derecha de la
sombra.
2)desplazamiento hacia abajo.
25. 3.6. TAMAÑO
PROPIEDADES
DISPLAY:BLOCK
El elemento afectado
se comportara como
un elemento
bloqueo.
DISPLAY:INLINE
El elemento se
comportara como un
elemento de línea.
DISPLAY: INLINE-
BLOCK
El elemento se
establece como un
bloque pero se
comporta como un
elemento de línea, al
estilo de una imagen.
26. 3.7. BORDES
Propiedades CSS que permiten añadir un borde a un
elemento son los siguientes:
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR
BORDER
BORDER-RADIUS
27. 3.8. MARGENES
PROPIEDADES
MARGIN PADDING
Representa el espacio entre
un elemento y los elementos
que lo rodean, o el borde del
elemento que lo contiene.
Representa el espacio o
margen interno entre un
elemento y su contenido.
28. 3.9. POSICIONAMIENTO
PROPIEDADES DE CSS POSITION
POSITION: STATIC
POSITION: RELATIVE
POSITION: ABSOLUTE
MARGIN-TOP Y MARGIN-LEFT
POSITION: FIXED
29. 3.10. IMAGEN DE FONDO
PROPIEDADES
BACKGROUND-IMAGE
BACKGROUND-POSITION
BACKGROUND-REPEAT
