Tecnología

Inicio

Cómo crear un sitio web personal

September 1

No todo en Internet tiene que ser sobre la comercialización y la visibilidad - a veces, sólo quiere tener su propio espacio en la web en todo el mundo. Si usted está listo para crear su propio sitio web personal, se necesita un navegador y un editor de texto plano. Mientras escribía un sitio web básico no es necesariamente difícil, el aprendizaje de toda la sintaxis y trucos para hacer esto puede llevar mucho tiempo. Para los conceptos básicos sobre HTML y CSS, mira en W3Schools.com; de interesantes sugerencias de uso de CSS y diseño, para visitar CSS-Tricks.com.

Instrucciones

1 Utilice un editor de texto sin formato para escribir el código HTML y CSS para el sitio. El editor de texto de Windows por defecto es el Bloc de notas, pero varios otros editores de texto gratuitos tener más funciones específicamente para la edición de HTML y CSS. Por ejemplo, los colores Notepad ++ gratuito de edición del código HTML y CSS a medida que escribe, por lo que es fácil ver las etiquetas.

2 Escribir el marco básico de su sitio web. Cada sitio web va a tener un aspecto diferente, y cómo se codifican su sitio web depende de lo que usted quiere que se vea como. El marco básico de que se verá algo como esto:

<! DOCTYPE html>
<Html>
<Head>
<Title> Título de su página web </ title>
</ Head>

<Body>
Contenido de su sitio web.
</ Body>
</ Html>

El tipo de documento dice el navegador del visitante qué versión de HTML que está utilizando; la básica <! DOCTYPE html> especifica HTML5.

3 Añadir una hoja de estilo. Mientras que una hoja de estilo sólo es necesaria si desea colocar ciertos elementos visuales en su página, es probable que terminan usando uno en su sitio con el tiempo. Coloque la hoja de estilo directamente en el encabezado del documento mediante la adición de este texto, entre las etiquetas <head> y </ head>:

<Tipo de estilo = "text / css">

</ Style>

Colocar todo el código CSS entre los dos etiquetas de estilo. Por CSS básico, utilizar las etiquetas HTML a un estilo específico. Por ejemplo, si usted quiere tener un fondo negro y texto blanco en su página, introduzca las siguientes líneas dentro de las etiquetas de estilo:

cuerpo {
background: # 000000;
de color: #ffffff;
}

Para el texto del estilo como encabezado, coloque la siguiente línea dentro de las etiquetas de estilo. Esto afectará el texto colocado entre las etiquetas <h1> y </ h1> etiquetas y ajusta la altura del texto en 30 píxeles:

p {font-size: 30px;}

La Web Consortium todo el mundo, o W3C, listas de variables para cada etiqueta HTML y CSS en el sitio W3Schools.com.

4 Los elementos de bloque se pueden utilizar para posicionar el contenido de su sitio. Mientras que las tablas son el método tradicional para la estructuración de contenidos, codificación tabla es torpe y por lo general no se recomienda. elementos div crean bloques básicos de contenido que puede ser totalmente personalizado a través de CSS. Por ejemplo, para colocar una barra lateral a la izquierda de la página principal del sitio, se utilizaría tres elementos div: "contenedores", "barra lateral" y "contenido":

<Div id = "contenedor">
<Div id = "barra lateral">
El contenido de la barra lateral
</ Div>

<Div id = "contenido">
Contenido principal
</ Div>
</ Div>

ID se gestionan de una hoja de estilo mediante el signo numeral:

envase {

En términos generales, se establece este tipo de diseño div utilizar anchos específicos y flota:

envase {

Ancho: 1000px;}

{barra lateral

Anchura: 200px;
flotador izquierdo;}

contenido {

Anchura: 800px;}

Para obtener más información acerca de cómo crear y gestionar este tipo de diseño, leer el artículo de desarrollador Web Jem Turner "crear un diseño sin tablas (CSS)." (Ver Recursos más adelante)

5 Escribir su contenido mediante etiquetas HTML. El contenido de la página debe colocarse entre las etiquetas <body> y </ body>. Por ejemplo, para crear la cabecera "Mi Página Web", utilice esta línea:

<Body>

<H1> Mi Página Web </ h1>

</ Body>

Hay seis niveles de cabecera: H1 a H6.

Para crear un párrafo, incluya texto en <p> y </ p> etiquetas:

<P> texto </ p>

Colocar enlaces y las imágenes de su página dentro de las etiquetas de párrafo. Para incluir enlaces dentro de las páginas, utilice el <a> y etiquetas </a>:

<a href="Link&lt;/a" rel="nofollow"> http: //www.url.com&quot;> Enlace & lt; / a>

Para incluir imágenes, utilice la etiqueta <img>:

<Img src = "http://www.url.com/image.jpg&quot; alt =" Una imagen ">

6 Una vez que haya creado los fundamentos de su sitio, guardar el archivo con la extensión ".html", por ejemplo "index.html". A continuación, abra el archivo en su navegador para ver cómo su página se ve. Es probable que tome varios intentos antes de que esté satisfecho con su sitio.

7 Utilice esta plantilla para crear el resto de las páginas de su sitio. Para darle a su sitio un sentido de cohesión, todas las páginas deben tener los mismos o similares diseños.

8 Si no los tiene ya establecido, la compra de un plan de sitio de alojamiento y un nombre de dominio. Utilice un programa de protocolo de transferencia de archivos (FTP) para cargar archivos HTML de su sitio en la carpeta correcta en los servidores del huésped. Su servicio de alojamiento proporcionará los pasos necesarios para subir archivos y de otra manera la gestión de su sitio.

Consejos y advertencias

  • Si lo que buscas es un servicio web gratuito que maneja el trabajo para usted, considere Weebly o Google Sites. servicios de blogs como Blogger y WordPress.com se pueden utilizar para crear un sitio web gratuito que puede actualizar con regularidad.