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=“http://lopezpagan.com/assets/img/logo-blue.png/>


Otras etiquetas:

NombreEtiqueta inicialEtiqueta finalDescripció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>ProhibidoURI base del documento
basefont<basefont>ProhibidoTamaño base de fuente
bdo<bdo></bdo>Anular algoritmo BiDi I18N
big<big></big>Estilo de texto grande
blockquote<blockquote></blockquote>Cita larga
bodyOpcionalOpcionalCuerpo del documento
br<br>ProhibidoSalto 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>ProhibidoColumna de una tabla
colgroup<colgroup>OpcionalGrupo de columnas de una tabla
dd<dd>OpcionalDescripció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>OpcionalTé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>ProhibidoSubventana
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
headOpcionalOpcionalCabecera del documento
hr<hr>ProhibidoSeparador horizontal
htmlOpcionalOpcionalElemento raiz del documento
i<i></i>Estilo de texto en itálica
iframe<iframe></iframe>Subventana en línea
img<img>ProhibidoImagen incluida
input<input>ProhibidoControl de formulario
ins<ins></ins>Texto insertado
isindex<isindex>ProhibidoEntrada 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>OpcionalObjeto de lista
link<link>ProhibidoUn 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>ProhibidoMetainformació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>OpcionalOpción seleccionable
p<p>OpcionalPárrafo
param<param>ProhibidoValor 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>
tbodyOpcionalOpcionalCuerpo de tabla
td<td>OpcionalCelda de datos de una tabla
textarea<textarea></textarea>Campo de texto multilínea
tfoot<tfoot>OpcionalPie de tabla
th<th>OpcionalCelda de encabezado de tabla
thead<thead>OpcionalCabecera de tabla
title<title></title>Título del documento
tr<tr>OpcionalFila 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

¿Cómo Validar un Formulario Sin Duplicar los Datos? 3ra Parte

Este video es la continuación del tutorial #6.  Aquí cerramos la serie de videos de Cómo Validar un Formulario y muestro como verificar los datos antes de guardarlos en la base de datos para evitar la duplicidad.

Descarga el proyecto: https://github.com/lopezpagan/youtube-tutorials/tree/master/S-QouC4znWA

Lee más: lopezpagan.com/youtube