Presentacion de la tarea 6 Mi primera pagina web

Presentación de la tarea 6. Mi primera pagina web.
Carrera: Ing. Telecomunicaciones.
Docente: David Enrique Mendoza Gutiérrez.
Alumno: Eduardo Isita Tito.
Periodo académico: séptimo semestre.
Institución: Universidad de Aquino Udabol.
Sede : Santa Cruz –Bolivia.
Fecha: 13/05/2021.
1

Mi primera pagina web.
 El objetivo de este curso es aprender a crear páginas web, partiendo desde cero y usando herramientas gratuitas.
 El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas
de Hypertexto) y es el que se sigue usando en la actualidad para la creación y edición de sitios web.
2
Materia: Tecnología de la comunicación.
Alumno: Eduardo Isita Tito

Etiquetas en html
 El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la
sintaxis de las etiquetas.
 Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por
ejemplo <body>,<title> o <p>.
 Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo
/. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre,
está el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del
tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí
mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta,
como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br />
escribe un salto de línea.
3

Estructura de una pagina.
 Todo el documento HTML viene contenido dentro
de la etiqueta <html></html>.
 Dentro de la etiqueta <html>, encontramos dos
subdivisiones, la cabecera, delimitada por las
etiquetas <head></head> y el cuerpo, delimitado
por las etiquetas <body></body>. Por lo tanto, el
aspecto básico de cualquier página web, es el
siguiente:
4

Estructura de una pagina.
 La etiqueta <head> contiene información sobre la página. Por ejemplo
contiene etiquetas que pueden decir de qué va la página, el título que
debe de mostrar en la barra del navegador, o código javascript y estilos,
que pueden estar en el propio encabezado o como llamadas a otros
archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el
navegador.
 Iremos viendo lo que puede contener esta etiqueta a medida que nos haga
falta. De momento sólo comentaremos que obligatoriamente debe de
contener la etiqueta <title></title>, que contiene el título de la página,
que es lo que se ve en la barra de título del navegador.
 En el <body> encontramos el contenido de la página, lo que se ve a través
del navegador: texto, imágenes, enlaces, tablas, etc...
5

Estructura del texto.
 Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez estará dentro del
<html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML, los párrafos se identifican con la
etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan
dar formato al texto, pero no podemos tener otros párrafos anidados.
 A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el
<h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el
rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel,
etc. El texto de cada apartado iría contenido en párrafos <p></p>.
 Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran
como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código
fuente escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si queremos poner varios espacios
seguidos, utilizaremos el código html para el espacio,  .
 El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea
pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo, utilizamos la
etiqueta <br />.
6

Estructura de texto.
7

Imágenes en HTML
 Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar
información como parte del propio diseño de la página. Pueden ser fotografías o gráficos
creados por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar
dos programas gratuitos de este tipo: Gimp e Inkscape.
 Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG.
Puedes ver con más detalle cada formato en este básico Básico.
 Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />.
8

Imágenes en HTML
9

Hipervínculos en HTML
 Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra
página del mismo sitio, o a una página de un sitio distinto. Esto es un enlace o
hiperenlace (en inglés link o hyperlink) también llamado hipertexto o hipervínculo.
 Un enlace se diferencia del texto normal porque al colocar el cursor encima, este
cambia de forma y pasa de una flecha a una mano. También es muy frecuente que
los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el
HTML.
 En HTML, el enlace se identifica con la etiqueta <a></a>.
10

Estilo de la pagina.
 Hasta el momento sabemos añadir titulo, texto , imágenes y hipervínculos.
 Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más
detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del
texto y las propiedades que se le pueden aplicar: color, fuente, tamaño,
inclinación, grosor, decoración y mayúsculas/minúsculas.
 Color:
 El color se expresa con la propiedad color. El valor que puede tomar esta
propiedad se puede expresar de varias formas:
 Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.
11

Estilo de una pagina.
 Fuente
 Podemos elegir la fuente (o tipo de letra) a través del atributo font-
family. Podemos indicar cualquier fuente que queramos, teniendo en
cuenta que si incluye espacios, debe de ir entre comillas dobles. Por
ejemplo font-family: arial; o font-family: "Times New Roman";.
 Pero hemos de tener en cuenta que puede que quien vea la página no
