Jump to content

Welcome to OG-Times.ro - Old memories always the best!
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!

Anunţuri Importante

[ANUNŢ] Update-urile efectuate pe serverele OG-Times le puteti gasi accesand Server Updates.
[ANUNŢ] Blogul OG-Times este online. Va invitam sa il vizitati la adresa blog.og-times.ro.
[IMPORTANT] Sfaturi pentru a nu cadea in plasa celor care fura conturi: click aici.
[IMPORTANT] Aplicatia OG-Guard a fost lansata. Mai multe informatii aici. Recomandam citirea topicului inainte de activarea autentificarii in doi pasi.

Photo

[SERIE] Tutorial HTML - Layouts & modele


  • This topic is locked This topic is locked
2 replies to this topic

#1
qAndrei - I miss you Asaf

qAndrei - I miss you Asaf

    Advanced Member

  • account_circle
    Premium User
  • I have 82 Posts
  • My id is #13300
  • 07-March 17
  • 3 reputation points
  • qAndrei_

  • Hey, you!
    Wanna be friends?

    First Words

    Acesta este un exemplu simplu de cum se poate crea un layout folosind tagul div:

    HTML<div id="my_container">
        
        <div id="my_header">
            <h1>Tutoriale HTML</h1>
        </div>
        
        <div id="my_nav">
            HTML<br>
            XHTML<br>
            CSS<br>
        </div>
        
        <div id="my_section">
            <h1>HTML</h1>
            <p>Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin HTML.</p>
            <p>Hyper Text Markup Language sau pe scurt HTML. HTML a aparut ca o modalitate de a prezenta informatia structurata pe titluri paragrafe sau blocuri de text. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS.</p>
        </div>
        
        <div id="my_footer">
            <p>Tutoriale qAndrei</p>
        </div>
        
    </div>

     

    Demo
    Tutoriale HTML
    HTML
    XHTML
    CSS
    HTML

    Html sau HyperText Markup Language este unul dintre cele mai vechi limbaje de marcare web. Acesta sta la baza crearii unui site web. Cu alte cuvinte, inainte de a invata alte limbaje de programare trebuie sa cunosti cel putin HTML.

    Hyper Text Markup Language sau pe scurt HTML. HTML a aparut ca o modalitate de a prezenta informatia structurata pe titluri paragrafe sau blocuri de text. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS.

    qAndrei , tutoriale de la 0

     

    Iata si css-ul folosit. Daca ai probleme in a intelege codul de mai jos

    CSS<style>
        #my_header {
            background-color:#337AB7;
            color:white;
            text-align:center;
            padding:5px;
        }

        #my_nav {
            line-height:30px;
            background-color:#C0E0EE;
            height:300px;
            width:20%;
            float:left;
            padding:5px;    
        }

        #my_section {
            width:80%;
            float:left;
            padding:10px;         
        }

        #my_footer {
            background-color:#337AB7;
            color:white;
            clear:both;
            text-align:center;
         padding:5px;         
        }

    </style>

    Un layout asemanator se poate obtine, folosind table. Pe de alta parte un table este foarte folositor. Intr-un tabel poate fi introdus cam orice element, chiar si un alt tabel.

     
    HTML - layout standard
    Un layout standard consta intr-un banner in zona de sus a paginii un meniu in partea din stanga iar zona de continut in partea de dreapta-mijloc. Acesta este cel mai clasic layout pentru un website, iar dupa parerea mea un model foarte
    HTML<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400">
        <tr height="50">
            <td colspan="2" bgcolor="white">
            
                <table title="Banner" id="banner" border="0">
                    <tr>
                        <td>Aici poti sa pui un baner, logo, etc</td>
                    </tr>
                </table>
            
            </td>
        </tr>
        <tr height="200">
            <td bgcolor="white">
            
                <table id="navigation" title="Navigation" border="0">
                    <tr>
                        <td>Link-uri!</td>
                    </tr>
                    <tr>
                        <td>Link-uri!</td>
                    </tr>
                    <tr>
                        <td>Link-uri!</td>
                    </tr>
                </table>
                
            </td>
            <td bgcolor="white">
                
                <table title="Content" id="content" border="0">
                    <tr>
                        <td>Continutul sitului va fi plasat aici</td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>
    Aceasta este o abordare de baza. Dupa cum vei observa daca vei folosi aceste layout-uri in paginile tale, va daveni foarte complex pe masura ce vei adauga continut. Cu toate acestea este important sa specifici inaltimea (height) si latimea (width). Cu cat vei fi mai specific in stabilirea acestor atribute cat si a altora cu atat mai putine bug-uri vei avea.
     
    Eu am fost qAndrei , daca vreti sa continui cu aceste tutoriale imi puteti aprecia munca printr-un +1 , o zi faină !






    • 0

                                                        zjf8SOE.png

     

                                                VxpSfBN.png
                                                                  VSbbf3h.png
                                                 VxpSfBN.png
     
     
                
                                                 
                   

                                                                   


    #2
    Deli -

    Deli -

      Advanced Member

  • account_circle
    Premium User
  • I have 66 Posts
  • My id is #27373
  • 10-May 18
  • 31 reputation points
  • DeliN1

  • Hey, you!
    Wanna be friends?

    SuperStar

    foarte folositor, thx







    • 0

       kCEiwUh.png

     

     

    Spoiler

    #3
    VladS.DauPentruMaia

    VladS.DauPentruMaia

      Veteran | Moderator IT

  • account_circle
    Moderator IT
  • I have 762 Posts
  • My id is #15129
  • 29-April 17
  • 42 reputation points
  • VladS

  • Hey, you!
    Wanna be friends?

    Word Crusher

    Topic closed, acesta are mai mult de 7 zile vechime.







    • 0

    Retras de pe SA:MP temporar, pana in iunie. Multumesc pentru toate momentele frumoase, cine doreste sa vorbim imi poate da PM pe forum sau sa imi scrie(gasiti datele mele pe profil)

    qlf37Dm.jpg?1aZT1ook.png

    rzBdkZJ.png?1   9nCjKhI.png

    aZ9tAxJ.png

     

    sznC14W.jpg?1

    9EUmPlB.png

    zO8HXAG.png

     

    MxbD424.png - Server fantoma





    0 user(s) are reading this topic

    0 members, 0 guests, 0 anonymous users

    Comunitatea a fost infiintata pe data de 28.12.2015, ora 19:00 cu scopul de a atrage cat mai multi pasionati de gaming.
    Designed by Shady | OG-Times | 2018
    keyboard_arrow_up