Generar ingresos desde casa creando páginas web: Qué es HTML?, Conceptos Básicos. (Cap4)
[vc_row type=»in_container» full_screen_row_position=»middle» scene_position=»center» text_color=»dark» text_align=»left» overlay_strength=»0.3″][vc_column column_padding=»no-extra-padding» column_padding_position=»all» background_color_opacity=»1″ background_hover_color_opacity=»1″ width=»1/1″ tablet_text_alignment=»default» phone_text_alignment=»default»][vc_column_text]
Qué es HTML?, Conceptos Básicos
Qué es HTML?, conceptos básicos. En este tutorial vamos a conocer que es HTML de manera que el usuario posea herramientas que consideramos necesarias para comenzar a desarrollar sitios básicos y tenga bases importantes para avanzar como programador. No nos extenderemos en detalles y recomendamos complementar la información con otras fuentes como foros o documentación adicional. La idea es ser lo más claro y sencillo posible permitiendo cumplir el objetivo de generar ingresos desde casa desarrollando páginas web sin ser experto programador. Aprendamos entonces HTML, conceptos básicos.
HTML, Conceptos Básicos
El primer lenguaje que debes aprender para desarrollar cualquier proyecto web es HTML. Es un lenguaje descriptivo basado en etiquetas que establecen elementos interpretados y mostrados por el explorador. Aparece por primer vez en una publicación por Tim Berners-Lee en 1991, en un documento llamado HTML Tags (Etiquetas HTML), algunas de las etiquetas todavía se utilizan, otras simplemente han cambiado o han desaparecido.
HTML utiliza pares de etiquetas encerradas por menor que y mayor que (<>) que definen elementos y la manera como se presentan en pantalla. Los elementos son determinados por cada par de etiquetas, por ejemplo, <h1>Este es un título</h1>, <p>este es un párrafo</p>, <a>un link</a>, entre otros. Como podemos observar cada elemento se abre y se cierra con una etiqueta, nótese que la etiqueta final lleva un backslash( / ). Casi todos los elementos tienen esta notación, sin embargo existen algunas como el salto de línea (</br>) que solo es necesaria definirla con la etiqueta de cerrado.[/vc_column_text][/vc_column][/vc_row][vc_row type=»in_container» full_screen_row_position=»middle» scene_position=»center» text_color=»dark» text_align=»left» overlay_strength=»0.3″][vc_column column_padding=»no-extra-padding» column_padding_position=»all» background_color_opacity=»1″ background_hover_color_opacity=»1″ width=»1/2″ tablet_text_alignment=»default» phone_text_alignment=»default»][vc_column_text]
Estructura básica de una página web con HTML
[/vc_column_text][vc_column_text css=».vc_custom_1491531767107{margin-bottom: 20px !important;}»]
HTML
[/vc_column_text][vc_column_text css=».vc_custom_1491532822038{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #dbdbdb !important;}»]NOTA: Más adelante veremos con más detalle qué encontramos dentro de las etiquetas <head></head>, por ahora lo importante es reconocer que el contenido que vemos a través del explorador se ubica dentro de las etiquetas <body></body>. Si presionas «PREVISUALIZAR», te darás cuenta que el texto «Titulo de la página» de <title></title> no se muestra en el resultado.[/vc_column_text][/vc_column][vc_column column_padding=»no-extra-padding» column_padding_position=»all» background_color_opacity=»1″ background_hover_color_opacity=»1″ background_image=»665″ el_class=»preview» width=»1/2″ tablet_text_alignment=»default» phone_text_alignment=»default»][nectar_btn size=»medium» button_style=»regular» button_color_2=»Accent-Color» icon_family=»fontawesome» url=»#» text=»Previsualizar» icon_fontawesome=»fa fa-eye»][vc_raw_html el_class=»resultado»][/vc_raw_html][/vc_column][/vc_row][vc_row type=»in_container» full_screen_row_position=»middle» scene_position=»center» text_color=»dark» text_align=»left» overlay_strength=»0.3″][vc_column column_padding=»no-extra-padding» column_padding_position=»all» background_color_opacity=»1″ background_hover_color_opacity=»1″ width=»1/1″ tablet_text_alignment=»default» phone_text_alignment=»default»][image_with_animation image_url=»721″ alignment=»center» animation=»Fade In» img_link_large=»yes» box_shadow=»none» max_width=»100%»][vc_column_text css=».vc_custom_1492192978635{margin-top: 20px !important;}»]<!DOCTYPE HTML>: Declara el tipo de documento y recoge el conjunto de normas y restricciones que deben cumplir los documentos de un determinado tipo.
<html>: Inicia el documento HTML
<head>: Es la cabecera del documento, incluye todos los elementos técnicos de la página, llamado a funciones y requerimientos principales.
<title>: Es el titulo de la página.</title>
</head>: Cierra la cabecera de la página
<body>: Es el cuerpo y es donde se encuentra todo el contenido de la página.
</body>: Cierra el cuerpo de la página.
</html>: Cierra el documento HTML.
A partir de esta estructura comenzaremos nosotros a desarrollar nuestros ejemplos y finalmente llegaremos a construir infinidad de sitios y aplicaciones web. Preparémonos entonces ahora si para desarrollar todas nuestras ideas e iniciemos la tarea de escribir nuestro primer sitio online utilizando lo mencionado en la entrega anterior «Generar ingresos desde casa creando páginas web: Preparando nuestro entorno de desarrollo, Cuenta FTP con cPanel y FileZilla».[/vc_column_text][/vc_column][/vc_row][vc_row type=»in_container» full_screen_row_position=»middle» scene_position=»center» text_color=»dark» text_align=»left» overlay_strength=»0.3″][vc_column column_padding=»no-extra-padding» column_padding_position=»all» background_color_opacity=»1″ background_hover_color_opacity=»1″ width=»1/1″ tablet_text_alignment=»default» phone_text_alignment=»default»][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJmYi1saWtlJTIyJTIwZGF0YS1ocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZmYWNlYm9vay5jb20lMkZmYW5wYWdlZGlwem8lMjIlMjBkYXRhLWxheW91dCUzRCUyMmJ1dHRvbiUyMiUyMGRhdGEtYWN0aW9uJTNEJTIybGlrZSUyMiUyMGRhdGEtc2l6ZSUzRCUyMmxhcmdlJTIyJTIwZGF0YS1zaG93LWZhY2VzJTNEJTIydHJ1ZSUyMiUyMGRhdGEtc2hhcmUlM0QlMjJ0cnVlJTIyJTNFJTNDJTJGZGl2JTNF[/vc_raw_html][/vc_column][/vc_row]
