Updated : Ene 25, 2020 in Desarrollo web

Curso básico de Html Introducción #1

Hoy aprenderemos a maquetar nuestra primera pagina base de html5 de una manera fácil y rápida. Antes aquí le dejar unos conceptos que deberemos tener claro antes de comenzar.

¿Que es y para que sirve html ?

Podría escribir una definición larga de lo que es html pero para no aburrirlo html es un lenguaje de maquetado que lo permite crear una estructura de una pagina web. Vendría hacer algo así como el esqueleto de un auto el cual luego de crearlo debemos aprende a como pintadolo y darle su funcionalidades. Por ende si aprender html No podrás arranca el auto solo es el comienzo

HTML Y HTML5 ??

Es habitual que la gente confunda html y html5 como dos lenguaje diferente pero en realidad son la misma cosa. Html5 solo hacer referencia a la ultima versión del el lenguaje cual incorpora nuevas etiquetas vedria hacer algo así como una actualización que integra nueva funcionalidad pero en si el lenguaje sigue siendo html.

Que necesito para comenzar

Concepto básico de HTML

Lo único que tenemos que entender de HTML , es simplemente cual es su comportamiento.

HTML funciona mediante etiquetas en la cual cada etiqueta tiene una nomenclatura que deberemos respetar. Por ejemplo supongamos que tenemos una etiqueta llamada <enlace> que cuando el usuario presiona te redirecciona a un sitio web, dicha etiqueta tiene una sintaxis básica para funcionar.

Ejemplo

<ENLACE>Nombre</ENLACE>

Cada etiqueta tiene un atributo que no es nada mas que un complemento que a pasarlo a nuestra etiqueta la dotamos de una cualidad o funcionalidad tanto visual o funcional.

Ejemplo

<ENLACE atributo="Valor" >Nombre</ENLACE>
<ENLACE pagina="http:/owicron.com" >Nombre</ENLACE>

Sintaxis original de un enlace en HTML

<a href="http:/owicron.com">Ir a mi pagina web</a>

Estructura base

Como mencionamos al inicio del articulo tenemos una estructura base que deberemos respetar.

<!DOCTYPE html>
<html>
<head>

       <title>Mi pagina web</title>

</head>
<body>
</body>

</html>

En el siguiente fragmento estamos viendo la estructura base de una pagina HTML5 realmente si examinamos el código actual no deberíamos entender su funcionamiento. Pero si su sintaxis o comportamiento ya que todas las palabras dentro del código son etiquetas nada mas. Ahora cuando le proceda a explicar que hacer cada etiqueta pasaran a comprenderlo aun mejor.

Etiquetas base

HtmlEtiqueta principal html con esta simple etiqueta le indicamos que iniciaremos una estructura html
HeadEtiqueta que almacenara meta etiquetas, hojas de estilos y javascript
TitleEtiqueta que muestra el titulo de la pagina web en la solapa de navegador
Body Etiqueta que almacenara todo lo que queremos mostrar en nuestra pagina web
!DOCTYPE htmlEtiqueta que indica al navegador que estamos trabajando con un documento HTML5

Comentarios HTML

Antes de finalizar este primer capitulo permitamente explicarles que son los comentario y como podemos hacer uso de ello.

Los comentarios son un fragmento de código que podremos escribir en nuestro documento html el cual al momento de ejecutarse en un navegador se omitirá y no se mostrar en la pagina , esto es muy útil para recordar algo que hemos realizado.

Sintaxis

<!--Contenido-->

Ejemplo

<!--la etiqueta doctype le indica al navegador que es un documento html5 -->
<!DOCTYPE html>
<html>
<!--Iniciamos el documento html-->
<head>
<!--head almacena los metadatos css y javascript-->
    <title>Mi primera pagina web</title>
</head>

<body>
  <!--Contenido que se mostrara en la pagina web-->  
</body>
</html>
<!--Finalizamos el documento html-->

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.