SlideShare una empresa de Scribd logo
1 de 8
Descargar para leer sin conexión
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.
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.
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>
<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í)
</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.
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
• 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;
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>

Más contenido relacionado

Similar a JUAN PABLO HERNANDEZ D Y SEBASTIAN RAMOS M.docx

Similar a JUAN PABLO HERNANDEZ D Y SEBASTIAN RAMOS M.docx (20)

¿QUE SON LOS CÓDIGOS HTML .docx
¿QUE SON LOS CÓDIGOS HTML .docx¿QUE SON LOS CÓDIGOS HTML .docx
¿QUE SON LOS CÓDIGOS HTML .docx
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Codigo HTML.docx
Codigo HTML.docxCodigo HTML.docx
Codigo HTML.docx
 
Trabajo.docx
Trabajo.docxTrabajo.docx
Trabajo.docx
 
Slideshare
SlideshareSlideshare
Slideshare
 
Intro html5
Intro html5Intro html5
Intro html5
 
Html
HtmlHtml
Html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Practica 1
Practica 1Practica 1
Practica 1
 
Html
HtmlHtml
Html
 
Html 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la WebHtml 5. Estructura de un documento para la Web
Html 5. Estructura de un documento para la Web
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
 
Html
HtmlHtml
Html
 
Tema 2
Tema 2Tema 2
Tema 2
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Html
HtmlHtml
Html
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
Articulo monica y christian "español"
Articulo monica y christian "español"Articulo monica y christian "español"
Articulo monica y christian "español"
 

Último

Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfSaraGabrielaPrezPonc
 
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfSIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfNELLYKATTY
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 
Tarea 2 - Sociologia de la organizacion-1.docx
Tarea 2 - Sociologia de la organizacion-1.docxTarea 2 - Sociologia de la organizacion-1.docx
Tarea 2 - Sociologia de la organizacion-1.docxmiguelramosvse
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariamichel carlos Capillo Dominguez
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativaricardoruizaleman
 
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre terceroCEIP TIERRA DE PINARES
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosAgrela Elvixeo
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdfceeabarcia
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...Unidad de Espiritualidad Eudista
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdfDemetrio Ccesa Rayme
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarCa Ut
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCEIP TIERRA DE PINARES
 

Último (20)

Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdfAnna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
Anna Llenas Serra. El monstruo de colores. Doctor de emociones.pdf
 
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdfSIANET  - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
SIANET - GUÍA SOBRE COMO CREAR EVALUACIONES.pdf
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 
Tarea 2 - Sociologia de la organizacion-1.docx
Tarea 2 - Sociologia de la organizacion-1.docxTarea 2 - Sociologia de la organizacion-1.docx
Tarea 2 - Sociologia de la organizacion-1.docx
 
ficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primariaficha de aplicacion para estudiantes El agua para niños de primaria
ficha de aplicacion para estudiantes El agua para niños de primaria
 
Presentación del tema: tecnología educativa
Presentación del tema: tecnología educativaPresentación del tema: tecnología educativa
Presentación del tema: tecnología educativa
 
Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T3  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T3 FONDEP 2024 Ccesa007.pdf
 
sociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercerosociales ciencias segundo trimestre tercero
sociales ciencias segundo trimestre tercero
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdfConcurso de Innovación Pedagógica  T2  FONDEP 2024 Ccesa007.pdf
Concurso de Innovación Pedagógica T2 FONDEP 2024 Ccesa007.pdf
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES Monelos
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolar
 
VISITA DE ESTUDO À CRUZ VERMELHA _
VISITA DE ESTUDO À CRUZ VERMELHA                   _VISITA DE ESTUDO À CRUZ VERMELHA                   _
VISITA DE ESTUDO À CRUZ VERMELHA _
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
 

JUAN PABLO HERNANDEZ D Y SEBASTIAN RAMOS M.docx

  • 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>