SlideShare una empresa de Scribd logo
1 de 13
Diversas Características
      Generales
         HTML
Atributos
• Los atributos proporcionan información adicional
  acerca de los elementos HTML, siempre se
  especifican en la etiqueta de inicio y vienen en pares
  nombre / valor como: nombre = "valor«
• Un ejemplo: Los vínculos HTML se definen con la
  etiqueta <a>. La dirección del enlace se especifica en
  el atributo href:
<a href="http://www.w3schools.com">Enlace</a
• Los valores siempre iran entre comillas, si el atributo
  en si contiene comillas se usaran las simples.
ATRIBUTOS DE LA ETIQUETA BODY: BGCOLOR, TEXT,
                  BACKGROUND.
• BGCOLOR
Parámetro usado para especificar el color de fondo de la
página. El color se define en base hexadecimal de la siguiente
forma (#rrggbb) en el orden rojo, verde, azul (Red, Green,
Blue).
Sintaxis: <body bgcolor=”#0000FF”> o <body bgcolor=”blue”>
• TEXT
Parámetro usado para definir el color del texto. Su formato es
el mismo que el de bgcolor. Si no se pone nada es negro.
Sintaxis: <body text=”#0000FF”> o <body text=”blue”>
• BACKGROUND
Parámetro usado para especificar la ruta y nombre de archivo
(URL) de la imagen (formato GIF, JPG o PNG habitualmente)
que será usada como fondo del documento
Sintaxis tipo: <body background="ruta/archivo.gif">
• Ejemplo
• Suponer la siguiente estructura de directorios y archivos:
· HTML/pagina1.html: el archivo denominado pagina1.html está dentro
de la carpeta HTML.
· HTML/gifs/fondo.gif
· HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html
está dentro de una subcarpeta denominada ejemplos, que se
encuentra dentro de la carpeta HTML.

• Que escribir si desde la página pagina1.html se quiere poner como
  fondo la imagen fondo.gif, que se encuentra en el directorio gifs ?
    – <body background="gifs/fondo.gif">
• Si desde la página pagina2.html se quiere poner como fondo la
  imagen fondo.gif, que se encuentra en el directorio gifs, que se
  escribiria?
    – <body background="../gifs/fondo.gif">
• Poner atencion en ../ pues es lo que indica al navegador que debe
  acudir al directorio superior. Si se quisiéra subir dos niveles, por
  ejemplo si tenemos la página en
  HTML/ejemplos/miweb/pagina3.html
• Se escribiría “../../gifs/fondo.gif”
MÁRGENES: LEFTMARGIN, TOPMARGIN,
     RIGHTMARGIN Y BOTTOMMARGIN
• Ya se sabe de qué color será el fondo y el texto, pero también se puede
  predefinir los márgenes de la página web para que quede mucho mejor.
• Porque no se desea que el texto se quede muy pegado los márgenes igual que
  al escribir en una hoja no se escribe pegado al borde sino que se deja un
  margen.
• Para especificar los márgenes se utiliza el parámetro margin, con su
  correspondiente indicación delante.
• Así se tiene "leftmargin" para el margen izquierdo, "topmargin" para el margen
  de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para
  el margen de abajo.
• Los márgenes se suelen medir en pixeles, término inglés que en castellano
  equivaldría a “puntos” (tener en cuenta que una pantalla tiene unas
  dimensiones en pixeles de ancho y pixeles de alto).
• Por ejemplo, si se quisiera que los márgenes sean de 10 pixeles por todas
  partes se escribira lo siguiente:
• <body leftmargin="10px" topmargin="10px" rightmargin="10px"
  bottommargin="10px"></body>
PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS




• En relación a la alineación de párrafos Como se ve, se ha introducido el uso de
  estilos. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un
  contenedor). En este caso, se dice que el estilo a aplicar al párrafo incluye el
  alineado del texto (atributo text-align) al centro (center).
• Un estilo se puede aplicar de distintas maneras. En este caso se hace de la
  forma más sencilla posible:
• Se escribe style = “característica a aplicar nº1 ; característica a aplicar nº2;
  característica a aplicar nº3;”.
