Elementos básicos de la página web

El lenguaje de marcado de hipertexto es el lenguaje estándar para describir el contenido y la apariencia de las paginas en www.Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto que es el formato estándar de las paginas web.

HTML

Dinámica, otorga un conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estatico,un lenguaje interpretado por parte del cliente (como java script) es decir se puede trabajar con aplicaciones que aparte de contener objetos y exentos se procesan por el cliente dentro del agregado web

Pasos para crear un sitio web

1.- Define el objetivo- debes determinar exactamente porque quieres crear una pagina

2.-Determina la estructura del sitio-Haz una lista de todas las cosas que quieres incluir .Prepara un mapa estructural del sitio web.

3.-Decide la apariencia de la pagina-Haz el diseño y el diagrama de la ubicación de los objetos de la pagina hasta que tengas algo que te guste.

4.-Considera el diseño-Para esto debes tener en cuenta lo siguiente.

*Que tu pagina sea compatible con diferentes navegadores

*La excelente pagina que has pasado horas diseñando pueda tardar horas en cargase, si ese es el caso los invitados no esperaran e irán a otra parte.

5.-Escoger el editor

6.-Busca y junta los objetos-imágenes, logos, animaciones, sonidos, películas que se vean al utilizar en tu pagina web.

7.-Crea el código para cada objetivo y guardadoconextencion .html

8.-Abra el navegador tu pagina elaborada y ahora como funciona tu código

9.-Para eventuales modificaciones, no es necesario volver a abrir cada vez el navegador.

*Vuelve al editor del texto

*Modificar el código html

*Guarda el archivo

*utilizar el menú ver actualizar el navegador y oprima f5 para ver la pagina con los cambios

10.-Publica la pagina web

Encabezados del documento

Hay 6 niveles de titulo

<h> titulo principal con letras mas grandes </h>

Atributo Align

El atributo align tiene 4 valores: left, rigth, center, justify

Cuerpo del documento

El marcador body tiene los sig, atributos importantes:

Bgcolor =valor hexadecimal que corresponde a un color, define el color del fondo que se aplica a toda la pagina

Ejemplo<Body Bgcolor = #00ffff> es lo mismo como <Body Bgcolor=Cyan>

Background(=imagen) define una imagen como mosaico de fondo de la pagina :

<Body text=”#f0000”> o <Body Link=”red”> Define el color del vincula visitado

<Body vlink=”ffff00”> o <Body vlink=”yellow”> Define el color del vinculo visitado

<Body Alink=”#0000ff> o <Body Alink=”blue”> Define el color del vincula activo

<Html>

<body>

<html>

Esto significa color de fondo azul oscuro del vincula verde pardo del vincula activado blanco del vincula visitado rojo naranja

Evita que la imagen de fondo se desplace: <body background=”carro.jpg Bgproperities=fixed>

Leftmargin= (valor en pixeles) –define el margen izq de la pagina

Tocpmargin=(valor en pixeles)-define el largo superior de la pagina

Margin#E16ht(=valor en pixeles)-define la altura del margen de la pagina

Marginwidth(=valor en pixeles)-define el anchor de la pagina

Trabajo con texto

<p> Nuevo párrafo>/p>

<p align=”left>párrafo alineación a la izquierda</p>

<p align=”center>párrafo centrado</p>

<p align=”rigth>párrafo alineado a la derecha </p>

<br> nueva línea

<Hr>Dibuja una línea horizontal

<pre>texto pre formateado</pe> se utiliza para desplegar el texto exactamente como fue escrito guardando, espacios, tabulaciones etc.

Estilos lógicos

<em>texto con énfasis</em>

<strong>texto strong</strong>

<code>código con espacio igual entre las lecturas>/code>

<samp>incluye salida </samp>

<kbd>despliega una definición</dfn>

<abbr>texto abreviado</abbr>

<cite>citación</cite>

Estilos físicos

<b>texto en negritas</b>

<i>texto inclinado</i>

<u>texto subrayado</u>

<s>texto tachado</s>

<big>texto con letras mas grandes</big>

<small>texto con letras mas pequeñas</small>

<blin>texto parpadeante</blink>

<marquee>texto que se mueve</marquee>

<sub>texto súper índice</sub>

<ttt>texto con anchura igual de las letras como la maquina

Alineación del texto <Div>

También puede ser definida mediante el marcador esto etiqueta agrupa los objetos dentro de ella y crea una subdivisión en el documento en la que se mantiene una misma alineación. Puede ser alineado a la izquierda a la derecha centrada o justificado

Ejemplo

<Div align=alright>Esto es un texto alineado a la derecha</Div>

Convinacion de formato de texto

<I><u><b> texto negritas subrayado e inclinado <I><u><b>

Para cambiar el tipo de tamaña y color del texto se utiliza el marcador font.

Color.- Define el color del texto. Valor con numero hexadecimal

