Generar ingresos desde casa creando páginas web: Atributos, Títulos, Párrafos, Enlaces e Imágenes en HTML. (Cap. 5)
[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]
Títulos, párrafos, links e imágenes en HTML
Teniendo en cuenta lo visto en el capítulo anterior acerca de la estructura básica de HTML, comenzaremos a escribir nuestra primer página web, explicando a través de ejemplos que iremos subiendo a nuestro host*, cada una de las etiquetas usadas, para hacer nuestro tutorial lo más dinámico posible y así tener nuestro portafolio web real al mismo tiempo que aprendemos, optimizando nuestro tiempo y llegando a nuestro objetivo principal, Generar ingresos desde casa creando páginas web, lo más pronto posible.
Veremos en este capítulo las etiquetas que definen los Títulos, párrafos, links e imágenes en HTML, explicaremos algunas particularidades de estas e incluiremos algunos Atributos que permitirán agregar información adicional a nuestros elementos, subiremos un ejemplo a nuestro servidor y cargaremos nuestra página web en el explorador.
Atributos, Títulos, Párrafos, Enlaces e Imágenes en HTML
[/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_column_text css=».vc_custom_1492461850240{padding-bottom: 20px !important;}»]Atributos HTML
Algunas etiquetas HTML necesitan información adicional, que describe parámetros particulares para cada elemento, un enlace por ejemplo, definido por la etiqueta <a>, necesita la URL a donde nos va a dirigir. Los ATRIBUTOS complementan o agregan información a nuestros elementos HTML.
Existen diferentes tipos de atributos y no todos se pueden utilizar en todas las etiquetas, para esto cada elemento tiene su propia lista de atributos, sin embargo existen ciertos atributos cuya funcionalidad es la misma en muchas o en casi todas las etiquetas.[/vc_column_text][toggles style=»default»][toggle color=»Default» title=»Atributos Básicos»][vc_column_text]Los siguientes atributos aplican para prácticamente todas las etiquetas.
[supsystic-tables id=1][/vc_column_text][/toggle][toggle color=»Default» title=»Atributos especiales»][vc_column_text]Estos atributos indican el idioma en el que esta escrita la página.
[supsystic-tables id=2]
Estos atributos se usan generalmente en la etiqueta <html>[/vc_column_text][/toggle][toggle color=»Default» title=»Atributos generales»][vc_column_text]El siguiente cuadro muestra un compendio de atributos con sus etiquetas.
[supsystic-tables id=3][/vc_column_text][/toggle][/toggles][/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_column_text]Titulos <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
Los títulos se definen, según su jerarquía dentro del documento, usando las etiquetas <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>, en donde 6 es el de menor jerarquía y 1 el de mayor, lo que quiere decir que mi título principal está dentro de H1, su subtítulo en H2 y/o títulos que no se consideren principales pero hacen parte del documento, en las demás etiquetas. Esto se usa según el criterio de diseño y el orden del documento, sin embargo se sugiere usar las etiquetas H1 y H2 para los títulos principales, ya que los motores de búsqueda utilizan estas etiquetas como referencias para mostrar resultados. El estilo de los textos contenidos en estas etiquetas tienen por defecto diferentes tamaños dependiendo de su jerarquía y todos tienen negrilla, además ocupan un bloque completo en la pantalla, lo que quiere decir que independiente de la cantidad de palabras o letras que tenga, el elemento como tal ocupa una línea completa en la pantalla, el siguiente elemento definido después del título se ubica debajo.
<h1>Este es un título</h1>
<h2>Este es un subtítulo</h2>
Parrafos <p>
La etiqueta <p></p> define un párrafo en nuestro documento HTML, es un elemento básico y como los títulos, en la pantalla ocupan un bloque completo. Para dar formato al texto vamos a utilizar por el momento, el atributo style, atributo que se puede utilizar en la mayoría de las etiquetas, sin embargo más adelante veremos cómo esta etiqueta pude ser reemplazada por una clase de CSS y así dar formato no solo al texto sino a todos los elementos HTML.
<p style=»color:red;text-align:center;»>Este es un párrafo</p>
[/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 css=».vc_custom_1491531767107{margin-bottom: 20px !important;}»]
HTML
[/vc_column_text][vc_column_text css=».vc_custom_1492702398614{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #dbdbdb !important;}» el_class=»notas»]NOTA: Notemos que las etiquetas están escritas en minúscula, pero si las cambiamos por mayúscula y damos click en «PREVISUALIZAR» nos daremos cuenta que también funciona. Las etiquetas HTML se pueden escribir de las dos formas sin afectar su funcionalidad, sin embargo el W3C, el consorcio internacional que genera recomendaciones y estándares para tecnologías basadas en la web, sugiere usar minúsculas para evitar errores en documentos XHTML por ejemplo.
El atributo style usado en los párrafos funciona también para los títulos y en general para todos los elementos HTML, lo que ingresamos dentro de las comillas son propiedades CSS, los cuales estudiaremos con detalle más adelante.
Intenta cambiar o agregar estos atributos a los títulos y da click en «PREVISUALIZAR», observa los cambios y juega con ellos, esto ayudará a que te familiarices más rápido con los atributos.[/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»][vc_column_text]Enlaces <a>
Los enlaces son parte fundamental de la web, pues son la herramienta o el elemento que nos permite navegar a través de ella, abriendo direcciones de archivos o URL´s (Uniform Resource Locator o Localizador de Recursos Uniforme). En HTML los enlaces se definen con la etiqueta <a></a>, pero esta etiqueta por si sola no funciona, note que aunque sabemos que lo que se encuentre dentro de estas etiquetas es un enlace, no encontramos información de hacia dónde nos dirige. Para esto necesitamos agregar el Atributo href y su valor es la URL a la que nos va a llevar, de manera que tenemos href=»https://dipzo.net», por ejemplo. El estilo predefinido para este elemento, a diferencia de los títulos y el párrafo, en pantalla cubre únicamente el espacio ocupado por el texto o imagen que se encuentra dentro de estas etiquetas, el elemento siguiente en el documento HTML se ubica junto al enlace y no debajo, en el ejemplo entenderemos mejor el concepto.
<a href=»https://dipzo.net» target=»_blank»>El texto que sirve de enlace</a>
Existe un atributo adicional para los enlaces, que permite abrir las URL asociadas, en otra pagina, pestaña, marcos o en la misma ventana, target define el modo o el lugar donde se abrirá el enlace según el siguiente cuadro.
| _blank | Especifica que el destino sea una nueva ventana del navegador, o una nueva pestaña. |
| _self | Por defecto. Abre el destino en el mismo lugar donde se haya realizado el clic. |
| _parent | Abre el destino en un marco asociado. |
| _top | Abre el destino ocupando todo el cuerpo de la ventana. |
| framename | Abre el destino en el marco del cual se especifica el nombre. |
Imágenes <img>
Como los enlaces, la etiqueta que define las imágenes <img>, no significa nada por si sola, necesita la dirección del archivo o la URL donde se encuentra alojada la imagen, la diferencia con el enlace es que la dirección se agrega con el atributo src y es una de las pocas etiquetas que no tienen etiqueta de cerrado, es decir, se define dentro de una sola etiqueta. Igual que los enlaces, como estilo predefinido ocupan el espacio definido por el tamaño de la imagen o el establecido a través de las propiedades width (ancho) y height (alto) de CSS.
<img src=»https://goo.gl/5sfNzn»>
La alineación de las imágenes se definen tambien con propiedades CSS, en el ejemplo encontraremos dos formas de alinear las imágenes, una de ellas utiliza el atributo align de <img> y la otra con style y la propiedad float de CSS. HTML5 no admite el atributo align de la etiqueta <img> por lo que se recomienda establecer este y todos los estilos con style o CSS que veremos más adelante.
[/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″ background_image=»665″ el_class=»preview2″ 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_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 css=».vc_custom_1492466504997{margin-bottom: 20px !important;}»]
HTML
[/vc_column_text][vc_column_text css=».vc_custom_1492703139982{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #dbdbdb !important;}» el_class=»notas»]NOTA: Digamos que existen 4 bloques aparte del título donde aparece el nombre, los cuatro son cada uno la imagen y el párrafo. En el primero definimos la imagen con solo el tamaño del ancho de la imagen, en los siguientes dos tenemos el mismo resultado pero escrito de dos formas diferentes, la que tiene el atributo align no funciona en HTML5, por último tenemos otro ejemplo con una alineación diferente.
Intenta definiendo el alto (height) de alguna de las imágenes y PREVISUALIZA para ver como se comportan estas propiedades, define una altura y un ancho o solo el alto. Qué pasa?[/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_column_text]RETO #1:
Abres el archivo index.html que se encuentra en tu cuenta ftp, eliminas todo el codigo que tengas y lo reemplazas por el código anteror, lo guardas, cargas el archivo a filezilla (como se ve en el Capitulo 3 ) y abres tu página. si todo salio bien, deberas ver la versión de escritorio del código.[/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][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]Post patrocinado por[/vc_column_text][vc_raw_js]JTNDc2NyaXB0JTIwYXN5bmMlMjBzcmMlM0QlMjIlMkYlMkZwYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSUyRnBhZ2VhZCUyRmpzJTJGYWRzYnlnb29nbGUuanMlMjIlM0UlM0MlMkZzY3JpcHQlM0UlMEElM0MlMjEtLSUyMGRpcHpvJTIwYmFubmVyJTIwZm9vdGVyJTIwLS0lM0UlMEElM0NpbnMlMjBjbGFzcyUzRCUyMmFkc2J5Z29vZ2xlJTIyJTBBJTIwJTIwJTIwJTIwJTIwc3R5bGUlM0QlMjJkaXNwbGF5JTNBaW5saW5lLWJsb2NrJTNCd2lkdGglM0E3MjhweCUzQmhlaWdodCUzQTkwcHglMjIlMEElMjAlMjAlMjAlMjAlMjBkYXRhLWFkLWNsaWVudCUzRCUyMmNhLXB1Yi04NjU1ODgwODcwMDY4MjIyJTIyJTBBJTIwJTIwJTIwJTIwJTIwZGF0YS1hZC1zbG90JTNEJTIyNzM1MDYwNjk5MiUyMiUzRSUzQyUyRmlucyUzRSUwQSUzQ3NjcmlwdCUzRSUwQSUyOGFkc2J5Z29vZ2xlJTIwJTNEJTIwd2luZG93LmFkc2J5Z29vZ2xlJTIwJTdDJTdDJTIwJTVCJTVEJTI5LnB1c2glMjglN0IlN0QlMjklM0IlMEElM0MlMkZzY3JpcHQlM0U=[/vc_raw_js][/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_video link=»https://youtu.be/YIcJFXDXB4o» el_width=»50″ align=»center»][/vc_column][/vc_row]
