Informatica Fabian Ladino

KOMPOZER,FRONTPAGE Y HTML
FABIAN YESID LADINO VILLABON
9-2
ING LUZ ANDREA HERNANDEZ BARBOSA
COLEGIO COFREM
ACACIAS META
FEBRERO 2018
EXPLORACION
1. Para usted que es una página web

2. Que se puede insertar en una página web
3. Ha creado alguna vez una página web, en que pagina
4. Que es HTML
DESARROLLO
1. Para mí una página web es donde se puede averiguar varios temas u

opciones por internet de lo que te interese
2. Se puede insertar en una página web lo que usted quiera como tareas
juegos o talentos que puedes poseer y publicarlo o mostrarlo en
internet
3. No he creado una página web
4.
CONSULTA
Conteste las siguientes preguntas sobre HTML:
1. Que es y para qué sirve

2. Estructura básica de HTML
3. Escribe las etiquetas de:
A. Formato de texto
B. Imágenes
C. Encabezado
D. Párrafo
E. Saltos de línea
F. Hipervínculos
G. Listas
H. Tablas
4. Pasos para crear formularios, insertar videos, imágenes y sonido de
fondo en HTML
5. Escribe 10 códigos de colores en HTML
DESARROLLO
1. TML es un lenguaje de marcado que se utiliza para el desarrollo de
páginas de Internet. Se trata de la sigla que corresponde
a HyperText Markup Language, es decir, Lenguaje de Marcas de
Hipertexto, que podría ser traducido como Lenguaje de Formato de
Documentos para Hipertexto.
SIRVE:
sirve para definir otros lenguajes que tienen que ver con el formato de
los documentos.
https://definicion.de/html/
2. Todos los documentos Html tienen la estructura que se muesta a
continuación, aunque la etiqueta <body> puede ser sustituida por
<frameset> para un tipo de páginas que dividen la ventana del
navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página

</BODY>
http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm
3. A. Formatos de texto en html: negrita, cursiva, tachado, subrayado,
ETIQUETA USO OBSERVACIONES
… Poner texto en negrita Puede ser sustituido por CSS.
… Poner texto en negrita Puede ser sustituido por CSS.
… Poner texto en cursiva Puede ser sustituido por CSS.
… Poner texto en cursiva Puede ser sustituido por CSS.
… Poner texto subrayado Deprecated. Sustituir por CSS.
… Poner texto más pequeño Puede ser sustituido por CSS.
<big>…</big> Poner texto más grande Puede ser sustituido por CSS.
… Poner texto subíndice Puede ser sustituido por CSS.
… Poner texto superíndice Puede ser sustituido por CSS.
<strike>…</strike> Poner texto como tachado Deprecated. Sustituir por CSS.
<s>…</s> Poner texto como tachado Deprecated. Sustituir por CSS.
<del>…</del> Poner texto como tachado Puede ser sustituido por CSS.
https://www.aprenderaprogramar.com/index.php?option=com_conten
t&view=article&id=480:formatos-de-texto-html-negrita-cursiva-
tachado-subrayado-superindice-subindice-b-y-strong-
cu00713b&catid=69&Itemid=192
B. Para incluir imágenes en el contenido de una página utilizaremos la
etiqueta <img>, que es una etiqueta muy sencilla, que dispone de varios
atributos para modificar como se verá la imagen
https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-
imagenes
C. Puede que queramos empezar nuestra web o nuestro texto con un

encabezado indicando el título del artículo, categoría, etc. Pues bien,
para escribir encabezados disponemos de las etiquetas <h>.
t&view=article&id=489:encabezados-html-h1-a-h6-parrafos-aplicar-
estilos-y-etiqueta-pre-texto-preformateado-ejemplo-
D. Dentro de un párrafo, todos los espacios, tabuladores y saltos de

línea cuentan como un espacio simple. Para colocar textos en bloques,
se utiliza el par de etiquetas y . Esta etiqueta puede incluir
cualquiera de los atributos mencionados anteriormente.
E. Los saltos de línea (saltar de una línea a la siguiente) se crean

usando la etiqueta . La etiqueta <hr> se utiliza para insertar una
línea horizontal.
Link para D y E http://es.ccm.net/contents/244-parrafos-en-html

F HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.
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.
t&view=article&id=508:hipervinculos-links-o-enlaces-html-etiqueta-
a-atributos-href-target-y-title-tipos-de-links-img-
G. Las listas se dividen en dos:

Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su
cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos
dentro de la etiqueta <li> y su cierre.
Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol>
</ol>. Cada punto de la lista se escribe con la misma etiqueta que en
las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán
números y éstos se irán generando automáticamente por orden,
conforme escribamos nuevos puntos.
https://www.hazunaweb.com/curso-de-html/listas/
H. TABLAS EN HTML
Una tabla no es otra cosa más que un medio de organizar datos en

filas y columnas.
HTML, las tablas son construidas utilizando elementos. En particular,

una tabla básica puede ser declarada usando tres elementos, a saber,
table (el contenedor principal), tr (representando a las filas
contenedoras de las celdas) y td (representando a las celdas).
http://www.htmlquick.com/es/tutorials/tables.html
Formularios crear:
Escribe la etiqueta <form> en el archivo HTML.
Determina qué tipo de información necesitas obtener de tus
visitantes
Escribe los datos requeridos que necesitarás obtener de los

visitantes que completen el formulario.
 Crea un cuadro de texto grande para un formulario HTML.
 Crea un cuadro de contraseña con programación sencilla en
HTML.
 Define un campo de entrada (input) en HTML (puedes usarlo
para botones "Enviar" y muchos otros elementos).
 Crea botones de radio con programación sencilla en HTML.
 Crea un botón de reinicio con programación sencilla en HTML.
 Define una lista desplegable con HTML.
 Crea un cuadro de texto grande para un formulario HTML.
