RSS Feed
Twitter
12/04/2013
st
Bienvenidos a este nuevo pos
Lo que veremos hoy será como crear y subir a la web tu propia página!
Para subir una página a la internet se necesitan tres cosas básicas:
- Mínimo un fichero tipo .html o .php que será la página en si misma
-Un dominio (nombre de la página)
-Un servicio de hosting (almacenamiento)
Existen en el mundo muuuchas empresas que ofrecen servicio de hosting que además nos ofrecen un dominio gratuito. pero usualmente ese servicio se paga...
Por ejemplo, la página http://www.flotinga-web.blogspot.com/ está alojada en Wiroos:
https://www.wiroos.com/argentina/
Pero es un servicio pago, que te va a permitir que tu página sea por ejemplo:
www.tupagina.com
En el caso de los hostings gratuitos se nesecita referenciar un sub-dominio, Ej.:
www.tupagina.sub_dominio.com
El subdominio depende del sistema de hosting gratuito que hayamos elegido.
En este caso me basaré en el servicio gratuito de la página:
http://www.000webhost.com/
Bien, para comenzar:
Aquí veremos de manera muy básica como hacer las cosas de manera "artesanal", pero se pueden auxiliar o bien del Notepad++ o de dreamweaver por ejemplo...
Las páginas de internet se muestran en base a archivos de tipo HTML:
siglas de HyperText Markup Language o Lenguaje de Marcado de Hipertexto.
Un fichero HTML define por medio de "etiquetas" como se verá y como será la interacción con nuestra página.
Por ejemplo:
Para crear nuestro primer archivo HTML podemos hacerlo desde un simple block de notas.
En la estructura básica de un fichero HTML deben definirse las etiquetas básicas:
-Tipo de documento
-Encabezado del documento
-Cuerpo del documento
Notarán que cada vez que se abre una etiqueta esta debe cerrarse:
<html> <!--se abre-->
</html> <!--se cierra-->
Para insertar un comentario en un documento HTML:
<!-- Comentario -->
El documento debe guardarse con la extensión .html y por nombre le pondremos 'index' para indicar que será nuestra página principal...
Una vez guardado el documento como 'index.html' esté será visto por el S.O. como una página de internet, como mi navegador predeterminado es Chrome, se ve como una página de Chrome:
Vamos a ver las etiquetas básicas de HTML, si ya conoces algo de html puedes saltearte esta parte hasta la parte de subir al host gtratuito...
Como dije antes, un documento html tiene 3 etiquetas básicas:
<html>
<!--aqui irá todo-->
<head>
<!--aquí lo del encabezado y otras yerbas-->
</head>
<body>
<!--aquí todo el cuerpo de la página-->
</body>
</html>
La primer etiqueta que veremos es <title> </title> que define el título que tendrá nuestra página en el navegador.
Ej.
============================================
<html>
<head>
<title>Mi primer web!</title>
</head>
<body>
</body>
</html>
==============================================
Si guardamos el documento y damos doble click sobre el se abrirá en una pestaña del navegador:
Por ahora nuestra página no tiene contenido, bien, vamos a darle un poco de color al cuerpo:
=======================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
</body>
</html>
=========================================================
Y ahora si guardamos y refrescamos nuestra página se verá así:
Si le ponemos un título:
=======================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
</body>
</html>
======================================================
Con la etiqueta <h1> definimos el tamaño encabezado para el texto y con <center> centramos el texto:
Para insertar una lista que luego puede transformarse en el menú de nuestra página podemos usar las etiquetas <ul> y <li>
<ul> defune una lista desordenada (unordered list) y cada <li> será un elemento de lista:
=======================================================´
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
Un elemento
</li>
<li>
Otro elemento
</li>
<li>
Un elemento mas
</li>
</ul>
</body>
</html>
=====================================
Y cada elemento de la lista se puede transformar en un hiperenlace o link:
(Cambié el color de fondo para poder ver los links no visitados)
===========================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="gray">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
<a ="http://www.google.com">Busca algo en google</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com">Visita flotinga</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com/diazespina">Visita el perfil de diazespina en flotinga</a>
</li>
</ul>
</body>
</html>
========================================================
Podemos además insertar una imagen:
========================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="gray">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
<a ="http://www.google.com">Busca algo en google</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com">Visita flotinga</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com/diazespina">Visita el perfil de diazespina en flotinga</a>
</li>
</ul>
<center><IMG SRC="t_logo.jpg" WIDTH=600 HEIGHT=400><center>
</body>
</html>
===========================================================
Notese que la ruta a la imagen es relativa a la carpeta raiz del documento, en este caso está dentro de la misma carpeta, una vez en el servidor deberíamos organizarnos creando una carpeta para las imagenes...
Para personalizar estéticamente nuestra página bien podríamos usar CSS (Cascade Style Sheets) o Hojas de Estilo en Cascada... Pero eso es o para otropost o para su investigación.
Bueno, vamos a la parte divertida, subir el archivo html a la web!!!
Primero vamos a http://www.000webhost.com/
Y vamos a Sign Up para crearnos un usuario:
Luego le ponemos nombre a nuestra primera web y llenamos los datos, hay que elegir free subdomain!
Una vez hecho esto se nos abrirá una página parecida a esta:
Allí seleccionamos el panel:
Y buscamos el FileManager:
Y entraremos al arbol de directorios de nuestra página...
Luego entramos en public html
y allí damos en upload:
Y subimos nuestro index html y la imagen que usemos...
Damos aceptar:
Y listo!!!
Vamos a nuestra página y está en la nube!!!
Fácil verdad!!!???
Vistazo al código fuente de la página:
Aquí el enlace al ejemplo:
http://diazespina.comli.com/
Ya luego Uds podrán o utilizar las plantillas que facilita 000webhost (muy buenas por cierto)
o crear sus propios documentos html o php.
Recuerden que 000webhost soporta el uso de documentos php y de bases de datos mysql.
Esta es una página en la que estoy trabajando y está alojada en 000webhost:
http://artistasaca.webege.com/
Lo que veremos hoy será como crear y subir a la web tu propia página!
Para subir una página a la internet se necesitan tres cosas básicas:
- Mínimo un fichero tipo .html o .php que será la página en si misma
-Un dominio (nombre de la página)
-Un servicio de hosting (almacenamiento)
Existen en el mundo muuuchas empresas que ofrecen servicio de hosting que además nos ofrecen un dominio gratuito. pero usualmente ese servicio se paga...
Por ejemplo, la página http://www.flotinga-web.blogspot.com/ está alojada en Wiroos:
https://www.wiroos.com/argentina/
Pero es un servicio pago, que te va a permitir que tu página sea por ejemplo:
www.tupagina.com
En el caso de los hostings gratuitos se nesecita referenciar un sub-dominio, Ej.:
www.tupagina.sub_dominio.com
El subdominio depende del sistema de hosting gratuito que hayamos elegido.
En este caso me basaré en el servicio gratuito de la página:
http://www.000webhost.com/
Bien, para comenzar:
Aquí veremos de manera muy básica como hacer las cosas de manera "artesanal", pero se pueden auxiliar o bien del Notepad++ o de dreamweaver por ejemplo...
Las páginas de internet se muestran en base a archivos de tipo HTML:
siglas de HyperText Markup Language o Lenguaje de Marcado de Hipertexto.
Un fichero HTML define por medio de "etiquetas" como se verá y como será la interacción con nuestra página.
Por ejemplo:
Para crear nuestro primer archivo HTML podemos hacerlo desde un simple block de notas.
En la estructura básica de un fichero HTML deben definirse las etiquetas básicas:
-Tipo de documento
-Encabezado del documento
-Cuerpo del documento
Notarán que cada vez que se abre una etiqueta esta debe cerrarse:
<html> <!--se abre-->
</html> <!--se cierra-->
Para insertar un comentario en un documento HTML:
<!-- Comentario -->
El documento debe guardarse con la extensión .html y por nombre le pondremos 'index' para indicar que será nuestra página principal...
Una vez guardado el documento como 'index.html' esté será visto por el S.O. como una página de internet, como mi navegador predeterminado es Chrome, se ve como una página de Chrome:
Vamos a ver las etiquetas básicas de HTML, si ya conoces algo de html puedes saltearte esta parte hasta la parte de subir al host gtratuito...
Como dije antes, un documento html tiene 3 etiquetas básicas:
<html>
<!--aqui irá todo-->
<head>
<!--aquí lo del encabezado y otras yerbas-->
</head>
<body>
<!--aquí todo el cuerpo de la página-->
</body>
</html>
La primer etiqueta que veremos es <title> </title> que define el título que tendrá nuestra página en el navegador.
Ej.
============================================
<html>
<head>
<title>Mi primer web!</title>
</head>
<body>
</body>
</html>
==============================================
Si guardamos el documento y damos doble click sobre el se abrirá en una pestaña del navegador:
Por ahora nuestra página no tiene contenido, bien, vamos a darle un poco de color al cuerpo:
=======================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
</body>
</html>
=========================================================
Y ahora si guardamos y refrescamos nuestra página se verá así:
Si le ponemos un título:
=======================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
</body>
</html>
======================================================
Con la etiqueta <h1> definimos el tamaño encabezado para el texto y con <center> centramos el texto:
Para insertar una lista que luego puede transformarse en el menú de nuestra página podemos usar las etiquetas <ul> y <li>
<ul> defune una lista desordenada (unordered list) y cada <li> será un elemento de lista:
=======================================================´
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="blue">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
Un elemento
</li>
<li>
Otro elemento
</li>
<li>
Un elemento mas
</li>
</ul>
</body>
</html>
=====================================
Y cada elemento de la lista se puede transformar en un hiperenlace o link:
(Cambié el color de fondo para poder ver los links no visitados)
===========================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="gray">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
<a ="http://www.google.com">Busca algo en google</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com">Visita flotinga</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com/diazespina">Visita el perfil de diazespina en flotinga</a>
</li>
</ul>
</body>
</html>
========================================================
Podemos además insertar una imagen:
========================================================
<html>
<head>
<title>Mi primer web!</title>
<body bgcolor="gray">
</head>
<body>
<h1><center>Mi primer web!</h1></center>
<ul>
<li>
<a ="http://www.google.com">Busca algo en google</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com">Visita flotinga</a>
</li>
<li>
<a ="http://www.flotinga-web.blogspot.com/diazespina">Visita el perfil de diazespina en flotinga</a>
</li>
</ul>
<center><IMG SRC="t_logo.jpg" WIDTH=600 HEIGHT=400><center>
</body>
</html>
===========================================================
Notese que la ruta a la imagen es relativa a la carpeta raiz del documento, en este caso está dentro de la misma carpeta, una vez en el servidor deberíamos organizarnos creando una carpeta para las imagenes...
Para personalizar estéticamente nuestra página bien podríamos usar CSS (Cascade Style Sheets) o Hojas de Estilo en Cascada... Pero eso es o para otropost o para su investigación.
Bueno, vamos a la parte divertida, subir el archivo html a la web!!!
Primero vamos a http://www.000webhost.com/
Y vamos a Sign Up para crearnos un usuario:
Luego le ponemos nombre a nuestra primera web y llenamos los datos, hay que elegir free subdomain!
Una vez hecho esto se nos abrirá una página parecida a esta:
Allí seleccionamos el panel:
Y buscamos el FileManager:
Y entraremos al arbol de directorios de nuestra página...
Luego entramos en public html
y allí damos en upload:
Y subimos nuestro index html y la imagen que usemos...
Damos aceptar:
Y listo!!!
Vamos a nuestra página y está en la nube!!!
Fácil verdad!!!???
Vistazo al código fuente de la página:
Aquí el enlace al ejemplo:
http://diazespina.comli.com/
Ya luego Uds podrán o utilizar las plantillas que facilita 000webhost (muy buenas por cierto)
o crear sus propios documentos html o php.
Recuerden que 000webhost soporta el uso de documentos php y de bases de datos mysql.
Esta es una página en la que estoy trabajando y está alojada en 000webhost:
http://artistasaca.webege.com/
0 comentarios:
Publicar un comentario