1. JUAN PABLO HERNANDEZ D. Y SEBASTIANRAMOS MAÑUNGA
1. Que son códigos HTML.
2. Define las siglas HTML.
3. Porque el lenguaje HTML necesita un editor de texto.
4. Que es un editor de texto.
5. En donde se utilizan.
6. Como se insertan los códigos en WIX o en JIMDO de
acuerdo a la página web que estén utilizando.
7. Cuál es la diferencia entre código HTML y un enlace
normal.
8. Cuáles son los códigos HTML básicos para las páginas
web.
DESARROLLO
1. El Lenguaje de Marcado de Hipertexto (HTML) es el código que
se utiliza para estructurar y desplegaruna página web y sus
contenidos.Por ejemplo,sus contenidos podríanser párrafos,
una lista con viñetas, o imágenes y tablas de datos. Como lo
sugiere el título, este artículo te dará una comprensiónbásica de
HTML y cuál es su función.
HTML no es un lenguaje de programación;es un lenguaje de
marcado que define la estructura de tu contenido.HTML consiste
en una serie de elementos que usarás para encerrar diferentes
partes del contenido para que se vean o comportende una
determinada manera. Las etiquetas de encierre puedenhacer de
una palabra o una imagen un hipervínculo a otro sitio, se pueden
cambiar palabras a cursiva, agrandar o achicar la letra, etc.
2. (HTML) es la abreviación de Lenguaje de Marcado de Hipertexto
o en inglés HyperText Markup Languaje.
2. 3. El lenguaje HTML necesitade un editor de texto ya que por
medio de este es que el usuario introduce los códigos conla
información que requiere introducir a su página web, estos
editores de texto se han convertido en el aliado número uno de
los usuarios del lenguaje HTML debido a la facilidad de uso y
acceso que ofrece.
4. Un editor de texto es un programa, que permite crear o modificar
archivos de texto sin un formato establecido,estos ya vienen
incluidos en el sistema operativo de los computadores yse
diferencian de los procesadores de texto que los archivos no
tienen formato y son solo texto es decir no incluye animaciones.
5. Los editores de texto están orientados a manipular y crear
archivos de texto plano, los cuales tienen una enorme utilidad
dentro de la Informática, sobre todo en el área de la
programación, ya que el código fuente de los programas está
hecho en texto plano, así como también los script interpretados
de algunos lenguajes, como JavaScript, Perl, Python, Shell, etc.
6. Para WIX:dirígete a Opciones en el Panel de control de tu sitio.
Haz clic en la pestaña Código personalizado en la sección
Avanzado. Haz clic en + Agregar código personalizado en la
parte superiorderecha.
Para JIMDO:editar Head: introduce códigos externos en la
cabecerade tu página Jimdo.Para ello, accede a Menú >
Ajustes > Editar Head. Plantilla propia: personaliza la plantilla de
tu página web, introduciendo códigos HTML y CSS en Menú >
Diseño > Plantilla propia.
7. Las etiquetas HTML se utilizan para ayudar a representar
páginas web también en el navegador. Por el contrario, HTTP
(HyperText TransferProtocol)es un protocolo para transferir las
páginas de hipertexto desde el servidorweb al navegador web.
3. 8.
1. <HTML> – El elemento raíz.
Todos los sitios web comienzan con el elemento HTML.Tambiénse
llama elemento raíz porque está en la raíz del árbol de elementos que
conformanuna página web.
Para crear el elemento HTML,debes escribiruna etiqueta de
apertura <HTML> seguidade una etiqueta de cierre </HTML>. Todo lo
demás en tu página web va entre estas 2 etiquetas.
Ejemplo:
<HTML>
Todos los demás elementosdel sitio van aquí.
</HTML>
2. <head> – El encabezado del documento
El elemento head contiene información sobre la página web, a
diferenciadel contenido de la web en sí.Hay muchos elementos que
puedes ponerdentro del elemento del encabezado,como:
Título.
Enlace,que puedes usar para agregar hojas de estilo y faviconos a tu
página.
Meta,para especificarcosas como conjuntos de caracteres,
descripcionesde página y palabras clave para motores de búsqueda.
Script,para agregar código JavaScript a la página.
Aquí hay un ejemplo de elemento head típico:
<Head>
<Title> Las aventuras de mi gato Lucky</title>
4. <meta http-equiv = «Content-Type» content = «text / HTML; charset =
utf-8»>
<meta name = «description» content = «Las aventuras de mi gato
favorito Lucky, con historias, fotos y películas»>
<meta name = «keywords» content = «gato, Lucky, mascota,
animal»>
<link rel = «stylesheet» type = «text / css» href = «/ style.css»>
<link rel = «icono de acceso directo» href = «/ favicon.ico»>
</Head>
3. <title> – El título de la página
Esta etiqueta contiene el título de la página.El título se muestra en la
barra de título del navegador (en la parte superiorde la ventana del
navegador), así como en marcadores,resultados en las tendencias de
búsquedade Google y muchos otros lugares.
El título debe describirel contenido de la página de manera precisa.
Intenta dar a cada página de tu sitio su propio título único.
Aquí hay un ejemplo:
<Title> Las aventuras de mi gato Lucky </title>
4. <body> – El contenido de la página
La etiqueta body o contenido aparece después delelemento principal
en la página. Debe contener toda la información de tu sitio web: texto,
imágenes,etc. Todas las páginas web tienen un elemento de cuerpo
único, con la excepciónde las páginas de conjunto de marcos.
Aquí hay un ejemplo el formato general del elemento body:
<body>
(Todo el contenido de la página va aquí)
5. </body>
5. <h1> – Encabezado de sección
Los encabezados te permitendividir el contenido de tu página en
fragmentos legibles.Funcionan de manera muy similar a los títulos y
subtítulos en un libro o un informe.
HTML admite 6 elementosde encabezado:h1, h2, h3, h4, h5 y h6.
De estos,h1 es para los encabezados más importantes, h2 es para
subtítulos menos importantes, y así sucesivamente.Por lo general, no
necesitarás usar más de h1, h2 y h3, a menos que tu página sea muy
larga y compleja.
Este es un ejemplo de un elemento de encabezado h1:
<h1> Las aventuras de mi gato Lucky </h1>
6. <p> – Un párrafo
El elemento p te permite crear párrafos de texto. La mayoría de los
navegadores muestran párrafos con un espacio vertical entre cada
uno de ellos, separando muy bien el texto.
Si bien puedes crear «párrafos»de texto simplemente usando
etiquetas <br> para insertar líneas en blanco entre fragmentos de
texto, es mejor usar elementos p en la mayoría de los casos. No solo
es más ordenado, sino que brinda a los navegadores y motores de
búsquedauna mejoridea de cómo está estructurada tu página.
Aquí hay un ejemplo de un párrafo:
<p> Mi gato Lucky tiene muchas aventuras. ¡Ayer atrapó un ratón, y
esta mañana atrapó dos! </p>
Una buena regla general al escribirtexto para la web es asegurarse de
que cada párrafo contenga un solo punto, tema o pensamiento. Si
quieres hablar sobre 2 cosas diferentes,usa 2 párrafos.
6. 7. <a> – Un enlace
Uno de los elementos más importantes de una página web, es el
elemento a porque te permite crear enlaces a otro contenido.El
contenido puede estar en tu propio sitio o en cualquier otro.
Para crear un enlace, usa las etiquetas <a> y </a> alrededordel
contenido que deseas colocaren el enlace e indica la URL para
vincular en el atributo href de la etiqueta <a>.
A continuación, te mostramos cómo crear un texto que se vincule a
www.ejemplo.com:
<a href=»http://www.ejemplo.com/»> ¡Visita este excelente sitio web!
</a>
8. <img> – Una imagen
El elemento img te permite insertar imágenesen una página web.
Para insertar una imagen, primero carga la imagen en tu servidor,
luego usa una etiqueta <img> para hacer referenciaal nombre de
archivo de la imagen cargada.
Aquí hay un ejemplo:
<img src = «mifoto.jpg»alt = «Mi foto»>
El atributo alt es obligatorio para todas las etiquetas img. Lo utilizan
los navegadores que no muestran imágenes para ofrecertexto
alternativo al visitante.
9. <div> – Un contenedora nivel de bloque para contenido
El elemento div es un contenedorgenérico que puedes usar para
agregar más estructura al contenido de tu página. Por ejemplo, puedes
agrupar varios párrafos o encabezados que tengan un propósito
similar en un elemento div. Por lo general, los elementos div se usan
para:
• Encabezados y pies de página
7. • Columnas de contenido y barras laterales.
• Cuadros resaltados dentro del flujo de texto
• Áreas de la página con un propósito específico,como anuncios
publicitarios.
• Galerías de imágenes.
Al agregar atributos de clase y/o id a tus elementos div, puedes usar
CSS para diseñar y posicionarlos divs.Esta es la base para crear
diseños de página basados en CSS.
Aquí hay un ejemplo que usa un div para mostrar el contenido de una
barra lateral en la página:
<div id = «barra lateral»>
<h1> Encabezado de la barra lateral </h1>
<p> Texto de la barra lateral </p>
<p> Más texto de la barra lateral </p>
</div>
10. <span> – Un elemento en línea para contenido
El elemento span es similar a div en que se usa para agregar
estructura a tu contenido.La diferenciaes que div es un elemento de
nivel de bloque,mientras que span es un elemento en línea:
• Los elementos de nivel de bloque,como div, h1 y p, están diseñados
para contenerbloques de contenidos relativamente grandes o
independientes,como párrafos de texto. Un elemento de nivel de
bloque siempre comienza en una nueva línea.
• Los elementos en línea, como span, a e img, están diseñados para
contener piezas de contenido más pequeñas,como algunas palabras
o una oración, dentro de un bloque de contenido más grande. Agregar
un elemento en línea no hace que se cree una nueva línea y, además,
los elementos a nivel de bloque puedencontener elementos en línea;
8. sin embargo,los elementos en línea no pueden contener elementos a
nivel de bloque.
Al igual que con un div, a menudo agrega un atributo de clase y/o id a
un intervalo para que puedas diseñarlo usando CSS.
El siguiente ejemplo utiliza elementos span paraindicar nombres de
productos dentro de un párrafo. Estos nombres de productos podrían
resaltarse con CSS. Un motor de búsquedapersonalizado también
podríautilizar la información provista por los elementos span para
identificar los productos dentro de la página.
<p> Algunos de nuestros productos incluyen <span class = «product»>
SuperWidgets</span>, <span class = «product»> MegaWidgets
</span> y <span class = «product»> WonderWidgets </span> . </p>