Tutorial para Crear Una Pagina HTML

TUTORIAL PARA CREAR UNA PAGINA HTML
Seguir uno a uno los siguientes items para crear una pagina html. Posterior a la ejecucion
de cada paso, ustedes estaran en la capacidad de crear su propia página.
Para su propio diseño deben innovar con su creatividad, al igual que el contenido de dicha
página.
1) Ingresar la estructura básica de una página HTML, al cual le agregaremos tres

campos mediante el uso de Marcos:
Recordar q cols indica el numero de columnas y las podría variar libremente, incluso puedo
trabajar con porcentajes o simplemente con pixeles. Lo mismo ocurre con rows que indican
las filas.
Recordar que al utilizar frameset, ya no es necesario el comando <body>
<FRAME src=" hace el llamamiento de las paginas alternas que vamos a trabajar posteriormente.
<FRAMESET> y </FRAMESET> indican el inicio y fin del marco.
Codigo:
<html>
<head>
<title>
Tutorial Pagina HTML
<title>
</head>
<FRAMESET cols="20%, 80%">

<FRAMESET rows="100, 200">
<FRAME src="pagina1.html">
</FRAMESET>
</FRAMESET>
</html>
2) Ahora crearemos la primera página, es decir, la pagina1.html. Ella se ubica en el primer marco.
Esta página la dedicaremos a hipervínculos:

Debemos abrir un nuevo documento en bloc de notas que se debe guardar con el nombre pagina1.html y
siempre tener en cuenta que todos los archivos estarán guardados en una carpeta de trabajo. Observemos que
para este caso se debe ingresar el <body>, y dentro de dicho body trabajaremos.
 Primero agregamos color de fondo a este marco, esto lo hacemos a través del comando <BODY
BGCOLOR="”>, entre las comillas se coloca el nombre del color que queremos, ej: <BODY
BGCOLOR="blue”>, para este caso el color de fondo elegido es el azul (blue):
<html>
<head>
<title>
Pagina de Enlaces
<title>
</head>
<body>
<BODY BGCOLOR="BLUE">
</body>
</HTML>
 Ahora es hora de ingresar el primer Hipervínculo:
Lo hacemos mediante el siguiente comando:

<a href="http://www.unipamplona.edu.co"target="dinamico"> Visita Unipamplona</a>
Notemos que el llamamiento se hace mediante <a href=” y luego se adiciona "target="dinamico">, lo
cual permite que el enlace se abra en una página diferente y, por último se puede agregar un comentario
que la persona podrá visualizar y cerramos con </a>
Entonces el código seria:
<html>
<head>
<title>
Pagina de Enlaces
<title>
</head>
<body>
<a href="http://www.unipamplona.edu.co"target="dinamico"> Visita Unipamplona</a>
</body>
</HTML>
De igual forma se pueden agregar los demás enlaces, observemos que hemos agregado el comando ,
dicho comando me permite hacer salto de línea:
<html>
<head>
<title>
Pagina de Enlaces
<title>
</head>
<body>
Enlaces Recomendados 
<a href="http://www.unipamplona.edu.co"target="dinamico"> Visita Unipamplona</a> 

<a href="http://www.eltiempo.com"target="dinamico"> Visita El tiempo</a> 
<a href="http://www.laopinion.com.co"target="dinamico"> Visita La Opinión</a> 
<a href="http://www.sena.edu.co"target="dinamico"> Visita El sena</a> 
</body>
</html>
3) Es el momento de crear nuestra segunda página la cual se ubicara en el segundo Marco.
Para ello abrimos un nuevo documento de Bloc de Notas y le daremos como nombre pagina2.html, en dicha
página vamos a ingresar una imagen.
El comando general es el siguiente:
<img src="imagenes\oso.jpg" style="width: 100%; height: 100%;"/>
Se hace el llamamiento de la imagen con <img src="” en nuestra carpeta de trabajo hemos creado
previamente una subcarpeta con el nombre de imágenes y dentro de ella se ha guardado una imagen con el
nombre oso.jpg. la extensión de la imagen es muy importante, para este caso el .jpg.
Luego con style="width: 100%; height: 100%;"/> se hace lo siguiente, style=width indica que la imagen
quedara centrada en el marco y luego definimos el ancho y alto del tamaño que abarcara la imagen.
Nuestra segunda página seria.

