Crea un documento HTML enlazado con el archivo CSS, incluyendo un boton que cuando se pase el puntero del raton por encima cambie de color de letra y fondo.
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Mostrando entradas con la etiqueta formato. Mostrar todas las entradas
Mostrando entradas con la etiqueta formato. Mostrar todas las entradas
domingo, 26 de junio de 2022
viernes, 5 de febrero de 2021
domingo, 10 de marzo de 2019
20 Html, Css. Dando formato al formulario
Vemos en el siguiente video como dar formato a nuestro formulario de contacto, probando diferentes opciones y viendo los cambios con los posibles diseños.
En este enlace podras acceder a todos los codigos del ejemplo que hemos creado.html <!DOCTYPE html><html lang="es"><head><title>Contacta con nosotros</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,contacto,contactanos"><meta name="description" content="Sitio web de ticoticotaa para contactarnos"><link rel="stylesheet" href="estilos.css"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet"></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>Contactanos</h2></hgroup><form action="#" method="post"><label>Nombre:</label><input name="nombre" type="text" placeholder="Nombre" required/><br/><label>Email:</label><input name="email" type="email" placeholder="ticoticotaa@gmail.com"/><br/><label>Mensaje:</label><textarea name="mensaje" rows="6" cols="50" placeholder="escribe tu mensaje"></textarea><br/><input id="boton" type="reset" value="Borrar"/><input id="boton" type="submit" value="Enviar"/></form></article></section><!--Complemento lateral--><aside><h3>Siguenos en: </h3><ul><li><a href="#" class="enlace">Facebook</a></li><li><a href="#" class="enlace">Twitter</a></li></ul></aside><!--Pie de pagina--><footer><p>Jose Ojeda 2019©</p><div id="email"><p>email: nombre@email.com</p></div></footer></body></html>
css *{ margin:0 auto; padding:0px; /*font-family: 'Playfair Display', serif;*/ font-family: 'Quicksand', sans-serif;}header{ background:#FF5733; color:#FFFFFF; font-size:3em; width:95%; padding:10px; margin:5px 5px; display:inline-block; border:solid 1px #ccc; border-radius:25px;}header figure{ float:left;}header h1{ float:right;}nav{ font-size:1em; width:95%; padding:5px; margin:1px 1px; text-align:center;}nav ul{ list-style-type:none;}nav li{ display:inline; text-align:center; margin:0 15px 0 0;}nav li a{ padding:2px 7px 2px 7px; color:#FF5733; background-color:#FFFFFF; border:1px solid #ccc; text-decoration:none;}nav li a:hover{ background:#FF5733; color:#FFFFFF;}section{ width:70%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px;}section h2{ color:#FF5733; font-size:1.5em;}section p{ font-size:1em;}aside{ width:20%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px; font-size:1em;}aside a{ text-decoration:none;}aside a:hover{ color:#000000;}aside ul{ list-style-type:none;}footer{ width:95%; clear:both; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; background:#FF5733; color:#FFFFFF; font-size:0.5em; border-radius:25px;}label{ margin-left:10px; margin-right:10px; padding:10px; float:left; width:70px;}input{ display:inline-block; margin-top:20px; margin-right:10px; margin-bottom:10px; padding:10px;}#boton{ display:inline-block; margin-bottom:10px; margin-top:10px;}
#email{ margin-left:65px; font-size:1.5em; color:yellow;}.enlace{ color:green; font-size:1em;}.enlace:hover{ color:blue; font-size:2em;}@media screen and (max-width:480px){ header{ font-size:1em; width:95%; padding:2px; margin:2px 2px; display:inline-block; border:solid 1px #ccc; border-radius:15px; } section p{ font-size:0.8em; color:red;}}
viernes, 11 de enero de 2019
11 Html Css. Formato cabecera
Damos formato a la cabecera de nuestra web.
*{ margin:0 auto; padding:0px; font-family:Arial;}header{ background:#FF5733; color:#FFFFFF; font-size:3em; width:95%; padding:10px; margin:5px 5px; display:inline-block; border:solid 1px #ccc; border-radius:25px;}header figure{ float:left;}header h1{ float:right;}
jueves, 10 de enero de 2019
10 Html Css. Introduccion estilos
Introduccion a CSS para dar formato o estilo a nuestra web.
HTML
CSS
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©</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;
}
domingo, 11 de marzo de 2018
04 Web. Pagina de contacto con Mapa de direccion
Vemos como realizar nuestra pagina web de contacto insertando un mapa de Google marcando la direccion que necesitamos.
HTML
CSS
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-secale=1.0">
<meta name="author" content="Jose Ojeda (ticoticotaa)">
<meta name="keywords" content="html,web,contacto">
<meta name="description" content="contacto web">
<link href="css/estiloContacto.css" rel="stylesheet" type="text/css">
<title>Contacto</title>
</head>
<body>
<section>
<article>
<header>
<h1>Contacta con nosotros</h1>
<address>C/ Calle, nยบ 25</address>
<a href="mailto:kjkdjkf@djkd.com">Enviar email</a>
</header>
<div id="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.161976248746!2d-5.995048934340552!3d37.3860015298321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9d4fd647e46b7247!2sLa+Giralda!5e0!3m2!1ses!2ses!4v1520802459105" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</article>
</section>
</body>
</html>
CSS
*{
max-width:960px;
margin:0 auto;
}
h1{
font-size:3em;
text-align:center;
padding:10px;
}
a{
color:blue;
padding:4px;
background-color:white;
text-decoration:none;
border-radius:15px;
border: 5px solid #bbb;
text-align:center;
margin:20px;
}
address{
text-align:center;
padding:10px;
}
header{
text-align:center;
padding:10px;
margin:15px;
}
#mapa{
margin:0 auto;
}
sábado, 3 de marzo de 2018
05 JavaScript. Contador de tiempo
Creamos un contador de tiempo para nuestra web, para ello usamos HTML, CSS y JavaScript.
El codigo es:
HTML
El codigo es:
HTML
<!DOCTYPE html>CSS
<html>
<head>
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<title>
Contador
</title></head>
<body>
<section>
<div id="contenido">
<article>
<div id="tiempo">
<h5 id="titulo">
<span>Horas</span>
<span>Minutos</span>
<span>Segundos</span>
</h5>
<h2 id="contador">
<span id="horas">00</span>
<span id="minutos">00</span>
<span id="segundos">00</span>
</h2>
</div>
</article>
</div></section>
<script src="js/tiempo.js"></script>
</body></html>
body{JavaScript
margin:0 auto;
max-width:98%;
font-family: Helvetica, Arial;
font-size:14px;
}
#titulo{
font-size:1.3em;
text-align:center;
margin-top:5em;
padding:1.3em;
color:#434343;
}
#contador{
font-size:2.2em;
text-align:center;
color:#434343;
}
var horas,minutos,segundos;
horas=0;
minutos=0;
segundos=0;
hor=document.getElementById("horas");
min=document.getElementById("minutos");
seg=document.getElementById("segundos");
function tiempo(){
var contador=0;
window.setInterval(function(){
if(contador<10){
seg.innerHTML="0"+contador;
}else{
seg.innerHTML= contador;
}
if(contador>59){
segundos=0;
contador=0;
minutos=minutos+1;
}
if(minutos>59){
minutos=0;
horas=horas+1;
}
if(horas>23){
horas=0;
}
if(minutos<10){
min.innerHTML="0"+minutos;
}else{
min.innerHTML=minutos;
}
if(horas<10){
hor.innerHTML="0"+horas;
}else{
hor.innerHTML=horas;
}
contador++;
},1000);
}
tiempo();
sábado, 6 de mayo de 2017
Crea tu web Responsive Video 04
Cambiaremos el formato de nuestra web, seleccionando el color del sitio; iremos cambiando cada apartado de nuestra web (nav, article, aside, footer).
jueves, 22 de septiembre de 2016
07. Juego tres en raya, activar boton partida y terminacion
En este video activo el boton de volver a jugar y preparamos el codigo para que el juego este completamente operativo.
El codigo HTML queda asi:
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.
El codigo HTML queda asi:
<!doctype html>El codigo de ejecutar.js queda asi:
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
<p id="mensaje"></p>
<p id="boton" onClick="jugarOtraVez()"></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/juego.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>
var Total_segs;El codigo de tablero.js queda asi:
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
var color;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function jugarOtraVez(){
jugador=1;
gana=0;
fin=null;
casillapte=9;
Mensaje.style.display="none";
textoBoton.style.display="none";
ejecutar();
}
function SeleccionaCelda(x,y,jugador){
tablero[x][y]=jugador; //podra ser 2 por otro jugador
//pintamos la celda
PintarCelda(x,y,"blue",jugador);
casillapte--;
comprobar(x,y,jugador);
}
function tiraJugador2(){
jugador=2;
x2=Math.round(Math.random()*2);
y2=Math.round(Math.random()*2);
while((tablero[x2][y2]==1) ||( tablero[x2][y2]==2)){
x2=Math.round(Math.random()*2);
y2=Math.round(Math.random()*2);
}
if(fin){
mensajeFin();
}else{
SeleccionaCelda(x2,y2,jugador);
}
jugador=1;
}
function RevisarCelda(x,y){
if(tablero[x][y]==1 || tablero[x][y]==2){
//alert("Casilla ocupada");
mensajeCasilla();
} else if(fin){
//alert("Se acabo la partida");
mensajeFin();
} else {
jugador=1;
SeleccionaCelda(x,y,jugador);
if(casillapte>0){
jugador=2;
tiraJugador2();
}
}
}
function ejecutar(){
//array tablero
for(i=0;i<3;i++){
tablero[i]=new Array(3);
}
LimpiaReloj();
IniciaReloj();
color="red";
IniciarTablero(color);
}
ejecutar();
function IniciarTablero(color){El codigo de juego.js queda asi:
for(i=0;i<3;i++){
for(j=0;j<3;j++){
tablero [i][j]=0;
celda=document.getElementById("c"+i+j);
celda.style.background=color;
celda.innerHTML="";
}
}
}
function PintarCelda(x,y,color,jugador){
//selecciona celda
celda=document.getElementById("c"+x+y);
//ponemos color
celda.style.background=color;
if(jugador==1){
celda.innerHTML="<img src='img/cruz.png'></img>";
}else {
celda.innerHTML="<img src='img/circulo.png'></img>";
}
}
function comprobar(x,y,jugador){El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
gana=jugador;
}
if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
gana=jugador;
}
if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
gana=jugador;
}
if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
gana=jugador;
}
if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
gana=jugador;
}
if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
gana=jugador;
}
if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
gana=jugador;
}
if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
gana=jugador;
}
if(gana==1){
//alert("Gana el jugador 1");
mensaje(gana);
fin=true;
}else if(gana==2){
//alert("Gana el jugador 2");
mensaje(gana);
fin=true;
}else if(casillapte==0){
fin=true;
gana=0;
mensaje(gana);
}
}
function mensaje(gana){
if(gana!=0){
textoMensaje="Gana el jugador "+gana;
Mensaje=document.getElementById("mensaje");
Mensaje.style.display="block";
Mensaje.innerHTML=textoMensaje;
texto="Jugar Otra Vez";
textoBoton=document.getElementById("boton");
textoBoton.style.display="block";
textoBoton.innerHTML=texto;
}else{
textoMensaje="Empate";
Mensaje=document.getElementById("mensaje");
Mensaje.style.display="block";
Mensaje.innerHTML=textoMensaje;
texto="Jugar Otra Vez";
textoBoton=document.getElementById("boton");
textoBoton.style.display="block";
textoBoton.innerHTML=texto;
}
}
function mensajeFin(){
textoMensaje="Se acabo la partida";
Mensaje=document.getElementById("mensaje");
Mensaje.style.display="block";
Mensaje.innerHTML=textoMensaje;
Pausa();
}
function mensajeCasilla(){
textoMensaje="Casilla ocupada";
Mensaje=document.getElementById("mensaje");
Mensaje.style.display="block";
Mensaje.innerHTML=textoMensaje;
Pausa();
}
function Pausa(){
segundos=0;
tiempo=setInterval(function(){
while(segundos<2){
segundos++;
}
if(segundos==2){
Mensaje.style.display="none";
}
},2000);
}
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.
domingo, 18 de septiembre de 2016
08 CSS Display
Atributos de la propiedad Display y como ocultar con la propiedad Visibility.
El codigo HTML es:
El codigo CSS es:
Espero os sea util, gracias.
El codigo HTML es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Display
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo4">Parrafo 4 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsaljkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkfjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo CSS es:
/*www.ticoticotaa.es*/
/*@2016*/
*{
}
#parrafo1{
width:150px;
background-color:blue;
display:block;
}
#parrafo2{
width:150px;
background-color:red;
display:inline;
}
#parrafo3{
width:150px;
height:100px;
background-color:pink;
visibility:hidden;
}
#parrafo4{
width:150px;
background-color:yellow;
display:block;
}
Espero os sea util, gracias.
domingo, 11 de septiembre de 2016
06. CSS Tablas
En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.
El codigo html es:
El codigo css es:
Espero os sea util, gracias.
El codigo html es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tablas.css">
<title>
Tablas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<h2>Primera tabla</h2>
<table class="uno">
<caption>Tabla de colores</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Verde</td>
<td>Uno</td>
</tr>
<tr>
<td>Rojo</td>
<td>Dos</td>
</tr>
<tr>
<td>Amarillo</td>
<td>Tres</td>
</tr>
</table>
<h2>Segunda tabla</h2>
<table class="dos">
<caption>Tabla de colores 2</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Rosa</td>
<td>Cuatro</td>
</tr>
<tr>
<td>Azul</td>
<td>Cinco</td>
</tr>
<tr>
<td>Celeste</td>
<td></td>
</tr>
</table>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo css es:
/*Comentario de CSS*/En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
/*selector universal*/
*{
}
table{
border-collapse:separate;
border-spacing:5px 4px;
}
caption {
caption-side:top;
}
.uno{
border:1px solid gray;
width:50%;
table-layout:auto;
text-align:center;
}
.dos{
border:2px solid blue;
width:75%;
table-layout:fixed;
background-color:gray;
empty-cells:hide;
}
Espero os sea util, gracias.
domingo, 4 de septiembre de 2016
03. CSS Propiedades Textos
En este video se exponen ejemplos de como dar formato a textos mediante CSS, cambiando color, tamaño y otras propiedades.
El codigo del archivo HTML es:
El codigo del archivo CSS es:
Espero sea util. No olvideis practicar.
El codigo del archivo HTML es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/formatoFuentes.css">
<title>
Formato Fuentes
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p class="nowrap">Parrafo nowrap primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p class="inherit">Parrafo segundo inherit jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo del archivo CSS es:
/*Comentario de CSS*/
/*selector universal*/
*{
background-color:gray;
}
p{
font-family:Helvetica,sans-serif;
font-size:medium;
font-style:italic;
text-transform:lowercase;
letter-spacing:3px;
word-spacing:10px;
}
p .nowrap{
white-space:nowrap;
}
p .inherit{
white-space:inherit;
}
h1{
font-size:1.25em;
font-weight:bold;
color:blue;
text-shadow:4px 3px 5px red;
}
h2{
font-size:1em;
color:white;
text-decoration:underline;
}
Espero sea util. No olvideis practicar.
martes, 19 de julio de 2016
02. CSS Divs y Clases
Desde CSS podremos llamar a etiquetas HTML, Divs y Clases, para dar formato a cualquier parte de nuestro documento HTML.
El codigo del archivo divyclases.HTML es:
En el video uso el editor NOTEPAD++.
Espero os sea util y no olvideis practicar. Gracias.
El codigo del archivo divyclases.HTML es:
<!doctype html>El codigo de la hoja de estilos divyclases.CSS es:
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/divyclases.css">
<title>
Pruebas con div y clases
</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>
<div id="segundodiv">
<p>Este es el segundo parrafo para probar CSS</p>
</div>
<p class="terceraclase">Este es el tercero parrafo para probar CSS</p>
<p>Este es el cuarto parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Para cualquier duda podeis contactar conmigo.
/*Comentario de CSS*/
/*selector universal*/
*{
background-color:blue;
}
p{
font-size:35px;
color:green;
}
#segundodiv p{
color:yellow;
background-color:green;
}
.terceraclase{
color:red;
background-color:yellow;
font-size:45px;
}
En el video uso el editor NOTEPAD++.
Espero os sea util y no olvideis practicar. Gracias.
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:
El codigo del archivo tomadecontacto.HTML es:
<!doctype html>El codigo de la hoja de estilos tomadecontacto.CSS es:
<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>
/*Comentario de CSS*/Espero os sea util. Gracias.
/*selector universal*/
*{
background-color:blue;
}
Suscribirse a:
Entradas (Atom)