Publicado el Deja un comentario

18 Html, Css. Etiquetas metas

Para tener un buen posicionamiento de nuestra web en los buscadores, debemos elegir las palabras claves o keywords que nos definen e insertarlas dentro del “head” de nuestra web, con la etiqueta “meta”.
Tambien podemos usar estas etiquetas para indicar autor y una breve descripcion de nuestra web.

<head><title>Web principal</title><meta charset=”utf-8″><meta name=”viewport” content=”width=device-width,initial-scale=1.0″><meta name=”language” content=”Spanish”><meta name=”author” content=”Jose Ojeda (ticoticotaa)”><meta name=”keywords” content=”programacion,python,html,php,principal”><meta name=”description” content=”Sitio web de ticoticotaa donde tendran contenido temas de programacion y contabilidad”><link rel=”stylesheet” href=”estilos.css”/><link href=”https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand” rel=”stylesheet”></head>

Please follow and like us:
Publicado el Deja un comentario

10 Html Css. Introduccion estilos

Introduccion a CSS para dar formato o estilo a nuestra web.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Web principal</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”estilos.css”/>
</head>
<body>
<!–Cabecera–>
<header>
<h1>Cabecera de mi web</h1>
<figure>
<img src=”milogo.jpg”/>
</figure>
</header>
<!–Barra navegacion–>
<nav>
<ul>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”contacto.html”>Contacto</a></li>
<li><a href=”acercade.html”>Acerca de</a></li>
</ul>
</nav>
<!–Contenido principal–>
<section>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
<article>
<hgroup>
<h2>Titulo del Parrafo</h2>
</hgroup>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
 felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
 semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
 consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
 feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
 Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
 Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
 libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
 hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
 venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
 Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.
 Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</article>
</section>
<!–Complemento lateral–>
<aside>
<h3>Siguenos en: </h3>
<ul>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Twitter</a></li>
</ul>
</aside>
<!–Pie de pagina–>
<footer>
<p>Jose Ojeda 2019&copy</p>
<p>email: nombre@email.com</p>
</footer>
</body>
</html>

CSS

*{
margin:0px auto;
color:red;
background:blue;
}
p{
color:green;
font-size:12px;
background:cyan;
}

Please follow and like us:
Publicado el Deja un comentario

09 Html Css. Video y Audio

Insertar video y audio en nuestra web.

<!DOCTYPE html><html><head><title>Video Audio</title><meta charset=”utf-8″></head><body><!–Cabecera–><header>
</header> <!–Barra navegacion–><nav>
</nav><!–Contenido principal–><section><article><!–Video–><video src=”http://techslides.com/demos/sample-videos/small.ogv” width=”240″ height”360″ controls>Tu navegador no soporta la etiqueta <code>Video</code></video><!–Audio–><audio src=”sonido.ogg” controls>Tu navegador no soporta la etiqueta <code>Audio</code></audio></article></section><!–Complemento lateral–><aside>
</aside><!–Pie de pagina–><footer>
</footer></body></html>

Please follow and like us:
Publicado el Deja un comentario

07 Html Css. Enlaces, listas e imagenes

Como crear enlaces, listas e imagenes con etiquetas #Html, crea tu #web





Este seria el codigo de ejemplo:


<!DOCTYPE html><html><head><title>Enlaces, Imagenes y Listas</title><meta charset=”utf-8″></head><body><!–Cabecera–><header>
</header> <!–Barra navegacion–><nav>
</nav><!–Contenido principal–><section><article><!–Enlaces–><a href=”#”>Enlace</a><a href=”http://www.google.es”>Google</a><a href=”http://www.google.es” target=”_blank”>Google</a><!–Imagenes–><figure><img src=”milogo.jpg” alt=”logo”></figure><!–Listas–><h2>Listas</h2><h3>Ordenadas</h3><ol><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ol><h3>Desordenadas</h3><ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ul></article></section><!–Complemento lateral–><aside>
</aside><!–Pie de pagina–><footer>
</footer></body></html>

Please follow and like us:
Publicado el Deja un comentario

22 Python. Botones, etiquetas y entradas

