agosto 11, 2015
LENGUAJE
HTML Diseño de páginas Web PROF. HÉCTOR C. ROSAS
Lenguaje HTML
agosto 11, 2015
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
Lenguaje HTML
agosto 11, 2015
¿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.
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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 “>”. Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
Primer regla: ! La
primera regla de HTML es muy simple: Los tags siempre van en parejas.
! Por
ejemplo 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).
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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.
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
Estructura Básica de una página: Todas las páginas deben contener al menos estas etiquetas:
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
Elementos de texto
Multimedia para internet / Profr. HĂŠctor C. Rosas CĂĄrdenas
Lenguaje HTML
agosto 11, 2015
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.
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
<html> <head> </head> <body> Lunes<br> Martes<br> Miercoles<br> Jueves<br> Viernes </body> </html>
agosto 11, 2015
Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar una línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o en la siguiente. Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa de la misma: <br> viene de la palabra: “break”
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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.
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
! 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> Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
! 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 Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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. Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
! 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. Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
Práctica 3: ! Establece
las jerarquías de titulos para el temario de la materia previamente elaborado. Titulos de la materia – h1 Subtemas (Objetivo, Temario) – h2 Capítulos – h3
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
Lenguaje HTML
agosto 11, 2015
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).
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas