Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Notas HTML
Notas HTML
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
Ejemplo:
<HEAD><TITLE>Las Drogas en México </TITLE></HEAD>
Computación Básica II
Cuerpo del documento
Computación Básica II
<Body></Body> Ejemplo:
Atributo Acción
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>
Computación Básica II
Tamaño Ejemplo
<H1></H1> <H1>Código html</H1>
Texto con preformato
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
 
Espacios y saltos de párrafos
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
fuente, color, y tamaño) es una etiqueta cerrada, afecta todo el texto que se
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”
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
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
ne i a r s
o
un ació de
rra n
pá n e
La
fo
Ejemplo:
b
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:
Ejemplo:
<HR align= center size=20 width=50% color=blue>
Computación Básica II
Marquesina
<Marquee> </Marquee>
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.
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”
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”
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 :
<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.
<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
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
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.
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).
<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=enlaces.html>REGRESAR</A>
Computación Básica II
<A HREF=hojaweb.html><IMG SRC=“boton1.gif”></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>
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>
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
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
Computación Básica II