LISTAS EN HTML

CÓMO SE ESCRIBEN LAS LISTAS EN HTML?

El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas: 
Las listas no ordenadas, las listas ordenadas y las listas de descripción.

Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada y <dl> para la lista de descripción.

Los elementos de las listas se definen de la siguiente forma:

• Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.

• Para la lista de descripción se emplean los elementos <dt> y <dd>.

Ul es el acrónimo de unordered list, lista no ordenada.

• En una lista no ordenada, el orden de aparición de los elementos no es importante.
• Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
• Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.
• El estilo de una lista se puede cambiar, para que en vez de un círculo relleno, un disco, sea el contorno del círculo o un rectángulo el elemento marcador.
• Antiguamente existía el atributo type en HTML que permitía cambiar el estilo de una lista no ordenada. Pero ese atributo ahora está obsoleto y no se debe de usar.
• En su lugar se debe emplear CSS.

Ol es el acrónimo de ordered list, lista ordenada.

• En una lista ordenada, el orden de aparición de los elementos es importante.
• Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
• Los elementos de la lista se indican con números o letras.
• Una lista ordenada puede hacer uso de los siguientes atributos que modifican su comportamiento.
• En HTML4 y HTML5 se puede emplear el atributo start que permite indicar el valor inicial en el que debe comenzar la lista. También está el atributo type que permite indicar el tipo de numeración que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I(números romanos en mayúsculas).
• En HTML5 se ha añadido el atributo booleano reversed, que permite indicar que la numeración debe ser descendente.

Dl es el acrónimo de description list, lista de descripción, que se compone de términos. 

• Cada término puede poseer cero o más descripciones.
• Cada término de la lista se define con <dt>.
• Cada descripción de un término se define con <dd>.
• los elementos no se indican con símbolos, números o letras, sino con un aumento del margen izquierdo, de la sangría izquierda.
• La lista de descripción se emplea normalmente para definir un glosario o un diccionario.

Por último, en HTML también se pueden crear listas anidadas.

• Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista.

PRACTICA 3

3a) Confeccionar una página HTML que muestre su nombre y apellido y en la siguiente línea los nombres de sus padres separados por un guión. 

clave: Salto de línea <br>

3b)Confeccione una página que muestre en un párrafo datos referentes a sus estudios y en otro párrafo su nombre y mail. 

Clave: Párrafo <p>

