HTML y Artister

Capítulo I
HTML - ARTISTER
Contenido:
 HTML.
 ARTISTER.
 Publicación de páginas web.
1
Lenguaje de Programación
Dato.- ES un conjunto de caracteres asociados, como por ejemplo, si preguntamos lo siguiente:

¿Cuál es tu edad? Respuesta: 25 años.
¿Cuál es tu nombre? Respuesta: Percy.
¿Dónde vives? Respuesta: En la ciudad de Chota.
Las respuestas 25 años, Percy, Chota; vienes hacer los datos.
Información.- Es la Asociación de datos, para ser interpretados y luego tomar decisiones; estas
decisiones son un conjunto de acciones. Por lo tanto están en constante cambio y deben ser
flexibles.
Manejo de datos.- Debemos considerar que:
 Los datos son costosos, por lo tanto hay que saberlos manejar.
 Los datos nos permiten realizar mediciones, validaciones, dentro de una
organización.
 Debemos conocer mecanismos de recuperación de datos.
 Los datos debemos tenerlos en un espacio físico o virtual seguro.
 Si los datos son modificables, debemos utilizar la actualización y agregación
respectiva.
Clasificación de la Estructura de datos.- Los datos según su estructura los podemos clasificar en:
 Primitivas: son aquellos que no están compuestos por otras estructuras, como por
ejemplo: int (entero), float (flotante), char, double, etc.
 Simples: están compuestas por un conjunto de estructuras primitivas, como por
ejemplo: Cadena de caracteres, un vector de enteros, un vector de flotantes, etc.
Lenguaje de Programación
USUARIO COMPUTADOR
Lenguaje de
programación
Por lo tanto el lenguaje de programación, es quién recibe los mensajes de programación del
usuario y los traduce para que la computadora lo entienda.
2
Tipos de Datos.- Entre los tipos de datos más utilizados tenemos:
Tipo Uso de Memoria Rango

Char 8 bits 0 a 255
Int 16 bits -32 768 a 32768
Float 32 bits 3.4e -38 a 3.4e 38
Double 64 bits 1.7e -308 a 1.7e 308
Operadores:
 Aritméticos: suma(+), resta (-), tanto por ciento(%), división (/), multiplicación(*).
 Relacionales: < , >, ≥, ≤, =, etc.
 Lógicos: and, or.
HTML
1.1.- Conceptos Básicos.
Para representar la información en los Nota Importante

A los navegadores también
navegadores, es necesario un tipo de lenguaje, es así que nace se les llama browser, entre
HMTL, por las siglas: “Hyper Text Markup Lenguage” o es español, ellos tenemos: FireFox,
Internet Explorer, Opera,
“Lenguaje de Marcas Hypertextuales”. etc.
HTML, es un lenguaje que fue diseñado para representar de

forma estructurada textos o documentos, en los diferentes navegadores, si alguna vez en
nuestro navegador hemos ido a la opción: Ver, Código Fuente; se nos presentará una serie
de palabras raras y muchos símbolos, esto conforma el lenguaje HTML, de esa página web.
1.2.- Etiquetas en HTML.
Las etiquetas son un conjunto de órdenes, que forman la estructura del documento
HTML, estas etiquetas nos permiten determinar la forma, color, tamaño, etc, de la
información que forma parte del documento.
A las etiquetas también se les llama TAG, y éstas tienen un formato.
1.2.1.- Formato básico de una etiqueta. Recuerda que:

La telearaña mundial
llamada web o WWW son
siglas de Word Wide Web.
3
El formato básico de una etiqueta es:
<title> Mi página web personal</title>
Las etiquetas pueden ser abiertas o cerradas; las etiquetas abiertas son aquellas que
tienen una palabra clave entre los símbolos < >; así por ejemplo tenemos que
<title> es una etiqueta abierta, mientras que </title> vendría hacer una etiqueta
cerrada. En una etiqueta cerrada se incluye el carácter / antes de la palabra clave,
para indicar el final de la misma. Veamos otro
ejemplo: Nota importante:
Etiqueta abierta: <strong>
<strong>Sitios Turìsticos</strong> Etiqueta cerrada: </strong>
Lo que hace esta etiqueta o tag, es decirle a nuestro navegador que muestre en
negrita el texto: Sitios Turísticos.
1.2.2.- Etiquetas básicas de un documento HTML.
Para publicar un documento escrito mediante HTML, es necesario un conjunto de

