Está en la página 1de 36

Edición de Páginas web con código HTML

Profesora María Ramírez Díaz


Academia de computación
Turno matutino

Computación Básica II
Estructura
básica de la Sangrías de
página párrafo Listas

Texto con
preformato Regla
Tablas

Espacios y
saltos de párrafo Marquesina
Enlaces

Formato de Formato de
texto imagen
Multimedia

Formato de
párrafo
Índice
Computación Básica II
 La estructura básica de un documento escrito en HTML contendría las siguientes etiquetas:
Estructura básica de una página web <HTML> Inicio de la página
<HEAD> Cabecera
<TITLE> Titulo de la página (aparece en la barra del navegador)
</TITLE> Cierre título de la página
</HEAD> Cierre de cabecera.
<BODY> Inicio del cuerpo del documento: texto, tablas, imágenes, etc.
</BODY> Cierre del cuerpo de la página.
</HTML> Cierre o final de la página.

 El código html se crea dentro de cualquier editor de textos sencillo, pero el archivo debe de ser
guardado como un documento tipo html, si se crea en un block de notas, se guarda el archivo con el
nombre que llevará la página pero se complementa con .html por ejemplo: índice.html,
página1.html, inicio.html, etc.

Computación Básica II
Cabecera y título del documento

La etiqueta <HEAD></HEAD> delimita el inicio del documento. Dentro de <head> es


importante definir el título de la página por medio de la etiqueta <TITLE></TITLE>. Este
título será el que aparezca en la barra de nuestro navegador de las páginas Web.

Ejemplo:
<HEAD><TITLE>Las Drogas en México </TITLE></HEAD>

Computación Básica II
Cuerpo del documento

La etiqueta<Body></Body> (Cuerpo) es la que nos permite incluir dentro de ella


todo el contenido que se verá a través de visualizador en la pantalla, o sea en nuestra
página web.

Computación Básica II
<Body></Body> Ejemplo:
Atributo Acción

Background=“URL\imagen" • Coloca una imagen de fondo a nuestra página Background=”imagen1.jpg”


  • Deberá usar imágenes tipo: jpg, gif, jpeg, tif  

Bgcolor=“color o código”
Bgcolor=”purple”
• Indica un color para el fondo de nuestra página.
http://html-color-codes.info/codigos-de-colores- Bgcolor=“74DF00”
hexadecimales/

Text=“color o código” • Indica un color para el texto que incluyamos en nuestro documento. Por Text=”orange”
  defecto es negro. Solo se ve alterado cuando se usa <Font>. Text=”#DF0174”

Alink=“color o código” • Indica el color de los enlaces activos, es decir, los enlaces seleccionados Alink=”red”
  con un clic sostenido. Alink= #088A08

• Indica el color de los textos que dan acceso a un enlace. Por defecto es Link=”purple”
Link=“color o código”
azul. Link=”#DF0174”

Vlink=”yellow”
• Indica el color de los textos que dan acceso a un enlace que ya hemos
Vlink=“color o código” Link=”#DF0101”
visitado con nuestro navegador. Por defecto es púrpura.
 

Leftmargin=“pixeles”
Topmargin=“pixeles” Leftmargin=“30”
• Indica la distancia del borde de la página al texto
Rightmargin=“pixeles Topmargin=“25”
Bottommargin=“pixeles”

Computación Básica II
Ejemplo:
<Body bgcolor=black text=yellow Alink=#088A08 link=#DF0174 vlink=#6E6E6E
leftmargin=25 rightmargin=25 topmargin=25>

<Body background=imagen1.jpg link=blue alink=orange leftmargin=30 topmargin=20


rightmargin=20 tex= #9A2EFE >

Computación Básica II
Tamaño Ejemplo
<H1></H1> <H1>Código html</H1>
Texto con preformato

<H2></H2> <H2>Código html</H2>

<H3></H3> <H3>Código html</H3>

<H4></H4> <H4>Código html</H4>

<H5></H5> <H5>Código html</H5>

