miércoles, 18 de septiembre de 2013

Estilos Básicos

Ejemplo de una pagina web con estilos básicos: 

<html>
<head>
 <title>Herramientas Web</title>
<style type="text/css">....................................................Con esta sentencia iniciamos el estilo. 
body { font-family: Verdana,Arial,sans-serif;............Colocamos los tipos de letras que ocuparemos. 
 font-size: 15px;......................................................Colocamos el tamaño de letra.
 color: #735846;.....................................................Colocamos el color de la letra.
 text-align: justify;.....................................................Es la alineación del texto.
 background-color: #663330; }...............................Este es el color del fondo.
h1 { margin-left: 80px;.............................................h1 son las características del texto "Estilos basicos"
 margin-top: 20px;
 font-size: 180%;
 color: #CC3300; }
h2, h3 { font-family: Georgia, Times, serif;...............h2 son las características del texto "Equipo"
 font-size: 150%;
 color: #33FF00;
 margin-top: 0;
 margin-left: 30px;}
h3 { color: #33FF00; }.........................................h3 son las características del texto "Contacto"
p {line-height: 1.5em;
 text-indent: 15px; 
 margin: 35px;}
img { border: 2px solid #d38451;.........................Son las características de la imagen.
 margin: 10px;........................................................................margen
 float: right; }..........................................................................alineación a la derecha
div.cuerpo { margin: 0 20px 20px;
 background-color: #FF6650; }
.azul { font-weight: bold;
color: #6C6CCA; }  

</style>...................................................................... Cerramos el estilo.

</head>.....................................................................Cerramos el head.
<body>.....................................................................Comienza el cuerpo.
<div class="cuerpo">

<h1>Estilos basicos</h1>..........................................Aquí solo colocamos el texto que deseamos y el formato con el que queremos que se muestre.
<h2>Equipo</h2>
<div class="img">
<img src="imagenes/esta.jpg" width="350" height="300" alt="No se encuentra esta imagen" />.....Aquí colocamos la imagen, y el ancho y alto de esta.
 </div>
 <p> Arroyo Toledo Mariela.</p>
<p>Blancas Velasco Erick Francisco.</p>
<h3>Contacto</h3>
<P ALIGN=center>
<a href="http://hweym.blogspot.mx">Haz clic para ir al blog</a>
<br>
</div>
</body>
</html>


martes, 17 de septiembre de 2013

Sitios Web

Para poder crear nuestro sitio web, primero tenemos que crear una carpeta.
 Y dentro de esta carpeta debemos crear otras 2 carpetas:

Dentro de la carpeta imágenes, debemos colocar todas las imágenes que ocupemos en nuestras paginas web.

EJEMPLO DE COMO SE MUESTRA UNA PAGINA WEB SENCILLA: 









<html>
<head>
<title>Mi primer pagina</title>
</head>
<P ALIGN=center> -------------(para centrar el contenido de la pagina)
<body bgcolor="#FFCC99">
<font color="CC3300" size="5">Mi pagina web</font>
<br>
<br>-------------(para dar saltos de linea=
<br>
Blancas Velasco Erick Francisco
<br>
<br>
<br>

<img src=(para insertar una imagen)"imagenes/EFBV.png"(la ruta de la imagen) WIDTH=178(ancho de la imagen) HEIGHT=180(alto de la imagen) ALT="El futuro bienvenido">(descripcion de la imagen al pasar el cursor)

<br>
<br>
<br>
<P ALIGN=left>------------(para acomodar el contenido a la izquierda)
<a href="pagina2.html">Has clic para ir a la siguiente pagina</a>-----enlace para ir a otra pagina

</html>

miércoles, 11 de septiembre de 2013

Softwares editores de HTML

Existen diferentes tipos de software editores de HTML, podemos describir 3 tipos diferentes:

  • Editor de texto sin formato.- Este tipo de editor suele ser muy sencillo.
  • Editor de texto con ventanas desdobladas.- Este tipo de editor suelen constar de un par de ventanas. 
  • Editores WYSIWYG.- La manera de trabajar de estos editores es muy similar a la que se usa cuando se trabaja con un procesador de texto. 
A continuación mencionaremos algunos editores de paginas web mas populares.

AMAYA.
Se pueden ver y generar paginas HTML y XHTML y cualquier pagina web que se abra puede ser editada inmediatamente. Los gráficos están escritos en XML y pueden ser mezclados libremente con HTML y MathML, es software libre, y esta disponible para sistemas tipo Unix, GNU/Linux, Mac OS X, Windows y otras plataformas.  



ADOBE DREAMWEAVER.
Es una aplicación en forma de estudio que esta destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones web basados en estándares. Es el programa mas utilizado en el sector del diseño y la programación web, por sus diferentes funcionalidades. Sus principales competidores son Microsoft Expression Web y BlueGriffon. 



KOMPOZER
Es un editor de fuente abierta, y hay disponibles para GNU/Linux, Windows, MacOSX y OS/2. Las capacidades WYSIWYG de KompoZer son una de las principales atracciones del software. 




MOZILLA COMPOSER
Es un editor de paginas web libre y de código abierto, es usado para crear y editar paginas web, e.mail y documentos de texto fácilmente. Es compatible con Microsoft Windows, Mac OS X y Linux. Mozilla Composer permite ver, escribir y editar código HTML de manera WYSIWYG.







Sentencias Básicas de HTML

Para la realización de una pagina web tenemos que colocar etiquetas y a su vez cerrarlas.

Un ejemplo sencillo de una pagina web es el siguiente.
Abrimos un bloc de notas.
Utilizamos la etiqueta <html> para iniciar nuestra pagina.
<html>
Colocamos la eiqueta <head> que es la cabeza de nuestra pagina
<html>
<head>
Colocamos la etiqueta <title> que es para colocar el titulo de la pagina y esta se mostrara en la pestaña de nuestro navegador, cerramos la etiqueta </head>.
<html>
<head>
<title>Mi Primer Pagina </title>
</head>
Colocamos la etiqueta <body> y un color de fondo, para eso utilizamos bgcolor y el código del color.
<html>
<head>
<title>Mi Primer Pagina</title>
</head>
<body bgcolor="#FFCC99">
Colocamos un color de Fuente con font color y el codigo del color, size para el tamaño, lo que deseamos escribir y cerramos la etiqueta </font>
<html>
<head>
<title>Mi Primer Pagina</title>
</head>
<body bgcolor="#FFCC99">
<font color="CC3300" size="5">Herramientas Web</font>
Finalmente cerramos la etiqueta </html> y guardamos nuestro documento de la siguiente manera.
Archivo-Guardar como
"nombre".html(para establecer que es una pagina web) y guardar.
Para ejecutarla abrimos la pagina que se creo al guardar con nuestro navegador.

Aquí una imagen de una tabla de colores.


Para colocar un fondo de imagen solo hay que reemplazar <bgcolor> por la etiqueta <background> el nombre de la imagen y su extensión.

<body background="EFBV.png">

¿Que es y para que sirve HTML?

Tim Berners-Lee invento HTML (Hyper Text Markup Lenguage) alla por 1990. El objetivo era facilitar a cientificos el acceso a los documentos de investigacion de cada uno de ellos, el proyecto obtuvo un éxito mucho mayor del que Tim nunca hubiese llegado a imaginar, ya que al inventar HTML, este científico sento bases de la web tal y como la conocemos hoy en dia.
HTML es el lenguaje con el que se escriben las paginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que esta compuesto por etiquetas, estas etiquetas marcan el inicio y el fin de cada elemento del documento.
Cabe señalar que un documento hipertexto no solo se compone de texto, también puede contener imágenes, sonido, videos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extencion html o htm para que puedan ser visualizados en los navegadores. Los navegadores son los que se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las paginas web resultantes del código interpretado.

¿Para que sirve?
Basicamente si quieres crear sitios web, no hay otra solución que aprender HTML, incluso si usas un programa como Dreamweaver, por ejemplo, para la creación de sitios web, tener los conocimientos básicos de HTML hacen el trabajo mucho mas fácil y tus sitios web mucho mejores.
En pocas palabras, HTML se usa para crear sitios web.

miércoles, 4 de septiembre de 2013

Tipos de Sitios Web

Mas tipos de Sitios Web.

Personal: Estos sitios son administrados básicamente por una persona y contienen material sobre cualquier temática.
Wiki: En estos sitios, los usuarios son los que suben y editan los contenidos.
Educativo: Estos sitios son los que ofrecen cursos a distancia o presenciales, principalmente son con fines educativos y contienen información descargable sobre distintas asignaturas.
Portal: Este tipo de sitio es un punto de inicio donde pueden acceder a cualquier recurso de Internet.
De subasta: Aquí los usuarios registrados pueden subastar todo tipo de productos y servicios.

Spam: Estos sitios no contienen valor relevante y lo que buscan es engañar a los motores de búsqueda para que los usuarios ingresen en ellas y así sus administradores pueden obtener beneficios económicos gracias a la publicidad inserta.

Tipos de Sitios Web

Algunos de los sitios web son:
Blog: Son sitios en donde se pueden introducir lecturas, o temas diferentes en los que se pueden intercambiar opiniones entre lectores de otros foros.
Para el comercio electrónico: En este se destaca la compra y venta de productos de cualquier tipo.
De descargas: En este, los usuarios pueden compartir imágenes, vídeos  etc. Igualmente pueden descargarlos.
De desarrollo: En estos sitios, se comparte información que va vinculada con los desarrollos en diseño web y software, que van en conjunto con la informática.
Institucionales: Este tipo de sitios son principalmente para anunciarse tanto empresas y escuelas con o sin fines de lucro, esto para darse a conocer y/o promocionar sus bienes y servicios.
De comunidad virtual: Aquí se destacan las personas que tienen un interés en común y pueden comunicarse por medio de foros o chat.
Directorio: Aquí se pueden introducir diferentes tipos de información y se pueden organizar en distintas categorías.

De información: En estos sitios los contenidos buscan informar a quienes lo visitan, aunque esto no necesariamente se hace con fines económicos. Y muchas veces son de organizaciones educativas o pertenecen al gobierno.

Web 2.0: En este tipo de sitios se promueven las diferentes tecnologías y los usuarios la mantienen actualizada.

Concepto de Pagina Web

Una pagina web es una parte de un sitio web que cuenta con enlaces, que también son conocidos como hipervìnculos o links (para facilitar la navegación). 

En estas paginas están desarrolladas con lenguajes de marcado como el HTML, para que así los puedan reconocer los navegadores.

Podemos destacar que tienen varias utilidades como son la presentación de una empresa, una persona, una fundación, etc. Igualmente podemos ver que su contenido es mas atractivo ya que 
tienen contenido tanto textual como audiovisual. 

Concepto de Sitio Web

Un sitio Web es un conjunto de paginas de Internet que se relacionan entre si con un mismo dominio o subdominio en WWW (World Wide Web) en Internet, estos pueden incluir contenidos multimedia como son: vídeos, sonidos, animaciones flash y fotografías. También pueden incluir documentos HTML y en algunos sitios es necesario subscribirse para acceder a algunos o todos sus contenidos.