Actividad III
Programacion Web I
Actividad III
1. Como colocarle fondo a una pagina en Html atributo bgcolor.
Tomado de: https://disenowebakus.net/domine-html-y-dhtml-configurando-fondo-y-texto.php
Fondo con valores Hexadecimales: <body bgcolor="#FF0000″></body>
body
{
background-color: black; /* La página de fondo será negra */
color: white; /*El texto de la página será blanco */
}
https://openclassrooms.com/en/courses/3339201-aprende-a-crear-tu-propio-sitio-web-con-html5-y-css3/3341935-color-y-fondo
Aporte Personal:
Dentro de la formacion de una pagina de HTML existe una etiqueta llamada Background con un atributo llamado color que puede tomar dos valores:
- Nombre del color: Negro, amarillo, entre otros.
- Valor Hexadecimal: #FF0000,
Tambien podemos decir que el color de fondo se resume la codificacion de la siguiente manera:
Se especifica un color introduciendo su nombre (black, por ejemplo) en formato hexadecimal ( #FFC8D3) o en notación RGB ( rgb(250,25,118)).
{
background-color: rgb(255,0,0); /* Para los navegadores más viejos */
background-color: rgba(255,0,0,0.5); /* Para los navegadores más nuevos */
}
2. Cómo colocar una imagen de fondo en toda la página en Html Atributo Background
body {
background: url('configAssets/images/img.png'), url('configAssets/images/snow.png'),
url('configAssets/images/snow3.png'), url('configAssets/images/snow2.png');
}
Tomado de: https://stackoverflow.com/questions/27621042/snowfall-effect-using-css3-on-some-background-image
html>
<head>
<title>
Imágenes 1
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg">
</center>
</body>
</html
Tomado de: https://roble.pntic.mec.es/apuente/html/paginas/trece.htm
div {
background-image: url(https://www.librosweb.es/website/css/images/logo.gif);
}
https://uniwebsidad.com/libros/referencia-css2/background-image
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(https://www.htmlhelp.com/bg.png) }
Tomado de: https://www.htmlhelp.com/es/reference/css/color-background/background-image.html
Aporte personal: Asi como se puede colocar colores de fondo, es claro que en HTML se puede realizar la acción de colocar una imagen de fondo en dos modelos de sintaxis:
- Indicado en la propiedad Background en el atributo image: la url en la que se encuentra la imagen a insertar o apuntando directamente al nombre del archivo asumiendo que HTML buscara en la ruta configurada por defecto que normalmente es el escritorio, mis documentos, mis imagenes.
Es importante que se resalta que se pueden entregar otras caracteristicas a las imagenres de fondo, como son: Tamaño, Resolucion, Adaptabilidad entre otros y que es posible colocar varias imagenes de fondo dentro de una misma pagina.
3. Cómo definier márgenes para toda la página en Html Atributo topmargin y leftmargin
El atributo leftmargin: que indica el margen a la izquierda, generalmente se usa con el internet explorer.
El topmargin: para conseguir el margen arriba, para el Internet Explorer.
El marginwidth: es igual que el leftmargin, pero para otros navegadores.
El marginheight: lo mismo que el topmargin, pero para otros navegadores.
<html>
<title></title>
<head></head>
</html>
Tomado de: https://www.larevistainformatica.com/Atributos-de-la-pagina-web.htm
Márgenes
Los atributos que definen los márgenes son distintos según los navegadores: Internet Explorerusa los atributos:
- leftmargin para indicar los márgenes izquierdo y derecho
- topmargin par indicar el superior e inferior.
Por su parte Firefox y otros navegadores utilizan los atributos
- marginwidth para indicar los márgenes izquierdo y derecho
- marginheight par indicar el superior e inferior.
Por lo tanto si queremos que los márgenes se vean en todos los navegadores, deberemos usar los dos tipos de etiquetas.
Veamos un ejemplo donde se usan todas las etiquetas anteriores; Código:
<html>
<head>
<title>Ejemplo</title>
</head>
<body bgcolor="purple" text="yellow" leftmargin="50px"
topmargin="30px" marginwidth="50px" marginheight="30px">
<h1>Atributos de la etiqueta body</h1>
<p>El atributo text define el color del texto, y el atributo
bgcolor define el color del fondo de la página.</p>
<p>Para definir los márgenes los atributos son distintos según los
navegadores, Internet Explorer utiliza el atributo leftmargin para el margen
izquierdo y derecho, y topmargin para el superior e inferior; mientras que
Firefox utiliza marginwidth para el izquierdo y derecho y marginheight para
el superior e inferior.</p>
</body>
</html>.
Tomado de: https://aprende-web.net/html/html2_6.php
Márgenes
Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.
leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.
topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)Vamos a ver una página sin márgenes, por si alguien necesita ver el ejemplo en estas líneas.
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Gracias por visitarme!
</td></tr></table>
</body>
https://www.juntadeandalucia.es/averroes/centros-tic/14005663/helvia/aula/archivos/repositorio/0/164/html/html/manual_html.html
Aporte personal: De acuerdo a los hallazgos realizados se entiende que podemos realizar diferente cambios en nuestras paginas web, en especial cuando se trata de margenes que ayudan a una mejor presentacion, adicional logramos la mayor versatilidad de las instrucciones planteadas en los navegadores de mas alto uso o mas comunes en internet.
4. Cómo colocarle color al resto del texto atributos text, link, vlink y alink
El atributo text: define el color del texto, por defecto es el negro. Existen otros atributos que se usan para diferenciar dándole otro color al texto de los enlaces que tenga la página. Podemos distinguir tres atributos para ello:
El link: es el color de los enlaces que no se han visitado, por defecto es el azul claro.
El vlink: es atributo de color de los enlaces que ya hemos visitados, por defecto su color es morado, en caso de darle otro color, este debería ser un poco menos vivo que el color de los enlaces normales.
El alink: es el color de los enlaces cuando pulsamos sobre ellos.
Tomado de: https://inirida-info-es.webnode.com.co/desarrollo-web-1/actividades/formatos-de-paginas-web/
<marquee
behaviour: tipo de movimiento a realizar (alternate | scroll | slide).
bgcolor: color de fondo (nombre del color | hexadecimal).
direction: dirección hacia la que se hará scroll (down | left | right | up).
height: alto (píxels o porcentaje).
hspace: espacio entre los lados de la marquee y los bordes de la página (píxels).
loop: especifica el número de veces que se repetirá el scroll (infinite | number).
scrollamount: cantidad de píxels que se hace scroll.
scrolldelay: milisegundos en los que se hace el scroll.
vspace: espacio entre la parte superior e inferior de la marquee y el resto del contenido (píxels).
width: ancho (píxels o percentage).
>
</marquee>
Tomado de: https://informaticapc.com/tutorial-html/configurar-pagina-web.php
El lenguaje HTML Fondos y colores de texto Los atributos LINK, VLINK y ALINK Controlan el color de los enlaces: LINK color del enlace que aún no ha sido visitado. ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace VLINK es el color de un enlace que ya ha sido visitado
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
Tomado de:https://creatuweb.espaciolatino.com/tutorhtml/tema4.html
Tomado de: https://slideplayer.es/slide/5418521/
Aporte personal: De acuerdo a lo expuesto en los parrafos anteriores se concluye que las etiquetas link hacen referenciacion directa con el tipo de acceso a los vinculos segun URL planteada, es decir identifican la accion realizada en el vinculo referente a la URL que se active. En pocas palabras el indicador de visita del vinculo y puede desagregarse en no visitado, acceso actual, visitado.
5. Enlaces en Html (etiqueta <a>.... </a> a)
Enlaces internos (ejemplos) b) Enlaces locales (ejemplos) c) Enlaces externos (ejemplos)
En HTML se utiliza el elemento ancla <a> para crear un enlace. Cuando un visitante hace clic en él, el navegador abre otra página. El elemento ancla es un elemento contenedor y su aspecto es el siguiente:
<a>...</a>
El contenido sobre el que pulsa el visitante se coloca dentro del elemento ancla:
<a>Enlace a otra página</a>
El problema del enlace de anterior es que no apunta a ningún sitio. Para convertirlo en un enlace que funcione debe aportar la URL de la página de destino mediante el tributo href (que significa referencia de hipervínculo).
Por ejemplo, si quiere un enlace para llevar al lector a una página llamada enlacepagina.html, debe utilizar el siguiente código de HTML:
<a href="enlacepagina.html">Enlace a otra página</a>
Para que este vínculo funcione, el archivo enlacepagina.html debe estar en la misma carpeta de la página Web que lo contiene. Veremos cómo organizar mejor el sitio clasificando páginas en distintas subcarpetas.
El tag ancla es un elemento de línea (inline): se introduce dentro de cualquier otro elemento bloque. Eso quiere decir que es completamente aceptable crear un enlace de varias palabras en un párrafo normal.
Tomado de: https://disenowebakus.net/enlaces-hipervinculos-tag-ancla-html.php
El atributo href nombra la conexión hacia otra página web. En realidad es el lugar donde será dirigido el usuario cuando haga click en el enlace o link HTML.
Los links pueden ser:
- enlaces internos - hacia lugares especificos desde la página(anclas).
- enlaces locales - hacia otras páginas desde el mismo dominio.
- enlaces globales - hacia otros dominios, fuera de la página web
https://tutorialehtml.com/es/tutoriales-html-enlaces/
El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/a
Aporte personal: Para este punto de enseñanza se nos deja claro que el elementto Anchor (<a>) nos ayuda a entender que esta pagina se vincula con otra por medio de esta ya sea a nivel externo o interno. Es importante aclarar que cuando hablamos de un tipo de enlace interno es aquelque nos lleva a otro lugar de la misma paginay cuando havblamos de enlace externo, hacemos referencia a que nos vincula directamente a un sitio web externo a nuestro alcance inicial.
Aporte personal: En el video nos ilustran de forma clara como generar imagenes de fondo y colores de fondo a una pagina web, enfocado a la creacion de varios componentes entre los que se encuentran la generacion de menus, vinculos, entre otros. Tambien hacen referencia a la forma en la que son usadas las etiquetas Background orientadas al fondo de imagen. De igual manera nos ilustran sobre la combinacion de CSS y HTML para lograr una mejor presentacion en la pagina.
Aporte personal: Por medio del video podemos conocer la forma en que podemos realizar enlaces a una pagina web externa a un lugar de la misma pagina web o una pagina web del mismo sitio de la que estamos manipulando, estos conceptos se conocen como enlaces externos, locales e internos. A nivel interno se debe tener en cuenta que la manera mas efectiva de lograr un enlace es a traves de el uso de la identificacion de los elementos a los cuales de desea acceder (ID). La manera de lograr enlaces externos es usando la etiqueta <a> </a> y <a href: ruta> </a>.