Etiquetas

jueves, 15 de diciembre de 2016

Crear Página web

Hemos estado experimentando sobre como crear páginas webs con html en un simple bloc de notas o kompozer, pero en ninguno de estos casos dichas páginas las hemos subido a la red.A continuación os voy a explicar como he conseguido subir una de estas páginas webs creadas anteriormente, a la red.

Primer Paso 
A parte de crear nuestra página ya sea con kompozer o con otro programa similar, tendremos que crearnos una cuenta en Hostinger en la que te pedirá tu correo electrónico y una contraseña para poder iniciar sesión cada vez que quieras.(hay varias opciones de pago para esta pagina, pero siempre hay una forma gratuita que será la que elijamos).

Segundo paso
Nos descargamos el programa FileZilla, una vez descargado, lo ejecutamos y donde aparecen los apartados de servidor, nombre de usuario y contraseña, rellenamos con los datos que aparecen en hostinger.


Tercer paso
Una vez hemos metido esos datos, habrá cargado nuestra página en fileZilla y desde ahí podremos subir nuestra pagina pasando nuestros archivos ".html" y los demás que tengamos de nuestra  página aqui:

y con esto nuestra página subida a hostinger con nuestro propio enlace.
 Aquí os dejo el enlace de mi página que hice con kompozer: http://antonio-informatica.esy.es/








Publicado por en No hay comentarios:
Etiquetas: , , ,

lunes, 7 de noviembre de 2016

Ejercicio de Todo

<html>
<head>
<title>Alan Walker</title>
<link href="estilos.css" rel="stylesheet"type=text/css"/>
</head>
<body>
<h1>Alan Walker</h1>
<p>Es un DJ noruego nacido en 1997</p>
<img src="Alan walker foto.jpg"/>
<h2>Integrantes del Grupo</h2>
<ul>
<li>Alan Walker</li>
</ul>
<p>Pertenece a una "asociación" de DJ's llamada NCS (NO  COPYRIGHT SOUND)</p>
<h2>TEMAS</h2>
<table width="80%" border="1" align="center">
<caption>Grandes exitos de Alan Walker</caption>
<tr>
<th>Año</th>
<th>Tema</th>
</tr>
<tr>
<td>2014</td>
<td>Fade</td>
</tr>
<tr>
<td>2015</td>
<td>Faded</td>
</tr>
<tr>
<td>2016</td>
<td>Sing me to sleep</td>
</tr>
</table>

<h1>Sitio web oficial</h1>

<p>www.alanwalkermusic.no</p>
</body>
</html>

CSS

th
{
background-color:fff000;
}
td
{
background-color:#7FFF00;
}
table
{
border-color:#BLACK;
}

Publicado por en No hay comentarios:
Etiquetas: , , , ,

miércoles, 2 de noviembre de 2016

Actividad Tablas 1

<html>
<head>
<title>Ejemplo uso de tablas</title>
<link href="tabla1.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<table width="80%" border="1" align="center">
<caption>Tabla de Prueba</caption>
<tr>
<th>Jefe departamento</th>
<th>Jefe sección</th>
<th>Empleado</th>
<th>Edad empleado</th>
</tr>
<tr>
<td rowspan="2">Juan Alberto</td>
<td>Martín Lopez</td>
<td>Maite Suarez</td>
<td>55</td>
</tr>
<tr>
<td>Luis morales</td>
<td>Mateo carralde</td>
<td>33</td>
</tr>
<tr>
<td>Diana Rodriguez</td>
<td>Carlos Hernandez</td>
<td>Alberto Fernández</td>
<td>62</td>
</tr>
<tr>
<td colspan="2">Luis Perez</td>
<td>Diego Gutierrez</td>
<td>44</td>
</tr>
</table>
</html>

CSS
th
{
color:#00FFFF;
background-color:#663399;
}
td
{
background-color:#FFFF00;
color:#FF0000
}
body
{
text-aling:center;
}
Publicado por en No hay comentarios:

lunes, 24 de octubre de 2016

Ejercicio Estilo Básico II



