Scribd
Cargar
4 vistas

Programacion Web I Parte I

Cargado por

nick19302002
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
4 vistas

Programacion Web I Parte I

Cargado por

nick19302002
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 34

Programación Web I

Sitios web
• Los sitios web son archivos que los usuarios descargan con sus navegadores
desde ordenadores remotos. Cuando un usuario decide acceder a un sitio
web, le comunica al navegador la dirección del sitio y el programa descarga
los archivos, procesa su contenido y lo muestra en pantalla.

• Un sitio web es un conjunto de páginas web que están conectadas entre sí


y se encuentran alojadas en un servidor web. Este espacio virtual es
accesible para cualquier persona con conexión a internet, que lo visite por
medio de un navegador web. Se compone de diferentes tipos de
contenido, como texto, imágenes, videos y elementos interactivos.
Archivos
• Los sitios web están compuestos de múltiples documentos que el
navegador descarga cuando el usuario los solicita. Los documentos
que conforman un sitio web se llaman páginas y el proceso de abrir
nuevas páginas navegar (el usuario navega a través de las páginas del
sitio).
• Para desarrollar un sitio web, tenemos que crear un archivo por cada
página que queremos incluir. Junto con estos archivos, también
debemos incluir los archivos con las imágenes y cualquier otro
recurso que queremos mostrar dentro de estas páginas (las imágenes
y otros medios gráficos gráficos se almacenan en archivos aparte).
Archivos en un sitio wewb

CSS y JavaScript
Formulario de contacto

Código y la información correspondiente a la página principal


Elementos de un sitio web
• Bloques • Menú
• Texto
• Imágenes y videos
• Secciones
• Espacios • Hipervínculos
• Hosting • Call to Action
• Dominio
• Plataforma
• Barra de búsqueda
• Home • Mapa de navegación
• Header • Formas de contacto
• Body
• Footer
Elementos de diseño de un sitio web
• Bloques: están constituidos por elementos fundamentales (texto,
imágenes y videos)
Dominios y URL
Lenguajes
• HTML5 incorpora tres características (estructura, estilo, y
funcionalidad), con lo que integra tres lenguajes de programación
independientes: HTML, CSS, y JavaScript.
HTML
• HTML (HyperText Markup Language) es un lenguaje compuesto por
un grupo de etiquetas definidas con un nombre rodeado de
paréntesis angulares. Los paréntesis angulares delimitan la etiqueta y
el nombre define el tipo de contenido que representa.
• Por ejemplo, la etiqueta <html> indica que el contenido es código
HTML. Algunas de estas etiquetas son declaradas individualmente
(por ejemplo, <br>) y otras son declaradas en pares, que incluyen una
de apertura y otra de cierre, como <html></html> (en la etiqueta de
cierre el nombre va precedido por una barra invertida).
HTML
• Las etiquetas individuales y las de apertura pueden incluir atributos
para ofrecer información adicional acerca de sus contenidos (por
ejemplo, <html lang="es">). Las etiquetas individuales y la
combinación de etiquetas de apertura y cierre se llaman elementos.
CSS
• Las propiedades CSS se pueden agrupar usando llaves. Un grupo de
una o más propiedades se llama regla y se identifica por un nombre
llamado selector.
Se declara una regla con tres propiedades:
width, margin y backgroundcolor. Esta regla se
identifica con el nombre body, lo que significa
que las propiedades serán
aplicadas al elemento <body>.

Reglas CSS
JavaScript
• JavaScript es un lenguaje de programación
• JavaScript difiere de los demás lenguajes en que puede realizar tareas
personalizadas, desde almacenar valores hasta calcular algoritmos
complejos, incluida la capacidad de interactuar con los elementos del
documento y procesar su contenido dinámicamente.
• Para declarar código JavaScript dentro de un documento, HTML
ofrece el elemento <script>.
Código JavaScript
Lenguajes de servidor

• Existen varios lenguajes disponibles para crear código ejecutable en


los servidores. Los más populares son PHP, Ruby, y Python.

Código ejecutable en el servidor


