Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Despre Web, HTML Si Css

    Încărcat de

    pgmforever
    15 vizualizări6 pagini
    O scurta introducere in web development pe partea de front-end (HTML(5)/CSS(3))

    Titlu original

    Despre web, html si 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
    O scurta introducere in web development pe partea de front-end (HTML(5)/CSS(3))

    Drepturi de autor:

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

    Despre Web, HTML Si Css

    Încărcat de

    pgmforever
    O scurta introducere in web development pe partea de front-end (HTML(5)/CSS(3))

    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

    About web, HTML and CSS

    WWW (World Wide Web) este un sistem de informatii (pagini web) ce pot fi accesate prin
    intermediul Internet-ului. Accesarea acestor pagini de catre utilizatori se face astfel:
    -

    Exista in PC-urile (da si smartphone-uri si whatever) utilizatorilor o aplicatie software


    (un program) numita browser care folosind conexiunea la Internet descarca continutul
    de text al unei anume pagini (identificata printr-un URL uniform resource locator) si
    il interpreteaza conform standardelor. Vom numi in continuare browser-ul drept
    client
    Locul de unde clientul descarca informatia il vom numi server

    Asadar clientul comunica cu server-ul printr-un protocol numit HTTP (Hypertext transfer
    protocol). Pentru ca informatia descarcata sa poata fi interpretata corect si afisata
    corespunzator de catre client, aceasta este scrisa pe server intr-un limbaj numit HTML
    (hypertext mark-up language). HTML este format din tag-uri. Asadar, urmeaza o prezentare a
    celor mai des intalnite tag-uri si o mica descriere.

    <html> - este tagul de inceput al unui document HTML. Toate celelate tag-uri trebuie
    sa se regaseasca intre <html> si </html>, adica inceputul respectiv finalul
    documentului.
    <body> - marcheaza corpul documentului. Majoritatea celorlalte tag-uri dintr-o pagina
    se regasesc intre <body> si </body>.

    De exemplu:
    <html>
    <body>
    </body>
    </html>
    Este un document perfect valid HTML. Se poate salva cu extensia .html si deschide cu
    browser-ul. Evident nu vedem nimic deoarece inca nu avem nicio informatie.
    -

    <head> - sectiunea de <head> cuprinde informatii despre document: titlu, ce script-uri


    sunt incluse, ce stilizari CSS (vom vedea mai tarziu), meta-informatii, etc
    <title> - tag pus in <head> pentru a seta titlul paginii
    <h1>, <h2> ... <h6> - tag-uri pentru heading-uri. Folosite pentru titluri, subtitluri, etc.
    <h1> este cel mai important si scade pana la <h6>. By default, acestea sunt stilizate de

    catre browser astfel incat textul afisat intre <h1>/<h1> sa fie scris mare, cu bold,
    spatiat, etc.
    <p> - tag pentru paragraf. In <p> scriem majoritatea textului cand avem de scris
    content efectiv (nu ma refer la un titlu sau un nume, ci propozitii sau fraze intregi). De
    exemplu, un articol de blog va fi compus din mai multe <p> </p>
    <span> - tag fara vreun efect vizual imediat, este folosit tot pentru text. Diferenta
    principala intre <p> si <span> este ca <span> este un element in-line, adica mai multe
    <span>-uri scrise unul dupa altul vor aparea in pagina pe acelasi rand, unul dupa altul,
    pe cand atunci cand deschidem un <p>, sarim pe randul urmator.

    Sa vedem ce putem face cu aceste prime tag-uri.


    <html
    </html>
    Am marcat inceputul si finalul unui document. Acum sa adaugam informatii despre
    document folosind <head>.
    <html>
    <head>
    <title>My First Page</title>
    </head>
    </html>
    Daca il salvam .html si il deschidem in browser vom observa titlul paginii.
    Acum, dupa ce am inchis </head>, adaugam <body> si scriem ceva in el.
    <html>
    <head>
    <title>My First Page</title>
    </head>
    <body>
    <h1>Welcome to my first page</h1>
    <h2>Title 1</h2>
    <p>Aici vom scrie mai multe paragrafe despre title1</p>
    <p>Dupa care trecem mai departe</p>
    <h2>Title 2</h2>

    <span>Aici</span><span>avem mai multe</span><span>span-uri unul dupa


    altul</span>
    </body>
    </html>
    Continuam cu tag-urile:
    -

    <div> - vine de la division. Este un tag folosit pentru a structura documentul, adica
    grupam alte tag-uri in div-uri astfel incat prin stilizare cu CSS sa putem obtine
    pozitionarea dorita, efecte vizuale, culoare, background, etc
    <a> - Anchor. Folosit pentru a crea hyperlink-uri, adica legaturi catre alte pagini.
    Adresa paginii catre care dorim sa cream legatura trebuie trecuta in atributul href al
    tag-ului <a>. Exemplu <a href=www.google.ro">Acesta este un link catre
    Google</a>. You can try it! Toate tag-urile suporta anumite atribute, vom mai discuta
    despre asta.
    <ul> - unordered list. Parinte al <tag>-ului <li>. Folosite pentru a enumera o lista
    neordonata. Exemplu:

    <p>Orarul de astazi este:</p>


    <ul>
    <li>Algebra</li>
    <li>Geometrie</li>
    <li>Analiza</li>
    </ul>
    -

    <form> - folosit pentru a descrie un formular. Suporta atributele action (desemneaza


    spre ce pagina sunt trimise datele din formular), method (valorile POST sau GET
    necesare preluarii datelor).
    <input> - element necesar in formulare pentru a crea campuri prin care utilizatorul
    poate introduce date. Suporta atributul type cu valorile text, password, checkbox,
    radio, file sau submit. Printr-un <input type=text> vom putea introduce text vizibil,
    dar printr-un <input type=password> textul va fi cu buline. <input type=submit>
    este folosit pentru a trimite formularul (gen buton de Do Action)
    <img> - sefl-explanatory. Suporta atributul src pentru a-i spune de unde sa ia
    imaginea, width/height pentru a specifica latimea/inaltimea in pixeli a imaginii si alt
    pentru a specifica un text pentru imagine (afisat in locul imaginii in cazul in care
    aceasta nu poate fi descarcata de la adresa indicata de atributul src)

    Exemplu: <img src=www.domeniu.ro/poze/dog.jpg


    alt=This is a CAINE!>

    width=500

    height=500

    Cam astea sunt cateva din cele mai importante tag-uri HTML. Odata cu noul standard al
    limbajului, anume HTML5 au fost introduse o serie noi de tag-uri precum <article>, <aside>,
    <section>, <footer>, <header>, <main>, etc dar acestea au mai mult o valoare semantica decat
    sintactica, in sensul ca putem folosi <div>-uri pentru oricare dar folosind efectiv aceste tag-uri
    din HTML5 codul nostru capata un inteles semantic mai bun, lucru ce ajuta atat la readability
    cat si la indexarea cat mai buna a paginii de catre motoarele de cautare.
    Ca general guidelines, e bine sa mai aveti in vedere urmatoarele:
    -

    Exista elemente care by default sunt inline (nu li se pot specifica


    width/height/margini/padding), adica apar pe aceeasi linie cand sunt asezate unul dupa
    celalalt (span-ul, a-ul, li-ul sunt elemente inline), si elemente care by default sunt
    block ca de exemplu div-ul. Elementele block au width/height/margins/padding si
    atunci cand le scriem unul dupa celalalt, vor aparea unul sub altul fara alte stilizari din
    CSS. Astea fiind spuse, desi din CSS putem schimba behaviour-ul default, este bine sa
    folosim ceea ce ne trebuie, cand ne trebuie. Daca eu vreau sa scriu 5 cuvinte pe o linie
    spatiate la 10 pixeli, voi folosi <span> , nu are niciun rost sa folosesc <div>-uri si sa le
    schimb display-ul pentru a fi inline.
    Sunt elemente inauntrul carora este recomandat sa nu avem decat text. De exemplu
    <a>. Nu este buna practica sa avem gen <a href=#><div></div></a>. Nu este nici
    logic in primul rand ca un element block sa se regaseasca intr-unul inline.
    Nu faceti abuz de elemente. Nu utiliza 5 div-uri unul intr-altul doar pentru a face o
    stilizare mai usoara. Sau nu folosi un div doar pentru ca nu stii ce altceva sa folosesti.
    O lista completa de tag-uri HTML puteti gasi pe w3schools.com. Cautati cu incredere,
    ati fi surprinsi.
    Este bine sa incercam intotdeauna sa scriem cod HTML cat mai semantic (am amintit
    motivele mai sus cand discutam de HTML5). Pare de exemplu foarte logic sa avem in
    structura unui site body, dupa care un div pentru antet, unul pentru content (inauntrul
    caruia putem avea altele), unul pentru sidebar si unul pentru footer. Folosind clase/iduri adecvate (vezi CSS) putem stiliza usor si pozitiona cum ne dorim.

    First task:
    Creati un document HTML in care sa specificati un titlu al documetului, sa aveti un titlu al
    continutului paginii (a se folosi headingul <h1>) si sa folositi toate celelalte tag-uri descrise
    cu exceptia <form> si <input> despre care trebuie discutat mai mult.
    CSS
    Abreviere de la Cascading Style Sheets. Cu css ne putem stiliza documentele HTML astfel
    incat pagina pe care o cream sa apara vizual precum ne dorim. Folosind CSS putem modifica
    sau crea font-uri, culori, background-uri, spatiere, pozitionare, marime (width/height),
    margini, padding, borduri, efecte de mouse-over, efecte de tranzitie/animatii, etc. Codul de
    CSS se trece fie in atributul style al fiecarui element (exemplu: <div style=width: 300px;
    height: 300px; background-color: blue;>This is a div</div>), fie in <head> in tagul <style>,
    fie intr-un document separat salvat cu extensia .css si inclus in fisierul html prin tagul <link

    ref=stylesheet src=fisier.css> trecut tot in <head>. De regula vom evita in-line styling-ul
    adica folosind atributul style al elementelor, si astfel codul CSS va fi separat intotdeauna.
    Sintaxa CSS este urmatoarea:
    Selector1, selector2, selector3
    {
    Proprietate1: valoare1;
    Proprietate2: valoare2;
    }
    Prin selectori ne referim la taguri HTML sau id-uri sau clase. Id-urile si clasele sunt atribute
    ce pot fi adaugate elementelor HTML pentru a face stilizarea mai usoara. O clasa o pot avea
    un nr. nelimitat de elemente, pe cand un id este unic.
    Exemplu:
    <div class=red_background>
    <div id=blue_bg>This is blue</div>
    </div>
    <div class=red_background>
    This is red
    </div>
    In CSS pentru selectarea unei clase folosim .clasa iar pt id #id
    Cod CSS aferent codului HTML de mai sus:
    .red_background
    {
    Background-color: red;
    Width: 300px;
    Height: 300px;
    }
    #blue_bg
    {

    Background-color: red;
    Width: 100px;
    Height: 100px;
    }
    Alte proprietati CSS:
    -

    Color: red; specifica culoarea textului


    Font-family: Arial; - specifica fontul folosit pt text
    Font-size: 20px; - dimensiunea textului
    Font-weight: bold modificator bold
    Opacity: de la 0, 0.1, 0.2 pana la 1 semnifica opacitatea (transparenta) unui element

    Putem aplica anumite efecte CSS doar atunci cand trecem cu mouse-ul peste elemente. Spre
    exemplu daca avem un div de 300x300 cu background-color: black; putem scrie in CSS

    #idul_divului:hover
    {
    Background-color: red;
    }
    Si vom vedea ca atunci cand facem hover cu mouse-ul peste div, bg-ul devine rosu, iar atunci
    cand iesim cu mouse-ul din el va reveni la normal, black.
    La linkuri de exemplu, putem stiliza <a> normal, <a>:hover si <a>:active, adica momentul in
    care apesi pe link dar pana sa ii dai drumul la click.
    Folosind CSS3, ultimul standard al Cascading Style Sheets aparut, putem implemente si
    efecte mai impresionante, de exemplu animatii, tranzitii, umbre, fade-uri (marire/micsorare
    progresiva a opacitatii), etc. Va invit pe voi sa descoperiti proprietatile din CSS3 intrucat si eu
    inca invat CSS3.
    Resurse foarte bune pentru incepatori: w3schools.com, htmldog.com, codeacademy.com

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