馃搶 Introducci贸n a la Programaci贸n en HTML: Conceptos B谩sicos

Hola programadores

Esta semana voy a escribir acerca de como programar con HTML (HyperText Markup Language) , el cual es un lenguaje de etiquetas es decir sus 'comando' est谩n entre los signos '<>' y tienen un inicio y fin cada segmento, este lenguaje es muy popular y lo utilizamos todos los d铆as, porque es el lenguaje en que esta Internet, si est谩n en Google Chrome y presionan las teclas Ctrl + U , ver谩n el c贸digo fuente (as铆 es como se le llama en el mundo de la computaci贸n cuando no tiene una presentaci贸n para humanos jajajaja o usuarios) 

o si presionan Ctrl + Mayus + I , Google muestra el dise帽o de la p谩gina los errores y warnings que hay en el c贸digo, esto les puede servir para revisar su p谩gina antes de publicarla


HTML surgi贸 por ah铆 de 1991 es propiedad de World Wide Web Consortium (W3C) , incluso encontr茅 la liga de la pantente en 1997 https://patentimages.storage.googleapis.com/10/69/bc/a4e3e496c82e5b/US20070050703A1.pdf , la ultima versi贸n es HTML5.3


Las etiquetas b谩sicas en HTML son:

  • html : marca el inicio y fin de una pagina 
  • head: marca el encabezado
  • title: es la etiqueta para colocar el titulo de una p谩gina y va dentro del head
  • meta: son metadatos, aqu铆 se ponen los datos de b煤squeda, tambi茅n va en el head
  • body: es el cuerpo de la p谩gina
  • table: es para crear una tabla
  • tr: es para indicar una fila en una tabla
  • td: es para crear una columna en una tabla
  • a: para referenciar una liga o para abrir otra p谩gina
  • img: para referenciar a una imagen
  • br: salto de l铆nea

Ejemplo de pagina WEB con HTML


 Bueno vamos hacer un ejemplo de una p谩gina que sea acerca de Mascotas que tenga una tabla de 5 filas y 3 columnas con los datos de perritos en adopci贸n y sus fotos .

C贸digo

<html>
 <head>
   <title>Mascotas</title>
 </head>
 <body>
      <H1>Mascotas</H1>
      <p>Acontinuaci贸n la lista de nuestros perritos en adopci贸n</p>
      <br>
      <table style="width:100%";  border=1 cellspacing=0 cellpadding=2 bordercolor="666633" >
        <tr>
          <td>Nombre</td>
          <td>Descripcion</td>
          <td>Foto</td>
        </tr>
        <tr>
          <td>Cielo</td>
          <td>Perrito macho de 3 a 7 meses, jugueton</td>
          <td><img src="https://estaticos.muyinteresante.es/media/cache/760x570_thumb/uploads/images/article/5c3871215bafe83b078adbe3/perro.jpg" height="100" width="100"></td>
        </tr>
        <tr>
          <td>Flaco</td>
          <td>Pero macho adulto de 5 a帽os, obediente</td>
          <td><img src="https://d1dxvryen9goi5.cloudfront.net/wp-content/uploads/2019/02/EC9-696x684.jpg" height="100" width="100"></td>
        </tr>
        <tr>
          <td>Bolita</td>
          <td>Perrita hembra de 2 a帽os muy tierna</td>
          <td><img src="https://misanimales.com/wp-content/uploads/2017/06/perrita-no-est%C3%A1-embarazada.jpg" height="100" width="100"></td>
        </tr>
      </table>
 </body>
</html>

Para poder escribirlo vamos a utilizar un bloc de notas

Ejemplo de c贸digo HTML b谩sico para crear una p谩gina web.

Al finalizar vamos a guardar con extensi贸n .html
Para ver nuestra p谩gina web, vamos a dar click derecho sobre el archivo y decirle abrir con nuestro navegador o movemos nuestro archivo al navegador 

La p谩gina pueden verla en 
https://www.programacionparatodos.com/p/blog-page.html

 Tambi茅n pueden agregar botones de paypal, el c贸digo se los proporciona paypal, solo tienen que crear una cuenta, por ejemplo yo agregue lo siguiente
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="EVKBEC28G9VMU" />
<input type="hidden" name="item_name" value="Huertoencasayjardin.com" />
<input type="hidden" name="currency_code" value="MXN" />
<input type="image" src="https://www.paypalobjects.com/es_XC/MX/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donar con el bot贸n PayPal" />
<img alt="" border="0" src="https://www.paypal.com/es_MX/i/scr/pixel.gif" width="1" height="1" />

</form>


Como agregar la imagen de Paypal

<img src="https://www.paypalobjects.com/webstatic/es_MX/mktg/logos-buttons/redesign/btn_10.png" alt="PayPal" />
<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
 <script>paypal.Buttons().render('body');</script>
