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