Fin en mente: Dar a conocer las características principales del lenguare HTML
1.- ¿Qué es HTML y que significa?
·
HTML (HyperText Markup Language)
o "Lenguaje para Marcado de Hipertexto".
·
HTML es el
lenguaje que te permite describir y dar forma a tús páginas Web.
·
Publica tus propias páginas con fotos, listas,
tablas, etc.
·
Obtén información de los visitantes de tu
sitio.
·
Diseña los formularios que te permitirán
contactar tus futuros clientes.
·
Crea un sitio para vender tús productos o
servicios.
·
Incluye video clips, música, sonidos, y otras
aplicaciones que darán vida a tús páginas Web.
2.- Características de
HTML
Los
archivos HTML
·
Los archivos HTML deben tener una
extensión htm o html (ej. misitio.htm o
misitio.html).
·
Para crear un archivo HTML solo
hace falta un editor de texto.
·
Un archivo HTML está compuesto
por etiquetas.
·
Las etiquetas le dicen al navegador (Ej: Internet
Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la
página Web.
3. Reglas
básicas para programar en HTML
·
Las etiquetas están encerradas entre los signos
"<" y ">".
·
Generalmente vienen en pares <p> y <⁄p>.
·
La primera es de apertura y la
segunda de cierre.
·
El texto que se encuentra entre dos etiquetas es
el contenido del elemento.
·
Las etiquetas no son sensibles a las mayúsculas y
minúsculas, o sea <b> es lo mismo que <B>
4.- Estructura básica de HTML
<HTML> Indica
el inicio del documento.
<HEAD> Define
el inicio de la cabecera.
<TITLE> Inicia
el título del documento.
Información
técnica del navegador
</TITLE> Fin
del título del documento.
</HEAD> Define
el fin de la cabecera.
<BODY> Inicio
del cuerpo del documento.
Contenido de la página Web
</BODY> Fin
del cuerpo del documento.
</HMTL> Indica
el fin del documento.
5.- ¿Qué son los atributos de las etiquetas?
Muchas etiquetas llevan atributos. Los mismos
proveen de mayor información a los elementos HTML.
·
Los atributos siempre van con la estructura: nombre="valor".
·
Los atributos siempre van en la etiqueta
de apertura.
·
Los valores siempre hay que ponerlos entre
comillas.
Ejemplo
<body bgcolor="#FFFF00"> <b>Este texto es en negrita</b> </body>
Un consejo con respecto al uso de minúsculas.
Si bien HTML acepta tanto etiquetas en mayúscula
<B> como en minúscula <b>, La World Wide Web, recomienda el uso de minúsculas.
Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.
Es por eso que recomendamos acostumbrarse a
usar minúsculas cuando escribas tus códigos HTML
6.- Como empezar a programar en HTML en windows
Si estás usando Windows, abre el "Bloc de Notas".
Para Mac es Text Edit
7.- Como guardar un archivo HTML
Guarda el archivo
como "pagina1.html" (las extensiones ".htm" o
".html" tienen el mismo significado y nos indican que se trata de un
archivo HTML).
·
Abre el navegador Internet (Internet Explorer,
Firefox, Chrome, etc.).
·
Selecciona "File" y luego
"Open".
·
Se abrirá una ventana, selecciona
"Browse" y ubica el archivo que acabas de guardar
-"pagina1.html"- elígelo y presiona "Open".
·
Ahora tú ves la dirección, por ejemplo "C:\My
Documents\pagina1.html". Presiona "OK" y el navegador mostrará
la página recién creada.
8.-
Color en hexadecimal
Del más claro al más oscuro
Incluya la notación hex
Nombre del color
|
Código hex
|
Color "seguro para web" más
cercano
|
BLANCO
|
#FFFFFF
|
#FFFFFF
|
AZUR
|
#F0FFFF
|
#FFFFFF
|
CREMA
|
#F5FFFA
|
#FFFFFF
|
NIEVE
|
#FFFAFA
|
#FFFFFF
|
MARFIL
|
#FFFFF0
|
#FFFFFF
|
BLANCO FANTASMA
|
#F8F8FF
|
#FFFFFF
|
BLANCO FLORAL
|
#FFFAF0
|
#FFFFFF
|
AZUL ALICIA
|
#F0F8FF
|
#FFFFFF
|
CIAN CLARO
|
#E0FFFF
|
#CCFFFF
|
MELÓN VERDE
|
#F0FFF0
|
#FFFFFF
|
AMARILLO CLARO
|
#FFFFE0
|
#FFFFFF
|
CONCHA
|
#FFF5EE
|
#FFFFFF
|
SONROJO LAVANDA
|
#FFF0F5
|
#FFFFFF
|
HUMO BLANCO
|
#F5F5F5
|
#FFFFFF
|
ENCAJE ANTIGUO
|
#FDF5E6
|
#FFFFFF
|
SEDA DE MAÍZ
|
#FFF8DC
|
#FFFFCC
|
LINO
|
#FAF0E6
|
#FFFFFF
|
AMARILLO ALAMBRE DORADO CLARO
|
#FAFAD2
|
#FFFFCC
|
GASA LIMÓN
|
#FFFACD
|
#FFFFCC
|
BEIGE
|
#F5F5DC
|
#FFFFCC
|
LAVANDA
|
#E6E6FA
|
#CCCCFF
|
BATIDO DE PAPAYA
|
#FFEFD5
|
#FFFFCC
|
ROSA BRUMOSA
|
#FFE4E1
|
#FFCCCC
|
BLANCO ANTIGUO
|
#FAEBD7
|
#FFFFCC
|
BLANCO ALMENDRA
|
#FFEBCD
|
#FFFFCC
|
SOPA
|
#FFE4C4
|
#FFFFCC
|
TURQUESA PÁLIDO
|
#AFEEEE
|
#99FFFF
|
MOCASÍN
|
#FFE4B5
|
#FFCCCC
|
GAINSBORO
|
#DCDCDC
|
#CCCCCC
|
SOPLIDO MELOCOTÓN
|
#FFDAB9
|
#FFCCCC
|
BLANCO NAVAJO
|
#FFDEAD
|
#FFCC99
|
DORADO ALAMBRE PÁLIDO
|
#EEE8AA
|
#FFFF99
|
TRIGO
|
#F5DEB3
|
#FFCCCC
|
POLVO AZUL
|
#B0E0E6
|
#CCCCFF
|
AGUAMARINA
|
#7FFFD4
|
#66FFCC
|
GRIS CLARO
|
#D3D3D3
|
#CCCCCC
|
ROSA
|
#FFC0CB
|
#FFCCCC
|
AZUL CLARO
|
#ADD8E6
|
#99CCFF
|
CARDO
|
#D8BFD8
|
#CCCCCC
|
ROSA CLARO
|
#FFB6C1
|
#FFCCCC
|
AZUL CIELO CLARO
|
#87CEFA
|
#99CCFF
|
VERDE PÁLIDO
|
#98FB98
|
#99FF99
|
AZUL ACERO CLARO
|
#B0C4DE
|
#99CCCC
|
CAQUI
|
#F0D58C
|
#FFCC99
|
AZUL CIELO
|
#87CEEB
|
#99CCFF
|
AGUA
|
#00FFFF
|
#00FFFF
|
CIAN
|
#00FFFF
|
#00FFFF
|
PLATA
|
#C0C0C0
|
#CCCCCC
|
CIRUELA
|
#DDA0DD
|
#CC99CC
|
GRIS
|
#BEBEBE
|
#CCCCCC
|
VERDE CLARO
|
#90EE90
|
#99FF99
|
VIOLETA
|
#EE82EE
|
#FF99FF
|
AMARILLO
|
#FFFF00
|
#FFFF00
|
TURQUESA
|
#40E0D0
|
#33CCCC
|
MADERA FORNIDA
|
#DEB887
|
#CCCC99
|
AMARILLO VERDE
|
#ADFF2F
|
#99FF33
|
BRONCEADO
|
#D2B48C
|
#CCCC99
|
TURQUESA MEDIO
|
#48D1CC
|
#33CCCC
|
SALMÓN CLARO
|
#FFA07A
|
#FF9966
|
AGUAMARINA MEDIO
|
#66CDAA
|
#66CC99
|
GRIS OSCURO
|
#A9A9A9
|
#999999
|
ORQUÍDEA
|
#DA70D6
|
#CC66CC
|
VERDE MAR INTENSO
|
#8FBC8F
|
#99CC99
|
AZUL CIELO INTENSO
|
#00BFFF
|
#00CCFF
|
MARRÓN ARENA
|
#F4A460
|
#FF9966
|
DORADO
|
#FFD700
|
#FFCC00
|
VERDE PRIMAVERA MEDIO
|
#00FA9A
|
#00FF99
|
CAQUI OSCURO
|
#BDB76B
|
#CCCC66
|
ACIANO AZUL
|
#6495ED
|
#6699FF
|
ROSA CALIENTE
|
#FF69B4
|
#FF66CC
|
SALMÓN OSCURO
|
#E9967A
|
#FF9966
|
TURQUESA OSCURO
|
#00CED1
|
#00CCCC
|
VERDE PRIMAVERA
|
#00FF7F
|
#00FF66
|
CORAL CLARO
|
#F08080
|
#FF9999
|
MARRÓN ROSADO
|
#BC8F8F
|
#CC9999
|
SALMÓN
|
#FA8072
|
#FF9966
|
CHARTREUSE
|
#7FFF00
|
#66FF00
|
PÚRPURA MEDIO
|
#9370DB
|
#9966CC
|
VERDE CÉSPED
|
#7CFC00
|
#66FF00
|
AZUL DODGER
|
#1E90FF
|
#3399FF
|
VERDE AMARILLO
|
#9ACD32
|
#99CC33
|
VIOLETA ROJO PÁLIDO
|
#DB7093
|
#CC6699
|
AZUL PIZARRA MEDIO
|
#7B68EE
|
#6666FF
|
ORQUÍDEA MEDIO
|
#BA55D3
|
#CC66CC
|
CORAL
|
#FF7F50
|
#FF6666
|
AZUL CADETE
|
#5F9EA0
|
#669999
|
VERDE MAR CLARO
|
#20B2AA
|
#339999
|
DORADO ALAMBRE
|
#DAA520
|
#CC9933
|
NARANJA
|
#FFA500
|
#FF9900
|
GRIS PIZARRA CLARO
|
#778899
|
#669999
|
FUCSIA
|
#FF00FF
|
#FF00FF
|
MAGENTA
|
#FF00FF
|
#FF00FF
|
VERDE MAR MEDIO
|
#3CB371
|
#33CC66
|
PERÚ
|
#CD853F
|
#CC9933
|
AZUL ACERO
|
#4682B4
|
#3399CC
|
AZUL REAL
|
#4169E1
|
#3366CC
|
GRIS PIZARRA
|
#708090
|
#669999
|
TOMATE
|
#FF6347
|
#FF6633
|
NARANJA OSCURO
|
#FF8C00
|
#FF9900
|
AZUL PIZARRA
|
#6A5ACD
|
#6666CC
|
VERDE LIMA
|
#32CD32
|
#33CC33
|
LIMA
|
#00FF00
|
#00FF00
|
ROJO INDIO
|
#CD5C5C
|
#CC6666
|
ORQUÍDEA OSCURO
|
#9932CC
|
#9933CC
|
AZUL VIOLETA
|
#8A2BE2
|
#9933FF
|
ROSA INTENSO
|
#FF1493
|
#FF0099
|
DORADO ALAMBRE OSCURO
|
#B8860B
|
#CC9900
|
CHOCOLATE
|
#D2691E
|
#CC6633
|
CIAN OSCURO
|
#008B8B
|
#009999
|
GRIS DIFUSO
|
#696969
|
#666666
|
GRIS ACEITUNA
|
#6B8E23
|
#669933
|
VERDE MAR
|
#2E8B57
|
#339966
|
VERDE CERCETA
|
#008080
|
#009999
|
VIOLETA OSCURO
|
#9400D3
|
#9900CC
|
VIOLETA ROJO MEDIO
|
#C71585
|
#CC0066
|
NARANJA ROJO
|
#FF4500
|
#FF3300
|
ACEITUNA
|
#808000
|
#999900
|
SIENA
|
#A0522D
|
#996633
|
AZUL PIZARRA OSCURO
|
#483D8B
|
#333399
|
VERDE ACEITUNA OSCURO
|
#556B2F
|
#666633
|
VERDE BOSQUE
|
#228B22
|
#339933
|
CARMESÍ
|
#DC143C
|
#CC0033
|
AZUL
|
#0000FF
|
#0000FF
|
MAGENTA OSCURO
|
#8B008B
|
#990099
|
GRIS PIZARRA OSCURO
|
#2F4F4F
|
#336666
|
MARRÓN MONTURA
|
#8B4513
|
#993300
|
MARRÓN
|
#A52A2A
|
#993333
|
LADRILLO REFRACTARIO
|
#B22222
|
#993333
|
PÚRPURA
|
#800080
|
#990099
|
VERDE
|
#008000
|
#009900
|
ROJO
|
#FF0000
|
#FF0000
|
AZUL MEDIO
|
#0000CD
|
#0000CC
|
ÍNDIGO
|
#4B0082
|
#330099
|
AZUL MEDIANOCHE
|
#191970
|
#000066
|
VERDE OSCURO
|
#006400
|
#006600
|
AZUL OSCURO
|
#00008B
|
#000099
|
AZUL MARINO
|
#000080
|
#000099
|
ROJO OSCURO
|
#8B0000
|
#990000
|
GRANATE
|
#800000
|
#990000
|
NEGRO
|
#000000
|
#000000
|
9.- Etiqueta básicas de HTML
Tag
(Etiqueta)
|
Descripción
|
<!--...-->
|
Define un comentario
|
<a>
|
Define un hiperenlace
|
<b>
|
Define texto en negrita
|
<basefont>
|
No soportado en HTML5.
Depreciado en HTML 4.01. Especifica un color , medida y fuente por defecto
para todo el texto en un documento
|
<body>
|
Define el cuerpo del documento
|
<br>
|
Define una rotura de línea
simple
|
<center>
|
No soportado en HTML5.
Depreciado en HTML 4.01. Define el texto centrado
|
<col>
|
Especifica la columna
propiedades para cada columna dentro de un elemento <colgroup>
|
<colgroup>
|
Especifica un grupo de una o
más columnas en una tabla para formato
|
<dd>
|
Defina una descripción de un
ítem en una lista de definiciones
|
<div>
|
Defines
a section in a document
|
<dl>
|
Defines a definition list
|
<dt>
|
Defines
a term (an item) in a definition list
|
<font>
|
Not
supported in HTML5. Deprecated in HTML 4.01. Defines font, colour, and size
for text
|
<h1> to <h6>
|
Defines HTML headings
|
<head>
|
Defines
information about the document
|
<hr>
|
Defines
a thematic change in the content
|
<html>
|
Defines
the root of an HTML document
|
<i>
|
Defines
a part of text in an alternate voice or mood
|
<img>
|
Defines an image
|
<input>
|
Defines an input control
|
<legend>
|
Defines
a caption for a <fieldset>, < figure>, or <details> element
|
<li>
|
Defines a list item
|
<link>
|
Defines
the relationship between a document and an external resource (most used to
link to style sheets)
|
<ol>
|
Defines an ordered list
|
<p>
|
Defines a paragraph
|
<table>
|
Define una tabla
|
<tbody>
|
Agrupa el contenid del cuerpo
en una tabla
|
<td>
|
Define una célda en una tabla
|
<th>
|
Define una celda de encabezado
en una tabla
|
<time>
|
Define una fecha/hora
|
<title>
|
Define el título de un documeto
|
<tr>
|
Define una fila en una table
|
<u>
|
Define un texto que puede ser
estadísticamente diferente de un texto normal
|
<ul>
|
Define una lista sin ordenar
|
+11.29.06.png)
+11.29.21.png)