Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - jimmorrison

Páginas: 1 [2] 3
21
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2
« en: 23 de Abril 2015, 03:09 »
una pregunta maestros  que tengo desde que inicie a estudiar html y css

Si busco una imagen en el buscador (x) por ejemplo imagen.jpg  (2206x1519)  si quiero que aparesca la imagen completa dentro de una caja por ejemplo de 600 x 600  o viceversa si la imagen es pequeña y quiero colocarla en una caja mas grande.

nota: un compañero me dijo que se distorsiona las imagenes

 un ejemplo

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con

border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_propiedades_background.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja
</div>

<div id="caja_2" class="cajas">
caja
</div>

<div id="caja_3" class="cajas">
caja
</div>

<div id="caja_4" class="cajas">
caja
</div>

<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
Código: [Seleccionar]
*{
marigin: 0px;
padding: 0px;
}

body{
text-align: center;
background-color: silver;}

.cajas{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid white 5px;
}

#caja_1{
background-image: url(http://coyotechronicle.net/wp-

content/uploads/2014/05/real-madrid-logos-

0424182101.jpg);}

#caja_2{}

#caja_3{}

#caja_4{}



22
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2
« en: 21 de Abril 2015, 13:39 »
el ejercicio A lo puse en otro apartado con el mismo nombre

23
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Poner imágenes de fondo y color CSS. background-image (CU01030D) ejercicio 1
« en: 21 de Abril 2015, 13:34 »
yo pense que para eso ero fue el ejercicio en caso que la imagen no se pudiera ver con el background color podria tener un color de fondo indicando falla al cargar imagen o error.

24
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2
« en: 21 de Abril 2015, 04:44 »
Citar
EJERCICIO 2

Crea dos páginas web cumpliendo estos requisitos:

a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.

b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

html

Código: [Seleccionar]
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar

con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio2_1_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>

<div id="caja_1" class="cajas">
Caja 1
</div>

<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

*{
font-family: arial;
text-align: center;
}


body{
background-image: url(http://www.marketingdirecto.com/wp-content/uploads/2012/09/mundo2.gif);
}


pregunta:
¿estas propiedades sirven con  src = img()?

ejemplo
html
src img=(ruta);

css
img{
width: 136px;
height: 136px;
background: repeat;
}

mas o menos a eso me refiero 
repeat (repetición horizontal y vertical)
repeat-x (repetición sólo horizontal)
repeat-y (repetición sólo vertical)
no-repeat (la imagen se muestra sólo una vez, sin repeticiones)

25
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML Poner imágenes de fondo y color CSS. background-image CU01030D# ejercicio
« en: 21 de Abril 2015, 03:49 »
Enunciado ejercicio CU01030D del tutorial de fundamentos de programación web con CSS usando Notepad++ como editor:

Citar
Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Respuesta:

html

Código: [Seleccionar]
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar

con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>

<div id="caja_1" class="cajas">
Caja 1
</div>
<div id="caja_2" class="cajas">
Caja 2
</div>
<div id="caja_3" class="cajas">
Caja 3
</div>
<div id="caja_4" class="cajas">
Caja 4
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

*{font-family: arial;
text-align: center;}

body{
background-color: yellow;}

.cajas{
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
color: white;
}

#caja_1{
background-color: purple;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIwlR_9cgOX0ZYaPow6HUmnSYBZsaMYFxdrUelCoMcjjFHE7eD);
}

#caja_2{
background-color: silver;
background-image: url(http://k39.kn3.net/taringa/C/C/C/3/9/D/agente867/745.jpg);
}

#caja_3{
background-color: orange;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBHmlrkbC6StIm947mrAwfnqmN0zbg55e3KuwNm3FRx0H_PB02Hw);
}


#caja_4{
background-color: red;
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRW7g3sM7R8X7cURFla1HBiGnAX7lqCXiiOsDPWyRQSpKvCBpD9jw)
}

26
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b
« en: 20 de Abril 2015, 02:14 »
gracias por los errores ogramar, pero no se cuales son los separadores ccss ni idea.

voy a buscarlo en internet pero si me puedes orientar seria excelente

27
Aprender a programar desde cero / Re:Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D
« en: 18 de Abril 2015, 23:05 »
si gracias por la correccion

