Conceptos básicos HTML

Ainhoa Expósito Calamardo
Lidia Usero Zamora

ÍNDICE1. Lenguaje HTML
• Significado de HTML y utilidad
• ¿Por qué HTML no es un lenguaje de programación?
• Etiquetas
• Atributos
2. 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
3. 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

LENGUAJE HTML
o Significado de HTML y utilidad
o ¿Por qué HTML no es un lenguaje de programación?
o Etiquetas
o Atributos

SIGNIFICADO Y UTILIDAD
 El HTML es un tipo de lenguaje que se usa para el desarrollo de páginas
web. Las siglas significan: “hypertext markup language”, traducido en:
“lenguaje de marcas de hipertexto”.
 Gracias a él puedes crear tu propia página de Internet, ordenándola y
estructurándola a tu gusto e incluso añadir links a otras páginas.

¿POR QUÉ NO ES UN LENGUAJE DE
PROGRAMACIÓN?
 Aunque hayamos hablado de él como un tipo de lenguaje no lo es en
realidad, ya que no posee las características de los lenguajes de
programación como tal, no tiene la capacidad de control ni de tomar
decisiones como otros (Java, php…). Pues él funciona a través de un
conjunto de etiquetas que el ordenador interpreta.

ETIQUETAS
 Las etiquetas de HTML consisten en un nombre que las define en
minúscula y encerrado por los símbolos <>.

ATRIBUTOS
 Son valores que se añaden a una etiqueta para modificar su
comportamiento. Hay algunos que son globales y otros que se aplican
únicamente a unas etiquetas determinadas. Se añaden solamente a las
etiquetas de apertura, nunca a las de cierre.
 Los atributos se ponen entre los corchetes ("<" y ">") dentro de la
misma etiqueta de apertura.
 Algunos de ellos son el atributo title (se usa en enlaces) o el align (para
alinear).

ESTRUCTURA BÁSICA DE UNA PÁGINA
HTML
o Editores de texto plano y editores de documentos web. Ejemplos
o Elementos básicos de la estructura de un documento HTML
o Elementos de bloque y de línea
o Etiquetas básicas
o Atributos globales aplicables a cualquier etiqueta: id, class, style, title
o Listas y tipos
o Encabezados
o Tablas
o Imágenes
o Enlaces

EDITORES DE TEXTO PLANO Y EDITORES DE
DOCUMENTOS WEB. EJEMPLOS
 Se puede utilizar cualquier editor de texto plano excepto procesadores
de texto como Microsoft Word. Es conveniente elegir un editor de plano
adecuado que resalte los atributos y las etiquetas del documento
HTML.
 Los más conocidos son Notepad++ o NetBeans.

ELEMENTOS BÁSICOS DE LA ESTRUCTURA
DE UN DOCUMENTO HTML
 Todo documento HTML tiene una serie de elementos básicos que
definen su estructura. Muchos de los editores añaden esta estructura
por defecto al crear un documento.
 Los elementos son:
DOCTYPE Informar de qué tipo de
archivo se trata.
<html> Elemento raíz del documento.
<head> Se incluye información sobre
la página web.
<meta
charset=“UTF-
8”/>
Indica al navegador el tipo de
codificación que usa el editor.
<body>
Da paso al contenido de la
página.

ELEMENTOS DE BLOQUE Y DE LÍNEA
 Elementos de bloque: ocupan todo el ancho disponible y no permite
que otro elemento se coloque a su lado, tiene que situarse debajo de
este. Aunque pueden incluir otros elementos de bloque. Algunos
ejemplos de este tipo son <p> (párrafos), <div> (bloques de división).
 Elementos de línea: son aquellas que ocupan el espacio mínimo
horizontal, permitiendo a su vez que otros elementos se coloquen a su
lado, únicamente otros elementos de línea, texto e imágenes. Por
ejemplo: <img> (imagen), <strong> (resaltar en negrita).

ETIQUETAS BÁSICAS
<div> Divide la página en sectores.
<p> Representa un párrafo.
<span> Similar a <div>, a diferencia de que no define un bloque. Agrupa
textos y otros elementos en línea.
<u> El texto aparecerá subrayado.
<em> El texto aparecerá en cursiva.
<strong> El texto se resalta en negrita.
<sub> El texto elegido se convierte en un subíndice.
<sup> El texto elegido se convierte en un superíndice.
<br> Salto de línea en el texto. No contiene etiqueta de cierre.
<hr> Dibuja una línea de separación horizontal en la página. Tampoco
etiqueta de cierre.

ATRIBUTOS GLOBALES APLICABLES A CUALQUIER ETIQUETA: ID, CLASS,
STYLE, TITLE
ID
Identificar una etiqueta determinada en el
documento HTML. Puede contener letras, números
y los caracteres -,_,: y ….
CLASS
Agrupa varias etiquetas con un estilo común. Se
puede añadir varias clases a un mismo elemento si
se separan sus nombres con un espacio dentro de
este valor “class”.
STYLE
Se emplea para aplicar un estilo mediante CSS
directamente a un elemento.
TITLE
Sirve para elaborar una descripción corta de un
elemento, normalmente al pasar el ratón por
encima del mismo aparecerá el valor de dicho
atributo.

 Es una estructura la cual engloba a un grupo de elementos.
 Ordenadas: se representa por la etiqueta <ol> y admite atributos
como reversed (invierte el orden), start (comienzo de la lista) y type
(tipo de numeral se usará).
 Desordenadas: representadas por la etiqueta <ul>.
 Los elementos que componen la lista se representan con la etiqueta
