Curso de HTML Basico

CURSO DE HTML BASICO (OPERADOR WEB MASTER)
CAPITULO I: PRINCIPIOS BASICOS

Qu es HTML?: (Hiper Text Markup Language) significa: lenguaje de marcos de
hipertextos. Este lenguaje se basa en etiquetas (instrucciones que dicen al texto como deben
mostrarse) y atributos (parmetros que dan valor a la etiqueta). Este lenguaje no describe la
apariencia del diseo de un documento sino que ofrece a cada plataforma el poder de darle
un formato segn su capacidad y la de su navegador (tamao de la pantalla, fuente que
tiene instalada).
HTML tiene dos ventaja que la hace prcticamente impredecible a la hora de disear una
presentacin web: su compatibilidad y su facilidad de aprendizaje debido al reducido
nmero de etiquetas que usa. Bsicamente, los documentos escritos en HTML consta del
texto mismo del documento y las etiquetas que puedan llevar atributos. Esto llevado a la
prctica, vendra a ser:
<etiqueta><atributo> texto </atributo></etiqueta>
La etiqueta <etiqueta> activa el orden y esta otra </etiqueta> lo desactiva.
Nota: no todas las etiquetas tienen principio y final. (lo veremos mas adelante)
Caracterstica de HTML
Informacin por hipertexto: diversos elementos (texto o imagen) de la informacin

que se nos muestra en la pantalla estn vinculados con otras informaciones que
pueden ser de otras fuentes. Bastara ser clic sobre ellos para ver la otra informacin.
Grfico: en la pantalla aparecen simultneamente texto, imgenes
e incluso
sonidos.
Global: se puede acceder a el desde cualquier tipo de plataforma, usando cualquier

navegador y desde cualquier parte del mundo.
Pblico: toda su informacin esta distribuida en miles de ordenadores que ofrece su

espacio para almacenarla.
Dinmica: la informacin aunque este almacenada, puede ser actualizada por el que
la public, sin que el usuario deba utilizar su soporte tcnico.
Independiente: dada la inmensa cantidad de fuente, es independiente y libre.
Caracteres extendido en HTML: la manera de incluir los caracteres extendidos (cuyo

nmeros esta mas all del 127) es de la siguiente forma (los primeros 127 caracteres estn
contenidos en la tabala ASCIT)
Cdigo
´ &Acute;
ñ Ñ
¿
¡
º
&ordf
™ o&#153
©
®

Resultado
,
,
Espacio en blanco que no puede ser usado para saltar

de lnea
Caracteres de control: en HTML existen 4 caracteres de control que se usan para formar
etiquetas, establecer parmetros, etc. Para poder emplearlo debemos escribir el siguiente
cdigo.
Cdigo
<
>
&
"
Resultado
<
>
&
Captulo II: Una pgina web sencilla

Crear una pgina web local: tres son las etiquetas que describen la estructura general de un
documento y dan una informacin sencilla sobre l.
<HTML>: limitan el documento e indica que se encuentra escrito en este lenguaje.
<HEAD>: especifica el prologo del resto del archivo.
<TITLE>: ser utilizado por los marcadores del navegador e identificara el

contenido de la pgina.
<BODY>: encierra el resto del documento en el contenido.
Ahora vamos a crear nuestra primera pgina en la que vamos a empezar a utilizar etiqueta y
atributos, para ellos vamos a utilizar el bloc de notas.
Marca
<html>: lo primero que tenemos que indicar es que el texto que estamos
compartiendo es un documento HTML lo indicamos asi:

<HTML> ..</HTML>
Marca <head> Y <body>: un documento en HTML tiene una estructura que lo separa en
dos partes: cabezera y cuerpo. Lo primero que hay que incluir en el cdigo es la cabecera.
La cual escribimos:
<head>
<title> Mi primera pgina </title>
</head>
Nota: (la marca <title> la escribimos siempre dentro de la cabecera <head>).
Ahora indicamos el contenido. Lo primero ser indicar que estamos en el cuerpo del
documento:
<body></body>
Luego pondremos el titulo algo recalcado y centrado (estos atributo lo veremos mas
adelante).
<center> <H1>.</H1></center>
Nota: <center> centra el texto y <H1> aumenta el tamao del tipo de letra lo suficiente
para que se vea resaltado.
Ahora vamos a separar este ttulo que le hemos puesto a la pgina del texto por medio de
una lnea horizontal (que se explica posteriormente): <HR>; la lnea horizontal como
veremos ms adelante, carece de etiqueta de cierre.
<p> lo utilizamos para indicarle que queremos separar el texto de la lnea horizontal copn
un espacio vertical correspondiente en un prrafo nuevo.
Ejemplo <p> esta es mi primera pagina. De momento no tiene mucho. Pero ya

