El post que buscas se encuentra eliminado, pero este también te puede interesar

Curso gratis de diseño de páginas web

Anuncios

Curso gratis de diseño de páginas web



Etiquetas: creación de páginas webs, css, curso gratis, curso gratis diseño paginas web, curso web, diseñar paginas web, diseño de paginas web, dreamweaver, formulario, gratis, html, iframe, pagina, tablas, videos





Curso gratis de diseño de páginas web

El presente curso de diseño de páginas web, lo he elaborado a fin de que sirva como material de consulta tanto por diseñadores de páginas web como por diseñadores gráficos y por cualquier persona que quiera aprender a diseñar páginas web, desde lo básico de HTML pasando por el CSS hasta el montaje de la pagina web en Dreamweaver y la subida de la página web en el servidor, todos los video tutoriales de diseño web son explicados paso a paso y todos son una secuencia del tutorial de diseño web anterior, así que no pierdas la secuencia.

Este curso gratis de diseño de paginas web es para quien quiere aprender HTML, saber modificar alguna plantilla html o instalar WordPress o Joomla no te hace un experto ó master en diseño web, para ser un experto debes primero conocer el código HTML y CSS, y es eso lo que vas a aprender con estos tutoriales de diseño web.

Curso gratis de diseño de páginas web

Tutoriales 30 septiembre 2010 | 42 Comentarios

Etiquetas: creación de páginas webs, css, curso gratis, curso gratis diseño paginas web, curso web, diseñar paginas web, diseño de paginas web, dreamweaver, formulario, gratis, html, iframe, pagina, tablas, videos





Curso gratis de diseño de páginas web

El presente curso de diseño de páginas web, lo he elaborado a fin de que sirva como material de consulta tanto por diseñadores de páginas web como por diseñadores gráficos y por cualquier persona que quiera aprender a diseñar páginas web, desde lo básico de HTML pasando por el CSS hasta el montaje de la pagina web en Dreamweaver y la subida de la página web en el servidor, todos los video tutoriales de diseño web son explicados paso a paso y todos son una secuencia del tutorial de diseño web anterior, así que no pierdas la secuencia.

Este curso gratis de diseño de paginas web es para quien quiere aprender HTML, saber modificar alguna plantilla html o instalar WordPress o Joomla no te hace un experto ó master en diseño web, para ser un experto debes primero conocer el código HTML y CSS, y es eso lo que vas a aprender con estos tutoriales de diseño web.



Lista de los video tutoriales de diseño web

Estructura Básica de un documento HTML lo básico es conocer la estructura de un documento HTML y saber lo que significan las etiquetas html y la sintaxis básica para crear tu primera página web desde el bloc de notas.

Estructura Basica de un documento HTML

Para que un documento sea considerado HTML hay que definirselo al Navegador, siendo la estructura la siguiente:

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

La estructura nunca cambia, siempre es la misma, asi que todo el contenido de la pagina web va dentro de la etiqueta BODY:

<body> –> Inicio de etiqueta

AQUI ESCRIBES EL CONTENIDO DE LA PAGINA WEB

</body> –> fin de etiqueta
Sintaxis de una Etiqueta

Las etiquetas en HTML definen el cambio o formato a aplicar a una seleccion, para ello cada etiqueta tiene una funcion especifica, pero la sintaxis es siempre la misma “<” simbolo de menor que, indica el inicio de la definicion de una etiqueta, “>” simbolo mayor que, indica el final de una etiqueta, por ejemplo “<p>”, “<strong>”, “<a>”, “<blockquote>”, “<head>”.

Como vimos mas arriba, el contenido o la forma de seleccionar en HTML lo hacemos indicando manualmente el lugar de inicio y de fin de una etiqueta, de esta forma esa etiqueta afectará unicamente a ese texto o imagen.

Ejemplo:

<font color=”red”>Este texto es rojo</font>pero este no

Del ejemplo podemos ver como funcionan las etiquetas; FONT es la etiqueta porque se encuentra mas proxima a “<” el atributo es COLOR y el valor es RED, FONT tiene 3 atributos posibles “FACE”, “COLOR” y “SIZE”, Face para el tipo de letra, Color para los colores de letra y Size para el tamaño de letra, en otro post explicaremos con mas detenimiento como funcionan estos atributos, lo impotante en este momento es que entiendas la sintaxis de una etiqueta HTML.

link: http://www.youtube.com/watch?feature=player_embedded&v=o4OdLXWdX58

Mi primera página web

