EDICIÓN DE PÁGINAS WEB
DREAMWEAVER. EDITOR WYSIWYG: WHAT YOU SEE IS WHAT YOU GET
"LO QUE VES ES LO QUE OBTIENES"
Editores de texto con formato que permiten escribir un documento viendo directamente el resultado final
DOBLE FORMATO DE TRABAJO
Vista código fuente
Funciona a base de códigos de CSS
Vista resultado final
También permite editar
REALIZACIÓN DE UN SITIO WEB
TIPOS
Sitios web
Blogs
Foros
Wikis
Moodles
Plataformas de correo electrónico
Revistas
Álbumes de fotos
CREACIÓN (offline)
Vía CMS
Vía código fuente
Vía editores de código WYSIWYG (what you see is what you get)
PUBLICACIÓN EN RED
Se necesita
Dominio: dirección exclusiva por la que hay que pagar
Hosting: dominio que ceden algunas compañías para alojar un sitio web
VISIONADO (online)
CMS: CONTENT MANAGEMENT SYSTEMS
¿QUÉ SON?
Evolución del código HTML hacia un editor web que funciona partiendo de plantillas (hojas de estilo CSS)
OFRECEN
Dominio gratis
MÁS USADOS
Páginas web
Webnode (con módulo para blog)
Weebly
Drupal
Blogs
Blogger
Weebly
Wordpress (posible conversión a página web)
Joomla
Moodle
CSS: CASCADE STYLE SHEET
UTILIZAN UNA GRAMÁTICA DIFERENTE QUE LA DEL HTML
¿QUÉ SON?
Reglas que definen la apariencia de los elementos html y el formato de los documentos html
Se utilizan para el aspecto visual
Hacen cambios globales en todo el documento o en todo el sitio web
TIPOS DE ESTILO
En línea
Se define en cada etiqueta html
Interno
Se define en el <head> de un documento y afecta a ese documento en concreto
Externo
Se crea un documento aparte (.css) y se vincula desde el <head> de cada página web con cuya información queramos afectar
HTML: HYPERTEXT MARKUP LANGUAGE
¿QUÉ ES?
Lenguaje usado para crear webs
Se utiliza para los contenidos
ESTRUCTURA
Siempre abre <html> y cierra al final de todo </html>
La siguiente etiqueta es <head>. El contenido no lo ve el navegador pero sí los buscadores (spiders)
Metadatos que describen la página para las arañas
Información CSS
<body> es la sección donde se pone todo lo que se verá en el navegador: se incluyen todo tipo de etiquetas que designan funciones
Estructura de una etiqueta
<etiqueta atributo=“valor”> Texto </etiqueta>
Formato
De documento. Ejemplos
<br> Salto de línia </b>
<hr> Línea horizontal </hr>
<h1> Encabezado 1 </h1>
De texto. Ejemplos
<strong> Negrita </strong>
<em> Cursiva </em>
<font size="12"> Texto tamaño 12 </font>
<font face="Verdana"> Texto Verdana </font>
Inclusión
De imágenes
alt="texto alternativo a la imagen (útil para spiders y navegadores para ciegos)" title="descripción de la imagen"
<img src="Ubicación">
De sonido y vídeo
<iframe src="Ubicación">
Enlace
<a href="Ubicación del documento"> Enlace </a>
#Anchor (ancla)
Marcas que sirven para que algo se enlace con lo previamente marcado con un nombre preestablecido
Listas, tablas y formularios
Son complejos de hacer. Sólo se utiliza el código fuente para revisarlos cuando hay algún problema en una lista, tabla o formulario ya hecho.