<H6></H6> <H6>Código html</H6>

<H7></H7> <H7>Código html</H7>

Computación Básica II
En HTML los espacios entre
caracteres con barra espaciadora no
Espacios existen, solo reconoce un espacio,
si deseas más espacios hay que usar
&nbsp
Espacios y saltos de párrafos

el comando por cada uno de los


espacios que desees colocar

Para indicar un salto de línea se


utiliza la etiqueta <BR>, cada BR Saltos de línea
indica un enter o punto y aparte.
<br>

Computación Básica II
L a e ti
que t a
c i e rr a s
cua nd e
Tipo, tamaño y color de fuente va a c
am bi a
o se
fu e n t e r de
o tipo
l e t ra , de
autom o
Formato de textos

<Font> </Font> e cam


áticam
e
b ia a l nt
otra fu abrir
e nt e .
La etiqueta <Font> nos sirve para dar las características al texto (tipo de

fuente, color, y tamaño) es una etiqueta cerrada, afecta todo el texto que se

encuentra entre la etiqueta, es necesario cerrarla para delimitar el cambio

de fuente.

Computación Básica II
El nombre Atributo Acción Ejemplo
de las • Establece el tipo de fuente, no todos los tipos
fuentes Face=“Nombre de la fuente”
de fuentes son aceptados por el visualizador
por eso es necesario hacer pruebas.
entre   • Si la fuente tiene más de dos palabras es
Face=“Times New Roman”

comillas, necesario poner el nombre entrecomillado y


respetando las mayúsculas.
respetando Size=“Tamaño” • El tamaño de la fuente es de 1 a 7, se usa el
signo + o – para establecer tamaños Size=“5”
mayúscula   intermedios.

sy Color=“código de color” • Asigna un color a la fuente, puede ser el


nombre del color escrito en inglés o el código Color=“#5E610B”
minúscula   hexadecimal correspondiente.

s Ejemplo:
<Font face=”Times New Roman” size=”5” color=”#3B0B39”

Computación Básica II
Efecto Etiqueta Ejemplo
Texto en negrita <B></B> <B>Mis amigos </B> Mis amigos

La Texto en cursiva <I></I> <I> Página </I> Mis amigos

etiqueta Texto más grande <BIG></BIG> <BIG> Página </BIG> Mis amigos
se cierra Texto más chico <SMALL></SMALL>
<SMALL>Mi Mi ciudad

ciudad</SMALL>
cuando Texto subrayado <U></U> <U> Página </U> Mis amigos
queremo Texto tachado <S></S> <S> Página </S> Mis amigos
s Texto en superíndice <SUP></SUP> m<SUP>3</SUP> m3
delimitar Texto en subíndice <SUB></SUB> H<SUB> 2 </SUB>O H2O
el efecto <CENTER> Animales Animales
Texto centrado <CENTER></CENTER>
</CENTER>

Estilos de texto

Computación Básica II
Formato de párrafo
Es una etiqueta cerrada, se abre al inicio del
párrafo y se cierra al finalizarlo.
Párrafos <P></P>
Atributo Acción
• Alinea el párrafo a la izquierda (left), a la
Align=“left/right/center/justify” derecha (right), justificado (justify) o al centro
(center).
qu cu a se

• Coloca el interlineado al párrafo, el porcentaje


o
cam erem and

Style=“line-height:%” de 100 es el interlineado sencillo, 150 sería línea


rra uet

ne i a r s

y media y 200 sería el doble.


cie eti q

o
un ació de
rra n
pá n e
La

fo

Ejemplo:
b

<p align=right style=line-height:150%>


ali

Computación Básica II
Sangría de
texto
< blockquote></blockquote>
Esta etiqueta permite colocar una sangría
izquierda y derecha al párrafo en la que está
Cada incluida.
<blockq
uote> es <blockquote>¿Realmente la música es tan importante para nuestras vidas? Los
una últimos hallazgos en neurología, psicología y biología parecen demostrar que sí:
escuchar melodías agradables no sólo modifica nuestro estado de ánimo sino que
tabulació puede tener una influencia muy positiva en el desarrollo cognitivo humano, en el
n estímulo de nuestra inteligencia e incluso en la salud. </blockquote>