pondremos muchas cosas interesantes </p>
Ejemplo completo
<html>
<head>
<title> Mi primera pgina</title>
</head>
<body>
<center> <H1> Mi primera pa´gina</H1></center>
<HR>
<p> esta es mi primera pagina. De momento no tiene mucho. Pero ya
pondremos muchas cosas interesantes </p>
</body>
</html>
Los parmetros que admtela etiqueta <body> son:
Parmetros
background
bgcolor
bgproperites
Utilidad
Permite definir un grafico de fondo para la pantalla
Permite definir el color de fondo de la pgina
Cuando es igual a Fixed el grafico definido como fondo de la
pgina permanecer inmvil aunque utilicemos las barras de
text
link
Vlink
Alink
desplazamiento
Cambia el color del texto
Cambia el color de un enlace no visitado (por defecto azul )
Cambia el color de un enlace ya visitado (por defecto purpura)
Cambia el color que toma un enlace mientras lo estamos pulsando
Leftmargin y topmargin
(por defecto rojo)

Especifica el nmero de pixeles que dejara de margen entre el
borde de la ventana y el contenido de la pgina. Se suelen utilizar
para dejarlos a cero
Prrafo: inserta automticamente con un salto de lnea al final del prrafo y crea el espacio
entre los prrafos de nuestro documento el atributo es <p>.</p>.
Los atributos ms importante que podemos utilizar dentro de un prrafo son:
Etiqueta
<p> </p>
Utilidad
Sirve para delimitar un prrafo insertar una lnea en blanco
<center></center>
<pre width= X> </pre>
antes del texto

Permite centrar todo el texto del prrafo
Representa el texto encerrado en ella con un tipo de letra
de paso fijo. Muy til a la hora de representar cdigo
fuente. El parmetro WIDTH especifica el nmero

<div align=x> </div>
mximo de caracteres en una lnea.

Permite justificar el texto del prrafo a la izquierda
(align=left), derecha (align= right), el centro (align
<address></address>
<blockquote></ blockquote >
=center) a ambos mrgenes (justify)

Para escribir direcciones (no de correo electrnico)
Para citar un texto ajeno. Se suele implementar dejando
mrgenes tanto a izquierda como a derecha, razn por la
<BR>
que se usa habitualmente.

Mete un salto de lnea, hace la funcin del intro.
Separador horizontal: se representa <HR>, podemos indicarle al grosor de la etiqueta

mediante size= numero.
Podemos indicarle la longitud de la lnea mediante widht=%numero la lnea carece de
etiqueta de cierre esto es normal en etiquetas que no varan los atributos de un texto, sino
que insertan un elemento.
Captulo III: Apariencia del texto, imgenes en una pgina web
Estilo del texto:
Etiqueta
<b></b>
<i>..</i>
<u>.</u>
<s>...</s>
<tt>..</tt>
<sup>.</sup>
Etiqueta
<sub>.</sub>
<big>.</big>
<small>.</small>
Utilidad
Texto en negrita
Texto en cursiva
Subraya el texto
Tacha el texto
Representa al texto en otro tipo de letra paso fijo
Letra en superindice
Utilidad
Letra subndice
Incrementa el tamao de la letra
Disminuye el tamao de la letra
Formato de fuente
<font face=arial> tipo de letra </font>
<font color=blue> color de la letra</font>
<font size=14> tamao de la letra </Font>
Imgenes en una pgina. Background: permite definir una imagen de fondo en pantalla.
Para incluir imgenes en nuestra pgina utilizamos la etiqueta<img> de esta manera.
<img src=imagen. Alt= descripcin>
Nota: ALT especifica el texto que se mostrara en lugar de la imagen.