tenga instalada la fuente que queramos. Para evitar esto, existen cinco
fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-
serif,cursive,fantasy, monospace. Esto no quiere decir que sólo debamos
de utilizar estas cinco. El valor de font-family pueden ser varias fuentes,
separadas por comas. El navegador elegirá, comenzando por la derecha,
la primera disponible, por lo que es conveniente terminar por una
genérica.
12

Estilo de una pagina.
 Tamaño
 El tamaño se regula a través de la propiedad
font-size. Podemos utilizar cualquiera de las
unidades de tamaño, pero lo más frecuente es
utilizar px (pixels), o porcentajes % o em, estas
dos últimas son tamaños relativos al tamaño
de la fuente del elemento que está por
encima. 100% o 1em, sería el mismo tamaño,
mientras que 200% o 2em sería el doble y 50%
o 0.5em sería la mitad.
13

Inclinación
 Podemos poner una fuente en cursiva utilizando la
propiedad font-style. Puede tomar uno de los siguientes
valores:
 normal. Coloca el estilo de forma normal, sin inclinación.
 oblique. Inclina el texto.
 italic. Además de inclinarlo, susituye la fuente por su
versión en itálica si está disponible. Aunque la mayoría
de los navegadores no lo hacen.
14

Grosor.
 Podemos aumentar el grosor de la
fuente, lo que equivaldría a ponerla en
negrita, utilizando font-weight. Puede
tomar los siguientes valores:
 normal. El texto no se muestra en
negrita.
 bold. El texto se muestra en negrita.
 Nota. En teoría se pueden expresar
distintas intensidades de negrita, pero
los navegadores no las muestran.
15

Bordes.
 Podemos agregar un borde alrededor de un elemento html, con la propiedad
border. Esta propiedad engloba las tres propiedades del borde.
 color, un color RGB. Se define con la propiedad border-color. Por ejemplo, border-
color: blue; o border-color: #F37760;.
 grosor, normalmente expresado en px. se define con la propiedad border-width.
Por ejemplo, border-width: 2px;.
 estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera
de los siguientes, que definimos con la propiedad border-style: none, dotted,
dashed, solid, double, Groove, etc.
16

Márgenes.
 Los elementos html tienen dos márgenes. El
margen externo y el margin interno. Ambos se
refieren a la la distancia hacia uno u otro lado con
respecto al borde del elemento, a su límite,
independientemente de que el borde sea visible o
no.
 El margen externo se regula con la propiedad
margin. El margen exterior es la distancia mínima
que habrá entre el borde exterior del elemento y el
elemento siguiente, por cada uno de sus cuatros
lados.
18

Editor web.
 Un editor Web sería cualquier aplicación que nos permita crear, editar y
guardar una página Web. Como ya hemos visto, una página no es más que
un archivo de texto, por lo que cualquier programa que nos permita editar
texto, puede funcionar como un editor Web.
 Podemos considerar tres categorías de editores Web: Editores de texto,
editores HTML, editores WYSIWYG, también Dreamweaver.
19

Diseño y usabilidad.
 El cómo presentamos la información es muy importante para un sitio web.
Y esto lo conseguimos con un buen diseño.
 Comodidad para el visitante, Accesibilidad , Usabilidad, Transmitir, Bonito y
original y Simple.
 Estos aspectos debemos de tenerlos en cuenta, pero no podemos
pretender aplicar cada uno al 100%. Por ejemplo, un diseño más original
implicará utilizar más elementos, y que todos aparezcan correctamente
ordenados, lo que lo hará más complejo. Y al final un buen diseño
depende de la temática de la página y de lo que queramos transmitir con
ella.
20

Maquetación de una pagina web.
 La maquetación es la distribución de los elementos en nuestra página. Piensa en
una página web cualquiera. Seguro que distingues algunos elementos, como
encabezados, columnas, menús laterales, etc.
 Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas
(<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se
dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas
es que generaban un página muy encorsetada, y el código se volvía complejo de
entender. Además, algunos buscadores encontraban problemas al analizar la
estructura de la página.
 Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando
capas (<div>), también llamadas divisiones o contenedores. La colocación de las
capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que
podamos pasar de un diseño con un menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.
21

Java script
 JavaScript es un lenguaje de programación que el navegador es
capaz de interpretar y ejecutar sobre la página web.
 La mayoría de las veces, en vez de escribir cada vez el código
JavaScript directamente en el evento, nos resultará más útil definir
una función.
 En una definición muy coloquial, una función sería como asignar
un nombre a un conjunto de instrucciones, al que luego nos
referiremos con ese nombre. Estas instrucciones, realizaran una
acción, nos devolverá un valor, etc...
 Resultan especialmente útiles cuando queremos utilizar las mismas
instrucciones en varios lugares, ya que sólo tendremos que
escribirlas una vez.
23

Formularios y PHP
 Hemos visto como crear una página web, darle formato y
añadirle funcionalidades con JavaScript, pero esto es sólo el
comienzo. Una página web puede hacer muchas más cosas,
puede mostrar los datos que obtiene es ese instante de una
Base de Datos que reside en un servidor de Internet, puede
comunicarse con otras webs, puede utilizar mapas,
información del tiempo, etc.
 En definitiva, una página web puede mostrar información
actualizada cada vez que se ejecuta. Es lo que se conoce como
páginas dinámicas, en contraposición a las páginas estáticas,
que siempre muestran la misma información.
 Para crear páginas dinámicas hay que emplear un lenguaje de
programación web, como Java, .NET, o PHP. Si quieres ver las
diferencias entre estos lenguajes visita este tema avanzado
24

API
 Aunque si combinamos HTML, JavaScript y PHP
podemos hacer muchas cosas con nuestras páginas,
existen aún otras fuentes de datos que residen fuera de
nuestra página y que podemos incorporar a nuestra
web mediante las APIs.
 Lo que nos ofrece una API es una serie de
procedimientos para acceder e interactuar con
aplicaciones o datos realizadas por terceros. Es decir, en
vez de desarrollar esas funciones con un lenguaje de
programación y almacenarlas en nuestro sitio, creamos
una "ventana", a través de la cual mostramos esa
aplicación. Además, nos ofrece una serie de funciones,
normalmente en JavaScript con las que podemos
interactuar con esa ventana.
25

Publicación.
 Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para
hacerla accesible a los millones de internautas de todo el mundo. Hoy en día nos parece
normal que cualquier persona del planeta pueda ver nuestras páginas web en Internet
pero hasta la década de 1990 a nadie se le hubiera ocurrido soñar que sería tan fácil y
tan barato poder comunicarse con tanta gente.
 Básicamente para publicar hace falta tener acceso a un servidor de Internet y disponer
de una forma de subir los archivos al servidor. También es conveniente saber lo que es
un dominio de Internet y cómo hacer que nuestra página sea encontrada por los
buscadores.
 También podemos publicar en un servidor local instalado en nuestro ordenador, de esta
forma podremos probar las páginas dinámicas sin subirlas a Internet, por ejemplo,
mediante WAMP o XAMPP podemos instalar un entorno con el servidor APACHE, PHP,
MySQL en Windows. Para Linux XAMPP o LAMP.
26

Servidores.
 Para que tu página se vea desde Internet simplemente tiene
que estar almacenada en un servidor de Internet. Es decir,
debes disponer de espacio en un servidor para poder subir tus
archivos, donde cualquiera pueda verlos.
 Cualquiera puede tener un servidor de Internet, sólo hace falta
un ordenador, una dirección IP fija, una conexión telefónica y
un software adecuado, como el servidor Apache, que además
es gratuito. Esto explica el gran crecimiento inicial de Internet.
Han surgido miles de servidores que comparten su
información por el simple gusto de aprender y enseñar. Y
muchos más que esperan hacer negocio en la red.
27

Presentacion de la tarea 6 Mi primera pagina web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Presentacion de la tarea 6 Mi primera pagina web

Similar a Presentacion de la tarea 6 Mi primera pagina web (20)

Más de Eduardo Isita Tito

Más de Eduardo Isita Tito (6)

Último

Último (20)

Presentacion de la tarea 6 Mi primera pagina web