etiquetas generales, las cuales tiene una estructura y jerarquía que a continuación se
indican:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Explicación de las etiquetas:
 <html> Indica que comienza el documento html o página web, por lo tanto
la etiqueta </html>, indicaría que termina ahí esta página.
 <head> Indica que empieza la cabecera del documento, dentro de la
cabecera van otras etiquetas como el título; la cabecera termina con:
</head>.
 <title> Esta etiqueta nos permite dar un título a nuestra página web, este
título se visualizará en la barra de título de nuestro navegador. Esta etiqueta
termina con </title>.
 <body> Indica que ahí comienza el contenido o cuerpo del documento, en
otros términos la información que realmente se mostrará en el navegador;
esta etiqueta termina con </body>.
4
<HTML>
<head>
<title>Mi Primera Página Web</title>
</head>
<body>
<H1><center><marquee>Computación e
Informática</marquee></center></H1></br>
<h2>Áreas de la carrera profesional de Computación e
Informática:</h2></br>
<a href="repacion.html"><LI>Mantenimiento y Reparación.</a>
<a href="redes.html"><LI>Redes y Seguridad</a>
<a href="internet.html"><LI>Internet</a>
<a href="paginas.html"><LI>Páginas Web</a>
<a href="sofware.html"><LI>Desarrollo de Software</a>
</body>
</HTML>
1.3.- TABLAS
DEFINICIÓN: Son un conjunto de filas (horizontales) y columnas (verticales); cuya intersección se

forman celdas. Las tablas, nos permiten representar cualquier elemento de una página (texto,
listas, imágenes, etc); en diferentes filas y columnas separadas entre sí. Es una herramienta muy
útil para ordenar contenidos de distintas partes de nuestra página.
Las tablas se definen mediante la etiqueta: <table></table>. Esta etiqueta tiene algunos
parámetros como:
 Border.- Indica el ancho de borde de la tabla en puntos. Ejemplo:

<table border=”2”>
 Cellspacing.- Indica el espacio en puntos que separa las celdas que están dentro de la
tabla. Ejemplo:
<table border=”2” cellspacing=”4” >
 Cellpadding.- Indica el espacio en puntos que separa el borde cada celda y el contenido de
ésta. Ejempo:
<table border=”2” cellspacing=”4” cellpadding=”4”>
 Width.- Indica el ancho de la tabla, ya sea en puntos o en porcentaje, en función del ancho
de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de
los contenidos de las celdas. Ejemplo:
<table border=”2” cellspacing=”4” cellpadding=”4” width=”80%”>
 Height.- Indica la altura de la tabla en puntos o en porcentaje, en función del alto de la
ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los
contenidos de las celdas. Ejemplo:
5
<table border=”2” cellspacing=”4” cellpadding=”4” width=”80%” height=”70%”>.
 Bgcolor.- Especifica el color de fondo de la tabla. Ejemplo:
<table bgcolor=#0000FF> nos indica el color azul. El código del contiene 6 caracteres, los
cuales pueden ser letras o números.
Para indicar que empieza una fila en una tabla, se utiliza la etiqueta <tr>, y para terminar
la fila se utiliza la etiqueta </tr>. Dentro de una fila se indican las columnas o celdas de la
tabla, las cuales se inician con <td> y se cierran con </td>.
Digitamos el siguiente código, para obtener una tabla con los parámetros anteriormente
descritos:
<HTML>
<head>
<title>Mis Tablas</title>
</head>
<body>
<center>Mis Tablas</center></br>
<center>
<table border=”2” cellspacing=4 cellpadding=4 width=40% height=70%>
<tr><td>Tipo de Libro</td><td>Cantidad</td></tr>
<tr><td>Programación</td><td>3 unidades</td></tr>
<tr><td>Animación</td><td>2 unidades</td></tr>
<tr><td>Redes</td><td>1 unidad</td></tr>
</table>
</center>
</body>
</HTML>
El resultado de la ejecución del código anterior es:
6
1.4.- FRAMES.- Las frames son muy utilizadas como una técnica para dividir la pantalla del
visor en otras ventana, donde cada ventana se puede manipular por separado, lo que nos
da libertad para mostrar un página web diferente en cada ventana.
Para dividir en varias subventanas se utilizan las etiquetas <Frameset> y </Frameset>, esta
indica cómo se va a dividir la ventana principal. Sin embargo puede incluirse varios
<Frameset> anidadas para con el objeto de subdividir una subventa.
Parámetros de <Frameset>.- Los parámetros de <Frameset> son rows y cols, para dividir la
ventana ya sea en filas o colunas, a estos parámetros de acompañan una serie de números que
indican el porcentaje del tamaño de cada subventa. Ejemplo:
 <Frameset rows= “20%,60%,20%”> Esta etiqueta crea tres subventanas horizontales, la
