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
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
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.
Comentarios
Publicar un comentario
Dejanos tus dudas y comentarios