Diseño web con HTML y CSS

Buenas a todos los lectores de este blog, en este artículo os voy a hablar sobre el HTML y CSS, espero que os sea de ayuda para resolver dudas.

En primer lugar hablaremos sobre el lenguaje HTML, de este diremos que es un lenguaje de marcas que se utiliza para describir páginas web. Además el lenguaje HTML utiliza unas etiquetas que son las que describen el contenido de los documentos HTML.

-Lenguaje HTML.

- Estructura de un documento HTML.

Estos documentos se encuentran estrictamente organizados y su estructura básica es la siguiente:

        1.- Lo primero que pondremos en el documento será el DOCTYPE. Que nos ayudará a saber la versión del HTML que se utilizará en la página.

        2.- En segundo lugar la etiqueta que se declarará será la de html-/html, este es el elemento raíz del              documento y envuelve a todo el código. El inicio del código comienza con html y finaliza con /html.

        3.- La tercera etiqueta que se muestra en la imagen es head y define la cabecera del documento, se termina con /head.

                    . El título del documento se escribe en la etiqueta que esta dentro de head-/head: title-/title.

        4.- Finalmente la etiqueta que aparece es body-/body y representa la estructura el cuerpo de la página. El comienzo del cuerpo lo marca body y lo finaliza /body.

-Normas de HTML.

HTML cuenta con una serie de normas que sugieren como se deben escribir los documentos. Algunas consideraciones importantes son:

    .Los nombres de las etiquetas no son sensibles a mayúsculas o minúsculas: bOdy es lo mismo que body

    .Los nombres de los atributos no son sensibles a mayúsculas o minúsculas.

    .Los valores de los atributos si que pueden ser sensibles a mayúsculas o minúsculas.

    .Los nombres de las etiquetas no deben contener espacios en blanco.

    .Los valores de los atributos si pueden contener espacios si van entre comillas.

    .Las etiquetas que encierran contenido se deben cerrar: html ... /html.

    .Las etiquetas pueden anidarse, es decir, puede ir una etiqueta al lado de otra.

-Etiquetas para formateo de texto.

    Etiquetas de títulos:

h1 Define el título más importante.

h6 Define el título menos importante.

        Etiquetas de texto:

    Etiquetas de párrafos:

    Otras etiquetas:

    Hay muchas mas etiquetas como por ejemplo: hr, br, align="left", align="center"...

    Etiqueta Font: Color y tamaño de texto-fuente.

    Etiquetas para listas.

También están las listas de definiciones y se hacen con las etiquetas: dt que son las parejas de términos y sus definiciones con dd.

Las listas se pueden anidar unas dentro de otras, y también se puede elegir el tipo de lista añadiendo la propiedad type.

-Enlaces, links o hipervínculos.

Estos permiten saltar a otra página web o a otra zona dentro de la misma página web. Para incluir enlaces se utiliza la etiqueta: a href="URL" ... /a

-Imágenes.

Para insertar una imágen en la página web se utiliza la etiqueta img: img src="imagen".

El src sirve para poner la imagen que queremos que se vea.

-Tablas.

Estas permiten organizar la información en filas y columnas. Se determinan con la etiqueta: table-/table.

En estas se utilizan atributos como por ejemplo: bgcolor="color", bordercolor="color", valign="valor", height="número", width="número" ...

Los atributos que caben destacar es rowspan="valor" y colspan="valor".

-Frames.

Permiten dividir un documento en varias zonas, de forma que cada una de estas sea a su vez otro documento HTML.

-Formularios.

Estan formados por las cajas de texto y los botones que permiten introducir datos. Los formularios se introducen con la etiqueta form-/form, y se le puede añadir bastantes atributos como por ejemplo: action="scción a realizar", methop="post" o "get" ...

La mayoría de los controles del formulario se crean con la etiqueta input.

Para insertar botones y cajas de selección, de elección usaremos de nuevo la etiqueta input, con el atributo type. Para crear pestañas desplegables introduciremos la etiqueta select-/select.

-Lenguaje XTML.

Es una versión más estricta y remplaza a HTML ante su limitación de uso con las herramientas basadas XML. Se diferencia del HTML en:

    .Todos los nombres de etiquetas y atributos van en minúsculas.

    .Todos los valores de los atributos van entre comillas.

    .Todos los atributos tienen que tener un valor asignado.

    .Todas las etiquetas deben estar cerradas.

XTML ofrece 3 opciones DTD y 3 DOCTYPE:

    .Strict.

    .Transitional.

    .Frameset

-Hojas de estilo.

 Estos definen la forma de mostrar los elementos HTML y XML.

-Sintaxis básica de CSS.

La sintaxis básica para cualquier declaración de estilo está compuesta por 3 elementos:

    .Selector, es el elemento HTML al que le vamos a dar estilo.

    .Propiedad, atributo que sea modificar.

    .Valor, valor que deseamos asignar a la propiedad.

-Normas básicas a la hora de crear CSS.

    .Los selectores pueden aparecer indiviadualmente o agrupados, estos últimos separados por comas.

    .Las propiedades pueden agruparse, pero será necesario separar cada una de ellas con punto y coma.

    .El valor, representado a la derecha de los dos puntos, establece el valor de la propiedad.

-Aplicar CSS a un documento.

Se puede aplicar de 3 maneras:

1.- Con el atributo style, se aplica el estilo directamente sobre los elementos.

2.- Con la etiqueta style, esta etiqueta va dentro de head; dentro de la etiqueta style se tiene que escribir el atributo type: style type="text/css".

3.- Creando un enlace a una hoja de estilo externa. Se introducirá la etiqueta link en el head y aparte dentro de la etiqueta link se le tendrán que meter atributo como: link rel="STYLESHEET" type="text/css" href="nombredelarchivo.css".

-Atributos de las hojas de estilo.

 Para todos los elementos:

.Width, para poner un ancho al elemento.

.Height, para poner un alto al elemento.

Para fuentes:

Para párrafos:

Para fondos:

Atributos para cajas:

-Selector de clase.

Con el selector de clases class, se puede hacer que un mismo elemento pueda tener varios estilos y, además, que una mismo estilo pueda ser aplicado a varios elementos. Las clases se representan con un punto (".").

El selector ID es otro tipo de selector que permite seleccionar un elemento de la página a través del valor del atributo id. Los ID van con almohadillas ("#") y van dentro de los div (div id="").

-Elemento div.

Nos permite agrupar varias etiquetas. Añadiendole el selector id se le dará un estilo a ese conjunto de etiquetas.

Espero que os haya aportado información para que os sriva de ayuda para hacer vuestra página web, un saludo y hasta la próxima!!!!!!

Fotos sacadas del buscador de google aleatoriamente, la demás información es mia de mis apuntes.