Clase 2 - HTML y CSS

Qu vimos la sesin anterior?
Un concepto que no vimos en la sesin anterior

Script: es un trozo de cdigos con rdenes
que se puede ubicar en cualquier parte de
la pgina web. El cdigo puede estar en
cualquier lenguaje (Javascript, Perl, PHP,
CSS, etc.)
HTML = HyperText Markup Language (Lenguaje de
Marcado de Hipertexto). Es el lenguaje de
marcado predominante para la elaboracin de
pginas web.
HTML es la "lengua materna" de tu navegador.
Es un lenguaje de etiquetas que se utilizan para dar

formato a un documento html. Dicho documento
es interpretado por un navegador para mostrarte lo
que da a da ves en internet.
Su cdigo NO es un lenguaje de
programacin, por lo tanto si hay errores, el
navegador no lo interpreta.
Su cdigo es similar al siguiente:

Si quieres crear sitios o programas web, no hay
otra solucin que aprender HTML.
Incluso si uss un programa como

Dreamweaver, por ejemplo, poseer unos
conocimientos bsicos de HTML hacen la vida
mucho ms fcil y tus sitios web mucho
mejores.
La buena noticia es que HTML es fcil de

aprender y de usar.
HTML se usa para crear sitios web. As de

sencillo!
Todo documento html, debe iniciar y terminar
con las etiquetas:
<html>
</html>
Podemos identificar las etiquetas en un

documento html pues estas estn denotadas
por los signos <etiqueta> adems, toda
etiqueta debe cerrarse si deseamos que la
misma sea interpretada adecuadamente por
el navegador. Una etiqueta de cierra con el
signo / es decir </etiqueta>
Adems, un documento HTML cuenta con
dos partes claramente definidas:
El encabezado (head) y el cuerpo (body).
head: Todo lo incluido en el encabezado es

informacin para el navegador.
body: Y lo incluido en el cuerpo es

informacin para el usuario.
El encabezado del documento se define
utilizando las etiquetas
<head>
</head>
El cuerpo del documento se define

utilizando las etiquetas
<body>
</body>
En el encabezado (head) incluye mucha
informacin importante, como por ejemplo:
o Los documentos (paginas web, hojas de estilo,
scripts, etc.) adicionales que deben ser
cargados con el documento.
o El titulo de la pgina web
o Codificacin de la pagina
o Cdigos Javascript, entre otros
En el cuerpo (body) se incluye TODO lo que se
desea mostrar al usuario que ve nuestra
pgina web, como por ejemplo:
o Textos, vnculos (Links)
o Formularios
o Divisiones
o Objetos (videos, imgenes, etc.)
Algo importante es que el cdigo PHP

en su mayora ir DENTRO del body,
aunque tambin podra ir antes del
head o dentro del head (esto ltimo
sera un poco extrao).
Para entrar en materia, debemos tener
instalado en nuestra computadora algn
editor de HTML, tales como: SUBLIME TEXT,
Notepad++, Kompozer, Dreamweaver o el
simple block de notas de Windows.
Para mayor comodidad y un mejor

aprendizaje, nosotros vamos a usar:
SUBLIME TEXT que ES UNA GRAN
ALTERNATIVA DE editor para para el diseo
web y programacin en PHP/MySQL.
Entonces, abrimos SUBLIME TEXT .
Creamos una nueva pgina web HTML.

<h1>Este es un encabezado de primer nivel</h1>
<h2>Este es un encabezado de segundo nivel</h2>
<p>Esto es un prrafo</p>
<p align=center>Esto es un prrafo</p>
<b>este texto esta en negrita</b>

<strong>este texto esta en negrita</strong>
<i>este texto esta en cursiva</i>
<br /> Esto permite dar un salto de lnea (Enter) y pasar a la

siguiente lnea
Hipervnculo:
<a href=http://imdimedsa.com/rrhh/login.php> Ir a RRHH </a>
Hipervnculo que lleva a una nueva pestaa o ventana:

<a href=http://imdimedsa.com/rrhh/login.php target="_blank>
Ir a RRHH </a>
Imagen:
<img src=objetos/equipo.jpg width="400px height="200px"
alt="Equipo" />
Divisores:
<div align=center/> Este texto esta dentro de un divisor </div>
Esto sera un ejemplo de uso de algunas de esas etiquetas:
Las hojas de estilo en cascada (en ingls
Cascading Style Sheets = CSS ) es un lenguaje
usado para definir la presentacin de un
documento estructurado escrito en HTML
Si se sabe algo de INGLES, este cdigo resulta

FACIL de aprender.
No es en s un lenguaje de programacin, ms
bien es algo parecido a HTML, o sea un lenguaje
de estructura.
CSS es el que permite que nuestra pgina web se

mire DECENTE!!!
Para agregar CSS en una pgina web, se puede
hacer dentro del head como un script:
<style type="text/css">
.celda {
background:#FFF; text-decoration:underline; font-style:italic; text-
align:right; }
</style>
O bien (dentro del mismo head) agregndolo como

un archivo independiente de la pgina web, pero
incluido para su uso en la misma:
<link rel=stylesheet" href=inc/estilos.css" type="text/css" media="all">
Para iniciar el aprendizaje de CSS, vamos a hacerlo
de manera prctica.
Abrimos SUBLIME TEXT, buscamos el archivo HTML

que hemos creado anteriormente.
Dentro de SUBLIME TEXT, creamos un nuevo archivo

CSS con el nombre estilo.css dentro de la misma
carpeta del documento HTML.
Dentro de este archivo vamos a poner algunos