primera ocupará el 20% de la ventana principal, la segunda el 60% y la tercera un 20%.
 <Frameset cols= “30%,50%,*”> Esta etiqueta crea tres subventanas verticales, la primera
ocupará el 30% de la ventana principal, la segunda el 50% y la tercera el resto de la
ventana principal.
Parámetros de <Frame>.- Indica las propiedades de cada subventana. Es necesario indicar
una etiqueta <Frame> para cada subventana creada. Los parámetros son:
 Name =”nombre”
Indica el nombre por el cual nos referimos a esa subventana.
 Src = “URL”
7
La ventana mostrará en principio el contenido del documento HTML que se indique.
 Scrolling = “yes/no/auto”
Indica si se aplica una barra de desplazamiento a la subventa.
 Noresize
Si se indica este parámetro, el usuario no podrá dimensionar las subventanas con
el visor. El usuario cuando está viendo una página con frames, puede
redimensionar la subventana, seleccionando un borde de la subventana con el
cursor y desplazándolo.
Nota: Al usar frames, nos encontramos con un problema. Cuando queremos indicar una
página debemos indicar al visor en qué ventana queremos que se muestre. Por defecto se
mostrará en la ventana donde se encuentre el enlace. Para poder escoger una subventana
de destino del hyperenlace se añade un nuevo parámetro a la etiqueta <a href=> </a>.
Este parámetro se llama target y puede tener el valor:
Target=”nombre_ventana”.
Veamos un ejemplo donde se aplique frameset:
1.5.- Diseñando una página web con frameset:
 Crea una carpeta en la vamos a guardar todos los archivos. (tiendasabc)
 Abre el bloc de notas y digita lo siguiente:
<html>
<head>
<title>Menús</title>
</head>
<body background="imagen.jpg">
<center><H1>Computación e Informática</H1></center>
<marquee><H2>Tiendas ABC</H2></marquee>
8
<a href="ventas.html" target="derecha">ventas</a></br>
<a href="compras.html" target="derecha">compras</a></br>
<a href="pedidos.html" target="derecha">pedidos</a></br>
</body>
</html>
 Guarda el archivo con el nombre de menu.html en la carpeta de tiendasabc.

 Abre el explorador de windows y abre el archivo menu.html
 Abre el bloc de notas y digita lo siguiente:

<html>
<head>
<title>Ventas</title>
</head>
<body>
<center><H1>Ventas</H1>
<H3>Estas son nuestras ventas</H3>
<table border=1>
<tr><td>Producto </td><td> Precio</td></tr>
<tr><td>Cemento</td><td> 25.00 </td></tr>
<tr><td>Fierro</td><td> 50.00</td></tr>
</table>
</center>
</body>
9
</html>
 Guarda el archivo con el nombre de ventas.html en la carpeta de tiendasabc.
 Abre el explorador de windows y abre el archivo ventas.html
 Abre un nuevo bloc de notas y digita lo siguiente:

<html>
<head>
<title>Compras</title>
</head>
<body>
<center><H1>Compras</H1>
<H3>Estas son nuestras Compras</H3>
<table border=1>
<tr><td>Producto </td><td> Precio</td></tr>
<tr><td>Yeso</td><td> 2.00 </td></tr>
<tr><td>Pintura</td><td> 40.00 </td></tr>
</table>
</center>
</body>
</html>
 Guarda el archivo con el nombre de compras.html en la carpeta de tiendasabc.

 Abre el explorador de windows y abre el archivo compras.html
