Programación Web: Código HTML Básico

Aprende a crear una página web utilizando HTML básico. Este video va dirigido a principiantes y personas que están comenzando en el campo de la programación web.

¡Aún tengo dificultad de mantenerme en 5 minutos, pero ahí vamos!

Nota: Me disculpo por el audio, pero creo que se entiende el mensaje bastante bien.

  1. HTML Las siglas significan (HyperText Markup Language)  o (Lenguaje Enmarcado de HiperTexto).  Ésta describe el contenido y la estructura de la información en una página web.

  2. Etiqueta (Tags)
    <p
    class=“paragraph”>Este es un párrafo</p> <p – es el inicio de la etiqueta </p> – es el final de la etiqueta Este es un párrafo – será el texto que se mostrará en el navegador class – es un atributo dentro de la etiqueta <p> parragraph – es el valor o nombre de la clase*El atributo class puede tener más de una clase separada por espacio.  Ej. paragraph1 paragraph2 paragraph3

  3. Plantilla Básica de HTML
    <html> <head>
    <title>Título de la Página</title>
    </head>
    <body> Aquí va el contenido de la página.
    </body>
    </html>

  4. Encabezado Este incluye 6 niveles. <h1> H1 </h1> <h2> H2 </h2> <h3> H3 </h3> <h4> H4 </h4> <h5> H5 </h5> <h6> H6 </h6>

  5. Párrafo <p> Párrafo </p>

  6. Espacios en blanco (Whitespace)
    Estos no son tomados en cuenta en el código sólo le asigna 1 espacio. <p> Este        es    un
    párrafo</p>

  7. Lista sin enumerar (Unnumbered List): <ul> </ul> – Lista sin enumerar <li> </li> – Cada artículo de la lista (list item)Ejemplo:  <ul> <li> Artículo 1 </li>
    <li> Artículo 2 </li> </ul>

  8. Lista ordenada (Ordered List):
    <ol> </ol>
     Lista ordenada <li> </li> – Cada artículo de la lista (list item), funciona igual en ambos. Ejemplo: <ol> <li> Artículo 1 </li>
    <li> Artículo 2 </li> </ol>

  9. Línea horizontal (Horizontal Line): <hr /> crea una línea horizontal para dividir cada sección.

  10. Salto de Línea Forzado (Line Break): <br /> – te lleva a la próxima línea.

  11. Elementos de escritura o fraseo: <em> Énfasis (emphasis) </em> o <i> itálico (italic) </i> <b> Negrillas (bold) </b> o <strong> Negrillas (bold) </strong>

  12. Enlaces (link):
    <a
    href=“http://google.com> Enlace a Google </a>

  13. Imagen: (image): <img /> – Es para mostrar las imágenes y necesita el atributo src con el valor de la ruta donde está la imagen.Ejemplo: <img src=“https://lopezpagan.com/assets/img/logo-blue.png/>


Otras etiquetas:

