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.
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.
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 paragraph3Plantilla 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>Encabezado Este incluye 6 niveles. <h1> H1 </h1> <h2> H2 </h2> <h3> H3 </h3> <h4> H4 </h4> <h5> H5 </h5> <h6> H6 </h6>
Párrafo <p> Párrafo </p>
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>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>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>Línea horizontal (Horizontal Line): <hr /> crea una línea horizontal para dividir cada sección.
Salto de Línea Forzado (Line Break): <br /> – te lleva a la próxima línea.
Elementos de escritura o fraseo: <em> Énfasis (emphasis) </em> o <i> itálico (italic) </i> <b> Negrillas (bold) </b> o <strong> Negrillas (bold) </strong>
Enlaces (link):
<a href=“http://google.com”> Enlace a Google </a>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:
| 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 |