Diseño Aplicacion Web PDF

CENTRO DE ELECTRICIDAD ELECTRONICA Y
TELECOMUNICACIONES
(CEET)
Técnicos en programación de software F.M.

No.1880835
DISEÑO APLICACIÓN WEB
Aprendiz
BAIRON STIVEN PEDREROS ORTIZ
Instructor
Graciela Arias Vargas
2019
Bogotá D.C, 12 De Septiembre
El primer documento HTML
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, que no se visualiza. El cuerpo de la página incluye
todos sus contenidos, como párrafos de texto e imágenes.
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).
A continuación, se muestra el código HTML de una página web muy

sencilla:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <b>tan sencillo</b> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
Para probar este primer ejemplo se ha de hacer lo siguiente:
Abre un editor de archivos de texto y crea un archivo nuevo
Copia el código HTML mostrado anteriormente y ponlo tal cual en el

archivo que has creado
Guarda el archivo con el nombre que quieras, pero con la extensión

html
Llama el fichero desde un navegador de internet (no es necesario

llevarlo a un servidor).
El segundo documento CSS
Características básicas
• Características de las fuentes, como el tipo de letra y
énfasis.
• Características del elemento de texto, como espaciamiento
entre letras, espaciado de palabras y espaciamiento entre
líneas.
• Características de color de todos los elementos.
• Alineación de elementos incluyendo texto, imágenes,

controles y tablas.
• Posicionamiento y tamaño de los elementos de espaciado

tales como bordes, relleno y márgenes.
• Identificación y clasificación de grupos de atributos.
Características avanzadas
• Posicionamiento absoluto, relativo y fijo de los elementos
para que pueda crear una alineación precisa de los
elementos.
• Índice z para controlar el apilamiento de elementos en la

pantalla para que un elemento puede ocultar otro.
• Soporte para varios tipos de medios para que un

desarrollador no necesite ser un artista para crear páginas
espectaculares.
• Soporte para hojas de estilo auditivas donde se lee el
contenido.
• Procesamiento de texto bidireccional.
• Añadir nuevos efectos de fuente, como sombras.
Todas las declaraciones CSS siguen el mismo formato
Cómo usar hojas de estilo
• Tres tipos de manejo de hojas de estilo: en línea, internas

y externas
• La diferencia es simplemente donde se coloca el código en
relación con el documento HTML
Ejemplo de hoja de estilo en línea
<p style="color: navy; font-family: Arial;">Párrafo de texto con

estilo<p>
Ejemplo de hoja de estilo en cabecera:
<html>
<head>
<style>
p {
font: verdana; color: navy;
align: right; }
.logo-imagen {
align: left;
min-height: 120px;
border: 2px solid #fff;
}
</style>
</head>
<body> ... ...</body>
</html>
Ejemplo de uso de hoja de estilo externa:
<link rel=”stylesheet” type=”text/css”

href=“...style.css” />
<style type=”text/css”> @import url(...style.css)
</style>
Tercer documento PHP
Para no irnos tan lejos, vamos a comenzar instalando un

servidor local, para esto usaremos Xampp, descarga e instala
este servidor como cualquier programa, puedes descargarlo
desde este enlace.
Cuando instalas Xampp se te crea un icono del programa, abre

el programa y has clic en el botón Start que corresponde a
Apache y MySQL, si bien no usaremos Base de Datos MySQL,
te aconsejamos lo actives para futuras aplicaciones, el botón
Start debió cambiar a Stop como la imagen a continuación
Después de haber instalado Xampp, se te crea un estructura de
directorios en tu sistema operativo, no toques los demás
directorios si no conoces, solo accede o abre el directorio
htdocs
/xampp
├── anonymous
├── apache
├── cgi-bin
├── contrib
├── FileZillaFTP
├── htdocs // Abre esta carpeta
├── img
├── install
...
... (Acá hay más directorios)
...
Dentro del directorio htdocs crea una carpeta con el nombre

