Prof.
Orlando Javier Guarachi Vidaurre
PAGINAS WEB
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.
Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de
acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes y videos sobre una página,
hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos etc.
Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre
la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus
contenidos, como párrafos de texto e imágenes.
Figura 1 Esquema de las partes que forman un documento HTML
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera
(llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que
los navegadores muestran como título de sus ventanas).
Para que los laboratorios posteriores funcionen correctamente, es imprescindible que utilices un editor
de texto sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad,
EmEditor, UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open
Office. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso
Vi, pero no utilices KOffice ni Open Office.
Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador, Si ya
estás viendo tu primera página HTML en el navegador, prueba a pulsar sobre el menú Ver > Código fuente
y podrás ver el código HTML de la página que está cargada en el navegador. De hecho, puedes ver el
código HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Prueba a ver el
código HTML de tu página preferida y verás cuantas etiquetas puede llegar a tener una página compleja.
Volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un
documento HTML (<html>, <head>, <body>).
Requisitos para el laboratorio:
1.- ¿Qué es una página web?
2.- ¿Qué es www?
3.- ¿Qué es http?
4.- Etiqueta (<html>).
5.- Etiqueta (<head>).
6.- Etiqueta (<body>).
7.- Etiqueta (<br>).
8.- Etiqueta (<h2>).
9.- Etiqueta (<p>).
10.-Etiqueta (<EM> <STRONG>).
Prof. Orlando Javier Guarachi Vidaurre
LABORATORIO Nro. 1
Nombre y Apellidos: Curso:
1.-Instalar Sublime Text (editor de texto y editor de código fuente).
2.-MI PRIMERA PAGINA
o Abre un editor de archivos de texto y crea un archivo nuevo
o Copia el código HTML mostrado a continuación
o Guarda el archivo con el nombre pagina1, con la extensión (.html)
Código fuente:
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
3.- ESTRUCTURA INTERNA DE UNA PÁGINA HTML
Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por
un guión.
o Guarda el archivo con el nombre pagina2, con la extensión (.html)
Código fuente:
<html>
<head>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>
4.- SALTO DE LÍNEA <BR>
Confeccionar una página HTML que muestre distintos lenguajes de programación, mostrarlos uno
por línea.
o Guarda el archivo con el nombre pagina3, con la extensión (.html)
Código fuente:
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
5.- PÁRRAFO <P>
Confeccione una página que muestre dos párrafos. En el primero agregar varios saltos de línea.
o Guarda el archivo con el nombre pagina4, con la extensión (.html)
Código fuente:
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos. <br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases
de datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de
las bases de datos.
</p> </body> </html>
6.- TÍTULOS <H1 – H6>
Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de
nivel <h2>. Definir un párrafo para cada título de segundo nivel.
o Guarda el archivo con el nombre pagina5, con la extensión (.html)
Código fuente:
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de
caracteres. Se coloca
entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual determinamos el
máximo de
caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30
caracteres,
definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000
aproximadamente. <br> Definimos campos de este tipo cuando queremos representar,
por
ejemplo, cantidades.
</p> </body> </html>
7.- ÉNFASIS <EM> <STRONG>
Crear una página que contenga cuatro párrafos. En el primero enfatizar con el máximo nivel y en los
otros párrafos emplear el elemento de enfatizar de menor fuerza.
o Guarda el archivo con el nombre pagina6, con la extensión (.html)
Código fuente:
<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se
colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan
operaciones matemáticas, por ejemplo, códigos de identificación, números de documentos,
números telefónicos. Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros,
negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen
referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con
decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date
(fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p> </body>
</html>
8.- ACENTOS, CARACTERES ESPECIALES Y COMENTARIOS
o Guarda el archivo con el nombre pagina7, con la extensión (.html)
Código fuente:
<html>
<head>
<title>Mi primera página en html</title>
</head>
<body>
las etiquetas que hemos aprendido hasta ahora son las que forman la
estructura básica de un documento html: <html>, <head>,
<title> y <body>. también hemos aprendido a comentar
nuestras páginas con las etiquetas <!-- y -->.
</body>
</html>
9.- TAMAÑOS Y FORMATOS
o Guarda el archivo con el nombre pagina8, con la extensión (.html)
Código fuente:
<html>
<head>
<title>Ejercicio sobre tamaños y formatos</title>
</head>
<body>
<p style="font-size: 40px;">Esto está a un tamaño de 40px</p>
<p style="font-size: small;">Esto está a un tamaño small</p>
<p style="font-size: medium;">Esto está a un tamaño medium</p>
<p style="font-size: large;">Esto está a un tamaño large</p>
<p style="font-size: xx-large;">Esto está a un tamaño xx-large</p>
<p style="font-size: xx-small;">Esto está a un tamaño xx-small</p>
<p style="font-size: 2%;">Esto está a un tamaño 2%</p>
<p style="font-size: 20%;">Esto está a un tamaño 20%</p>
<p style="font-size: 80%;">Esto está a un tamaño 80%</p>
<p style="font-size: 200%;">Esto está a un tamaño 200%</p>
<p style="font-size: 300%;">Esto está a un tamaño 300%</p>
<h2>Pruebas de formatos</h2>
Esto es normal
<sub>y esto es subíndice: sub </sub><br>
Esto es normal <sup>y esto es superíndice: sup </sup><br>
<br>
</body>
</html>
