Construcción página web
-
Upload
ociel-lopez-jara -
Category
Internet
-
view
118 -
download
0
Transcript of Construcción página web
![Page 1: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/1.jpg)
CREACIÓN DE
PÁGINAS
WEB Profesor Ociel López Jara
![Page 2: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/2.jpg)
¿WEB
o
INTERNET?
![Page 3: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/3.jpg)
Internet
![Page 4: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/4.jpg)
WEB
Sigla de la expresión
inglesa World Wide Web,
'red informática mundial',
sistema lógico de acceso
y búsqueda de la
información disponible en
Internet, cuyas unidades
informativas son las
páginas web
![Page 5: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/5.jpg)
SITIO WEB PÁGINA WEB
Es una
localización en la
www que
contiene
documentos
organizados
jerárquicamente.
Esos
documentos son
las páginas web.
Una página
web es parte
de un sitio
web. Así un
sitio puede
tener muchas
páginas web.
![Page 6: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/6.jpg)
Cómo se crea
UNA
página
Web?
¿
![Page 7: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/7.jpg)
el lenguaje utilizado para la
creación de páginas web es el
Hyper Text Markup
Language,
más conocido como HTML.
![Page 8: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/8.jpg)
Las páginas web pueden ser
vistas por el usuario mediante un tipo de
aplicación llamada navegador. Podemos decir por
lo tanto que el HTML es el lenguaje usado por los
navegadores para mostrar las páginas webs al
usuario
![Page 9: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/9.jpg)
Los navegadores
![Page 10: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/10.jpg)
Este lenguaje nos permite
aglutinar textos, sonidos e
imágenes y combinarlos a
nuestro gusto.
Además, y es aquí donde
reside su ventaja con respecto
a libros o revistas, el HTML
nos permite la
introducción de referencias a
otras páginas por medio de
los enlaces hipertexto.
![Page 11: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/11.jpg)
¿qué se necesita para hacer una
página con HTML?
![Page 12: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/12.jpg)
Un archivo HTML (una página) no
es más que un texto.
Es por ello que para programar en
HTML necesitamos un editor de
textos.
![Page 13: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/13.jpg)
Es recomendable usar el Bloc de notas que viene
con Windows, u otro editor de textos sencillo.
Hay que tener cuidado con algunos editores más
complejos como Wordpad o Microsoft Word, pues
colocan su propio código especial al guardar las
páginas y HTML es únicamente texto plano.
![Page 14: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/14.jpg)
![Page 15: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/15.jpg)
Cuando se crear una página con
el Bloc de Nota, se debe guardar
con la extensión “.html”
![Page 16: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/16.jpg)
<p>Sintaxis del HTML</p>
![Page 17: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/17.jpg)
El HTML es un lenguaje de marcas que
basa su sintaxis en un elemento de
base al que llamamos etiqueta.
Apertura <etiqueta>
Cierre </etiqueta>
![Page 18: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/18.jpg)
A través de las etiquetas
vamos definiendo los
elementos del documento,
como enlaces, párrafos,
imágenes, etc.
Así pues, un documento HTML
estará constituido por texto y
un conjunto de etiquetas para
definir la forma con la que se
tendrá que presentar el texto y
otros elementos en la página.
![Page 19: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/19.jpg)
Todo lo que esté entre las etiquetas sufrirá
el efecto que ellas representan.
Ejemplo:
Las etiquetas <b> y </b> definen un texto en
negrita. Si en nuestro documento HTML
escribimos una frase con el siguiente código:
<b>Esto está en negrita</b>
Y el resultado será:
Esto está en negrita
![Page 20: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/20.jpg)
Las etiquetas <p> y </p> definen un párrafo.
Si en nuestro documento HTML
escribiéramos:
<p>Hola, estamos en el párrafo 1</p> <p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo
![Page 21: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/21.jpg)
<p>partes de un documento HTML</p>
![Page 22: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/22.jpg)
un documento HTML ha de estar
delimitado por la etiqueta
<html> y </html>
Dentro de este documento,
podemos asimismo distinguir dos
partes principales:
![Page 23: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/23.jpg)
El encabezado, delimitado por <head>
y </head> donde colocaremos
etiquetas de índole informativo como
por ejemplo el titulo de nuestra página.
El cuerpo, delimitado por las etiquetas
<body> y </body>, que será donde
colocaremos nuestro texto e imágenes
delimitados a su vez por otras
etiquetas como las que hemos visto.
![Page 24: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/24.jpg)
El resultado es un documento con la
siguiente estructura:
<html>
<head> Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son
importantes para catalogarla: Titulo, palabras clave, etc
</head>
<body> Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el
navegador: Texto e imágenes
</body>
</html>
![Page 25: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/25.jpg)
<html>
<head>
formato básico de HTML y uso
de etiquetas
</head>
</html>
![Page 26: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/26.jpg)
HTML en un lenguaje de marcas, lo que
significa que es una forma de codificar un
documento que, junto con el texto,
incorpora etiquetas o marcas que contienen
información adicional acerca de la
estructura del texto o su presentación.
Equivale a dictar un texto para que alguien
lo escriba según el formato y contendido
que se desea.
![Page 27: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/27.jpg)
Etiqueta inicial Etiqueta final contenido
Etiqueta final
contenido etiqueta
inicial
<title> Mi página </title>
<p align=‘center’> Párrafo 1 </p>
Etiqueta inicial con
argumento
atributo variable
![Page 28: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/28.jpg)
Las etiquetas se pueden anidar.
En este caso se debe tener
cuidado para poner primero la
etiqueta de cierre de la última
etiqueta de hayamos considerado
<etiqueta1> <etiqueta2> Hola mundo </etiqueta2></etiqueta2>
![Page 29: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/29.jpg)
Formato de texto
<font face="Arial" color="#0000FF" size="5"> Hola mundo </font>
Etiquetas de formato de texto
![Page 30: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/30.jpg)
Algunas etiquetas que se deben tener presente y de uso
general:
<p> Separador de párrafos, sus atributos son align=“left” o “right” o “center”.
<br> Salto de una línea
<hr> Línea Horizontal, atributos: width=% del ancho de la
pantalla, size=grosor, align=alineación.
Por defecto es de color negra, 100% del ancho de la
pantalla y grosor 1
<center> Centrado de un bloque
![Page 31: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/31.jpg)
<!–- comentario -->
Cuando se desea incluir un comentario que no
se mostrará en ninguna parte y que solo sirva
para ordenar o entender mejor las instrucciones
creadas, se usa el siguiente formato:
![Page 32: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/32.jpg)
atributos de la página
![Page 33: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/33.jpg)
La páginas HTML pueden construirse
con varios atributos que permiten darle
un aspecto a toda la página, como por
ejemplo el color de fondo.
![Page 34: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/34.jpg)
Estos
atributos se
definen en la
etiqueta
<body> y,
como
decíamos son
generales a
toda la página
bgco lo r : especificamos
un color de fondo para la
página. El color de fondo
que podemos asignar con
bgcolor es un color plano,
es decir el mismo para
toda la superficie del
navegador.
background : sirve para
indicar la colocación de
una imagen como fondo de
la página.
Ejemplos:
![Page 35: Construcción página web](https://reader031.fdocumento.com/reader031/viewer/2022021813/587c21071a28abb5068b63d9/html5/thumbnails/35.jpg)
Profesor Ociel López Jara
Departamento de Metodología de la Investigación e Informática Educacional
Facultad de Educación
Universidad de Concepción Chile