introducción al lenguaje html
DESCRIPTION
Presentación que explica los conceptos básicos del lenguaje HTMLTRANSCRIPT
13 de abril de 2023
LENGUAJE HTML
Diseño de páginas Web PROF. HÉCTOR C.
ROSAS
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
¿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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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 “>”.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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).
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
Estructura Básica de una página:
Todas las páginas deben contener al menos estas etiquetas:
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
Elementos de texto
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Sálto de Línea <br>
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
<html><head></head><body>Lunes<br>Martes<br>Miercoles<br>Jueves<br>Viernes</body></html>
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”
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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>
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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.
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
Práctica 3: Establece las jerarquías de titulos para
el temario de la materia previamente elaborado.
Titulos de la materia – h1Subtemas (Objetivo, Temario) – h2Capítulos – h3
Lenguaje HTML
Multimedia para internet / Profr. Héctor C. Rosas Cárdenas
13 de abril de 2023
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).