ejemplos sencillos para dar FORMATO y ESTILO a
nuestra pgina web.
Dentro del archivo CSS, escribimos lo siguiente:
Estilos CSS que afectan a los objetos de forma GENERAL:

body {background-color: #FFFFCC}
img {border-style: dotted}
Estilos CSS que afectan a objetos PARTICULARES, lo cual definimos

como CLASES:
.celda {
background:#FFF; text-decoration:underline; font-style:italic; text-
align:right; }
table.navegacion {
text-align: left; margin: auto; border: #004d9c 0.5px solid; border-spacing:
0.5px; }
Dentro del archivo CSS, escribimos lo siguiente:
Estilos CSS que afectan a los divisores (DIV):

#header {
background: #323534 url(back.png) repeat-x; height: 152px;}
#menubar { width: 880px; height: 46px;}
Estilos CSS que afectan a los objetos de forma GENERAL:
body {background-color: #FFFFCC}
img {border-style: dotted}
Estos estilos GENERALES afectan a todos los objetos del mismo

tipo (body, table, img, a, entre otros).
O sea que para el primer ejemplo de arriba (body), dicho

formato afectar a TODO el cuerpo del documento HTML, en
este caso particular con un color de fondo determinado.
El segundo ejemplo, afectar a todas las imgenes dentro de

la pgina (img), con un estilo de borde de tipo punteado o
sea (dotted en ingls).
Estilos CSS que afectan a objetos PARTICULARES, lo cual definimos
como CLASES:
.celda { background:#FFF; text-decoration:underline; font-
style:italic; text-align:right; }
table.navegacion { text-align: left; border: #004d9c 0.5px solid;
border-spacing: 0.5px; }
Estos estilos de CLASES afectan SOLO a los objetos que tengan

asignada dicha clase mediante en el cdigo HTML. Por
ejemplo:
<div align="center class=celda> Este sera un ejemplo </div>
O sea que para el primer ejemplo de arriba (clase celda), se

aplicar un formato con color de fondo, subrayado, cursiva y
con alineacin del texto a la derecha.
El segundo ejemplo (clase navegacin solo para tablas), se
aplicar un formato con alineacin a la izquierda, con borde
de color de 0.5 pixeles slidos y con espaciado de 0.5 pixeles.
Estilos CSS que afectan a los divisores (DIV):
#header {
background: #323534 url(back.png) repeat-x; height: 152px;}
#menubar { width: 880px; height: 46px;}
Estos estilos para divisores (DIV) son muy recomendado para las
personas que usan divsores como mtodo de estructuracin
de la pgina, o sea para DIVIDIR la pgina en varias partes y
as dar una mejor forma.
Su uso es similar al de las CLASES, pero para DIV.
Para poder hacer uso de este estilo en los DIV hay que asignar
el nombre del estilo en la estiqueta id del objeto DIV que
deseemos. Por ejemplo:
<div id=header"> Este es mi encabezado </div>
Ahora vamos a ejercitar el HTML y el CSS, mediante la
prueba de las opciones antes mencionadas.
Dentro del archivo HTML creado, agregamos el CSS

como archivo independiente incluido.
Creamos una nueva pgina HTML y hacemos lo mismo

que con la pgina anterior (incluir el archivo CSS).
Dentro del mismo directorio que la pgina anterior.
Agregamos contenido a la segunda pgina HTML

creada y asignamos algunas de las CLASES ya creadas
en CSS y creamos nuevas CLASES dentro del CSS.

Clase 2 - HTML y CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Clase 2 - HTML y CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Qu vimos la sesin anterior?

Un concepto que no vimos en la sesin anterior

HTML es la "lengua materna" de tu navegador.

Es un lenguaje de etiquetas que se utilizan para dar

Su cdigo es similar al siguiente:

Incluso si uss un programa como

La buena noticia es que HTML es fcil de

HTML se usa para crear sitios web. As de

Podemos identificar las etiquetas en un

head: Todo lo incluido en el encabezado es

body: Y lo incluido en el cuerpo es

El cuerpo del documento se define

Algo importante es que el cdigo PHP

Para mayor comodidad y un mejor

Creamos una nueva pgina web HTML.

<h2>Este es un encabezado de segundo nivel</h2>

<b>este texto esta en negrita</b>

<i>este texto esta en cursiva</i>

<br /> Esto permite dar un salto de lnea (Enter) y pasar a la

Hipervnculo que lleva a una nueva pestaa o ventana:

Si se sabe algo de INGLES, este cdigo resulta

CSS es el que permite que nuestra pgina web se

O bien (dentro del mismo head) agregndolo como

Abrimos SUBLIME TEXT, buscamos el archivo HTML

Dentro de SUBLIME TEXT, creamos un nuevo archivo

Dentro de este archivo vamos a poner algunos

Estilos CSS que afectan a los objetos de forma GENERAL:

Estilos CSS que afectan a objetos PARTICULARES, lo cual definimos

Estilos CSS que afectan a los divisores (DIV):

Estos estilos GENERALES afectan a todos los objetos del mismo

O sea que para el primer ejemplo de arriba (body), dicho

El segundo ejemplo, afectar a todas las imgenes dentro de

Estos estilos de CLASES afectan SOLO a los objetos que tengan

O sea que para el primer ejemplo de arriba (clase celda), se

Su uso es similar al de las CLASES, pero para DIV.

Dentro del archivo HTML creado, agregamos el CSS

Creamos una nueva pgina HTML y hacemos lo mismo

Agregamos contenido a la segunda pgina HTML

S-ar putea să vă placă și