Karinna Rubio
Manuel Rivas
Temas web
Temas de web variados
...
.
.
Publicado por Yerjo el 27 Feb 2001
El index y el css
...
--------
Se crean las páginas del sitio web
y se crea la hoja de estilo que se relacionará con esas páginas,
El código que determina que esa es una página web, es el .html
Y el código que determina que esa es una hoja de estilo es el .css
Todo sitio web debe tener una página cuyo nombre sea index.html
Porque los buscadores como el Google, El Safari, El Firefox,
el Opera, el Edge, el Yandex el Internet E. etc. cuando van a un sitio web,
lo primero que buscan es la página que se llama index.html
Por eso es en esa página donde deben de ponerse primordialmente
los enlaces a otras páginas
Un sitio web o página web, se escribe en el lenguage de hipertexto llamado HTML
. Las letras aparecerán con el tamaño y el color por defecto
Cuando digo por defecto me refiero a que las letras tendrán el tamaño
el color y la forma que el sistema operativo tenga instalado.
Puede ser el "Times New Roman" o el "Verdana" u otro, generalmente de tamaño 12 px..
Para relacionar una pâgina web con una hoja de estilo externa
se debe poner en la pâgina index.html
entre el head y el head, el siguiente côdigo que podemos ver en la imágen,
...
Teniendo ya relacionada la página index.html con la hoja de estilo, estilos.css,
todos los estilos que se introduzcan en la hoja de estilo
se reflejarán en la página index.html
como tamaño de la letra, color, forma etc.
Claro está que para relacionar la hoja de estilo con la página ,
debemos guardar la hoja de estilo en la misma carpeta en que está el archivo index.
Y ¿ cuál es esa carpeta?
Pues la que hemos creado anteriormente en nuestro escritorio y que le hemos puesto como nombre
-mipaginaweb- (sin acento), en esa carpeta debemos de poner nuestra hoja de estilo.css y nuestro index.html,
y también debemos poner una carpeta que contendrá las imágenes
carpeta a la que llamaremos -objetos-
--------
Se crean las páginas del sitio web
y se crea la hoja de estilo que se relacionará con esas páginas,
El código que determina que esa es una página web, es el .html
Y el código que determina que esa es una hoja de estilo es el .css
Todo sitio web debe tener una página cuyo nombre sea index.html
Porque los buscadores como el Google, El Safari, El Firefox,
el Opera, el Edge, el Yandex el Internet E. etc. cuando van a un sitio web,
lo primero que buscan es la página que se llama index.html
Por eso es en esa página donde deben de ponerse primordialmente
los enlaces a otras páginas
Un sitio web o página web, se escribe en el lenguage de hipertexto llamado HTML
. Las letras aparecerán con el tamaño y el color por defecto
Cuando digo por defecto me refiero a que las letras tendrán el tamaño
el color y la forma que el sistema operativo tenga instalado.
Puede ser el "Times New Roman" o el "Verdana" u otro, generalmente de tamaño 12 px..
Para relacionar una pâgina web con una hoja de estilo externa
se debe poner en la pâgina index.html
entre el head y el head, el siguiente côdigo que podemos ver en la imágen,
...
Teniendo ya relacionada la página index.html con la hoja de estilo, estilos.css,
todos los estilos que se introduzcan en la hoja de estilo
se reflejarán en la página index.html
como tamaño de la letra, color, forma etc.
Claro está que para relacionar la hoja de estilo con la página ,
debemos guardar la hoja de estilo en la misma carpeta en que está el archivo index.
Y ¿ cuál es esa carpeta?
Pues la que hemos creado anteriormente en nuestro escritorio y que le hemos puesto como nombre
-mipaginaweb- (sin acento), en esa carpeta debemos de poner nuestra hoja de estilo.css y nuestro index.html,
y también debemos poner una carpeta que contendrá las imágenes
carpeta a la que llamaremos -objetos-
Publicado por Yerjo el 18 Feb 1995
Bueno, para comenzar a diseñar nuestra página web
y crear nuestro index.html
Utilizaremos un lenguage que se llama "marcado de hipertexto" o HTML.
Ese lenguage es un lenguage de etiquetas, que utiliza un modelo de cajas.
Eso significa que cada código, párrafo, palabra o letra
está o pertenece a una caja con su respectivo nombre o etiqueta.
Es como un armario grande,
y dentro de ese armario existen muchas otras cajas de distintos tamaños
que rellenan a ese armario
Unas cajas ya tienen sus nombres por defecto,
como la caja donde suele ir todo lo que se verá en la pagina
como por ejemplo"body",otra es la caja "head", otra la caja "title" etc.
La caja donde va todo lo que se ve en la pantalla del monitor, es la caja cuya etiqueta se llama "body"
Si queremos escribir algo de texto en esa caja llamada "body", ese texto lo pondremos dentro de una caja
que se llama "parrafo", abreviado, "p".
Bien, para comenzar a hacer nuestra página index.html
la haremos abriendo nuestro blok de notas.
Lo primero que haremos en el documento será
indicar que lo que haremos es un documento escrito en html
Y para eso, escribiremos el siguiente código
como vemos en la imagen siguiente
............
¿ Para qué sirve ese código?
para indicarle a los navegadores que lo que haremos será un documento HTML
y crear nuestro index.html
Utilizaremos un lenguage que se llama "marcado de hipertexto" o HTML.
Ese lenguage es un lenguage de etiquetas, que utiliza un modelo de cajas.
Eso significa que cada código, párrafo, palabra o letra
está o pertenece a una caja con su respectivo nombre o etiqueta.
Es como un armario grande,
y dentro de ese armario existen muchas otras cajas de distintos tamaños
que rellenan a ese armario
Unas cajas ya tienen sus nombres por defecto,
como la caja donde suele ir todo lo que se verá en la pagina
como por ejemplo"body",otra es la caja "head", otra la caja "title" etc.
La caja donde va todo lo que se ve en la pantalla del monitor, es la caja cuya etiqueta se llama "body"
Si queremos escribir algo de texto en esa caja llamada "body", ese texto lo pondremos dentro de una caja
que se llama "parrafo", abreviado, "p".
Bien, para comenzar a hacer nuestra página index.html
la haremos abriendo nuestro blok de notas.
Lo primero que haremos en el documento será
indicar que lo que haremos es un documento escrito en html
Y para eso, escribiremos el siguiente código
como vemos en la imagen siguiente
............
¿ Para qué sirve ese código?
para indicarle a los navegadores que lo que haremos será un documento HTML
Publicado por Yerjo el 18 Feb 2005
Continuamos con el HTML
Entonces, después de poner ese código doctype
comenzamos lo que son los códigos html
y ponemos debajo del Doctype, la caja mayor que es el HTML.
Claro que al poner la caja mayor que es la etiqueta HTML,
debemos indicarle a los navegadores que nuestra página será en el idioma español
por eso la etiqueta HTML debemos ponerla de la manera como se ve en la imagen siguiente
Ese lang-es que va a continuación del html,
significa que la página estará escrita en lengua Española.
Si allí dijera - lang-en- significaría que la página será en lengua inglesa
Bien, ya vemos que el armario se llama HTML,
pero como el armario es una caja grande que va a contener todas las demás cajas
pues el armario debe de tener una etiqueta de apertura y su respectiva etiqueta de cierre,
¿ Qué quiere decir esto?
Que en general,las cajas sean grandes o sean pequeñas deben tener una etiqueta de apertura y una de cierre.
Es por eso que en la imagen anterior he puesto la etiqueta de apertura llamada HTML,
y mas abajo el cierre de esa etiqueta o caja HTML, anteponiendo ese slash o barra diagonal
ya que eso significa que hasta allí llega esa caja
Casi todas las cajas llevan su etiqueta de apertura y su etiqueta de cierre
............
comenzamos lo que son los códigos html
y ponemos debajo del Doctype, la caja mayor que es el HTML.
Claro que al poner la caja mayor que es la etiqueta HTML,
debemos indicarle a los navegadores que nuestra página será en el idioma español
por eso la etiqueta HTML debemos ponerla de la manera como se ve en la imagen siguiente
Ese lang-es que va a continuación del html,
significa que la página estará escrita en lengua Española.
Si allí dijera - lang-en- significaría que la página será en lengua inglesa
Bien, ya vemos que el armario se llama HTML,
pero como el armario es una caja grande que va a contener todas las demás cajas
pues el armario debe de tener una etiqueta de apertura y su respectiva etiqueta de cierre,
¿ Qué quiere decir esto?
Que en general,las cajas sean grandes o sean pequeñas deben tener una etiqueta de apertura y una de cierre.
Es por eso que en la imagen anterior he puesto la etiqueta de apertura llamada HTML,
y mas abajo el cierre de esa etiqueta o caja HTML, anteponiendo ese slash o barra diagonal
ya que eso significa que hasta allí llega esa caja
Casi todas las cajas llevan su etiqueta de apertura y su etiqueta de cierre
............
Publicado por Yerjo el 18 Feb 2005
El head y el body
Ahora bien, ya tenemos el armario que es el HTML
pues ahora crearemos dos cajas grandes , que son las que irán dentro de ese armario
Una de ellas se llamará -head- y la otra se llamará -body-
Y son las que se ven en la imagen con sus aperturas y cierres
Como hemos podido ver en la imagen, ya tenemos la indicación
de que nuestra página web es un Documento tipo html,
luego tenemos la apertura de la caja html
indicando en esa apertura que nuestra página será en Español
y abajo del todo tenemos su correspondiente cierre de la caja html.
Dentro de la caja html, tenemos el head recién creado con su correspondiente cierre
y tenemos el body con su apertura y cierre.
...............
............
pues ahora crearemos dos cajas grandes , que son las que irán dentro de ese armario
Una de ellas se llamará -head- y la otra se llamará -body-
Y son las que se ven en la imagen con sus aperturas y cierres
Como hemos podido ver en la imagen, ya tenemos la indicación
de que nuestra página web es un Documento tipo html,
luego tenemos la apertura de la caja html
indicando en esa apertura que nuestra página será en Español
y abajo del todo tenemos su correspondiente cierre de la caja html.
Dentro de la caja html, tenemos el head recién creado con su correspondiente cierre
y tenemos el body con su apertura y cierre.
...............
............
Publicado por Yerjo el 18 Feb 2005
Llenando el head
Ahora veremos lo que tenemos que poner dentro del "head"
Dentro del head, primordialmente tenemos que poner el título
Ese título es el que aparecerá en la barra de direcciones de nuestra web
es conveniente que cada página de nuestro sitio web
tenga un título diferente, de esa manera los navegadores no pensarán que
todas las páginas dicen lo mismo
Es cierto que lo que se pone entre el head y el head, no aparece en la pantalla
donde vemos nuestra página, pero el títuylo si aparece arriba en la barra del título
. Fuera del título, en el head debemos poner la relación de nuestra página web
con nuestra hoja de estilo llamada estilo.css
...
Acá en la imagen de arriba podemos ver como ya hemos puesto el título en el head
...............
............
Dentro del head, primordialmente tenemos que poner el título
Ese título es el que aparecerá en la barra de direcciones de nuestra web
es conveniente que cada página de nuestro sitio web
tenga un título diferente, de esa manera los navegadores no pensarán que
todas las páginas dicen lo mismo
Es cierto que lo que se pone entre el head y el head, no aparece en la pantalla
donde vemos nuestra página, pero el títuylo si aparece arriba en la barra del título
. Fuera del título, en el head debemos poner la relación de nuestra página web
con nuestra hoja de estilo llamada estilo.css
...
Acá en la imagen de arriba podemos ver como ya hemos puesto el título en el head
...............
............
Publicado por Yerjo el 18 Feb 2005
Relacionando los estilos con la web
Ahora acá ponemos la relación de la hoja de estilo con la página web
como aparece en la imagen acá abajo
...
Y así ya vamos mas o menos formando nuestra página perteneciente a nuestro sitio web
pero lo cierto es que queremos el body, que es lo que se va a ver en nuestra pantalla lo queremos con un fondo de color
y para darle al body un fondo de color, lo haremos desde nuestra hoja de estilo
pot eso iremos a nuestra hoja de estilo y escribiremos en ella el siguiente codigo,
Ese codigo lo podemos escribir en la cuarta linea de nuestra hoja de estilo y que nos quede asî
body {background-color:#e54c16;}
con ese codigo lo que le estamos diciendo a nuestra web es que el body
tenga cierto color, aunque nos gustaria que el body mismo y todo lo que vaya dentro estê centrado
por tanto lo que haremos serâ añadir en ese codigo que hemos puesto en la hoja de estilo
otro codigo que diga que queremos todo centrado, como por ejemplo
text-align:center;
por lo tanto el codigopara nuestro body nos quedaria de esta manera
{text-align:center;background-color:#e54c16;}
Lo que hemos hecho ha sido decirle al body que queremos que lo que haya dentro de el estê centrado
y a la vez le hemos dado un color de fondo, por eso si abrimos ahora nuestra pagina web en modo pagina web,
la veremos con el color de fondo que le hemos indicado que lleve
, Para abrir nuestra pagina web en modo pagina web solo debemos, (segun configuracion teclado),
hacer doble click en nuestro index.html, y asi veremos nuestro body con su color de fondo
.
como aparece en la imagen acá abajo
...
Y así ya vamos mas o menos formando nuestra página perteneciente a nuestro sitio web
pero lo cierto es que queremos el body, que es lo que se va a ver en nuestra pantalla lo queremos con un fondo de color
y para darle al body un fondo de color, lo haremos desde nuestra hoja de estilo
pot eso iremos a nuestra hoja de estilo y escribiremos en ella el siguiente codigo,
Ese codigo lo podemos escribir en la cuarta linea de nuestra hoja de estilo y que nos quede asî
body {background-color:#e54c16;}
con ese codigo lo que le estamos diciendo a nuestra web es que el body
tenga cierto color, aunque nos gustaria que el body mismo y todo lo que vaya dentro estê centrado
por tanto lo que haremos serâ añadir en ese codigo que hemos puesto en la hoja de estilo
otro codigo que diga que queremos todo centrado, como por ejemplo
text-align:center;
por lo tanto el codigopara nuestro body nos quedaria de esta manera
{text-align:center;background-color:#e54c16;}
Lo que hemos hecho ha sido decirle al body que queremos que lo que haya dentro de el estê centrado
y a la vez le hemos dado un color de fondo, por eso si abrimos ahora nuestra pagina web en modo pagina web,
la veremos con el color de fondo que le hemos indicado que lleve
, Para abrir nuestra pagina web en modo pagina web solo debemos, (segun configuracion teclado),
hacer doble click en nuestro index.html, y asi veremos nuestro body con su color de fondo
.
Publicado por Yerjo el 27 Feb
Enlaces
……................
Registro de propiedad intelectual
Mauricio Rojas Jofré, Manuel Rivas Sanchez, Julio Yurik Altamán, Carlos Fuentes,
Karinna Rubio, Alexia Leiva, Patricia, Mario Rojas Neuquén,
Martín Fierro Lucá, Marisol Flores, Elizabeth,
Karten Ventura Rozas, Acayo Carlos Rahal Gonzalez, Kevin, Jesica Morales, Abrahan Gonzâlez
……................
Publicado por Yerjo el 18 Feb 2000
..... .....
...............
............
............
Publicado por Yerjo el 18 Feb 2005
..... ...... .....
...............
............
...............
............
Publicado por Yerjo el 18 Feb 2005