<html>
<head>
<title>Estilos</title>
<link href="estilos2.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Estilos basicos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus leo. Suspendisse

accumsan lorem nec arcu dictum elementum. Nulla luctus in nulla at malesuada. Quisque non magna

nec est facilisis eleifend. Nulla facilisi. Donec vel molestie odio, nec fringilla urna.

Pellentesque vitae eros ligula. Aliquam ornare felis vitae nunc sodales, ut mattis neque

imperdiet. Etiam vestibulum lorem venenatis, convallis tellus at, mattis dui. Ut eros turpis,

mollis id eros eget, dignissim euismod risus. Quisque venenatis eget sem et suscipit.</p>

<h2>Estilos básicos 2</h2>
<p class=”miparrafo”>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus leo.

Suspendisse accumsan lorem nec arcu dictum elementum. Nulla luctus in nulla at malesuada. Quisque

non magna nec est facilisis eleifend. Nulla facilisi. Donec vel molestie odio, nec fringilla

urna. Pellentesque vitae eros ligula. Aliquam ornare felis vitae nunc sodales, ut mattis neque

imperdiet. Etiam vestibulum lorem venenatis, convallis tellus at, mattis dui. Ut eros turpis,

mollis id eros eget, dignissim euismod risus. Quisque venenatis eget sem et suscipit.</p>
</body>
</html>

CSS

body
{
font-family:Tahoma;
background-color:#00FFFB;
}
h1
{
font-size:30px;
color:#FF0006;
border-bottom-style:solid;
border-bottom-color:#FF7A0C;
}
p
{
font-size:12px;
}
.miparrafo
{
color:#FFFF05
}
Publicado por en No hay comentarios:
Etiquetas: , , ,

jueves, 20 de octubre de 2016

Ejercicio css




<html>
<head>
<title>Visita París</title>
<link href="estilosparis1.css"rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>París, ciudad con encanto</h1>
<p>Una de las ciudades europeas de más encanto, por no decir la que más, es París.
 Allí se pueden encontrar todo tipos de motivos susceptibles de ser visitados, con tranquilidad
o con prisas, en las diferentes ocasiones en que se esté en la gran urbe.</p><br />
<hr />
<p>Desde monumentos emblemáticos como la Torre Eiffel, el Arco de Triunfo, la catedral de Notre Dame o el Arco de la Defensa, a barrio pintorescos como el Barrio Latino, Pigalle o st.
Germain de pres; pasando por todo tipo de accidentes callejeros: vistosos mercados (el de Las Pulgas).
encantadores de cafés, preciosos puentes sobre el Sena...</p><br />

</body>
</html>


CSS

body
{
font-family:Arial;
background-color: #FFFF00;
}
h1
{
font-size:30px;
color:#808080;
}
p
{
font-size:12px;
color:#F00;
}

Publicado por en No hay comentarios:
Etiquetas: , ,

martes, 18 de octubre de 2016

Ejercicio 8 Biografia

Biografia de Bill Gates

Bill Gates

