HTM L (Hyper Text Markup Language). ¿Qué es HTML? Es el lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas,

Presentación del tema: "HTM L (Hyper Text Markup Language). ¿Qué es HTML? Es el lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas,"— Transcripción de la presentación:

1 HTM L (Hyper Text Markup Language)

2 ¿Qué es HTML? Es el lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. (con el que se escriben las páginas web)

3 ¿Que son las Etiquetas? Una etiqueta es un texto incluido entre los símbolos ”menor que ”. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

4 Etiquetas de inicio o comienzo de elementos La etiqueta de comienzo está delimitada por los caracteres. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades.. Su sintaxis es: Ejemplo:

5 Etiquetas de final o cierre de elementos La etiqueta de final está delimitada por los caracteres. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: Ejemplo:

6 Estructura básica de una pagina web:......

7 Identificador del tipo de documento Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas y. Entre las etiquetas y estará comprendido el resto del código HTML de la página. Por ejemplo:...

8 Cabecera de la página Está formada por las etiquetas y. La etiqueta va justo debajo de la etiqueta. Por ejemplo: …...

9 Cuerpo del documento Esta formada por las etiquetas y, que van justo debajo de la cabecera. Por ejemplo: …...

10 Continuación …

11 Insertar texto

12 Para que un texto se muestre en nuestra página web simplemente lo introduciremos en la etiqueta Por ejemplo: Lo que quieras que contenga…

13 Texto pre-formateado Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas y. Por ejemplo: Hola, esto un texto pre-formateado

14 Para insertar un párrafo Escribiremos el texto entre las etiquetas y Por ejemplo: Esto es un párrafo.

15 En la etiqueta podemos usar el atributo align para configurar cómo alinear el texto del párrafo. Por ejemplo: El texto de este párrafo está alineado a la izquierda (por defecto, si no se indica nada). El texto de este párrafo está alineado al centro. El texto de este párrafo está alineado a la derecha.

16 Para insertar un salto de línea Usando la etiqueta (observa que consta de una sola etiqueta, y se cierra con una '/' al final). Por ejemplo: Esta es una línea, y a continuación insertamos un salto de línea.

17 Editar texto

18 Con el tributo text= de la etiqueta podemos definir el color de letra para todo el texto. Por ejemplo:

19 Etiqueta y Atributos: se pones después de la etiqueta: face: nombre del tipo de letra a usar para mostrar el texto. size: tamaño de la letra, especificado entre un rango de '1' a '6', siendo '3' el valor por defecto

20 Por ejemplo: practica cambio de tamaño y letra

21 Texto en negritas Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La primera es la etiqueta y la otra es la etiqueta. Por ejemplo: Esta palabra la vamos a poner en negrita y esta otra también Quedando: Esta palabra la vamos a poner en negrita y esta otra también

22 Texto en cursiva Para que nuestro texto se muestre en cursiva se tienen dos etiquetas La primera es: y la segunda: (ambas con su respectiva etiqueta de cierra) Por ejemplo: Esta palabra la vamos a poner en cursiva y esta otra también Quedara: Esta palabra la vamos a poner en cursiva y esta otra también

23 Texto subrayado Para que la palabra o el texto quedara subrayado se usa la etiqueta y con su correspondiente etiqueta de cierre. Po ejemplo: Así subrayaríamos una frase importante Quedara: Así subrayaríamos una frase importante

24 Texto grande Para que el texto se vea grande utilizaremos las etiquetas y Si queremos un texto aun mas grande utilizaremos dos veces las etiquetas y Por ejemplo: Esta palabra se va escribir más grande y ésta más grande aún. Quedara: Esta palabra se va a escribir más grande y ésta más grande aún.

25 Texto pequeño Para que el texto se vea pequeño utilizaremos las etiquetas y Si queremos un texto aun mas pequeño utilizaremos dos veces las etiquetas y Por ejemplo: Esta palabra se va a escribir pequeñita y esta aun mas pequeña Quedara: Esta palabra se va a escribir pequeñita y esta aun mas pequeña

26 Texto superíndices Para un superíndice se escribe la etiqueta y Por ejemplo: Podemos escribir cualquier expresión con símbolos matemáticos como números elevados a potencias 7 3. Quedara: Podemos escribir cualquier expresión con símbolos matemáticos como esta números elevados a potencias 7 3

27 Texto subíndice Para escribir un subíndice ponemos la etiqueta y Por ejemplo: Podemos escribir cualquier expresión con símbolos matemáticos como esta: H 2 O Quedara: Podemos escribir cualquier expresión con símbolos matemáticos como esta: H 2 O

28 Texto tachado Existen tres etiquetas que se usan para conseguir que un texto quede tachado. Hablamos de las etiquetas, y (todas con su respectiva etiqueta de cierre). Todas ellas ofrecen el mismo resultado. Por ejemplo: Puedo proceder a tachar la palabra así, así o así Quedara: Puedo procesar a tachar la palabra así, así o así

29 Insertar imágenes

30 Para insertar una imagen dentro de una página debemos utilizar la etiqueta, la misma no tiene una marca de finalización. Los formatos clásicos son los archivos con extensiones gif, jpg y png. Su sintaxis es: (Si la imagen se encuentra en la misma carpeta donde se localiza la página)

31 o En la propiedad src indicamos el nombre del archivo que contiene la imagen o En la propiedad alt disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (El texto debe describir el contenido de la imagen.)

32 Si la imagen se encuentra en una subcarpeta, su sintaxis será : Antecedemos al nombre de la imagen el nombre de la carpeta y la barra /.

33 Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML su sintaxis será: Le antecedemos.. y la barra / al nombre de la imagen

34 Si queremos acceder a una imagen que se encuentra en una carpeta llamada imágenes pero que está al mismo nivel, su sintaxis será: Primero le indicamos que subimos al directorio padre mediante los dos puntos.. y seguidamente indicamos el nombre de la carpeta y la barra /.

35 Como poner color

36 Para insertar texto puede ser de dos maneras utilizando el código hexadecimal (consiste en 6 cifras/letras agrupadas de dos en dos), o bien poniendo el nombre del color (en ingles) de dicho numero

37 Poner color de fondo Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta con bgcolor=“nombre/o código” (bg de background ) pues afecta a todo el documento. Por ejemplo: o bien

38 Cambiar el color del texto Para cambiar el color del texto empleamos la etiqueta con su atributo color. Por ejemplo: o bien

39 ¡Gracias por su atención!

40 Practica Hacer una pagina web con los códigos expuestos anteriormente.