Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Curso de HTML y Css

    Încărcat de

    Rayan
    17 vizualizări6 pagini
    HTML

    Titlu original

    Curso de Html y Css

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    17 vizualizări6 pagini

    Curso de HTML y Css

    Încărcat de

    Rayan
    HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 6

    Caripito/21/7/2017

    Curso Profecional de Html y CSS

    Primera Clase

    Cmo funciona la web y como interviene Html en el proceso?

    Prime que se debe saber es que la web se basa en consultas que hace un cliente normalmente
    de un navegador web a un servidor a travs de un protocolo de comunicacin llamado http: o
    protocolo de transferencia de hipertexto todo inicia en los navegadores, y siempre para
    acceder a un sitio web vamos a escribir en la barra de direcciones, una direccin web en esta
    ocasin se ha elegido la url: de la W3C,que es una comunidad internacional cuya misin es
    guiar a la web a su mximo potencial es as que tenemos la siguiente url
    :http://www.w3.org:80/standards.

    Esta direccin conocida como url: est dividida en algunos segmentos, que dan informacin he
    ubicacin del recurso que estamos consultando entre sus partes tenemos el protocolo de
    transporte, http:// el nombre del hots al que se le ara la peticin= www.w3.org el puerto por
    defecto 80 por ser un contenido web :80 y por ltimo el recurso que se est consultando que
    esta ante puesto por una barra o slahs /standards de estos segmentos no escribimos no
    escribimos el protocolo http: ni el puerto 80: porque por lo general estos dos valores estn
    sobre entendidos .

    En una comunicacin web luego con la url el navegador hace una solicitud y es envida al
    servidor, es as como este servidor toma la solitud y la procesa y es usado un lenguaje de
    programacin como por ejmplo: Phaythone, Ruby,Php y java entre otros adems, en el
    trascurso del procesamiento puede darse el caso en el que se consulte una base de datos,
    como por mysql,posdreql,oracle,microsftsql server.

    Una vez que el servidor tiene todo listo por lo general en el formato html que no es ms que
    texto plano, luego que el navegador recibe el html internamente genera una representacin
    en forma de rbol de cada elemento que se encuentra en el documento html, y
    posteriormente muestra al cliente el contenido de la pgina en el navegador del cliente si bien
    en el contenido de la pgina se mostr solo texto tambin podremos.
    Flujo de Trabajo al momento de desarrollar un sitio web?

    1) Tenemos la necesidad, puede ser de la empresa en la que trabajemos de un


    cliente o de nosotros mismos si es que estamos creando un proyecto web en cual
    quiera de estos contextos tenemos la necesidad.
    2) La experiencia que queremos ofrecerle a nuestro usuario cuando ingrese a nuestra
    web, para esto existen unas series de pasos y experiencias que no se
    implementara en este curso de Html, Css.
    3) Luego que ya tengamos la experiencia que deseamos entregar la plasmaremos en
    este proyecto este documento puede ser un papel un programa de software o
    cualquier otro ya teniendo lo que vamos a implementar comenzamos a codiar y
    aqu tenemos que diferenciar dos tipos de desarrollo uno es el front End que es la
    parte visual que observa nuestro usuario y esto se logra con Html,Css, y Javascript
    y el otro es el Back- End que utiliza los lenguajes que trabajan desde el lado del
    servidor Tenemos Phaythone,Ruby,Php ente otros.

    Estos son todos los pasos que se van a cubrir los dems temas se cubrirn en otros cursos.

    Sintaxis?

    La sintaxis es la forma visible de un lenguaje por ello antes de crear nuestro primer
    documento Html, tenemos que tener claro lo siguiente <!DOCTYPE html> , el Doctype o
    declaracin del tipo de documento, es una instruccin especial que va al inicio del documento
    Html, y que permite al navegador entender que versin de Html, estamos utilizando esta
    informacin determinara la manera en la que el navegador procesara el documento un
    Doctype , distinto podra implicar hasta una visualizacin, del sitio web en la que trabajara el
    navegador en el caso de Html5,que es la versin en la cual trabajaremos el Doctype, ha
    emplear es el siguente <!DOCTYPE html> el cual es ms simple de recordar que los diferentes
    Doctype, de los diferentes, Doctype, de las diferentes versiones de Html, <!DOCTYPE HTML
    PUBLIC-//W3C//DTD HTML 4.01//EN http://www.w3.or g/TR/html4/strict.dtd>

    <!DOCTYPE HTML PUBLIC-W3C//DTD HTML 4.01


    Frameset//ENhttp://www.w3.org/TR/html4/frameset.dtd>)

    <!DOCTYPE HTML PUBLIC-//W3C//DTDHTML4.O1


    Trasitional//ENhttp://www.w3.org/TR/html4/loose.dtd>

    Veamos otro concepto importante en Html, que son los elementos

    Los elementos en nos ayudan ha estructurar y dar significado a las partes de un documento
    Html, con ellos podemos crear encabezados, prrafos, textos con nfasis, subrayados o
    cursivas, listas de elementos, tabla, imgenes, formularios y ms para defin y conocer la
    estructura de los elementos debemos revisar los conceptos de Contenido,Modelo del
    contenido,Texto del contenido,Etiqueta,Atributo veamos un ejemplo para ver estos conceptos
    <p id =prrafo>Contnido del elemento p</p>

    En relacin al contenido el contenido de un elemento pueden ser <p id =


    prrafo>Caracteres</p> <p>prrafo><!--Comentarios--</p>

    <p id= prrafo><stong>Elementos</strong></p> y otros elementos como pueden ver en los


    ejemplos

    El modelo del contenido define la estructura de un elemento si puede o no tener contenido


    as como los atributos que puede tener un elemento no puede contener atributos o
    contenidos que no formen parte de su modelo de contenido el contenido del texto es el valor
    del atributo id l descontem del elemento estere atributo id l se explorar ms a profundidad en
    el curso de javascript las etiquetas son utilizadas para delimitar el inicio y el fin de un elemento

    Por ello existen <p> etiquetas de inicio y etiquetas de </p>cierre las etiquetas de inicio
    consisten de las siguientes partes en el siguiente orden < corche angular menor que seguido de
    la letra (p) que es el nombre de la etiqueta del elemento en este caso la letra (p) que
    corresponde a un prrafo opcionalmente uno o ms atributos cada uno de los cuales puede
    ser precedido por uno o ms espacios en blanco en este caso el atributo (id ) con su respectivo
    valor por prrafo opcionalmente uno o ms espacios en blanco seguido de un corchete angular
    > mayor que las etiquetas de cierre consisten de las siguientes partes en el siguiente orden un
    corchete angular < menor que seguido de un slahs / seguido del nombre de la etiqueta del
    elemento, seguido opcionalmente de uno o ms espacios en blanco seguido de un corchete
    >angular mayor que cabe a mencionar que las etiquetas del Html no distingue maysculas de
    minsculas , es decir el tipo de letra no afecta el funcionamiento de una etiqueta en Html,
    como podemos observar en estos dos ejemplos correctamente escritos.

    <p id=prrafo>Elemento p</p>

    <P id=prrafo>Elemento p</P>

    Sin embargo en el desarrollo del curso es escribir en letras minsculas como preparacin para
    manejo de lenguajes que son ms restrictivos con el empleo de minsculas y Maysculas .

    Sobre los atributos de un elemento debes saber que siempre se expresan en la etiqueta de
    inicio y tienen un nombre y un valor veamos los siguientes ejemplos

    Atributo vaco en este caso se puede escribir el nombre del atributo <p id>Elemento p</p> o
    el nombre del atributo seguido del signo igual que no contienen ningn valor <p
    id=>Elemento p</p> atributos sin comillas podemos escribir el valor del atributo sin utilizar
    comillas siempre y cuando no existan espacios en blanco tambin podemos escribir el valor
    del atributo con comillas simples <p id= prrafo>Elemento p </p> as como con comillas,
    dobles as mismo, comentarles, que existen dos tipos de elementos los elementos vaco y los
    elementos no vacos, un elemento vaco es aquel cuyo modelo de contenido no le permite
    tener ningn contenido ejemplo: (void element) <br> Sin embrago puede tener atributo, es
    por ello que esta etiqueta solo tiene un elemento que es la etiqueta de inicio como ejemplo
    tenemos a los siguientes elementos, el elemento <br> o salto de lnea el elemento img src
    =Ubicacin de la imagen > que posee el atributo src para especificar la ubicacin de la
    imagen que se mostrara gracias a este elemento en ambos casos estos elementos son
    considerados elementos de cierre y son considerados elementos vacos, elemento no vaco
    (non-void element ) es aquel cuyo modelo de contenido tiene una etiqueta de inicio y una de
    cierre pudiendo no tener contenido como ejemplo tenemos a los siguientes elementos <p>
    Texto de elemento no vaco </p> no vaco y este elemento <span></span> a pesar de no
    haber escrito contenido dentro del ese elemento no vaco dado que contiene una etiqueta de
    inicio y una etiqueta de cierre algunas veces, es necesario escribir comentarios en el cdigo
    para facilitar la comprensin del mismo, sin que sea visible para los navegadores con Html, eso
    es posible los comentarios, constan de un delimitador <!--Este es un comentario--> seguido de
    texto ,y de un delimitador de cierre bueno amigos, espero que le haya gustado esta clase con
    estos conceptos, trabajaremos a lo largo de nuestro ejercicios y del proyecto y espero que les
    haya servido de ayuda seguimos en la prxima clase.

    Hola nuevamente, en esta clase vamos hablar sobre los elementos que nos permiten agregar a
    nuestra pgina web, textos como encabezados y prrafos, primero debemos saber que los
    elementos, de frase aade informacin estructural y semntica al texto y se comportan como
    elementos, en lnea dentro de estos elementos, tenemos a el elemento, EM y al elemento
    strong, que aade un nfasis ms fuerte a nivel de representacin EM ara que el texto, se vea
    en cursiva y strong, ara que el texto se vea en negrita el mismo efecto que generara en el
    navegador el emplear el elemento (I) o el elemento (B)efectivamente solo que estos dos,
    ltimos elementos no brindan nfasis al texto, en nuestro caso procuraremos, no utilizar los
    elementos (B) e (I) para dar estilos al texto, de ser necesario utilizaremos las propiedades de
    css, que adjunta un artculo de la W3C, que podra ayudarte a decidir si utilizar o no estos
    elementos, tenemos tambin los elementos de encabezado, que son <h1>En Cabezado</h1>
    <h2> En Cabezado</h2> <h3> En Cabezado</h3> <h4> En Cabezado</h4> <h5> En
    Cabezado</h5> <h6> En Cabezado</h6>estos nos ayudan ha describir brevemente el tema de
    las secciones que presentan siendo h1 el ms importante y h6 el menos importante
    observemos en el navegador la etiqueta de encabezado.

    Si por el ejemplo: cualquiera de las h no presenta el tamao adecuado, ni el efecto que deseas,
    utiliza la propiedad css ,font-size, para modificar su tamao, con esto quiero decir que el
    objetivo, del elemento encabezado no es brindar un tamao determinado al texto si no
    resaltar su importancia ahora hablemos sobre el elemento <p> este prrafo representa un
    prrafo de texto sobre el navegador como podemos observar en este ejemplo mostrare dos
    prrafos, con sus respectivos elementos, p observamos que se despliegan uno de bajo del otro
    cabe a mencionar que un elemento p , no puede contener otro elemento de bloque dentro de
    el

    <body>

    <p> Hola a todos!</p>

    <p>Curso de Html y Css en Devcode.la.</p>

    </body>
    Estructura Bsica

    Ahora empezaremos con el documento de inicio con nopad++ y vamos a desarrolla una pagina
    web de manuales, as que hagamos un poco de cdigo.

    Lo primero que se muestra es el <!DOCTYPE html> esto con la finalidad de que la versin html,
    del documento sea reconocida por los navegadores en este caso por defecto nos arroja el
    Doctype de html5, que es la versin con la cual trabajaremos adems debe considerar que es
    indistinto si escribes esta declaracin con maysculas o minsculas o incluso ambas dado que
    no afectara el resultado despus del Doctype, tenemos , el elemento<html lang="es"> con su
    etiqueta de inicio y eteiqueta de cierre correspondiente este elemento es considerado como
    el elemento raz dado que contendr a todos los elementos se le agregara el atributo lang =
    es para definir el idioma del sitio en este caso espaol, dentro del elemento html, tenemos
    el elemento <head> y el elemento <body> el elemento head, contiene la informacin del
    documento que generalmente no es mostrada en el navegador excepto por el elemento <title>
    cuyo contenido se muestra en la pantalla del navegador dentro de este escribiremos mi
    primera pagina y el elemento body contiene los elementos que dan forma al documento aqu
    escribiremos Hola mundo, dentro de un elemento <p> para representar un prrafo

    Con esto se declara la codificacin de nuestro documento y dado que <meta charset =utf-8>
    nos permite representar una amplia variacin de idiomas entre ellos el Espaol, luego d
    guardar y refrescar nuestro navegador vemos que el ttulo es mostrado de manera correcta en
    la pestaa del navegador , aqu como debera quedarles y guaramos recuerden que alguardar
    deben colocar al documento punto html para que el navegador lo reconozca .

    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="utf-8">

    <title>Mi pagina web </title>

    </head>

    <body>

    <p> Hoola Mundo</p>

    </body>

    <html>

    En esta parte hablaremos sobre los elementos estructurales, que nos van a permitir agrupar y
    a ordenar el contenido de nuestra pagina web, obsrvemos primero como se trabaja en html4,
    encontramos dos elementos genricos, que son elemento genricos <div> y el elemento
    <span> el elemento div, es un contenedor para agrupar secciones de contenido en bloque y el
    elemento span, es un contenedor para agrupar secciones de contenido en lnea, con los dems
    elementos veamos un ejemplo para entender mejor

    S-ar putea să vă placă și