28
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Padding, margin CSS márgenes, rellenos Top, right, bottom, left Ejercio CU01029D
« en: 18 de Abril 2015, 22:45 »
Citar
EJERCICIO

Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

Responde a las siguientes preguntas:

a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

html
Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_margin_padding.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja1
</div>
<div id="caja_2" class="cajas">
caja 2
</div>

<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

body{background-color: #FA5858;}

footer{
text-align: center;
font-family: Arial;
}

.cajas{
text-align: center;
font-size: 2em;
background-color: #FFB6C1;
border-top: dotted #DC143C 15px;
border-right: dashed green 10px;
border-bottom: double #FF00FF 10px;
border-left: ridge #2F4F4F 60px;
padding-top: 30px;
padding-right: 45px;
padding-bottom: 0px;
padding-left: 60px;
}

#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}

#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}


respuestas
a) el ancho de cada caja (div) es 425px

b)es el alto total del div55

c)el total con margin padding div y borde de izquierda a derecha son : 720


este si me costo sacar las cuentas jaja ahora si necesito su sabiduria por favor.

tengo mas duda en el alto de la caja por el texto

29
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / ¿Qué es el reseteo CSS? Concepto de margen y relleno CSS. (CU01028D)
« en: 18 de Abril 2015, 20:50 »
Enunciado:

Citar
Para cada una de las siguientes afirmaciones indica si la afirmación es verdadera o falsa y justifica brevemente tu respuesta:

a) CSS muestra los contenidos con tres formas básicas: rectangular, circular y elipsoidal.

b) Al crear un documento HTML, pueden aparecer márgenes y rellenos que no hayan sido explícitamente introducidos por nosotros como programadores, sino que hayan sido introducidos por el navegador que estemos empleando.

c) El reseteo CSS consiste en la recarga de la página para borrar la caché del navegador, de modo que los estilos se recarguen completamente.

Respuestas:

a) negativo, css muestra los contenidos por medio de cajas  en forma rectangulares.

b)si al crear un documento html el navegador tiene establecidos margenes y rellenos o ambos

c)negativo, el reseteo que explica el ejercicio (CU01028D) consta de borrar el padding y el margin que tiene el navegador por defecto
*{margin 0px; padding 0px;}

30
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b
« en: 18 de Abril 2015, 19:27 »
Enunciado:

Citar
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.

Respuesta:

Código html:

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a

programar con border">
<meta name="keywords" content="border programar css

html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_border.css">
</head>
<body>

<div id="divisor_1" class="divisores">
divisor 1
</div>
<br>
<div id="divisor_2" class="divisores">
divisor 2
</div>
<br>
<div id="divisor_3" class="divisores">
divisor 3
</div>
<br>
<div id="divisor_4" class="divisores">
divisor 4
</div>
<br>
<div id="divisor_5" class="divisores">
divisor 5
</div>
<br>
<div id="divisor_6" class="divisores">
divisor 6
</div>
<br>
<div id="divisor_7" class="divisores">
divisor 7
</div>
<br>
<div id="divisor_8" class="divisores">
divisor 8
</div>
<br>
<div id="divisor_9" class="divisores">
divisor 9
</div>
<br>
<div id="divisor_10" class="divisores">
divisor 10
</div>
<br>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

Código css externo

Código: [Seleccionar]
body{background-color: #FA5882;}
.divisores{
text-align: center;
font-size: 2em;
background-color: #F7BE81}

footer{
text-align: center;
font-family: Arial;
}

#divisor_1{
border-top: solid brown 5px;
border-right: hidden blue 5px;
border-bottom: dotted orange 5px;
border-left: solid red 5px;}

#divisor_2{
border-top: groove yellow 5px;
border-right: ridge pink 5px;
border-bottom: inset green 5px;
border-left: outset silver 5px;
}

