Diálogo Presentación TIC

Presentación TIC. Edición de páginas web con HTML.
1. Introducción.
De niéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las que
se accede mediante internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la
mayoría de páginas web.
Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se emplean
generan páginas escritas en HTML y los navegadores que utilizamos (por ejemplo Google, Opera o
Mozilla Firefox) muestran las páginas web después de leer e interpretar su contenido HTML.
El lenguaje HTML es un estándar reconocido en todo el mundo cuyas normas de ne un organismo sin
ánimo de lucro conocido como W3C. Como se trata de un estándar reconocido por todas las empresas
relacionadas con el mundo de internet, una misma página escrita en HTML se visualizará de forma muy
similar en cualquier navegador bajo distintos sistemas operativos.
2. Estructura básica de un documento HTML.

Para qué sirve conocer la estructura HTML?
La estructura HTML hace uso de etiquetas y atributos prede nidos para indicarle al navegador cómo
mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe
con gurar. Básicamente, su función es describir la estructura general de una página y organizar la forma
en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto
signi ca que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar este
lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos.
todas las etiquetas tienen al inicio y al nal los signos < y >, que son la apertura y el cierre de cada
elemento para que el lenguaje HTML pueda funcionar. Existen dos tipos
• Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre < >.
• Etiquetas vacías. Se re ere a las etiquetas que no requieren cierre.
ETIQUETAS:
• <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).
• <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el
que contendrá el resto de las etiquetas de atributos de la página web.
• <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran
al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.
• <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos
desde textos hasta enlaces.
Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.
• <p>: sirve para indicar la apertura y cierre de un párrafo.
• <div>: signi ca «división» y funciona para crear secciones o agrupar contenidos.
• <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
• <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.
• <a>: permite agregar un vínculo o enlace.
• <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para
insertar una imagen, audio, video o incrustar un documento HTML.
• <form>: funciona para insertar un formulario.
• <label>: representa la etiqueta para un elemento en una interfaz de usuario.
• <input>: crea controles interactivos para formularios, con el n de recibir datos del usuario. ACT.
fi
fi
fi
fi
fi
fi
fi
fi
fi
2.1. Comentarios.
En todos los lenguajes de programación existe la posibilidad de incluir comentarios dentro del código,
los comentarios son muy útiles para los programadores, para comprender un programa que no han
hecho ellos o para explicar ciertas partes del código un documento .
En HTML, los comentarios pueden escribirse entre los caracteres "".
Por ejemplo: 
El intérprete de código ignora todas los comentarios.
3. Formato de texto
Los elementos de formato de texto se utilizan para cambiar la apariencia de un texto, ya sea para resaltar
o hacer énfasis en alguna palabra.
Entre los elementos HTML más comunes que componen una página web se encuentran los elementos de
texto, que son todos los títulos, encabezados, subtítulos y párrafos.
El elemento párrafo
La forma más básica de añadir un texto a una página web es usando la etiqueta <p>. Aunque en las
páginas anteriores te contamos sobre esta etiqueta, recordemos un poco: el elemento párrafo es uno de
más usados en HTML para crear y construir los sitios web que visitas a diario. <p>Esto es un párrafo</p>
Cuando los navegadores interpretan este elemento añaden un espacio por encima y por debajo para
mantener cada párrafo independiente de los demás, tal como los puedes ver en un libro impreso o una
revista.
Encabezados
Los elementos de encabezado también se utilizan para mostrar un texto en la pantalla, solo que de una
forma un poco diferente, porque los resalta. Generalmente, se utilizan para dividir los textos en
secciones. <h1>Esto es un elemento de encabezado</h1>
Por ejemplo, puedes usar este elemento para mostrar el título de un ensayo que estés escribiendo, o el
nombre de un capítulo de un libro; y para el texto largo, puedes usar el elemento párrafo.
Los elementos de encabezado tienen 6 niveles: van desde el <h1> al <h6>. El <h1> se considera el más
importante y el <h6> el menos importante.
Si pones un <h1> en tu página web, el navegador entenderá que esa sección es una de las principales y
la mostrará en un tamaño más grande que los textos que tengan el elemento <h2>. A su vez, los textos
con <h2> serán más grandes que aquellos acompañados del elemento <h3>, y así sucesivamente.
<h1>Este es el más grande</h1>
<h2>Este es un poco más pequeño</h2>
<h3>Este es aún más pequeño</h3>
<h4>Cada vez son más pequeños</h4>
<h5>Este ni siquiera es tan grande</h5>
<h6>Bastante pequeño ahora</h6>
Elementos de formato de texto
Los elementos de formato de texto se utilizan para cambiar la apariencia de un texto, ya sea para
resaltar o hacer énfasis en alguna palabra. Además, suelen encontrarse dentro de otros elementos de
texto, como los párrafos o encabezados.
<p>Estas palabras no están en negrita, pero <b>estas dos</b> sí.</p>
3. 1. Formato de caracteres.
Las siguientes etiquetas modi can los caracteres que hay entre ellas para mostrarlos en negrita, cursiva,
subrayado, subíndice o superíndice:
<b>...</b> Negrita
<i>...</i> Cursiva
<u>...</u> Subrayado
<sub>...</sub> Subíndice
<sup>...</sup> Superíndice
3.2. Alineación de texto.

Los elementos <p> y <h> que nos permiten escribir párrafos y títulos respectivamente, se les pueden
aplicar unos atributos para modi car el aspecto del texto:
<p align="right"> ... </p> alinea el texto a la derecha
<p align="center"> ... </p> centra el texto
<p align="left"> ... </p> alinea el texto a la izquierda
Estos códigos son aplicables al elemento <h>, como hemos dicho anteriormente.
Tipo de fuente, tamaño y color de los caracteres:
Mediante el elemento <font> ... </font>, se pueden especi car el tipo de fuente, el tamaño y el color de
los caracteres:
Como tipo de fuente, podemos elegir "arial", "courier", "comic sans ms", "times new roman" , etc. (Son las
fuentes instaladas en el ordenador).
ACT los colores se mostrarán en la actividad.
3.3. Alineación de imágenes.

Encontrar el código de HTML para la imagen que desees alinear.
Editar el código “img” para agregarle la propiedad “ oat” ( otante) correcta.
• Si necesitas que la imagen se posicione a la izquierda, agrega “style=' oat:left’ ” al código, como en
“img style=' oat:left’ ” entre los símbolos “<>”.
• Si necesitas que la imagen se posicione a la derecha, agrega “style=' oat:right’ ” al código, como en
“img style=' oat:right’ ” entre los símbolos “<>”.
• Si necesitas que la imagen se posicione en el centro, el código es un poco más complicado. No
existe la propiedad “ oat:center”, entonces tendrás que agregar "style='align:center;text-
align:center' " al código, como en "img style='align:center;text-align:center'", entre los simbolos
“<>”.
HACER JUEGO PARA REPASAR CON PREMIO.

fl
fl
fl
fi
fi
fl
fi
fl
fl
fl

Diálogo Presentación TIC

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diálogo Presentación TIC

Cargado por

Copyright:

Formatos disponibles

Presentación TIC. Edición de páginas web con HTML.

2. Estructura básica de un documento HTML.

3.2. Alineación de texto.

3.3. Alineación de imágenes.

HACER JUEGO PARA REPASAR CON PREMIO.

También podría gustarte