Resultado de imagen de Bill gates
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dolor, rutrum eget leo sed, tempus faucibus quam. Suspendisse ac nulla venenatis, suscipit mi eu, iaculis nisl. In eu odio sapien. In ullamcorper dignissim pulvinar. Proin at pellentesque ex, sed porta magna. Vivamus vitae rutrum mi. Praesent diam dui, imperdiet nec condimentum id, rutrum at felis. Vivamus venenatis, augue vel finibus molestie, metus odio cursus ante, varius consequat tellus velit vulputate nunc. Duis maximus pharetra lacus sit amet feugiat. Vestibulum ultricies dolor a ultrices dictum. Nam tortor sapien, vulputate pharetra pellentesque id, eleifend sit amet ex. Phasellus porttitor lectus commodo velit semper sagittis. Maecenas lobortis a urna in tincidunt. Donec egestas neque in urna suscipit tempor. Donec ut ipsum id ex viverra sollicitudin quis a eros.
Sed dui ipsum, ullamcorper ac nulla et, hendrerit sollicitudin enim. Morbi ut dolor ac velit accumsan mollis at sit amet lacus. Aliquam auctor vestibulum dui, quis condimentum dolor pretium eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor leo velit, vitae dapibus ante imperdiet eu. Quisque non pretium nisi. Suspendisse consectetur ante eu ultrices efficitur. Nunc vestibulum velit nec nulla dignissim, in maximus eros efficitur. Maecenas ornare aliquet mi et consequat. Quisque cursus, urna vel venenatis tempor, est neque venenatis dolor, hendrerit finibus ipsum est id massa. Maecenas id vestibulum orci. Ut posuere eleifend felis, a accumsan arcu mollis consectetur. In hac habitasse platea dictumst. Pellentesque malesuada elit sit amet elit condimentum finibus.
Suspendisse facilisis ultricies dolor dapibus luctus. Donec cursus lorem sed urna tincidunt sollicitudin. Phasellus ut elit iaculis, lacinia lorem in, dignissim sem. Sed ac elementum sem, et mattis ante. Fusce varius nec libero ac accumsan. Donec rutrum magna justo, sit amet scelerisque enim commodo sit amet. Aenean ornare dictum sollicitudin. In hac habitasse platea dictumst. Donec quam libero, cursus id pellentesque quis, iaculis non mi. Vestibulum ut neque ut libero placerat dignissim non eu lorem. Nunc vitae rhoncus odio. Suspendisse potenti. Mauris maximus elit convallis, aliquet odio eu, auctor est. Quisque dictum venenatis tellus.
<html>
<head>
<title>Biografia de Bill Gates</title>
</head>
<body>
<h1>Bill Gates</h1>
<center><img alt="Resultado de imagen de Bill gates" src="https://2.bp.blogspot.com/-

Z75CjWSVMrQ/V1Y-GsBnIbI/AAAAAAAADDg/8PiYFn0dkjIhqyrFWu3oGIGM4t3ouyWPQCKgB/s1600/Bill

%2Bgates.jpeg" /></center>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dolor, rutrum

eget leo sed, tempus faucibus quam. Suspendisse ac nulla venenatis, suscipit mi eu, iaculis

nisl. In eu odio sapien. In ullamcorper dignissim pulvinar. Proin at pellentesque ex, sed

porta magna. Vivamus vitae rutrum mi. Praesent diam dui, imperdiet nec condimentum id,

rutrum at felis. Vivamus venenatis, augue vel finibus molestie, metus odio cursus ante,

varius consequat tellus velit vulputate nunc. Duis maximus pharetra lacus sit amet feugiat.

Vestibulum ultricies dolor a ultrices dictum. Nam tortor sapien, vulputate pharetra

pellentesque id, eleifend sit amet ex. Phasellus porttitor lectus commodo velit semper

sagittis. Maecenas lobortis a urna in tincidunt. Donec egestas neque in urna suscipit

tempor. Donec ut ipsum id ex viverra sollicitudin quis a eros.</p>
<p>Sed dui ipsum, ullamcorper ac nulla et, hendrerit sollicitudin enim. Morbi ut dolor ac

velit accumsan mollis at sit amet lacus. Aliquam auctor vestibulum dui, quis condimentum

dolor pretium eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor

leo velit, vitae dapibus ante imperdiet eu. Quisque non pretium nisi. Suspendisse

consectetur ante eu ultrices efficitur. Nunc vestibulum velit nec nulla dignissim, in

maximus eros efficitur. Maecenas ornare aliquet mi et consequat. Quisque cursus, urna vel

venenatis tempor, est neque venenatis dolor, hendrerit finibus ipsum est id massa. Maecenas

id vestibulum orci. Ut posuere eleifend felis, a accumsan arcu mollis consectetur. In hac

habitasse platea dictumst. Pellentesque malesuada elit sit amet elit condimentum

finibus.</p>
<p>Suspendisse facilisis ultricies dolor dapibus luctus. Donec cursus lorem sed urna

