Introducción
Dirección de EYDH
Dirección de EYDH
Internet
es la red de redes de comunicación mundial
o global y se puede utilizar diferentes servicios como sitios o páginas web,
correo electrónico, mensajes sms, transferencia de archivos ftp, telnet. Para utilizar
alguno de los servicios como ver paginas o sitios web es necesario un
computadora con una conexión a un proveedor de servicios de internet. La
computadora debe tener un browser o navegador de internet como firefox, explorer
de Windows u otro. Las páginas o sitios
web se crean programando en algún lenguaje como html y son alojados en un
servidor web, una vez instalados pueden dar servicios de enviar las páginas a
otras computadoras cliente que lo solicitan utilizando la dirección de internet
del servidor. También se puede solicitar información de algún tema, en este
caso inicia el navegador firefox y buscador como google, se introduce el tema que se desea ver o consultar, el buscador
google despliega varios sitios del tema deseado, se puede seleccionar algún sitio web
haciendo click o presionando el botón derecho con el mouse o la pantalla de un
teléfono inteligente y aparecerá la página del sitio web. Se puede continuar visitando
otros sitios web o páginas web hasta obtener toda la información deseada.
Las páginas
web son la parte fundamental de sitio web. Para crear las páginas del web se
puede utilizar un lenguaje de programación desde el más sencillo como html, hasta
los más avanzados como java, php, asp entre otros.
Iniciaremos
la programación de internet con el lenguaje HTML (Hyper Text Mark Languaje) que
significa lenguaje de marcas de hyper texto. Realmente no es un lenguaje de
programación, es un lenguaje de presentación que lo interpreta un navegador y
lo presenta en una pantalla de una computadora o de un teléfono inteligente. El
lenguaje html está constituido por
marcas y etiquetas, la etiqueta de inicio esta encerradas entre el signo menor
y mayor < etiqueta > y termina con el signo menor, una diagonal, la
etiqueta y el signo menor </etiqueta>.
Las marcas y etiquetas son interpretadas por el navegador y la página en
html es desplegada en la pantalla de la
computadora o teléfono celular. Toda página web en html tiene la siguiente estructura de una etiqueta
de html, un encabezado head, un cuerpo body y sus respectivas marcas finales.
<html>
<head>
<title>Nombre
de la página</title>
</head>
<body>
Encabezados,
párrafos de texto, imágenes, hipervínculos, etc.
</body>
</html>
Html. Identifica todo el documento o
página web e inicia con <html> y debe terminar con </html>
Head- Esta parte es la cabeza de la
página que contiene el titulo que aparece en la parte superior de la página
desplegada por el browser, también contiene definiciones de estilos (style) y
funciones de java script.
Body.
Es el cuerpo de la página web y puede definir características de todo el
documento como el color de fondo (background ).
Comentarios. Se representa por <!-- Comentarios..... --> No los interpreta el navegador.
Comentarios. Se representa por <!-- Comentarios..... --> No los interpreta el navegador.
Encabezados. El cuerpo (body) de la página
puede contener texto con encabezados, desde el más pequeño <h6> y
</h6> hasta el más grande <h1> y </h1>:
<h1>Encabezado
h1</h1>
<h2>Encabezado
h2</h2>
<h3>Encabezado
h3</h3>
<h4>Encabezado
h4</h4>
<h5>Encabezado
h5</h5>
<h6>Encabezado
h6</h6>
Párrafos. También contiene texto como
párrafos que inicia con <p> y finaliza con </p>:
<p>Este
es un párrafo p de texto que puede contener varias líneas y para separar líneas
se utiliza la etiqueta <br> o <br /> también puede contener texto o
palabras con varios estilos de itálicas o cursiva <i>palabras
itálicas</i> texto en negrita
<b>palabras en negrita</> para palabras subrayadas
<u>palabras subrayadas</u> y existen otros tipos.</p>
Tipos o fonts. Los encabezados h y
párrafos p pueden cambiar su tipo de letras, color, tamaño de 1 a 7, con <font>
y </Font>:
<font
bgcolor=”color de fondo” face=”veredana, arial” size=”8”><h1>Encabezado
h1</h1></Font>
Centro. El encabezado h1 puede
centrarse con <center> y </center>:
<center><font
color=”blue” face=”veredana, arial” size=”5”><h1>Encabezado
h1</h1></Font></center>
Estilos. El font y center puede
sustituirse por la etiqueta estilo (style) de css en línea:
<h1
style=”Font-family:verdana, arial;”>Encabezado h1</h1>
<p style=”Font-family:verdana,
arial; color:red; font-size:10px;”>Este es un párrafo que es definido por
style< p />
<h1
style=”text-align:center;”>Encabezado h1 centrado</h1>
Listas. Para organizar listas como listas
ordenadas ol y listas desordenadas ul:
Una lista
ordenada es marcada por una secuencia de números desde 1:
<ol>
<li>elemento1</li>
<li>elemento1</li>
<li>elemento1</li>
</ol>
Una lista
desordenada, cada elemento contiene un marca de un pequeño círculo negro:
<ul>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ul>
Enlaces. Enlaces o vínculos a sitios web, al presionarlo se dirige al
enlace web y si target=”_blank” se despliega en otra ventana del vavegador, si no
tiene target por default se despliega en la misma ventana:
<a
href=http://www.google.com target=”_blank”>Enlace
a google</a>
Imagen. Insertar imágenes con
determinados tamaños de ancho (width) y altura (higth), la imagen puede estar en
formato jpg, gif, png y otros. L a
imagen se puede alinear (align) a la izquierda (left) o derecha (right). La
imagen puede estar en un directorio de
la computadora o en una dirección o enlace de internet. Con alterno (alt) puede desplegar
un comentario al estar cargando la imagen o al no encontrar la imagen.
<img
src=”imagen.jpg” alt=”Esta es una imagen” widdth=”100” hight=”100” align=”left”>
Un enlace
web puede contener una imagen como referencia:
<a
href=http://www.google.com><img
src=”imagen.jpg” width=”50” hight=”50”></a>
Tablas. Los datos se pueden organizar
como tablas de filas (tr) y columnas (td) y encabezados de columnas (th), se puede
definir el borde (border) y color de la tabla.
<tabla
border=”0” bgcolor=”green”>
<tr>
<th>Encabezado
de columna1</th>
<th>Encabezado
de columna2</th>
</tr>
<tr>
<td>Dato
de fila1 columna1</td>
<td>Dato
de fila1 columna2</td>
</tr>
<tr>
<td>Dato
de fila2 columna1</td>
<td>Dato
de fila2 columna2</td>
</tr>
</table>
Marco interno o Iframe. Se puede
insertar marco (frame) de texto en la
página con iframe, va a desplegar pagina.html en una ventana incrustada en la
página definida con un ancho (width) y altura (higth).
<iframe
src=”pagina.html” width=”100” hight=”100”></iframe>
Cuando la
pagina está en una dirección de interne iframe queda así.
<iframe
src=”pagina.html” width=”100” hight=”100 name=”nom-pagina””></iframe>
<p><a
href=http://www.google.com
target=”nom-pagina”>Enlace a google</a></p>
Marco. Se utilizan para desplegar
varios documentos o páginas web en la misma ventana. La ventana se puede
organizar con diferentes marcos horizontales y verticales. El siguiente ejemplo
crea dos marcos verticales, el primero utiliza el 25% y el segundo un 75% de la
ventana.
<frameset
cols=”25%, 75%”>
<frame
src=”pagina1.html”/>
<frame src=”pagina2.html”/>
</frameset>
Formas. Es posible hacer peticiones a
los usuarios de internet de datos particulares utilizando las formas y utilizar
el método obtener (get) o enviar (post) para transmitir y
recibir datos, (get) se utiliza para forma con pocos datos y (post) para forma con muchos datos. La forma contiene campos
de texto, password, botones de radio, cuadros de checar, botón de submit o envió
y otros. La acción corresponde a la página en lenguage php u otro, en el servidor y guardar los datos en un
archivo, en una base de datos u otra operación que se realiza con los datos y puede
ser retornados los resultados al cliente.
<form
action=”http://eydh.co.ne/acción.php” method=”post”>
Nombre:<input
type=”text” name=”nomb” size=”20” maxlength=”60”/> <br>
Apellido:<input
type=”text” name=”apell” size=”20” maxlength=”60” /><br>
Password:<input
type=”password” name=”pwd” /><br>
Sexo:<br
/>
<input
type=”radio” name=”sexo” value=”femenino”/>Femenino<br>
<input
type=”radio” name=”sexo” value=”masculino”/>Masculino<br>
Estado
civil:<br />
<input
type=”checkbox” name=”estado” value=”soltero”/>Soltero<br>
<input
type=”checkbox” name=”estado” value=”casado”/>Casado<br>
Enviar
forma:<input type=”submit” value=”Submit”/> <br>
</form>
Estas son
las etiquetas principales de html, hay más características de ellas, pero con
esto es suficiente para desarrollar y programar una aplicación sencilla en
html.
No hay comentarios:
Publicar un comentario