Paginas WEB Creación, actualización y manipulación de paginas web.
Paginas Web
-
Upload
emilson-omar-acosta -
Category
Documents
-
view
220 -
download
1
description
Transcript of Paginas Web
![Page 1: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/1.jpg)
Creación de Páginas Web
CONCEPTOS BASICOS DE PROGRAMACION EN HTML Y DE INTERNET
![Page 2: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/2.jpg)
Es un conjunto de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas que la componen funcionen como una red única, de alcance mundial.
Internet
![Page 3: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/3.jpg)
Es el nombre de un documento o información electrónica y que puede ser accedida mediante un navegador para mostrarse en un monitor de computadora o dispositivo móvil. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto.
Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto
Página Web
![Page 4: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/4.jpg)
Es un ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras.
Los Servidores almacenan información en forma de páginas web y a través del protocolo HTTP lo entregan a petición de los clientes (navegadores web) en formato HTML.
Servidor
![Page 5: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/5.jpg)
Es un conjunto de archivos electrónicos y páginas Web referentes a un tema en particular, con un nombre de dominio y dirección en Internet específicos.
Los sitios web están escritos en código HTML, es un sitio en la World Wide Web que contiene documentos (páginas web). Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos..
Sitio Web
![Page 6: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/6.jpg)
Es un programa que permite ver la información que contiene una página web.
El navegador interpreta el código HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.
El navegador
![Page 7: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/7.jpg)
¿ Cómo sabe el servidor que información retornar a la computadora?
¿ Cómo una computadora puede acceder a una página de un servidor ?
![Page 8: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/8.jpg)
Dirección en Internet de determinado recurso, la cual permite que el navegador la encuentre y la muestre de forma adecuada. Por ello el URL combina el nombre del ordenador que proporciona la información, el directorio donde se encuentra, el nombre del archivo, y el protocolo a usar para recuperar los datos.
URL (Localizador Uniforme de Recursos)
![Page 9: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/9.jpg)
Ejemplo:
http://www.google.com
Protocolo World Wide Web
Dominio
NombreExtensión
![Page 10: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/10.jpg)
Ejemplo:
http://es.kioskea.net/contents/internet/protocol.php
ProtocoloDirectorioDominio Archivo
![Page 11: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/11.jpg)
Es un conjunto de reglas y procedimientos que deben respetarse para el envío y la recepción de datos a través de una red
Protocolos
El TCP/IP es la base de Internet, y sirve para enlazar computadoras que utilizan diferentes sistemas operativos, incluyendo PC, minicomputadoras y computadoras centrales
![Page 12: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/12.jpg)
HTTP, FTP, DHCP, ARP, entre otros
Protocolos
HTTP: HyperText Transfer Protocol
FTP (File Transfer Protocol)
![Page 13: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/13.jpg)
WWW
Es un sistema de distribución de información basado en hipertexto enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web que pueden contener texto, imágenes, videos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces.
![Page 14: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/14.jpg)
DominioEs un nombre de un servidor de Internet que facilita recordar de forma más sencilla la dirección IP de un servidor de Internet.
Cada dominio tiene que ser único en Internet. Un solo servidor web puede servir múltiples páginas web de múltiples dominios, pero un dominio sólo puede apuntar a un servidor.
![Page 15: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/15.jpg)
Debido a que Internet se basa en direcciones IP, y no en nombres de dominio, cada servidor web requiere de un servidor de nombres de dominio (DNS) para traducir los nombres de los dominios a direcciones IP.
Cada dominio tiene un servidor de nombre de dominio primario y otro secundario.
El propósito principal del sistema de nombres de dominio (DNS):
Un nombre fácil de recordar se traduce a su dirección IP
![Page 16: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/16.jpg)
Ejemplo:
Dirección IP nombre fácil de recordar
66.102.7.104 Google.com
![Page 17: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/17.jpg)
Dominios gratis:
![Page 18: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/18.jpg)
Dominios gratis:
![Page 19: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/19.jpg)
Dominios gratis:
![Page 20: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/20.jpg)
Dominios gratis:
![Page 21: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/21.jpg)
Estilo de programación en la web:
![Page 22: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/22.jpg)
HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje predominante para la elaboración de páginas web.
HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>)
HTML
![Page 23: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/23.jpg)
<html> <head>
<title> </title></head> <body>
Cuerpo de la página. </body>
</html>
Estructura interna de una página HTML
![Page 24: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/24.jpg)
Un editor de texto(gedit, wordpad, notepad)
Opcional a esto tenemos los editores WYSIWYG “lo que ves es lo que obtienes” (Dreamweaver, FrontPage)
Navegador Web(Firefox, Google Chrome, Internet explorer ,etc.)
¿Qué debemos tener instalado para trabajar con HTML?
![Page 25: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/25.jpg)
Encabezamiento
<h1> <h2> <h3> <h4> <h5> <h6>
ATRIBUTO VALOR
align Right, left, center, justify
Ejemplo:
<h2><img src=“imagen.jpg”> Encabezamiento con imagen</h2>
<h1 align=“center”> encabezamiento con h1 centrado</h1>
![Page 26: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/26.jpg)
Atributos y valores del body
<BODY background="fondo.gif">
<BODY bgcolor="blue"> (para darle color al fondo
de pantalla)
<BODY text="red">
<BODY link=#rrggbb ó nombre> (para darle color al
texto de los enlaces)
<BODY vlink=#rrggbb ó nombre. (para darle color a
los enlaces una vez visitados)
![Page 27: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/27.jpg)
Comentario
<!- esto es un comentario ->
<! comentario
![Page 28: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/28.jpg)
Párrafos<p align=“center”> Mi párrafo centrado</p>
<pre> Mi párrafo </pre>
Párrafos preformateados
ATRIBUTO VALOR
align Right, left, center, justify
![Page 29: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/29.jpg)
Caracteres especiales
![Page 30: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/30.jpg)
Caracteres especiales
![Page 31: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/31.jpg)
Caracteres especiales
![Page 32: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/32.jpg)
Espaciado:
Salto de linea:
Ejemplo: <h1> Tiene tres espacios</h1>
<BR>
Ejemplo: <h1> Primera linea <br> segunda linea</h1>
Cambio de parrafo:
Ejemplo: <p>Primer parrafo <p> segundo parrafo</p>
![Page 33: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/33.jpg)
Atributos de texto
![Page 34: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/34.jpg)
Listas
1- Listas no numeradas
2- Listas numeradas
3- Listas de definiciones
![Page 35: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/35.jpg)
1- Listas no numeradas
![Page 36: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/36.jpg)
2- Listas numeradas
Type “A” “a” “I” “i” “1”:
![Page 37: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/37.jpg)
3- Listas de definiciones
![Page 38: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/38.jpg)
HIPERENLACESNos permiten acceder de manera directa a otrosdocumentos HTML independientemente de su ubicación
<a href="URL a la que se accede">Texto del hiperenlace</a>
Sintaxis:
Ejemplos:
<a href=“mipagina.html">Ir a pagina 2</a>
<a href="http://http://www.ingenieria-sistemas-unah.net/">Portal
Ing en Sistemas</a>
![Page 39: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/39.jpg)
IMAGENES
<IMG src="URL de la imagen" alt="Texto alternativo"align="top/middle/botton/left/rigth" border="Tamaño"height="Tamaño" width="Tamaño“>
Sintaxis:
![Page 40: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/40.jpg)
TABLAS
<TABLE ><TR >
<TD>Contenido de la celda </TD></TR>
</TABLE>
Sintaxis:
Ejemplo:
<TABLE border="1"><TR >
<TD>fila1 columna1 </TD> <TD>fila1 columna2 </TD>
</TR> <TR >
<TD>fila2 columna1 </TD><TD>fila2 columna1 </TD>
</TR></TABLE>
<TR> Fila(s)<TD> Columna(s)
![Page 41: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/41.jpg)
Atributos de TABLASATRIBUTO VALOR ESPECIFICACION
border n Borde de la tabla
cellpadding n separación entre el contenido de la celda conel borde de la misma
cellspacing n Separacion entre celdas
bgcolor "#rrggbb" o "nombre del color"
colorde fondo para todas las celdas
![Page 42: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/42.jpg)
Atributos de filas
<TR align="left/right/center" valign="top/middle/bottombgcolor="#rrggbb ó nombre">
<TD align="left/right/center/justify“ valign="top/middle/bottom bgcolor="#rrggbb ó nombre" width="n"rowspan="n" colspan="n">
Atributos de celdas
Rowspan una celda concreta abarque más de una fila
Colspan una celda se expanda a más de una columna.
![Page 43: Paginas Web](https://reader038.fdocuments.ec/reader038/viewer/2022110318/563db805550346aa9a8fd4f1/html5/thumbnails/43.jpg)
CSSCSS externa
<head><link rel="stylesheet" type="text/css"
href="mystyle.css" /> </head>
CSS interior <head>
<style type="text/css">body {background-
color:yellow}p {color:blue}
</style></head>
CSS en linea<p style="color:blue;margin-left:20px">This is a paragraph.</p>