1. HTML
Básico
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
2. html
¿El html es un lenguaje de programación?
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
3. html
¿El html es un lenguaje de programación?
No, Es un lenguaje de marcado
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
4. Estructura html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
Declaración de tipo de documento
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
formato de codificación de caracteres. Está definido como estándar
<title>Untitled Document</title>
Un title diferente por página (SEO)
<link href="estilos.css" rel="stylesheet" type="text/css" />
añadir una hoja css
<script>Ej código de google analytic</script>
añadir un script (archivo de ordenes)
</head>
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
6. Tablas / capas
Capas:
·La capas flotan y se adaptan mejor a la web.
·La maquetación de la web es más clara en consecuencia
ayuda al SEO
·Se necesita saber utilizar hojas de estilo (css)
Tablas:
·Son más rígidas,
·Se suele utilizar para la presentación de datos.
·Más fáciles de utilizar que las capas
*Se pueden utilizar las dos en un mismo html pero lo normal es utilizar
tablas dentro de capas y no a la inversa.
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
7. Etiquetas / atributos
Las etiquetas son elementos que componen el lenguaje de programación
Los atributos son propiedades que tiene las etiquetas
<img src="foto.gif" alt="texto imagen" height="12px" width="12px"/>
Etiqueta es <img></img>
Atributos src (te indica la foto a cargar), alt (nombre a la imagen) height y width (limitan el tamaño de la imagen)
http://www.htmlquick.com/es/reference/tags.html
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
8. Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
9. Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
10. Propiedades página
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
11. Crear una Tabla
Filas y columnas
Anchura de la tabla.
Por porcentaje o por
pixeles
Espacio interior entre la celda y
el contenido
Tamaño del borde Espacio entre celdas
en pixeles
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
12. Tablas
Una vez creada la tabla, puedes seleccionarla y modificar las propiedades
También puedes añadir un color o imagen de fondo, color del borde, una clase etc...
*Se pueden crear tablas dentro de tablas, en muchas ocasiones es necesario para poder dar la
forma que deseas al html
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
13. Tablas
Propiedades de las celdas
Formato: h1,h2 etc...
Lo más usados:
_blank carga el archivo en una ventana nueva del
navegador
Unir fílas / columnas _self carga el archivo en la misma ventana que el archivo
Crear fílas / columnas original. Este destino es el predeterminado.
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
14. Insertar Imágenes
Texto que se verá en
caso que la imagen no se
muestre
Descripción de la
imagen
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
15. Propiedades imágenes
Herramientas para editar la imagen
Tamaño borde
Mapa Margen
horizontal y Carga de una imagen en menor resolución
vertical hasta que se cargue la de mayor resolución
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
16. Visualización de Pantalla
Visualización de la pantalla.
Diseño, Código, diseño-código
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
17. HTML Básico
Gracias
Toni Marqués
www.toni-marques.com
toni.marques@walk-the-net.com
@seo_toni_web