tincidunt sollicitudin. Phasellus ut elit iaculis, lacinia lorem in, dignissim sem. Sed ac

elementum sem, et mattis ante. Fusce varius nec libero ac accumsan. Donec rutrum magna

justo, sit amet scelerisque enim commodo sit amet. Aenean ornare dictum sollicitudin. In

hac habitasse platea dictumst. Donec quam libero, cursus id pellentesque quis, iaculis non

mi. Vestibulum ut neque ut libero placerat dignissim non eu lorem. Nunc vitae rhoncus odio.

Suspendisse potenti. Mauris maximus elit convallis, aliquet odio eu, auctor est. Quisque

dictum venenatis tellus.</p>
</body>
</html>
Publicado por en No hay comentarios:
Etiquetas: ,

Ejercicio 7 Lista y Enlaces

Naturaleza

Otros enlaces de interés

<html>
<head>
<title>Naturaleza</title>
</head>
<body>
<h1>
Otros enlaces de interés</h1>
<ul>
<li><u><a href="http://www.parquesnaturales.com/"> Parque Naturales de España</a></u></li>
<li><u><a href="http://www.humedadesibericos.com/tablas">Humedades ibéricos</a></u></li>
<li><u><a href="http://www.andalucianatural.com/">Paques Naturales de Andalucia</a></u></li>
<li><u><a href="http://www.faunaiberica.org/">Portal para la conservación de los animales ibéricos</a></u></li>
<li><u><a href="http://www.vanaga.es/parques">Parque nacionales de Canarias</a></u></li>
<li><u><a href="http://www.ordesa.net/">Parque Nacuional de Ordesa y Monte Perdido</a></u></li>
</ul>
</body>
</html>

Publicado por en No hay comentarios:
Etiquetas: ,

lunes, 17 de octubre de 2016

Ejercicio 6 Todo lo aprendido

Concepto de prehistoria

El concepto de Prehistoria y su periodización

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate magna ligula, a tempus ante pretium non. Nunc nec diam bibendum, lobortis ante non, ornare dolor. Nunc elementum a eros non fringilla. Maecenas bibendum vestibulum odio in convallis. Mauris quis nulla maximus, dapibus velit hendrerit, dignissim tellus. Maecenas viverra nisl ipsum, at dignissim nisi dignissim quis. Ut porta egestas est, ut commodo mauris volutpat at. Pellentesque vitae augue vitae augue aliquet condimentum. Nullam et bibendum tellus.

¿Cómo podemos subdividir la prehistoria?

  • Edad de Piedra
    • Paleolítico (Piedra Antigua)
    • Mesolítico o Eppaleolítico
    • Neolítico (Piedra Nueva)
  • Edad de bronce
    • Calcolítico, Edad del Cobre o Eneolítico
    • Bronce antiguo
    • Bronce medio
    • Bronce reciente
  • Edad de Hierro Protohistoria
    • Hierro I
    • Hierro II
<html>
<head>
<title>Concepto de prehistoria</title>
</head>
<body>
<h1>El concepto de Prehistoria y su periodización</h1>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.

Phasellus vulputate magna ligula, a tempus ante pretium non. Nunc nec diam bibendum,

lobortis ante non, ornare dolor. Nunc elementum a eros non fringilla. Maecenas

bibendum vestibulum odio in convallis. Mauris quis nulla maximus, dapibus velit

hendrerit, dignissim tellus. Maecenas viverra nisl ipsum, at dignissim nisi

dignissim quis. Ut porta egestas est, ut commodo mauris volutpat at. Pellentesque

vitae augue vitae augue aliquet condimentum. Nullam et bibendum tellus.</p>
<h3>¿Cómo podemos subdividir la prehistoria?</h3>
<hr />
<ul>
<li> Edad de Piedra</li>
<ul>
<li>Paleolítico (Piedra Antigua)</li>
<li>Mesolítico o Eppaleolítico</li>
<li>Neolítico (Piedra Nueva)</li>
</ul>
<li>Edad de bronce</li>
<ul>
<li>Calcolítico, Edad del Cobre o Eneolítico</li>
<li>Bronce antiguo</li>
<li>Bronce medio</li>
<li>Bronce reciente</li>
</ul>
<li>Edad de Hierro <em>Protohistoria</em></li>
<ul>
<li>Hierro I</li>
<li>Hierro II</li>
</ul>
</ul>
</body>
</html>
Publicado por en No hay comentarios:

