ACT 2-Entrada desarrollada en HTML

Hola a todos de nuevo

¡Bienvenidos a la segunda entrada de mi blog!

En esta entrada del blog, la escribiremos y diseñaremos desde cero con HTML

Introducción

¿Que es HTML? HTML es un código basado en etiquetas que es comunmente utilizado en todos los navegadores de todo el mundo.
¿Cómo he empezado? Lo primero de todo, lo que hemos hecho es ponerle un titulo a nuestra entrada, hemos elegido un color, un tipo de letra y vamos a dejarlo alineado en el centro. Para ello, la estructura que hemos necesitado hacer es la siguiente estructura: <h1 align=center> (para elegir el tamaño) <font color="HEX" face=tipo de letra size=tamaño> (el primero es para elegir el color de letra, el segundo para el tipo de letra y el tercero para cambiar el tamaño del título, que en mi caso lo he aumentado) Por ultimo escribimos </font> </h1> para decir que termine el titulo y que no use mas la misma fuente de letra. Luego las 3 siguientes lineas estan estructuradas de la misma manera, solo que en vez de poner h1 he puesto h2 para hacer un poco mas pequeño el texto y sin alineación, es decir a la izquierda. Si vosotros escribis este codigo, es normal que algunas palabras se vean en rojo , eso quiere decir que es un atributo, que son los que dan caracteristicas a los textos. Por ejemplo, si quieres poner un color a algo tendría que salir algo asi: <font color >

Tipos de texto

HTML5 nos abre un abanico de variabilidad muy grande. Se puede cambiar desde El tipo de texto palabras en negrita o subrayadas, cursivas y tachadas. Tambien podemos hacer enumeraciones o listas no enumeradas, que las explicare mas adelante.

Para hacer una lista no enumerada, tenemos que poner <ul>, con eso ya habremos definido que queramos una lista no ordenada y luego para ir añadiendo elementos a la lista tenemos que poner <li>. Para los siguientes definiciones estarán incluidas en una lista no ordenada.

  • Cambio de fondo:
    • Para cambiar el fondo de nuestra página, tendremos que poner la siguiente linea: <body bgcolor="color del fondo">

  • Palabras en negrita:
    • La linea de codigo es la siguiente: <b> texto en negrita </b> Con eso solo puedes poner todas las palabras que quieras en negrita

  • Palabras subrayadas:
    • La estructura es la misma que en la de las palabras en negrita, pero necesitas poner <u> para ello. Así es como subrayar todas las palabras que quieras

  • Palabras cursivas y tachadas:
    • Con <i> se pueden poner palabras en cursiva y con <s> palabras tachadas

  • Combinaciones:
    • Se puede combinar los diferentes tipos para ello, como por ejemplo esta palabra. El código utilizado para esta palabra ha sido el siguiente: <b><u><s><i>esta</i></s></u></b> = esta (el rojo no pertenece en la linea de codigo descrita)

Como podeis ver, es posible hacer una lista no enumerdada con varias sub-listas. Lo único que hay que hacer es abrir una nueva lista no enumerada (o numerada si lo requiere) dentro de una de los puntos de la propia lista. RECUERDA cerrar las listas con </ul> (en el caso de las listas no enumeradas o con </ol>(para las listas numeradas)

Funciones extra

  1. Enlaces a sitios web:
    Podemos insertar un enlace a stios web utilizando <a href=dominio de destino> para abrir e indicar el destino y </a> para cerrar. Entre esas dos etiquetas puedes escribir el texto que quieres que se muestre. Por ejemplo pincha aqui para ir a la página de inicio de EducaJCYL. Te redigirá en la misma pestaña, pero si ponemos el atributo target="_blank", se abrirá en una nueva pestaña. Prueba con este enlace y mira la diferencia.

  2. Cambio de fondo:
    Podemos cambiar el fondo por completo de nuestra entrada(Blogger no admite esta función de HTML, no obstante al final de esta entrada habra una imagen adjunta del cambio de fondo) simplemente poniendo: <body bgcolor=color de fondo>

  3. Imagenes y videos:
    Es posible la inserción de imagenes y videos en HTML (pero otra vez, no en blogger) En Blogger la inserción de imagenes y videos en HTML no es posible debido a que en una misma carpeta la cual contenga los archivos de las fotos/videos y el archivo en HTML deben estar juntas y Blogger no es un sistema de almacenamiento, además de que tiene una manera mas fácil a través de la propia aplicación, por lo que no explicaré mas sobre estoquería meter alguna función extra más

Opinión personal

Después de desarrollar toda esta entrada en HTML, al principio con todos los atributos y demás cosas pensaba que el código me iba a haber fallado miles de veces pero me ha costado poco acostumbrarme a este tipo de código. Es bastante intuitivo con sus colores para saber si es un atributo, hay errores, etc. Me ha gustado mucho esta actividad y ahora sé programar en HTML.

Despedida

Ya toca despedirse de esta entrada En verdad ya era hora despues de todo lo que tenía que escribir Espero que ahora vosotros tambien lo básico de HTML para que vosotros mismos empeceis a programar vuestras entradas en HTML, los comentarios están activados asi que sois libres de comentar dudas o lo que querais. ¡Hasta la próxima!




Comentarios

Entradas populares