Una comunidad para vos, una comnidad para todos.
 
ÍndiceÍndice  PortalPortal  CalendarioCalendario  GaleríaGalería  FAQFAQ  BuscarBuscar  MiembrosMiembros  Grupos de UsuariosGrupos de Usuarios  RegistrarseRegistrarse  ConectarseConectarse  

Conectarse
Nombre de Usuario:
Contraseña:
Entrar automáticamente en cada visita: 
:: Recuperar mi contraseña

Últimos temas
» Me presento
Vie Nov 30, 2012 6:23 am por Luzanic

» Nueva Nena
Jue Jun 23, 2011 11:47 pm por FRANKKOKO

» Tutorial básico de HTML / CSS.
Vie Jun 03, 2011 6:33 pm por FRANKKOKO

» Creando un agujero negro
Miér Jun 01, 2011 10:21 pm por FRANKKOKO

» Creando un océano
Miér Jun 01, 2011 10:20 pm por FRANKKOKO

» Creando un planeta
Miér Jun 01, 2011 10:19 pm por FRANKKOKO

» Código de barras
Miér Jun 01, 2011 10:17 pm por FRANKKOKO

» Cinta adhesiva
Miér Jun 01, 2011 10:17 pm por FRANKKOKO

» Creando césped
Miér Jun 01, 2011 10:16 pm por FRANKKOKO


Comparte | 
 

 Tutorial básico de HTML / CSS.

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
FRANKKOKO
Nivel 4 - Cabo
avatar

Mensajes : 275
Puntos : 658
Reputación : 60
Fecha de inscripción : 03/04/2011

MensajeTema: Tutorial básico de HTML / CSS.   Vie Jun 03, 2011 6:33 pm

Antes de meternos
en materia, vamos a repasar brevemente los conceptos más básicos y a
establecer los principios por los que me regiré a la hora de redactar el
resto de tutoriales.
Lo primero es aclarar que estos tutoriales
no van solo de HTML. También trabajaremos con hojas de estilo, las CSS,
que serán las encargadas de definir, como su nombre indica, los estilos
de las etiquetas de HTML. Por poner un ejemplo, en HTML utilizaremos la
etiqueta o tag < p > para escribir dentro un texto que va a ocupar
un párrafo en nuestro navegador, y en la hoja de estilo definiremos por
ejemplo el color y tamaño de la letra del texto de ese párrafo.
Como a través de los tutoriales definiré
elementos tanto de HTML copmo de CSS, para que no haya dudas, todas las
definiciones de elementos de HTML irán sobre fondo azul oscuro, y las de
CSS sobre fondo negro.
Muchas de las definiciones son extraidas tal
cual o simplificadas de la Recomendación de W3C sobre las Hojas de
Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación
del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de
esta web.
NOTA: Todas las etiquetas o tags que se
representan entre los signos de <> han de escribirse sin ningun
espacio en su interior, aunque en la representacion aparezcan para que
se lean con mayor claridad.

Todo documento HTML tiene una
estructura que lo identifica claramente. Son unas cuantas etiquetas de
apertura y cierre que lo identifican y lo dividen en partes con
funcionalidades diferentes.






























< HTML > < / HTML >

Son las etiquetas primera y
última de nuestro código html. Antes de < HTML > no puede ir nada
que deseemos que el navegador interprete como codigo HTML, y despues de
< / HTML > tampoco.
< HEAD > < / HEAD >
Define el principio y fin de la
seccion de cabecera, donde aparecen informaciones sobre el documento,
entre ellas el título, autor...
< BODY > < / BODY >
Define el principio y el fin del cuerpo del documento. Todo el código de nuestra web irá entre estas dos etiquetas.
Asi, un brevisimo ejemplo de tu primera web podria ser el fichero ejemplo1.html:
Donde la linea < p >Hola< /p >
especifica que aparezca en pantalla un párrafo con la palabra hola y la
linea < title > especifica documentalmente el titulo de nuestra
pagina (en la parte superior izquierda de la ventana del navegador
aparecerá este título).
NOTA: Tanto el documento HTML como la hoja
de estilo, hay que escribirlos sobre un fichero de texto sin formato. Un
editor que podria valer es el notepad, por ejemplo. El nombre del
documento HTML debe tener extension .htm o .html y el de la hoja de
estilo, .css.
Vamos a aprender algunas formas de escribir
contenidos en nuestra página, pero antes de meternos de lleno en
elementos de HTML voy a definir una distinción importante entre ellos:





























