Introducción al lenguaje HTML

20 de
Febrero de
2013

LENGUAJE
HTML
Diseño de páginas Web
PROF. HÉCTOR C. ROSAS

Lenguaje HTML 20 de Febrero de 2013

Introducción
 ¿Cuántas páginas Web has visto? Muchas están llenas
de colores, imágenes y contenido vistoso. Otras son
simples documentos con textos y algunos links.
Actualmente existen decenas de programas para crear
sitios Web y muchas tecnologías en las que las páginas
son diseñadas y programadas.

 Los navegadores ó browsers Web, como el Internet
Explorer, Mozilla Firefox, Netscape Navigator ó Safari,
interpretan el código en que están programadas las
páginas web. El código tiene indicaciones que le dicen
al navegador dónde están las páginas y cómo deben
aparecer, qué colores deben mostrarse, cómo se
presentan los textos y demás contenidos y qué
funcionalidad tendrán los distintos elementos.

Multimedia para internet / Profr. Héctor C. Rosas Cárdenas


¿Qué ES HTML?
HTML quiere decir
Hyper Text Markup
Language y es el
código estándar básico
para la programación o
creación de páginas
Web.
Su estudio te servirá de
base para la
comprensión y el
aprendizaje posterior de
herramientas de diseño
Web más avanzadas.



HTML y Tags
 El HTML es un lenguaje de “marcadores” o
“tags”, que se insertan en un documento de
texto. Los tags son indicadores que
silenciosamente le dicen al navegador qué
hacer. El navegador lee las instrucciones y
despliega o ejecuta lo que se le indica. Al
conjunto de instrucciones que definen una
página Web se le llama código fuente.

 Los tags son por lo general palabras en inglés
(por ejemplo body), o abreviaturas (por ejemplo
p que significa párrafo). Se distinguen del resto
del texto por que están encerrados entre los
símbolos “<“ y “>”.



Primer regla:
 Laprimera regla de HTML es muy simple:
Los tags siempre van en parejas.

 Porejemplo si utilizo el tag <h1> para
comenzar, debo utilizar el tag </h1> para
terminarlo. Habrás notado que se utiliza
una diagonal/ en el segundo tag. La
diagonal distingue al tag que cierra (con
diagonal), del tag que abre (si diagonal).



EJEMPLO:

<B> Este texto se mostrará en negrita </b>

 El tag inicial <b> activa la orden de colocar
el texto en negritas y el tag final </b> la
desactiva.

 Como toda regla, hay algunas excepciones:
no todas las tags requieren la marca de
cierre y se denominan marcas abiertas.



Estructura Básica de una página:

Todas las páginas
deben contener
al menos estas
etiquetas:



Elementos de texto



Sálto de Línea <br>
 Todo el texto que disponemos en el cuerpo de la
página aparece en la misma línea, no importa si
cuando tipeamos la página disponemos cada
palabra en una línea distinta (es decir un
navegador no tiene en cuenta la tecla ENTER).

 Para indicarle al navegador que queremos que
continúe en la próxima línea debemos hacerlo
con el elemento HTML <br>.

 Cuando aparece la marca <br> el navegador
continua con el texto en la línea siguiente. Es uno
de los pocos elementos HTML que no tiene
marca de cerrado como habíamos visto hasta
ahora.



<html> Como vemos sólo hemos
agregado la marca <br> cada
<head> vez que queremos comenzar
una línea.
</head>
<body> Tengamos en cuenta que es
indistinto si disponemos la
Lunes<br> marca en la misma línea o en la
siguiente.
Martes<br>
Miercoles<br> Para recordar los nombres de
los elementos HTML es bueno
Jueves<br> ver cual es la palabra completa
de la misma:
Viernes
</body> <br> viene de la palabra:
“break”
</html>



Práctica 1:
 Elabora
un documento html en el que se
muestre la siguiente información
separada por saltos de línea:

Datos del Alumno:
- Nombre Completo
- Matrícula
- Carrera
- Correo



Párrafo <p>
 Un párrafo es una oración o conjunto de
oraciones referentes a un mismo tema. Todo
lo que encerremos entre las marcas <p> y
</p> aparecerá separado por un espacio
con respecto al próximo párrafo.



 Dentro de un párrafo puede haber saltos de
línea <br>.

<body>

<p>Multimedia para internet
<br>Profr. Héctor C. Rosas Cárdenas</p>

<p>Objetivo:<br>
Evaluar las herramientas y técnicas de diseño
de espacios en internet, así como su
aplicación óptima en la comunicación
global. </p>

</body>



 Tenemos en esta página HTML dos párrafos,
cuando el navegador interpreta esta
página, separa los contenidos de los dos
párrafos con un espacio horizontal. Además
contienen un saltos de línea. Normalmente
uno agrupa en párrafos para dar más
sentido a nuestro escrito.

 Cuando modificamos la ventana del
navegador los párrafos se acomodan
automáticamente de acuerdo al ancho de
la ventana.

 <p> viene de paragraph



Práctica 2:
 Elabora un documento html en el que des
formato a el temario de la materia
separando los capítulos con un salto de
párrafo y los subtemas con saltos de línea



Títulos: <h1><h2><h3>…<h6>
 Otros elementos HTML muy utilizados son para
indicar los títulos, para esto contamos con los
elementos:
 <h1><h2><h3><h4><h5><h6>

 El título de mayor nivel es <h1>, es decir el que
tienen una fuente mayor (veremos que es el
navegador el responsable de definir el tamaño
de la fuente, más adelante podrá ver que uno
puede modificar la fuente, tamaño, color etc.)

 Según la importancia del título utilizaremos
alguno de estos elementos HTML. Requiere la
marca de cerrado del título con la barra
invertida como hemos visto.



 Cada título aparece siempre en una línea
distinta, no importa si lo tipeamos seguido en el
archivo, es decir el resultado será igual si
hacemos. El navegador dispone cada título en
una línea nueva.

 Recordemos que el HTML no tiene la
responsabilidad de indicar el tamaño de las
fuentes. El navegador definirá el tamaño de
fuente según el nivel de título que indiquemos. La
de tamaño más grande es la de nivel 1 <h1>.

 <h1> viene de heading
 heading significa título.



Práctica 3:
 Establecelas jerarquías de titulos para el
temario de la materia previamente
elaborado.

Titulos de la materia – h1
Subtemas (Objetivo, Temario) – h2
Capítulos – h3



Vínculos <a>
 El elemento más importante que tiene una página de internet
es el hipervínculo, estos nos permiten cargar otra página en el
navegador. Esto es lo que hace diferente la página de un libro
con la página de un sitio en internet. Normalmente un libro lo
recorremos en forma secuencial, pero un sitio de internet
podemos disponer estos enlaces entre un conjunto de páginas
y luego tener distintas alternativas de recorrido.

 Normalmente un navegador al encontrar esta marca muestra
un texto subrayado, y al hacer clic con el mouse sobre éste el
navegador carga la página indicada por dicho hipervínculo.

 Primero veremos cual es la sintaxis para disponer un hipervínculo
a una página que se encuentra en el mismo sitio (es decir otra
página que hemos desarrollado nosotros).


Introducción al lenguaje HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introducción al lenguaje HTML

Similar to Introducción al lenguaje HTML (20)

Recently uploaded

Recently uploaded (20)

Introducción al lenguaje HTML