CREACIÓN DE UNA WEB [desde 0]

Buenas, en este tutorial explicaré los conceptos para crear una página web completamente desde 0, empezando por conceptos básicos de la web, html, diseño de la web, hojas de estilo, php y algo de mysql.

Tengo que decir que esto es un proyecto a largo plazo así que no esperéis que termine en 2 días Tongue

CREACIÓN DE UNA WEB DESDE 0

-[Índice]

0.0   OPINIONES Y SUGERENCIAS
1.0   INTRODUCCIÓN
1.1   INICIO HTML
1.2   FORMATO HTML
1.3   INSERCCIÓN DE IMÁGENES Y ENLACES

Bueno, por ahora solo esto Wink

pd: el manual lo saco de mi web

-[1.0 Introducción]

Bueno , decir que nuestros programas como siempre van a ser el dreamweaver, filezilla y photoshop (prescindible por ahora) ,que si habéis leído la FAQ los podéis descargar de aquí:

Dreamweaver
Filezilla
Photoshop

En el dreamweaver podéis escribir código de forma manual en la pestaña código y a la vez será interpretado en la pestaña diseño.

Tendremos que obtener un hosting y configurar el filezilla, para ello leeros esto
http://foro.el-hacker.com/index.php/topic,105098.0.html

También habría que instalar un servidor PHP pero lo dejaremos para después ya que por ahora no es necesario.

En este manual trataremos varias cosillas como:
-HTML [básico|medio|avanzado]
-CSS y diseño web
-PHP
-Javascript (un poco )
-Promoción de tu web

Veremos la instalación de varios sistemas CMS como pueden ser por ejemplo
-WordPress
-SMF
-PHP nuke
-Joomla
-Y otros

Pero sobre todo profundizaremos mucho en PHP y diremos muchos tips que se pueden realizar con este fantástico lenguaje de prog.

Y espero poder hacer una página donde ponga las prácticas y las podáis ver, ya que creo que es algo muy importante.

Aquí acaba esta mini introducción, en el próximo capítulo empezaremos a profundizar en HTML

fuente: http://foro.code-makers.es/index.php?topic=50.msg152#msg152

Saludos, cuidense!

-[1.1 INICIO HTML]

Bueno, aquí continuo con el manual que lo tengo un poco dejado:

HTML (HyperText Markup Language) es un lenguaje de programación web que es interpretado por nuestro navegador ya sea Firefox, Opera, IE...

Personalmente recomiendo este lenguaje de prog. para el que se quiera iniciar en la programación en general, ya que es bastante fácil y está bien para empezar.

El HTML está compuesto por etiquetas que se abren y cierran de este modo <etiqueta>......</etiqueta> , veamos un pequeño ejemplo.

Código:

<b> Hola mundo </b>

Se utiliza "<b>" para abrir y "</b>" para cerrar y delimitar la parte que queda sometida a esas etiquetas.

Luego , los atributos de esas etiquetas se ponen al principio, en la apertura tras el nombre de la etiqueta o tag.

Código:

<div align="center">Este texto quedara centrado</div>

Como habéis visto, align es un atributo, y sus posibles valores son: left, center, justify y right

También existen etiquetas con esta forma <etiqueta /> como es el caso de la etiqueta del salto de línea,las imágenes y más.

Código:

</br> <--!Esto es un salto de linea-->

Para el próximo explicaré todas las opciones de formato en HTML.
Saludos!

fuente: http://foro.code-makers.es/index.php?topic=50.msg221#msg221

Para cualquier cosa, teneis este post
http://foro.el-hacker.com/index.php/topic,114805.0.html

-[1.2 FORMATO HTML]

Sigo con el manual

, en esta entrega vamos a ver como aplicarle formato a un texto en HTML.

COLOREAR LETRAS, CAMBIAR FUENTE...

Código:

Esta etiqueta nos sirve para aplicarle color, tamaño y fuente a una porción de texto, veámos sus atributos.

-color : a este atributo podemos darle tanto una constante como un valor hexadecimal.

Código:

<font color="red">Texto en rojo</font><br />
<font color="#FF0000">El mismo color que el de arriba</font>

-face : especificamos la fuente que presentará el texto.

Código:

<font face="Arial" color="red">Texto en arial y en rojo</font><br />
<font color="#FF0000" face="Verdana">Texto en azul y en verdana</font>

-size : el tamaño que tendrá el texto de 1 a 7.

Código:

<font face="Arial" size="5">Texto en arial y en tamaño 7</font>

TAMAÑOS DE LETRA YA DEFINIDOS

Para esto utilizaremos unas etiquetas determinadas que van desde el 1 hasta el 6, de este modo:

Código:

<h2>Texto con formato</h2>