HTML- estructura
• Esta estructura define el espacio dentro del documento donde el
contenido estático y dinámico es posicionado y es la plataforma
básica para toda aplicación.
Html - Tipo de documento
• Lo primero que debemos hacer en la construcción de un documento
HTML es indicar su tipo. Para asegurarnos de que el contenido de
nuestros documentos sea interpretado correctamente como código
HTML, debemos agregar la declaración <!DOCTYPE> al comienzo del
archivo.
• Esta declaración, similar en formato a las etiquetas HTML, se requiere
al comienzo de cada documento para ayudar al navegador a decidir
cómo debe generar la página web. Para documentos programados
con HTML5, la declaración debe incluir el atributo html,
Ejemplo <!DOCTYPE>
Atención
• La línea con la declaración <!DOCTYPE> debe ser la primera línea de
su documento, sin ningún espacio o código previo.
Elementos estructurales
• <html>—Este elemento delimita el código HTML. Puede incluir el
atributo lang para definir el idioma del contenido del documento.
• <head>—Este elemento se usa para definir la información necesaria
para configurar la página web, como el título, el tipo de codificación
de caracteres y los archivos externos requeridos por el documento.
• <body>—Este elemento delimita el contenido del documento (la
parte visible de la página).
Idioma del sitio
Este elemento puede
incluir el atributo lang para declarar el idioma
en el que vamos a escribir el contenido de la
página

Existen varios valores disponibles para el atributo


lang, incluidos en para inglés, es para español, fr
para francés, entre otros.
Cabecera <head>

Entre las etiquetas <head> debemos


definir el título de la página web,
declarar el tipo de codificación de
caracteres, facilitar información general
acerca del documento, e incorporar los
archivos externos con estilos y códigos
necesarios para generar la página.
Cuerpo <body>
Definición de la cabecera
• <title> Este elemento define el título de la página.
• <base> Este elemento define la URL usada por el navegador para
establecer la ubicación real de las URL relativas. El elemento debe
incluir el atributo href para declarar la URL base. Cuando se declara
este elemento, en lugar de la URL actual, el navegador usa la URL
asignada al atributo href para completar las URL relativas.
• <meta> Este elemento representa metadatos asociados con el
documento, como la descripción del documento, palabras claves, el
tipo de codificación de caracteres, etc.
Definición de la cabecera
• <link> Este elemento especifica la relación entre el documento y un
recurso externo (generalmente usado para cargar archivos CSS). El
elemento puede incluir los atributos href para declarar la ubicación
del recurso, rel para definir el tipo de relación, media para especificar
el medio al que el recurso está asociado (pantalla, impresora, etc.), y
type y sizes para declarar el tipo de recurso y su tamaño (usado a
menudo para cargar iconos).
• <style> Este elemento se usa para declarar estilos CSS dentro del
documento.
• <script> Este elemento se usa para cargar o declarar código JavaScript
Ejemplo de sitio con header
• https://www.w3schools.com/
Head- Etiqueta <TITLE>
Encabezado del documento HTML
• La etiqueta <title> “titulo”, sirve para definir el título del documento,
siendo requerida u obligatoria en todos los documentos.
El formato de la etiqueta es el siguiente:
<head>
<title>Titulo del documento</title>
<head>
Head - Etiqueta <META>
• La etiqueta <meta> sirve para definir datos (“metadatos”) sobre el
documento web o html, estos datos no son visualizados por el
navegador, ya que se encuentran incluidos en la sección de
encabezado y se suelen utilizar para establecer valores como palabras
claves (“ keywords “), descripción de la página, autor de la misma,
última fecha de modificación, etc.
• Los buscadores suelen utilizar las keywords para establecer valores de
búsqueda para la página, mientras que otros tipos de datos podrían
ser utilizados por otros tipos de servicio web
• El formato de la etiqueta es el siguiente:
• <meta atributo=valor >
Head - Etiqueta <META> Atributos =valor >
charset
• <META> <meta charset = “conjunto de caracteres “>
Atributos <meta charset=”UTF-8”

<meta name="description"content="Descripción aquí" />


<!--Muestra una descripción de nuestro sitio en los
buscadores-->

<meta name="robots"content="index,follow" />


<!--Le dice a los robots de los navegadores que rastreen
nuestra página
y la muestran en las búsquedas-->
Head - Etiqueta <META> Atributos =valor >
• <META> Atributos <title>Mi página</title>
<!--Título de nuestra página, no confundir con los H1-H6.
Este título es el que ves en la pestaña del navegador-->

<meta name="viewport"content="width=device-width,
initial-scale=1.0" />
<!--Nos ayuda a trabajar en proyectos reponsive-->

<link rel="stylesheet"href="./css/style.css">
<!--Linkea/Enlaza archivos de estilos u otros archivos que
necesitemos en nuestro proyecto

También podría gustarte