Presentación Introducción al lenguaje HTML

ÍNDICE
1. 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

1. Lenguaje HTML
• Significado de HTML y utilidad
Existen muchos programas diferentes que pueden crear
un sitio web por ti; unos son más precisos que otros. Sin
embargo, si quieres que todo salga como tenías pensado,
tienes que hacerlo tú mismo.
HTML es el código que se utiliza para el desarrollo de
páginas de Internet. Se trata de la siglas que corresponden
a HyperText Markup Language, es decir, Lenguaje de
Marcas de Hipertexto.

• ¿Por qué HTML no es un lenguaje de
programación?
Porque su sintaxis tan sólo consiste en
“mostrarnos las cosas”, nada más, no ejecuta
ninguna rutina o programa.
El código no tiene que interpretar funciones
simples o complejas, a diferencia de los lenguajes de
programación, sino tan sólo llevarnos a uno u otro
sitio, que hemos predeterminado previamente.

• Etiquetas
A las instrucciones de este código se les llama
etiquetas formadas por el nombre que las define
encerrado por los símbolos < y >.
En general existen dos tipos de etiquetas;
- Las que contienen texto, y por ello deben cerrarse
para definir qué engloban, para esto se emplea una
etiqueta de cierre, idéntica a la de apertura pero con
el símbolo / ante el nombre.
Es el caso de la etiqueta de párrafo:
<p> contenido del párrafo </p>

- Las que representan partes de una
estructura, que no se pueden cerrar
porque no contienen nada en su
interior pero conviene incluir el
símbolo / precedido de un espacio, al
final de la única etiqueta presente para
indicar que esta finaliza.
Por ejemplo:
<br />
•Salto de línea
<img />
•Imagen

Un atributo es la información adicional que se le puede
agregar a una etiqueta.
Los atributos se encuentran en la etiqueta de apertura y
tienen un nombre que define la propiedad que modifican y un
valor que va siempre entre comillas, siguiendo este modelo:
<etiqueta atributo= " valor " > Contenido </etiqueta>
Por ejemplo:
<img src=“imagen.jpg” alt=“imagen de prueba” />
•Atributos

2. Estructura básica de una página
HTML
• Editores de texto plano y editores de documentos web
Son programas que permiten editar el código.
Los de texto plano son los más básicos; guardan tan
solo los caracteres escritos, pero no el formato, es
decir, información sobre el tamaño o tipo de letra
utilizado. Por ejemplo, blog de notas.
Existen también programas denominados editores de
HTML, que tienen la misma función, pero disponen de
una estructura predeterminada que sirve como guía.
Por ejemplo, Brackets.

Por otro lado, en los editores de documentos web,
el usuario no tiene por qué teclear las etiquetas del
lenguaje de marcado. Permite añadir todos los
elementos deseados, y simultáneamente el editor
transforma la vista por pantalla en código HTML
perfectamente configurado.
Es el caso de Kompozer, Mozilla Composer etc.

• Elementos básicos de la estructura de un
documento HTML
o DOCTYPE. Informa al navegador de qué tipo de archivo se trata. Es
la primera etiqueta del documento y la única que va en mayúsculas.
o <html>. Elemento principal que comprende a todo el documento
HTML. Va siempre tras el DOCTYPE.
o <head>. Incluye la información general de la página, por lo general
al navegador. El único elemento visible es <title>; el título.
o <meta charset=“UTF-8” />. Indica el tipo de codificación de
caracteres que se va a utilizar. Se recomienda aplicar UTF-8 como
valor.
o <body>. Se sitúa después de <head>, e introduce el contenido que
se mostrará al usuario.

En resumen, así sería la estructura básica de un documento:

• Elementos de bloque y de línea
o Elementos de bloque
Ocupan todo el ancho disponible en el elemento que los
contiene. Los elementos posteriores se situarían debajo de
estos, aunque se les modificase el ancho y puedan aparecer
juntos. Algunos pueden contener otros elementos de bloque o
de línea.
Por ejemplo:
Párrafos
<p>
Bloques de división
<div>
Tabla
<table>
Listas
<ul> , <ol>

o Elementos de línea
Ocupan solo el ancho necesario que está definido por la cantidad
de texto o el tamaño de la imagen a mostrar. A diferencia de los de
bloque, los elementos de línea aparecen alineados hasta ocupar el
ancho disponible.
Pueden contener otros elementos en línea, imágenes o texto.
Por ejemplo:
Imagen
<img>
Enlace
<a>
Botones
<button>
Texto resaltado
<strong>