que desees, por ejemplo miaplicacionphp y dentro de ella crea
un archivo llamado index.php
/xampp
├── anonymous
├── apache
├── cgi-bin
├── contrib
├── FileZillaFTP
├── htdocs
├── miaplicacionphp
├── index.php // Crea este archivo PHP
├── img
├── install
...
... (Acá hay más directorios)
...
El archivo creado index.php tiene la extensión .php que indica

que el formato de ese archivo tiene contenido del Lenguaje de
Programación PHP. Abre el archivo index.php y dentro de el
vamos a crear un mensaje y luego imprimiremos la fecha y hora
con PHP.
Antes de continuar hacemos hincapié que la hora con PHP es la

hora del servidor, mas no la hora actual de tu Computadora, para
obtener la hora de tu computadora se usa Javascript, pero esto
es otro tema.
<?php
// Texto
echo "Hola, soy un texto creado con PHP";
// Espacio
echo "<br><br>";
// Hora
date_default_timezone_set('America/Lima');
$fechayhora = date('m-d-Y h:i:s a');
echo $fechayhora;
?>
En el código anterior puedes ver que para empezar a escribir
código con PHP debes de iniciar escribiendo el símbolo <? y
para cerrar finalizar el código PHP escribe ?>
Así mismo agregamos un espacio de líneas con <br><br> para

separar el Texto de la fecha y hora.
Ahora ve a tu navegador para ejecutar la aplicación, escribe en

la barra de navegación la siguiente
ruta:http://localhost/miaplicacionphp/ y obtenemos el Texto, el espacio
y la Fecha y hora con PHP.
Con esto tenemos creada nuestra primera aplicación netamente

con PHP.
Notas
• Algunos pasos pueden cambiar en futuras versiones de las
herramientas, esto no depende de nosotros, si no de los
desarrolladores que dan soporte a estas herramientas.
• Teniendo la base explicada de este artículo, puedes crear

aplicaciones más avanzadas con PHP.

Diseño Aplicacion Web PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Diseño Aplicacion Web PDF

Încărcat de

Drepturi de autor:

Formate disponibile

CENTRO DE ELECTRICIDAD ELECTRONICA Y

Técnicos en programación de software F.M.

BAIRON STIVEN PEDREROS ORTIZ

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en

A continuación, se muestra el código HTML de una página web muy

Para probar este primer ejemplo se ha de hacer lo siguiente:

Abre un editor de archivos de texto y crea un archivo nuevo

Copia el código HTML mostrado anteriormente y ponlo tal cual en el

Guarda el archivo con el nombre que quieras, pero con la extensión

Llama el fichero desde un navegador de internet (no es necesario

El segundo documento CSS

• Características de color de todos los elementos.

• Alineación de elementos incluyendo texto, imágenes,

• Posicionamiento y tamaño de los elementos de espaciado

• Identificación y clasificación de grupos de atributos.

• Índice z para controlar el apilamiento de elementos en la

• Soporte para varios tipos de medios para que un

• Procesamiento de texto bidireccional.

• Añadir nuevos efectos de fuente, como sombras.

Todas las declaraciones CSS siguen el mismo formato

Cómo usar hojas de estilo

• Tres tipos de manejo de hojas de estilo: en línea, internas

Ejemplo de hoja de estilo en línea

<p style="color: navy; font-family: Arial;">Párrafo de texto con

Ejemplo de hoja de estilo en cabecera:

<link rel=”stylesheet” type=”text/css”

Tercer documento PHP

Para no irnos tan lejos, vamos a comenzar instalando un

Cuando instalas Xampp se te crea un icono del programa, abre

Dentro del directorio htdocs crea una carpeta con el nombre

El archivo creado index.php tiene la extensión .php que indica

Antes de continuar hacemos hincapié que la hora con PHP es la

Así mismo agregamos un espacio de líneas con <br><br> para

Ahora ve a tu navegador para ejecutar la aplicación, escribe en

Con esto tenemos creada nuestra primera aplicación netamente

• Teniendo la base explicada de este artículo, puedes crear

S-ar putea să vă placă și