3c) Confeccionar el titular de un periódico con un título de nivel 1. Luego definir dos títulos de segundo nivel con los textos (Noticias políticas y Noticias deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un párrafo cada una. 

clave: Títulos <h1><h2><h3><h4><h5><h6>

TAREA MAQUETADO

Maquetar en digital el diseño de la pagina principal y sus anexos del sitio web a desarrollar en este semestre.

Enviar por mail fecha limite: 2 de febrero de 2020

Publisher

practica 2

Capitulo 3:- texto

La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.

El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicación de contenidos. De esta forma, HTML define etiquetas para estructurarel contenido en secciones y párrafos y define otras etiquetas para marcar elementos importantes dentro del texto.

La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus párrafos, titulares y títulos de sección, como se muestra en la siguiente imagen:

Figura 3.1 Resultado de estructurar un texto sencillo

El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada párrafo y títulos de sección para delimitar cada una de las secciones que forman el texto.

Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc.

Figura 3.2 Resultado de marcar un texto sencillo

El anterior ejemplo muestra la transformación de un párrafo con un texto simple en un párrafo cuyo texto contiene elementos marcados de forma especial. Así, algunas palabras del texto se muestran en negrita porque se consideran importantes; otras palabras aparecen en cursiva, ya que se han marcado como destacadas e incluso una frase aparece tabulada y entre comillas, indicando que es una cita textual de otro contenido.

En las secciones siguientes se muestran todas las etiquetas que define HTML para estructurar y marcar el texto. Además, se hace una mención especial al tratamiento que hace HTML de los espacios en blanco y las nuevas líneas.

PRACTICA #1

El primer documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Figura 2.2 Esquema de las partes que forman un documento HTML

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

A continuación se muestra el código HTML de una página web muy sencilla:

<html>
 
<head>
<title>El primer documento HTML</title>
</head>
 
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
 
</html>

Si quieres probar este primer ejemplo, debes hacer lo siguiente:

1. Abre un editor de archivos de texto y crea un archivo nuevo
2. Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado
3. Guarda el archivo con el nombre que quieras, pero con la extensión .html

Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi, pero no utilices KOffice ni Open Office.

Después de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:

Figura 2.3 Aspecto que muestra el primer documento HTML en cualquier navegador

Si ya estás viendo tu primera página HTML en el navegador, prueba a pulsar sobre el menú Ver > Código fuente y podrás ver el código HTML de la página que está cargada en el navegador. De hecho, puedes ver el código HTML de cualquier página de Internet mediante la opción Ver > Código fuente. Prueba a ver el código HTML de tu página preferida y verás cuantas etiquetas puede llegar a tener una página compleja.

Volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML (<html>, <head>, <body>):

• <html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.
• <head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
• <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.

Figura 2.4 Esquema de las etiquetas principales que contiene un documento HTML

Ejercicio 1

Determinar el código HTML correspondiente a la siguiente página:

Página HTML sencilla que resalta algunas partes del texto

Pistas: <em> y <del>

EJEMPLO PAGINA WEB

EJEMPLO PÁGINA HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>El título de la página</title>>
</head>
<body>
<h1><strong>HTML</strong></h1>

<p><strong>HTML</strong> son las siglas de <em>HyperText Markup Language</em>, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
</p>

<p>El lenguaje <strong>HTML</strong> se emplea para crear las páginas web. Es muy fácil ver el código <strong>HTML</strong> de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar.
</p>

<p><strong>HTML</strong> se compone de etiquetas que se escriben entre los símbolos menor que y mayor que.</p>
<h2>Historia de <strong>HTML</strong></h2>

<p>Los inicios del lenguaje <strong>HTML</strong> se remontan al año 1990, cuando <em>Tim Berners-Lee</em> creó la primera página web.</p>

<h2>Versiones de <strong>HTML</strong></h2>

<p><em>Tim Berners-Lee</em> definió la primera versión de <strong>HTML</strong> en el año 1991.</p>
<p>En la actualidad, la ultima versión de <strong>HTML</strong> es HTML5</p>

</body>
</html>


El resultado final se ve en la siguiente imagen sin importan en que navegador la abra, se uso el 

HTML Y SU HISTORIA

HTML

Lenguaje de marcado o etiquetado que se emplea para escribirlos documentos o paginas web.


El lenguaje empleado para crear las paginas web, inicialmente solo se se trataba de texto para leer, después agrego imágenes, audio, animaciones, formularios y con el paso del tiempo fue cambiando hasta la versión actual.


Todo ello ayudo a que las paginas web se transformaran en apps web.


Hoy podemos a través de una pagina web podemos jugar, enviar vídeos, editar vídeos etc.


Una de las ventajas de las aplicaciones web es que no debe ser actualizada por parte del usuario final. Ademas pueden ser usadas desde cualquier dispositivo.


Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:

Ver código fuente de la página en Google Chrome y Mozilla Firefox.

Ver código fuente en Internet Explorer y Opera.

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

html, head, meta, title, link, style, script, body, p, a, strong, em, img, form, input, select, textarea, table, tr, th, td,blockquote, hr, ul, ol, li, div, span.


HISTORIA DEL LENGUAJE HTML


El lenguaje HTML se desarrollo a partir de SGML, un estándar ISO del año 1986 empleado para la organización y etiquetado de textos, SGML es equivalente al actual XML.

HTML se parece a SGML, el uso de una pareja de etiquetas para marcar partes del texto en HTML esta tomado directamente de SGML, al igual que ciertas etiquetas p, h1, h2, la etiqueta propia de HTML es la etiqueta <a href=" "> para los enlaces o hipervinculos.


La primeras versiones de HTML (1990-1993) no fueron estandarizadas en parte porque su uso no estaba extendido y que no era necesaria una estandarización normal.

El primer intento de estandarización se realizo en 1993 escrito por Tim Berners-lee y Daniel Conolly, se considera la primera versión de HTML, la cual no disponía de algunos elementos importantes hoy en día en las paginas web, como las tablas y los formularios y por otro lado permitía crear documentos que hoy en día no son validos.


En noviembre de 1993 se dio lugar a la siguiente versión HTML+, la cual nunca llego a estandarizarse, esta estaba compuesto de encabezados, listas, figuras, tablas, formularios, texto pre-formateado y formulas matemáticas.

En noviembre de 1995 se publica HTML 2.0 la primera estándar.

En enero de 1997 se publico HTML 3.2 la primera versión estandarizada por la W3C.

En diciembre de 1999 se publico la ultima revisión HTML 4.01.


Despues de esto el W3C abandono el desarrollo de HTML y concentro todos los esfuerzos en el desarrollo de XML, un metalenguaje que define unas reglas para definir otros lenguajes.

El 28 de octubre de 2014 el W3C publicó HTML5, lo que supone que HTML5 ya tiene el rango de estándar.

Ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.


Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.


HTML se emplea únicamente para definir la estructura y el contenido o información de una pagina web, la presentación visual no se define con HTML.




ETIQUETAS


El lenguaje HTML esta formado por etiquetas, las cuales se escriben dentro de < (dentro que) y > (mayor que).


Un elemento se compone de una etiqueta inicial o de apertura, y una etiqueta final o de cierre. La etiqueta final se define con una barra inclinada y el nombre de la etiqueta inicial.


La etiqueta inicial puede llevar atributos, pero la final nunca lleva. En HTML, los atributos pueden llevar un valor. Por último, las etiquetas pueden tener contenido, que es todo lo que se escriba entre la etiqueta inicial y final: el contenido puede estar formado por otras etiquetas de HTML o puede ser simplemente texto.

Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros, pero respetando algunas reglas.

En cualquier momento, puedes ver el código HTML de una página web cualquiera con la opción “Ver código fuente” que puedes encontrar en la mayoría de los navegadores.

Al ver el código fuente de cualquier página lo normal es que al principio no entiendas nada y te parezca chino. No te preocupes, a todos nos ha pasado eso al principio.


El lenguaje HTML es un lenguaje, y como tal, tiene su vocabulario, sus palabras con sus significados, y su gramática, sus reglas que nos indican cómo podemos combinar sus palabras para formar textos complejos.


Las etiquetas esenciales para crear una página web:


La etiqueta <html> es la etiqueta principal, sólo puede existir una y toda la página web debe escribirse entre la etiqueta inicial y final de html.


La etiqueta <head> define la primera parte de una página web, la cabecera. Normalmente lo que se escribe en la cabecera no aparece representado en la página web cuando se visualiza en un navegador web, sino que se emplea para definir los metadatos, información sobre la página o instrucciones sobre cómo procesar la página web. Dentro de la cabecera se puede escribir la etiqueta <title> que es obligatoria, sólo puede haber una, y se emplea para definir el título de la página.


Por último, la etiqueta <body> define la segunda parte de una página web, el cuerpo. Lo que se escribe en el cuerpo sí que aparece representado en la página web cuando se visualiza en un navegador web.


Las etiquetas <h1>, <h2>, y así hasta <h6>, se emplean para definir los encabezados o títulos en la página. Existen seis niveles de importancia, siendo <h1> el más importante, y <h6> el nivel menos importante. Normalmente, usarás los niveles <h1>, <h2> y <h3>, y es muy raro que tengas que usar los niveles <h4>, <h5> y <h6>.


La etiqueta <p> se emplea para definir un párrafo de texto.


Y la etiqueta <strong>, se emplea para destacar un fragmento de texto importante mientras que la etiqueta <em> se emplea para definir un texto enfatizado. Aunque en el estándar de HTML se aconsejan algunos usos de las etiquetas <strong> y <em>, al final cada autor desarrolla su propio estilo y decide cuándo utilizar una u otra.



Con todas estas etiquetas ya podemos hacer páginas web sencillas.

Diseño/Maquetado

Entrega: Lunes 25 de Enero

Los equipos presentaran en papel el maquetado de la opcion  de diseño web que tienen pensado, solo la pagina principal, con la finalidad de junto al profesor escoger y ver la opción mas adecuada para poder desarrollar el sitio a través de todo el semestre.

ACTIVIDAD 16 DE ENERO 2020

Realizar el resumen /apunte en el cuaderno del tema explicado en clase el dia martes 14, si esta el prefecto o la maestra Alicia, que por favor se los firmen.

debe estar el apunte, NO  imprimir y pegar.

Para ampliar la imagen dar un click en ella.

Proyecto

Los equipos presentaran en papel el  3 opciones de diseño web que tienen pensado, solo la pagina principal, con la finalidad de junto al profesor escoger y ver la opción mas adecuada para poder desarrollar el sitio a través de todo el semestre.

ANTOLOGIA

Anexo la antología del curso, imprimir y se revisa lunes 13 de enero.

Antología Paginas Web