Curso html-dreamweaver-basico

17
HTML Básico Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

description

 

Transcript of Curso html-dreamweaver-basico

Page 1: Curso html-dreamweaver-basico

HTMLBásico

Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

Page 2: Curso html-dreamweaver-basico

html¿El html es un lenguaje de programación?

Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

Page 3: Curso html-dreamweaver-basico

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

Page 4: Curso html-dreamweaver-basico

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

Page 5: Curso html-dreamweaver-basico

Estructura html<body>Tablas<table> <tr><td>&nbsp;</td><td>&nbsp;</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

Page 6: Curso html-dreamweaver-basico

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

Page 7: Curso html-dreamweaver-basico

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

Page 8: Curso html-dreamweaver-basico

Dreamweaver

Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

Page 9: Curso html-dreamweaver-basico

Dreamweaver

Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

Page 10: Curso html-dreamweaver-basico

Propiedades página

Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com

Page 11: Curso html-dreamweaver-basico

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

Page 12: Curso html-dreamweaver-basico

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

Page 13: Curso html-dreamweaver-basico

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

Page 14: Curso html-dreamweaver-basico

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

Page 15: Curso html-dreamweaver-basico

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

Page 16: Curso html-dreamweaver-basico

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

Page 17: Curso html-dreamweaver-basico

Gracias

Toni Marquéswww.toni-marques.com

[email protected]@seo_toni_web

HTML Básico