Nombre Etiqueta inicial Etiqueta final Descripción
a <a> </a> Origen o destino del vínculo
abbr <abbr> </abbr> Abreviatura (p.ej.:WWW, HTTP, etc.)
acronym <acronym> </acronym>
address <address> </address> Información sobre el autor
applet <applet> </applet> Applet Java
area <area> Prohibido Área de un mapa de imágenes en el lado del cliente
b <b> </b> Estilo de texto en negrita
base <base> Prohibido URI base del documento
basefont <basefont> Prohibido Tamaño base de fuente
bdo <bdo> </bdo> Anular algoritmo BiDi I18N
big <big> </big> Estilo de texto grande
blockquote <blockquote> </blockquote> Cita larga
body Opcional Opcional Cuerpo del documento
br <br> Prohibido Salto de línea forzado
button <button> </button> Botón
caption <caption> </caption> Título de tabla
center <center> </center> Forma abreviada de DIV align=center
cite <cite> </cite> Cita
code <code> </code> Fragmento de código de computadora
col <col> Prohibido Columna de una tabla
colgroup <colgroup> Opcional Grupo de columnas de una tabla
dd <dd> Opcional Descripción de una definición
del <del> </del> Texto borrado
dfn <dfn> </dfn> Definición
dir <dir> </dir> Lista tipo directorio
div <div> </div> Contenedor genérico de idioma/estilo
dl <dl> </dl> Lista de definiciones
dt <dt> Opcional Término definido
em <em> </em> Énfasis
fieldset <fieldset> </fieldset> Grupo de controles de un formulario
font <font> </font> Cambio local de la fuente
form <form> </form> Formulario interactivo
frame <frame> Prohibido Subventana
frameset <frameset> </frameset> Subdivisión en ventanas
h1 <h1> </h1> Encabezado
h2 <h2> </h2> Encabezado
h3 <h3> </h3> Encabezado
h4 <h4> </h4> Encabezado
h5 <h5> </h5> Encabezado
h6 <h6> </h6> Encabezado
head Opcional Opcional Cabecera del documento
hr <hr> Prohibido Separador horizontal
html Opcional Opcional Elemento raiz del documento
i <i> </i> Estilo de texto en itálica
iframe <iframe> </iframe> Subventana en línea
img <img> Prohibido Imagen incluida
input <input> Prohibido Control de formulario
ins <ins> </ins> Texto insertado
isindex <isindex> Prohibido Entrada de texto en una sola línea con indicador
kbd <kbd> </kbd> Texto que debe introducir el usuario
label <label> </label> Texto del rótulo de un campo de formulario
legend <legend> </legend> Leyenda de un grupo de campos
li <li> Opcional Objeto de lista
link <link> Prohibido Un vínculo independiente del medio
map <map> </map> Mapa de imágenes en el lado del cliente
menu <menu> </menu> Lista tipo menú
meta <meta> Prohibido Metainformación genérica
noframes <noframes> </noframes> Contenedor de contenidos alternativos para la representación no basada en marcos
noscript <noscript> </noscript> Contenedor de contenidos alternativos para la representación no basada en scripts
object <object> </object> Objeto incluido genérico
ol <ol> </ol> Lista ordenada
optgroup <optgroup> </optgroup> Grupo de opciones
option <option> Opcional Opción seleccionable
p <p> Opcional Párrafo
param <param> Prohibido Valor de propiedad con nombre
pre <pre> </pre> Texto preformateado
q <q> </q> Cita corta en línea
s <s> </s> Estilo de texto tachado
samp <samp> </samp> Ejemplo de salida de programas, scripts, etc.
script <script> </script> Sentencias de script
select <select> </select> Selector de opciones
small <small> </small> Estilo de texto pequeño
span <span> </span> Contenedor genérico de idioma/estilo
strike <strike> </strike> Estilo de texto tachado
strong <strong> </strong> Énfasis fuerte
style <style> </style> Información de estilo
sub <sub> </sub> Subíndice
sup <sup> </sup> Superíndice
table <table> </table>
tbody Opcional Opcional Cuerpo de tabla
td <td> Opcional Celda de datos de una tabla
textarea <textarea> </textarea> Campo de texto multilínea
tfoot <tfoot> Opcional Pie de tabla
th <th> Opcional Celda de encabezado de tabla
thead <thead> Opcional Cabecera de tabla
title <title> </title> Título del documento
tr <tr> Opcional Fila de una tabla
tt <tt> </tt> Estilo de texto de teletipo o monoespacio
u <u> </u> Estilo de texto subrayado
ul <ul> </ul> Lista no ordenada
var <var> </var> Variable o argumento de un programa

Herramienta Para Manejar Gifs Animados

Gifs Media Uploader

Puedes utilizar este proyecto para crear tu sitio para manejar gifs.

La página index.php mostrará todos los gifs que han sido subidos a tu página.

La página media.php mostrará la imagen seleccionada con los campos llenos.

  • El campo de imagen muestra la ruta del gif.

  • El campo de la página muestra la ruta de la página media.php y la imagen gif seleccionada.

  • El campo download puedes descargar la imagen a tu computadora.

