Conceptos Basicos HTML

Conceptos básicos de HTML
Bienvenido a HTML Basics. Este taller lo lleva a través de los conceptos

básicos del lenguaje de marcado de hipertexto.
(HTML). HTML es el bloque de construcción para las páginas
web. Aprenderás a usar HTML para crear una página HTML.
para mostrar en un navegador web.
Objetivos:
Al final de este taller, podrás:
▪ Utilice un editor de texto para crear un documento HTML.
▪ Ser capaz de usar etiquetas básicas para denotar párrafos, énfasis o tipos
especiales.
▪ Crear hipervínculos a otros documentos.
▪ Crear un enlace de correo electrónico.
▪ Añadir imágenes a su documento.
▪ Usar una tabla para el diseño.
▪ Aplicar colores a su documento HTML.
Requisitos previos:
Necesitará un editor de texto, como el Bloc de notas y un navegador de
Internet, como Internet Explorer o
Netscape.
P: ¿Qué es el Bloc de notas y dónde lo consigo?
A: Bloc de notas es el editor de texto predeterminado de Windows. En la
mayoría de los sistemas Windows, haga clic en Inicio
botón y seleccione Programas y luego Accesorios. Debe ser un pequeño
cuaderno azul.
Usuarios de Mac: SimpleText es el editor de texto predeterminado en
Mac. En OSX usa TextEdit y cambia.
las siguientes preferencias: Seleccione (en la ventana de preferencias) Texto
sin formato en lugar de Texto enriquecido y
luego seleccione Ignorar comandos de texto enriquecido en archivos
HTML. Esto es muy importante porque si no lo haces.
hacer estos códigos HTML probablemente no funcionará.
Una cosa que debe evitar usar es un procesador de textos (como Microsoft
Word) para crear su HTML
documentos.
¿Qué es un archivo html?
HTML es un formato que le dice a una computadora cómo mostrar una página
web. Los documentos mismos son
archivos de texto sin formato con "etiquetas" o códigos especiales que un
navegador web utiliza para interpretar y mostrar
Información en la pantalla de su computadora.
▪ HTML significa Hyper Text Markup Language
▪ Un archivo HTML es un archivo de texto que contiene pequeñas etiquetas de
marcado.
▪ Las etiquetas de marcado le dicen al navegador web cómo mostrar la página
▪ Un archivo HTML debe tener una extensión de archivo htm o html
¿Intentalo?
Abra su editor de texto y escriba el siguiente texto:
<html>
<head>
<title> Mi primera página web </title>
</head>
<body>
Esta es mi primera página de inicio. <b> Este texto está en negrita </b>
</body>
</html>
Guarde el archivo como mypage.html . Inicie su navegador de
internet. Seleccione Abrir (o Abrir página) en el archivo
Menú de su navegador. Un cuadro de diálogo
aparecerá. Seleccione Examinar (o Elegir archivo) y localice el html
archivo que acaba de crear - mypage.html - selecciónelo y haga clic
en Abrir . Ahora deberías ver una dirección en el
Página 2
cuadro de diálogo, por ejemplo, C: \ MyDocuments \ mypage.html . Haga
clic en Aceptar , y el navegador mostrará la
página. Para ver cómo debe verse la página, visite esta página web:
http://profdevtrain.austincc.edu/html/mypage.html
Ejemplo explicado
Lo que acabas de hacer es un documento html esqueleto. Esta es la
información mínima requerida para una web.
Documento y todos los documentos web deben contener estos componentes
básicos. La primera etiqueta en tu html
documento es <html>. Esta etiqueta le dice a su navegador que este es el
comienzo de un documento html. El último
la etiqueta en su documento es </html>. Esta etiqueta le dice a su
navegador que este es el final del html
documento.
El texto entre la etiqueta <head> y la etiqueta </head> es información de
encabezado. La información del encabezado no es
se muestra en la ventana del navegador.
El texto entre las etiquetas <title> es el título de su documento. La
etiqueta <title> se usa de forma única
identifica cada documento y también se muestra en la barra de título de la
ventana del navegador.
El texto entre las etiquetas <body> es el texto que se mostrará en su
navegador.
El texto entre las etiquetas <b> y </b> se mostrará en negrita.
¿HTM o extensión HTML?
Cuando guarda un archivo HTML, puede usar el .htm o la extensión .html. La
extensión .htm
viene del pasado cuando algunos de los programas de uso común solo
permitían extensiones de tres letras.
Es perfectamente seguro usar .html o .htm, pero sea
consistente. mypage.htm y mypage.html son
Tratados como archivos diferentes por el navegador.
Cómo ver la fuente HTML
Una buena manera de aprender HTML es observar cómo otras personas han
codificado sus páginas html. Descubrir,
simplemente haga clic en la opción Ver en la barra de herramientas de su
navegador y seleccione Fuente o Origen de página. Esta voluntad
abre una ventana que te muestra el HTML real de la página. Vaya por delante
y vea el código fuente de HTML para
esta página.
Etiquetas HTML
¿Qué son las etiquetas HTML?
▪ Las etiquetas HTML se utilizan para marcar elementos HTML.
▪ Las etiquetas HTML están rodeadas por los dos caracteres <y>
▪ Los personajes circundantes se llaman corchetes angulares.
▪ Las etiquetas HTML normalmente vienen en pares como <b> y </b>
▪ La primera etiqueta de un par es la etiqueta inicial, la segunda etiqueta es la
etiqueta final
▪ El texto entre las etiquetas de inicio y fin es el contenido del elemento.
▪ Las etiquetas HTML no distinguen entre mayúsculas y minúsculas, <b>
significa lo mismo que <B>
Etiquetas lógicas vs. físicas
En HTML hay etiquetas lógicas y etiquetas físicas. Las etiquetas lógicas están
diseñadas para describir
navegador) el significado del texto adjunto. Un ejemplo de una etiqueta lógica
es la etiqueta <strong> </strong> . Por
colocando texto entre estas etiquetas le está diciendo al navegador que el texto
tiene un mayor
importancia. De forma predeterminada, todos los navegadores hacen que el
texto aparezca en negrita cuando se encuentra entre <strong> y
</strong> etiquetas.
Las etiquetas físicas, por otro lado, proporcionan instrucciones específicas
sobre cómo mostrar el texto que encierran.
Ejemplos de etiquetas físicas incluyen:
▪ <b> : pone el texto en negrita.
▪ <big> : hace que el texto sea generalmente un tamaño más grande que el
que está alrededor.
▪ <i> : hace texto en cursiva.
Página 3
Las etiquetas físicas se inventaron para agregar estilo a las páginas HTML
porque las hojas de estilo no estaban alrededor, aunque
La intención original de HTML era no tener etiquetas físicas. En lugar de usar
etiquetas físicas para diseñar
Sus páginas HTML, debe utilizar hojas de estilo.
Elementos HTML
Recuerda el ejemplo HTML de la página anterior:
<html>
<head>
</head>
<body>
</body>
</html>
Este es un elemento HTML:
<b> Este texto está en negrita </b>
El elemento HTML comienza con una etiqueta de inicio: <b>
El contenido del elemento HTML es: Este texto está en negrita.
El elemento HTML termina con una etiqueta final: </b>
El propósito de la etiqueta <b> es definir un elemento HTML que debe
mostrarse en negrita.
Este es también un elemento HTML:
<body>
</body>
Este elemento HTML comienza con la etiqueta de inicio < body> y termina
con la etiqueta de finalización </body> . El propósito
de la etiqueta <body> es definir el elemento HTML que contiene el cuerpo
del documento HTML.
Etiquetas anidadas
Es posible que haya notado que en el ejemplo anterior,
la etiqueta <body> también contiene otras etiquetas, como la pestaña <b> .
Cuando encierras un elemento con varias etiquetas, la última etiqueta abierta
debe ser la primera etiqueta cerrada.
Por ejemplo:
<p><b> <em> Esta NO es la forma correcta de cerrar etiquetas anidadas .
</p> </em> </b>
<p><b> <em> Esta es la forma correcta de cerrar etiquetas
anidadas. </em></b> </p>
Nota: No importa qué etiqueta es la primera, pero deben cerrarse en el orden
correcto.
¿Por qué usar etiquetas en minúsculas?
Puede notar que hemos usado etiquetas en minúsculas aunque dije que las
etiquetas HTML no distinguen entre mayúsculas y minúsculas.
<B> significa lo mismo que <b>. El World Wide Web Consortium (W3C), el
grupo responsable de
desarrollando estándares web, recomienda etiquetas en minúsculas en su
recomendación de HTML 4 y XHTML
(el HTML de próxima generación) requiere etiquetas en minúsculas.
Atributos de la etiqueta
Las etiquetas pueden tener atributos. Los atributos pueden proporcionar
información adicional sobre los elementos HTML en
tu pagina. El <tag> le dice al navegador que haga algo, mientras que el
atributo le dice al navegador cómo
hazlo. Por ejemplo, si agregamos el atributo bgcolor, podemos decirle al
navegador que el color de fondo
de tu página debe ser azul, así : <body bgcolor = "blue"> .
Página 4
Esta etiqueta define una tabla HTML: <table> . Con un atributo de borde
agregado, puede indicar al navegador que
La tabla no debe tener bordes: <table border = "0"> . Los atributos
siempre vienen en pares nombre / valor
así: nombre = "valor". Los atributos siempre se agregan a la etiqueta de inicio
de un elemento HTML y la
El valor está rodeado de comillas.
Citar estilos, "rojo" o "rojo"?
Los valores de los atributos siempre deben estar entre comillas. Las comillas
dobles son las más comunes, pero
También se permiten las citas de un solo estilo. En algunas situaciones raras,
como cuando el valor del atributo en sí
contiene citas, es necesario usar comillas simples:
nombre = 'George "ametralladora" Kelly'
Nota: algunas etiquetas que analizaremos están en desuso, es decir, el World
Wide Web Consortium
(W3C) el cuerpo directivo que establece HTML, XML, CSS y otros
estándares técnicos decidió
esas etiquetas y atributos están marcados para su eliminación en versiones
futuras de HTML y XHTML.
Los navegadores deben continuar admitiendo etiquetas y atributos en desuso,
pero eventualmente estas etiquetas
es probable que se vuelvan obsoletos, por lo que no se puede garantizar el
soporte futuro.
Para obtener una lista completa de las etiquetas, visite W3C.org.
Etiquetas HTML básicas
Las etiquetas más importantes en HTML son etiquetas que definen
encabezados, párrafos y saltos de línea.
Etiquetas HTML básicas
Etiqueta
Descripción
<html>
Define un documento HTML
<body>
Define el cuerpo del documento.
<h1> a <h6> Define el encabezado 1 al encabezado 6
<p>
Define un párrafo
<br>
Inserta un solo salto de línea
<hr>
Define una regla horizontal.
<! ->
Define un comentario
Encabezados
Los encabezados se definen con las etiquetas <h1> a <h6> . <h1> define el
encabezado más grande mientras que <h6> define
el mas pequeño.
<h1> Este es un encabezado </h1>
HTML agrega automáticamente una línea en blanco adicional antes y después
de un encabezado. Un atributo de encabezado útil es
alinear.
Página 5
<h5 align = "left" > Puedo alinear encabezados </h5>
<h5 align = "center" > Este es un encabezado centrado </h5>
<h5 align = "right" > Este es un encabezado alineado a la derecha </h5>
Párrafos
Los párrafos se definen con la etiqueta <p> . Piense en un párrafo como un
bloque de texto. Puedes usar la alineación
atribuir con una etiqueta de párrafo también.
<p align = "left" > Este es un párrafo </p>
<p align = "center" > este es otro párrafo </p>
Importante: Debe indicar párrafos con elementos <p> . Un navegador ignora
cualquier
Indentaciones o líneas en blanco en el texto de origen. Sin elementos <p> , el
documento se convierte en
un párrafo grande HTML agrega automáticamente una línea en blanco
adicional antes y después de un párrafo.
Saltos de línea
La etiqueta <br> se usa cuando desea comenzar una nueva línea, pero no
quiere comenzar un nuevo párrafo. los
La etiqueta <br> fuerza un salto de línea donde sea que lo coloques. Es similar
al espacio simple en un documento.
Este codigo
Mostraría
<p> Este <br> es un gráfico para con <br>
saltos de línea </p>
Esta
es un para
gráfico con saltos de línea
La etiqueta <br> no tiene etiqueta de cierre.
Regla horizontal
El elemento <hr> se usa para reglas horizontales que actúan como divisores
entre secciones, como esto:
La regla horizontal no tiene una etiqueta de cierre. Toma atributos como
alinear y ancho. por
ejemplo:
Este codigo
Mostraría
<hr width = "50%" align = "center" >
Comentarios en HTML
La etiqueta de comentario se utiliza para insertar un comentario en el código
fuente HTML. Se puede colocar un comentario.
En cualquier parte del documento, el navegador ignorará todo lo que se
encuentre entre corchetes. Puedes usar
comentarios para escribir notas a ti mismo, o escribir un mensaje útil a alguien
que mira tu fuente
código.
Este codigo
Mostraría
<p> Este comentario html sería <! - Este
es un comentario -> ser mostrado como
esto. </p>
Este comentario HTML se mostraría como
esta.
Observe que no ve el texto entre las etiquetas <! - y -> . Si miras el código
fuente,
vería el comentario. Para ver el código fuente de esta página, en la ventana de
su navegador, seleccione Ver
y luego seleccione Fuente .
Página 6
Nota: Necesita un signo de exclamación después del corchete de apertura <!
- pero no antes del cierre
soporte -> .
HTML agrega automáticamente una línea en blanco adicional antes y después
de algunos elementos, como antes y después de un
párrafo, y antes y después de un encabezamiento. Si desea insertar líneas en
blanco en su documento, use
la etiqueta <br> .
¡Pruébalo!
<html>
<head>
</head>
<body>
<h1 align = "center"> Mi primera página web </h1>
<p> Bienvenido a mi primera página web. Estoy escribiendo esta página
usando un editor de texto y simple
antiguo html. </p>
<p> Al aprender html, podré crear páginas web como un profesional ... <br>
que estoy por supuesto. </p>
</body>
</html>
Guarda la página como mypage2.html . Abra el archivo en su navegador de
Internet. Para ver como funciona la página.
Debe mirar, visite esta página
web: http://profdevtrain.austincc.edu/html/mypage2.html
Otras etiquetas HTML
Como se mencionó anteriormente, hay estilos lógicos que describen cómo
debería ser el texto y estilos físicos.
que en realidad proporcionan formato físico. Se recomienda usar las etiquetas
lógicas y el estilo.
Hojas para el estilo del texto en esas etiquetas.
Etiquetas logicas
Etiquetas físicas
Etiqueta
Descripción
<abbr>
Define una abreviatura
<acrónimo> define un acrónimo
<dirección>
Define un elemento de dirección.
<citar>
Define una cita
<code>
Define el texto del código de la computadora.
<blockquote> Define una cita larga
<del>
Define texto
<dfn>
Define un término de definición
<em>
Define texto enfatizado
<ins>
Define el texto insertado
<kbd>
Define el texto del teclado
<pre>
Define el texto preformateado
<q>
Define una breve cita
<samp>
Define código de computadora de muestra
<strong>
Define texto fuerte
<var>
Define una variable
Etiqueta
Descripción
<b>
Define texto en negrita
<big> define texto grande
<i>
Define el texto en cursiva
<small> define texto pequeño
<sup> define el texto en superíndice
<sub> Define el texto con subíndices
<tt>
Define el texto del teletipo
<u>
Obsoleto. Usa estilos en vez
Las etiquetas de caracteres como <strong> y <em> producen la misma
visualización física que <b> y <i> pero son más
Uniformemente soportado en diferentes navegadores.
Página 7
Algunos ejemplos:
El siguiente párrafo usa la etiqueta <blockquote> . En la oración anterior,
la etiqueta blockquote es
encerrado en la etiqueta de muestra <samp> .
Nosotros, el pueblo de los Estados Unidos, para formar una Unión más
perfecta, establecer la Justicia,
asegurar la tranquilidad doméstica, prever la defensa común, promover el
bienestar general, y
Aseguremos las bendiciones de la libertad para nosotros mismos y para
nuestra posteridad, ordenemos y establezcamos esto.
Constitución para los Estados Unidos de América.
A pesar de que la mayoría de los navegadores representan texto bloqueado
con sangría, eso no es específicamente lo que es
diseñado para hacer. Es concebible que algún navegador en el futuro pueda
mostrar texto en bloque en otro
camino. Sin embargo, por el momento, es perfectamente seguro sangrar
bloques de texto con la <blockquote> .
Este codigo
Mostraría
<abbr title = "World Wide Web"> WWW </abbr>
WWW
Cuando mantenga el puntero del mouse sobre la WWW, aparecerá el texto en
el atributo del título.
Entidades de caracteres HTML
Algunos caracteres tienen un significado especial en HTML, como el signo
menos que ( < ) que define el inicio de
una etiqueta HTML. Si queremos que el navegador muestre estos caracteres,
debemos insertar caracteres.
Entidades en lugar de los propios personajes reales.
Las entidades de carácter más comunes:
Descripción del resultado
Nombre de la entidad
Número de entidad
espacio que no se rompe & nbsp;
& # 160;
<
menos que
& lt;
& # 60;
>
mas grande que
& gt;
& # 62;
Y
ampersand
&amperio;
& # 38;
"
comilla
& quot;
& # 34;
'
apóstrofe
& apos; (no funciona en IE)
& # 39;
Una entidad de carácter tiene tres partes: un símbolo comercial ( & ), un
nombre de entidad o un número de entidad, y finalmente
un punto y coma ( ; ). El & significa que estamos comenzando un carácter
especial, el ; significa terminar un especial
el carácter y las letras intermedias son una especie de abreviatura para lo que
sirve. Para mostrar un menos de
iniciar sesión en un documento HTML que debemos escribir: & lt; o & #
60; La ventaja de usar un nombre en lugar de un
El número es que un nombre es más fácil de recordar. La desventaja es que no
todos los navegadores soportan
los nombres de entidades más recientes, mientras que el soporte para números
de entidades es muy bueno en casi todos los navegadores.
Nota: Las entidades distinguen entre mayúsculas y minúsculas.
Espacio irrompible
La entidad de caracteres más común en HTML es el espacio de no separación
& nbsp; . Normalmente HTML lo hará
Truncar espacios en su texto. Si agrega 10 espacios en su texto, HTML
eliminará 9 de ellos. Añadir
espacios a su texto, use la & nbsp; entidad de carácter.
Este codigo
Mostraría
<p> Este código
aparecería
como esto. </p>
Este código aparecerá como este.
Página 8
Este codigo
Mostraría
<p> Este código & nbsp; & nbsp; & nbsp; haría
Aparecen con tres espacios extra. </p>
Este código aparecería con tres extras.
espacios
Para ver una lista de entidades de carácter, visite esta página:
http://profdevtrain.austincc.edu/html/entities.htm
Fuentes HTML
La etiqueta de < m2 en HTML está en desuso. El World Wide Web
Consortium (W3C) ha eliminado el
Etiqueta de la etiqueta de la Tasa de impresión de sus recomendaciones. En
futuras versiones de HTML, las hojas de estilo (CSS) se utilizarán para
Definir el diseño y mostrar las propiedades de los elementos HTML.
No se debe utilizar la etiqueta de <m2 .
Fondos HTML
Antecedentes
La etiqueta <body> tiene dos atributos donde puede especificar fondos. El
fondo puede ser un color.
o una imagen.
Bgcolor
El atributo bgcolor especifica un color de fondo para una página HTML. El
valor de este atributo puede ser
un número hexadecimal, un valor RGB o un nombre de color:
<cuerpo bgcolor = "# 000000">
<body bgcolor = "rgb (0,0,0)">
<cuerpo bgcolor = "negro">
Las líneas sobre todo establecen el color de fondo a negro.
Fondo
El atributo de fondo también puede especificar una imagen de fondo para una
página HTML. El valor de este
atributo es la URL de la imagen que desea utilizar. Si la imagen es más
pequeña que la ventana del navegador,
La imagen se repetirá hasta que ocupe toda la ventana del navegador.
<body background = "clouds.gif" >
<body background =
"http://profdevtrain.austincc.edu/html/graphics/clouds.gif" >
La URL puede ser relativa (como en la primera línea de arriba) o absoluta
(como en la segunda línea de arriba).
Si desea utilizar una imagen de fondo, debe tener en cuenta:
▪ ¿La imagen de fondo aumentará el tiempo de carga demasiado?
▪ ¿La imagen de fondo se verá bien con otras imágenes en la página?
▪ ¿Se verá bien la imagen de fondo con los colores del texto en la página?
▪ ¿Se verá bien la imagen de fondo cuando se repita en la página?
▪ ¿La imagen de fondo quitará el enfoque del texto?
Nota: Los atributos bgcolor, background y text en la etiqueta <body> están en
desuso
Las últimas versiones de HTML (HTML 4 y XHTML). El World Wide Web
Consortium (W3C) ha
eliminado estos atributos de sus recomendaciones. Las hojas de estilo (CSS)
deben usarse en su lugar
(para definir el diseño y mostrar las propiedades de los elementos HTML).
¡Pruébalo!
Página 9
<html>
<head>
</head>
<body background =
"http://profdevtrain.austincc.edu/html/graphics/clouds.gif"
bgcolor = "# EDDD9E">
<p> Bienvenido a mi <strong> primera </strong> página web. Estoy
escribiendo esta página usando un texto.
editor y simple html. </p>
<p> Al aprender html, podré crear páginas web como un <del> principiante
</del>
pro .... <br>
</body>
</html>
Guarde su página como mypage3.html y véala en su navegador. Para ver
cómo debe verse la página,
Visite esta página
web: http://profdevtrain.austincc.edu/html/mypage3.html
Note que le dimos a nuestra página un color de fondo así como una imagen de
fondo. Si por alguna razón el
La página web no puede encontrar la imagen, mostrará nuestro color de fondo.
Colores HTML
Valores de color
Los colores se definen mediante una notación hexadecimal para la
combinación de color rojo, verde y azul
Valores (RGB). El valor más bajo que se le puede dar a una fuente de luz es 0
(hex # 00). El valor mas alto
es 255 (hexadecimal #FF). Esta tabla muestra el resultado de combinar rojo,
verde y azul:
Color
Color HEX
Color RGB
# 000000
rgb (0,0,0)
# FF0000
rgb (255,0,0)
# 00FF00
rgb (0,255,0)
# 0000FF
rgb (0,0,255)
# FFFF00
rgb (255,255,0)
# 00FFFF
rgb (0,255,255)
# FF00FF
rgb (255,0,255)
# C0C0C0
rgb (192,192,192)
#FFFFFF
rgb (255,255,255)
Nombres de colores
La mayoría de los navegadores admiten una colección de nombres de
colores. Para ver una tabla de nombres de colores que son
Compatible con la mayoría de los navegadores visita esta página web
http://profdevtrain.austincc.edu/html/color_names.htm
Nota: el estándar W3C HTML 4.0 solo admite 16 nombres de colores (aqua,
black, blue,
fucsia, gris, verde, lima, granate, azul marino, oliva, púrpura, rojo, plateado,
verde azulado, blanco y amarillo). por
Para todos los demás colores debes usar el valor Color HEX .
Color Color HEX
Nombre del color
# F0F8FF
Alice azul
# FAEBD7
Blanco antiguo
# 7FFFD4
Aguamarina
# 000000
Negro
# 0000FF
Azul
# 8A2BE2
Violeta Azul
# A52A2A
marrón
Página 10
Colores seguros para la web
Hace unos años, cuando la mayoría de las computadoras admitían solo 256
colores diferentes, se incluía una lista de 216 Web Safe
Los colores fueron sugeridos como un estándar web. La razón de esto fue que
Microsoft y Mac operaban
El sistema usó 40 colores fijos diferentes "reservados" del sistema (unos 20
cada uno). Este 216 multiplataforma web.
la paleta de colores segura se creó originalmente para garantizar que todas las
computadoras mostraran todos los colores correctamente
Cuando se ejecuta una paleta de 256 colores. Para ver los 216 colores de
plataforma cruzada visite esta página web:
http://profdevtrain.austincc.edu/html/216.html
16 millones de colores diferentes
La combinación de valores de rojo, verde y azul de 0 a 255 da un total de más
de 16 millones.
Diferentes colores para jugar con (256 x 256 x 256). La mayoría de los
monitores modernos son capaces de mostrar en
Al menos 16,384 colores diferentes. Para ayudarlo a usar combinaciones de
colores, eche un vistazo
http://wellstyled.com/tools/colorscheme2/index-en.html . Este sitio te
permite probar diferentes colores.
Esquemas para fondos de página, texto y enlaces.
Listas de HTML
HTML proporciona una forma sencilla de mostrar listas desordenadas (listas
con viñetas) o listas ordenadas (listas numeradas).
Listas Desordenadas
Una lista no ordenada es una lista de elementos marcados con viñetas
(normalmente pequeños círculos negros). Una lista desordenada
comienza con la etiqueta <ul> . Cada elemento de la lista comienza con la
etiqueta <li> .
Este codigo
Mostraría
<ul>
<li> café </li>
<li> leche </li>
</ul>
▪ café
▪ Leche
Listas ordenadas
Una lista ordenada es también una lista de artículos. Los elementos de la lista
están marcados con números. Comienza una lista ordenada
con la etiqueta <ol> . Cada elemento de la lista comienza con la
etiqueta <li> .
Este codigo
Mostraría
<ol>
<li> café </li>
<li> leche </li>
</ol>
1. cafe
2. Leche
Dentro de un elemento de la lista puede colocar párrafos, saltos de línea,
imágenes, enlaces, otras listas, etc.
Listas de definiciones
Las listas de definiciones constan de dos partes: un término y
una descripción . Para marcar una lista de definiciones, necesita
tres elementos HTML; un contenedor <dl>, un término de definición <dt> y
una descripción de definición <dd>.
Este codigo
Mostraría
<dl>
<dt> Hojas de estilo en cascada </dt>
<dd> Las hojas de estilo se utilizan para proporcionar
sugerencias de presentación para
Documentos marcados en HTML.
</dd>
</dl>
Hojas de estilo en cascada
Hojas de estilo se utilizan para proporcionar
sugerencias de presentación para
Documentos marcados en HTML.
Dentro de una definición de lista de definiciones (la etiqueta <dd> ) puede
colocar párrafos, saltos de línea, imágenes, enlaces,
otras listas, etc.
Página 11
Pruébalo
Abra su editor de texto y escriba lo siguiente:
<html>
<head>
</head>
<body bgcolor = "# EDDD9E">
<p> Bienvenido a mi <strong> primera </strong> página web. Estoy
escribiendo esta página usando un texto.
editor y simple html. </p>
Esto es lo que he aprendido:
<ul>
<li> Cómo usar etiquetas HTML </li>
<li> Cómo usar colores HTML </li>
<li> Cómo crear listas </li>
</ul>
</body>
</html>
cómo debe verse tu página visita.
esta página web: http://profdevtrain.austincc.edu/html/mypage4.html
Enlaces HTML
HTML utiliza la etiqueta de anclaje <a> para crear un enlace a otro
documento o página web.
La etiqueta de anclaje y el atributo Href
Un ancla puede apuntar a cualquier recurso en la Web: una página HTML,
una imagen, un archivo de sonido, una película, etc.
La sintaxis de crear un ancla:
<a href="url"> Texto que se mostrará </a>
La etiqueta <a> se usa para crear un ancla para vincular, el atributo href se
usa para indicar la dirección de
el documento o la página a la que nos vinculamos, y las palabras entre abrir y
cerrar la etiqueta de ancla
se mostrará como un hipervínculo.
Este codigo
Mostraría
<a href="http://www.austincc.edu/"> ¡Visite ACC! </a>
¡Visita ACC!
El atributo de destino
Con el atributo de destino, puede definir dónde se abrirá el documento
vinculado. Por defecto, el
El enlace se abrirá en la ventana actual. El siguiente código abrirá el
documento en una nueva ventana del navegador:
<a href=http://www.austincc.edu/ target="_blank"> ¡ Visite ACC! </a>
Enlaces de correo electrónico
Para crear un enlace de correo electrónico, utilizará mailto: además de su
dirección de correo electrónico. Aquí hay un enlace a la Mesa de Ayuda de
ACC:
<a href ="mailto:helpdesk@austincc.edu"> Servicio de asistencia por correo
electrónico </a>
Para agregar un asunto para el mensaje de correo electrónico, debe agregar ?
Subject = después de la dirección de correo electrónico. por
ejemplo:
<a href="mailto:helpdesk@austincc.edu ?subject=Email
Assistance "> Servicio de asistencia por correo electrónico </a>
Pagina 12
La etiqueta de anclaje y el atributo de nombre
El atributo de nombre se utiliza para crear un ancla con nombre. Al usar
anclajes con nombre podemos crear enlaces.
que puede saltar directamente a una sección específica de una página, en lugar
de permitir que el usuario se desplace para encontrar
lo que él / ella está buscando. A diferencia de un ancla que usa href, un ancla
con nombre no cambia la
aspecto del texto (a menos que establezca estilos para ese anclaje) o indique
de alguna manera que haya
Nada especial sobre el texto. A continuación se muestra la sintaxis de un ancla
con nombre:
<a name="top"> Texto a mostrar </a>
Para enlazar directamente a la sección superior, agregue un signo # y el
nombre del ancla al final de una URL, como
esta:
Este codigo
Mostraría
<a
href = "http://profdevtrain.austincc.edu/html
/10links.html #top "> Volver al principio de la página </a>
Un hipervínculo a la parte superior de la página desde
dentro del archivo 10links.html se verá como
esta:
<a href=" #top "> Volver al principio de la página </a>
Volver al principio de esta página
Volver al principio de esta página
Nota: Siempre agregue una barra diagonal final a las referencias de la
subcarpeta. Si enlazas así:
href = "http://profdevtrain.austincc.edu/html", generará dos solicitudes HTTP
a la
servidor, porque el servidor agregará una barra inclinada a la dirección y
creará una nueva solicitud como esta:
href = "http://profdevtrain.austincc.edu/html/"
Los anclajes con nombre a menudo se usan para crear una "tabla de
contenidos" al comienzo de un documento grande. Cada
El capítulo dentro del documento recibe un ancla con nombre y los enlaces a
cada una de estas anclas se ponen en
la parte superior del documento. Si un navegador no puede encontrar un
anclaje con nombre que se ha especificado, va a
la parte superior del documento. No se produce ningún error.
Imágenes HTML
La etiqueta de imagen y el atributo Src
La etiqueta <img> está vacía, lo que significa que solo contiene atributos y
no tiene etiqueta de cierre. A
mostrar una imagen en una página, necesita utilizar el atributo src. Src
significa "fuente". El valor de
El atributo src es la URL de la imagen que desea mostrar en su página. La
sintaxis de definir un
imagen:
Este codigo
Mostraría
<img src = "graphics / chef.gif">
No solo el atributo de origen especifica qué imagen usar, sino también dónde
se encuentra la imagen. los
imagen superior, graphics / chef.gif, significa que el navegador buscará el
nombre de la imagen chef.gif en una
Carpeta de gráficos en la misma carpeta que el propio documento html.
Página 13
src = "chef.gif" significa que la imagen está en el
misma carpeta que el documento html que lo requiere.
src = "images / chef.gif" significa que la imagen es
una carpeta hacia abajo desde el documento html que
llamado para ello Esto puede bajar tantas capas
según sea necesario.
src = "../ chef.gif" significa que la imagen está en
una carpeta arriba del documento html que llamó
para ello.
src = "../../ chef.gif" significa que la imagen es
dos carpetas arriba del documento html que llama
para ello.
src = "../ images / chef.gif" significa que la imagen
es una carpeta arriba y luego otra carpeta abajo en
El directorio de imágenes.
src = "../../../ otro / images / chef.gif" significa
esto sube varias capas.
El navegador coloca la imagen donde aparece la etiqueta de imagen en el
documento. Si pones una etiqueta de imagen
entre dos párrafos, el navegador muestra el primer párrafo, luego la imagen y
luego el segundo
párrafo.
El atributo Alt
El atributo alt se utiliza para definir un texto alternativo para una imagen. El
valor del atributo alt es
texto definido por el autor:
<img src = "graphics / chef.gif" alt = "Smiling Happy Chef">
El atributo alt le dice al lector lo que él o ella falta en una página si el
navegador no puede cargar imágenes.
El navegador mostrará el texto alternativo en lugar de la imagen. Es una buena
práctica incluir
el atributo alt para cada imagen en una página, para mejorar la visualización y
la utilidad de su documento para
personas que tienen navegadores de solo texto o usan lectores de pantalla.
Dimensiones de la imagen
Cuando tiene una imagen, el navegador generalmente se da cuenta de cuán
grande es la imagen por sí misma. Si pones
en las dimensiones de la imagen en píxeles, sin embargo, el navegador
simplemente reserva un espacio para la imagen, luego
Página 14
Carga el resto de la página. Una vez que toda la página está cargada, puede
volver atrás y rellenar las imágenes. Sin
dimensiones, cuando se ejecuta en una imagen, el navegador tiene que pausar
la carga de la página, cargar la imagen,
luego continúa cargando la página. La imagen del chef sería entonces:
<img src = "graphics / chef.gif" width = "130" height = "101" alt = "Smiling
Happy Chef">
Abra el archivo mypage2.html en su editor de texto y agregue el código
resaltado en negrita:
<html>
<head>
</head>
<body>
<p> Bienvenido a mi primera página web. Estoy escribiendo esta página con
un editor de texto y un código HTML antiguo. </p>
<! - Quién hubiera adivinado lo fácil que sería esto :) ->
<p> <img src = "graphics / chef.gif" width = "130" height = "101" alt =
"Smiling Happy Chef"
align = "center"> </p>
<p align = "center"> Este es mi Chef </p>
</body>
</html>
cómo debe verse tu página visita.
esta página web: http://profdevtrain.austincc.edu/html/mypage5.html
Mesas
Las tablas se definen con la etiqueta <table> . Una tabla se divide en filas
(con la etiqueta <tr> ) y cada fila
se divide en celdas de datos (con la etiqueta <td> ). Las letras td representan
datos de tabla, que es el contenido
de una celda de datos. Una celda de datos puede contener texto, imágenes,
listas, párrafos, formularios, reglas horizontales, tablas,
etc.
Este codigo
Mostraría
<table>
<tr>
<td> fila 1, celda 1 </td>
</tr>
<tr>
</tr>
</table>
fila 1, celda 1 fila 1, celda 2
Tablas y el atributo de borde
Para mostrar una tabla con bordes, utilizará el atributo de borde.
Este codigo
Mostraría
<table border = "1" >
<tr>
<td> Fila 1, celda 1 </td>
</tr>
</table>
Página 15
y....
Este codigo
Mostraría
<table border = "5" >
<tr>
</tr>
</table>
Abre tu editor de texto. Escriba sus etiquetas <html>,
<head> y <body> . De aquí en adelante solo seré
escribiendo lo que va entre las etiquetas <body> . Escriba lo siguiente:
<table border = "1">
<tr>
<td> Las tablas se pueden usar para diseñar información </td>
<td> & nbsp; <img src =
"http://profdevtrain.austincc.edu/html/graphics/chef.gif"> & nbsp;
</td>
</tr>
</table>
Guarde su página como mytable1.html y véala en su navegador. Para ver
cómo debe verse tu página.
Visite esta página
web: http://profdevtrain.austincc.edu/html/mytable1.html
Encabezados en una tabla
Los encabezados de una tabla se definen con la etiqueta <th> .
Este codigo
Mostraría
<tr>
<th> Encabezado </th>
<th> Otro título </th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Título
Otro rumbo
Acolchado celular y espaciado
La etiqueta <table> tiene dos atributos conocidos como espacio de celdas y
relleno de celda. Aquí hay un ejemplo de tabla.
sin estas propiedades. Estas propiedades pueden ser usadas por separado o
juntas.
Este codigo
Mostraría
<tr>
<td> algún texto </td>
</tr>
<tr>
</tr>
</table>
algún texto un poco de texto
Página 16
El espacio entre celdas es el ancho de píxel entre las celdas de datos
individuales en la tabla (el grosor de las líneas
haciendo la cuadrícula de la mesa). El valor predeterminado es cero. Si el
borde se establece en 0, las líneas de espacio de celdas serán
invisible.
Este codigo
Mostraría
<table border = "1" cellspacing = "5" >
<tr>
</tr> <tr>
</tr>
</table>
Cellpadding es el espacio de píxeles entre el contenido de la celda y el borde
de la celda. El valor predeterminado para este
La propiedad también es cero. Esta función no se usa con frecuencia, pero a
veces resulta útil cuando tiene
sus bordes se activaron y desea que los contenidos estén un poco alejados del
borde para una fácil visualización.
Cellpadding es invisible, incluso con la propiedad de borde
activada. Cellpadding se puede manejar en un estilo
hoja.
Este codigo
Mostraría
<table border = "1" cellpadding = "10" >
<tr>
</tr> <tr>
</tr>
</table>
Etiquetas de tabla
Etiqueta
Descripción
<table> Define una tabla
<th>
Define un encabezado de tabla
<tr>
Define una fila de tabla
<td>
Define una celda de tabla
<caption> Define un título de tabla
<colgroup> Define grupos de columnas de tabla
<col>
Define los valores de atributo para una o más columnas en una tabla
Tamaño de la mesa
Ancho de la mesa
El atributo de ancho se puede usar para definir el ancho de su tabla. Se puede
definir como un ancho fijo o
Un ancho relativo. Un ancho de tabla fijo es aquel en el que el ancho de la
tabla se especifica en píxeles. por
Por ejemplo, este código, <table width = "550"> , producirá una tabla
de 550 píxeles de ancho. Una tabla relativa
el ancho se especifica como un porcentaje del ancho de la ventana de
visualización del visitante. De ahí este código, <tabla
width = "80%"> producirá una tabla que ocupa el 80 por ciento de la pantalla.
Este ancho de mesa es de 250 píxeles.
Este ancho de mesa es del 50%.
Página 17
Hay argumentos a favor de dar a sus tablas un ancho relativo porque tales
anchos de tabla producen
Páginas que funcionan independientemente de la resolución de pantalla del
visitante. Por ejemplo, un ancho de tabla de 100%
siempre abarque todo el ancho de la ventana del navegador si el visitante tiene
una pantalla de 800x600 o una
Pantalla de 1024x768 (etc). Su visitante nunca necesita desplazarse
horizontalmente para leer su página, algo
Eso es considerado por la mayoría de la gente como muy molesto.
Diseño HTML - Uso de tablas
Una práctica muy común con HTML, es
utilizar tablas HTML para formatear el diseño de una
Página HTML.
Una parte de esta página está formateada con dos
columnas Como podéis ver en esta página, hay
Es una columna de la izquierda y una columna de la derecha.
Este texto se muestra en la columna izquierda.
Se utiliza una <table> HTML para dividir una parte de
esta página web en dos columnas.
El truco es usar una tabla sin bordes,
y tal vez un poco de relleno de celdas extra.
No importa cuanto texto agregues a esto
Página, se mantendrá dentro de los bordes de su columna.
¡Pruébalo!
Vamos a poner todo lo que has aprendido juntos para crear una página
simple. Abre tu editor de texto y escribe
el siguiente texto:
<html>
<head>
</head>
<body>
<table width = "90%" cellpadding = "5" cellspacing = "0">
<tr bgcolor = "# EDDD9E">
<td width = "200" valign = "top"> <img src = "graphics / contact.gif" width =
"100"
height = "100"> </td>
<td valign = "top"> <h1 align = "right"> Janet Doeson </h1>
<h3 align = "right"> Especialista Técnico </h3> </td>
</tr>
<tr>
<td width = "200">
<h3> Menú </h3>
<ul>
<li> <a href="home.html"> Inicio </a> </li>
<li> <a href="faq.html"> Preguntas frecuentes </a> </li>
<li> <a href="contact.html"> Contacto </a> </li>
<li> <a href="http://www.austincc.edu"> Enlaces </a> </li>
</ul> </td>
<td valign = "top"> <h2 align = "center"> ¡Bienvenido! </h2>
<p> Bienvenido a mi primera página web. He creado esta página web sin la
ayuda de un
editor de página web. Solo mi pequeño editor de texto y una comprensión
profunda de html. </p>
<p> Mira a tu alrededor. Note que puedo usar párrafos, listas y
encabezados. Tú quizás no
Poder decir, pero el diseño se realiza con una tabla. Soy muy inteligente </p>
<blockquote>
<p> Siempre quise ser alguien, pero ahora me doy cuenta de que debería
haber sido más
especifico. </p>
<cite> Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width = "90%" align = "left">
<dirección>
Janet Doeson <br>
Especialista Técnico <br>
512.555.5555
</address>
<p> Contáctame en <a href="mailto:jdoeson@acme.com">
jdoeson@acme.com </a> </p>
Página 18
</body>
</html>
Guarde su página como mytable2.html y véala en su navegador. Para ver
cómo debe verse tu página.
Visite esta página
web: http://profdevtrain.austincc.edu/html/mytable2.html
He sangrado parte del código HTML en el ejemplo anterior. El sangrado del
código puede hacer que su
Documento HTML más fácil de leer.
Crea tu propia página
Es hora de crear tu propia página. Use su editor de texto para crear una página
que contenga lo siguiente:
• los códigos de página HTML requeridos
• enlace a otra página web
• un enlace de correo electrónico
• una imagen / gráfico
• una lista de información

Conceptos Basicos HTML

Cargado por

Información del documento

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

Conceptos Basicos HTML

Cargado por

Copyright:

Formatos disponibles

Conceptos básicos de HTML

Bienvenido a HTML Basics. Este taller lo lleva a través de los conceptos

También podría gustarte