#divisor_3{
border-top: double blue 5px;
border-right: dotted red 5px;
border-bottom: solid black 5px;
border-left: inset green 5px;
}
#divisor_4{
border-top: double blue 5px;
border-bottom: inset green 5px;
border-right: dotted red 5px;
border-left: inset green 5px;
}
#divisor_5{
border-top: solid brown 5px;
border-right: dotted red 5px;
border-left: solid yellow 5px;
border-bottom: dotted orange 5px;
}
#divisor_6{
border-top: double blue 5px;
border-right: double blue 5px;
border-bottom: double blue 5px;
border-left: double blue 5px;
}
#divisor_7{
border-top: dotted blue 5px;
border-right: dotted blue 5px;
border-bottom: dotted blue 5px;
border-left: dotted blue 5px;
}
#divisor_8{
border-top: inset green 5px;
border-right: inset green 5px;
border-bottom: inset green 5px;
border-left: inset green 5px;
}
#divisor_9{
border-top: outset silver 5px;
border-right: outset silver 5px;
border-bottom: outset silver 5px;
border-left: outset silver 5px;
}
#divisor_10{
border-top: groove yellow 5px;
border-right: groove yellow 5px;
border-bottom: groove yellow 5px;
border-left: groove yellow 5px;
}

31
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Color de fondo. Propiedad background-color CSS Ejercicio CU01021D del tutorial
« en: 18 de Abril 2015, 08:49 »
Enunciado:

Citar
Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:

a) División 1: un color expresado con notación RGB.
b) División 2: un color expresado con notación RGBA.
c) División 3: un color expresado con notación hexadecimal.
d) División 3: un color expresado con notación HSL.
e) División 4: un color expresado con notación HSLA.
f) División 5: un color designado con un nombre.

En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Respuesta:

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/background_color.css">
</head>
<body>
<header>
<h1>Creando divisiones de con background-color tabla</h1>
</header>

<div id="division1" class="cajas">
División 1: un color expresado con notación RGB
rgb(200,0,0)
</div>
<br>
<div id="division2" class="cajas">
2: un color expresado con notación RGBA.
rgba(0,100,50,0.5)
</div>
<br>
<div id="division3" class="cajas">
3: un color expresado con notación hexadecimal.
#F781D8
</div>
<br>
<div id="division4" class="cajas">
4: un color expresado con notación HSL.
hsl(250,10%,80%)
</div>
<br>
<div id="division5" class="cajas">
5: un color expresado con notación HSLA.
hsla(125,10%,80%,0.8)
</div>
<br>
<div id="division6" class="cajas">
6: un color designado con un nombre.
orange
</div>

</body>
</html>
css
Código: [Seleccionar]
.cajas{
text-align: center;
border: 5px solid black;
font-size: 30px;
}

#division1{background-color: rgb(200,0,0);}
#division2{background-color: rgba(0,100,50,0.5);}
#division3{background-color: #F781D8;}
#division4{background-color: hsl(250,10%,80%);}
#division5{background-color: hsla(125,10%,80%,0.8);}
#division6{background-color: orange;}

32
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo Crear transparencia en colores CSS rgba y selectores nth-child CU01020D
« en: 18 de Abril 2015, 07:19 »
Enunciado:

Citar
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>

Respuestas:

html

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_tabla_colores.css">
</head>
<body>
<header>
<h1>Creando divisiones de colores tabla</h1>
</header>

<table border="5" id="tabla1">
<tr>
<th>RGB 178,34,34</th>
<td>178,34,34,con transparencia 0.1</td>
<td>178,34,34,con transparencia 0.2</td>
<td>178,34,34,con transparencia 0.3</td>
<td>178,34,34,con transparencia 0.4</td>
<td>178,34,34,con transparencia 0.5</td>
<td>178,34,34,con transparencia 0.6</td>
<td>178,34,34,con transparencia 0.7</td>
<td>178,34,34,con transparencia 0.8</td>
<td>178,34,34,con transparencia 0.9</td>
<td>178,34,34,con transparencia 1</td>
</tr>
</table>

<br>

<table border="5" id="tabla2">
<tr>
<th>RGB 218,165,32</th>
<td>218,165,32, con transparencia 1</td>
<td>218,165,32, con transparencia 0.9</td>
<td>218,165,32, con transparencia 0.8</td>
<td>218,165,32, con transparencia 0.7</td>
<td>218,165,32, con transparencia 0.6</td>
<td>218,165,32, con transparencia 0.5</td>
<td>218,165,32, con transparencia 0.4</td>
<td>218,165,32, con transparencia 0.3</td>
<td>218,165,32, con transparencia 0.2</td>
<td>218,165,32, con transparencia 0.1</td>
</tr>
</table>