Computación Básica II
<HR>
Coloca una línea horizontal en nuestra página, estas líneas, son muy usadas para
Regla dividir secciones de textos. La etiqueta es:

Atributo Acción Ejemplo 


Alinea línea a la izquierda (left), a la derecha (right) ó
Align=“left/right/center” Align=“Left”
al centro (center).
Indica el grosor de la línea en pixeles.
Size=“pixeles” Size=“15”
 
Indica el ancho de la línea en % en función del ancho Width=“75%”
Width=“pixeles o %” de la ventana del navegador: 25%,50%,etc. ó en
pixeles Width=800
Define el color de la línea en código o la palabra en
Color=“color o código” Color=“Blue”
inglés.

Ejemplo:
<HR align= center size=20 width=50% color=blue>

Computación Básica II
Marquesina
<Marquee> </Marquee>

Una marquesina es un texto o imagen animada, es una etiqueta cerrada. Sus


atributos deben de estar dentro de la etiqueta <Marquee> y son los siguientes:

Computación Básica II
Atributo Acción Ejemplo
Bgcolor =“código de color” Indica el color del fondo de la marquesina Bgcolor=”blue”
 
Direction =”left/right” Indica en que dirección se desplaza el texto, hacia la izquierda (left) o hacia la Direction=”left”
  derecha (right)
Height =“número ó %” Indica la altura de la marquesina en puntos o porcentaje en función de la ventana Height=”10%”
  del navegador. Height=”35”
 
Indica el ancho de la marquesina en puntos o porcentaje en función de la ventana Widht=”50%”
Width = “número ó %”
del navegador Width=”400”
Indica el número de veces que se desplazará el texto por la marquesina antes de Loop=”5”
Loop =“número/infinite” detenerse.
Loop=”infinite”
Define la velocidad del texto que está dentro de la marquesina. A menor Scrolldelay=10
numeración, mayor velocidad. (más rápido)
Scrolldelay =“número” Scrolldelay=200
(más lento)
 