10
<html>
<head>
<title>Pedidos</title>
</head>
<body>
<center><H1>Pedidos</H1>
<H3>Estas son nuestros Pedidos</H3>

<table border=1>
<tr><td>Producto </td><td> cantidad </td></tr>
<tr><td>Tubos</td><td> 30 </td></tr>
<tr><td>Pegamento</td><td> 100 </td></tr>
</table>
</center>
</body>
</html>
 Guarda el archivo con el nombre de pedidos.html en la carpeta de tiendasabc.
 Abre el explorador de windows y abre el archivo pedidos.html
11
<html>
<head>
<title>Logotipo</title>
</head>
<body background="imagen.jpg">
<marquee behavior="alternate"><H2>Tiendas ABC</H2></marquee>
</body>
</html>
 Guarda el archivo con el nombre de logotipo.html en la carpeta de tiendasabc.

 Abre el explorador de windows y abre el archivo logotipo.html

<html>
<head>
<title>pie de pagina</title>
12
</head>
<body>
<center>Jr. 28 de Julio - Tel.076-354323 </center>
</body>
</html>
 Guarda el archivo con el nombre de pie.html en la carpeta de tiendasabc.

 Abre el explorador de windows y abre el archivo pie.html
<html>
<head><title>Pagina con frameset</title>
</head>
<frameset cols="17%,83%" frameborder="YES" border="1">
<frame name="principal" src="menu.html">
<frameset rows="20%,75%,5%" frameborder="YES" border="1">
<frame name="arriba" src="logotipo.html">
<frame name="derecha" src="ventas.html">
<frame name="pie" src="pie.html">
</frameset>
</frameset>
<noframes>
13
<body>
</body>
</noframes>
</html>
 Guarda el archivo con el nombre de index.html en la carpeta de tiendasabc.
 Abre el explorador de windows y abre el archivo index.html
Al dar clic en el menú compras, cambia la página de la derecha.
14
15
16
¿Qué es Artisteer?
Artisteer es un producto de automatización del diseño de Web que
instantáneamente crea fantásticas plantillas Website y Blog. Este software
poderoso le puede hacer un diseñador profesional de Web de temas Websites,
WordPress y otras plantillas del blog. Artisteer le deja a fantástico que crear mira
Website diseño y plantillas en justamente los minutos, sin tener que saber nada
alrededor gráficos editores o HTML.
La interfaz Artisteer consta de File Menu, área Access Rápido Toolbar, Ribbon,
Preview, y Pages/Posts Panel. Las opciones adicionales pueden ser ostentadas en
Mode (resaltadas en la imagen debajo de) Panel o Window.
Construyendo una Aplicación Web.

1.- Elegir la aplicación a construir:
Al iniciar el programa de Artisteer nos debe aparecer una ventana como la
siguiente:
17
En esta ventana debemos elegir dando clic en nuestro caso Sitio Web o
Blog. Nos debe aparecer la siguiente ventana:
18
2.- Modificando el título y eslogan del sitio.
Para ello debemos hacer clic en el texto Introduzca Título del Sitio y
escribir el nombre del sitio o de la Aplicación Web a construir.
Quedando de la siguiente manera.
De igual manera se debe ingresar el eslogan del Sitio.
3.- Cambiar el nombre de las páginas.
Nuestra aplicación va a constar de varias páginas los que nos conllevan a

menús tanto verticales como horizontales, los cuales debemos de ir añadiendo
según nuestro diseño. Para cambiar el nombre de una página, hacemos clic en
Page 1, y luego escribimos el nombre de la página que se va a convertir en un
menú.
19
En nuestro caso la Page 1, será el Inicio de la aplicación.
De la misma forma el nombre de la Page 2, con Casados.
4.- Agregar más páginas.
Nuestra aplicación tiene varios menús, los cuales vamos a añadirlos