</body>
</html>
css

Código: [Seleccionar]
header{
background-color: rgb(250,150,0);}

#tabla1 th{background-color: rgb(0%,40%,10%);}
#tabla1 td:nth-child(2){background-color: rgba(178,34,34,0.1);}
#tabla1 td:nth-child(3){background-color: rgba(178,34,34,0.2);}
#tabla1 td:nth-child(4){background-color: rgba(178,34,34,0.3);}
#tabla1 td:nth-child(5){background-color: rgba(178,34,34,0.4);}
#tabla1 td:nth-child(6){background-color: rgba(178,34,34,0.5);}
#tabla1 td:nth-child(7){background-color: rgba(178,34,34,0.6);}
#tabla1 td:nth-child(8){background-color: rgba(178,34,34,0.7);}
#tabla1 td:nth-child(9){background-color: rgba(178,34,34,0.8);}
#tabla1 td:nth-child(10){background-color: rgba(178,34,34,0.9);}
#tabla1 td:nth-child(11){background-color: rgba(178,34,34,1);}


#tabla2 th{background-color: rgb(200,100,0);}
#tabla2 td:nth-child(2){background-color: rgba(218,165,32,1);}
#tabla2 td:nth-child(3){background-color: rgba(218,165,32,0.9);}
#tabla2 td:nth-child(4){background-color: rgba(218,165,32,0.8);}
#tabla2 td:nth-child(5){background-color: rgba(218,165,32,0.7);}
#tabla2 td:nth-child(6){background-color: rgba(218,165,32,0.6);}
#tabla2 td:nth-child(7){background-color: rgba(218,165,32,0.5);}
#tabla2 td:nth-child(8){background-color: rgba(218,165,32,0.4);}
#tabla2 td:nth-child(9){background-color: rgba(218,165,32,0.3);}
#tabla2 td:nth-child(10){background-color: rgba(218,165,32,0.2);}
#tabla2 td:nth-child(11){background-color: rgba(218,165,32,0.1);}

33
Aprender a programar desde cero / Re:Curso CSS desde cero ejercicio CU01013D encadenar varios selectores y herencia
« en: 17 de Abril 2015, 19:59 »
Enunciado:

Citar
Analiza el código HTML del ejercicio. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde y tamaño de fuente el 110% respecto de lo normal para los elementos h3 que se encuentren dentro de un elemento cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.

e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.


Respuesta:

Código HTML

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta
charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_herencia_selectores_class.css">
</head>
<body>

<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del

sitio.</p></div>

<div class="secundario"><h3>Lanzamos el producto <span>X-FASHION</span></h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto"

alt="imagen producto x-fashion" /></p>
</div>

<div class="secundario"><h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion"

alt="imagen producto tmotion" /></p>
</div>

</body>
</html>

Código css:

Código: [Seleccionar]
.principal h1{
color: red;
font-size: 130%;
}

.secundario h3{
color: green;
font-size: 110%;
}

.secundario h3 span{
background-color: yellow;
}

body{
font-family: Arial, sans-serif;;
}

34
Aprender a programar desde cero / Re:Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie
« en: 17 de Abril 2015, 10:06 »
si me fallo el cierre   >:( >:( </section]

el utf-8 no lo cierro completo por que no me aparecen las tildes o las eñes si lo pongo completo
<meta charset="utf-8" por eso lo dejo asi

gracias ogramar por leer mi codigo me tiro a dormir que llevo desde las 11:00 am  y ya son las 3:06 jaja

saludos

35
Aprender a programar desde cero / Re:Ejercicio CU01012D- Selectores Class
« en: 17 de Abril 2015, 09:59 »
html
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos,

libros"><meta charset=utf-8">
<link rel="stylesheet" href="css/ejercicio_selectores_class.css"
</head>
<body>

<div class="principal">
<h1>Novedades</h1><p>Aquí presentamos las novedades delsitio.</p>
</div>

<div class="secundario">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un

bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto"

alt="imagen producto x-fashion" /></p>
</div>

<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto
tmotion" alt="imagen producto tmotion" /></p>
</div>

</body>
</html>
css
Código: [Seleccionar]
.principal{color: red; font-size: 150%;}
.secundario{color: green; font-size: 110;}
.secundario p{background-color: yellow;}

36
Aprender a programar desde cero / Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web
« en: 17 de Abril 2015, 08:36 »
html
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset=utf-8">
<link rel="stylesheet" href="css/ejercicio_selectores.css">
</head>
<body>

<div id="novedades">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>

<div id="xFashion">
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un

bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto"

alt="imagen producto x-fashion" /></p>
</div>
<div id="tMotion">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto

tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>
css externo
Código: [Seleccionar]
#novedades h1{
color: red;
}