• Etiquetas básicas
o División <div>. Divide la página en secciones.
o Párrafo <p>. Los párrafos establecen márgenes superiores e
inferiores con respecto al resto del contenido.
o Agrupar elementos en línea <span>. Es similar a <div>, solo
que no define un bloque. Se utiliza para agrupar textos u
otros elementos de línea.

o Subrayado <u>
o Cursiva o énfasis <em>
o Negrita o texto destacado <strong>
o Subíndice <sub>. El texto que engloba aparece en un
tamaño menor y desplazado hacia abajo.
o Superíndice <sup>
o Salto de línea <br />. No tiene etiqueta de cierre.
o Separación horizontal <hr />. No tiene etiqueta de cierre.

• Atributos globales aplicables a cualquier etiqueta:
id, class, style, title
o El atributo global id define un identificador único (ID) el cual
no debe repetirse en todo el documento. Su propósito es
identificar el elemento al vincularlo en hojas de estilo (con
CSS). Se utiliza con una # delante: #id
o Class es una lista de las clases del elemento separada por
espacios . Las clases permiten a CSS y Javascript seleccionar y
acceder a elementos específicos a través de los selectores de
clase. Se emplea con un . Delante: .class

o Style contiene declaraciones de estilo CSS a ser aplicados a un
elemento. Es recomendado para los estilos ser definidos en
un archivo o archivos separados.
o Title representa información consultiva para el elemento, la
cual podría actuar como descripción, título, etiqueta,
instrucción, etc. Los navegadores usualmente mostrarán esta
información como una pequeña caja de texto en respuesta a
alguna acción como posar el ratón sobre el elemento.

• Listas y tipos
Son estructuras que engloban un conjunto de
elementos que la componen. Existen dos tipos, los
elementos de ambos tipos se representan con la
etiqueta <li>:
• Lista ordenada. <ol> que admite varios atributos
como reversed (para invertir el orden), start (para
establecer el punto de inicio), type (tipo de numeral:
números normales o romanos, letras)…

• Lista desordenada. <ul> No presenta ningún
orden por lo que carece de sentido usar
atributos.
También existen listas anidadas en las que se
escribe <li> y a continuación se incluye el texto
que precederá a la lista y se añaden las
etiquetas de la lista interna. La etiqueta <li />
se debe cerrar al final de la lista.

• Encabezados
Párrafos especiales destinados a la creación de títulos
para secciones y subsecciones de una web. Se emplean
las etiquetas desde <h1> hasta <h6>. El número de las
mismas determina la importancia del encabezado siendo
el 1 el más importante.

• Tablas
<table> se emplea para estructurar una serie de
datos según un esquema de filas y columnas.
Filas: <tr>
Columnas: <td>
Se puede aplicar el atributo border para dotar a la
tabla de un borde entre las celdas. O colspan y
rowspan para que una celda ocupe varias columnas o
filas respectivamente.

• Imágenes
Las imágenes en HTML son elementos en línea.
Se representan con <img>, etiqueta sin cierre. El
archivo correspondiente a la imagen de referencia
estableciendo la ruta al mismo con el atributo src y
el atributo alt que permite incluir un texto
alternativo que describa la imagen en caso de que
no se muestre.
Se debe indicar el directorio donde se encuentra
la imagen, utilizando una / para separar
directorios y .. para subir en la jerarquía.

• Enlaces
Son vínculos a otras páginas que pueden ser
locales (en el mismo servidor) o externos (en un
servidor externo).
Su etiqueta es <a>.
Se pueden usar los atributos href y target con
valor _blank para que se abra el enlace en una
pestaña nueva.
Por ejemplo:
<a href=“https://google.com”>Enlace a Google<a />

3. Personalización del estilo: CSS
• Significado de CSS y utilidad
CSS es el lenguaje que define cómo se presenta el
código HTML de una página web. De forma que
permite separar la estructura de un documento HTML
de su diseño o presentación CCS.
CSS responde a las siglas inglesas Cascading
Stylesheets u Hojas de estilo en cascada.

• Formas de colocación del código CSS
Existen tres maneras de relacionar un CSS a un
documento HTML:
• Con el atributo style
Se puede incluir en cualquier etiqueta, y permite
introducir directamente código CSS como valor de dicho
atributo. El empleo de este es desaconsejable a no ser que
sea para realizar pruebas puntuales.
• Con la etiqueta <style>
Permite establecer un diseño general que se aplicará a
todo el documento HTML. Se suele incluir en la cabecera,
dentro de la etiqueta <head>.
Tampoco es el más recomendado ya que solo afectará
al documento actual y no podrá reutilizarse en otros.

• En un archivo independiente (.css)
Es decir, mediante un archivo externo
que tendrá una extensión .css que se
situará, generalmente, en un directorio
diferente al del HTML.