Ya llegamos a la leccion 2 del curso de diseño web, hoy veremos como hacer nuestra primera página web, a la cual le agregaremos instrucciones de cabecera, texto y color de fondo de pagina, asi mismo predeterminamos el color del texto de la pagina web a blanco.

En la practica he visto como la etiqueta <meta content=”description”> ha sido menospreciada por algunos SEO quienes aseguran que esta etiqueta ya no tiene peso para los buscadores, pero recuerda que no solamente Google existe como buscador. Hay muchos buscadores que utlizan aun las instrucciones de cabecera de una pagina web para mostrar en sus resultados de busqueda, y Google no es la excepcion, sino fijate que el All in One SEO Pack (plugin SEO para WordPress) utiliza el contenido de tu articulo para generar las palabras clave y la descripcion de la pagina.

En el video además vemos como agregar texto a la pagina web, el texto fue generado automaticamente de lipsum.com y ese texto cuando cambiamos el color de fondo de la pagina de blanco (por defecto) a un tono azul, lo predeterminamos a blanco (por defecto negro).

En HTML los párrafos (<p> generan una separacion doble entre cada ENTER que damos con el teclado, para que el texto pase a la linea inmediata inferior debemos presionar SHIFT+ENTER de esta forma insertamos un salto de linea (<br />


link: http://www.youtube.com/watch?feature=player_embedded&v=YmRrGiNypWU#!

Aplicar formato a texto en HTML
En la continuacion del curso de paginas web, veremos com oaplicar formato al texto, desde el tipo de letra hasta la cursiva.

Recuerda que estamos en la fase del HTML, apoyándonos de Dreamweaver para la selección de codigos, pero en fin, trabajando en el modo codigo.
En HTML el color, tipo de letra y tamaño de letra son atributos exclusivos de la etiqueta FONT. Para hacer una pagina web es necesario comprender el codigo nativo de ellas (HTML), cuando termines el curso podrás adentrarte en el código y realizar reparaciones a archivos en JavaScripts descargados de internet, o las mismas plantillas de paginas web.

link: http://www.youtube.com/watch?feature=player_embedded&v=mzYZMebgDq4

Curso pagina web: como crear vinculos
en este tutorial de diseño web aprenderás a crear vínculos (links) entre páginas de tu mismo sitio o vínculos hacia otros sitios en Internet.

En este video, parte del curso de pagina web, aprenderemos como crear vinculos a paginas web, correos electronicos y lugares especificos dentro de una de las paginas de nuestro sitio.
Para la elaboracion del video me apoyé de lipsum.com para la generacion del texto, a fin de generar el suficiente para que la barra de desplazamiento se moviera verticalmente y poder explicar con claridad el funcionamiento de los vinculos a anclas dentro de nuestro sitio.


link: http://www.youtube.com/watch?v=eknEOlJyqcE&feature=player_embedded

[b]Como insertar imagenes en HTML[/b]

En esta leccion veremos como insertar imagenes en HTML, ademas como hacer una imagen de sustitucion, crear vinculo a esa imagen y crear un fondo en degradado en Photoshop para pasarlo como imagen de fondo de nuestra pagina web.
Las imagenes de sustitucion las hacemos con la ayuda de Dreamweaver puesto que codificar todo el procedimiento es un tanto engorroso y Dreamweaver codifica todo por nosotros, la idea de una imagen de sustitución es que muestre una imagen distinta cuando se pase el Mouse encima de ella, muy util cuando pensamos en un Menu de Navegacion que cambie los colores.

Por su parte utilizamos imagenes degradado para aplicar una apariencia distinta al blanco de fondo en una pagina web, los navegadores reproducen infinitamente una imagen para que abarque el total del ancho y alto de la pantalla del monitor que visualiza la pagina, si utilizamos esta propiedad a nuestro favor podremos tener una imagen de menos de 1Kb de peso para que ocupe toda la pantalla sin que esto interfiera en la carga total del sitio.

Mira el video:

link: http://www.youtube.com/watch?v=f-3o2EUpncI&feature=player_embedded

Listas ordenadas y Listas desordenadas
En esta leccion del curso gratis de paginas web, veremos como insertar listas ordenadas y listas desordenadas, primero en Dreamweaver y luego en HTML
Las listas desordenadas son las que conocemos en Microsoft Word como Viñetas y las listas ordenadas son las que conocemos como Numeracion.


link: http://www.youtube.com/watch?feature=player_embedded&v=w-zJXrQP-LM

0 comentarios - Curso gratis de diseño de páginas web

Los comentarios se encuentran cerrados