Todo el mundo debería saber Programar - tutorial #1 (HTML basico 1).

in #spanish6 years ago

Hola stemers hoy quiero compartir un poco de mi conocimiento en el área de desarrollo de software. Como me describí en mi primer post . soy programador y me gustaría compartir un poco mi conocimiento con ustedes. Este va a hacer uno de muchos post explicativos para que poco a poco puedan tener la capacidad de crear una web sencilla.

¡comencemos por lo básico¡.

Tenemos que estar claros de donde nos estamos metiendo para poder tener una base solida a la hora de empezar a desarrollar cualquiera web. Así que aclararemos algunos términos básicos.

desarrollo web:
Desarrollo web es un término que define la creación de sitios web para Internet o una intranet. Para conseguirlo se hace uso de tecnologías de software del lado del servidor y del cliente que involucran una combinación de procesos de base de datos con el uso de un navegador web a fin de realizar determinadas tareas o mostrar información.
fuente

navegador web
Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
fuente

HTML:
sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.
fuente

lenguaje de programación:
Un lenguaje de programación es un lenguaje formal que especifica una serie de instrucciones para que una computadora produzca diversas clases de datos. Los lenguajes de programación pueden usarse para crear programas que pongan en práctica algoritmos específicos que controlen el comportamiento físico y lógico de una computadora.
fuente

!ya habiendo obtenido estos conocimientos es hora de poner manos a la obra.¡

por hoy indagaremos respecto a HTML. ya que es la manera de presentar nuestra web, yo en lo personal diría que es la parte mas importante de un sitio web. ya que es el encargado de dar forma al contenido que queremos mostrar.

para iniciar solo necesitaremos abrir en nuestro pc un navegador web y un blog de notas.
les recomiendo utilizar firefox (link de descarga para win 32bit)

crearemos nuestro primer archivo .html para visualizar un texto en nuestro navegador utilizando las etiquetas básicas de este lenguaje.

NOTA 1: las etiquetas son los "comandos" que los programas navegadores leen e interpretan para armar y dar forma a las páginas web.

Paso 1:

crea en tu escritorio un archivo llamado index.html

Paso 2:

Ábrelo con el block de notas.

Paso 3:

copia y pega este contenido.

< html>
       < head>
              < title>Practica #1</title>
       </ head>
       < body>
            !HOLA MUNDO¡
            !Mi primera hoja HTML¡
       </ body>
</ html>

quita los espacios que estén entre < y la etiqueta. (ojo lo hice por que no te deja poner la etiqueta bien).

Paso 4:

guarda tu archivo index.html

Paso 5:

dale click derecho a tu archivo index.html y elige "abrir con"
luego elige el navegador de tu preferencia.

Listo, !!!Magia¡¡¡.

ya tenemos nuestra prime vista. jejeje, se que estas pensando. !pero que sencillo¡. tranquilo que apenas es el comienzo.

ven y te explico.

lo que hemos hecho es simplemente poner unos comando que en tiempo de ejecución tu navegador interpreto.como:

html :indica la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.
head:indica una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. contiene la etiquetas como tittle .
tittle: Indica el título del documento.
body: indica el contenido principal de un documento HTML. Solo hay un elemento < body> en un documento, dentro de esta colocamos el texto que se visualizo en nuestro navegador.

espero les guste este post, y pongan en practica ese ejemplo, para mi próximo post estaré profundizando acerca del uso de etiquetas mas complejas, ademas veremos que las etiquetas también tienen atributos y les contare sobre los IDEs de programación.

estoy atentos a sus sugerencias e inquietudes. responderé a todos sus comentarios querida comunidad #steemit.

para finalizar quisiera que vieran este video. el cual es muy motivador para aquellas personas que tienen la curiosidad de aprender a programar y es por ello que titule este post de la misma manera que se titula el video.


fuente

Sort:  

Mano que buen aporte.
Sabes si hay algún programa especializado para programar html? pero que permita incorporar CSS, JavaScript y muestre una vista previa. He leido que Dreamweaver es muy bueno pero mi pc no lo corre y trabajar con el block de notas es muy tedioso.

gracias @ejcm520 . si Dreamweaver en un IDE de programación. estaré hablando de eso y mucho mas en post futuros.
pero te cuento que con firefox(las herramientas para desarrollador) y un poco de conocimiento sobre html y css puedes elaborar una web con un aspecto totalmente profesional.
por cierto utilice tus imagenes en el post Todo el mundo debería saber Programar - tutorial #2 (HTML basico 2) .jejeje

Congratulations @legna18205! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Do you like SteemitBoard's project? Vote for its witness and get one more award!