Recuerda denotar las áreas de las etiquetas utilizando etiquetas ,
 y </form>.
https://es.wikihow.com/crear-formularios-HTML
Crear insertar video:
Un primer ejemplo muy básico para colocar un video en nuestra página web:
<video src="video.mp4" width="640" height="480"></video>
Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de
640x480, pero se verá como una imagen, ya que no muestra los controles del
video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo
indicando los atributos controls o autoplay.
Otro ejemplos básicos para colocar videos en nuestra página:
<video src="video.webm" poster="presentacion.jpg" controls></video>
<video src="video.mp4" autoplay muted loop></video>
En este caso cargamos un video, pero que no se mostrará porque se ha indicado

que se utilice una imagen de presentación que se mostrará hasta que el usuario
pulse en el botón de reproducir de los controles. En el segundo ejemplo,
tenemos un video que se reproduce automáticamente al cargar la página, en
silencio y en bucle, iniciándose una y otra vez.
https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-video
Sonido de fondo:
La etiqueta html estándar que hemos de incluir es:
<embed src="miarchivo.mp3" hidden="true" loop="true">
« Anterio
Queremos que se repita indefinidamente:
Queremos que se repita solo una vez:
Queremos que se repita tres veces:
–
https://sopadecoditos.wordpress.com/2012/06/08/como-poner-sonido-de-
fondo-en-html/
Imagen:
 Abre un programa de edición de texto, como Notepad o WordPad en

Windows, o si posees una Macintosh, abre el programa TextEdit
 Escribe todo el texto HTML que precederá al vínculo de imagen.
 Escribe la etiqueta inicial del vínculo de imagen (conocido por su nombre
"elemento ancla", por ello la "a"), <a href=".
 Escribe el vínculo que quieres que el usuario vea (incluyendo el http://)
 Sigue escribiendo después de esa porción de texto, con unas comillas (")
y un corchete triangular (>).
 Escribe la imagen, en forma de HTML, que quieres usar. Usa la siguiente
forma: <img src="nombrearchivoimagen.gif">.
 Escribe la etiqueta de cierre del vínculo de imagen, .
 Escribe el texto HTML que quieres después de la imagen, y que
completará el documento.
https://es.wikihow.com/crear-un-v%C3%ADnculo-de-imagen-en-HTML
5.
BLANCO #FFFFFF RGB(255, 255, 255)
PLATA #C0C0C0 RGB(192, 192, 192)
GRIS #808080 RGB(128, 128, 128)
NEGRO #000000 RGB(0, 0, 0)
ROJO #FF0000 RGB(255, 0, 0)
MARRON#800000 RGB(128, 0, 0)
AMARILLO#FFFF00 RGB(255, 255, 0)
AZUL #0000FF RGB(0, 0, 255)
LIMA #00FF00 RGB(0, 255, 0)
VERDE #008000 RGB(0, 128, 0)
https://htmlcolorcodes.com/es/

Informatica Fabian Ladino

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Informatica Fabian Ladino

Uploaded by

Copyright:

Available Formats

KOMPOZER,FRONTPAGE Y HTML

FABIAN YESID LADINO VILLABON

ING LUZ ANDREA HERNANDEZ BARBOSA

1. Para usted que es una página web

1. Para mí una página web es donde se puede averiguar varios temas u

Conteste las siguientes preguntas sobre HTML:

1. Que es y para qué sirve

Aquí iría el contenido de la página

ETIQUETA USO OBSERVACIONES

<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.

<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.

<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.

<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.

<u>…</u> Poner texto subrayado Deprecated. Sustituir por CSS.

<sub>…</sub> Poner texto subíndice Puede ser sustituido por CSS.

<sup>…</sup> Poner texto superíndice Puede ser sustituido por CSS.

<strike>…</strike> Poner texto como tachado Deprecated. Sustituir por CSS.

<s>…</s> Poner texto como tachado Deprecated. Sustituir por CSS.

C. Puede que queramos empezar nuestra web o nuestro texto con un

D. Dentro de un párrafo, todos los espacios, tabuladores y saltos de

E. Los saltos de línea (saltar de una línea a la siguiente) se crean

Link para D y E http://es.ccm.net/contents/244-parrafos-en-html

Los enlaces o hipervínculos, también llamados hipertextos son los

G. Las listas se dividen en dos:

Una tabla no es otra cosa más que un medio de organizar datos en

HTML, las tablas son construidas utilizando elementos. En particular,

Escribe los datos requeridos que necesitarás obtener de los

<video src="video.mp4" width="640" height="480"></video>

Otro ejemplos básicos para colocar videos en nuestra página:

<video src="video.webm" poster="presentacion.jpg" controls></video>

<video src="video.mp4" autoplay muted loop></video>

En este caso cargamos un video, pero que no se mostrará porque se ha indicado

<embed src="miarchivo.mp3" hidden="true" loop="true">

Queremos que se repita solo una vez:

Queremos que se repita tres veces:

 Abre un programa de edición de texto, como Notepad o WordPad en

BLANCO #FFFFFF RGB(255, 255, 255)

PLATA #C0C0C0 RGB(192, 192, 192)

GRIS #808080 RGB(128, 128, 128)

NEGRO #000000 RGB(0, 0, 0)

ROJO #FF0000 RGB(255, 0, 0)

AMARILLO#FFFF00 RGB(255, 255, 0)

AZUL #0000FF RGB(0, 0, 255)

LIMA #00FF00 RGB(0, 255, 0)

VERDE #008000 RGB(0, 128, 0)

You might also like