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
Comparte el artículo: