Professional Documents
Culture Documents
TECNICA EN SISTEMAS
MARIANA CARDENAS QUIROZ
PRACRICA PARA EL GRADO ONCE
MEDELLÍN 2018
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.
Metodologia de Solucion: para ser resuelto en clase e individual, puede hacer uso del
internert, el tiempo estimada para resolver los ejercicios es acorde antes de dar inicio a
este, y sera retroalimentacion para las proximas clases.
INTRODUCCION AL HTML
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.
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.
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>
</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:
CONSULTA N°2
CUAL ES LA FUNCION QUE REALIZA CADA UNA DE LOS ATRIBUTOS DE LA ESTRUCTURA
ANTERIOR DE BODY.
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
4. Nuevamente Habra 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 asi: 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.
Consulta N° 1
1. Las etiquetas HTML son la base de el lenguaje de programación ya casi
“ancestral”, pero que sigue siendo el trasfondo de muchos otros
más avanzados. Es un lenguaje de marcas, estas marcas serán
fragmentos de texto destacado de una forma especial como los
efectos a aplicar sobre el texto como las distintas estructuras del
lenguaje.
<html> Los editores de páginas web nos ahorran mucho trabajo ya que
sólo con seleccionar la opción de crear una nueva página, han escrito
automáticamente todas la etiquetas que definen la estructura del nuevo
documento.
<head> La cabecera de la página, donde se definen algunos datos que no
se representan cuando se ve la página, como información sobre el título de
la página, el autor de la página, editor con el que se ha creado la página,
juego de caracteres que debe usar para representar la página, etc.
<body> Al igual que para la cabecera, todo lo definido entra las etiquetas
<BODY>... </BODY> constituye el cuerpo de la página.
<tittle> Como ya se ha dicho es una frase que indica el título que va a tener
la página.
Dentro de Front Page, pulsando con el botón derecho del ratón sobre
cualquier parte de la página aparecerá un menú en el que seleccionando
Propiedades de la página.
Consulta N°2
BODY
Color de fondo de la página (BGCOLOR)
Gráfico de fondo (BACKGROUND)
BGCOLOR El primer parámetro que debes conocer es el del color de fondo, el
“bgcolor”. A través de este parámetro podremos definir el color de fondo que
queramos que tenga nuestra página.
BACKGORUND
Puede que no quieres que tu página tenga un color sólo de fondo, sino que
quieras que tu página tenga una imagen