• Por ejemplo: <p style =“text-align: center; font-size: 12px; color:blue;”> Este
  texto estara centrado, tendrá una fuente de 12 pixeles y color azul</p>
FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA,
  TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE.

• Ya se dijo que hay una serie de etiquetas y atributos
  básicos para la creación de páginas webs.
• No se entrara a describir una a una todas las etiquetas
  y atributos de que HTML dispone. Simplemente se
  explicaran las más utilizadas
• En este caso, algunas para dar formato al texto. Hay
  una serie de etiquetas que se escriben en HTML
  envolviendo la palabra o el texto y que transforman
  ese texto en el formato que se le haya querido dar.
• Así se puede ver en el ejemplo 16:
• Como vieron, algunas de las etiquetas de la tabla están obsoletas
  (deprecated en inglés). Estas etiquetas en principio no deberían de ser
  usadas porque dejarán de existir en HTML 5 y los navegadores es posible
  que dejen de reconocerlas en un futuro. Los motivos para incluirlas en
  este curso son:
• - Son etiquetas que han sido muy populares en el pasado y pueden
  encontrar muchas páginas webs que hacen uso de ellas.
• - Son etiquetas reconocidas por prácticamente todos los navegadores
  actuales.
• - Son una buena forma de introducirse en los lenguajes propios de
  desarrollos webs desde el punto de vista didáctico. Una vez se entiendan
  estos conceptos, es más fácil abordar aspectos más avanzados como las
  hojas de estilo.
• Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y
  cerrarse, conteniendo el texto o la palabra que se quiera transformar en
  su interior.
• Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>.
• Se pueden combinar diferentes formatos, o sea, diferentes etiquetas.
• Por ejemplo, si se quiere que un texto esté en negrita y en cursiva se
  escribiría esto: <b><i>Este texto aparecerá escrito en negrita y en
  cursiva</i></b>.
• Cuando sehagan combinaciones, tener cuidado a la hora de cerrar las
  etiquetas. Se debe cerrar las etiquetas por orden, de la más interior a la
  más exterior.
LA ETIQUETA <PRE>

• La etiqueta <pre> se puede utilizar para que el
  navegador interprete el texto escrito tal y
  como está.
• Veamos dos ejemplo con el ejemplo 18 y sin
  esta etiqueta el ejemplo 17
LÍNEAS SEPARADORAS. SEPARADORES EN HTML:
              ETIQUETA <HR>
• Para separar un texto de otro o un párrafo de otro se puede utilizar una
  línea horizontal de un tamaño o un grosor determinado por el usuario.
  Este separador se escribe con la etiqueta <hr>. Esta no necesita ser
  cerrada.
• La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto
  dependiendo de una serie de atributos que se pueden predefinir. Por
  ejemplo, se puede definir su grosor mediante el parámetro size.
• Para escribir este parámetro en la etiqueta se escribira size=”x”, siendo “x”
  el número del grosor de la franja en pixeles (también se puede indicar en
  porcentajes).
• El ejemplo 19, muestra 2 franjas con diferentes grosores, siendo la
  primera 8 y la segunda 2.
• Otro parámetro que se puede definir es la anchura de la franja mediante
  el parámetro width .
• El parámetro será “width=x %”, siendo “x” el tanto por cien que se quiere
  que ocupe la franja.
• En el caso de no escribir nada (como en los ejemplos anteriores), la franja
  será predeterminada del 100%. Si se quiere que ocupe más o menos, se
  tendra que escribirlo usando el parámetro width.
COMENTARIOS EN HTML
• Se llama comentario en el ámbito de HTML a las notas que el autor o
  autores ponen en el código para facilitar su entendimiento. Estos
  comentarios no son mostrados por el navegador y, por tanto, sólo serán
  visibles al leer el código HTML de la página web por una persona.
• En general es recomendable ir insertando comentarios al crear una página
  para marcar determinadas partes y así encontrarlas más fácilmente.
  Algunos usos que suelen darse a los comentarios son:
• · Notas para recordar detalles del código la próxima vez que se vaya a
  cambiar, como por ejemplo para indicar por qué se ha usado una etiqueta
  y no otra. Este tipo de comentarios son muy usados cuando las páginas
  son complejas.
