ELECTIVA I Semana 1 Clase 1 PDF

ELECTIVA I
DESARROLLO EN AMBIENTE WEB
Docente: Ing. Esp. Oyarbe María
Agosto 2022
Desarrollo web se basa en el Diseño y
DESARROLLO WEB construcción de Pagina Web, a
través de la utilización de un
lenguaje; para así obtener un Sitio
Web.
El desarrollo es un proceso que abarca
dos faces importantes el diseño y la
programación.
 Diseño: aspecto visual para lograr

la interactividad con el usuario.
Creatividad del diseñador (vistoso,
atractivo, fácil manejo)
 Programación: y aunque no es
necesario sabe programar debemos
tener la lógica de lo que se pretende
obtener, que cumpla con los
requerimientos del usuario y de
respuesta a las acciones o objetivos
que el cliente solicita.
Ing. Esp. Oyarbe María

PARA PUBLICAR UNA PÁGINA EN INTERNET
DEBEMOS SEGUIR UNOS PASOS:
No uses toda la gama de

colores en tu página web
(Emplear la Teoría de color). Procura que tu diseño esté
Tomar ideas basado en el tamaño de la
pantalla
Haz que tu sitio sea fácil de

Mantén tu sitio actualizado. navegar.
Promociona tu web: en los

principales motores de Administra tus imágenes de
búsqueda y directorios una forma adecuada.
(google, yahoo, etc.) y redes
sociales.
COMPONENTE PARA EL DESARROLLO DE
UNA PAGINA WEB
Para desarrollar una pagina web necesitaremos

construir unos documentos hipertexto, para diseñar
la pagina web se requiere: un computador
obviamente un editor de textos (notepad ++,
sublime text…), un software de navegación
(Chrome o Firefox), un servidor web para que
puedan estar accesibles desde Internet.

COMO FUNCIONA
Pagina Web
Interpreta la instrucción
Navegador web
Acceso desde un computador

EL LENGUAJE UTILIZADO COMO BASE
PARA CREAR LAS PÁGINAS WEB
HTML
(HyperText Markup Language)
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML «Lenguaje para Marcado de Hipertexto».

Es el lenguaje que te permite describir y dar forma a las
páginas Web. Un documento HTML estará constituido por
texto y un conjunto de instrucciones o marcas para definir la
forma con la que se tendrá que presentar el texto y otros
elementos en la página.
A través de las marcas se define los elementos del documento
de Hipertexto, es decir, un texto presentado de forma
estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información
relacionadas, y con inserciones multimedia (gráficos,
sonido...).
La descripción se basa en especificar en el texto la estructura
lógica del contenido (títulos, párrafos de texto normal,
enumeraciones, definiciones, citas, etc) así como los diferentes
efectos que se quieren dar (cursiva, negrita, o un gráfico
determinado).

HTML (HYPERTEXT MARKUP LANGUAGE)
El HTML es un lenguaje de marcas que basa su

sintaxis en un elemento de base al que llamamos
etiqueta. Así pues, con las etiquetas incluidas en
archivos de texto que definen la estructura de un
documento; los navegadores leen estos archivos de
texto e interpretan esas etiquetas para determinar
cómo desplegar la página Web.

ESTRUCTURA BÁSICA DE UN
DOCUMENTO HTML
El HTML es un archivo de texto que contiene

instrucciones que pueden ser interpretadas por
un navegador de Internet. Estas instrucciones
son denominadas Etiquetas. La etiqueta
presenta frecuentemente dos partes:
 Una apertura de forma general <etiqueta>
 Un cierre de tipo </etiqueta>
El formato general a seguir:

<etiqueta>contenido</etiqueta>

ESTRUCTURA BÁSICA DE UN DOCUMENTO
HTML
Una página web está compuesta de 2 partes: el
encabezamiento y el cuerpo de la página. Existen tres
etiquetas fundamentales, las mismas que deben estar
incluidas en el archivo HTML de manera obligatoria. Estas
tres etiquetas que no deben faltar son:
 <html> </html> Indica al navegador que el documento texto que está

