HTML

(HYPER TEXT MARKUP LANGUAGE)
Adriana Gabarrón Ordorica

Nuevas Tecnologías de Aprendizaje

Fundamentos de HTML
Estructura básica de páginas Etiquetas básicas Manejo de textos y párrafos Listas Encabezados Gráficos Ligas Tablas

Estructura básica de una página web
El archivo index.html es el principal en un dominio al cual queremos accesar.

Index.html

Nombre.html

Nombre2.html

Lenguaje de etiquetas
HTML es un lenguaje basado en etiquetas Todas las etiquetas siguen la siguiente estructura: <código> Algunas tienen código de inicio y código de final que solo varia por el carácter / <código> «.. </código>

Etiquetas básicas
<html> <head> <title> Mi primer página web</title> </head> <body> Aquí va el cuerpo de mi página</body> </html>

<html>
Esta etiqueta tiene la propiedad de marcar el inicio y el fin del código de nuestra página web
<html> «.. «.. (código de la página) «.. </html>

<head>
Esta etiqueta enmarca el encabezado de mi página Siempre se encuentra después de la etiqueta <html> En esta etiqueta se definen parámetros importantes que utilizan los buscadores Aquí se define también el título de mi página dentro de la etiqueta <title> Título </title>
(este título aparecerá en la pestaña superior de la venta a del navegador)

Atributos en HTML
En HTML existen para cada etiqueta atributos que nos dan mas información sobre el elemento. Los atributos se definen siempre en la etiqueta de inicio. Los atributos tienen la siguiente sintaxis
† Nombre=´valorµ

<body>
Dentro de esta etiqueta se encuentra todo el código de mi página, puede incluir textos, imágenes, ligas, videos, etc« Sus principales atributos son:
Bgcolor ² color del documento  Text ² color del texto  Link ² color de las ligas no visitadas  Alink ² color de las ligas activas  Vlink ² color de las ligas visitadas  Background ² imagen de fondo 

<body>
<body bgcolor="#FFFFFF">
El código RGB en hexadecimal se forma :
Ejemplos 
 

RRGGBB

2 números para el rojo, 2 números para el verde, 2 números para el azul #000000 negro #FFFFFF blanco #00FFFF aqua

†

body reconoce actualmente textos con el nombre del color en: inglés red, blue, black, white«. http://www.w3schools.com/tags/ref_colornames.asp

<body>
<body background ="archivo.jpg"> Esta instrucción indica poner como fondo de la página la imagen el archivo.jpg http://www.grsites.com/textures/ Es posible poner un URL apuntando a una página en la web

<body>
<body text ="#FFFFFF"> Con esta instrucción le indicamos de que color queremos el texto de la página Aplica el mismo esquema de números en hexadecimal para el numero del color o directamente el nombre del color en inglés

<body>
Algunos atributos pueden combinarse en la misma instrucción, por ejemplo:

<body bgcolor ="red" text="black">

<p>, <br>
<p> «. </p> nos permite hacer la identificación de párrafos 

Su atributo align nos permite modificar la alineación del texto, left (izquierda), right (derecha), center (centrado), justify (ambos lados)

<br> nos permite dar un salto de línea sin empezar un nuevo párrafo
<p align=´centerµ> El agua es el recurso que quizá pasa más desapercibido para cada uno de nosotros. <br> Es probable que nunca nos hayamos puesto a pensar en sus poderes terapéuticos</p>

<p>, <br>
La instrucción: <p>Este es un<br>ejemplo de como<br>se usan los saltos de linea</p> Se vería: Este es un ejemplo de como se usan los saltos de linea

<pre>
Esta etiqueta nos permite editar textos con formato (usualmente con font Courier) Lo que escribamos dentro de esta etiqueta se respetará tal cual
<pre> Esto es un Texto con formato. </pre>

Estilos
Permiten aplicar estilos al texto de nuestra página
† <b>

bold</b> † <i>itálica</i> † <u>subrayado</u> † <s>tachado</s> † <center>«..</center> † <sub> subscript</sub> † <sup>superscript</sup>

Acentos y caracteres especiales
á Á é É í Í ó Ó ú Ú ñ Ñ &aacute; &Aacute; &eacute; &Eacute; &iacute; &Iacute; &oacute; &Oacute; &uacute; &Uacute; &ntilde; &Ntilde;
http://www.w3schools.com/tags/ref_entities.asp Esto es solo por historia ahora los navegadores reconocen los acentos <p align="center"> A los doce años su tío Joaqu&iacute;n gran aficionado taurino lo env&iacute;a a una escuela de "matadores" que funcionaba en la plaza de Medell&iacute;n. Lleva sus primeros dibujos al almac&eacute;n de Don Rafael P&eacute;rez. Su primera obra es vendida en 2 pesos. </p>

