ETIQUETA DE HTML
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,
<a refreí="https://www.aulaclic.es">Visita aulaClic</a>
Etiquetas de html mas utilizada
<div> </div>: Sirve para crear secciones o agrupar contenidos.
</p>: Permite asignar un párrafo de texto
<html>:presenta el contenido de un documento HTML. Sólo puede haber un elemento <body> en un documento.
<head>:Define información ha cerca del documento
<title>:Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".
<body>: presenta el contenido de un documento HTML. Sólo puede haber un elemento <body> en un documento.
<h1>: Es una etiqueta que sirve para colocar la frase que indica el titulo del contenido de una pagina web.
<h2>: La etiqueta h2 es un elemento similar al h1, que indica títulos de subapartados del documento web actual
<h3>: Se utiliza para definir títulos dentro de un subapartado encabezado por un <h2> .
<class>: Asigna nombres de clases de elementos
<stile>: Permite especificar informacion a nuestro elemento
<br>: Permite un salto de linea en el texto
Una página web se define como un documento electrónico el cual contiene información textual, visual y/o sonora que se encuentra alojado en un servidor y puede ser accesible mediante el uso de navegadores. Una página web forma parte de una colección de otras páginas web dando lugar al denominado sitio web el cual se encuentra identificado bajo el nombre de un dominio.
La creación y desarrollo de una página web se realiza bajo un lenguaje de programación capaz de ser interpretados por los navegadores, lenguajes como el HTML, PHP, ASP, JSP o RUBY son ejemplos entre otros. Al inicio de la era de Internet accesible, sobre los años 90, era necesario el conocimiento de algún lenguaje de programación para el desarrollo de una web, siendo una tarea encomendada a personas con altos conocimientos informáticos, hoy en día contamos con software especializado capaz de trabajar como un editor de texto ,estilo Word, que transforman toda la información insertada en un lenguaje de programación capaz de ser interpretado por los navegadores, de esta forma se liberalizó y se globalizó la creación de páginas web con apenas unos escasos conocimientos informáticos, programas como Dreamweaver, Amaya, Sharepoint Designer o Mozilla Composer son entre otros los denominados WYSIWYG (acrónimo del inglés " lo que ves es lo que obtienes") capaces de crear complejas páginas web con el entorno de un simple editor de texto.
Una vez que hemos creado y desarrollado nuestras páginas web es necesario alojarlas en un servidor el cuál lo podemos definir como un ordenador conectado constantemente a la Internet privada o a Internet cuyo objetivo es poder disponer de la página web a cualquier hora del día. Para poder acceder al servidor es necesario el uso de programas denominados clientes FTP, los cuales conectan el ordenador personal donde se ha desarrollado la página con el servidor donde se alojará, Filezilla, FileFTP o Cute FTP son entre otros ejemplos de clientes FTP.
Por último, una vez alojadas nuestras páginas web estas son accesibles mediante el uso de navegadores los cuales permiten visualizar correctamente la información alojada y desarrollada, Chrome, Mozilla, Internet Explorer y Safari son entre otros ejemplos de navegadores ampliamente utilizados.
¿Páginas Web Estáticas?
Son páginas enfocadas principalmente a mostrar una información permanente, se crean mediante el lenguaje HTML, que NO permite grandes libertades para crear efectos o funcionalidades más allá de los enlaces, pero que haciendo uso de otros recursos se pueden obtener muy buenos resultados llegando a ser páginas muy similares a las dinámicas en cuando a su visualización se refiere.
Esta es una opción más que suficiente para aquellos que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc... ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y dar a conocer su perfil de empresa, entre otros.
La principal ventaja de este tipo de páginas es lo económico que pueden resultar más sin embargo pueden con toda seguridad llenar las expectativas deseadas, con un diseño elegante, moderno y funcional incluyendo las imágenes y el texto con el cual se desea mantener informados a nuestros clientes en todo momento. Estas web tienen un costo mucho menor que las web dinámicas.
Ejemplos.-
Everywhereist
Este blog es un poco más intenso, pero su coherente branding ayuda a los visitantes a navegar fácilmente por el sitio. El blog de viajes usa una iconografía mundial para trasladar a los visitantes por el sitio, y facilita la exploración de secciones fuera del blog.
También incluye la sección "Best Of" (Lo mejor), que ofrece un panorama general a los nuevos visitantes sobre lo que pueden esperar del blog. El esquema de colores es cálido y neutro, sin demasiados recursos que pudieran distraer la atención del contenido.
Albino Tonnina
Tonnina demuestra habilidades avanzadas y complejas de desarrollo de sitios web, pero las imágenes y los símbolos que utiliza son claros y fáciles de entender. También ofrece una opción simple para ver su currículum al principio de su sitio, para aquellos que no desean explorar la animación.
Tony D'Orio
Es importante que el diseño de tu porfolio visual sea simple para permitir que las imágenes capten la atención de los visitantes, y D'Orio lo logra incluyendo llamativas fotografías en primer plano en
su sitio web. Su logotipo y el menú de navegación son claros y no distraen la atención de su trabajo. Además, los posibles clientes pueden descargar fácilmente su trabajo de manera gratuita.
¿Quieres intentarlo? Haz clic en el menú hamburguesa en la esquina superior izquierda, y luego selecciona + Crear un PDF para seleccionar todas las imágenes que desees descargar.
¿Páginas Web Dinámicas?
Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo cual podemos definir las funciones y características que se deben cumplir de acuerdo a nuestras necesidades.
Estas permiten la creación de aplicaciones dentro de la propia Web, ofrecen también una mayor interactividad con los usuarios que la visiten. Otras funcionalidades que se pueden crear mediante las web dinámicas son las aplicaciones como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente de manera personalizada, entre otros.
La creación de una página web dinámica es más compleja, ya que se requiere de conocimientos específicos de lenguajes de programación y gestión de bases de datos. Mediante la creación de una página web dinámica; el cliente o empresa que la solicite recibirá prácticamente 2 páginas en una, ya que por un lado tendrá un panel de administración no visible por los usuarios o visitantes de la web y por otro lado tendrá lo que es la web públicamente visible para los usuarios. Es por esta otra razón que su creación requiere de un costo más alto.
- Sus ventajas: Realmente sus ventajas y posibilidades son infinitas, con este tipo de páginas web se puede hacer todo lo que se desee, desde una simple web informativa, hasta una potente herramienta de trabajo rica en contenido dinámico, sistemas contable capaces de llevar lo que es el inventario de la empresa, además de que puede ser manejada y actualizada incluso por el propietario de la web sin la intervención de un programador. Lo que hoy se conoce como web 2.0 es precisamente la web dinámica, esa en la cual los usuarios interactúan con la información contenida en la web, ya que dicha información varía en tiempo real de acuerdo a las opciones tomadas por el usuario.
Ejemplos.-
Gari Cruze
Cruze es redactor. Sin embargo, al convertir su sitio web en un porfolio con imágenes de las diferentes campañas en las que ha trabajado, logra que los visitantes sigan haciendo clic para obtener más información sobre él. Además, hay una excelente llamada a la acción en la parte superior de la página que dirige a los visitantes a la publicación del blog más reciente de Cruze.
El divertido texto de su sitio, específicamente en las secciones “17 Random Things” (17 datos al azar) y “Oh Yes, They’re Talking” (Oh, sí, hablan), sirve para demostrar sus habilidades y, a la vez, hacerlo aún más memorable. A la derecha de estas páginas, también se incluye la información de contacto de Cruze, lo que permite ponerse en contacto con él en cualquier momento de manera muy fácil:
El porfolio de esta desarrolladora incluye imágenes claras y emblemáticas de campañas y aplicaciones en las que ha trabajado, y demuestra sus habilidades de codificación cuando haces clic para ver los detalles de su trabajo.
Si bien puede parecer un exceso de minimalismo presentar solo tres ejemplos de su trabajo, Daveid benefició su porfolio al incluir sus campañas más notables. Al fin y al cabo, es mejor tener pocos ejemplos de excelencia que muchos ejemplos de mediocridad.
Robby Leonardi
El increíble sitio web de demostración de Leonardi aprovecha las habilidades de animación y desarrollo de sitios web para convertir su porfolio y currículum en un videojuego para los visitantes del sitio. El fantástico branding y la manera única de compartir información garantizan que su sitio sea inolvidable para los visitantes.
¿ Qué son los protocolo IP ?
El protocolo IP es parte de la capa de Internet del conjunto de protocolos TCP/IP. Es uno de los protocolos de Internet más importantes, ya que permite el desarrollo y transporte de datagramas de IP (paquetes de datos), aunque sin garantizar su entrega. En realidad, el protocolo IP procesa datagramas de IP de manera independiente al definir su representación, ruta y envío.
El protocolo IP determina el destinatario del mensaje mediante 3 campos: el campo de dirección IP (dirección del equipo); el campo de máscara de subred, que permite al protocolo IP establecer la parte de la dirección IP que se relaciona con la red; el campo de pasarela predeterminada, que permite al protocolo de Internet saber a qué equipo enviar un datagrama si el equipo de destino no se encuentra en la red de área local.
¿Qué es un navegador?
Un navegador o explorador web - conocido en inglés como web browser - es un programa o
software, por lo general gratuito, que nos permite visualizar páginas web a través de
Internet además de acceder a otros recursos de información alojados también en
servidores web, como pueden ser videos, imágenes, audio y archivos XML.
Pero un navegador también nos permite almacenar información o acceder a diferentes tipos de documentos en el disco duro, etc, acceder a redes privadas, y crear marcadores (bookmarks).
El acceso a otras páginas web a través de los hiperenlaces (hipervínculos o enlaces) se llama navegación, término del que deriva el nombre de navegador, aunque una minoría prefieren llamarlo hojeador que sería la traducción literal de la palabra browser.
Algunos navegadores vienen incorporados a su sistema operativo como es el caso de Internet Explorer en Windows Microsoft, Safari en Mac OS X, o Firefox, Opera o Flock en Linux.
EJEMPLOS
Netscape Navigator:
Durante una gran parte de los años 90 fue el navegador más usado por usuarios de todo el mundo. Podemos decir que fue, de alguna manera, el primer navegador realmente popular.
Internet Explorer:
Propiedad de Microsoft, se creó en 1995. Aunque llegó tarde, fue el navegador que desbancó a Netscape. El hecho de estar integrado en el sistema operativo Windows de forma gratuita ayudó a conseguirle una cuota del 95% de usuarios.
Google Chrome
El navegador propio de la empresa Google, lanzado en 2008 superó a Microsoft Explorer en 2011. Es de código abierto y está considerado uno de los más rápidos en la actualidad.
¿Qué es un navegador web?
Un navegador web es una aplicación de software que la gente utiliza para ver páginas web en Internet. Los navegadores web existen desde la década de 1980 y se desarrollan y actualizan constantemente desde entonces para proporcionar al usuario tiempos de carga más rápidos y páginas web más seguras.
La llegada de los navegadores contribuyó a democratizar el acceso a Internet, cuyo uso primitivo estaba restringido a investigadores y otros sabiondos.
Los navegadores web más populares que se utilizan hoy en día son los siguientes.
En ordenadores:
- Google Chrome 57% de usuarios
- Internet Explorer 05% de usuarios
- Firefox 94% de usuarios
- Microsoft Edge 38% de usuarios
- Safari 31% de usuarios
- Opera 71% de usuarios
- Sogou Explorer 30% de usuarios
- QQ 20% de usuarios
- Yandex 71% de usuarios
- UC Browser 63% de usuarios
En smartphones:
- Chrome 62% de usuarios
- Safari 44% de usuarios
- UC Browser 70% de usuarios
- QQ 59% de usuarios
- Android Browser 56% de usuarios
- Opera Mini 44% de usuarios
- Baidu 40% de usuarios
- Firefox 66% de usuarios
- Opera 31% de usuarios
- Edge 11% de usuarios
Navegador web de opera
En constante evolución y mejora, y con el navegador móvil más popular, Opera ha recorrido un largo camino desde ser un navegador hasta una suite de Internet completa. Navegador rápido y gratuito con buen soporte para actualizaciones.
Navegador web safari.
Es un navegador web desarrollado por Apple inc. Es el navegador más popular entre los usuarios de MAC. Safari es un navegador limpio, muy rápido basado en el motor de renderizado WebKit. Safari incluye las funciones que desea en un navegador moderno.
Navegador Slimjet.
Es un potente y uno de los mejores navegadores que existen. Se ha construido en extensiones para facilitar la navegación por Internet. Desarrollado por Blink Engine, Slimjet es compatible con todas las aplicaciones de Chrome más un conjunto de aplicaciones más completas y es tan bueno como Chrome. Tiene una interfaz potente y personalizable como Firefox, funciones de confiabilidad y aplicaciones integradas.
¿Qué es una hoja de estilo?
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.
Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las páginas vinculadas a la misma.
Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente.
Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a continuación despliegas la lista de formatos para seleccionar Título 1 (de forma similar a lo propuesto en las actividades anteriores de este curso), realmente el fragmento de texto se ha “etiquetado” como <h1> Texto seleccionado … </h1>. Si hubieramos elegido Título 2 se habría etiquetado con <h2> … </h2>, etc.
Algunas etiquetas HTML son:
- <body> … </body> . Contienen todos los caracteres que forman la página web.
- <h1> … </h1>, …, <h6> …</h6>. Permiten definir títulos de distintos tamaños (hasta 6).
- <p> … </p>. Contienen el texto de un párrafo.
- <a href=”http://...”>Texto del enlace</a>. Se utiliza para crear enlaces.
Existen muchas más etiquetas pero en esta práctica sólo vamos a modificar el formato (color, tipo, tamaño, efecto, etc) de los textos etiquetados con las que se citan.
En esta práctica vamos a crear una hoja de estilo y se vinculará a una página.
¿ Qué es una tabla o plantillas ?
En Wikipedia, una
tabla es una forma de representar mucha información de manera esquematizada, ordenada y compacta. Aunque Wikipedia acepta el código
HTML para la creación de tablas como en cualquier
página web, posee también un código propio, cuya
sintaxis basada en barras verticales resulta bastante más limpia y compacta.
¿Qué son marcos (Frames)?
Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias páginas web en una sola. Mal utilizados pueden arruinar la mejor página web, pues no hemos de olvidar que la pantalla del monitor está físicamente limitada. Cada marco que compone la página poseerá sus propios bordes y barras de scroll, comportándose como ventanas independientes. Su situación en la página es rígida, no podemos colocarlos en las posiciones que deseemos, si tenemos cuatro marcos se situarán en cada uno de los cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividiré en dos filas o en dos columnas para alojarlos. Pueden ser útiles para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de navegación.
Su uso puede parecer algo complejo pero es muy simple. Básicamente se trata de definir una página contenedora de los marcos y de colocar en cada uno de ellos la página cuyo contenido mostrarán. Por supuesto también concretaremos el tamaño y posición y otros atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un texto alternativos explicando la situación. Mira el siguiente código y ve los resultados en este
ejemplo.
<HTML>
<HEAD>
<TITLE>Los frames: páginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAME NAME="principal" SRC="principal.htm">
<NOFRAMES>
<P align="center">Al parecer tu navegador
no soporta marcos, actualízate.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Fíjate las diferencias y coincidencias con una página HTML habitual: en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una página o ventana dentro de la página contenedora que estará compuesta por varias zonas definidas con los parámetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y el otro el 80% restante.
Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción alternativa para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y especificamos qué página HTML se mostrará en él (etiqueta <FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>).
¿ Qué es un software de edición de sitios web?
Tienes una página web que administrar, ella es la base de tu negocio, e incluso puedes tener hasta más de un sitio, todos ellos dedicados al marketing de la Internet.
Tipos de software para editar páginas web:
Los editores no son más que aplicaciones que permiten, que puedas crear y modificar archivos o documentos en HTML o XHTML.
Existen dos tipos de software para editar páginas web, estos son los editores visuales de HTML o también conocidos como WYSIWYG (Hacen referencia a what you see is what you get) de sus siglas en inglés al español sería: lo que observas es lo que tienes.
- Software para editar páginas web tipo visual o WYSIWYG:
Algunos editores son muy conocidos y reconocidos, se emplean en sistemas de Windows y Linux, son de fácil uso aunque hay personas que no les agradan.
Estos programas permiten editar y crear archivos en HTML, PHP entre otros que sean requeridos.
Entre los muchos beneficios de estos editores gráficos se encuentran el fácil manejo, la comprobación del código, la pre visualización de la página y manuales de uso que pueden resolverte todo tipo de dudas.
Para quienes no están muy familiarizados con los códigos de edición de páginas, el editor gráfico actúa como una plantilla de programa fácil, dónde solo basta rellenarla con la información y las imágenes necesarias.
Todo lo que construyas o modifiques la aplicación automáticamente lo convertirá en lenguaje HTML.
- Software para editar páginas web tipo texto:
A diferencia del software de edición visual, en el cual no requieres muchos conocimientos de HTML para lograr modificar o editar tu página web, el editor de texto si lo requiere.
Al igual que el visual, cuenta con dos formas de hacerlo, una en Windows y la otra en Linux. Es importante saber sobre códigos, ya que todo lo haces sin imágenes y sin plantilla de relleno que sirva.
Lo que hagas, tampoco será guardado como HTML de forma instantánea, es tu deber crear todo desde los códigos fuente.
Existe una tercera opción totalmente diferente de estas dos, esta opción es para que la tengas en cuenta si ninguno de los editores te convence o no tienes tiempo que dedicarle a estos programas.
Esta opción consta de unas plantillas o templaste que puedes encontrar en la web. Estos templaste te permiten crear tu página a base de plantillas de relleno, sin necesidad de saber nada de códigos.
Si al final te aburres de los templaste porque tienen el mismo diseño compartido con otros sitios, debes entonces emplear los editores mencionados.
¿Cómo conseguir software para editar páginas web?:
Conseguir estos editores es fácil, la web te permite tenerlos de forma gratuita por periodos de tiempo en formato prueba o descargarlos en tu ordenador de forma gratuita.
Siempre recuerda descargar u obtener cosas en páginas confiables y seguras, las descargas a veces traen consigo virus o formatos espías que podrán causar mucho daño a tu computadora.
Para concluir recuerda que puedes encontrar las plataformas de los templaste, por si los editores no son lo tuyo.
¿Qué es un publicador de sitios web?
El Publicador es una herramienta que creamos que permite modificar contenidos dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizar los sectores que usted necesite modificar asiduamente, siendo estos fotos, imágenes, textos y otros.
Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.
El mantenimiento de su Sitio Web depende de la o las personas que usted desee y puede ser realizado por varias personas al mismo tiempo. Cada uno accede con su usuario y contraseña; de modo que usted podrá verificar quién realiza los cambios en contenidos y en que momento.
Incluye:
¿Qué es un servidor web
es un programa informático que procesa una aplicación del lado del servidor, realizando conexiones bidireccionales o unidireccionales y síncronas o asíncronas con el cliente y generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente es renderizado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se usa el protocolo HTTP para estas comunicaciones, perteneciente a la capa de aplicación del modelo OSI. El término también se emplea para referirse al ordenador.