leyendo es un documento. HTML. Esta etiqueta se abre al inicio del
archivo y se cierra al final del mismo.
 <head> </head> Acá se detalla el encabezado de la página WEB.
Esta etiqueta se abre luego de <html>.
 <body> </body> Cuerpo de la página donde se despliega el contenido
global. Esta etiqueta se abre luego de cerrar el encabezamiento con
</head> y se extiende hasta el
 Final de la página, cerrándose antes de </HTML>.

LA ESTRUCTURA BÁSICA DE UN DOCUMENTO
HTML
<HTML> Indica el inicio del documento
<HEAD> Indica el inicio de la cabecera
<TITLE> Inicio del título del documento
</TITLE> Final del título del documento
</HEAD> Final de la cabecera
<BODY> Inicio del cuerpo del documento
Instrucciones HTML
</BODY> Final del cuerpo del documento
</HTML> Final del documento

ELEMENTOS (ETIQUETAS - ATRIBUTOS - CONTENIDOS)
Elementos
Etiqueta de Apertura Contenido Etiqueta de Cierre
<p align="center"> Bienvenido a Electiva I </p>

Nombre Valor
Atributo Contenido Etiqueta de Cierre

HTML 5
Define los estándares de diseño y desarrollo web
tanto para equipos de escritorio como dispositivos
móviles. Es sinergia de 3 tecnologías:
HTML (Estructura y contenido)
CSS (Diseño y presentación)
JavaScrip (interactividad y funcionalidad)

CUAL ES LA FUNCIONALIDAD DE LOS
ESTÁNDARES?

HTML 5
Partes básicas Elementos HTML 5

 Encabezado <header>
 Pie <footer>
 Zona de navegación <nav>
 Secciones de la página <section>
 Artículos <article>
 Información que sale del flujo normal del contenido, como

definiciones o aclaraciones, ampliación de la
información...<aside>

REGLAS BÁSICAS SOBRE LA SINTAXIS
DEL HTML
Los archivos HTML deben tener una extensión

htm o html, es decir que debe guardarse como
un documento html (ej. misitio.htm o
misitio.html).
 Para crear un archivo HTML solo hace falta un
editor de texto (Bloc de nota, Notepad ++,
Write o Sublime Text).
 Un archivo HTML está compuesto por
etiquetas.
 Las etiquetas le dicen al navegador(Ej: Internet
Explorer, Firefox, Google Chrome, Opera, Safary,
etc.) como mostrar la página Web.

DEL HTML
 Todos los archivos que constituye una página web

debe estar organizados en carpetas según el tipo
(imágenes, estilos, videos, entre otros).
 Es importante resalta nuevamente que un
documento HTML es un lenguaje que basa su
sintaxis en un elemento de base al que llamamos
etiqueta. La etiqueta presenta frecuentemente
dos partes: Una apertura de forma general
<etiqueta> Un cierre de tipo </ etiqueta>, el
cual se debe tener siempre presente ya que si no
se cierra la etiqueta puede ocurrir un error.
DEL HTML
 Las etiquetas están encerradas entre los signos

"<" y ">".
 Generalmente vienen en pares <p> y <⁄p>.
 La primera es de apertura <> y la segunda de
cierre </>.
 El texto que se encuentra entre dos etiquetas es
el contenido del elemento.
 Las etiquetas no son sensibles a las mayúsculas y
minúsculas, o sea <b> es lo mismo que <B>.
 Las etiquetas son marcas de un comando HTML
encerrado entre dos signos <menor y mayor> se
cierra con una barra invertida </cierre>
<marca [atributos]> ……………[</Marca>]
DEL HTML
 Hay marca para todo el documento otras para un
fragmento del texto.
 Las marcas pueden contener de manera opcional o
obligatorio atributos o modificadores
 Entre otras cosas, el manejo de estas etiquetas nos
permitirá:
 Definir la estructura lógica del documento HTML.
 Aplicar distintos estilos al texto (negrita, cursiva, ...).
 La inclusión de hiperenlaces, que nos permitirán acceder a
otros documentos relacionados con el actual.
 La inclusión de imágenes y ficheros multimedia (gráficos,
vídeo, audio).

