HTML HTML o Hypertex t Markup Language o Lenguaje de Diseño de Hipertextos es un lenguaje que se u tiliza para crear páginas Web. Preguntas Frecuentes: - ¿Profe Díaz, qué software necesito para programar en HTML? Sólo necesitas el Bloc de notas de Windows y un navegador como Microsoft In ternet Explorer. En realidad puedes usar cualquier editor de texto s y cualquier navegador. - ¿Profe Díaz, necesito estar conectado a In ternet para crear mi página Web? No. Cuando programas tu página Web, puedes verla en el navegador sin necesidad de estar conectado a Internet. - ¿Profe Díaz me han dicho que el HTML no sirve y que es mejor u sar el Fron tPage o Dreamweaver?. ¡No seas tarado!, en esos programitas creas tu página Web como si lo estuvieras haciendo en Word, pero detrás de ellos se esta escribiendo automá ticamente el código HTML. Y además esos programitas no son 100% eficientes y siempre tendrás que hacer tus propias modificaciones ¿Y como diablos piensas hacer esas modificaciones si no sabes HTML? ¡Dime! ¡Habla! ¡No te quedes callado! ¡Estoy perdiendo el controoooooooooooooooooool!. - Calma Profe Díaz, ¿Puede responderme o tra pregun ta? ¡Queeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee! - No se altere Profe Díaz, suelte esa silla, solo quiero saber ¿por qué se promociona tanto los programitas FrontPage y Dreamweaver?. ¡Ahhhhhhhhhhhhhhhhhhhhhhh! Esta bien no te atacaré, te responderé. La idea es que tu construyas la forma básica de tu página Web en esos programitas y luego lo retoques usando HTML. Personalmente es mejor usar Dreamweaver pues es más fácil añadir elementos de Flash, Fireworks, etc., pero el más sencillo y no muy malo es el Fron tPage. Pero de eso hablaremos o tro día. - O tra pregun ta Profe Díaz, ¿Es fácil aprender HTML? Claro que sí, pero ya no me hagas perder el tiempo y ¡empecemos el curso!. - Pero quiero preguntar más. ¡Noooooooooo! ¡Toma! ¡Ja Ja Ja! ¡Toma o tra vez! - ¡Auxiliooooooooooooooooooooooooooooooooooooo! Por fin se callo, ahora empecemos. ¡Y presten a tención o ya saben lo que les espera!
☺
Estructura básica del documento HTML Se compone básicamente de dos partes: Una cabecera y un cuerpo. Nuestro código Nuestro código
Las etiquetas y identifican el principio y el final del documento HTML. Las etiquetas y limitan la cabecera del documento. Las etiquetas y limitan el cuerpo del documento. Ejemplo 1: Crearemos una página Web que muestre el nombre del conocido Profe Díaz. Primero: En el Bloc de no tas escriba el siguiente código. E jemplo 1 Hola mi nombre es Carlos Díaz y no te olvides visitar mi página www.lanzadera.com/elprofediaz Segundo: En el Explorador de Windows crea una carpeta donde guardaras tus archivos. Tercero: Guárdalo con el nombre "E jemplo1.htm" y recuerda colocar las comillas. Cuarto: Abre el In ternet Explorer y mediante su menú Archivo/Abrir carga tu documen to Ejemplo1.htm el resulta do se muestra en la siguiente página. Observa que el título de la ventana es lo que pusiste entre las etiquetas y . Observa que lo que aparece en la página es lo que pusiste dentro de las etiquetas y . Recomendación Súper Importante: Es mejor colocar todo s los elemen tos de tu página Web en una sola carpeta, para que el HTML no tenga problemas al ubicar los archivos, por ejemplo yo lo estoy guardando todo en la carpeta: C:\Separa tas del ProfeDiaz\HTML
Encabezados Los encabezados son utilizados para resaltar palabras o frases. Tenemos seis tamaños de encabezado el más grande esta comp rendido en tre las etiquetas y y el más pequeño esta comprendido entre las etiquetas y . Si quiere alinear el encabezado utilicé el atributo ALIGN con la opción LEFT(izquierda), CENTER(Centro), RIGHT(Derecha) o JUSTIFY(Justificado). Si no usa ALIGN el HTML supondrá la alineación LEFT(Izquierda). En adelante no colocaré las traducciones, así que mejor consígase un diccionario inglés/español.
Ejemplo 2: Crearemos una página Web que muestre el uso de los encabezados. Primero: En el bloc de notas escriba el siguiente código. E jemplo 2 Frases Famosas Ganar no es to do, es lo único. El secreto de andar so bre las aguas, es saber donde están las piedras. Si piensas que puedes o no puedes, siempre tienes razón. El conocimiento es poder. Prohibido, prohibir. Que bonitas frases. Segundo: Guárdalo con el nombre "Ejemplo2.htm" Tercero: Abre el In ternet Explorer y mediante su menú Archivo/Abrir carga tu documento Ejemplo2.htm el resulta do se muestra en la siguiente página.
Estilos de letra Los estilos más conocidos utilizan las siguientes etiquetas: y Letra negrita. y Letra cursiva o itálica. y Letra subrayada. y Letra tachada. y Letra tipo mecanografiado. O sea tipo máquina de escribir.
y “Color” es el color de la letra (escrita en inglés), “Tamaño” es el tamaño de la letra y puede tener un valor entre 1 y 7, aunque si le coloca otro número no mandará error, pero tampoco le hará caso. Por defec to el tamaño es 3. y +“T” indica que la letra saldrá T puntos más grande del tamaño que tiene actualmente. y -“T” indica que la letra saldrá T puntos más pequeño del tamaño que tiene actualmente. y Letra tipo subíndice. Y Letra tipo superíndice. Ejemplo 3: Crearemos una página Web que muestre el uso de los estilos de letra. Primero: En el bloc de notas escriba el siguiente código. E jemplo 3 Fórmulas Conocidas Las siguientes Formulas son muy conocidas y peligrosas de usar. Por lo tan to recomendamos experimen tarlas en un labora torio super seguro en lo más p rofundo de la tierra. Fórmula del agua: H2O Fórmula de la energía una partícula: E=mc2 Segundo: Guárdalo con el nombre "Ejemplo3.htm" Tercero: En In ternet Explorer carga tu documen to Ejemplo3.htm y obtendrás lo siguiente.
Por si acaso si no sabes inglés aquí te doy unos colores: Anti quew hi te Blanched Chocolate Darkcyan Darkorange Darkturquoi Floralw hi te Gray Ivory Li ghtcoral Li ghtseagree Li nen Medi umseagr Mistyrose Orange Papayaw hi p Red seashell Spri nggreen Vi olet
Aqua Blue Coral Darkgol denr Darkorchi d Darkvi olet Forestgr een Green Khaki Li ghtcyan Li ghtskyblue Magenta Medi umslateb Moccasi n Orangered Peachpuff Rosybrow n Si enne Steelblue Wheat
Aquamari ne Bluevi olet Cornflow er Darkgray Darkred Deeppi nk Fuchsi a Greeyellow Lavender Li ghtgolden Li ghtslategr Maroon Medi umspri ng Navajow hi te Orchi d Peru Royal blue Silver Tan Whi te
Azure Brow n Cornsi lk Darkgreen Darksalmon Deepskyblue Gai nsboro Honeydew Lavenderblue Li ghtgray Li ghts teelbl Medi umaquam Medi umturqu Navy Palegol denr Pi nk Saddlebrow n Skyblue Teal Whi tesmoke
Bei ge Burlyw ood Crimson Darkkhaki Darkseagr een Di mgray Ghostw hi te Hotpi nk Law ngreen Li ghtgr een Li ghtyellow Medi umblue Medi umvi olet Oldlace Palegreen Plum Salmon Slateblue Thi stle Yellow
Bi sque Cadetblue Cyan Darkmagent Darkslatebl Dodger blue Gold Indi anred Lemonchi llon Li ghtpi nk Li me Medi umorchi d Mi dni ghtblue Olive Paleturquoi se Pow derblue Sandybrow n Slategray Tomato Yellow green
Black Chartr euse Darkblue Darkoli vegre Darkslategr Fi rebri ck Goldenrod Indi go Li ghtblue Li ghtsalmon Li megreen Medi umpurp Mi ntcream Olivedrab Palevi oletr Purple Seagreen Snow Turquoi se
Párrafos y espacios en blanco Como habrá nota do en el ejemplo an terior, el HTML no hace caso a los retornos de carro (o sea los ENTER) normales ni tampoco a múltiples espacios en blanco de la barra espaciadora. Las siguientes etiquetas permiten manipular los retornos de carro y los espacios en blanco, note que ninguna tiene etiqueta de cierre:
Inicia un nuevo párrafo dejando una línea en blanco. Inicia un nuevo párrafo sin dejar ninguna línea en blanco. Produce un espacio en blanco. En realidad no es una etiqueta sino el caracter de espacio en blanco. Ejemplo 4: Modifique el ejemplo anterior para que se vea más presen table. Primero: En el bloc de notas modifique el código del ejemplo anterior, tal como se muestra. E jemplo 4 Fórmulas Conocidas Las siguientes Formulas son muy conocidas y peligrosas de usar.
Por lo tan to recomendamos experimen tarlas en un labora torio super seguro en lo más p rofundo de la tierra. Fórmula &n bsp; ; &n bsp; del agua: H2O Fórmula de la energía una partícula:E=mc2
Segundo: Guárdalo con el nombre "Ejemplo4.htm" Tercero: Abre el In ternet Explorer y mediante su menú Archivo/Abrir carga tu documento Ejemplo4.htm el resulta do se muestra a con tinuación.
Líneas Las líneas que se pueden insertar en HTML pueden tener distinto color, alineación, ancho horizontal y espesor. Dibuja una línea horizontal de lado a lado del documen to. “Color” es el color de la línea horizontal, “Alineación” puede ser LEFT, RIGHT o CENTER, con un “Ancho” que puede estar en píxeles o ser un porcentaje del ancho del documento y con un grosor igual a “Espesor” píxeles. Ejemplo 5: Dibujemo s algunas líneas. E jemplo 5 Línea de lado a lado Línea en el centro con un ancho de 50% Línea a la derecha con un ancho de 25% Línea a la izquierda con un ancho de 75% Línea azul a la izquierda con un ancho de 25% Línea verde en el centro con un ancho de 50% y un espesor de 10 píxeles Línea roja a la derecha con un ancho de 25% y un espesor de 20 píxeles
Alinea el texto según el valor que tome “Alineación” (LEFT, CENTER, RIGHT o JUSTIFY) Centra el tex to. También puede usar
y
Lista de elementos HTML permite crear tres tipos de listas de elemen tos. Las etiquetas son las siguientes: y Lista ordenada o numerada. “Tipo” define el tipo de numeración y puede ser 1, a, A, i, I. Cada elemento de la lista debe ir precedido por la etiqueta
y
Lista desordenada o de viñetas. “Tipo” define el tipo de viñeta y puede ser disk, square, circle escritas en minúsculas. Cada elemento de la lista debe ir precedido por la etiqueta
y Lista de glosario o tipo índice. Los títulos principales deben ir precedidos por la etiqueta y los títulos de párrafo sangrados deben ir precedidos por las etiquetas Ejemplo 6: Ahora combinemos todo lo aprendido para crear la página personal de Arturito el niño Genio. E jemplo 6 Página Personal de Arturi to
Hola, mi nombre es Arturito, más conocido como el niño genio de las ma temá ticas. Ac tualmen te estoy de vacaciones y la estoy pasando muy bien en mi mansión de la isla Tortuga, que a propósito también es mi isla, mi tío, El Profe Díaz, me la regaló el día de mi cumpleaños. Casi todos los días me la paso paseando en mi yate cerca al Triangulo de las Bermudas ¿Has oído hablar de él?, supongo que si.
Después, al atardecer regreso a mi mansión y voy con mi jeep a mi habitación donde se encuentra mi supercomputadora que me costo un millón de dólares, me la compre juntando mis propinas del mes pasado. En mi computadora tengo muchos juegos, te daré una lista de los más emocionantes:
Age of empires
Black & White
Quake III Arena Otros juegos importantes
Midtown Madness 2
Delta Force Land Warriors
Unreal Tournamen t
Muy pronto escribiré mi libro “Las Aven turas de Arturi to el niño Genio” y tendrá más o menos los siguientes temas:
Capítulo I: Los viajes de Artu rito. La fiesta de cumpleaños de Arturito. El paseo campestre de Artu rito. Arturito en las playas de Hawai. Capítulo II: Los juguetes de Arturito. El auto de carreras de Artu rito. La supercomputadora de Artu rito. El yoyo de Arturito.
Profesor: Carlos Díaz Profesor de
Computación e Informática Física y Matemá ticas Análisis y Diseño de Sistemas Asesoría e Instalación de Software Asesoría y Ensamblaje de Computa doras Telefs: E-mail: Website:
Profesor Carlos Díaz
485-4698 ó 9726-6306 [email protected] www.lanzadera.com/elprofediaz
Tablas Las tablas son cuadrículas que uno crea por ejemplo para colocar un horario escolar o un modelo de factura o recibo. Las tablas se crean con la etiqueta
para indicar donde comienza y
para indicar donde termina. Las tablas se construyen especificando, fila a fila, el contenido de cada celda mediante las etiquetas
y
. Para cambiar de fila usamos la etiqueta
. Ante de en trar en más detalles, en el siguiente ejemplo crearemo s una tabla., verás que facilísimo es. Ejemplo 7: En este ejemplo crearemo s nuestro horario escolar de vacaciones útiles. Será una tabla de 5 filas por 4 columnas. E jemplo 7 Horario Escolar
Vemos que a nuestra tabla le falta algo de decoración. Los siguientes a tributo s pueden ayudarnos:
y
“Alineación” determina la alineación de la tabla (LEFT, CENTER o RIGHT). “Color de Fondo” determina el color del fondo de la tabla. “Borde” determina el ancho del borde exterior de la tabla. “Color de Borde” es el color de todas las líneas de la ta bla. “Margen interior” indica el margen entre el bo rde de la celda y el contenido de la celda. “Espacio Entre Celdas” indica la separación entre las celdas y WIDTH es el ancho de toda la ta bla en porcentaje, donde 100% es el ancho de to da la página. Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo an terior. E jemplo 8
Define las cabeceras de las columnas. “Alineación” es la alineación horizontal dentro de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL. “Color de Fondo” es el color de fondo dicha celda. “Combinar Columnas” indica cuantas celdas horizontales se van a unir. “Combinar Filas” indica cuantas celdas verticales se van a unir. ”Alineación Vertical” determina la orientación vertical dentro de la celda, puede ser BOTTOM, CENTER, TOP o BASELINE.
y
Define una celda de la tabla. La descripción de los atributo s son iguales a la etiqueta anterior. Ejemplo 9: Continuemos modificando nuestro horario. E jemplo 9 Horario Escolar
El Fondo de la Página y “Imagen de fondo” es el nombre del archivo que contiene la imagen, debe estar en la misma carpeta donde estas guardando todo. “Color de fondo” es el color escrito en inglés, en la página 5 te di una lista de colores. Los archivos de imagen que soporta el HTML son de formato JPG o GIF. JPG es de menor ta maño que un GIF. JPG suele utilizarse para fotografías e imágenes grandes y GIF para imágenes pequeñas. Como recomendamos al principio del curso es conveniente tener las imágenes en el mismo lugar donde estas guardando los documentos HTML, y así evitaras la molestia de colocar la ruta del archivo de imagen.
Inserción de Imágenes La inserción de una imagen dentro del documen to HTML se hace mediante la etiqueta: “Archivo” es el nombre del archivo de imagen, debe estar en la misma carpeta donde estas guardando to do. “Nombre alternativo” es un tex to que aparecerá debajo de la imagen cuando coloque el puntero sobre la imagen. “Alineación” permite alinear la imagen en la página puede ser LEFT o RIGHT o ta mbién para alinear el tex to que viene a continuación de la imagen donde puede ser TOP, MIDDLE o BOTTOM. “Borde” es un número que determina el ancho del borde alrededor de la imagen. “Altura” y “Ancho” son números que permi ten definir el tamaño de la imagen. Se recomienda usar siempre los atributos HEIGHT y WIDTH ya que esto permite que el navegador reserve un espacio para la imagen y continué cargando la página mientras va cargando la imagen. Si no usa estos a tribu tos el navegador esperará a terminar de cargar la imagen para luego continuar con la carga del resto de la página. Para centrar una imagen en la página use las etiquetas y alrededor de la imagen. También para alinear puede usar