HTML contiene dos tipos de elementos, los elementos "en bloque" o "de bloque" y los elementos "en linea" o "a nivel de texto".
Elementos "en linea":
Solo pueden contener datos y
otros elementos en linea. Se representan de izquierda a derecha, es
decir, un elemento en linea se posiciona a la derecha del ultimo
elemento en linea mostrado, y asi sucesivamente.
Elementos "en bloque":
Pueden contener otros elementos
en bloque y elementos en linea. Se representan de arriba a abajo, es
decir, un elemento en bloque se posiciona debajo del ultimo elemento
posicionado en la página. Esto es asi porque provocan un salto de linea
al principio y al final de su representacion.
NOTA: Tan solo por las dos
definiciones, se entiende que el concepto de elemento de bloque implica
mayor tamaño que el de elemento en linea. De hecho, utilizaremos los
elementos de bloque para que sean contenedores, tanto de otros elementos
de bloque como de elementos en linea.
Puede que ahora sea un poco lioso, pero a
medida que avancemos todo se verá más facil. Como ejemplo rápido,
diremos que el elemento HTML < p > es un elemento en linea que
sirve para mostrar un parrafo de texto y que, de contener otros
elementos, serán elemento en linea, mientras que < div > es un
elemento de bloque que sirve para especificar un contenedor a modo de
caja donde introducir otros elementos.
Ahora si que definimos algunos elementos para escribir textos en HTML














































< P > < / P >:
Es el elemento que sirve para escribir un párrafo de texto. Es un elemento en linea.

< H1 >< / H1 >,< H2 >< / H2 >,< H3 >< /
H3 >,< H4 >< / H4 >,< H5 >< / H5 >,< H6
>< / H6 >:
Son los llamados encabezados. Son
elementos en linea. Suelen utilizarse para describir las secciones que
introducen. Por ejemplo, podriamos escribir el titular de una noticia
con un encabezado, y el texto de la noticia con párrafos.
Hay 6 niveles de encabezados,
siendo el H1 el más importante y el H6 el menos importante. Visualmente,
los navegadores le asignan fuentes mayores a los encabezados mas
importantes, y menores a los menos importantes.
< BR >:
Fuerza un salto de linea. Es importante resaltar que no tiene etiqueta de cierre.
< PRE >< / PRE >:
Este elemento nos dice que todo
el texto contenido en él está preformateado, es decir, aparecerá en el
navegador tal cual se escribe.
NOTA: En elemento distintos de
< PRE >, la acumulacion de espacios en blanco se representan como
uno sólo, y un espacio en blanco justo despues de una etiqueta de
apertura, o justo antes de una de cierrre, pueden no ser mostrados.
El codigo resultante del documento HTML utilizando estos elementos es:
El aspecto de la web será este:
Pulsa en este link ' EJEMPLO ' para verlo.
NOTA: El aspecto visual puede cambiar
dependiendo del tamaño de la ventana. Observe el efecto de los distintos
tamaños de los encabezados, el resultado de aplicar la etiqueta < BR
> entre párrafos (un espacio interlineal mucho más grande) y la
desaparición de los múltiples espacios entre palabras excepto en el
texto formateado con el tag < PRE >.




^ Inicio de página




