Anda di halaman 1dari 6

INSTITUCION EDUCATIVA SAN LORENZO DE ABURRA

TECNICA EN SISTEMAS
PROFESORAS BELTSY JANETH VELEZ MURCIA
PRACRICA PARA EL GRADO ONCE
Carolina Salazar Alvarez
MEDELLÍN 2018

GUIA, EDITORES DE TEXTO, BLOC DE NOTAS,


PROGRAMACION EN HTML

Objetivos:
 Conocer de manera básica, qué es lenguaje de programación aplicado a la creación de
páginas para la WWW.
 Crear y dar estructura a documentos en lenguaje HTML.
 Dar formato a páginas web por medio de opciones avanzadas para mejorar la
apariencia del documento.

Valoración: 10% del periodo.

Metodología de Solución: para ser resuelto en clase e individual, puede hacer uso del
internet, el tiempo estimado para resolver los ejercicios es acorde antes de dar inicio a
este, y será retroalimentación para las próximas clases.

Método de presentación: la solución de la guía debe ser salvada en el blog técnico.

INTRODUCCION AL HTML

El HTML (Hipertexto Markup Lenguaje) es el lenguaje utilizado para representar


documentos en la WWW (Word Wide Web). Además de texto normal incluye también,
elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar
a otras partes del documento o a otro sitio cualquiera de Internet.
Otra característica muy importante de este lenguaje es que es portable, es decir, se
pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también
crearlas

Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden
controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo
(negrita, cursiva, etc.), así como también la inclusión de tablas, listas, formularios, la
inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo
atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente
se usan dos, una de inicio y otra final, para conseguir el efecto deseado.

Por ejemplo si escribimos


<FONT COLOR="#ff0000" size="2">El texto se verá rojo y en tamaño un poco menor de
lo normal </Font>

Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal

El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil. Precisamente el
objetivo de esta pequeña guía es servir de introducción y referencia de las características
más usadas del HTML.

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Todos los documentos HTML tienen la estructura que se muestra 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>
</HTML>

Vamos a analizar más detenidamente las distintas secciones que componen la página

CONSULTA N°1
 QUE SON LAS ETIQUETAS
 CUAL ES LA FUNCION QUE REALIZA CADA UNA DE LAS ETIQUETAS DE LA ESTRUCTURA
ANTERIOR. (<HTML><HEAD><TITLE><BODY>)
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele
contener algunos atributos, a saber:

<BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>


<BODY BACKGROUND="ruta/archivo.gif">

CONSULTA N°2
CUAL ES LA FUNCION QUE REALIZA CADA UNA DE LOS ATRIBUTOS DE LA ESTRUCTURA
ANTERIOR DE BODY.

TALLER N°1: MI PRIMERA PAGINA WEB

1. Cree una carpeta en el escritorio y asígnele como nombre “mi primera pagina web”

2. Se debe abrir un editor de Texto que puede ser Bloc de Notas++ o Notepad en este
caso Siga los siguientes pasos para abrir Bloc de Notas:
 De clic en el botón inicio
 De clic en todos los programas
 De clic en accesorios De clic en bloc de notas

3. Abierto el bloc de notas escriba lo siguiente tal y como aparece aquí:


<html>
<head>
<title> Mi primera página
</title> </head>
<body> Aquí van a colocar el texto del documento, o gráficos, enlaces, etc.
</body>
</html>
Crea una carpeta llamada WEB HTML y luego en esta crea una subcarpeta como
PRACTICA N°1, a dentro de esta subcarpeta guarde dos documentos llamados asi: con el
nombre practica1.txt y nuevamente lo guarda como practica1.html.

4. Nuevamente Habrá otro archive en Bloc de notas y realiza: haga los cambios
necesarios del punto 3 para que el código quede de la siguiente manera:
<html>
<head>
<title> Mi primera página
</title> </head>
<body>
<h1>Mucha importancia</h1>
<h2>Menos importancia</h2>
<h3>Mucha menos importancia</h3>
</body>
</html>
En la carpeta llamada WEB HTML y realice otra subcarpeta como PRACTICA N°2, y dentro
de esta subcarpeta guarde dos documentos llamados asi: con el nombre practica2.txt y
nuevamente lo guarda como practica2.html

 Investiga para que se utilizan las etiquetas h1. h2. h3, etc

5. Haga los cambios necesarios para que el código quede de la siguiente manera:

<html>
<head>
<title color=“Yellow” > Mi primera página
</title> </head>
<body> <font color=“blue” size=“4” face=“Comic Sans MS, Arial, MS
SansSerif”> Bienvenidos a mi primera página </font>
</body>
</html>
En la carpeta llamada WEB HTML y realice otra subcarpeta como PRACTICA N°3, y dentro
de esta subcarpeta guarde dos documentos llamados así: con el nombre practica3.txt y
nuevamente lo guarda como practica3.html
Investiga para que se utilizan las etiquetas nuevas que encuentres en la practica 3 y cual
etiqueta se utiliza para escribir el texto en negrilla.

6. Defina la function de las siguientes etiquetas: la etiqueta de tablas, filas, columnas,


imagen, sonido, botón, vincula, texto centrado, texto a la izquierda, ala derecho y
justificado.

PRIMERA PRACTICA GENERAL


Realice una página Web básica del tema que usted desee, en esta página debe de ir todas
las etiquetas que han consultado hasta el momento.
DESARROOLLO

CONSULTA N.1

-Marca o marcas que se dejan en un texto para que luego sean interpretadas,
generalmente para realizar alguna acción sobre el mismo texto marcado.

<HTML>: Limitan el documento e indica que se encuentra escrito en este


lenguaje.

<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van
dentro de ella, destacando la del título:

<TITLE> que será utilizado por los marcadores del navegador e identificará el
contenido de la página. Solo puede haber un título por documento, preferiblemente
corto aunque significativo, y no caben otras tags dentro de él. En head no hay que
colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.

CONSULTAN.2

BODY BGCOLOR (DEPRECATED)

Atributo que fue muy usado en el pasado 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). Es decir, cada color se define con el
carácter # seguido de 6 letras o números. Cada combinación de letras o números
da lugar a distintos colores. También se puede usar el nombre en inglés de los
colores predefinidos en los navegadores (red, blue, Green, etc.).

BODY BACKGROUND (DEPRECATED)

Atributo que fue muy usado en el pasado 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. Esta se verá como mosaico para cubrir toda la
zona de visualización del navegador si es pequeña (lo habitual era poner como
fondo una imagen pequeña y dejar que se repitiera, porque así la página carga
más rápido).

Anda mungkin juga menyukai