Html

HTML
Carlos Verdú y Guillermo Campaña

LENGUAJE HTML
Significado de HTML y utilidad
El lenguaje HTML (hypertext markup language) consiste en un conjunto de
etiquetas predefinidas que el navegador web interpreta a la hora de
construir una página para su visualización. Sirve para estructurar una
página web.
¿Por qué HTML no es un lenguaje de programación?
HTML no es un lenguaje como tal ya que carece de características
necesarias para un lenguaje como las estructuras de control y la toma de
decisiones.

Etiquetas
Constan de un nombre que viene encerrado por los símbolos < y > que
tienen funciones y usos específicos y se utilizan para escribir código HTML.
Cuando utilizas una etiqueta es necesario cerrarlas utilizando una etiqueta
de cierre igual que la de apertura pero con el símbolo / delante del nombre.
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.
Por ejemplo, el elemento <a> inserta un vínculo en el documento

ESTRUCTURA BÁSICA DE UNA
PÁGINA HTML
Editores de texto plano
Guardan tan solo los caracteres escritos, pero no información sobre el
tamaño o tipo de letra utilizado y otros detalles que realmente no son
código. Como el bloc de notas o Notepad.
Editores de documentos web
Es una aplicación diseñada con el fin de facilitar la creación y edición de
documentos HTML. Pueden ser de pago como Dreamweaver o gratis
como Kompozer o Sublime Text.

Elementos básicos de la estructura de un documento HTML
DOCTYPE
Informa al navegador de qué tipo de archivo se
trata. Se incluye siempre como la primera
etiqueta del documento. Es la única que se
escribe en mayúsculas
<html>
Elemento que contiene todo el documento HTML
.Se define justo después del elemento
DOCTYPE.
<head>
Es el primer elemento que aparece en el interior
de <html>. Dentro de esta etiqueta se incluye
información general sobre la página web dirigida,
por lo general, al navegador o a buscadores web.
<meta charset=“UTF-
8”>
Se emplea para indicar al navegador el tipo de
codificación de caracteres que utiliza el editor.
Para no tener problemas al utilizar caracteres
especiales, se recomienda aplicar UTF-8 como
valor
<body>
Se añade a continuación de <head>.El contenido
que se mostrará al usuario deberá incluirse
dentro del elemento <body>

Elementos de bloque
- Ocupan por defecto todo el ancho disponible dentro del elemento que los
contiene.
- Los elementos situados tras un elemento de bloque siempre se sitúan
debajo de este, aunque se modifique su ancho y puedan disponerse uno
junto al otro.
- Pueden contener otros elementos de bloque y otros elementos en línea.
- Los párrafos (<p>), los bloques de división (<div>), las listas (<ul> , <ol>) y
las tablas (<table>) constituyen ejemplos de este tipo de elementos.
Elementos en línea
- Ocupan tan solo el ancho necesario, que viene definido, por ejemplo, por la
cantidad de texto incluido o por el tamaño de la imagen que se debe
mostrar.
- Los elementos en línea, seguidos, se sitúan uno junto al otro hasta que
ocupan el ancho disponible.
- Estos elementos solo pueden contener otros elementos en línea, texto e
imágenes.
- Las imágenes (<img>), los enlaces (<a>), los botones (<button>) y el texto

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. Los párrafos
establecen márgenes superiores e
inferiores con respecto al resto del
contenido
Agrupar elementos en
línea (<span>)
Esta etiqueta es similar a <div>con la
diferencia de que no define un bloque. Se
utiliza para.agrupar textos y otros
elementos en línea
Subrayado (<u>) El texto aparecerá subrayado
Cursiva (<em>) El texto aparecerá en cursiva
Negrita (<strong>) El texto aparecerá en negrita
Subíndice (<sub>) Representa un subíndice
Superíndice (<sup>) El texto se convierte en un superíndice
Salto de línea (<br>)
Fuerza un salto de línea en el texto. No
tiene etiqueta de cierre.
Separación horizontal
(<hr>)
Elemento de bloque que dibuja una línea
de separación horizontal en la página. No
tiene etiqueta de cierre.