Alineacin respecto al texto (imgenes tambin la puedes alinear)
<center> texto centrado</center>
<div align=center> texto centrado</div>
<div align=left> texto izquierda</div>
<div align=right> texto derecha</div>
Dimensiones de una imagen: los dos los atributos que se deban indicar a la hora de trabajar
con una imagen estos son la altura y la anchura se hace de la siguiente manera.
<img src=imagen alt=nombre width=88 height=31>
Borde y espacios: el atributo borde permite colocar un borde a la imagen. Este puede
tomar dos estados border=0 , border=1 ejemplo
<img src=imagen alt=nombre width=88 height=31 border=2>
Imagines y enlaces: para incluir enlace dentro de un grafico. Se utiliza la siguiente etiqueta.
<a href=Prueba 2 Html> <img..> </a>
Por defecto los navegadores podrn un borde al grafico para indicar que es un enlace
Ejemplo:
<html>
<head> <title> probando </title> </head>
<body>
<p><a href= imagen> <b> Negrita </b> </a> <br> </p>
<a href= prueba 2.html> <div align=center><img src= IMAGEN alt= nombre
con que referencia la imagen width=100 height=100> </div></a>
</body>
</html>
Ejercicio crear un documento, llamado datos personales, en el que se deber introducir los
datos personales de manera que aparezca de la siguiente manera:
DATOS PERSONALES
Nombre..
Apellido.
Telfono
Direccin
E-mail.
Escribir los atributos necesarios de manera que se visualice nuestro nombre en

diferentes lneas
Investigar como colocar la imagen de fondo con un tamao especifico

Captulo IV: tipos de lista
Existen varios tipos de lista en HTML y todas ellas se pueden meter una dentro de otras.
Formando arboles
Todos los tipos tienen el siguiente formato
<tipo-lista>
<li> primer elemento </li>
<li> segundo elemento </li>
<tipo-lista>
Lista desordenadas: la etiqueta <ul> nos permite presentar lista de elementos sin orden
alguno esta etiqueta admite los siguientes atributos
Parmetro
Type= disc , circle , square
Utilidad
Indica al navegador el dibujo que proceder a cada
elemento de la lista. Tambin se admite como parmetro de
<li>
Ejemplo
<ul><b>lista desordenada</b>
<li>primer elemento</li>
<li>segundo elemento</li>
</ul>
<ul type=circle><b>lista desordenada circulo</b>
</ul>
<ul type=square><b>lista desordenada cuadrada</b>

</ul>
Lista ordenadas: la etiqueta <ol> nos permite presentar listas de elementos ordenados de
menor a mayor. Los elementos de la lista ira precedido normalmente por un nmero.
Esta etiqueta <ol>admite esto parmetro
Parmetro
Type=1, a, A, i, I
Utilidada
Indica al navegador el tipo de numeracin que preceder a cada
Start=num
Value=num
elemento de la lista. Tambin se admite como parmetro de <li>

Indica ala navegador el nmero por el que se ha empezado
Attribute <li>, acta como start pero a partir de un elemento
predeterminado
Ejemplo <ol type= 1>

