TallerProgramacionWeb0 Sesion02-2

PROGRAMACIÓN WEB
PARA PRINCIPIANTES
SESION 02
OBJETIVOS DE LA SESIÓN 02
 Dar conocer de manera básica, sencilla y general los siguientes

puntos:
• Entender el lenguaje de estilos CSS y aplicarlo
• Instalación de servidor local: XAMPP SERVER
• Entender el lenguaje de programación PHP y aplicar primeras
funciones
¿Qué es CSS?
 Lenguaje de hojas de estilo en cascada, utilizado para estilizar elementos

escritos en un lenguaje de marcado (HTML).
 Se le denomina estilos en cascada porque se aplican de arriba abajo.
¿Para qué sirve el CSS?
 La idea CSS esta diseñada para utilizar el concepto de separación de

presentación y contenido.
 Los documentos HTML (contenido) incluye solo la información es decir seria
el esqueleto de la web, y el CSS añade la capa de personalización los estilos
de la pagina.
<style type="text/css">
ul {color : red;}
a{
color : green;
text-decoration : none;
}
</style>
Estructura CSS
 La estructura CSS tiene el siguiente formato:
Selector{
Propiedad1 : valor;
…
PropiedadN : valor;
}
 SELECTOR: Elemento HTML al cual le vamos aplicar un estilo en concreto.

 PROPIEDAD: Es una característica que brinda el lenguaje CSS.
 VALOR: Cada propiedad tiene una serie de valores que se puede asignar.
Incluir Estilos a los Documentos HTML
 Tenemos 3 formas distintas de agregar estilos a nuestros documentos HTML.
NOMBRE METODO DESCRIPCION

CSS EXTERNO Etiqueta <link> El código se escribe en un archivo .css a parte.
CSS INTERNO Etiqueta <style> El código se escribe en una etiqueta <style> en
el documento HTML.
ESTILOS EN LINEA Atributo style=“…..” El código se escribe en un atributo HTML de
una etiqueta.
Estilos en Línea
 Una de las formas más simples e intuitivas de dotar de estilos al código HTML
es usando el atributo “style” que admiten la mayoría de las etiquetas HTML.
<ul style="color: red;">

<li><a href="#">Inicio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="mision.html">Misión</a></li>
<li><a href="vision.html">Visión</a></li>
</ul>
CSS Interno
 Otra forma para incluir estilos a nuestros documentos HTML es a través de la

etiqueta <style> la cual contendrá el código CSS
<head> <style type="text/css">

ul {color : red;}
elementoAfectado{
Propiedad1 : valor; a{
… color : green;
PropiedadN : valor; text-decoration : none;
}
</style>
}
</head> </style>
CSS Externo
 Esta es la manera recomendada de utilizar estilos CSS en nuestros documentos

HTML.
 En el bloque <head></head>, podemos incluir una etiqueta <link> con la que
establecemos una relación entre el documento actual y el archivo CSS.
<head>
<link rel="stylesheet" type="text/css" href="rutaArchivo.css">
</head>
Comparación Tipo CSS
DECLARACIÓN CSS ARCHIVOS AFECTADOS CSS SE APLICA A

En línea Uno, aquel donde se realiza la declaración Una línea de código.
Todos los elementos del archivo en los
Interna Uno, aquel en cuya cabecera se realiza la declaración que resulte de aplicación el estilo
Todos los elementos de los archivos

Externa Todos los archivos que invoquen el archivo css afectados en que resulte de aplicación el
estilo
Selectores CSS: id
estilos a sólo una parte de una página web o documento HTML

identificar la parte del documento a la que queremos aplicar esos
estilos a través del atributo Id
#etiqueta{ <label id="etiqueta">
color : green; <b>Login</b>
} </label>
</style>
Selector de clases CSS: class.
Aplicar estilos en diferentes lugares de una página o proyecto web

Aplicaremos la sintaxis muy similar a la empleada con el Id, pero ahora
utilizaremos el termino class
.clase{ <label class="clase">
text-aling : center; <b>Login</b>
} </label>
</style>
Clases a etiquetas especificas
p.clase{background-color:orange; font-weight :bold; font-size :100%;}
div.clase{background-color:orange; font-weight :bold; font-size :100%;}
</style>
Propiedades básicas
1. Maquetación básica .table{

width: 800px;
 width: Ancho de un elemento. }
 height: Alto de un elemento. table tr{
height: 100px;
 vertical-align: Alineamiento vertical }
dentro de un elemento. table tr td{
vertical-align: top;
 padding: Relleno interior que se añade padding: 20px;
en los bordes }
2.Fuentes y texto .table{

width: 800px;
 font-family: Tipo de letra }
 font-size: Tamaño de letra table tr th{
font-family: Arial;
 font-style: Estilo (normal, cursiva, …) font-size: 20px;
 text-align: Alineación del texto font-style: italic;
text-align: left;
(izquierda, derecha, etc.) }
3. Color y fondos div{

 color: Color del elemento. Se puede color: white;
especificar en diferentes formatos background-color: blue;
como palabras predefinidas (red, background-image:
green, etc.) RGB o como valor url("imagenes/fondo.jpg");
hexadecimal. height: 400px;
 background-color: Color del fondo del }
