Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lucrare de Laborator Nr.1docx

    Încărcat de

    Eugeniu Zamfirov
    67 vizualizări10 pagini

    Titlu original

    Lucrare-de-laborator-nr.1docx

    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

    Drepturi de autor:

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

    Lucrare de Laborator Nr.1docx

    Încărcat de

    Eugeniu Zamfirov

    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 10

    Ministerul Educaţiei, Culturii şi Cercetării

    al Republicii Moldova
    Universitatea Tehnică a Moldovei
    Facultatea Electronică şi Telecomunicaţii
    Departamentul Telecomunicaţii şi Sisteme Electronice

    Lucrarea de laborator Nr.1


    La disciplina
    “Aplicatii Software Specializate”
    Tema: Construirea paginii Web. HTML de bază. Atributele
    HTML. Inițiere în CSS.

    A efectuat: st.gr IMTC-181


    Zamfirov Eugeniu

    A verificat: l.univ. A.Lachi

    Chișinău 2021
    Obiective:

    - realizarea machetei (structurii) site-ului web, care ulterior va conține mai multe pagini relaționate
    între ele
    - realizarea site-ului web după macheta elaborată
    - crearea fișierelor aferente .html, care permit crearea paginilor web
    - crearea fișierului CSS de bază al site-ului web în care se va conține stilizarea conținutului afișat pe
    site
    - înserarea în fișierele HTML și CSS a comentariilor relevante conținutului
    - realizarea raportului pentru lucrarea de laborator
    Paşii de efectuare a lucrării:
    1) Pentru început, deschidem editorul nostru de cod, creăm un nou fişier pe care îl
    numim index.html, şi îl salvăm. Creăm un dosar, îl putem numi ,,oricum” şi salvăm
    fişierul nostru în acest dosar.
    2) În interiorul fişierului nostru index.html, vom adăuga structura documentului, inclusiv
    tipul documentului <!DOCTYPE html> şi elementele <html>, <head> şi <body>.
    3) În interiorul elementului <head>, adăugăm elementele <meta> şi <title>. Elementul
    <meta> trebuie să includă atributul charset şi valoarea lui potrivită, pe cînd elementul
    <title> ar trebui să conţină titlul paginii.
    4) În elementul <body>, adăugăm elementele <h1> şi <p>. Elementul <h1> ar trebui să
    includă antetul dorit. Elementul <p> va include un simplu paragraf .
    5) În cadrul folderului nostru „fet-utm”, creăm un nou folder numit „assets”. Aici vom
    stoca toate materialele pentru site-ul nostru web, cum ar fi foile noastre de stil,
    imaginile, videoclipurile și altele. Să mergem mai departe și să adăugăm un alt folder
    numit „stylesheets” în folderul „assets”.
    6) Folosind editorul nostru de cod, creăm un nou fișier numit main.css și îl salvăm în
    folderul „stylesheets” pe care tocmai l-am creat.
    7) Analizând fișierul nostru index.html dintr-un browser web, putem vedea că
    elementele <h1> și <p> au fiecare stiluri CSS implicite. Folosind resetarea lui Eric
    Meyer, putem reduce aceste stiluri, permițând fiecăruia să fie stilizate de la aceeași
    bază. Pentru a face acest lucru, accesați site-ul web al lui Eric, copiați resetarea
    acestuia și plasaţi-o în partea de sus a fișierului nostru main.css.
    8) Fișierul nostru main.css care începe să prindă formă, îl conectăm la fișierul
    index.html. Deschizând fișierul index.html în editorul de cod, să adăugăm elementul
    <link> în elementul <head>, imediat după elementul <title>.
    9) Deoarece vom face referire la o foaie de stil în elementul <link>, adăugăm atributul
    relației, rel, cu valoarea stylesheet.
    10) De asemenea, dorim să includem o referință de hyperlink, folosind atributul href, în
    fișierul nostru main.css.
    11) Folosind fișierul nostru index.html existent, adăugăm un element <header>.
    Elementul nostru <header> ar trebui să includă elementul existent <h1>; să adăugăm,
    de asemenea, un element <h3> ca linie pentru a sprijini elementul nostru <h1>.
    12) După elementul nostru <header>, să adăugăm un grup nou de conținut, folosind
    elementul <section>, care introduce departamentul nostru. Vom începe această
    secțiune cu un element nou <h2> și o vom încheia cu paragraful existent.
    13) În cele din urmă, adăugăm drepturile de autor în cadrul elementului <footer> de la
    sfârșitul paginii noastre. Pentru a face acest lucru, folosim elementul <small>, care
    reprezintă semantic comentariile laterale și literele mici, perfecte pentru drepturile
    noastre de autor.
    14) Pentru a naviga prin toate paginile, vom adăuga un meniu de navigare, folosind
    elementul <nav>, în elementul <header>.
    15) De asemenea, pentru comoditate, adăugăm același meniu de navigare din elementul
    <header> la elementul nostru <footer>.
    16) Nu putem uita să adăugăm link-uri de la toate secțiunile spre paginile pe care le
    descriu. În fiecare secțiune, înfășurăm atât elementele <h3> cât și <h5> într-un
    element ancor care face conexiune cu pagina corespunzătoare.
    17) Acum trebuie să creăm pagini noi.
    Rezultatul obţinut:

    PARTEA 1
    PARTEA 2

    Codul HTML:

    <!DOCTYPE html>

    <html lang="ro">

    <head>

    <meta charset="utf-8">

    <title>

    Livrare Flori Hancesti

    </title>

    <link rel="stylesheet" href="assets/stylesheet/main.css">

    </head>
    <body>

    <header>

    <h1>

    <a href="acasa.html">

    LIVRARE FLORI HANCESTI

    </a>

    </h1>

    <h3>Gestul conteaza</h3>

    <p> Aceasta pagina web a fost creata pentru satisfacerea nevoilor tuturor
    cumparatorilor. </p>

    </header>

    <section>

    <h2>Fa primul pas!</h2>

    <p>Uimestii pe cei dragi cu ceva frumos si original </p>

    <a href="contacte.html" target="contacte.html">Contacte</a>

    </section>

    <section>

    <section>

    <a href="buchete.html" target="buchete.html">

    <h5>Buchete</h5>

    <h3>Orice floare se poate transforma in buchet</h3>


    </a>

    <p>Alege un buchet deja existent sau utilizeaza-ti toata imaginatia pentru


    crearea la ceva nou! </p1>

    </section>

    <section>

    <a href="flori_camera.html" target="flori_camera.html">

    <h5>Flori de camera</h5>

    <h3>Flori pentru interior sau exterior</h3>

    </a>

    <p>Cel mai larg asortiment in stoc sau la comanda </p>

    </section>

    <section>

    <a href="cosuri.html" target="cosuri.html">

    <h5>Cosuri</h5>

    <h3>Doresti originalitate ,atunci comanda chiar acum un cos</h3>

    </a>

    <p>Cel mai larg asortiment in stoc sau la comanda </p>

    </section>

    <section>

    <a href="compozitii.html" target="compozitii.html">

    <h5>Compozitii</h5>

    <h3>Cumpara ceva original si nemaivazut pan acum</h3>


    </a>

    <p>Creaza ceva original doar bazandute doar pe imaginatie </p>

    </section>

    </section>

    <nav>

    <a href="acasa.html">Acasa</a>

    <a href="buchete.html" target="buchete.html">Buchete</a>

    <a href="flori_camera.html" target="flori_camera.html">Flori de camera</a>

    <a href="cosuri.html" target="cosuri.html">Cosuri</a>

    <a href="compozitii.html" target="compozitii.html">Compozitii</a>

    <a href="contacte.html" target="contacte.html">Contacte</a>

    </nav>

    <footer>

    <small> &copy;LIVRARE FLORI HANCESTI 2021 </small>

    <nav>

    <a href="acasa.html">Acasa</a>

    <a href="buchete.html" target="buchete.html">Buchete</a>

    <a href="flori_camera.html" target="flori_camera.html">Flori de camera</a>

    <a href="cosuri.html" target="cosuri.html">Cosuri</a>

    <a href="compozitii.html" target="compozitii.html">Compozitii</a>

    <a href="contacte.html" target="contacte.html">Contacte</a>

    </nav>

    </footer>

    </body>

    </html>

    Codul CSS:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    Concluzii:
    In concluzie pot spune ca in urma acestei lucrari de laborator am facut primul pas pentru
    crearea paginii mele web .Un pas foarte important pentru studierea operatiilor si structurii de
    baza ale limbajului HTML,care este unul dintre cele mai utilizate de catre front-end
    developer-ii.Pentru stilizare si intelegerea ce este CSS, am utilizat un program deja gata
    pentru stilizarea textului si am observat cum se modifica pagina web.

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