<li>. Esta etiqueta es equivalente en cuanto a su contenido a un
párrafo, siendo por lo tanto un elemento de bloque.
LISTAS Y TIPOS

ENCABEZADOS
 Su función es crear títulos o subtítulos en las diferentes secciones de
una página web. Se definen por las etiquetas <h1> hasta <h6>.

TABLAS
 Una tabla es un elemento de bloque para organizar datos en filas y
columnas.
 Las filas de una tabla se representa con la etiqueta <tr>.
 Las columnas de una tabla con la etiqueta <td>.

IMÁGENES
 Son elementos en línea, se representa con la etiqueta <img>, sin etiqueta de
cierre.
 En el caso de ser una imagen externa:
Imagen en el subdirectorio img
Imagen en un servidor externo:
img/imagen.jpg
http://dominio.com/ruta/i
magen.jpg
../imagen.jpg
Imagen en el directorio anterior
(padre)

ENLACES
 Son relaciones a otras páginas ya sean locales o externas, su etiqueta es
<a>.
 Los atributos propios son: href (incluir una ruta hacia la página con la
que enlazará) target (indica a navegador que deberá abrir el enlace en
una página o enlace en una página).
 Un ejemplo sería:
< a href=“https://google.com”>Enlace a Google</a>

PERSONALIZACIÓN DEL ESTILO: CSS
o Significado de CSS y utilidad
o Formas de colocación del código CSS
o Selectores básicos
o Colores
o Texto
o Tamaño
o Bordes
o Márgenes
o Posicionamiento
o Imagen de fondo

SIGNIFICADO DE CSS Y UTILIDAD
 CCS son las siglas de Cascading Style
Sheets (Hojas de Estilo en Cascada).
 Describe la presentación de los
documentos estructurados de Html en
páginas webs.

FORMAS DE COLOCACIÓN DEL CÓDIGO CSS
 En un atributo HTML con el atributo style :
 Con la etiqueta <style> :
 En un archivo independiente:

SELECTORES BÁSICOS
Selectores por tipo
Se escribe solo el
nombre de una
etiqueta HTML.
Selectores de clase
El nombre debe ir
precedido de un punto
y con el tributo class.
Selectores de id
Corresponde al
nombre del
identificador de un
elemento es decir al
valor de su atributo id.

COLORES
 Para cambiar el color de texto: la propiedad color.
 Para cambiar el fondo: la propiedad background-color.
 Métodos para incluir un valor cromático.
Nombre Blue, red, green…
Rgb en hexadecimal
precedido de almohadilla
#FF000.
Rgb en porcentajes rgb(100, 0, 0).
Valor RGB más un valor
de 0 a 1
rgba (225, 0, 0, 0.5).

TEXTO
Alineación
Subrayado
Tamaño texto
Sombreado
Cursiva
Grosor de
texto
text -align
text-
decoration
font-size
text shadow
fond-style
font-weight

TAMAÑO
 Propiedades width (ancho) y height (alto). Pueden tener un valor
relativo (en píxeles) o absoluto (en porcentajes).
 Para poder averiguar que tamaño ocupa un elemento con respecto al
espacio disponible se establecen colores de fondo.
 Se puede establecer un tamaño máximo (max-width, max-height) o
mínimo (min-width, min-height).

BORDES
Border-width
Añade grosor al borde de los 4
lados.
Border-style
Tipo de trazo con el que se dibuja
el borde.
Border-color
Define el color de borde.
Border
Permite establecer las tres
propiedades anteriores a la vez.
Border-radius
Radio de curvatura, se mide
en pixeles.

MÁRGENES
margin
Espacio entre un elemento y los que lo
rodean, o el borde del elemento que lo
contiene. Se puede medir en px o
porcentaje.
padding
Margen interno entre un elemento y su
contenido. Mismos valores que la
propiedad anterior.

MÁRGENES
 Estas propiedades modifican por defecto los cuatro lados del elemento,
pero se pueden modificar individualmente mediante los sufijos –left, -
right,-top, -bottom.
 Establecen además las cuatro medidas separas por espacios.

POSICIONAMIENTO
Position static
Por defecto, después de cada elemento de bloque realiza un
salto de línea y añade debajo el siguiente.
Position relative
Ocuparía el mismo espacio que si tuviese el valor static. Se
puede desplazar la posición sin alterar al resto de
elementos (top, bottom, left y right).
Position absolute
El elemento se coloca en la esquina superior izquierda del
elemento que lo contiene. Esto el programa lo entiende como
si ese elemento no estuviera ocupando espacio en el
documento.
Margin-top y
margin-left
Mover un elemento.
Position fixed
Similar a absolute, pero utiliza la ventana y no el
documento como referente. Por lo que el elemento siempre
estará visible.

IMAGEN DE FONDO
 Blackground-image: su valor será la ruta a la imagen desde el
directorio donde se encuentra el archivo CSS background-image:
url(“../img.png”).
 Blackground-position: si la imagen es mas pequeña que el elemento,
esta propiedad establece la alineación vertical y horizontal de la misma
left, center, right, bottom, right.
 Blackground-repeat: si la imagen es más pequeña que el elemento, se
repetirá hasta ocupar todo el espacio no-repeat, repeat-x, repeat-y.

MUCHAS GRACIAS POR SU ATENCIÓN

Conceptos básicos HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Conceptos básicos HTML

Similar a Conceptos básicos HTML (20)

Último

Último (20)

Conceptos básicos HTML