HTML.

1 HTML ...
Author: Juan Luis Salas Montero
0 downloads 0 Views

1 HTML

2 ¿QUE ES? Es el lenguaje de programación que utilizan las paginas web. HTML. Traduce Hipertex markup language. Lenguaje simple de marcas de texto

3 ¿QUE NECESITO? Un navegador Un editor de texto(block de notas)Manejo de Etiquetas

4 ¿Cuál es la estructura de una pagina en HTML?

5 ¿Qué requiero para empezar mi página?Abrir bloc de notas Escribir la estructura Guardar como pagina1.html Guardar en carpeta.

6 ¿cómo visualizo mi página?Abro el icono del navegador de mi carpeta Si solo aparece el ícono del bloc de notas doy clic derecho sobre el botón derecho y le doy abrir con y el navegador. Nota: cada que realizo un cambio debo guardar (control v)

7 Actividad. 1 1. Abra el bloc de notas y escriba la estructura.

8 2. Abra una carpeta con el nombre suyo3. Ahora guarde su bloc de notas como página1.html 4. Visualice su pagina en el navegador. 5. Abra su bloc de nuevo y ahora ubíquese en title y coloque mi primera página. Guarde y visualice en el navegador. ¿Qué observas? Vuelva al bloc ahora coloque un titulo en el head. En el body quite el signo > y coloque la etiqueta bgcolor=“blue”> ob serve lo que pase.

9 Actividad 2 Utilizando paleta de colores Practica con paleta de colores. Cambia el color de tu página utilizando los códigos que tengan el color de tu preferencia. Ejemplo:

10 ENCABEZADOS

CABECERA DE NIVEL 1

11 TIPOS DE LETRAS fuente negrita Pone el texto en negrita texto en cursiva subraya aumenta la letra disminuye el tamaño

12 Actividad 3 Escribe un texto y cambia el color del texto aplicando la etiqueta Font color. Coloca la cabecera en el head titulo aplacando las distintas cabeceras. Primer renglón cambia por negrita Segundo renglón cursiva Cuarto renglón subrayada quinto renglón aplica big Sexto renglón small

13 Otras etiqueta Para espacios
entre renglón y renglón< > espacios en letras o palabras. Barra horizontal


Estas etiquetas no llevan cierre

14 Estilos de párrafo

delimita un párrafo

justifica el texto ya sea a la izquierda=left derecha=right centrado=center
coloca el texto en un sito fijo.  Ejemplo:

15

 La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito 
usado como tabulador.

16 COLOCANDO IMAGENES ACTIVIDAD 41. Baja imágenes de internet y guárdalas en la carpeta que estas trabajando html 2. ahora a programar: ubícate en el cuerpo y coloca la siguiente etiqueta: 3. Puedes cambiar el tamaño de la imagen seguido de las etiquetas ancho y alto en ingles así: 4. Usa la etiqueta alt=“comentario” en caso de agregar comentarios a una imagen. Eejemplo: Obra de K. Haring

17 COLOCANDO VIDEO Y SONIDOVIDEO: SONIDO:

18 COLOCANDO ENLACES Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones. Hipervínculo a otra página BLOG Hipervínculo al mismo documento: Texto asociado al marcador

19 VIÑETAS O LISTAS NUMERADASEn la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo. Las listas no ordenadas son aquellas que se encuentran entre las etiquetas

    y
(ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas
  • y
  • .
    Si no le indicamos nada a la etiqueta
  • , la viñeta o marca que indica que se trata de un elemento de una lista se generará de forma automática.