haciendo clic derecho en el menú inicio y luego elegimos la opción Página
Nueva.
20
Nos debe aparecer una ventana como la siguiente:
Escribimos en nuestro caso Bautizados y luego presionamos la tecla enter.
5.- Creando sub menús.
Para ello hacemos clic derecho en el menú que contendrá los submenús,
en nuestro caso crearemos un sub menú para el menú Casado (Registro Casado).
21
Para sub de casados elegimos Página Nuevo Niño. Nos debe salir
lo siguiente:
En este caso vamos a escribir Registro Casados.
6.- Cambiar el diseño de la aplicación.
Para ello debemos ir al menú Inicio y luego elegir Sugerir Diseño, la plantilla
cambiará.
22
Luego de presionar Sugerir Diseño el aspecto de la plantilla cambiará.
7.- Cambiar el aspecto de la aplicación:
 Sugerir Colores.
Si deseamos cambiar los colores de la platilla hacemos clic en el
menú inicio, luego la opción sugerir colores.
23
 Sugerir Fuentes de la Plantilla.
Para ello hacemos clic en la letra A, de Sugerir Fuentes.
 Sugerir Encabezado.
Si deseamos cambiar el aspecto del encabezado de la plantilla,
elegimos la opción sugerir encabezado.
24
 Sugerir Menú.
Para cambiar el aspecto de un menú, hacemos clic en Sugerir
Menú.
8.- Agregar un bloque.
Para ello hacemos clic en el menú Inicio y luego en la Opción Nuevo

Bloque.
25
Nos debe de visualizar un nuevo bloque 2.
10.- Editar el texto de una sección:
Para ello debemos seleccionar el texto que deseamos aplicar algún formato
y de esta manera Editar de acuerdo a nuestras expectativas, haciendo clic en el
menú Editar y luego alguna herramienta.
11.- Cambiar la distribución de la plantillas.
Si deseamos cambiar la distribución de la plantilla, es decir la posición de

cada elemento de la plantillas, nos dirigimos al menú Composición y luego clic en
Sugerir Composición.
26
Cambiará distribución, además podemos cambiar el número de columnas que
tiene la aplicación. Para ello hacemos clic en Composición y luego en Columnas,
para luego elegir una de ellas.
27
13.- Cambiar el encabezado.
Para ello hacemos clic en el Encabezado y luego sugerir encabezado.
14.- Publicar las páginas web.- Para ello vamos al menú Archivo, luego
Exportar, luego Publish to local/FTP
28
En esta ventana le damos ruta donde se va a guardar la carpeta que contendrá y luego
elegimos exportar.
Luego para abrir el archivo nos dirigimos al navegador y a la carpeta y elegimos el archivo
index.html.
29
30
TRABAJO: Elaborar un programa en PHP, que realice las siguiente operaciones:
suma, resta, multiplicación, división, raíz cuadrada y potencia.
<?php
//Variables
$n1 = 0; $n2 = 0; $r = 0;
if(isset($_POST["btnsuma"])) {
//Entrada
$n1 = (int)$_POST["txtn1"];
//Proceso
$r = $n1 + $n2;
}
?>
<?php
if(isset($_POST["btnresta"])) {
//Entrada
//Proceso
$r = $n1 - $n2;
}
?>
<?php
if(isset($_POST["btndivision"])) {
//Entrada
//Proceso
$r = $n1 / $n2;
}
?>
31
<?php
if(isset($_POST["btnmultiplicacion"])) {
//Entrada
//Proceso
$r = $n1 * $n2;
}
?>
<?php
if(isset($_POST["btnpotencia"])) {
//Entrada
//Proceso
$r = pow ($n1, $n2);
}
?>
<?php
if(isset($_POST["btnraiz"])) {
//Entrada
//Proceso
$r = sqrt ($n1);
}
?>
<html>
<head>
<title>Problema 01</title>
</head>
<body>
<form method="post" action="calculadorabasica.php">
<table width="241" border="0">
<tr>
<td colspan="2"><strong>Calculadora Basica</strong> </td><br>
</tr>
<tr>
<td width="81">N° 1</td>
<td width="150">
<input name="txtn1" type="text" id="txtn1" value="<?=$n1?>" /></td>
32
</tr>
<tr>
<td>N° 2 </td>
<td>
<input name="txtn2" type="text" id="txtn2" value="<?=$n2?>"/></td>
</tr>
<tr>
<td bgcolor = blue>Resultado</td>
<td>
<input name="txtr" type="text" class="TextoFondo" id="txtr"
value="<?=$r?>"/></td>
</tr>
</table>
<input name="btnsuma" type="submit" id="btnsuma" value="+" />
<input name="btnresta" type="submit" id="btnresta" value="-" />
<input name="btndivision" type="submit" id="btndivision" value="/" />
<input name="btnmultiplicacion" type="submit" id="btnmultiplicacion"
value="*" />
<input name="btnpotencia" type="submit" id="btnpotencia" value="P" />
<input name="btnraiz" type="submit" id="btnraiz" value="R" />
[<a href='calculadorabasica.php'>NI</a>]
</form>
</body>
</html>
33