DEL HTML
 Muchas etiquetas llevan atributos. Los mismos proveen de
mayor información a los elementos HTML.
 Los atributos siempre van con la estructura: nombre="valor".
 Los atributos siempre van en la etiqueta de apertura.
 Los valores siempre hay que ponerlos entre comillas.
Ejemplo:
<marca atributos1= “valor1” atributo2= “valor2”> [</Marca>]
 Las etiquetas se pueden anidar o combinar, siempre y cuando el
cierre sea el correcto. Ejemplo:
Correcto
<H1> <I> Hola </I> </H1>
Incorrecto
<H1> <I> Hola </H1> </I>
FORMATEO ELEMENTAL DE TEXTOS
 Encabezamientos
<H1></H1>...........<H6></H6>
 Salto de párrafo
<P></P>
 Centrado
<CENTER></CENTER>
 Negrita y Cursiva
<B></B>
<I></I>

FORMATEO ELEMENTAL DE TEXTOS
Atributos de etiquetas
 Alineación de párrafos
 Izquierda: ALIGN=left (opción por defecto)
 Derecha: ALIGN=right
 Centrado: ALIGN=center

EJERCICIO PRACTICO
Desarrollar un archivo html con la estructura

basicas
<html>
<head>
<title> Mi Web</title>
</head>
<body>
Bienvenidos a mi Web
</body>
</html>

“Ten la seguridad que lograras lo que te propones.
Deja de lado la inseguridad y la duda, tu actitud
puede más que eso. Tienes lo necesario para ganar,
eres constante, disciplinado y además eres un
conocedor del tema. Confía en tu talento, sabes que
lo tienes, al margen de prepararte para este nuevo
reto, sé que conseguirás tu objetivo. Solo
concéntrate y llénate de vibras positivas, veras que
tendrás éxito.
Que la suerte te acompañe hasta

lograr lo deseado”.
Confía en tu talento y creatividad, para diseñar
Tu Pagina Web
Tendrás éxito.
Doc. Oyarbe María

ELECTIVA I Semana 1 Clase 1 PDF

Cargado por

Copyright:

Formatos disponibles

ELECTIVA I Semana 1 Clase 1 PDF

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

ELECTIVA I Semana 1 Clase 1 PDF

Cargado por

Copyright:

Formatos disponibles

ELECTIVA I

DESARROLLO EN AMBIENTE WEB

Docente: Ing. Esp. Oyarbe María

 Diseño: aspecto visual para lograr

Ing. Esp. Oyarbe María

No uses toda la gama de

Haz que tu sitio sea fácil de

Promociona tu web: en los

Para desarrollar una pagina web necesitaremos

Ing. Esp. Oyarbe María

Acceso desde un computador

Ing. Esp. Oyarbe María

HTML «Lenguaje para Marcado de Hipertexto».

Ing. Esp. Oyarbe María

El HTML es un lenguaje de marcas que basa su

Ing. Esp. Oyarbe María

El HTML es un archivo de texto que contiene

 Un cierre de tipo </etiqueta>

El formato general a seguir:

Ing. Esp. Oyarbe María

 <html> </html> Indica al navegador que el documento texto que está

Ing. Esp. Oyarbe María

Ing. Esp. Oyarbe María

<p align="center"> Bienvenido a Electiva I </p>

Ing. Esp. Oyarbe María

HTML (Estructura y contenido)

CSS (Diseño y presentación)

JavaScrip (interactividad y funcionalidad)

Ing. Esp. Oyarbe María

Ing. Esp. Oyarbe María

Partes básicas Elementos HTML 5

 Zona de navegación <nav>

 Secciones de la página <section>

 Información que sale del flujo normal del contenido, como

Ing. Esp. Oyarbe María

Los archivos HTML deben tener una extensión

Ing. Esp. Oyarbe María

 Todos los archivos que constituye una página web

 Las etiquetas están encerradas entre los signos

Ing. Esp. Oyarbe María

Ing. Esp. Oyarbe María

Ing. Esp. Oyarbe María

Desarrollar un archivo html con la estructura

Ing. Esp. Oyarbe María

Que la suerte te acompañe hasta

También podría gustarte