Ahora que ya saben como hacer su p谩gina web, les tengo que decir que muy pocas veces sera necesario que lo hagan de cero, porque ya existen muchas platillas o templates o p谩ginas dedicadas para que puedas crear tus propias p谩ginas web por mencionar algunos:
Incluso con Word, puede crear un documento y guardarlo con HTML

Despu茅s de crear su p谩gina(s) lo que hay que hacer es encontrar un servidor para publicarlo o subirlo para que sea visible por mas personas, puede ser Internet, puede ser en la red del trabajo.

Bueno aparte de nuestro bloc de notas y word, hay otros editores de HTML 
  • Visual Studio Code
  • Notepad++
  • Kompozer
  • Microsoft Visual Studio
  • JetBrains
  • Netbeans
  • https://www.w3schools.com/tryit/
Otros ejemplos de p谩ginas WEB din谩micas los pueden encontrar en nuestros siguientes post:
Espero les haya gustado el post y nos compartan.

 Si tambi茅n les interesa que les coticen la creaci贸n de sus p谩ginas escriban a zelideth27@gmail.com
No olvide compartirnos y seguirnos en este blog, en Facebook.

https://www.programacionparatodos.com

Comentarios

Publicar un comentario

Dejanos tus dudas y comentarios

馃殌 Mantener este blog funcionando requiere tiempo y caf茅. ¡Puedes contribuir con uno aqu铆!

Entradas m谩s populares de este blog

Macro de Excel para abrir archivo csv

Imagen
Hay veces que quieres abrir un archivo de Excel pero est谩 separado por comas, punto y coma o por un pipe. Hay formas de hacerlos desde Excel. Les quiero compartir algunas opciones de como hacerlo y espero que les sean de utilidad. 1.Es abrir el archivo en Excel y utilizar la funci贸n de separar por columnas y seleccionar el delimitador, por ejemplo ";" 2. Es colocar "sep=;" en el primer rengl贸n del archivo que quieres abrir y guardar en formato CSV y abrirlo en Excel y te lo abrir谩 separado en columnas. 3. Otra forma es con una macro, est茅 en mi gusto es la que m谩s me funciona porque si hay alguna coma en la descripci贸n o en alguna columna, si lo abres desde Excel te va a desacomodar las columnas.  Este bot贸n te abrir谩 un pantalla para abrir el archivo que quieres separar y te lo abrir谩 en una hoja de excel ya separado. El c贸digo de la macro es el siguiente  Private Sub CommandButton1_Click() Dim sht As Worksheet Dim fnd As Variant Dim rplc ...
Leer m谩s

Gu铆a Pr谩ctica: Ejemplo Completo de ASPX para Desarrolladores Web

Imagen
Bienvenidos a programacionparatodos.com Esta semana vamos a conocer otro lenguaje de programaci贸n que es ASP ( Active Server Pages  )  que es de la familia de Microsoft es plataforma Cliente/Servidor y que permite crear p谩ginas WEB din谩micas, utiliza un servicio conocido como IIS o  (Internet Information Services) fue creado en 1996. Cuando ven paginas WEB que terminan en .aspx es que est谩n desarrolladas con este lenguaje. P谩ginas  que por ejemplo utilizan ASP https://www.cfe.mx/Pages/Index.aspx https://www.interfactura.com/Index.aspx https://www.canadainternational.gc.ca/mexico-mexique/index.aspx?lang=spa Igual hay mucho trabajo para este software por ejemplo les dej贸 las siguientes vacantes  Desarrollador .NET .NET Developer NET LEAD Para seguir con el formato del blog, les quiero compartir un programa de ejemplo, pero he de decirles que es la primera vez que programo en ASP , ya que no lo hab铆a hecho antes, me tomo...
Leer m谩s

API de banxico para obtener tipo de cambio utilizando Javascript

Imagen
En esta entrada vamos a ver un c贸digo de Javascript para obtener el tipo de cambio del Banco de M茅xico (Banxico) mediante  API, puedes usar el siguiente c贸digo JavaScript. Este ejemplo utiliza `fetch` para realizar la solicitud a la API. Aseg煤rate de tener una API Key de Banxico. Para poder ejecutarlo necesitamos obtener primero nuestro token en  https://www.banxico.org.mx/SieAPIRest/service/v1/token Con ese token puedes hacer hasta 40,000 consultas gratis por d铆a. Despu茅s necesitamos identificar la serie del dato que queremos identificar , en este ejemplo vamos a utilizar la serie  SF43718 el cual obtenemos de la liga   https://www.banxico.org.mx/SieAPIRest/service/v1/doc/catalogoSeries# <html> <head>     <title>Tipo de Cambio Banxico</title>     <style>         body {             font-family: Arial, sans-serif;             text-align: ce...
Leer m谩s