<html>
<head>
<title>
Pagina de Imagen
<title>
</head>
<BODY BGCOLOR="green">
<img src="imagenes\oso.jpg" style="width: 100%; height: 100%;"/>
</body>
</html>
4) Por último crearemos un nuevo documento de Bloc de Notas que llamaremos pagina3.html y que
guardaremos en nuestra carpeta de trabajo.
Esta página abarcara el contenido de nuestro tercer Marco. En este marco colocaremos un titulo, texto y una
tabla.
 Titulo.
TITULO</center>
font size=7 tamaño del texto
Color="blue" color del texto
face="arial" tipo de letra
<center> centra el texto
</center>
 Ingresar Texto
Simplemente ingresamos el texto seguidamente y utilizaremos para dar saltos y ordenar el texto.
 
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de

marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el
contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se
escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el
cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. 
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente
como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y
posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
 
 Ingresaremos una tabla simple como la vista en clase.
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Para terminar la página podemos ingresar más texto.
 
Primeras especificaciones 
La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas
HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991.[1] [2] Describe 22 elementos
comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen
en HTML 
Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal
hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación
de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una
Definición de Tipo de Documento SGML para definir la gramática.[4] El boceto expiró luego de seis meses,
pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar
imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito.
[5] Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de
marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como
tablas. 
En general la pagina 3 seria.
<html>
<head>
<title>
Pagina de texto y tabla
<title>
</head>
<BODY BGCOLOR="red">
TITULO</center>
 
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de
marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el
contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se
escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el
cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. 
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente
como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y
posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
 
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table> 
Primeras especificaciones 
La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas
HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991.[1] [2] Describe 22 elementos
comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen
en HTML 
Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal
hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación
de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una
Definición de Tipo de Documento SGML para definir la gramática.[4] El boceto expiró luego de seis meses,
pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar
imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito.
[5] Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de
marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como
tablas. 
</body>
</html>
NOTA
NO OLVIDEN CREAR SU PROPIA PAGINA Y CUALQUIER INQUIETUD AL CORREO

josesantiago8@gmail.com
Ing. JOSE DEL CARMEN SANTIAGO

Tutorial para Crear Una Pagina HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial para Crear Una Pagina HTML

Cargado por

Copyright:

Formatos disponibles

TUTORIAL PARA CREAR UNA PAGINA HTML

1) Ingresar la estructura básica de una página HTML, al cual le agregaremos tres

Recordar que al utilizar frameset, ya no es necesario el comando <body>

<FRAMESET> y </FRAMESET> indican el inicio y fin del marco.

<FRAMESET cols="20%, 80%">

Esta página la dedicaremos a hipervínculos:

 Ahora es hora de ingresar el primer Hipervínculo:

Lo hacemos mediante el siguiente comando:

Entonces el código seria:

<a href="http://www.unipamplona.edu.co"target="dinamico"> Visita Unipamplona</a> <br>

3) Es el momento de crear nuestra segunda página la cual se ubicara en el segundo Marco.

El comando general es el siguiente:

<img src="imagenes\oso.jpg" style="width: 100%; height: 100%;"/>

Nuestra segunda página seria.

<font size=7 color="blue" face="arial" <center>TITULO</center></font>

font size=7 tamaño del texto

Color="blue" color del texto

face="arial" tipo de letra

<center> centra el texto

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de

 Ingresaremos una tabla simple como la vista en clase.

Para terminar la página podemos ingresar más texto.

En general la pagina 3 seria.

Pagina de texto y tabla

<font size=7 color="blue" face="arial" <center>TITULO</center></font>

NO OLVIDEN CREAR SU PROPIA PAGINA Y CUALQUIER INQUIETUD AL CORREO

Ing. JOSE DEL CARMEN SANTIAGO

También podría gustarte