domingo, 16 de octubre de 2016

Ejercicio 5 Listas

<html>
<head>
<title>listas</title>
</head>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Articulos</li>
<li>Contacto</li>
</ul>
<h1>Temario</h1>
<ol>
<li>Capitulo 1</li>
<li>Capitlo 2</li>
<ul>
<li> La estructura del documento</li>
<li>El texto y las listas</li>
<li>Los enlaces</li>
<li>Etc.</li>
</ul>
<li>Capitulo 3</li>
</ol>
</html>







listas

Instrucciones

  1. Enchufar correctamente
  2. Comprobar conexiones
  3. Encender el aparato

Menú

  • Inicio
  • Noticias
  • Articulos
  • Contacto

Temario

  1. Capitulo 1
  2. Capitlo 2
    • La estructura del documento
    • El texto y las listas
    • Los enlaces
    • Etc.
  3. Capitulo 3
Publicado por en No hay comentarios:

Títulos ejercicio 3

<html>
<head>
<title>Titulos</title>
</head>
<body>
<h1>España en la Edad Media</h1>
<p>Voy a comentar un poco de la historia de España en la edad media....</p>
<h2>Los Reyes catolicos</h2>
<p>Los reyes católicos.....</p>
<h3>Descubrimiento de America</h3>
<p>el descubrimiento de america...</p>
</body>
</html>
Titulos

España en la Edad Media

Voy a comentar un poco de la historia de España en la edad media....

Los Reyes catolicos

Los reyes católicos.....

Descubrimiento de America

el descubrimiento de america...
Publicado por en No hay comentarios:
Etiquetas: ,

martes, 11 de octubre de 2016

Ejercicio 2 HTML

<html>
<head>
<title>Visita París</title>
</head>
<body>
<h1>París, ciudad con encanto</h1>
<p>Una de las ciudades europeas de más encanto, por no decir la que más, es París.
 Allí se pueden encontrar todo tipos de motivos susceptibles de ser visitados, con tranquilidad
o con prisas, en las diferentes ocasiones en que se esté en la gran urbe.</p><br />
<hr />
<p>Desde monumentos emblemáticos como la Torre Eiffel, el Arco de Triunfo, la catedral de Notre Dame o el Arco de la Defensa, a barrio pintorescos como el Barrio Latino, Pigalle o st.
Germain de pres; pasando por todo tipo de accidentes callejeros: vistosos mercados (el de Las Pulgas).
encantadores de cafés, preciosos puentes sobre el Sena...</p><br />

</body>
</html>

Visita París

París, ciudad con encanto

Una de las ciudades europeas de más encanto, por no decir la que más, es París. Allí se pueden encontrar todo tipos de motivos susceptibles de ser visitados, con tranquilidad o con prisas, en las diferentes ocasiones en que se esté en la gran urbe.
Desde monumentos emblemáticos como la Torre Eiffel, el Arco de Triunfo, la catedral de Notre Dame o el Arco de la Defensa, a barrio pintorescos como el Barrio Latino, Pigalle o st. Germain de pres; pasando por todo tipo de accidentes callejeros: vistosos mercados (el de Las Pulgas). encantadores de cafés, preciosos puentes sobre el Sena...
Publicado por en No hay comentarios:

lunes, 10 de octubre de 2016

Ejercicio 1 HTML

Sergio y su brazo

El brazo partio

Esta la historia de un chaval que se parte el brazo dos años seguidos.Su nombre es Sergio Garcia.
En esta pagina os contare las hazañas de Sergio en las cuales ha estado dos años seguido con el brazo partido.
Publicado por en No hay comentarios:
Etiquetas: , ,
Suscribirse a: Entradas (Atom)