• · Apuntar que queda por hacer en una determinada sección o como es
  conveniente cambiarla. O bien para indicar el comienzo o fin de una
  determinada sección de la página.
• · Para identificar fácilmente partes importantes del código o aquellas que
  cambian más a menudo.
• · Usos particulares de cada webmaster. De hecho los comentarios pueden
  usarse para cualquier cosa y cada programador de páginas web tiene su
  propio modo de usarlos
CREACIÓN DE COMENTARIOS EN HTML
• Para crear un comentario no se usa una etiqueta, aunque es una estructura
  parecida. En primer lugar se pone una cadena que indica el comienzo del
  comentario: <!--, esto es, el símbolo menor que, seguido del símbolo fin de
  exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto
  que le siga será parte de comentario, que terminará cuando insertemos la
  cadena de fin: --> , dos guiones y el símbolo mayor que. La estructura de un
  comentario es por tanto:
• <!-- Esto es un comentario -->
• Suele ser recomendable dejar un espacio entre ambas cadenas y el texto
  anterior y posterior, tal y como se acaba de mostrar.
• Algunos ejemplos prácticos de comentarios serian:
• <!-- Aquí comienza el cuerpo de la página -->
• <!-- Cambiar este párrafo para que se entienda mejor -->
• <!-- Debería añadir más enlaces en esta página -->
• El navegador ignora los contenidos del interior de los comentarios. Al mostrar
  la página los navegadores actúan como si los comentarios no existieran.
• Para terminar sólo queda hacer una aclaración. Tal y como se ha dicho todo el
  texto entre los símbolos "<!-- " y " -->" es un comentario sea lo que sea y
  tenga el número de líneas que tenga. Sin embargo el estándar de HTML
  recomienda que los comentarios se limiten a una sola línea, y si debe ocupar
  varias necesariamente se aconseja incluir los símbolos de comentario en cada
  una de ellas.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Clase 2
Clase 2Clase 2
Clase 2
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Nociones Básicas del Html
Nociones Básicas del HtmlNociones Básicas del Html
Nociones Básicas del Html
 
Html
HtmlHtml
Html
 
Conceptos básicos y etiquetas
Conceptos básicos y etiquetasConceptos básicos y etiquetas
Conceptos básicos y etiquetas
 
Html Bas
Html BasHtml Bas
Html Bas
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
Definición de html
Definición de htmlDefinición de html
Definición de html
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
 

Destacado (15)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Presentacion primaria a prescolares 2009 vf com-2
Presentacion primaria a prescolares   2009 vf com-2Presentacion primaria a prescolares   2009 vf com-2
Presentacion primaria a prescolares 2009 vf com-2
 
Colegio nacional nicolas esguerra
Colegio  nacional   nicolas  esguerraColegio  nacional   nicolas  esguerra
Colegio nacional nicolas esguerra
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 
etiquetas
etiquetasetiquetas
etiquetas
 
Diazsport (1)2
Diazsport (1)2Diazsport (1)2
Diazsport (1)2
 
Internet
InternetInternet
Internet
 
etiquetas HTML
etiquetas HTMLetiquetas HTML
etiquetas HTML
 
Producto 4 etiquetas html
Producto 4 etiquetas htmlProducto 4 etiquetas html
Producto 4 etiquetas html
 
Etiqueta body parametros
Etiqueta body parametrosEtiqueta body parametros
Etiqueta body parametros
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
Html
HtmlHtml
Html
 
Estructura de una pagina web
Estructura de una pagina webEstructura de una pagina web
Estructura de una pagina web
 
SlidShare
SlidShareSlidShare
SlidShare
 
biografia html
biografia htmlbiografia html
biografia html
 

Similar a Diversas características generales

Similar a Diversas características generales (20)

Códigos HTML Sede magdalena ortega de Nariño
Códigos HTML Sede magdalena ortega  de NariñoCódigos HTML Sede magdalena ortega  de Nariño
Códigos HTML Sede magdalena ortega de Nariño
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
Unidad1AppsMoviles.pptx
Unidad1AppsMoviles.pptxUnidad1AppsMoviles.pptx
Unidad1AppsMoviles.pptx
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
Texto del html
Texto del htmlTexto del html
Texto del html
 