Size.-Define el tamaño

Face.-Define el tipo de letra

Ejemplo

<Front color=#00ff00 size=5 face=arial>Texto coloreado, tamaño 5 y tipo de letra arial</font>

Para dar movimiento de texto se usa el marcador<marquee>

Atributos

Behavior-Muestra el comportamiento de sroll o slide

Bgcolor-Numero#rr66bb o nombre del color destinado

Direction-muestra la dirección del movimiento down,left,right,up

Heigh-muestra la altura del texto en porcentaje

Loop-determina el color del movimiento del texto un numero

Lista con viñetas

<ut>

<li>primer objetivo en la lista </li>

<ul>

Atributos

Ultype=disc>

<ultype=disc>

<ultype=square>

Especifica el tipo de viñeta (cuadro,circulo.disco)entre las diferentes tipos

Lista enumerada

<ol>

<Li>primer objeto en la lista </li>

<Li>segundo objeto en la lista </li>

</ol>

Imagen

Para incluir una imagen en las paginas web utilizamos el marcador <img>.La sintaxis es:

<imgsrc>=amigos,jpg>

(la imagen tiene que estar en la misma carpeta donde tenemos la pagina web)

Atributps

WIDTH:Determina el ancho de la imagen en piroles

Height:Determine la altura de la imagen

Para cambiar las dimensiones de la imagen utiliza <imgsrc=mariposa.gif width=140 height=100

Border: Muestra un marco alrededor de la

Ejemplo:

<imgsrc=mariposa.gif width=140 height=100 border>

Align: alinea y acomoda los elementos de html

<imgsrc=mariposa.gif>

</div>

Para poner texto por un costado de la imagen

<p><imgsrc=niña.jpg>texto</p>

<p><imgsrc=niña.jpg>align=top>texto en la parte superior</p>

<p><imgsrc=niña.jpg>align=middle>texto en la parte media</p>

<p><imgsrc=niña.jpg>align=bottom>texto en la parte inferior</p>

<p>texto izquierdo<imgsrc=niña.jpg>texto derecho</p>

Sonido y video

<emberedsrc=chiste.mpg>

<embedsrc=chiste.waw>

Hipervínculos

Para crear un hipervínculo se usa el marcador <a> y <la> que viene dando de la palabra anchor el recurso se muestra en el atributo principal hrdef la sintaxis para el hipervínculo

<a href = #inicio> da clic aquí para ir al inicio </a>

Hipervínculo externo

Texto 1 <La> este es un vinculo que nos abre la otra pagina existente

<La Href=Http:// www.google.com> texto 1 <La> este es un vinculo que nos dirige a un sitio web

Tablas

Para crear una tabla se utiliza los siguientes marcadores

<table> crear tabla

<tr> indica inicio de una tabla

<td> indica inicio de una celda asi se tornan las columnas

<Html>

<Head>

<title>tablas</title>

</head>

<body>

<td>

<td> Enero </td>

<td> Febrero </td>

<td> Marzo </td>

</tr>

<td> Abril </td>

<td> Junio </td>

</tr>

<td> Julio </td>

<td> Agosto </td>

<td> Septiembre </td>

</tr>

<a HREF=”curriculum. HTML>curriculum</a> jrba3s@gmail.com

Formularios

LA FORMA BASICA DEL FORMULARIO ES:

<FORM>

<INPUT>

</INPUT>

</FORM>

Cuadro de texto

Sintaxis:

Este ejemplo se muestra un cuadro de texto tamaño 30, longitud maxima 50.

Tambien se usa el cuadro de texto para la contraseña del usuario:

Elaborar el siguiente código.

<html>

<head>

<title>Trabajo</title>

</head>

<body>

<form>

Nombre:

Contraseña:

</form>

</body>

</html

Boton de opcion

Ejemplo:

<input type=radio name=”boton”> Opcion 1

<input type=radio name=”boton” checked> Opcion 2

<input type=”reset”>Limpia el formulario

Area de Texto.

Contiene mas espacio parea escribir, si el texto se llena aparecen barras de desplazamiento

<textarea name=”comentarios” rows=”8” cols=”60”>Escribe tus comentarios</textarea>

Lista o menú desplegable.

Permite seleccionar varias opciones

Codigo:

<option selected value=”Front page”>Front Page</option>

<option selected value=”Dreamweaver”>Dreamweaver</option>

<option selected value=”Mozilla Composer”>Mozilla composer</option>

</select>

CMP

Páginas

Apuntes

Elementos básicos de la página web

HTML

Pasos para crear un sitio web

Encabezados del documento

Atributo Align

Trabajo con texto

Estilos físicos

Alineación del texto <Div>

Atributos

Lista con viñetas

Atributos

Lista enumerada

Imagen

Hipervínculos

Tablas

Contador de Visitas

Vistas de página en total