• Selectores básicos
Afectan a determinados elementos del documento y
contienen propiedades que modifican su aspecto.
• Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya
etiqueta HTML coincide con el valor del selector. Por
ejemplo, (p) de párrafos y (a) de enlaces.
p{
color: red;
}

• Selectores de clase
La principal característica de este selector es que en una misma
página HTML varios elementos diferentes pueden utilizar el mismo
valor en el atributo class. El nombre de la clase sólo irá precedido por
un punto en el selector CSS.
.clase1 {
color: yellow;
}
• Selectores de clase
El selector de ID permite seleccionar un elemento de la página a
través del valor de su atributo id. Este tipo de selectores sólo
seleccionan un elemento de la página porque el valor del atributo id no
se puede repetir en dos elementos diferentes de una misma página.
#id1 {
color: purple;
}

• Colores
Para el color del texto color
Para el color de fondo background-color
Sus valores se pueden definir:
Nombre del color blue
Código hexadecimal #FF0000
Decimales rgb(255,0,0)
Porcentajes rgb(100%, 0%, 0%)
Un valor del 0 al 1
(transparencia)
rgba(255,0,0,0.5)
Ejemplos

• Texto
Se utilizan los prefijos font o text; de forma que:
Alineación del texto text-align left, right, center, justify
Subrayado text-decoration underline, none, overline, line-
through
Transformación
mayúsculas/minúsculas
text-transform uppercase, lowercase, capitalize
Tamaño de texto font-size px, pt, xsmall, small, medium, large,
xlarge
Tipo de fuente font-family serif, sans-serif, monospace
Cursiva font-style italic, normal
Grosor del texto font-weight bold, normal
Sombreado text-shadow -4px 2px 5px grey
ValoresPropiedades

• Tamaño
Se pueden redimensionar distintos elementos en
HTML, como imágenes o botones. Mediante las
propiedades:
• Width, para el ancho.
• Height, para el alto.
Sus valores se expresan en píxeles o en porcentajes.
Si se quiere alcanzar el tamaño mínimo o máximo
del elemento se utiliza el prefijo min o max delante de
estas propiedades, separadas por un guión.

También se puede modificar la forma en la que
el navegador considera un elemento mediante las
siguientes propiedades.
• Display: block. El elemento se comporta como
un párrafo o un <div>.
• Display: inline. El elemento se comporta como
un elemento en línea.
• Display: inline-block. El elemento se establece
como un bloque pero se comporta como un
elemento en línea.

• Bordes
border-width 2px, por ejemplo
border-style solid, dashed, dotted, double
border-color yellow, por ejemplo
border 2px solid red, por ejemplo
border-radius 5px 8px 5px 8px, por ejemplo
ValoresPropiedades

• Márgenes
Existen dos propiedades:
• margin. Espacio entre un elemento y los
elementos que lo rodean. Sus valores se miden en
px o en porcentajes.
• padding. Espacio entre un elemento y su
contenido. Acepta los mismos valores que margin.
Se puede modificar de forma individual cada
uno de los lados añadiendo la propiedad -left, -
right, -top, -bottom o simplemente añadiendo
espacios. Por ejemplo: margin: 10px 5px 20px 5px

También existe la posibilidad de que las
propiedades de height y width incluyan el
margen interno y el borde restándoselos al
espacio disponible para el contenido.
Para ello se emplea la propiedad CSS box-
sizing con el valor border-box.

• Posicionamiento
position: static
Es el valor por defecto, después de un
elemento de bloque inserta un salto
de línea.
position: relative
Obliga al navegador a desplazar la
posición por defecto de un elemento,
sin que la del resto se vea afectada.
position: absolute
El elemento se sitúa en la esquina
superior izquierda del elemento que
lo contiene como si estuviese en una
capa superior.
margin-top y margin-left Permite mover un elemento.
position: fixed
Mueve el elemento con respecto a la
ventana y no al documento, de forma
que quedan fijos incluso al hacer
scroll en la página.
Propiedades y sus valores

• Imagen de fondo
background-image url(‘../img.png’);
background-position
Horizontal: left, center, right
Vertical: top, center, bottom
background-repeat no-repeat, repeat-x, repeat-y
ValoresPropiedades

Trabajo realizado por:
-Andrea Azaña-Sanz López
-José Domingo Gómez Martínez
2ºBachillerato B, IES Bernardino del Campo

Presentación Introducción al lenguaje HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Presentación Introducción al lenguaje HTML

Similar a Presentación Introducción al lenguaje HTML (20)

Último

Último (20)

Presentación Introducción al lenguaje HTML