Post on 18-Nov-2014
description
HTMLBásico
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
html¿El html es un lenguaje de programación?
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
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
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
Estructura html<body>Tablas<table> <tr><td> </td><td> </td></tr></table>
Capas<div>Texto capa principal <div class="nombre de la clase">texto capa 1.1</div><div>texto capa 1.2</div></div>
</body></html>
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
Tablas / capasCapas:
·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
Etiquetas / atributosLas 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
Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
Propiedades página
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
Crear una Tabla
Filas y columnas
Anchura de la tabla. Por porcentaje o por pixeles
Tamaño del borde en pixeles
Espacio interior entre la celda y el contenidoEspacio entre celdas
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
TablasUna 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
TablasPropiedades de las celdas
Formato: h1,h2 etc...Lo más usados:_blank carga el archivo en una ventana nueva del navegador_self carga el archivo en la misma ventana que el archivo original. Este destino es el predeterminado.
Unir fílas / columnasCrear fílas / columnas
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
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
Propiedades imágenes
Mapa Margen horizontal y vertical
Carga de una imagen en menor resolución hasta que se cargue la de mayor resolución
Herramientas para editar la imagen
Tamaño borde
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
Visualización de PantallaVisualizació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
Gracias
Toni Marquéswww.toni-marques.com
toni.marques@walk-the-net.com@seo_toni_web
HTML Básico