Hola taringueros y taringueras, sean bienvenidos a este post. Yo soy Mr_Jesus y seré su tutor en esta serie semanal en la cual les brindaré mis conocimientos para que ustedes al igual que yo aprendan la sintaxis básica de un prodigioso lenguaje de programación llamado HTML 5.
Antes de empezar,quiero suponer que hasta el momento no sabes lo que es un procesador de código y mucho menos que hayas usado uno en tu vida. También supongo que no sabes lo que es HTML 5, un layout, un host, un server entre otras cosas que abundan en este mundillo del desarrollo web, por tal motivo, te recomiendo que leas con mucha atención este primer capitulo, y a su vez, que tomes nota de lo que consideres muy importante y que creas que te puede servir en un futuro. Sin más que decir, comencemos.
Hoy en día, los sistemas computo juegan un papel importante en la humanidad, es por ello que la ciencias de la computación se han dedicado a mejorar cada vez más la calidad de desarrollo y procesamiento de datos e información para facilitar la vida de todos nosotros: los seres humanos.
Gracias a esto, deberes que antes podían convertirse en una acción tediosa, en la actualidad son remplazados por algoritmos que agilizan los procesos cotidianos de todos nosotros y me refiero a transferencias bancarias, compras, registros, inclusive la escuela entra en este paquete.
Pero ¿cómo logra tener tanta cabida de llegada un ingenioso algoritmo a cientos de habitantes? la respuesta es sencilla: Internet. Así es, este maravilloso invento es la plataforma principal y la responsable de dar acceso a una gran cantidad de usuarios a los servicios que prestan las diversas compañías; y es aquí donde se desempeña el rol de un desarrollador web, pues, se necesitan páginas en donde se represente información que le permita al consumidor moverse de manera fácil, intuitiva y simple.
Ahora, es valido que nos preguntemos:
Para que tengas en claro la definición de lo que es este lenguaje de programación, es importante que sepas antes que nada lo que significa HTML: HyperText Markup Lenguage , es un lenguaje de programación estándar utilizado para el desarrollo de páginas web.
Entonces, HTML5, según Wikipedia:
Primero, te pido que tengas dedicación. HTML5 es un lenguaje sencillo de aprender y si le dedicas, el aprendizaje será más rápido y dinámico.
Segundo, vas a necesitar un ordenador (obviamente), un editor de texto, un servidor local y un editor de imágenes (opcional). Ya te voy a explicar para que sirve cada una de estás herramientas.
El editor texto:
Esta herramienta, como su nombre lo indica, se encarga de editar y modificar el código que tu estés elaborando, para luego procesarlo y salvarlo como un archivo .html, .css, en este caso.
Personalmente, te quiero recomendar Sublme Text, creo que es un editor de texto muy didáctico, intuitivo y además te ahorra cierta cantidad de pasos al momento en que estés codificando, si quieres descargarlo, puedes pinchar en la siguiente imagen la cual te va a llevar a la página oficial del software; te recuerdo que esta utilidad es totalmente gratuita y está disponible para Windows, OS X y Linux en cualquiera de sus versiones.
El Servidor local o Local Host:
El servidor local es la herramienta que te permite emular un host desde tu propia dirección ip para que puedas visualizar el proceso de tu página desde tu navegador.
Si lo deseas, puedes probar xampp, es una distribución de apache, es sencillo a la hora de usar. Puedes descargarlo pinchando en la imagen.
El Editor de imágenes:
Esta herramienta es opcional. ¿Por qué es opcional?, bueno, si vas a codificar tu propia página web vas a necesitar logos personalizados, íconos, botones y una serie de factores que vas a tener que crear tu con un editor de imágenes siempre y cuando sepas manejarlo. Ahora, si no sabes como se usa, no importa, puedes seguir leyendo este post sin ningún inconveniente, te lo garantizo.
Mi recomendación es Photoshop, es el más completo y sobre todo el más usado. Este te lo quedo debiendo, pero recuerda que Google es tú amigo!.
¡Ah, ya que menciono a Google se me olvidaba mencionarte algo! vas a necesitar de una conexión a internet para poder provar tu página a través del servidor local. (Bueno, creo que ya lo suponías, ¿no?)
Quiero agilizar tu aprendizaje, y es por ello que voy a omitir algunos pasos que creo que son muy intuitivos y que con un poquito de sentido común tu solo puedes resolver, y estoy hablando de la instalación de las herramientas que vas a usar de ahora en adelante. Aún así, si tienes alguna duda déjame recordarte que mi buzón de mensajes está abierto y tus dudas son bienvenidas.
¡Vamos a preparar todo para que comiences a programar!
Una vez instalado el xampp, vamos a dirigirnos a la siguiente ruta en el disco:
Si estás en Windows XP: Inicio > Mi Pc, Disco Local > xampp > htdocs
Si estás en Windows Vista: Inicio > Equipo, Disco Local > xampp > htdocs
Si estás en Windows 7: Inicio > Equipo, Disco Local > xampp > htdocs
Si estás en Windows 8, 8.1, ó 10: Puedes acceder a la barra de busqueda y escribir "xampp" posteriormente accedes a htdocs
Si estás en OS X: Disco Local > Aplicaciones > xampp > htdocs
Si estás en Linux: Puedes Acceder a Menú y en el buscador escribes "xampp", posteriormente accedes a htdocs
Una vez estemos en la ubicación dada anteriormente, vamos a crear una carpeta nueva a la cual le vamos a colocar el nombre de la página que vamos a crear.
En mi caso, cree esta carpeta llamada "Camino-a-Rusia", voy a codificar una página que muestre los resultados, las fechas y las estadísticas de las selecciones que están participando actualmente en las eliminatorias suramericanas; en esta carpeta vamos a guardar todo el material que queremos que se muestre en nuestra página.
Lo siguiente a realizar es activar el servidor local, puedes hacerlo dirigiéndote a la carpeta donde se instaló y luego clickeando en el icono que dicta "XAMPP Control Panel", para que se ejecute el software. Te saldrá una ventana como esta
Lo único que queda hacer es activar nuestro servidor apache, clickea "Start" y se conectará automáticamente. Por favor, asegurate de que tu conexión a internet está funcionando sin inconvenientes.
Te recomiendo que chequees los siguientes estatutos en tu panel de control para que te asegures de que el servidor está trabajando correctamente.
¡Muy bien! es hora de que comiences a construir tu primera página web. Te comento que desde este punto nos vamos a centrar únicamente en la estructura principal de tu página; el diseño lo vamos a dejar para los próximos tutoriales.
Vamos a abrir el editor de texto, Sublime text en nuestro caso y vamos a crear un archivo . html, el cual vamos a guardar en la carpeta que creamos anteriormente en "htdocs", ¿recuerdas?
Para ello vamos a escibir "index.html" en un archivo nuevo dentro de nuestro editor de texto, luego, clickeamos en File > Save As > Y elegimos la carpeta que mencioné que habíamos creado dentro de "htdocs"
Observen que cuando guardamos el archivo "index.html" apareció un índice en donde nos muestra las carpetas con las que estamos trabajando, por los momentos solo tenemos una sola carpeta...pero descuida, ya tendremos muchas más, todo depende de la lógica y el orden con el que trabajes.
Atención, vas a escribir tus primeras lineas de código. Es normal que después de que crearas el archivo .html haya quedado escrito "index.html", eso lo puedes borrar, no va a suceder nada, y vas a escribir las siguiente etiquetas:
<<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
¿Qué es una etiqueta?
En HTML, una etiqueta es un comando que denota una función especifica, existen etiquetas que cumplen diferentes funciones, a continuación te voy a explicar algunas de ellas:
<html></html> : Denota la estructura general y se encarga de darle una identidad o un formato (por decirlo de alguna manera) a la página una vez se encuentre alojada en un servidor. Te puedo hacer una analogía sencilla:
Imaginemos que el navegador web es un policía, y tu página web es un ciudadano, el policía está buscando en una base de datos a los ciudadanos con DNI html, esta etiqueta es la que le indica al navegador que es una página html lo que está mostrando.
<head></head> : Esta etiqueta denota la cabecera de nuestra web, aquí va información que no necesariamente es importante.
<title></title> Se encarga de imprimir en pantalla el titulo que generalmente observamos en las pestañas de nuestro navegador, tomemos como ejemplo el código fuente de la página oficial de Xampp:
Lo que dice en <title></title> es lo mismo que se imprime en pantalla, exactamente en la pestaña del navegador.
<body></body> : Finalmente, esta etiqueta es la que se encarga de estructurar el resto de contenido que irá en nuestra página, todo lo que quieras agregarle: fotos, vídeos, mapas, juegos flash, etc. irá dentro de ella.
Recuerda que todas la sintaxis de todas las etiquetas debe escribirse de la siguiente manera:
Etiquetas de Texto:
Hay unas etiquetas que sirven únicamente para imprimir en pantalla texto plano, se estructuran de la siguiente forma:
el número que acompaña al prefijo "h" expresa el tamaño de la fuente relacionada con la importancia del texto que se escribe.
También existe la etiqueta <p> </p>, con ella podemos escribir párrafos dentro del cuerpo de la página. A continuación te mostraré un ejemplo.
Dado el siguiente ejemplo, usa lo visto en este primer tutorial para crear la estructura principal de tu primera página web, si presentas dudas me las puedes hacer llegar a través del buzón de mensajes.
Voy a dejar hasta acá este primer capitulo, en el próximo tocaremos más a fondo el cómo introducir imágenes, fuentes y colores a nuestra página web.
Si realmente te interesa esta serie de posts por favor sígueme para estar al tanto de los próximos tutoriales que voy a publicar.
Gracias por pasarte por acá, nos vemos la próxima semana.
Antes de empezar,quiero suponer que hasta el momento no sabes lo que es un procesador de código y mucho menos que hayas usado uno en tu vida. También supongo que no sabes lo que es HTML 5, un layout, un host, un server entre otras cosas que abundan en este mundillo del desarrollo web, por tal motivo, te recomiendo que leas con mucha atención este primer capitulo, y a su vez, que tomes nota de lo que consideres muy importante y que creas que te puede servir en un futuro. Sin más que decir, comencemos.
Hoy en día, los sistemas computo juegan un papel importante en la humanidad, es por ello que la ciencias de la computación se han dedicado a mejorar cada vez más la calidad de desarrollo y procesamiento de datos e información para facilitar la vida de todos nosotros: los seres humanos.
Gracias a esto, deberes que antes podían convertirse en una acción tediosa, en la actualidad son remplazados por algoritmos que agilizan los procesos cotidianos de todos nosotros y me refiero a transferencias bancarias, compras, registros, inclusive la escuela entra en este paquete.
Pero ¿cómo logra tener tanta cabida de llegada un ingenioso algoritmo a cientos de habitantes? la respuesta es sencilla: Internet. Así es, este maravilloso invento es la plataforma principal y la responsable de dar acceso a una gran cantidad de usuarios a los servicios que prestan las diversas compañías; y es aquí donde se desempeña el rol de un desarrollador web, pues, se necesitan páginas en donde se represente información que le permita al consumidor moverse de manera fácil, intuitiva y simple.
Ahora, es valido que nos preguntemos:
¿Qué es HTML5?
Para que tengas en claro la definición de lo que es este lenguaje de programación, es importante que sepas antes que nada lo que significa HTML: HyperText Markup Lenguage , es un lenguaje de programación estándar utilizado para el desarrollo de páginas web.
Entonces, HTML5, según Wikipedia:
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web.
¿Qué necesito para aprender a programar en HTML5?
Primero, te pido que tengas dedicación. HTML5 es un lenguaje sencillo de aprender y si le dedicas, el aprendizaje será más rápido y dinámico.
Segundo, vas a necesitar un ordenador (obviamente), un editor de texto, un servidor local y un editor de imágenes (opcional). Ya te voy a explicar para que sirve cada una de estás herramientas.
El editor texto:
Esta herramienta, como su nombre lo indica, se encarga de editar y modificar el código que tu estés elaborando, para luego procesarlo y salvarlo como un archivo .html, .css, en este caso.
Personalmente, te quiero recomendar Sublme Text, creo que es un editor de texto muy didáctico, intuitivo y además te ahorra cierta cantidad de pasos al momento en que estés codificando, si quieres descargarlo, puedes pinchar en la siguiente imagen la cual te va a llevar a la página oficial del software; te recuerdo que esta utilidad es totalmente gratuita y está disponible para Windows, OS X y Linux en cualquiera de sus versiones.
El Servidor local o Local Host:
El servidor local es la herramienta que te permite emular un host desde tu propia dirección ip para que puedas visualizar el proceso de tu página desde tu navegador.
Si lo deseas, puedes probar xampp, es una distribución de apache, es sencillo a la hora de usar. Puedes descargarlo pinchando en la imagen.
El Editor de imágenes:
Esta herramienta es opcional. ¿Por qué es opcional?, bueno, si vas a codificar tu propia página web vas a necesitar logos personalizados, íconos, botones y una serie de factores que vas a tener que crear tu con un editor de imágenes siempre y cuando sepas manejarlo. Ahora, si no sabes como se usa, no importa, puedes seguir leyendo este post sin ningún inconveniente, te lo garantizo.
Mi recomendación es Photoshop, es el más completo y sobre todo el más usado. Este te lo quedo debiendo, pero recuerda que Google es tú amigo!.
¡Ah, ya que menciono a Google se me olvidaba mencionarte algo! vas a necesitar de una conexión a internet para poder provar tu página a través del servidor local. (Bueno, creo que ya lo suponías, ¿no?)
Algunos ajustes previos
Quiero agilizar tu aprendizaje, y es por ello que voy a omitir algunos pasos que creo que son muy intuitivos y que con un poquito de sentido común tu solo puedes resolver, y estoy hablando de la instalación de las herramientas que vas a usar de ahora en adelante. Aún así, si tienes alguna duda déjame recordarte que mi buzón de mensajes está abierto y tus dudas son bienvenidas.
¡Vamos a preparar todo para que comiences a programar!
Una vez instalado el xampp, vamos a dirigirnos a la siguiente ruta en el disco:
Si estás en Windows XP: Inicio > Mi Pc, Disco Local > xampp > htdocs
Si estás en Windows Vista: Inicio > Equipo, Disco Local > xampp > htdocs
Si estás en Windows 7: Inicio > Equipo, Disco Local > xampp > htdocs
Si estás en Windows 8, 8.1, ó 10: Puedes acceder a la barra de busqueda y escribir "xampp" posteriormente accedes a htdocs
Si estás en OS X: Disco Local > Aplicaciones > xampp > htdocs
Si estás en Linux: Puedes Acceder a Menú y en el buscador escribes "xampp", posteriormente accedes a htdocs
Una vez estemos en la ubicación dada anteriormente, vamos a crear una carpeta nueva a la cual le vamos a colocar el nombre de la página que vamos a crear.
En mi caso, cree esta carpeta llamada "Camino-a-Rusia", voy a codificar una página que muestre los resultados, las fechas y las estadísticas de las selecciones que están participando actualmente en las eliminatorias suramericanas; en esta carpeta vamos a guardar todo el material que queremos que se muestre en nuestra página.
Lo siguiente a realizar es activar el servidor local, puedes hacerlo dirigiéndote a la carpeta donde se instaló y luego clickeando en el icono que dicta "XAMPP Control Panel", para que se ejecute el software. Te saldrá una ventana como esta
Lo único que queda hacer es activar nuestro servidor apache, clickea "Start" y se conectará automáticamente. Por favor, asegurate de que tu conexión a internet está funcionando sin inconvenientes.
Te recomiendo que chequees los siguientes estatutos en tu panel de control para que te asegures de que el servidor está trabajando correctamente.
¡Comencemos a programar!
¡Muy bien! es hora de que comiences a construir tu primera página web. Te comento que desde este punto nos vamos a centrar únicamente en la estructura principal de tu página; el diseño lo vamos a dejar para los próximos tutoriales.
Vamos a abrir el editor de texto, Sublime text en nuestro caso y vamos a crear un archivo . html, el cual vamos a guardar en la carpeta que creamos anteriormente en "htdocs", ¿recuerdas?
Para ello vamos a escibir "index.html" en un archivo nuevo dentro de nuestro editor de texto, luego, clickeamos en File > Save As > Y elegimos la carpeta que mencioné que habíamos creado dentro de "htdocs"
Observen que cuando guardamos el archivo "index.html" apareció un índice en donde nos muestra las carpetas con las que estamos trabajando, por los momentos solo tenemos una sola carpeta...pero descuida, ya tendremos muchas más, todo depende de la lógica y el orden con el que trabajes.
Atención, vas a escribir tus primeras lineas de código. Es normal que después de que crearas el archivo .html haya quedado escrito "index.html", eso lo puedes borrar, no va a suceder nada, y vas a escribir las siguiente etiquetas:
<<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
¿Qué es una etiqueta?
En HTML, una etiqueta es un comando que denota una función especifica, existen etiquetas que cumplen diferentes funciones, a continuación te voy a explicar algunas de ellas:
<html></html> : Denota la estructura general y se encarga de darle una identidad o un formato (por decirlo de alguna manera) a la página una vez se encuentre alojada en un servidor. Te puedo hacer una analogía sencilla:
Imaginemos que el navegador web es un policía, y tu página web es un ciudadano, el policía está buscando en una base de datos a los ciudadanos con DNI html, esta etiqueta es la que le indica al navegador que es una página html lo que está mostrando.
<head></head> : Esta etiqueta denota la cabecera de nuestra web, aquí va información que no necesariamente es importante.
<title></title> Se encarga de imprimir en pantalla el titulo que generalmente observamos en las pestañas de nuestro navegador, tomemos como ejemplo el código fuente de la página oficial de Xampp:
Lo que dice en <title></title> es lo mismo que se imprime en pantalla, exactamente en la pestaña del navegador.
<body></body> : Finalmente, esta etiqueta es la que se encarga de estructurar el resto de contenido que irá en nuestra página, todo lo que quieras agregarle: fotos, vídeos, mapas, juegos flash, etc. irá dentro de ella.
Recuerda que todas la sintaxis de todas las etiquetas debe escribirse de la siguiente manera:
<tipo de etiqueta> contenido </tipo de etiqueta>
Etiquetas de Texto:
Hay unas etiquetas que sirven únicamente para imprimir en pantalla texto plano, se estructuran de la siguiente forma:
<h1> </h1>
.
.
.
.<h6> </h6>
.
.
.
.<h6> </h6>
el número que acompaña al prefijo "h" expresa el tamaño de la fuente relacionada con la importancia del texto que se escribe.
También existe la etiqueta <p> </p>, con ella podemos escribir párrafos dentro del cuerpo de la página. A continuación te mostraré un ejemplo.
Primer Ejercicio
Dado el siguiente ejemplo, usa lo visto en este primer tutorial para crear la estructura principal de tu primera página web, si presentas dudas me las puedes hacer llegar a través del buzón de mensajes.
Nuestro primer código
Fíjate en las etiquetas de texto
Resultado
[/size]
La imagen se agregó con la etiqueta <img src=""> la cual se estructura de la siguiente manera: <img src="ruta de la imagen/nombre.formato"
Voy a dejar hasta acá este primer capitulo, en el próximo tocaremos más a fondo el cómo introducir imágenes, fuentes y colores a nuestra página web.
Si realmente te interesa esta serie de posts por favor sígueme para estar al tanto de los próximos tutoriales que voy a publicar.
Gracias por pasarte por acá, nos vemos la próxima semana.
Sígueme
Hazme saber tus dudas