• Que es el ' .CSS ':
El CSS (Cascading Style Sheets)
es un lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG.
La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".
Las especificaciones de CSS son mantenidos por el Consorcio World Wide Web (W3C). Tipo de medio de Internet
• Que es el ' HTML ':
HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, etc.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas (PC de escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versión de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versión del navegador con los cambios incorporados. Usualmente los cambios son aplicados mediante parches de actualización automática (Firefox, Chrome) u ofreciendo una nueva versión del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador no actualizado no será capaz de interpretar correctamente una página web escrita en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir problemas de visualización e incluso de interpretación de código HTML. Así mismo, las páginas escritas en una versión anterior de HTML deberían ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores aún mantienen la capacidad de interpretar páginas web de versiones HTML anteriores. Por estas razones, aún existen diferencias entre distintos navegadores y versiones al interpretar una misma página web.
Ahora Vamos a hacer cosas básicas con el CSS y HTML
solo usando nuestro Block de notas
Lo primero que hacemos es crear una carpeta le vamos a llamar " sitio "
Dentro de la Carpeta sitio Creamos un Block de notas y lo abrimos
en el Block de notas ponemos esto
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
Explico ahora que es cada cosa !!!
El : <head> va todo lo que sea como Titulo o archivos JS (JavaScript esto lo vamos a ver otro dia) en este lugar "Head" vamos a poner el Titulo y el tipo de letra que lea nuestro sitio y para cerrar este " head" se hace lo siguiente </head> la " / " es para cerrar
El : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> es un formato de codificación de caracteres con el cual puede leer los " é á ú " y símbolos
El : <title>Untitled Document</title> es el titulo para nuestro sitio ese lugar ponemos nuestro titulo para un sitio yo voy a poner " Sitio para Taringa " (sin las " )
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
tiene que quedar algo asi
ahora abajo de eso ponemos esto
<body>
</body>
El " <body> " es el Cuerpo de la pagina es donde se ve todo como imágenes y textos vídeos y eso
después de <title>Titulo / Lema de tu sitio</title>
vamos abajo y dejamos 2 espacios y ponemos esto
<style>
aquí van nuestros códigos CSS
</style>
tiene que quedar asi
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
Ya tememos la base del sitio echa
ahora vamos a Agregar unas cosas para que en 5 minutos podamos tener una vista previa del sitio
Entre las Etiquetas <style> y </style>
Agregamos esto
body {
background:#080A09 url('http://i1.minus.com/ilaSkwDGdI2dG.jpg') fixed no-repeat top center;
}
.conteiner {
width: 945px;
border-radius: 2px 2 2px 2;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
.barranime {
background-color: #0C9DE7;
border: 3px solid #FFFFFF;
border-radius: 0px 0 0px 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
font-family:Arial;
font-size: 14px;
font-style: italic;
font-weight: bold;
line-height: 27px;
height: 30px;
}
Tiene que quedar algo asi
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
ahora vamos a las etiquetas
<body>
</body>
entre esas etiquetas vamos a poner esto
<div class="conteiner">
hacemos un espacio grande como de 8 lugares
</div>
algo asi
ahora nosotros vamos a trabajar entre esto
<div class="conteiner">
aquí dentro vamos a poner el resto
</div>
(Voy a pegar todo como tiene que ir osea ustedes copien y peguen y les explico luego )
<div class="conteiner">
<dic class="barranime"> Hola Mundo soy una barra JA ! </div>
<img src=" http://th06.deviantart.net/fs70/PRE/i/2012/344/f/e/girl_by_scary_panda-d5nm9zg.jpg " height="500" width="800" />
</div>
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
ahora les Explico Cada Cosa osea a leer !!
<div class="conteiner">
--> eso que pegue qui arriba ▲▲▲▲▲▲▲▲ es el Cuerpo osea entre el <body> </body> pego eso para que tenga un buen estilo lanco con un borde
entre esto <div class="conteiner">
pegue esto <dic class="barranime"> Hola Mundo soy una barra JA ! </div> es una barra separadora con un buen estilo
después pegue esto
<img src=" http://th06.deviantart.net/fs70/PRE/i/2012/344/f/e/girl_by_scary_panda-d5nm9zg.jpg " height="500" width="800" />
esta es una imagen cualquiera de Internet si se fijan dice
height="500" width="800" />
width = ancho
y
height = altura
de la imagen que esta entre " "
" http://th06.deviantart.net/fs70/PRE/i/2012/344/f/e/girl_by_scary_panda-d5nm9zg.jpg "
y cierro con el
</div> este </div> es la cerradura de <div class="conteiner">
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
ahora paso a explicar lo del
esto
<style>
body {
background:#080A09 url('http://i1.minus.com/ilaSkwDGdI2dG.jpg') fixed no-repeat top center;
}
.conteiner {
width: 945px;
border-radius: 2px 2 2px 2;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
.barranime {
background-color: #0C9DE7;
border: 3px solid #FFFFFF;
border-radius: 0px 0 0px 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
font-family:Arial;
font-size: 14px;
font-style: italic;
font-weight: bold;
line-height: 27px;
height: 30px;
}
</style>
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
esto :
body {
background:#080A09 url('http://i1.minus.com/ilaSkwDGdI2dG.jpg') fixed no-repeat top center;
}
es el Fondo de Tu pagina para cambiar la imagen tenes que cambiar el link que esta aca
('http://i1.minus.com/ilaSkwDGdI2dG.jpg') tenes que respetar los (' ') sino no anda !!!
esto :
.conteiner {
width: 945px;
border-radius: 2px 2 2px 2;
background-color: #FFF;
margin: 0 auto;
overflow: hidden;
}
es el contenedor del osea el cuerpo donde van las fotos y el logo de tu sitio
y esto
.barranime {
background-color: #0C9DE7;
border: 3px solid #FFFFFF;
border-radius: 0px 0 0px 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
font-family:Arial;
font-size: 14px;
font-style: italic;
font-weight: bold;
line-height: 27px;
height: 30px;
}
es la barra donde esta el Titulo " Hola Mundo soy una barra JA ! "
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
ahora vamos a guardar nuestro " Documento de Texto " .... pero lo vamos a guardar de esta forma
cuando guardamos este archivo lo vamos a guardar con este nombre " Index.html "
para que sea mas facil al momentos de leer y que nos lea todo lo que hemos echo en este rato
ahora vamos a la carpeta " sitio "
y dentro tendremos algo asi
por lo normal si tienes cono buscador predeterminado a Chrome aparece con el icono del mismo
sino aparece con firefox o opera o otros ...... incluso el LEEEEEEEEEEENTO Internet explorer
ahora simplemente lo abrimos
▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
Como explique esto es algo digamos para que vean q con un Block de notas se puede hacer algo facil y sin esfuerso
en los proximos dias voy a hacer un post con Video de como Crear un Web Con Botones y unos Efectos muy buenos con CSS HTML y Java Script ..... el javascript lo explico en el proximo post
Proximo Post
" Diseño Web HTML & CSS & Java Script "