Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lesson 1filename: Lesson1 PDF

    Încărcat de

    Dragos Cazaceanu
    13 vizualizări41 pagini
    Filename: lesson1.pdf

    Titlu original

    Lesson 1Filename: lesson1.pdf

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Filename: lesson1.pdf

    Drepturi de autor:

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

    Lesson 1filename: Lesson1 PDF

    Încărcat de

    Dragos Cazaceanu
    Filename: lesson1.pdf

    Drepturi de autor:

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

    <html>

    Web Design @ BIT Academy

    05 Octombrie
    23 Noiembrie
    8 edine x 3h 30m
    duminica, de la 09:00

    <html>

    Lecii

    <h1>LECIA 1</h1>
    <ul>

    <li>Internet</li>
    <li>Word Wide Web</li>
    <li>Browsere Web</li>
    <li>Tehnologii Web</li>
    <li>HTML</li>
    <li>Mediul de lucru</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 2</h1>
    <ul>

    <li>Tag-uri HTML</li>
    <li>Legturi</li>
    <li>Ci relative vs. absolute</li>
    <li>Imagini</li>
    <li>Liste</li>
    <li>Preformatare</li>
    <li>Tabele</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 3</h1>
    <ul>

    <li>Formulare</li>
    <li>Cadre</li>
    <li>Meta</li>
    <li>Head</li>
    <li>Entitati</li>
    <li>Mailto</li>
    <li>Standarde</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 4</h1>
    <ul>

    <li>CSS</li>
    <li>Culori</li>
    <li>Cascadare</li>
    <li>Sintaxa</li>
    <li>Selectorul class</li>
    <li>Selectorul ID</li>
    <li>Comentarii</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 5</h1>
    <ul>

    <li>Background</li>
    <li>Text</li>
    <li>Font</li>
    <li>Chenare</li>
    <li>Unitati</li>
    <li>Border</li>
    <li>Margin</li>
    <li>Padding</li>
    <li>Pozitionare</li>
    <li>Redimensionare</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 6</h1>
    <ul>

    <li>Liste</li>
    <li>Tabele</li>
    <li>Dimensiuni</li>
    <li>Clasificare</li>
    <li>Pseudo-clase</li>
    <li>Pseudo-elemente</li>
    <li>Exemple avansate</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 7</h1>
    <ul>

    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>DocType</li>
    <li>Compatibilitate browsere</li>
    </ul>

    <html>

    Lecii

    <h1>LECIA 8</h1>
    <ul>

    <li>Realizarea unui site de prezentare</li>


    <li>Recomandari</li>
    <li>Librrii externe</li>
    </ul>

    <html>
    Internet
    WWW
    Browsere
    Tehnologii
    HTML
    Mediul de lucru

    Lecia 1

    <html>

    Internet

    reea de calculatoare

    ofer servicii (HTTP, FTP, LDAP, SSL, POP3 etc)


    gzduire web

    web 2.0

    <html>

    WWW

    World Wide Web / W3

    colecie pagini web


    accesat prin internet

    necesit browser web


    Tim Berns-Lee @ 1989

    prefixul www.
    W3C

    <html>

    Browsere

    aplicaie software

    URL / URI
    WorldWideWeb (Nexus)

    cache
    cookies

    proxy
    corecteaz erorile

    <html>

    Browsere / URL

    Protocol

    Cale local

    https://www.bitacad.net/img /logo.png

    Domeniu (Adres)

    <html>

    Browsere / WorldWideWeb

    http://info.cern.ch/NextBrowser.html

    <html>
    1

    Tehnologii

    Vizitare site
    2

    Serverul preia informaia trimis


    3

    Soft-ul de procesare de pe server proceseaz informaia


    <?php $x = $y; print 123; . ?>
    System.out.println();
    SELECT * FROM users WHERE user_id = 7
    <html>
    <head> </head><body> </body>
    </html>
    4

    Pagina web este trimis ctre vizitator

    <html>

    My

    Tehnologii

    Oracle

    <html>

    Quiz

    1. Numii 3 servicii accesibile din internet.


    2. Adevrat sau fals: JavaScript este o tehnologie server
    side.
    3. Adevrat sau fals: folosind HTML se pot interoga baze
    de date.
    4. Numii dou tehnologii server side.
    5. Adevrat sau fals: o pagin web poate fi afiat pe un
    calculator neconectat la internet.

    <html>

    HTML

    Hyper Text Markup Language

    Independent de platform
    Legturi hipertext
    Tim Berners-Lee @ CERN, 1989
    .html, .htm
    editor text

    <html>
    WYSIWYG

    HTML

    vs
    <HTML>

    <html>

    HTML / Exemplu pagin

    <html>
    <head>
    <title>Lecia 1 Web Design @ BIT Academy</title>

    </head>
    <body>
    Primul meu document <b><u>HTML</u></b>!
    </body>
    </html>

    <html>
    1986

    HTML
    1996

    SGML

    XML

    Standard Generalized
    Markup Language

    Extensible
    Markup Language

    1989

    2000

    HTML

    XHTML

    HyperText
    Markup Language

    Extensible HyperText
    Markup Language

    <html>

    HTML

    SGML

    HTML

    <!ELEMENT chapter - - (title, section+)>


    <!ELEMENT title o o (#PCDATA)>
    <!ELEMENT section - - (title, subsection+)>

    <html>
    <body>
    <meta charset=utf-8>
    <img src=logo.png>
    <p>HTML rocks!</p>
    </body>
    </html>

    XML
    <curs>
    <denumire>Web Design</denumire>
    <continut>
    <materie>HTML</materie>
    <materie>CSS</materie>
    <materie>JavaScript</materie>
    </continut>
    </curs>

    XHTML
    <html>
    <body>
    <meta charset=utf-8 />
    <img src=logo.png />
    <p>HTML rocks!</p>
    </body>
    </html>

    <html>

    HTML

    HTML

    XML

    Set fix de tag-uri

    Tag-uri personalizate

    Proiectat pentru afiarea datelor ntr-o form


    uman

    Descrie datele pentru procesarea de ctre


    calculator

    Browserele tolereaz erorile HTML

    Documentele XML trebuie s fie bine formate


    (corecte dpdv sintactic)

    Toate browserele afieaz HTML

    Browserele moderne afieaz i XML dar nu


    exist un format standard

    <html>

    HTML

    Versiune

    An

    HTML

    1991

    HTML+

    1993

    HTML 2.0

    1995

    HTML 3.2

    1997

    HTML 4.01

    1999

    XHTML

    2000

    HTML5

    2012

    <html>

    HTML / Tag-uri

    <numetag>continut</numetag>
    comand ctre browser
    sunt n pereche
    ncadrate ntre < i >
    tag de deschidere, tag de nchidere
    tag de nchidere: < + / + numetag + >

    <html>

    HTML / Tag-uri

    HTML permite tag-uri nenchise


    alternativ: <tag />
    litere mici
    Recomandat
    <b>TEXT BOLD-uit</b>

    Exemplu
    <br />

    Nerecomandat
    <B>TEXT BOLD-uit</B>

    <html>

    HTML / Atribute

    informaii suplimentare
    pereche (nume, valoare)

    Exemplu
    <table border=0>

    sintax: nume=valoare
    doar n tag-ul de start
    Corect

    Incorect

    <font color=red>text rou</b>

    <font>text rou</font color=red>

    <html>

    HTML / Atribute

    numele doar cu litere mici


    valorile delimitate cu sau
    unul sau mai multe
    <tag atribut=valoare>
    <tag atribut=valoare>
    <tag atribut=valoare altatribut=alt valoare>

    <html>

    HTML / Elemente

    tag de nceput, coninut, tag de sfrit


    <title>Curs Web Design</title>

    ELEMENT

    <html>

    HTML

    Bine format Well Formed


    Corect dpdv sintactic
    Strict un singur element rdcin
    Elemente sunt ncuibate (nested) corect
    Valorile atributelor sunt ntre ghilimele

    <html>

    HTML / Erori

    nu sunt semnalate
    ignorate

    <html>

    HTML / Structur

    3 elemente obligatorii:
    HTML
    HEAD
    BODY

    <html>

    HTML / Structur

    Structur arborescent / ierarhic:

    <html>
    HTML
    <html>

    BODY
    <body>

    HEAD
    <head>

    HTML / Principalele tag-uri


    TITLE
    <title>

    Blocuri de titlu
    <h1>

    <h4>

    <h2>

    <h5>

    <h3>

    <h6>

    <html>

    HTML / Principalele tag-uri

    Blocuri paragraf

    Preformatare

    <p>

    CENTER
    <center>

    ntrerupere de linie
    <br>

    Linie orizontal
    <hr>

    <pre>

    Formatare
    <b>

    <strong>

    <u>

    <em>

    <small>

    <i>

    <sub>

    <sup>

    <big>

    <html>

    Quiz

    1. De la ce provine acronimul HTML? Dar XML? Dar


    XHTML?
    2. Adevrat sau fals: XHTML este un anume tip de XML.
    3. Adevrat sau fals: SGML este un limbaj de
    programare.
    4. Care este cea mai recent versiune de HTML?
    5. Numii dou diferene ntre HTML i XML.

    <html>

    Quiz

    6. Care sunt cele 3 tag-uri obligatorii?


    7. Adevrat sau fals: structura HTML este de tip graf.

    8. Adevrat sau fals: dac o pagin HTML conine erori


    atunci nu va fi afiat n browser.
    9. Numii caracteristicile unui document bine format.
    10. Adevrat sau fals: tag-ul de ncheiere este obligatoriu
    ntotdeauna.

    <html>

    Quiz

    11. Adevrat sau fals: n acelai document HTML nu pot


    exista dou tag-uri cu acelai nume.
    12. Adevrat sau fals: n cadrul aceluiai tag nu pot exista
    dou atribute cu acelai nume.
    13. Adevrat sau fals: n cadrul aceluiai tag nu pot exista
    dou atribute cu aceeai valoare.
    14. Care sunt caracterele prin care se delimiteaz valorile
    atributelor?

    <html>

    Exerciii

    1. Creai o pagin web goal care s conin doar cele


    3 tag-uri obligatorii. Salvai fiierul i apoi deschidei-l
    n browser.
    2. Modificai pagina precedent astfel nct n pagin s
    fie afiat numele vostru.
    3. Modificai pagina precedent astfel nct titlul paginii
    s fie Prima mea pagin web.

    <html>

    Exerciii

    4. Modificai pagina precedent astfel nct sub numele


    vostru s apar o linie orizontal iar sub aceasta s
    apar textul de mai jos formatat n acelai mod:
    Acesta este un text dintr-o pagin HTML.

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