Introducción A PHP

INTRODUCCIÓN A PHP
Por: Diego Alexander López Gómez

Docente de Análisis y Desarrollo de Software
2017
DEFINICIÓN DE HTML
HTML es un lenguaje de marcado que se utiliza para
el desarrollo de páginas de Internet. Se trata de la sigla
que corresponde a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto, que podría
ser traducido como Lenguaje de Formato de
Documentos para Hipertexto.
BREVE HISTORIA DEL HTML
Este lenguaje fue desarrollado por la Organización
Europea de Investigación Nuclear (CERN) en el año
1945 con la finalidad de desarrollar un sistema de
almacenamiento donde las cosas no se perdieran, que
pudieran ser conectadas a través de hipervínculos.
Primeramente crearon un dispositivo llamado “memex”,
el cual era considerado como un suplemento para la
memoria.
ETIQUETAS DEL HTML
<!doctype html> : Define que el documento esta bajo el estándar de
HTML 5.
<html> :Representa la raíz de un documento HTML o XHTML. Todos los
demás elementos deben ser descendientes de este elemento.
<head> : Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title> : Define el título del documento, el cual se muestra en la barra de
título del navegador o en las pestañas de página.
<link> : Usada para enlazar JavaScript y CSS externos con el documento
HTML actual.
<meta> : Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
<style> : Etiqueta de estilo usada para escribir CSS en línea.
ETIQUETAS DEL HTML
<script> :Define ya sea un script interno o un enlace hacia un script
externo. El lenguaje de programación es JavaScript.
<body> : Representa el contenido principal de un documento HTML.
Solo hay un elemento <body> en un documento.
<section> : Define una sección en un documento.
<nav> : Define una sección que solamente contiene enlaces de
navegación
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> : Los elemento de cabecera
implementan seis niveles de cabeceras de documentos; <h1> es la
de mayor y <h6> es la de menor importancia. Un elemento de
cabecera describe brevemente el tema de la sección que introduce.
ETIQUETAS DEL HTML
<header> : Define la cabecera de una página o sección.
Usualmente contiene un logotipo, el título del sitio Web y
una tabla de navegación de contenidos.
<footer> : Define el pie de una página o sección.
Usualmente contiene un mensaje de derechos de autoría,
algunos enlaces a información legal o direcciones para
dar información de retroalimentación.
<p> : Define una parte que debe mostrarse como un
párrafo.
<hr> : Representa un quiebre temático entre párrafos de
una sección o articulo o cualquier contenido.
ETIQUETAS DEL HTML
<ol> : Define una lista ordenada de artículos.
<ul> : Define una lista de artículos sin orden.
<li> : Define un artículo de una lista enumerada.
<div> : Representa un contenedor genérico sin ningún
significado especial.
<a> : Representa un hiperenlace , enlazando a otro recurso.
<em> : Representa un texto enfatizado , como un acento de
intensidad.
<strong> : Representa un texto especialmente importante .
<span> : Representa texto sin un significado específico. Este
debe ser usado cuando ningún otro elemento semántico le
confiere un significado adecuado, en cuyo caso, provendrá de
atributos globales como class, lang, o dir.
<br> : Representa un salto de línea.
ETIQUETAS DEL HTML
<img> : Representa una imagen.
<iframe> : Representa un contexto anidado de navegación, es decir,
un documento HTML embebido.
<table> : Representa datos con más de una dimensión.
<col> : Representa una columna de una tabla.
<tbody> : Representa el bloque de filas que describen los datos de
una tabla.
<thead> : Representa el bloque de filas que describen las etiquetas
de columna de una tabla.
<tfoot> : Representa los bloques de filas que describen los resúmenes
de columna de una tabla.
<tr> : Representa una fila de celdas en una tabla.
<td>: Representa una celda de datos en una tabla.
<th> : Representa una celda encabezado en una tabla.
FORMULARIOS
<form> : Representa un formulario, consistendo de controles que
puede ser enviado a un servidor para procesamiento.
<label> : Representa el título de un control de formulario.
<input> : Representa un campo de datos escrito que permite al
usuario editar los datos.
<button> : Representa un botón .
<select> : Representa un control que permite la selección entre
un conjunto de opciones.
<option> : Representa una opción en un elemento <select>, o
una sugerencia de un elemento <datalist>.
<textarea> : Representa un control de edición de texto multi-
línea.
DEFINICIÓN DE CSS3
CSS significa Cascade Style Sheets, también llamado Hojas de
Estilo en Cascada. CSS es un lenguaje de marcado que se emplea
para dar formato a un sitio web. Es decir, funciona en conjunto con
los archivos HTML. Por esta razón, para crear un sitio web debes
saber tanto HTML como CSS.
Cabe agregar que el lenguaje CSS3 se puede aplicar en la misma
hoja en la que estás desarrollando un documento HTML, pero por
motivos de productividad se suele realizar en un documento aparte
con la extensión .css. Este documento se puede vincular a cada
página HTML que conforme el sitio web, es por ello que es más útil
realizar los estilos por separado.
MAQUETACIÓN BÁSICA
width: Ancho de un elemento.
height: Alto de un elemento.
vertical-align: Alineamiento vertical dentro de un elemento.
margin: Espacio que se añade entre el elemento y sus vecinos. Se
puede diferencia por lado (arriba, abajo, izquierda, derecha).
padding: Relleno interior que se añade en los bordes del A
diferencia de margin, cuenta para el tamaño del elemento.
float: Mueve el elemento todo lo posible hacia el lado indicado.
Esta propiedad se usa en el posicionamiento flotante de CSS. El
tema del posicionamiento en CSS no es trivial y conviene estudiar
cómo funciona antes de usar esta propiedad.
FUENTES Y TEXTO
font-family: Tipo de letra
font-size: Tamaño de letra
font-weight: Peso (normal, negrita, …)
font-style: Estilo (normal, cursiva, …)
text-decoration: “Decoraciones” como subrayado, tachado, etc.
text-align: Alineación del texto (izquierda, derecha, etc.)
text-transform: Mostrar un texto en mayúsculas, minúsculas o la
primera letra de cada palabra en mayúsculas.
alt: Un texto alternativo en una página web es el equivalente en texto de un objeto
no textual(img) y proporciona a los motores de búsqueda una descripción del objeto.
COLOR Y FONDOS
color: Color del elemento. Se puede especificar en
diferentes formatos como palabras predefinidas (red,
green, etc.) RGB o como valor hexadecimal.
background-color: Color del fondo del elemento.
background-image: Permite especificar una imagen de
fondo.
background-repeat: Permite usar una imagen a modo
de mosaico en diferentes modalidades.
box-shadow: Crear un efecto de sombra para un
elemento.
LISTAS Y BORDES
list-style-image: Usar la imagen especificada como viñeta para la
lista.
list-style-type: Diferentes estilos de viñetas y estilos de
numeración para elementos de lista.
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.)
border-radius: Permite crear esquinas redondeadas para un
elemento.
HOJAS DE ESTILO CSS INLINE
La primera opción consiste en usar el atributo “style” en un
elemento HTML tal como se puede ver aquí:
<h1 style=“font-family:Verdana; color:red”>Título de nivel 1</h1>
n este caso, no hay selector puesto que no hay elemento que