#xFashion h3, #tMotion h3{
color: green;
}

#novedades{background-color: yellow;}

37
Aprender a programar desde cero / Re:CU01010D curso CSS diferencia entre estilos en línea, interno y externo
« en: 17 de Abril 2015, 07:32 »
Enunciado ejercicio 1:

Citar
EJERCICIO 1

Modifica el código HTML del ejercicio para cumplir con estos requisitos mediante la aplicación de estilos internos:

a) Todas las etiquetas h1 deben mostrar su texto en color rojo.
b) Todas las etiquetas h3 deben mostrar su texto en color verde.
c) Todos los párrafos deben mostrar su texto en color brown (marrón).

Respuesta ejercicio 1 con css interno

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>curso de css</title>
<meta charset=utf">
<meta name="description" content=" aprender a programar css">
<meta name="keywords" contents="aprender css tutorial">
<style>
h1{color: red;}
h3{color: green;}
p{color: brown;}
</style>
</head>
<p><a href="principal.html" title="pagina principal">Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen
producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion"

alt="imagen producto tmotion" /></p>
</body>
</html>

Enunciado ejercicio 2:

Citar
EJERCICIO 2

Modifica el código HTML del ejercicio para cumplir con estos requisitos mediante la aplicación de CSS externo definido en un archivo independiente, donde debes incluir al menos un comentario:

a) Todas las etiquetas h1 deben mostrar su texto en color azul.
b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).
c) Todos los párrafos deben mostrar su texto en color brown (marrón).


Respuesta ejercicio 2 con css externo

Código: [Seleccionar]
h1{color: blue;}
h3{color: orange;}
p{color: brown;}

html
Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>curso de css</title>
<meta charset=utf">
<meta name="description" content=" aprender a programar css">
<meta name="keywords" contents="aprender css tutorial">
<link rel="stylesheet" href="css/ejercicio_estilos_archivos_externos.css">
</head>
<p><a href="principal.html" title="pagina principal">Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

38
Aprender a programar desde cero / Re:Ejercicio CU01009D curso CSS aplicar estilos en línea cambiar color del texto
« en: 17 de Abril 2015, 06:39 »
dejo mi codigo maestros corrijan mis errores por favor

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset=utf-8">
</head>
<body>
<p><a href="principal.html" title="Página principal" style="color: brown;">Ir a la pagina principal</a></p>

<h1 style="color: red;">Novedades</h1>

<p style="color: brown;">Aquí presentamos las novedades del sitio.</p>

<h3 style="color: green;">Lanzamos el producto X-FASHION</h3>

<p style="color: brown;">Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3 style="color: blue;">Mejoramos el producto T-MOTION</h3>

<p style="color: brown;">Hemos lanzado una nueva versión del producto T-MOTION</p>

<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>

</body>
</html>

39
Aprender a programar desde cero / Re:Ejercicio CU00728B tutorial HTML formulario para enviar un archivo de imagen
« en: 17 de Abril 2015, 02:08 »
aqui esta el mio ogramar

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>aprendiendo a programar</title>
<meta charset=utf8">
<meta name="description" content="portal aprendiendo a programar">
<meta name="keywords" content="aprender programar html portal">
</head>
<body>
<div id="pagina" style="text-align: center;">

<header id="cabecera">
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo aprendiendo a programar"

title="logo">
Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com
</header>

<div id="wrapper"><!--contenedor-->

<nav id="menu"> <!--inicio del menu -->
<span>Menu</span>
<hr style="color:red; background-color:red; width:50%;" />
<hr color="blue" size=3>