elemento.
 background-image: Permite
especificar una imagen de fondo.
4. Bordes
 border: Añade un borde a un elemento y establece algunas
propiedades (grosor, estilo de línea, etc.)
 border-color: Color del borde.
 border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
table tr td{
border: 1px;
border-color: #000;
border-style: solid;
border-width: 4px;
}
¿Qué es PHP?
 PHP es un lenguaje de código abierto muy popular, adecuado para desarrollo

web y que puede ser incrustado en HTML
 Lenguaje que funciona del lado del Servidor
 Sirve para hacer páginas dinámicas
Páginas estáticas: Petición  Respuesta

Páginas dinámicas: Petición  Procesado y preparación  Respuesta
Instalación de Servidor Local
Funcionamiento Programación Web
Estructura Básica de PHP
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido</title>
</head>
<body>
<?php echo "Hola Mundo"; ?>
</body>
</html>
VARIABLES EN PHP
 son representadas con un signo de dólar ($) seguido por el nombre de la variable
Nombre de variable Validez
$4variable Nombre de variable inválido.
$_4variable Nombre de variable válido.
$variable4 Nombre de variable válido.
$otra Nombre de variable válido.
$1_otra Nombre de variable inválido.
$variable_de_nombre_muy_largo Nombre de variable válido.
$ABC Nombre de variable válido.
$ABC Nombre de variable inválido.
$A_y_B_x_C Nombre de variable válido.
Tipos de Datos
TIPO DE DATO DEFINICIÓN
Los integers, o enteros, pueden tener distintos valores numéricos enteros que se expresan con diferentes notaciones.
$variable = 18; // Número entero positivo
integer $variable = -18; // Número entero negativo
$variable = 0x12; // Notación hexadecimal, en principio no la utilizaremos
Este tipo de datos son los números de punto flotante a los que normalmente llamamos “números decimales”, por
float o double ejemplo, 9.876. Ambos tienen mucha precisión, pero double es el más preciso (con más decimales). La sintaxis para
utilizarlos es bastante simple:
$variable = 9.876;
string El tipo de datos string, también conocido como cadena de caracteres, se expresa con la siguiente sintaxis:
$variable = "Yo soy una cadena";
Se trata de un tipo lógico. Sus posibles valores son true (verdadero) o false (falso).
boolean $variable = true;
$variable = false;
Operadores lógicos
Nombre Ejemplo Resultado

true si $a es mayor que $b
Mayor que $a > $b
false en caso contrario
true si $a es menor que $b
Menor que $a < $b false en caso contrario
true si $a es mayor o igual que $b
Mayor o igual que $a >= $b
true si $a es menor o igual que $b
Menor o igual que $a <= $b false en caso contrario
true si $a es diferente a $b
Diferente $a <> $b ó $a != $b false en caso contrario
true si $a es igual a $b y son del mismo tipo
Idéntico o estrictamente igual $a === $b false en caso contrario
No idéntico o estrictamente $a ¡== $b true si $a no es igual a $b o no son del mismo tipo
distinto false en caso contrario
true si $a es igual a $b
Igual $a == $b
CONDICIONAL IF…ELSE EN PHP
<?php
$condicion = true;
if ($condicion == true){
echo 'Verdadero';
}else{
echo 'Falso';
}
?>
Operadores aritméticos
Nombre Ejemplo Resultado Ejemplo (con $a = 25 y $b = 5)

Suma $a + $b El resultado de la suma. 30
Resta $a - $b El resultado de la resta. 20
Multiplicación $a * $b El resultado de la multiplicación. 125
División $a / $b El resultado de la división. 5
Resto o módulo $a % $b El resto de la división de $a entre $b (1) 0
GRACIAS

TallerProgramacionWeb0 Sesion02-2

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TallerProgramacionWeb0 Sesion02-2

Cargado por

Copyright:

Formatos disponibles

PROGRAMACIÓN WEB

 Dar conocer de manera básica, sencilla y general los siguientes

 Lenguaje de hojas de estilo en cascada, utilizado para estilizar elementos

 La idea CSS esta diseñada para utilizar el concepto de separación de

 La estructura CSS tiene el siguiente formato:

 SELECTOR: Elemento HTML al cual le vamos aplicar un estilo en concreto.

 Tenemos 3 formas distintas de agregar estilos a nuestros documentos HTML.

NOMBRE METODO DESCRIPCION

<ul style="color: red;">

 Otra forma para incluir estilos a nuestros documentos HTML es a través de la

<head> <style type="text/css">

 Esta es la manera recomendada de utilizar estilos CSS en nuestros documentos

DECLARACIÓN CSS ARCHIVOS AFECTADOS CSS SE APLICA A

Todos los elementos de los archivos

estilos a sólo una parte de una página web o documento HTML

Aplicar estilos en diferentes lugares de una página o proyecto web

1. Maquetación básica .table{

2.Fuentes y texto .table{

3. Color y fondos div{

 PHP es un lenguaje de código abierto muy popular, adecuado para desarrollo

Páginas estáticas: Petición  Respuesta

TIPO DE DATO DEFINICIÓN

Nombre Ejemplo Resultado

Nombre Ejemplo Resultado Ejemplo (con $a = 25 y $b = 5)

También podría gustarte