Resumen de los conceptos básicos del lenguaje HTML

1. CONCEPTOS BÁSICOS DEL LENGUAJE
1

2. ÍNDICE
• Introducción
• Lenguaje HTML
– Significado de las siglas HTML.
– ¿Por qué HTML no es un lenguaje de programación?
– Etiquetas
– Atributos
• Estructura básica de una página HTML
– Editores de texto plano y editores de documentos web. Ejemplos
– Elementos básicos de la estructura de un documento HTML
– Elementos de bloque y de línea
– Etiquetas básicas
– Atributos globales aplicables a cualquier etiqueta: id, class, style, title
– Listas y tipos
– Encabezados
– Tablas
– Imágenes
– Enlaces
• Personalización del estilo: CSS
– Significado de CSS y utilidad
– Formas de colocación del código CSS
– Selectores básicos
– Colores
– Texto
– Tamaño
– Bordes
– Márgenes
– Posicionamiento
– Imagen de fondo
2

3. INTRODUCCIÓN
Es el lenguaje de etiquetas de las páginas web. Lo que ves al visualizar una página en
Internet es la interpretación que hace el navegador del código HTML. 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 enlaces (links) hacia otras páginas o
documentos.
3

4. LENGUAJE
4

5. SIGLAS
• Hiper Texto: es una herramienta con estructura no secuencial que
permite crear, agregar, enlazar y compartir información de diversas
fuentes por medio de enlaces asociativos.
• Marcado: es lo que haces con el texto. Se marca el texto con edición de
textos, encabezados, etc.
• Lenguaje: es la definición de HTML. Este lenguaje hace uso de muchos
términos en inglés.
5

6. ¿POR QUÉ HTML NO ES UN LENGUAJE
DE PROGRAMACIÓN?
• Es un formato de datos que permite el intercambio de información a
través del World Wide Web. Las marcas (tag) HTML son simples etiquetas
que comunican al navegador algunos datos de formatación. El HTML,
pues, no puede definirse como un lenguaje de programación, sino como
un sistema de marcado.
• no es un lenguaje de programación, ya que no incluye lógica de
programación. HTML es un lenguaje de marcado de hipertexto, que da
estructura a un documento mediante etiquetas.
6

7. ETIQUETAS:
7

8. -De formato de texto
Salida
1. Texto en negrita
2. Texto en itálicas
3. Texto en formato teletipo
4. El texto en 2 tamaños más
grandes y en rojo. El tamaño
puede ser un valor absoluto en el
rango 1..7.
5. Utilizar la dirección de e-mail
candemarmar2000@gmail.com
para contactarme.
Etiquetas requeridas
1. El <B>texto</B> en negritas.
2. El <I>texto</I> en
it&aacute;licas.
3. El <TT>texto</TT> en formato
teletipo.
4. El <FONT SIZE = +2 COLOR =
"RED"> texto </FONT> en 2
tama&ntilde;os m&aacute;s
grandes y en rojo. El
tama&ntilde;o puede ser ...
5. Utilizar la direcci&oacute;n de e-
mail <ADDRESS>
candemarmar2000@gmail.com
</ADDRESS> para contactarme.
8

9. -De encabezamiento
Salida
1. Encabezado H1
2. Encabezado H3
3. Encabezado H6
Etiqueta requerida
1. <H1>Encabezado H1<H1>
2. <H3>Encabezado H3<H3>
3. <H6>Encabezado H6<H6>
Las etiquetas de encabezado generan automáticamente un fin de línea.
Salida
1. Justo antes del encabezado.
2. Un encabezado H2
3. Justo después del encabezado.
Etiqueta requerida
 Justo antes del encabezado. <H2>Un encabezado
H2<H2> Justo despu&eacute;s del encabezado.
9