Define la cantidad de píxeles que queremos que se desplace el texto en cada Scrollamount="3"
movimiento. (menor desplazamiento)
Scrollamount=”número” A mayor número avanza más rápido  
Scrollamount=”75”
(mayor desplazamiento
Este atributo controla el movimiento de la marquesina, sus valores pueden ser:
ALTERNATE la marquesina se mueva de un lado a otro.
Behavior=”alternate/scroll/slide” SCROLL la marquesina sale y entra Behavior=”Alternate”
SLIDE la marquesina se detiene cuando llega al lado opuesto.

Ejemplo
<MARQUEE bgcolor = “#FFFFFF” width = 50% scrolldelay =250> Bienvenidos </MARQUEE>

Computación Básica II
Para colocar una imagen se usa la etiqueta <IMG> es una etiqueta abierta.

Es recomendable guardar las imágenes en la misma carpeta en donde se guarda la


web, de lo contrario es posible que no la muestre.

Si la imagen está en otra carpeta es necesario indicar la dirección (URL) en donde


se encuentra y asegurarse que siempre se tenga esta carpeta.
<IMG> Hay dos formatos de imágenes que todos los navegadores modernos reconocen.
Son las imágenes GIF,TIP, PNG y JPG. Por lo general las imágenes de paint
(mapa de bits) no se usan pues su tamaño es muy grande y tardan mucho en
cargarse.
FORMATO DE
IMAGEN La posición de la imagen con respecto al texto depende del lugar donde se
inserte la etiqueta

Computación Básica II
Las
imágenes Atributo Acción Ejemplo
siempre src=“URL\imagen”
• Indica la ubicación y/o el nombre del archivo gráfico a src=“recursos\caballo.jpg”
mostrar
deben de src=“dibujo.png”

• Indica cómo se alineará el texto que siga a la imagen.


estar Align=“Top / Middle / TOP alinea el texto con la parte superior de la imagen, Align=“Right”

guardadas Bottom/Right/Left”
MIDDLE con la parte central, y BOTTOM con la parte
inferior, RIGHT y LEFT. Si quiere centrar la imagen Align=”Top”

en la deberá usar la etiqueta <CENTER></CENTER>

• Indica el grosor del “borde” de la imagen en pixeles. El


misma Border =“número” color del borde es el que tenga el texto
Border=“15%”

carpeta que Height =“número ó %”


• Indica el alto de la imagen en pixeles o en porcentaje. Se
usa para variar el tamaño de la imagen original.
Height=“25%”

Height=”300”
las páginas • Indica el ancho de la imagen en pixeles o en porcentaje. Se
Width=“75%”
Width=“número ó %”
html usa para variar el tamaño de la imagen original.
Width=“600”
• Indica el número de espacios horizontales, en pixeles, que
Hspace =“número” separarán la del imagen texto que la siga y la anteceda.
Hspace=””0”
• Indica el número de pixeles verticales que separaran la
Vspace =“número” imagen del texto que le siga y la anteceda.
Vspace=“15”

Ejemplo:
<IMG> <IMG Src=Animales\jaguar.jpg width=250 height=250 vspace=40 hspace=15 border=10>

Computación Básica II
Listas
Ordenadas

Listas
Una lista
siempre se De viñetas
cierra en cada
nivel
Multinivel

Computación Básica II
Se usa la etiqueta Atributo Acción Ejemplo
<OL> para start=“número”
Indica que número será el primero de la lista. Si no se indica se
Ejemplo:
start=“4”
iniciar la lista se entiende que empezará en 1 Empezará el listado en el 4, si es letra comenzará en
auxilia de la la letra D
type =“tipo”
etiqueta <LI>
Indica el tipo de numeración utilizada. Si no se indica se
para indicar cada entiende que será una lista ordenada numéricamente.
uno de los Los tipos posibles son :

elementos y la 1 = Números arábigos (1,2,3,4,… etc.)


type=A
a = Letras minúsculas. (a,b,c,d,… etc.)
etiqueta </OL> Type=i
A = Letras mayúsculas. (A,B,C,D,… etc.)
para cerrar el
i = Números romanos en minúsculas. (i.ii,iii,iv,v,… etc.)
listado.
I = Números romanos en mayúsculas. (I,II,III,IV,V,…
etc.)

<OL></OL>
<OL TYPE=A START=4>
<LI>MARÍA</LI>
<LI>JUAN</LI>
<LI>PEDRO</LI>
LISTAS NUMERADAS </OL>

Computación Básica II
LISTAS DE VIÑETAS
Las listas sin numerar representan
los elementos de la lista con una
Atributo Acción Ejemplo
viñeta o marca que antecede a
Indica el tipo de viñeta, pueden ser disk ,
cada uno de ellos. Type=”tipo”
circle o square. Los valores de type, con lo
Type=”Circle”
que el topo o marca puede ser un disco, un
Se usa la etiqueta <UL> para circulo o un cuadrado.

iniciar la lista, la etiqueta <LI>


<UL TYPE=SQUARE>
para indicar cada uno de los <LI>TIERRA</LI>
<LI>MARTE</LI>
elementos y la etiqueta </UL> <LI>JÚPITER</LI>
</UL>
para cerrar el listado.

<UL> </UL>

Computación Básica II
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la etiqueta <DL> al iniciar la
lista y la etiqueta</DL> para cerrar el listado.
Además se integran dos etiquetas más:
 
<DT> para indicar el término y
<DD> para indicar la definición del término

<DL>
<DT>Rocas sedimentarias</DT>
LISTAS DE <DD>Son aquellas productos de la erosión de otras rocas por efectos físicos o químicos</DD>
<DT>Rocas ígneas</DT>
DEFINICIÓN
<DD> Son rocas producto de la actividad volcánica</DD>
<DT>Rocas metamórficas</DT>
<DL></DL>
<DD> Son rocas productos de altas presiones y temperaturas (su origen puede ser sedimentario
e ígneo) </DD>

</DL>

Computación Básica II
Tablas

Computación Básica II
<TABLE></TABLE>

Para crear una tabla es necesario varias etiquetas:< TABLE> en donde se establecen los

atributos generales de la tabla, <TR> que establece los atributos para las filas que conforman

las tablas, y <TD> para cada celda de la tabla

Computación Básica II
Atributo Acción  Ejemplo
Align=“Center”
Alinea la tabla con respecto del texto que lo rodea,
Align=“left/right/center/justify”
pueden ser LEFT, RIGHT, CENTER y JUSTIFY.

Background=“Fondo1.jpg”
Background=“URL\imagen” Asigna una imagen de fondo especificando el URL

Bgcolor=“Black”
Bgcolor=“código de color o color” Asigna un color de fondo a la tabla Bgcolor=“#4000FF”
Border=“16”
Border=“número” Indica el ancho del borde de la tabla en puntos

Bordercolor=“yellow”
<TABLE></ Bordercolor=“color o código de color” Indica el color del borde Bordercolor=“#4000FF”

TABLE> Cellspacing=“número”
Indica el espacio en puntos que separa luna celda de
Cellspacing=“20”

otra.

Cellpadding=“30”
Indica el espacio en puntos que separa el borde de cada
Cellpadding=“número”
celda y el contenido de esta.

Width=“75%”
Width=400
Indica el ancho de la tabla en % p pixeles. De no
Width=“número ó %”
indicarlo el ancho de la tabla se ajusta al contenido.

Height=“1200”
Indica la altura de la tabla en puntos o en porcentaje. De
Height=“número ó %”
no colocar alto, este se ajusta al contenido.
Computación Básica II
Las tablas están formadas por filas para ello se usa esta etiqueta
La etiqueta <TABLE>, encierra a la directiva< TR>

Esta etiqueta define el comienzo y fin de una fila en la tabla, para cada fila habrá un <tr>, esta etiqueta debe cerrase al
terminar la fila </tr>

Atributo Acción

Filas Este atributo especifica la alineación del texto de las celdas


Align=“left/right/center/justifY” de toda la fila, sus valores pueden ser LEFT, RIGHT,
<TR></TR> CENTER y JUSTIFY.

Especifica el archivo de imagen de fondo, mediante un


Background=“URL\imagen”
URL para la fila.

Bgcolor=“código o color” Especifica el color de fondo para la fila.

Indica la altura de la celda en píxeles o en valores de


Height=”número ó %”
porcentaje, lo aplica a toda la fila

Computación Básica II
La etiqueta <TD> </TD> definen las características de cada celda, en las celdas van los contenidos de las tablas: imágenes
o textos, los <td> deben cerrarse para limitar la celda y a su vez, se encuentran incluidos en los <TR>.

Atributo Acción
Este atributo especifica la alineación del texto que se encuentra dentro de
Align=”left/right/center/justify”
la calda, sus valores pueden ser LEFT, RIGHT, CENTER y JUSTYFY.

Especifica el archivo de imagen de fondo, mediante un URL para la


Celda Background=”URL\imagen”
celda.
<TD></TD> Bgcolor=”código ó color” Especifica el color de fondo para la celda.

Especifica el número de columnas que ocupará la celda, su valor es


Colspan=número
numérico.

Height=”número ó %” Indica la altura de la celda en píxeles o en valores de porcentaje.

Rowspan=”número” Especifica el número de filas que ocupará la celda, su valor es numérico.


Ajusta los elementos de la celda de una forma vertical, sus valores
Valign=”baseline/bottom/middle/top”
pueden ser BASELINE, BOTTOM, MIDDLE Y TOP.
Indica la anchura de la celda en píxeles o en valores de porcentaje. Lo
Width= “numero ó %”
aplica a toda la columna

Computación Básica II
Es muy importante
que el recurso
imagen, video,
archivo, etc.. con el
Enlaces internos y externos que vamos a vincular
esté siempre en la
misma carpeta que las
páginas web

Computación Básica II
Un enlace puede ser texto, una imagen o una forma.

Un enlace es más conocido por su nombre en inglés (link) y al punto final de un enlace se le denomina
ancla (anchor).

La forma general de un enlace es:

<A HREF=”Destino del enlace”>Texto o imagen de la página que servirá de enlace </A>

Atributo Acción
Enlaces
<A> </A> HREF=“Ruta\nombre del archivo” Indica la dirección o URL en donde se
encuentra el enlace destino

Computación Básica II
A otro documento del mismo u otro sitio.

<A HREF=URL> Texto o imagen de la página que servirá de enlace </A>


ENL
AC ES E Ejemplo fuera del sitio:
XTE
R NOS

<A HREF=http://www.google.com.mx>Quieres realizar búsquedas </A>


Llamaremos enlaces externos a
los enlaces que nos llevan a otras Si esta dentro del mismo sitio es:
páginas, aunque pertenezcan a
<A HREF=nombre de la página>Texto que servirá de enlace</A>
un mismo sitio.
Ejemplo:

<A HREF=listas1.html> Deseas conocer las actividades</A>

Si se desea regresar por ejemplo:

<A HREF=enlaces.html>REGRESAR</A>

Computación Básica II
<A HREF=hojaweb.html><IMG SRC=“boton1.gif”></A>

<a href=paleontología.html><img src=trilobite.jpg></a>

Es muy importante
Usar una imagen como hipervínculo cerrar la etiqueta del
enlace

Computación Básica II
La etiqueta que nos permite hacer enlaces internos o locales es:
<A> </A> (Ancla)
Este elemento se utiliza para indicar una parte de la página web, generalmente texto o imágenes,
que será un enlace a determinada parte de nuestro documento ó página, se utiliza cuando la página
es grande y se desea un acceso más rápido a un tema

ATRIBUTO ACCIÓN
Name=”nombre” Indica un nombre para los enlaces locales.
Indica la sección de la página a donde nos llevará el
ENLACES Href=“#nombre”
enlace.
INTERNOS
Proporciona una descripción del enlace si se mantiene el
Title=“texto”
ratón un momento sobre el hipertexto.

Computación Básica II
Coloque el cursor donde hará el anclaje y de nombre a la sección:
<A NAME=”INICIO”></A>

Hacer un enlace a la sección a donde lo enviará el enlace: Ejemplo


<A HREF=”#CONTINUAR”>Haz click para continuar </A>

Para completar el enlace se debe de establecer otra entrada con el nombre que le dimos en este caso de
CONTINUAR que esta en la sección a donde llevará el enlace con la directiva:

<A NAME=”CONTINUAR”></A>

Indicar el regreso que es la sección inicial con la directiva

<A HREF=”#INICIO”>Haz click para REGRESAR</A>

Computación Básica II
El video o la música Multimedia
siempre deben de Video y música
estar en la misma
carpeta que las
páginas web

Se utiliza para insertar un video o un


archivo de música de fondo, mostrando
o no la consola de reproducción, con los
siguientes atributos:

Computación Básica II
<EMBED>
ATRIBUTO ACCIÓN
Indica la ubicación y el nombre del video o pista (wmv, mp4,mp3)
Src=“ruta\archivo”
que va reproducir
Width=”número ó %” Indica el ancho del video

Height=”número ó %” Indica el alto del video

Loop=“true/false/número” Si se reproduce continuamente o no (PARA LA MÚSICA)

Volume=“número” Volumen de 0 a 100 por default son 50


Un ejemplo de esta etiqueta sería :
<embed src=“video1.wmv" width=600 height=450 loop=false autostart=true>
<embed src=“pista1.mp3" width=600 height=450 loop=true>

Computación Básica II

También podría gustarte