Atributos globales aplicables a cualquier etiqueta
Id
Se utiliza para identificar una etiqueta de forma
única en el documento HTML. Su valor debe
empezar por una letra y solo puede contener
letras, números y los caracteres -,_,:,..
class
Se usa para agrupar varias etiquetas bajo un
estilo común cuando se aplica código CSS a la
página.
style
Se emplea para aplicar un estilo mediante CSS
directamente a un elemento
title
Sirve para realizar una descripción corta de un
elemento

Listas y tipos
Existen dos tipos: ordenadas y desordenadas. Se representan con la
etiqueta <li>
En el caso de que la lista no mantenga ningún orden, se le llamaría lista
“desordenada”. Utilizan la etiqueta <ul>. Delante de estos elementos el
navegador inserta círculos negros pero se puede modificar mediante
propiedades CSS.
Si una lista sigue un orden concreto, se trataría de una lista “ordenada”.
Utilizan la etiqueta <ol> y admite varios atributos como reserved (invertir el
orden), start (establece en que número empieza la lista) y type que indica
que tipo de número se va a utilizar
Encabezados
Están definidos por las etiquetas <h1> hasta <h6>.
Según el número de etiqueta, el encabezado destacará más o menos, lo
cual estará relacionado con su importancia.

Tablas
Se representa con la etiqueta <table>
La etiqueta <tr> representa las filas, <td> las columnas y <border> se utiliza
para dibujar los bordes
Imágenes
Utiliza la etiqueta <img> la cual no va acompañada por una etiqueta de
cierre.
El archivo correspondiente a la imagen se referencia estableciendo la ruta
al mismo con el atributo src. También es recomendable incluir el atributo alt,
que permite incluir un texto alternativo que describe la imagen y que se
mostrará en caso de que el navegador, por algún motivo, no pueda
mostrarla
Enlaces
La etiqueta utilizada para crear un enlace es <a>, y esta englobará un texto
o una imagen que servirá de enlace a la ruta especificada.
Los atributos propios de esta etiqueta son href, que permite incluir la ruta
hacia la página con la que enlazará, y opcionalmente target, cuyo valor
_blank indicará al navegador que deberá abrir el enlace en una página o
pestaña nueva para evitar salir de la que se está visualizando en el
momento.

Personalización del estilo: CSS
Significado de CSS y utilidad
CSS es el lenguaje utilizado para definir el modo de presentar el código HTML de una
página web.
Entre otras cosas, la utilización de CSS permite separar la estructura de un documento
(HTML) de su diseño o presentación (CSS).
Formas de colocación del código CSS
Existen tres formas distintas de vincular código CSS a una estructura HTML:
 EN UN ATRIBUTO HTML CON EL ATRIBUTO STYLE
El atributo style se puede incluir en cualquier etiqueta y permite insertar directa-
mente código CSS. A su vez, las instrucciones incluidas se separarán con (;)
 CON LA ETIQUETA STYLE
Permite establecer un diseño general que afectará a todo el documento HTML en el
que se encuentre la etiqueta. Esta se suele incluir en la cabecera del documento
 EN UN ARCHIVO INDEPENDIENTE
Es la forma mas recomendada de insertar el código. Este archivo, que tendrá una
extensión .css, se situará en un directorio diferente al de los documentos HTML.