10. -Párrafos, fin de línea y comentarios
Salida
1. Última oración del párrafo.
2. Primera oración del nuevo
párrafo.
Etiquetas requeridas
1. &Uacute;ltima
oraci&oacute;n ... <P>
2. Primera oraci&oacute; del
...
1. Una oración
sobre otra.
1. Una oraci&oacute;n
<BR>
sobre otra.
10

11. ATRIBUTOS
• Los atributos son la forma que tienen los autores de definir propiedades
para un elemento. Estas propiedades habitualmente cambian la forma en
que los navegadores interpretan al elemento, al cambiar su significado o
presentación.
• Les presentaremos unos ejemplos en la siguiente diapositiva:
11

12. Nombre del Atributo Elementos Descripción
alt
<applet>, <area>, <img>,
<input>
Texto alternativo cuando no se
puede mostrar la imagen.
aling
<applet>, <caption>, <col>,
<colgroup>, <hr>, <iframe>,
<img>, <table>, <tbody>, <td>,
<tfoot> , <th>, <thead>, <tr>
Alineación horizontal del
texto.
border <img>, <object>, <table> Ancho del borde.
class Atributo global
Para aplicar estilos a
elementos con propiedades en
común.
id Atributo global
Identificador del elemento
para acceder al mismo desde
CSS o Javascript.
target <a>, <area>, <base>, <form>
Especifica el marco destino en
un vínculo.
12

13. ESTRUCTURA BÁSICA
13

14. ¿CÓMO SE ESTRUCTURA?
La primera del documento es la DOCTYPE, que
informa al navegador de que tipo de archivo se trata.
Luego empieza con la etiqueta <html> y acaba con
</html>. Todo lo que esté en medio será la página
web. Dentro de <html> </html> se encuentran
diferentes partes:
•<head> </head>: es la cabecera de la página. Aquí
se pone el título de la página, los metadatos, estilos,
código javascript …
•<title> </title>: que indica el título de la página.
•<body></body>: aquí va el contenido de la página
en sí.
•<meta charset= “UFT-8/>: indica al navegador el
tipo de codificación de caracteres que usa el editor
14

15. EDITORES DE TEXTO PLANO
• Dos ejemplos son Notepad o Bloc de Notas (incluido en Windows)
y Kate(GNU/Minix). Con cualquiera de los dos bastaría para escribir las
líneas de código necesarias para diseñar una página Web.
• Existen editores de texto específicamente diseñados para la edición Web,
incluyen coloreado de sintaxis y las etiquetas de marcado usuales
necesarias en el lenguaje de hipertexto.
15

16. EDITORES DE DOCUMENTOS WEB
 Los más populares en el entorno Windows son:
– Microsoft FrontPage. Es fácil de utilizar porque tiene un entorno muy similar a
Word. Su versión más reciente recibe el nombre de Expresión Web Designer.
– Adobe Dreamweaver. Pertenece a la suite de Adobe. Es un programa muy
recomendable por sus múltiples prestaciones.
 En el entorno Linux son: BlueFish (Gnome) y Quanta+ (KDE).
 Y por último está Kompozer, con las siguientes características:
– Editor visual.
– Gratuito.
– Soporta tablas, plantillas y hojas de estilo.
– Subida de archivos por FTP al servidor.
– En castellano.
– Multiplataforma: windows, linux, mac, etc
– Portable.
16

17. ELEMENTOS DE BLOQUE Y EN LÍNEA
 De bloque:
Los elementos de bloque sólo deben aparecer dentro del elemento <body>.
Un elemento en bloque ocupa todo el espacio de su elemento padre
(contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que
esto significa. Los navegadores suelen mostrar el elemento a nivel de bloque
con un salto de línea antes y después del elemento. Ejemplos:
• <p>: párrafo.
• <div>:división de documento.
17

18. ELEMENTOS DE BLOQUE Y EN LÍNEA
 De línea:
Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que
definen el elemento en línea. De forma predeterminada, no comienzan con la
nueva línea. En general, pueden contener únicamente los datos y otros
elementos en línea.
• <img> (las imágenes).
• <a> (enlaces).
• <button> (botones).
• <strong> (texto resaltado).
18

19. ETIQUETAS BÁSICAS
• DIVISIÓN (<div>). Permite dividir la página en secciones.
• PÁRRAFO (<p>). Representa un párrafo y solo puede englobar elementos en línea.
• AGRUPAR ELEMENTOS EN LÍNEA (<span>). Para agrupar textos y otros elementos en línea,
así como para aplicar estilos con CSS.
• SUBRAYADO (<u>). Para subrayar el texto.
• CURSIVA O ÉNFASIS (<em>). Para que a parezca el texto en cursiva.
• NEGRITA O TEXTO DESTACADO (<strong>). Para que aparezca el texto en negrita.
• SUBÍNDICE (<sub>). El texto representa un subíndice y aparecerá emplazado a la izquierda y
de menor tamaño.
• SUPERÍNDICE (<sup>). El texto pasa a ser un superíndice.
• SALTO DE LÍNEA (<br>). Fuerza un salto de línea en el texto. No tienen etiqueta de cierre.
• SEPARACIÓN HORIZONTAL (<hr>). Dibuja una línea de separación horizontal en la página. Sin
etiqueta de cierre.
19

20. ATRIBUTOS GLOBALES
Id
• Identificar una etiqueta de forma
única en el documento HTML.
• Empieza por una letra y solo
puede contener letras, números y
caracteres (-,_,: y.).
• Definir un estilo único con CSS o
manipular el elemento con
Javascript.
Class
• Agrupa varias etiquetas bajo un
estilo común cuando se aplica el
código CSS.
• Puede añadir varias clases a un
mismo elemento
(class=“cabecera enlace”).
Style Title
• Aplicar un estilo mediante CSS.
• Realizar pruebas de visualización.
• Descripción corta de un
elemento.
20

21. LISTAS Y TIPOS
 Estructura que engloba un conjunto de elementos que la componen.
 <li>: elementos que componen la lista (párrafo).
 2 tipos:
o Desordenadas.
o Ordenadas <ol> y admite varios atributos.
21

22. ENCABEZADOS
• Párrafos especiales para crear
títulos para las diferentes
secciones y subsecciones de una
página web.
• Definidos por: <h1> - <h6>. De
mayor a menor nivel.
• Un encabezado formatea el texto
que contiene de distinta manera a
un párrafo, por lo que puede
contener el mismo tipo de
elementos internos.
22

23. TABLAS
• <table>, elemento de bloque para estructurar una serie de datos
alineados según un esquema de filas y columnas.
• Las filas se representan con la etiqueta <tr>, y etas solo contiene celdas o
<td> cada fila debe contener el mismo número de celdas.
• Se puede usar el atributo “border” para dibujar bordes entre las celdas.
23

24. IMÁGENES
• Son elementos en línea.
• Su etiqueta correspondiente es <img>, la cual no se cierra.
• El archivo correspondiente a la imagen se referencia estableciendo la ruta
al mismo, con el atributo “src”.
• Se puede incluir el atributo “alt”, que permite incluir un texto alternativo
que describe la imagen que se mostrará.
• La ruta a la imagen se establece desde el directorio.
• Se puede utilizar los atributos “width” y “height” para establecer (con un
valor numérico) el ancho y el alto en píxeles.
• Ejemplo:
- <img src=“../imágenes/img.jpg” alt=“Montaña”/>
24

25. • En el caso de que se trate de una imagen externa se debe
incluir la URL completa:
- Imagen en el subdirectorio img: img/imagen.jpg.
-Imagen en el directorio anterior (padre): ../imagen.jpg.
-Imagen en un servidor externo:
http://dominio.com/ruta/imagen.jpg.
25

26. ENLACES
• Son vínculos a otras páginas.
• La etiqueta es <a> y esta englobará a un texto o imagen que servirá de
enlace a la ruta.
• Los atributos propios son “href” (incluye la ruta hacia la página con la que
enlazará) y “target” (su valor “_blank” indica al navegador que deberá
abrir el enlace en una página nueva).
• Ejemplo:
- <a href=https://tic2bdc.pbworks.com>Enlace a TIC2</a>
26

27. PERSONALIZACIÓN
DEL ESTILO: CSS
27

28. SIGNIFICADO Y UTILIDAD
• Lenguaje utilizado que indica el modo de presentar el código HTML.
• Permite separar la estructura de un documento (HTML) de su diseño o
presentación (CSS).
• Un solo archivo CSS puede modificar el aspecto de varios documentos
HTML.
28

29. FORMAS DE COLOCACIÓN
 EN UN ATRIBUTO HTML, CON EL ATRIBUTO “STYLE”:
• Se puede incluir en cualquier etiqueta.
• Permite insertar directamente el código CSS como valor de dicho atributo.
• Las instrucciones se separarán con punto y coma.
 CON LA ETIQUETA <STYLE>:
• Esta permite establecer un diseño general que afectará al documento
HTML.
• Se incluye en la cabecera (<head>) del documento.
29

30.  EN UN ARCHIVO INDEPENDIENTE:
• Este tendrá una extensión .css
• Se sitúa en un directorio diferente al de los documentos HTML.
• Para incluirlo necesitaremos insertar una etiqueta en la cabecera de los
documentos HTML.
-ETIQUETA NECESARIA:
<link rel=“stylesheet” href=“css/estilo.css” type=“text/css” />.
30

31. SELECTORES BÁSICOS
• Afectan a determinados elementos del documento HTML
• Contendrán una serie de reglas o propiedades con las que se modificará el
aspecto de estos elementos.
• Si se ve afectado por más de un tipo de selector, el de mayor prioridad
afectará al identificador seguido del de clase y, por último, el de tipo.
31

32. TIPOS DE SELECTORES
 POR TIPO: Se escribe el nombre de una etiqueta HTML. Las propiedades
modificadas afectarán a todos los elementos del mismo tipo en el
documento.
 DE CLASE: El nombre debe ir precedido por un punto y debe representar
una clase añadida a uno o varios elementos HTML mediante “class”. Lo
modificado dentro afectará a todos los elementos de dicha clase como
atributo.
 DE ID: Corresponde al nombre del identificador de un elemento. Afecta
solamente a un elemento. En el CSS debe ir precedido de #.
32

33. COLORES
• Para el texto se utiliza la propiedad “color”.
• Para el fondo se utiliza “background-color”.
• Existen otros formatos como el CMYK. Para ello se utiliza el texto “cmyk”
seguidos de cuatro valores entre paréntesis (% o numéricos).
• Los valores sirven para definir el color de un texto, el color de fondo de un
elemento de un borde, o, incluso el color de la sombra.
• Los valores se pueden definir de diferentes formatos:
– Nombre del color (green…).
– Proporción de cada valor de RGB en código hexadecimal precedido de
# (#FF0000).
– Proporción de cada valor RGB en decimales, de 0 a 255 (rgb(255, 0, 0)).
– Proporción de cada valor RGB en % (rgb(100%, 0%, 0%)).
– Proporción de cada valor RGB mas un valor de 0 a 1(alpha) que indica
la transparencia de cada color (rgba(255, 0, 0, 0`5)).
33

34. TEXTO
Algunas de las propiedades que modifican un texto, cuyo prefijo es “Font” o
“text” son:
 ALINEACIÓN DEL TEXTO (“text-aling”): Alineación del texto dentro del
elemento. Valores más comnes: left, right, center y justify.
 SUBRAYADO (“text-decoration”): dibuja una línea subrayándola por
encima o debajo, o tachándola. Valores: underline, none, overline y line-
through.
 TRANSFORMACIÓN MAYÚSCULAS/MINÚSCULAS (“text-transform”): los
valores pueden ser uppercase, lowercase y capitaliza (la primera letra de
cada palabra en mayúscula).
 TAMAÑO DEL TEXTO (“font-size”): tamaño del texto del contenido.
Valores numéricos con px, pt, %, em. También se pueden usar x-small,
small, médium, large or x-large.
34

35.  TIPO DE FUENTE (“font-family”): el valor es una lista con los nombres de
fuentes. Existen algunos genéricos, como “serif” que aplican la fuente por
defecto del navegador con dicho estilo.
 CURSIVA (“font-style”): el valor “italic” transforma el texto en cursiva u el
valor “normal” retira la propiedad.
 GROSOR DEL TEXTO (“Font-weight”):el valor “bold” transforma el texto en
negrita y el valor “normal” lo retira.
 SOMBREADO (“text-shadow”): se escribe con 4 valores separados por
espacios (derecha abajo difuminado color)
35

36. TAMAÑO
• El tamaño de un elemento viene definido por sus propiedades “width”
(ancho) y “height” (alto) que puede tener valores en px o %.
• Se puede poner como tamaño mínimo (min) o máximo (max).
• Para modificar la forma en la que el navegador considera un elemento,
hay distintas propiedades:
 DISPLAY: BLOCK. Se comporta como un elemento de bloque, <div> o
párrafo.
 DISPLAY: INLINE. Se comporta como un elemento en línea.
 DISPLAY: INLINE-BLOCK. Se establece como un bloque pero se comporta
como un elemento en línea.
36

37. BORDES
• Las propiedades que permiten añadir un borde son:
 BORDER-WIDTH. Añade el grosor en px y, opcionalmente, a cada lado con
left, right, top y bottom.
 BORDER-STYLE. Tipo de trazo con el que se dibuja. Los más comunes son:
solid, dashed, dotted o double.
 BORDER-COLOR. Color del borde. Valores como los que establecen el
color de un fondo o un texto.
 BORDER. Genérico, establece las tres propiedades anteriores a la vez. Se
debe establecer medida, estilo y color separados por un espacio.
 BORDER-RADIUS. Valor en px y establece el radio de curvatura de las
esquinas.
37

38. MÁRGENES
• Para establecer un espacio de separación entre elementos, o entre el
borde del elemento y su contenido, hay dos propiedades:
 MARGIN: espacio entre elementos, o el borde del elemento que lo
contiene. Se utilizan los px o %.
 PADDING: espacio interno entre un elemento y su contenido. Se utilizan
los px o %.
• Para modificar cada uno de los lados se utiliza: -left, -right, -top, -bottom.
• Estas propiedades pueden incluir el margen interno y el grosor del borde.
Para ello se utiliza la propiedad box-sizing con el valor “border-box” para
inlcuir el border y el padding.
38

39. POSICIONAMIENTO
• Se realiza según la estructura HTML establecida. Sin embargo, este
comportamiento se puede modificar para obligar a dibujar un elemento
en un lugar distinto, con la propiedad position:
 Position: static. Valor por defecto que realiza un salto de línea.
 Position: relative. El elemento ocupará el mismo espacio que si su valor
fuese static. Se puede desplazar con top, bottom, left y right; con los
valores en px.
 Position: absolute. El elemento se sitúa en la esquina superior izquierda
del elemento que lo contiene y se despega del documento.
 Margin-top y margin-left. Permiten mover el elemento.
 Position: fixed. Muy similar al absolute, con la excepción de que utiliza la
ventana como referencia para posicionarse, así siempre estará visible.
39

40. IMAGEN DE FONDO
 Background-image. Su valor será la ruta de imagen sobre el directorio.
Debe incluirse entre comillas simples y paréntesis, precedida de url.
 Background-position. Establece la alineación vertical y horizontal de una
imagen. Se establecen dos valores separados por espacios, la alineación
horizontal puede ser left, right o center; y la vertical top, center o bottom.
 Backround-repeat. El comportamiento de background-position se puede
modificar con los valores no-repeat, repeat-x (horizontalmente) o
repeat-y (verticalmente).
40