Ya sabemos como escribir un texto y
algunos encabezados en nuestra web, pero aun no hemos utilizado para
nada las hojas de estilos.
Se pueden definir estilos de dos maneras
principalmente. Se puede hacer directamente en el mismo documento html o
tambien se puede hacer en un documento aparte. Para definir los estilos
en el mismo documento, hay que declarar las etiquetas < STYLE > y
< / STYLE > dentro de la cabecera del documento (entre el <
HEAD > y el < / HEAD >). De momento utilizaremos esta forma. En
el siguiente tutorial se explica como hacerlo en un archivo distinto.
Para empezar a usar los estilos, voy a
definir una unica propiedad de CSS para que nos sirva de ejemplo, aunque
en un tutorial de CSS mas completo volveré a incidir sobre ella.























COLOR

Propiedad que determina el color
de la fuente de texto. Puede ser una palabra clave o un valor numerico
RGB (Red, Green, Blue). Las palabras clave se corresponden con los
valores numericos que se representan, pero se puede seleccionar el
código numerico que se desee (Lo normal es utilizar cualquier software
de edicion de graficos para elegir visualmente el color que nos guste y
luego ver el codigo numerico que le corresponde).

La lista de las palabras claves con sus valores son:

maroon #800000, red #ff0000, orange #ffA500,
yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white
#ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua
#00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080.
La sintaxis de las CSS consiste en un Selector seguido por un bloque de declaraciones.
Un bloque de declaraciones comienza con una
llave izquierda ({) y termina con la llave derecha (}) correspondiente.
En medio de ellas debe haber una lista de cero o más declaraciones
separadas por punto y coma (Wink.
Podemos usar un atributo, como por ejemplo
COLOR, directamente sobre un nombre de elemento HTML. Esto provocará que
todos los elementos de este tipo que utilicemos en nuestro documento,
se veran afectados por loa atributos que hayamos designado en la hoja de
estilos para esa etiqueta.
Por ejemplo, si hacemos un
P {color:blue;}
Estaremos asignando el color azul a cualquier texto que pongamos en nuestra pagina bajo la etiqueta < p >.
Tambien podriamos hacer
.letraazul {color:blue;}
Esto lo que hace es definir la clase
letraazul. Esta clase lo que hace es colorear la letra en color azul.
Pero ¿que letra colorea? Pues la que queramos. Tan solo tenemos que
llamar a esta clase en cualquier elemento del documento HTML y se
coloreará su texto de azul.
Para llamar a esta clase haremos, en el documento HTML:
< H5 class="letraazul">texto escrito< / H5 >
Observe que contrariamente al primer
ejemplo, ahora puedo escoger colorear la letra de otro encabezado H5 de
distinto color, tan solo definiendo otra clase y llamandola desde donde
quiera.
El codigo resultante del documento HTML utilizando el estilo del color de la fuente es:
Pulsa en este link ' EJEMPLO ' para verlo.
NOTA: El aspecto visual puede cambiar
dependiendo del tamaño de la ventana. Observe como en las etiquetas H5
no hay que hacer referencia a ninguna clase porque se ha asignado el
color azul para todos los elementos H5 de la página. No sucede lo mismo
en los otros casos.
Con esto termino este tutorial basico.
Cualquier duda, podeis preguntar por email en privado o exponerla en el
libro de visitas, para que todos aprendamos juntos.
Volver arriba Ir abajo
Ver perfil de usuario http://gresafer.el-foro.net
 

Tutorial básico de HTML / CSS.

Ver el tema anterior Ver el tema siguiente Volver arriba 

 Temas similares

-
» como ver en pantalla completa tutorial "web en mi foro"
» [Tutorial] Reproductor de video personalizado
» [Tutorial] Colocar Música
» [Tutorial] Crear un Intro al Foro
» [Tutorial] Proteger contenido Web
Página 1 de 1.
Recuerda:
-Ser Completo

-No insultar

-Intentar dejar el mejor mensaje


Permisos de este foro:No puedes responder a temas en este foro.
Gresafer Comunity :: Espacio del Posteador. :: Tutoriales. :: WebMasters-