<ol>
</ol>
Lista de glosario. Cada elemento est compuesto por un trmino y una definicin y cada
una de estas partes tiene su propia etiqueta. Ejemplo
<dl>
<dt>termino 1</dt>
<dd>definicin 1</dd>
<dt>termino 2</dt>
<dd>definicin 2</dd>
</dl>
Lista anidadas:
<ul>
<li>UNO<ul>
<li>uno</li>
<li>dos</li>
</ul>
</li>
<li>DOS</li>
<li>TRES</li>
</ul>
Capitulo V: FRAMES
Un marco es una ventana independiente dentro de la ventana general del navegador. Cada marco
tendr sus bordes y su propia barra de desplazamiento.
Para crearlo necesitaremos un documento HTML especifico, el cual contiene los marcos
FRAMES y la que hace los llamados a los otros.
Deber existir o se creara una segunda pgina (a modo de ejemplo) la cual llamaremos
men.html y la que har los llamados a las distinta pginas
Crearemos otra a la que llamaremos principal, en donde se visualizara los llamados que se
haga desde la pgina men.html
Ejemplo
<html>
<head> <title> primera pagina con marco</title></head>
<frameset cols=20%,80%>
<frame name= menu src= men.html>
<frame name= principal src= principal.html>
</frameset>
</html>
Frameset: se sustituye el <body> por el <frameset> el cual se divide la ventana actual (sea la
general o un marco) en varias ventanas definidas o por el parmetro cols, rows este separado
por comas, se define el nmero de marco y el tamao de cada uno.
Frame: define las caractersticas de un marco los parmetros que admite son los siguientes:
Parmetro
Name
Utilidad
Asigna nombre a un marco para que despus podramos
Src
Scrolling
referirnos a el
Indica la direccin del documento
Decide si se coloca una barra de desplazamiento . su valor
por defecto auto.
Noframes= define lo que vera el usuario en caso que el navegador no soporte frame.
Enlace gracias al parmetro target podemos ubicar los llamados. Lo hacemos de la siguiente forma
<a href= pagina.html target= principal>
Ejemplo utilizando cols y rows
<frameset cols= 20% , 80%>
<frame name= indice src= indice.html>
<frame rows= *,80%>
<frame name= principal src= introduccion.html>
<frame name ejemplo src= ejemplo.html>
<frameset rows= 15%, *,75>
</frameset>
</frameset>
Captulo VI: TABLAS
Las tablas son las forma ms clara de organizar la informacin, tambin es el modo mas adecuado
para maquetar textos y grficos. De una manera mas controlada que con los parmetros align.
Una tabla es un conjunto de filas y columnas organizadas que forman una celda
La marca: <table> </table>
Las tabla se define de la siguiente manera: primero, las caracterstica de la tabla, luego la de cada
fila y dentro de esta, cada celda.
Ejemplo
<table>
<tr>
<td> primera celda</td>
<td>segunda celda</td>
</tr>
<tr>
<td> ahora estoy en otra fila</td>
</tr>
Parmetro y utilidad de la tabla<table>
Parmetro
Border
Cellspacing
Cellpading
Utilidad
Especifica el grosor del borde de la tabla
Define el nmero de pixeles que separara la celda
Define el nmero de pixeles haba entre el borde de una
celda y su anchura
Especifica anchura de la tabla
Alinea la tabla ((left), (right) o (center))
Width
Align
Parmetro y utilidad de la fila<tr>

Parmetro
Align
Valign
Utilidad
Alinea el contenido ((left), (right) o (center))
Alinea el contenido de las celdas verticalmente arriba
(top), abajo (bottom) o centro (middle)
Parmetro y utilidad de la columna<td

Parmetro
Align
Valign
Utilidad
Alinea el contenido ((left), (right) o (center))
Alinea el contenido de las celdas verticalmente arriba
Width
Nowrap
(top), abajo (bottom) o centro (middle)

Especifica anchura de la columna
Impide que el interior de la celda se rompa la lnea en un
Colspam
espacio
Especifica el nmero de celdas de fila que se sita a la
Rowspam
derecha
Especifica el nmero de celdas de columna situada debajo
de la actual que se une a esta
Nota:<th> y <td> es lo mismo solo que <th> se utiliza para encabezados.
Captulo VI: Formularios

Un formulario es una plantilla creada para que el usuario se comunique con nosotros, a
travs de un servidor web, de una manera fcil y sencilla.
La marca <form> </form> todos los elemento de un formulario deben estar encerrado entre
esta marca. Caben destacar tres parmetros
action define el URL que deber gestionar el formulario, puede ser una
direccin de correo, en cuyo caso se deber aadir el parmetro ENCTYPE= text/
plain para que lo que recibamos resulte legible.
Method define la manera en que se mandara el formulario: Get o Post. Es