<ul>
<li><a href="#">Portada</a></li>
<li><a href="https://www.aprenderaprogramar.com">aprenderaprogramar.com</a></li>
</ul>
</nav><!--fin del menu nav -->

<section id="seccion"><!--inicio de seccion -->

<div id="formulario">
<form method="get" action="accion.html" enctype="multipart/form-data">
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Teléfono: <input type="text" name="telefono" /><br />
imagen: <input type="file" name="imagen">
</form>
<br>
</div>
<article>
¿Qué atributo ha de especificarse para el form para poder enviar archivos? <br>
enctype<br>
¿Qué valor ha de darse a dicho atributo? <br>
multipart/form-data<br>
¿Qué método de envío hay que especificar para el form si se envían archivos? <br>
post
</article>
</section]<!--fin de seccion -->

</div><!--fin de contenedor-->
<br><br><br>
<footer id="pie_de_pagina">
Copyright 2006-2072 aprenderaprogramar.com
</footer>

</div>
</body>
</html>

40
Aprender a programar desde cero / Re:Ejercicio CU00727B tutorial HTML: creación de portal básico con cabecera y pie
« en: 17 de Abril 2015, 01:26 »
Sigo yooo jeje

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>aprendiendo a programar</title>
<meta charset=utf8">
<meta name="description" content="portal aprendiendo a programar">
<meta name="keywords" content="aprender programar html portal">
</head>
<body>
<div id="pagina" style="text-align: center;">
<header id="cabecera">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwrxF-gB-g5E16NKpOBLi8Yk0uGX38-lStv6_ovK8ikQIzpLfYZQ">
<h1>Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com</h1>
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTploPhKxW0YPotEcyGMrM4E4XllvSlKcnFUO2jb8TplqPwFqvw"

alt="niño programando" title="niño programando"></a>

</header>

<div id="pagina"> <!--pagina cuerpo-->

<div id="wrapper"><!--contenedor-->

<nav id="menu"> <!--inicio del menu -->
<span>Menu</span>
<hr style="color:red; background-color:red; width:50%;" />
<hr color="blue" size=3>

<ul>
<li><a href="#">Portada</a></li>
<li><a href="https://www.aprenderaprogramar.com">aprenderaprogramar.com</a></li>
<li><a href="#">curso</a></li>
<li><a href="#">tutorial</a></li>
<li><a href="#">imagenes</a></li>
</ul>
</nav><!--fin del menu nav -->

<section id="seccion"><!--inicio de seccion -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRslGpJiKnl23kPvgAsznGOFbELv80FRJ1p4k30j9U40Vd_am-N" alt="bebe html"

title="bebe aprendiendo html">
<article id="articulo"><!--primer articulo -->
<p>Al hablar de fundamentos de programación nos referimos a aquellos
conocimientos básicos que nos permitirán desenvolvernos sin excesivo número
de tropiezos. Veamos a qué tipo de tropiezos nos referimos utilizando un
símil de transporte. El conductor (programador) dispone de un coche
(el ordenador) y desea trasladarse
</p>
</article><!--fin del primer articulo -->
<article id="articulo2">
<p>REACIÓN DE UN PORTAL BÁSICO

En las próximas entregas, nos vamos a centrar en poner en marcha todos los conocimientos que hemos ido adquiriendo a lo largo del

curso para crear un pequeño, y de momento modesto, portal web. Para ello, vamos a crear un portal muy básico incluyendo algo de

maquetación.

 


 

En primer lugar crearemos una página de inicio o portada que contendrá lo siguiente: una cabecera, un menú, un cuerpo y un pié. No

entraremos a explicar los temas de diseño ni las hojas de estilos que se suelen usar en páginas web ya que ahora trataremos de

centrarnos en cuestiones básicas de HTML sin complicarlo con otros aspectos añadidos.
</p>
</article>
</section]<!--fin de seccion -->

</div><!--fin de contenedor-->

<footer id="pie_de_pagina">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQma33TrUrcKIkRV-kj9RDpGndLI4rUpzV5gZq3AWpXe1hRCxcWcw" alt="feliz

html" title="niño feliz html html5">
Copyright 2006-2072 aprenderaprogramar.com
</footer>

</div>
</body>
</html>

Páginas: 1 [2] 3

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".