Acentos y caracteres especiales
&nbsp; < &lt; > &gt; &amp; " &quot; &ordm; &ordf; un espacio en blanco símbolo < símbolo > símbolo & comillas ° ª

listas
No ordenadas
<ul> <li>¿Qui&eacute;nes somos? <li>Nuestros servicios <li>Promociones </ul>

En la página se vería así:
‡ ‡ ‡

¿Quiénes somos? Nuestros servicios Promociones

listas
Ordenadas
<ol> <li>¿Qui&eacute;nes somos? <li>Nuestros servicios <li>Promociones </ol>
Existe además el atributo type que en las listas ordenadas nos permite cambiar el tipo de numeración: 1 (números), a (letras minúsculas), A (letras mayúsculas), i (números romanos en minúsculas) I (números romanos en mayúsculas) Square (cadrito) circle (círculo)

En la página se vería así:
1. 2. 3.

¿Quiénes somos? Nuestros servicios Promociones

Listas anidadas
<ul> <li>Animales <ul> <li>Perros <li>Vacas <li>Gatos </ul> <li>Flores <ul> <li>Margaritas <li>Rosas <li>Lilis </ul> <ul> Las listas pueden anidarse para tener el siguiente efecto en pantalla: ‡Animales oPerros oVacas oGatos ‡Flores oMargaritas oRosas oLilis

Encabezados predefinidos
HTML maneja etiquetas para encabezados predefinidos, su unico atributo align
<h1>Encabezado H1</h1> <h2>Encabezado H2</h2> <h3>Encabezado H3</h3> <h4>Encabezado H4</h4> <h5>Encabezado H5</h5> <h6>Encabezado H6</h6>

Encabezado H1
Encabezado H2
Encabezado H3
Encabezado H4
Encabezado H5
Encabezado H6

<hr>
Esta etiqueta inserta una línea horizontal en la página. Atributos básicos:
† † † †

align: left, center, rigth width: ancho en pixels o en porcentaje del ancho de la página size: define la altura de la línea en pixels, acepta también porcentaje Color: color de la línea

<hr align="left" noshade size=5 width=50% color=´#CCDDFFµ>

<font>
Define el tipo de font (tipografía) en nuestro texto Atributos:
face: fuente (Times New Roman, Arial, Verdana, Tahoma) † size: tamaño de la fuente, se define con valores entre el 1 y el 7 † color: número hexadecimal que define el color
†

<font size="7" face="Tahoma, Arial,Verdana" color=´#FFFFFF">Mi texto</font>
Nota: Esta etiqueta puede variar el font de textos específicos y ser diferente al font del documento general

Tarea 2 - HTML
Elabora una página en la que expongas el temario de un curso, debes de utilizar todas las etiquetas que vimos en clase con al menos 1 atributo

Imágenes
La etiqueta <img> nos permite insertar gráficos en nuestra página <img src="ardilla.jpg" alt="ardilla"> Atributos:
src, nos indica en donde se encuentra la imagen alt, muestra un texto alterno en caso de no desplegar bien y además pone el texto si colocamos el mouse sobre la imagen

Imágenes
Más Atributos:
border, pone un borde a la foto de diferentes grosores (0 indica que no hay borde) width, height indican el tamaño de la imagen a desplegar (en pixeles) <img src="imagenes/ardillagif" width=´200" height=´200´ alt=´ardillaµ>

Imágenes
Más atributos:
Align, especifica la manera en que la imagen será alineada en el espacio Valores posibles:,bottom, center, middle, left, rigth, top <img src="ardilla.jpg" alt="ardilla" align="center">

Enlaces o ligas <a> «. </a>
<a> «. </a> Ya sea un texto, imagen o su combinación deberán estar escritos dentro de las etiquetas <a> « </a> para convertirse en una liga Atributos de la etiqueta <a>:
† href,

marca el URL del sitio que queremos marcar como

liga
<a href="http://www.iberopuebla.edu.mx">Iberopuebla</a>

Enlaces o links
Volver liga una Imagen
<A href="http://www.iberopuebla.edu.mx"><IMG src=´logo.jpg"></A>

Direccionar a una cuenta de correo
<A href="mailto:ventas@sitio.com">Contacto:</A>

Tablas
El uso de tablas nos permite dar formato nuestra página 3 etiquetas: <table>«</table>, delimita la tabla <td> « </td>, indica cada celda de la tabla <tr> « </tr>, indica las filas de la tabla

Tablas
<table border="1"> <tr> <td>Hora</td> <td>Materia</td> <td>Salón</td> </tr> <tr> <td>8-9</td> <td>Español</td> <td>12101</td> </tr> <tr> <td>9-10</td> <td>Matemáticas</td> <td>12103</td> </tr> </table>

Hora 8-9 9-10

Materia Español Matemáticas

Salón 12101 12103

Sign up to vote on this title
UsefulNot useful