HTML y Artister

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML y Artister

Enviado por

Direitos autorais:

Formatos disponíveis

Capítulo I

Dato.- ES un conjunto de caracteres asociados, como por ejemplo, si preguntamos lo siguiente:

Tipo Uso de Memoria Rango

1.1.- Conceptos Básicos.

Para representar la información en los Nota Importante

HTML, es un lenguaje que fue diseñado para representar de

1.2.- Etiquetas en HTML.

A las etiquetas también se les llama TAG, y éstas tienen un formato.

1.2.1.- Formato básico de una etiqueta. Recuerda que:

<title> Mi página web personal</title>

1.2.2.- Etiquetas básicas de un documento HTML.

Para publicar un documento escrito mediante HTML, es necesario un conjunto de

Explicación de las etiquetas:

DEFINICIÓN: Son un conjunto de filas (horizontales) y columnas (verticales); cuya intersección se

 Border.- Indica el ancho de borde de la tabla en puntos. Ejemplo:

 Abre el bloc de notas y digita lo siguiente:

 Guarda el archivo con el nombre de menu.html en la carpeta de tiendasabc.

 Abre el bloc de notas y digita lo siguiente:

 Abre un nuevo bloc de notas y digita lo siguiente:

 Guarda el archivo con el nombre de compras.html en la carpeta de tiendasabc.

<H3>Estas son nuestros Pedidos</H3>

<marquee behavior="alternate"><H2>Tiendas ABC</H2></marquee>

 Guarda el archivo con el nombre de logotipo.html en la carpeta de tiendasabc.

 Abre un nuevo bloc de notas y digita lo siguiente:

<center>Jr. 28 de Julio - Tel.076-354323 </center>

 Guarda el archivo con el nombre de pie.html en la carpeta de tiendasabc.

 Abre un nuevo bloc de notas y digita lo siguiente:

<head><title>Pagina con frameset</title>

<frameset cols="17%,83%" frameborder="YES" border="1">

<frame name="principal" src="menu.html">

<frameset rows="20%,75%,5%" frameborder="YES" border="1">

<frame name="arriba" src="logotipo.html">

<frame name="derecha" src="ventas.html">

<frame name="pie" src="pie.html">

Al dar clic en el menú compras, cambia la página de la derecha.

Construyendo una Aplicación Web.

Quedando de la siguiente manera.

De igual manera se debe ingresar el eslogan del Sitio.

3.- Cambiar el nombre de las páginas.

Nuestra aplicación va a constar de varias páginas los que nos conllevan a

De la misma forma el nombre de la Page 2, con Casados.

4.- Agregar más páginas.

Nuestra aplicación tiene varios menús, los cuales vamos a añadirlos

Escribimos en nuestro caso Bautizados y luego presionamos la tecla enter.

5.- Creando sub menús.

En este caso vamos a escribir Registro Casados.

6.- Cambiar el diseño de la aplicación.

7.- Cambiar el aspecto de la aplicación:

8.- Agregar un bloque.

Para ello hacemos clic en el menú Inicio y luego en la Opción Nuevo

10.- Editar el texto de una sección:

11.- Cambiar la distribución de la plantillas.

Si deseamos cambiar la distribución de la plantilla, es decir la posición de

Para ello hacemos clic en el Encabezado y luego sugerir encabezado.

Você também pode gostar