Temática:
paginas web y lenguaje de marcado html
¿Que es
un sitio web?
Las
páginas web de las que se conforma el sitio deben estar desarrolladas bajo un
código llamado HTML y estar alojadas a un dominio que, en palabras simples,
será el lugar que hará que el sitio web pueda visualizarse en cualquier tipo de
navegador web (hosting).
imagen 1
¿Que es
una pagina web?
Es un
documento o información electrónica capaz de contener texto, sonido, vídeo,
programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada
World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta
información se encuentra generalmente en formato HTML o XHTML, y puede
proporcionar acceso a otras páginas web mediante enlaces de hipertexto.
Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo
en cascada, guiones (scripts), imágenes digitales, entre otros.
¿Que es
una pagina web estática?
Una
página web estática es un sitio de Internet que muestra el mismo contenido para
todos los usuarios, en vez de proporcionar contenido personalizado a la medida
de cada usuario, y que no se actualiza a menudo. Las páginas web estáticas, que
algunas veces se conocen como páginas planas, contrastan con las páginas web
dinámicas que se actualizan frecuentemente y proporcionan información
personalizada para usuarios individuales.
imagen 2
¿Que es
una pagina web dinámica?
Crear una
página web dinámica es un proceso más complejo en relación al de crear una
estática, esto debido a que es necesario contar con un nivel importante de
conocimiento previo sobre lenguajes de programación y gestión de bases de
datos. Su desarrollo requiere de lenguajes como el PHP, lo que permite definir
características y funciones a placer buscando satisfacer nuestras necesidades
(informar, vender, recabar datos, etc.). En estas páginas gran parte de sus
tareas son ejecutadas en un servidor, el cual es el encargado de darle su
dinamismo.
¿Que es
un wix?
Hoy en
día hay cada vez más plataformas que prometen ayudarte a crear una página web
de manera fácil y gratuita. Wix, una plataforma de origen Israelí, es una de
las más conocidas entre ellas. Su eslogan es “Crea tu increíble página web. Es gratis”,
una fórmula muy llamativa que atrae a miles de usuarios. Efectivamente, con Wix
puedes crear una página web más o menos atractiva, de manera fácil y “gratis”.
imangen 3
LENGUAJE DE MARCADO HTML
HTML son las siglas de Hypertext Markup
Language o lenguaje de marcación de hipertexto, el más utilizado en la Web, un
lenguaje sencillo basado en etiquetas, que permite mostrar la información de
las páginas Web en el monitor del usuario a través de los navegadores.
NOTA:
Cuando un usuario solicita una página
Web desde su ordenador a un servidor de Internet, el documento HTML se descarga
al disco duro y luego se muestra en el monitor.
En los inicios del diseño Web, para
crear una página había que conocer inevitablemente HTML.
Se necesitaba además un editor de texto
convencional para escribir el código y luego comprobar el resultado. Los
editores eran entonces relativamente simples y poco prácticos para escribir
documentos HTML.
La primera versión de HTML tenía un
etiquetado primitivo que sólo permitía definir el tamaño de letra, definir los
enlaces e incrustar las imágenes.
La aparición de nuevos navegadores en
el mercado obligó a definir una versión estándar de HTML con nuevas formas para
hacer un diseño eficaz.
A mediados de los 90 comenzaron a desarrollarse los primeros editores
visuales WYSIWYG (What You see is what you get; en castellano: lo que ves es lo
que obtienes) que permitieron la producción de páginas Web sin tener
conocimientos de HTML.
LENGUAJES DE MARCADO
Un lenguaje de marcado o lenguaje de marcas es
una forma de codificar un documento que, junto con el texto,
incorpora marcas que contienen información adicional acerca de la
estructura del texto o su presentación.
El lenguaje de marcas más extendido es el(HyperText Markup Language,
lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado
de comunicación de alcance mundial).
IMAGEN5: lenguaje demarcado html
Fuente:wikipedia
ABREVIATURA ML
·
Lenguaje
de marcas (en inglés markup language), una forma de
codificación de un documento con información adicional sobre su estructura y
presentación;
LENGUAJE DE MARCAS
Las páginas web ofrecen la posibilidad
de tener, además de texto, estructura de la página (columnas), formatos de
fuente (colores, subrayados, negritas...), imágenes, enlaces, tablas, listados,
etc. Y, sin embargo, todas las páginas web están constituidas por texto plano,
o sea, texto sin más. ¿Cómo hacemos para incluir todos estos elementos
adicionales y que el navegador sepa diferenciar que es contenido y qué no lo
es? La solución es utilizar un lenguaje de marcas. Los lenguajes de marcas no
son lenguajes de programación como Scratch (aquí no hay sentencias que
ejecutar); son lenguajes que mediante marcas añaden riqueza sintáctica y
semántica a un texto.
Página:http://formacion.intef.es/pluginfile.php/52814/mod_imscp/content/5/qu_es_un_lenguaje_de_marcas
IMAGEN6:lenguaje html
Fuente:la web
HTML
HYPERTEXT
HTML es un
lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet.
Se trata de la sigla que corresponde a HyperText Markup Language,
es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como
Lenguaje de Formato de Documentos para Hipertexto.
Página:https://definicion.de/html/
IMAGEN7:html
Fuente:la web
QUE SON
LAS ETIQUETAS Y TIPOS
Una etiqueta (términos a veces reemplazados
por el anglicismo tag) es una marca con
clase que delimita una región en los lenguajes basados en XML. También puede
referirse a un conjunto de juegos informáticos interactivos que se añade a un
elemento de los datos para identificarlo (Oxford
English Dictionary). Esto ocurre, por ejemplo, en los
archivos MP3 que
guardan información sobre una canción así como sobre el artista que la ha
cantado o compuesto.
TIPOS
<HTML> …
</HTML>
Delimita y engloba toda la página web,
que consta de cabecera y cuerpo.
<HEAD> …
</HEAD>
Delimita y engloba la cabecera de una
página, que contiene un conjunto de informaciones que no se muestran en la
ventana, entre ellas el título de la página, pero que pueden ayudar a los
navegadores y a los buscadores para interpretar o a encontrar correctamente la
página.
<TITLE> …
</TITLE>
Dentro de la cabecera (HEAD), lo que se
incluye aquí se muestra en la barra del título de la ventana del navegador.
Metadatos
La cabecera admite otras muchas
etiquetas (ver apuente 6 y 6.1.)
<BODY> …
</BODY>
Delimita y engloba el cuerpo de la
página, que son el conjunto de informaciones (texto e imágenes) que se muestran
en la página, así como las indicaciones de cómo deben mostrarse.
Admite atributos (ver jac 8
y apuente 5.3 y 14.3).
Formatos de párrafo
El texto de la página se puede
estructurar en encabezamientos de los diferentes apartados de la página, que
pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos
normales.
<H1> ...
</H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con
distintos niveles).
<P>...
</P>
Párrafos normales.
<P
align="center">... </P>
El atributo align permite alinear el
texto del párrafo. Se puede aplicar igual a las etiquetas <H1>,
<H2>, etc ...
<BR>
Permite partir un párrafo empezando una
línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de
separación. (admite atributos) (ver apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
Formatos de texto
El formato de caracteres permite
cambiar tanto el tipo de fuente como su tamaño y aspecto.
Se pueden utilizar varias etiquetas
HTML para dar distintos formatos a un grupo de caracteres:
Formatos Físicos:
· Negrita:
<B>…</B>
· Cursiva:
<I>…</I>
· Subrayado:
<U>…</U>
· Teletipo:
<TT>…</TT>
· Tachado:
<STRIKE>…</STRIKE>
· Grande:
<BIG>…</BIG>
· Pequeña:
<SMALL>…</SMALL>
· Superíndice:
<SUP>…</SUP>
· Subíndice:
<SUB>…</SUB>
Formatos Lógicos:
· Cita:
<CITE>…</CITE>
· Código:
<CODE>…</CODE>
· Definición:
<DFN>…</DFN>
· Énfasis:
<EM>…</EM>
· Grueso:
<STRONG>…</STRONG>
· Palabras
clave: <KEY>…</KEY>
· Ejemplos:
<SAMP>…</SAMP>
· Usuario:
<KBD>…</KBD>
· Variables:
<VAR>…</VAR>
· Ejemplo
literal: <XMP>...</XMP> (ignora las etiquetas
HTML de dentro)
Posibilidad de combinar etiquetas
(anidándolas, esto es, una dentro de otra):
· <B>…<I>…</I>…</B>
(Correcto)
· <B>…<I>…</B>…</I>
(Incorrecto)
<FONT
COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a
usar, en este caso el color (ver jac 8.2)
<FONT
SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a
usar, en este caso el tamaño (ver jac 8.1-segunda parte)
La etiqueta FONT permite combinaciones
cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del
ISO-LATIN-1 que no se pueden representar directamente en un documento HTML,
puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo
los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas
y algunos signos de puntuación deben ser especificados de forma distinta,
puesto que los navegadores pueden no entender el código del carácter utilizado
y convertirlo a otro diferente.
Los caracteres especiales más usados
son:
· á
á
· é
é
· í
í
· ó
ó
· ú
ú
· à
à
· ñ
ñ
· <
<
· >
>
· &
&
· ç
ç
· "
“
·
espacio en blanco
(ver apuente 10.1)
Listas
(ver apuente 7)
<UL> ...
</UL>
Lista numerada.
<OL> ...
</OL>
Lista no numerada.
<LI> ...
</LI>
Elementos de una lista.
Enlaces
Sirven para acceder desde una página a
otra página o a otro recurso disponible (ver apuente 15).
<a href="http://servidor/recurso.html">texto
del enlace</a>
Enlace absoluto a una página
<a
href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a
name="marcador"> ... </a>
Marcador (enlace interno) dentro de una
página
<a
href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a
href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página
(que puede darse con dirección absoluta o relativa)
<a
href="recurso.html" target="_blank">texto del
enlace</a>
Enlace a otra página (absoluta o
relativa, con o sin marcador) que se abra en otra ventana.
Imágenes
<img
src="nombre.gif">
Muestra una imagen, que normalmente es
de tipo GIF o JPG
Admite atributos (ver
apuente 14).
Tablas
Permite organizar la información en
tablas.
También sirve para maquetar (dar forma
general) al aspecto de la página.
imagen 4:mi primera pagina
imagen 5: atributos
fuente: johan harvey bolívar cortes
No hay comentarios.:
Publicar un comentario