Sectores básicos
Afectarán a determinados elementos del documento HTML. Existen varios:
SELECTORES POR TIPO: se escribe únicamente el nombre de una
etiqueta HTML. Las propiedades modificadas en este selector afectarán a
todos los elementos del mismo tipo en el documento HTML.
SELECTORES DE CLASE: El nombre del selector debe ir precedido de un
punto (.) y representará una clase añadida a uno o varios elementos HTML
mediante el atributo class. Las propiedades modificadas en el interior
afectarán a todos los elementos para los que se haya establecido dicha
clase como atributo
SELECTORES DE ID: Corresponde al valor de su atributo id. Afecta
solamente a un elemento. En el selector CSS, el nombre del identificador
debe ir precedido de almohadilla (#).

Colores
Modifica el color de fondo del elemento en cuestión, la propiedad
correspondiente es background-color.
Algunos de los métodos que permiten establecer un valor cromático son
los siguientes:
Nombre del color: blue, red, orange, green...
Proporción de cada valor RGB en código hexadecimal precedido de
almohadilla: #FFOOOO
Proporción de cada valor RGB en decimales, de O a 255: rgb(255, O,
O),
Proporción de cada valor RGB en porcentajes: rgb(100%, 0%, 0%).
Proporción de cada valor RGB, más un valor de O a 1 (alpha) que
indica la transparencia de dicho color: rgba(255, 0, 0, 0.5).

Texto
Algunas de las propiedades que modifican el aspecto de un texto, cuyo
prefijo es font o text, así como sus posibles valores, son las siguientes:
Subrayado(text-decoration): Los valores pueden ser underline
(subrayado), none (quita la propiedad de subrayado si la tuviera).
Cursiva(front-style): El valor italic transforma el texto en cursiva, mientras
que el valor normal retira dicha propiedad.
Grosor del texto (font-weight): . El valor bold transforma el texto a negrita
y normal la elimina.
Sombreado (text-shadow): Un ejemplo de sombreado desplazado 4
píxeles de la izquierda, 3 hacia abajo, con un difuminado de 5 píxeles y de
color gris: text-shadow: -4px 2px 5px grey;.

Tamaño
Para modificar la forma en la que el navegador considera un elemento, se
pueden establecer las siguientes propiedades:
display: block. El elemento afectado se comporta como un elemento de
bloque, como un divisor (<div>) o un párrafo.
display: inline. El elemento se comporta como un elemento en línea, si se
aplica a varios (<div>) seguidos, estos se situarían uno junto a otro.
display: inline-block. El elemento se establece como un bloque pero se
comporta como un elemento en línea, al estilo de una imagen. Los cambios
de tamaño tienen efecto en los elementos con esta propiedad.
El tamaño de un elemento viene definido por sus propiedades width (ancho)
y height (alto). El tamaño mínimo de un elemento se puede establecer
mediante las propiedades min-width y min-height . Los valores se
establecen en píxeles o en porcentajes.

Bordes y márgenes
Border-width Añade grosor al borde de los cuatro lados.
Border-style Tipo de trazo con el que se dibuja el borde
Border-color indica el color del borde
Border-
radius
hace referencia al radio de curvatura de las esquinas de un
elemento.
margin. Representa el espacio entre un elemento y los elementos que lo
rodean, o el borde del elemento que lo contiene. Como valor, se utiliza una
unidad de medida en píxeles (px) o porcentaje (con respecto al espacio total
disponible).
padding. Representa el espacio o margen interno entre un elemento y su
contenido. De esta manera, es el elemento contenedor el que fuerza que los
elementos interiores se despeguen de su borde. Tiene los mismos valores que
la propiedad margin.
Para modificar de manera individual cada uno de los lados, se pueden utilizar
los sufijos -left, -right, top y -bottom

Posicionamiento
position: static Es el valor que después de cada elemento de
bloque, realiza un salto de línea para añadir debajo
el siguiente elemento
position: relative Ocupará el mismo espacio que si su valor fuera
static, se puede obligar al navegador a desplazar la
posición donde lo dibujará
position: absolute El elemento se sitúa en la esquina superior
izquierda del elemento
margin-top y margin-
left
Si se asignan los valores left: 0px; bottom: 20px; el
elemento se situa pegado al lado izquierdo de la
página y a veinte píxeles de distancia de la parte
inferior del documento
position: fixed Es muy similar a absolute, con la diferencia de que
utiliza la ventana, y no el documento, como
referencia para posicionarse

Imagen de fondo
Para establecer una imagen de fondo en un elemento, se utilizan estas
propiedades:
background-image. Su valor será la ruta a la imagen desde el directorio
donde se encuentra el archivo CSS. Esta ruta debe incluirse entre comillas
simples y paréntesis, precedida de la palabra url, así: background-image:
url('../img.png);
background-position. En el caso de que la imagen sea más pequeña que
el elemento, esta propiedad establece la alineación vertical y horizontal de
la misma. Se establecen dos valores separados por espacio.
background-repeat. Si la imagen es más pequeña que el elemento, se
repetirá, por defecto, horizontal y verticalmente hasta ocupar todo el espacio
disponible.

Html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Html

Similar a Html (20)

Último

Último (20)

Html