recomendable utilizar post en el caso de que estemos mandando el formulario a
nuestra direccin de correo electrnico es obligado a usarlo.
El control <Input> lo utilizamos como un campo de entrada de datos, los atributos vendrn
dados por el atributo type que determinara el tipo del campo de entrada.
Marca <text> permite al usuario a introducir texto en nuestro campo del formulario.
<input type= text>
<input type= password> permite introducir texto pero con la diferencia que no se muestra.
Atributo para modificar
Parmetro
size
maxlength
value
utilidad
Tamao de la caja de texto
Nmero mximo de caracteres a introducir el usuario
Texto por defecto que contendr la caja
Textarea: cuando el usuario va a introducir mas de una lnea dentro de una caja de texto
utilizaremos la siguiente etiqueta:
<textarea rows=6 cols=35> aqu se escribe el texto</textarea>
Hidden
<input type= hidden name=curso de. Value=html>
Botones submit y reset:
El boton submit se utiliza para mandar al formulario.
El botn reset para limpiar todo lo que haya mandado el usuario.
<input type=submit>
<input type=reset>
Checkbox: es una casilla de verificacin, representa una opcin, si o no. Son distinta
opciones con el mismo nombre que representa un campo de seleccin mltiple.
Si incluimos el atributo checked estaremos indicando que el estado inicial de ese campo
es seleccionado.
Ejemplo
<h1> que maraca de coche prefieres: </h1>
<input type= checkbox name= coche_ferrari value=Ferrari checked> ferrari
<input type= checkbox name= coche_porsche value=porsche checked> Porsche
<input type= checkbox name= coche_toyota value=toyota checked> Toyota
Radio: para que el usuario decida entre varias opciones
<input name= respuesta type= radio value= mal> <BR>
<input name= respuesta type= radio value= bien> <BR>
<input name= respuesta type= radio value= regular> <BR>
Nota: para asociar varios botones a una misma variables les pondremos a todas ellos el
mismo name, tambin se puede utilizar el parmetro checked para que se active el
botn por defecto.
Image: un grafico tambin se puede declarar como elemento de entrada ejemplo
<input type=image src=image.gif alt=pulsa>
Este elemento se comportara del mismo modo que el botn submit.
Campos de seleccin
<select> y <option>
El <select> se utiliza para realizar lista de valores desplegables para emplearla debemos
utilizar dos etiquetas.
Ejemplo
< select name= navegador>
<option>netscape
<option>explorer
<option>opera
<option>lynx
<option>otro
</select>
IFRAME : es un marco flotante que puede estar colocado en cualquier parte de la pgina.
La ventaja que tiene sobre los frames o marcos tradicionales es que se puede colocar donde
sea necesario, sin partir la pgina en varias partes y adems puede ser dinmico.
<table>
<tr><td><iframe name=miframe flotante src= menu.html width= 700 height= 550
frameborder=
scrolling=
yes
margin
width=2
margin
height=4
align=left>.</iframe></td></tr></table>
NOTA: para que la dems pgina se carguen en el iframe debern colocarse de la siguiente
manera.
<a href= prueba target= miframe flotante> inicio

Curso de HTML Basico

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso de HTML Basico

Hochgeladen von

Copyright:

Verfügbare Formate

CURSO DE HTML BASICO (OPERADOR WEB MASTER)

CAPITULO I: PRINCIPIOS BASICOS

Informacin por hipertexto: diversos elementos (texto o imagen) de la informacin

Grfico: en la pantalla aparecen simultneamente texto, imgenes

Global: se puede acceder a el desde cualquier tipo de plataforma, usando cualquier

Pblico: toda su informacin esta distribuida en miles de ordenadores que ofrece su

Independiente: dada la inmensa cantidad de fuente, es independiente y libre.

Caracteres extendido en HTML: la manera de incluir los caracteres extendidos (cuyo

Espacio en blanco que no puede ser usado para saltar

Captulo II: Una pgina web sencilla

<HTML>: limitan el documento e indica que se encuentra escrito en este lenguaje.

<HEAD>: especifica el prologo del resto del archivo.

<TITLE>: ser utilizado por los marcadores del navegador e identificara el

<BODY>: encierra el resto del documento en el contenido.

compartiendo es un documento HTML lo indicamos asi:

Ejemplo <p> esta es mi primera pagina. De momento no tiene mucho. Pero ya

(por defecto rojo)

antes del texto

fuente. El parmetro WIDTH especifica el nmero

mximo de caracteres en una lnea.

=center) a ambos mrgenes (justify)

que se usa habitualmente.

Separador horizontal: se representa <HR>, podemos indicarle al grosor de la etiqueta

Nota: ALT especifica el texto que se mostrara en lugar de la imagen.

Escribir los atributos necesarios de manera que se visualice nuestro nombre en

Investigar como colocar la imagen de fondo con un tamao especifico

<ul type=square><b>lista desordenada cuadrada</b>

elemento de la lista. Tambin se admite como parmetro de <li>

Ejemplo <ol type= 1>

Parmetro y utilidad de la fila<tr>

Parmetro y utilidad de la columna<td

(top), abajo (bottom) o centro (middle)

Nota:<th> y <td> es lo mismo solo que <th> se utiliza para encabezados.

Captulo VI: Formularios

Method define la manera en que se mandara el formulario: Get o Post. Es

Das könnte Ihnen auch gefallen