Si deseas subir un gif animado, deberás hacer Log In.  Los accesos están en el código.

  • Email: admin@domain.com

  • Password: admin

Una vez tengas acceso, serás redireccionado a la página anterior.

Ahora verás una opción en el menú llamada Upload que te llevará a la página para subir las imágenes. Busca el archivo y presiona el botón de Upload.

Luego de que la foto suba, serás redireccionado a la página de media.php con la imagen subida.

La página _process.php es donde todo el proceso es realizado.

La página de login.php y logoff.php crean una crean y destruyen la variable de sesión para que tengas acceso a uploader.php y _process.php

La plataforma que se utilizó para hacer el html + css se encuentra en getBootstrap.com. El lenguaje de servidor es PHP 5.4 o mayor.


 

Puedes descargar el código desde: https://github.com/lopezpagan/Gifs-Media-Uploader

¿Cómo Funcionan los Formularios? HTML y PHP

Existen dos maneras de enviar los valores de un formulario.

  • Utilizando el método POST
  • Utilizando el método GET
<form method="POST"></form>
 <form method="GET"></form>

Se define de esta manera:

  • Si no tienes el atributo method en el formulario, entonces GET viene por defecto.
  • Si utilizas GET, encontrarás que cuando haces un envío se escriben los parámetros en la barra de direcciones de tu navegador.
  • Si utilizas POST, no verás ningun parámetro adicional en tu navegador.

Cuando envías el formulario, dependiendo de cuál método utilices, entonces decides qué método debes utilizar para capturar los datos en el código de PHP.

Si envías el formulario utilizando el método de GET, en PHP capturas los datos utilizando  $_GET.  Si envías el formulario utilizando el método POST, en PHP debes utilizar $_POST.

<?php 
 echo( $_GET['nombre'] ); 
 echo( $_POST['nombre'] ); 
?>

Si envías un campo llamado “nombre” desde el formulario con el método GET, entonces deberás capturar los datos utilizado $_GET[‘nombre’].

 <form method="GET"><input id="nombre" name="nombre" type="text" /></form>

Si ves es bastante sencillo.

Si envías el formulario con el campo de nombre con el método POST, pues utiliza $_POST[‘nombre’].

<form method="POST"><input id="nombre" name="nombre" type="text" /></form>

 

Una vez entiendes esto lo puedes hacer.

 

Existe otro arreglo que se utiliza para recoger los valores del formulario. No importa si utilizas el método POST o GET, lo leerá igual. Este es un método inseguro, por eso no se suele utilizar.

Se llama $_REQUEST.

<?php 
 echo( $_REQUEST['nombre'] ); 
?>



Esto es un adicional a lo discutido en el video:

Como has visto el utilizar el método GET envía los parámetros por la barra de direcciones de url, entonces te habrás dado cuenta que pudieras enviar a través de la url los parámetros que desees a una página php que recoja estos parámetros con la funcionalidad de $_GET.

http://localhost/form/form.php?nombre=TONY&apellidos=LOPEZ

Esta url tiene 2 parámetros.  Estos parámetros se separan o conectan con los símbolos ? y &.  El símbolo de se utiliza solo al comienzo, una sola vez, para el primer parámetro.  El símbolo de & se utiliza para el resto de los parámetros.

http://localhost/form/form.php (si no aparece el nombre de una página, entonces por defecto la página es index.php)
 ?nombre=TONY
 &apellidos=LOPEZ

En el código de PHP puedes utilizar el método de $_GET o $_REQUEST para recoger todo lo que está en la barra de direcciones de url.

Puedes colocar este url en un enlace sin tener que utilizar un formulario.

<a href="localhost/form/form.php?nombre=TONY&apellidos=LOPEZ">Enlace</a>

Luego puedes recoger los parámetros en PHP de esta manera:

<?php 
 echo( $_GET['nombre'] ); 
 echo( $_POST['nombre'] ); 
?>

 


 

Estoy seguro que esto les será muy útil en el momento de crear un formulario y capturar los datos.  

El video dura un poco más de 5 minutos, pero podemos entender que fue el primero de esta serie.

¡Hasta la próxima!