Karina
KarinaKarina
Karina
 
Tema 2
Tema 2Tema 2
Tema 2
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xml
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
Presentación
PresentaciónPresentación
Presentación
 
Manual html
Manual htmlManual html
Manual html
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Identificacion
IdentificacionIdentificacion
Identificacion
 

Último

2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuaDANNYISAACCARVAJALGA
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 

Último (20)

2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahua
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 

Diversas características generales

  • 1. Diversas Características Generales HTML
  • 2. Atributos • Los atributos proporcionan información adicional acerca de los elementos HTML, siempre se especifican en la etiqueta de inicio y vienen en pares nombre / valor como: nombre = "valor« • Un ejemplo: Los vínculos HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributo href: <a href="http://www.w3schools.com">Enlace</a • Los valores siempre iran entre comillas, si el atributo en si contiene comillas se usaran las simples.
  • 3. ATRIBUTOS DE LA ETIQUETA BODY: BGCOLOR, TEXT, BACKGROUND. • BGCOLOR Parámetro usado para especificar el color de fondo de la página. El color se define en base hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green, Blue). Sintaxis: <body bgcolor=”#0000FF”> o <body bgcolor=”blue”> • TEXT Parámetro usado para definir el color del texto. Su formato es el mismo que el de bgcolor. Si no se pone nada es negro. Sintaxis: <body text=”#0000FF”> o <body text=”blue”> • BACKGROUND Parámetro usado para especificar la ruta y nombre de archivo (URL) de la imagen (formato GIF, JPG o PNG habitualmente) que será usada como fondo del documento Sintaxis tipo: <body background="ruta/archivo.gif">
  • 4. • Ejemplo • Suponer la siguiente estructura de directorios y archivos: · HTML/pagina1.html: el archivo denominado pagina1.html está dentro de la carpeta HTML. · HTML/gifs/fondo.gif · HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html está dentro de una subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta HTML. • Que escribir si desde la página pagina1.html se quiere poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs ? – <body background="gifs/fondo.gif"> • Si desde la página pagina2.html se quiere poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs, que se escribiria? – <body background="../gifs/fondo.gif"> • Poner atencion en ../ pues es lo que indica al navegador que debe acudir al directorio superior. Si se quisiéra subir dos niveles, por ejemplo si tenemos la página en HTML/ejemplos/miweb/pagina3.html • Se escribiría “../../gifs/fondo.gif”
  • 5. MÁRGENES: LEFTMARGIN, TOPMARGIN, RIGHTMARGIN Y BOTTOMMARGIN • Ya se sabe de qué color será el fondo y el texto, pero también se puede predefinir los márgenes de la página web para que quede mucho mejor. • Porque no se desea que el texto se quede muy pegado los márgenes igual que al escribir en una hoja no se escribe pegado al borde sino que se deja un margen. • Para especificar los márgenes se utiliza el parámetro margin, con su correspondiente indicación delante. • Así se tiene "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo. • Los márgenes se suelen medir en pixeles, término inglés que en castellano equivaldría a “puntos” (tener en cuenta que una pantalla tiene unas dimensiones en pixeles de ancho y pixeles de alto). • Por ejemplo, si se quisiera que los márgenes sean de 10 pixeles por todas partes se escribira lo siguiente: • <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>
  • 6. PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS • En relación a la alineación de párrafos Como se ve, se ha introducido el uso de estilos. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un contenedor). En este caso, se dice que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center). • Un estilo se puede aplicar de distintas maneras. En este caso se hace de la forma más sencilla posible: • Se escribe style = “característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº3;”. • Por ejemplo: <p style =“text-align: center; font-size: 12px; color:blue;”> Este texto estara centrado, tendrá una fuente de 12 pixeles y color azul</p>
  • 7. FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE. • Ya se dijo que hay una serie de etiquetas y atributos básicos para la creación de páginas webs. • No se entrara a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente se explicaran las más utilizadas • En este caso, algunas para dar formato al texto. Hay una serie de etiquetas que se escriben en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que se le haya querido dar. • Así se puede ver en el ejemplo 16:
  • 8.
  • 9. • Como vieron, algunas de las etiquetas de la tabla están obsoletas (deprecated en inglés). Estas etiquetas en principio no deberían de ser usadas porque dejarán de existir en HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son: • - Son etiquetas que han sido muy populares en el pasado y pueden encontrar muchas páginas webs que hacen uso de ellas. • - Son etiquetas reconocidas por prácticamente todos los navegadores actuales. • - Son una buena forma de introducirse en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo. • Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que se quiera transformar en su interior. • Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>. • Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. • Por ejemplo, si se quiere que un texto esté en negrita y en cursiva se escribiría esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>. • Cuando sehagan combinaciones, tener cuidado a la hora de cerrar las etiquetas. Se debe cerrar las etiquetas por orden, de la más interior a la más exterior.
  • 10. LA ETIQUETA <PRE> • La etiqueta <pre> se puede utilizar para que el navegador interprete el texto escrito tal y como está. • Veamos dos ejemplo con el ejemplo 18 y sin esta etiqueta el ejemplo 17
  • 11. LÍNEAS SEPARADORAS. SEPARADORES EN HTML: ETIQUETA <HR> • Para separar un texto de otro o un párrafo de otro se puede utilizar una línea horizontal de un tamaño o un grosor determinado por el usuario. Este separador se escribe con la etiqueta <hr>. Esta no necesita ser cerrada. • La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de atributos que se pueden predefinir. Por ejemplo, se puede definir su grosor mediante el parámetro size. • Para escribir este parámetro en la etiqueta se escribira size=”x”, siendo “x” el número del grosor de la franja en pixeles (también se puede indicar en porcentajes). • El ejemplo 19, muestra 2 franjas con diferentes grosores, siendo la primera 8 y la segunda 2. • Otro parámetro que se puede definir es la anchura de la franja mediante el parámetro width . • El parámetro será “width=x %”, siendo “x” el tanto por cien que se quiere que ocupe la franja. • En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si se quiere que ocupe más o menos, se tendra que escribirlo usando el parámetro width.
  • 12. COMENTARIOS EN HTML • Se llama comentario en el ámbito de HTML a las notas que el autor o autores ponen en el código para facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y, por tanto, sólo serán visibles al leer el código HTML de la página web por una persona. • En general es recomendable ir insertando comentarios al crear una página para marcar determinadas partes y así encontrarlas más fácilmente. Algunos usos que suelen darse a los comentarios son: • · Notas para recordar detalles del código la próxima vez que se vaya a cambiar, como por ejemplo para indicar por qué se ha usado una etiqueta y no otra. Este tipo de comentarios son muy usados cuando las páginas son complejas. • · Apuntar que queda por hacer en una determinada sección o como es conveniente cambiarla. O bien para indicar el comienzo o fin de una determinada sección de la página. • · Para identificar fácilmente partes importantes del código o aquellas que cambian más a menudo. • · Usos particulares de cada webmaster. De hecho los comentarios pueden usarse para cualquier cosa y cada programador de páginas web tiene su propio modo de usarlos
  • 13. CREACIÓN DE COMENTARIOS EN HTML • Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar se pone una cadena que indica el comienzo del comentario: <!--, esto es, el símbolo menor que, seguido del símbolo fin de exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto que le siga será parte de comentario, que terminará cuando insertemos la cadena de fin: --> , dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto: • <!-- Esto es un comentario --> • Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como se acaba de mostrar. • Algunos ejemplos prácticos de comentarios serian: • <!-- Aquí comienza el cuerpo de la página --> • <!-- Cambiar este párrafo para que se entienda mejor --> • <!-- Debería añadir más enlaces en esta página --> • El navegador ignora los contenidos del interior de los comentarios. Al mostrar la página los navegadores actúan como si los comentarios no existieran. • Para terminar sólo queda hacer una aclaración. Tal y como se ha dicho todo el texto entre los símbolos "<!-- " y " -->" es un comentario sea lo que sea y tenga el número de líneas que tenga. Sin embargo el estándar de HTML recomienda que los comentarios se limiten a una sola línea, y si debe ocupar varias necesariamente se aconseja incluir los símbolos de comentario en cada una de ellas.