En este video vemos como crear botones y ejecutar funciones al realizar click en ellos, tambien se ve como crear etiquetas y casillas de entradas, asi como mostrar mensajes en ventana emergente.

#VENTANAS CON PYTHON
#AÑADIMOS ETIQUETA, CASILLA ENTRADA Y BOTONES
#IMPORTAMOS MODULO
from tkinter import *
from tkinter import messagebox
def minimizar():
    ventana.iconify()
def mensaje():
    messagebox.showinfo(“mensaje”,”Has escrito: “+texto.get())
ventana=Tk()
ventana.config(bg=”white”)
ventana.geometry(“460×360”)
ventana.resizable(width=TRUE, height=TRUE)
ventana.title(“Ventana de Python”)
#definimos 2 botones
boton1=Button(ventana,text=”Minimizar”,command=minimizar).grid(row=2,column=1)
boton2=Button(ventana,text=”Mensaje”,command=mensaje).grid(row=2,column=4)
#definimos etiqueta
etiqueta1=Label(ventana,text=”Operaciones con botones”).grid(row=1,column=2)
#definimos entrada
texto=StringVar()
texto.set(“Introduce texto para mensaje”)
entrada1=Entry(ventana,width=50,bg=”blue”,fg=”yellow”,textvariable=texto).grid(row=3,column=2)
ventana.mainloop()

              

Please follow and like us:
Publicado el Deja un comentario

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada
nuestra web index.html una carpeta que llamaremos “css” y dentro de esta
carpeta crearemos un archivo llamado “estilos.css”.
En el “head” de index, os recuerdo que
ya incluimos la siguiente línea: <link
rel=”stylesheet” href=”css/estilos.css”
type=”text/css”/>
, esta línea enlaza al archivo de estilos
que vamos a preparar a continuación.
Para comenzar con el formato de la
web, personalmente prefiero primero prepararla para móvil y después para
escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name=”viewport”
content=”width=device-width, initial-scale=1″>.
En el archivo estilos.css añadimos lo
siguiente:
@media screen and
(min-width:480px){}
@media screen and
(min-width:767px){}
@media screen and
(min-width:950px){}
Con lo que podemos poner dentro de las
llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al
minimo de ancho que especificamos en pixeles (480, 767 y 950).
Ahora vamos a diferenciar las partes
de nuestra web añadiendo colores llamativos al CSS para ver claramente las
partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos
llamativa.
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and (min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
}
article{
         background:yellow;
}
aside{
         background:red;
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Con el código anterior puesto en el
archivo css, una vez grabado, podréis observar, al ejecutar la web index.html
en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con
esto hemos conseguido que al cambiar el tamaño de la visualización cambien los
colores de fondo, ahora vamos a cambiar también la disposición de los bloques
según se vean en un dispositivo u otro, para ello cambiamos el código css a:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and
(min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;        
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Quedando nuestra web en modo
escritorio:

Y en modo móvil:

Os explico las modificaciones en este
código, lo primero que cambiamos es:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
Con esto indicamos con el “*”
(selector universal) que eliminamos todos los márgenes y paddings, el padding
es como un margen interior.
Despues separamos todos los
identificadores usados con “,” para darles a todos formato para que actúen como
bloques y se visualicen uno debajo del otro según el orden que tienen en el
html.
Seguidamente, dentro del apartado css
para las tablets minimo de ancho 767px, introducimos el siguiente código:
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;
}
Como podeis ver, el primer cambio es
que en vez de visualizarse en bloque como indicamos anteriormente, ahora
indicamos que se visualicen en línea e indicamos un ancho en porcentaje para
que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El
ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.
Con esto ya tenemos la web preparada
para varios dispositivos, ahora pasaremos a darle un formato mejor.
En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.
Gracias.
Please follow and like us:
Publicado el Deja un comentario

CSS. Toma de contacto

Video en el que se explica como empezar con CSS, manteniendo el archivo de formato aparte del codigo HTML.

El codigo del archivo tomadecontacto.HTML es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/tomadecontacto.css”>
<title>
Toma de contacto con CSS
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

El codigo de la hoja de estilos tomadecontacto.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}

Espero os sea util. Gracias.

Please follow and like us: