Curso html-dreamweaver-basico
description
Transcript of Curso html-dreamweaver-basico
![Page 1: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/1.jpg)
HTMLBásico
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
![Page 2: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/3.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/4.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/5.jpg)
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
![Page 6: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/6.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/7.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/8.jpg)
Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
![Page 9: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/9.jpg)
Dreamweaver
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
![Page 10: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/10.jpg)
Propiedades página
Toni Marqués :: Diseñador Gráfico y Web :: 661764819 :: www.toni-marques.com
![Page 11: Curso html-dreamweaver-basico](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/11.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/12.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/13.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/14.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/15.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022051013/546db2cdb4af9f892c8b552a/html5/thumbnails/16.jpg)
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