Creación de Páginas Web

CONCEPTOS BASICOS DE PROGRAMACION EN HTML Y DE INTERNET

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

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

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

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

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

¿ 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 ?

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)

Ejemplo:

http://www.google.com

Protocolo World Wide Web

Dominio

NombreExtensión

Ejemplo:

http://es.kioskea.net/contents/internet/protocol.php

ProtocoloDirectorioDominio Archivo

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

HTTP, FTP, DHCP, ARP, entre otros

Protocolos

HTTP: HyperText Transfer Protocol

FTP (File Transfer Protocol)

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.

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.

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

Ejemplo:

Dirección IP nombre fácil de recordar

  66.102.7.104 Google.com

Dominios gratis:

Dominios gratis:

Dominios gratis:

Dominios gratis:

Estilo de programación en la web:

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

<html> <head>

<title> </title></head> <body>

Cuerpo de la página. </body>

</html>

Estructura interna de una página HTML

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?

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>

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)

Comentario

<!- esto es un comentario ->

<! comentario

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

Caracteres especiales

Caracteres especiales

Caracteres especiales

Espaciado:

Salto de linea:

&nbsp;

Ejemplo: <h1> Tiene&nbsp; &nbsp; &nbsp; tres espacios</h1>

<BR>

Ejemplo: <h1> Primera linea <br> segunda linea</h1>

Cambio de parrafo:

Ejemplo: <p>Primer parrafo <p> segundo parrafo</p>

Atributos de texto

Listas

1- Listas no numeradas

2- Listas numeradas

3- Listas de definiciones

1- Listas no numeradas

2- Listas numeradas

Type “A” “a” “I” “i” “1”:

3- Listas de definiciones

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>

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:

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)

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

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.

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>