HTML

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
Nombre2.htm
Nombre.html
l
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 : RRGGBB

2 números para el rojo, 2 números para el verde, 2 números para el azul
Ejemplos
 #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
;
<p align="center"> A los doce años su tío
Á &Aacute Joaquín gran aficionado taurino lo
; envía a una escuela de "matadores" que
é é funcionaba en la plaza de Medellín.
É &Eacute Lleva sus primeros dibujos al
; almacén de Don Rafael Pérez.
Su primera obra es vendida en 2 pesos.
í í </p>
Í Í
ó &oacute
; Esto es solo por historia  ahora los
Ó &Oacute navegadores reconocen los acentos
;
ú &uacute http://www.w3schools.com/tags/ref_entities.asp
;
Acentos y caracteres especiales
 un espacio en blanco

 < < símbolo <
 > > símbolo >
 & símbolo &
 " " comillas
 º °
 ª ª
listas
 No ordenadas
<ul>
<li>¿Quiénes somos?
<li>Nuestros servicios
<li>Promociones
</ul>
 En la página se vería así:

• ¿Quiénes somos?
• Nuestros servicios
• Promociones
listas
 Ordenadas Existe además el atributo
<ol> type que en las listas
<li>¿Quiénes somos? ordenadas nos permite
<li>Nuestros servicios cambiar el tipo de
<li>Promociones numeración:
</ol>
1 (números),
a (letras minúsculas),
A (letras mayúsculas),
 En la página se vería así: i (números romanos en
1. ¿Quiénes somos? minúsculas)
2. Nuestros servicios I (números romanos en
mayúsculas)
3. Promociones
Square (cadrito)
circle (círculo)
Listas anidadas
<ul>
<li>Animales
Las listas pueden anidarse para tener
<ul>
el siguiente efecto en pantalla:
<li>Perros
<li>Vacas • Animales
<li>Gatos o Perros
o Vacas
</ul> o Gatos
<li>Flores • Flores
<ul> o Margaritas
<li>Margaritas o Rosas
o Lilis
<li>Rosas
<li>Lilis
</ul>
<ul>
Encabezados predefinidos
 HTML maneja etiquetas

para encabezados Encabezado H1
predefinidos, su unico
atributo align
Encabezado H2
<h1>Encabezado H1</h1>
Encabezado H3
<h3>Encabezado H3</h3> Encabezado H4
<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
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> Hora Materia Salón
<tr>
<td>8-9</td> 8-9 Español 12101
<td>Español</td> 9-10 Matemáticas 12103
<td>12101</td>
</tr>
<tr>
<td>9-10</td>
<td>Matemáticas</td>
<td>12103</td>
</tr>
</table>

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

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

(HYPER TEXT MARKUP LANGUAGE)

 Estructura básica de páginas

 El archivo index.html es el principal en un

 Todas las etiquetas siguen la siguiente estructura:

 Algunas tienen código de inicio y código de final

 Siempre se encuentra después de la etiqueta <html>

 En esta etiqueta se definen parámetros importantes

 Aquí se define también el título de mi página dentro

 Los atributos se definen siempre en la etiqueta de

 Los atributos tienen la siguiente sintaxis

 El código RGB en hexadecimal se forma : RRGGBB

 body reconoce actualmente textos con el nombre del

 Esta instrucción indica poner como fondo de la

 Es posible poner un URL apuntando a una página

 Con esta instrucción le indicamos de que color

 Aplica el mismo esquema de números en

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

 <br> nos permite dar un salto de línea sin empezar

 &nbsp; un espacio en blanco

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

 HTML maneja etiquetas

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

<font size="7" face="Tahoma, Arial,Verdana" color=“#FFFFFF">Mi texto</font>

<img src="ardilla.jpg" alt="ardilla">

<img src="imagenes/ardillagif" width=“200" height=“200“

<img src="ardilla.jpg" alt="ardilla" align="center">

estar escritos dentro de las etiquetas <a> … </a>

 Atributos de la etiqueta <a>:

 Volver liga una Imagen

<A href="http://www.iberopuebla.edu.mx"><IMG src=“logo.jpg"></A>

 Direccionar a una cuenta de correo

También podría gustarte

 un espacio en blanco