seleccionar, es el que es. Por tanto, se especifican simplemente las
propiedades a aplicar al elemento en cuestión. Este tipo de reglas
tienen mayor prioridad de todas las reglas.
HOJAS DE ESTILO CSS INTERNAS
La segunda opción es escribir las reglas dentro de un elemento
<style> dentro de esta etiqueta que, a su vez, se encontraría
dentro del elemento <head> de la página HTML.
Obviamente la desventaja es que en este caso las reglas sólo
son visibles para esa página concreta en las que se han
declarado y no se pueden usar para otras páginas.
<style media="screen">
p {color: yellow};
</style>
HOJAS DE ESTILO CSS EXTERNAS
La última opción es la más usad y consiste en crear uno o
varios ficheros con extensión “.css” en los cuales se declaran
las reglas CSS.
La manera de vincular estas reglas a una página HTML
consiste en referencia el fichero .css desde esa página. De
este modo se puede crear un fichero global para una web
entera y usarlo en todas las páginas que se quiera.
En este caso, la declaración también se incluye dentro del
elemento <head> y tiene el siguiente aspecto:
<link rel="stylesheet" type="text/css" href="/css/estilos-1.css" />

<link rel="stylesheet" type="text/css" href="/css/estilos-2.css" />

Introducción A PHP

Cargado por

Copyright:

Formatos disponibles

Introducción A PHP

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

Introducción A PHP

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIÓN A PHP

Por: Diego Alexander López Gómez

border: Añade un borde a un elemento y establece algunas

<h1 style=“font-family:Verdana; color:red”>Título de nivel 1</h1>

n este caso, no hay selector puesto que no hay elemento que

<link rel="stylesheet" type="text/css" href="/css/estilos-1.css" />

También podría gustarte