-h1, h2, h3, h4, h5, y h6

Código:

<h1>Mayor de todos</h1>
<h2>Mas pequeno que el anterior</h2>
<h3>Mas pequeno que el anterior</h3>
<h4>Mas pequeno que el anterior</h4>
<h5>Mas pequeno que el anterior</h5>
<h6>EL menor de todos</h6>

NEGRITA, CURSIVA, SUBRAYADO y otros

-negrita/bold

Código:

<b> Texto en negrita </b>

-cursiva/italic

Código:

<i> Texto en cursiva </i>

-subrayado/underline

Código:

<u> Texto subrayado </u>

-tachado/strike

Código:

<s> Texto en cursiva </s>

-big

Código:

<big> Texto grande </big>

-small

Código:

<small> Texto grande </small>

-Superíndice

Código:

x<sup>2</sup> -x + 1

-Subíndice

Código:

CO<sub>2</sub>

ALINEACIÓN DE LOS TEXTOS

Código:

Para alinear los textos tenemos el atributo align de div, que puede presentar los siguientes valores: left, right, center, justify

-Align

Código:

<div align="right"> Texto alineado a la dcha </div><br />
<div align="left"> Texto alineado a la izq </div><br />
<div align="center"> Texto centrado </div><br />
<div align="justify"> Texto justificado </div><br />

También hay una etiqueta que solo es exclusiva para centrar:

Código:

<center>Texto centrado</center>

SALTOS DE LÍNEAS Y PÁRRAFOS

-salto de línea: nos sirve para hacer un salto de línea que normalmente hacemos con la tecla enter

Código:

<br />

-párrafo: podemos agrupar un texto en un párrafo de este tipo para clasificarlo o para separarlo del contenido restante enter

Código:

Texto normal <br />
<p>texto dentro del parrafo</p><br />
text outside

fuente: http://foro.code-makers.es/index.php?topic=50.msg233#msg233

Bueno esto es todo por la parte de formato en HTML o eso creo xD.
Saludos!

-[1.3 INSERCCIÓN DE IMÁGENES Y ENLACES]

Como el título indica, en esta entrega veremos como insertar imágenes en nuestra web además de los hipervínculos o enlaces.

IMÁGENES

Código:

<img />

Con la etiqueta en sí no tenemos nada por lo que vamos a ver los atributos Tongue

-src : este atributo es obligatorio ya que en él definimos la ruta de la imagen ya este en nuestro servidor o fuera de él.

Código:

-alt : es el nombre que saldrá sustituyendo a la imagen si ésta no ha sido hallada en la dirección del src.

Código:

-height : si queremos asignarle una determinada altura a nuestra imagen poned el valor en pixels.

Código:

-width : exactamente igual que el anterior sin embargo en este ponemos el ancho de la imagen. Estos atributos son opcionales, si no los definimos la imagen tomará los valores reales.

Código:

-border : este atributo conviene modificarlo y ponerlo a 0 ya que por defecto viene como 1pixel y el borde es algo cutre xD.
Ahora, que si os gusta con borde podéis ponerlo, las medidas están en pixels.

Código:

HIPERVÍNCULOS O ENLACES

Código:

-href : atributo fundamental donde ponemos hacia donde nos dirigirá el enlace, es decir el destino que puede ser una web, un archivo...

Código:

<a href="destino.html">Texto que aparecera</a><br />
<a href="destino.jpg">Texto que aparecera</a><br />
<a href="carpeta/archivo.exe">Texto que aparecera</a>

-target : este atributo tomará solo dos valores que serán:
_blank : abre el destino en una página nueva y deja abierta la que estabas.
_self : abre el destino en la página que estás.
por defecto está puesto en _self si están en el mismo servidor y en _blank si está en otro

Código:

<a href="destino.html" target="_blank">En nueva ventana</a><br />
<a href="destino.jpg" target="_self">In the same window :P</a>

CAMBIAR COLOR DE LOS ENLACES

Para hacer esto deberemos modificar la etiqueta del body y añadirle unos atributos

-link : color del enlace a simple vista por primera vez.

Código:

<body link="red">...

-alink : color del enlace cuando hacemos click en él.

Código:

<body link="#CC0000" alink="blue">...

-vlink : color del enlace cuando ya lo hemos visitado.

Código:

<body link="#CC0000" alink="blue" vlink="#333333">...

fuente: http://foro.code-makers.es/index.php?topic=50.msg334#msg334

Venga, esto es todo por esta entrega
Saludos!!

pd: se agradecen los comentarios de ánimo en el post de sugerencias Tongue

	Bienvenido(a), Visitante. Favor de ingresar o registrarse. ¿Perdiste tu email de activación? - Julio 24, 2008, 06:32:36 Boton Buscar