Curso html-dreamweaver-basico

HTML
Básico

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

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


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

No, Es un lenguaje de marcado

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>


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>


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.

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


Dreamweaver


Propiedades página


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


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


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.


Insertar Imágenes

Texto que se verá en
caso que la imagen no se
muestre

Descripción de la
imagen


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


Visualización de Pantalla
Visualización de la pantalla.
Diseño, Código, diseño-código


HTML Básico
Gracias

Toni Marqués
www.toni-marques.com
toni.marques@walk-the-net.com
@seo_toni_web

Curso html-dreamweaver-basico

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Curso html-dreamweaver-basico

Similar a Curso html-dreamweaver-basico (20)

Último

Último (20)

Curso html-dreamweaver-basico