HACER SITIO WEB DESDE CERO

Antes que nada quiero pedirte un favor muy grande, si vas a estudiar este curso no se te ocurra decir NUNCA "yo programo en html" no solo dejarías de ser mi amigo sino negaría por completo que tu estudias mis cursos. Te explicaré sencillo, HTML NO ES LENGUAJE DE PROGRAMACION.
¿QUE CARAJOS ES HTML?

"HTML es la sigla de HiperText Markup Language (Lenguaje de Marcación de Hipertexto) es un lenguaje es se utiliza comúnmente para establecer la estructura y contenido de un sitio web, tanto de texto, objetos e imágenes. Los archivos desarrollados en HTML usan la extensión .htm o .html".
 Este concepto lo tomé de la red. miramos la palabra estructura, para no enredarte con tantas explicaciones, digamosle así :es el que le da ello a la pagina junto con los css,
parece que te dejé pensativo con esa otra palabrita. miramos lo que dice wikipedia de que son los css "Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión enXHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores."
 Te voy a decir algo si te enredas con estas dos palabritas, lo explicaré mas detallado el html y los css forman "el esqueleto" donde se desarrolla la web, 
y como ami no me gusta tanto rodeo ni me gusta tantas definiciones que para ello google es demasiado grande vamos a entrar en materia:
necesitamos un editor de texto en mi caso sublime text lo puedes descargar aquí puedes escoger el sistema operativo que tienes instalado.
ESTRUCTURA BASICA DE UN DOCUMENTO HTML
<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>
abrimos nuestro sublime text y copiamos esa locura jejeje que esta ahi.
yo me me la aprendí de esta forma cabeza tronco y extremidades la clase de anatomía, esto esta encerrado en <html></html> la cabeza es el head, donde esta el titulo o title y el body es el cuerpo donde desarrollaremos la web....

luego guardamos donde dice file o con control s save y lo guardamos como index.html..... ahora te preguntas que es eso de index?  le puse ese nombre porque el servidor donde alojaremos la pagina buscará una pagina inicial y buscará el index.... Creo que  entendiste eso hasta alli....
PONIENDO FONDO A MI PAGINA
Voy a enseñar primero a ponerle fondo a la pagina, en este curso ire enseñando los css (hojas de estilo) y a la vez las diversas etiquetas de Html, para ello crearemos un sitio web desde cero. tambien enseñaré como ponerle animaciones en html5 y nos introduciremos en el mundo d ela programación apoyandonos con el curso de javascript , puedes verlo aquí no te preocupes iremos paso a paso y también respaldaré con videos en mi canal de you tube... Ahora bien hacemos una carpeta y dentro creamos tres carpeta como detalla la imagen
empezaremos diferentes tipos de ejemplos de paginas web, por ejemplo esta pagina web tendra un diseño y acabado prodesional pero no será responsive otra palabrita que llega a nuestro glosario.
web responsive dice wikipedia 

    Resultado de imagen para que es una web responsive
    El diseño web adaptable, adaptativo o responsivo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.
    tambien vamos a enteder que es una web dinámica 
    veamos los que nos dice aula click  QUE ES UNA WEB DINÁMICA   na página dinámica es una página que permite al usuario interactuar con ella, y que contiene efectos especiales.
    Para crear una página de este tipo no basta con programar en HTML, ya que este lenguaje es muy limitado. Es necesario combinar HTML con otros lenguajes, como JavaScript, VBScript, Java, ASP, PHP, etc.
    También puede hacerse uso de capas, de animaciones Flash, de applets java y de hojas de estilo CSS.
    A la combinación de estos elementos se le conoce como DHTML (HTML dinámico).
    Existe una anécdota muy curiosa sobre DHTML :
    Una conocida marca, poseedora de un programa que permite "dar vida" a las páginas web, pidió explicaciones a un webmaster tras visitar su página web. Pensaron que el webmaster estaba utilizando su programa y habían comprobado que no figuraba como comprador en sus archivos.
    El webmaster respondió que no estaba utilizando el programa en cuestión, sino HTML dinámico, por lo que la empresa tuvo que disculparse por la acusación.
    Esto demuestra lo que se puede llegar a hacer con HTML dinámico.
 vamos a crear una web estática como ejemplo o web informativa y crearemos una animación html5 en el slider con el famoso edge animate y crear una web profesional.

empecemos con lo básico 

<html>
<head>
<title>inicio</title>
</head>
<body background="images/fondoweb.png">

</body>
</html>

con esto pondremos una imagen de fondo a la web esta imagen estará ubicada en la carpeta de images que habiamos creado, no te sorprendas, esta imagen quedara en fondo mosaico en algunos pc, para solucionar ello iremos poniendo los estilos y a modo de enseñanza empezaré explicando paso a  paso,
en mi pc se vería asi
la iamgen que use tiene por nombre fondoweb y es una imagen png , por eso dice fondoweb.png





1 comentarios: