ebabecka 0 Odesláno: 22. Únor, 2014 Share Odesláno: 22. Únor, 2014 Zdravím. Začal som sa učiť HTML/CSS a rozhodol som sa urobiť moju prvú 'tému'. Neviem či ju tak môžem nazvať, pretože ja nie som nejaký grafik, ale myslím že na môj prvý pokus to ujde. Pracoval som na nej asi polhodinu a chcel som ju urobiť jednoduchú. Obrázok: https://imageshack.com/i/4jbbgfp W3 Validator mi ukazuje len 2 varovania ktoré ale nie sú moc podstatné, takže táto téma je validna, na čo som hrdý. Kód: <!DOCTYPE html> <html> <head> <title>TITLE OF THE WEBSITE -- WELCOME</title> <style type="text/css"> body { margin: 20px 500px 20px 500px; text-align: center; } #main { background-color: #CC2929; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; padding-right: 20px; } #content { background-color: #D66B6B; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; padding-right: 20px; } #footer { background-color: #CC2929; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; padding-right: 20px; } </style> </head> <body> <div id="main"> <p style="font-size: 60px; font-family: Century Gothic; color: black;">welcome to my website</p> <a style="text-decoration: none; font-family: Century Gothic; font-size: 20px; color: black;" href="">home</a> <a style="text-decoration: none; font-family: Century Gothic; font-size: 20px; color: black;" href=""> forum</a> <a style="text-decoration: none; font-family: Century Gothic; font-size: 20px; color: black;" href=""> about</a> <a style="text-decoration: none; font-family: Century Gothic; font-size: 20px; color: black;" href=""> contact</a> <a style="text-decoration: none; font-family: Century Gothic; font-size: 20px; color: black;" href=""> donate</a> </div> <br /> <div id="content"> <h1 style="font-family: Century Gothic;"><em>lorem ipsum dolor sit amet, consectetur adipiscing elit</em></h1> <p style="font-family: Century Gothic; font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum lacinia. Fusce eu bibendum metus, id accumsan nisi. Quisque a nisl eu leo ultrices gravida nec et turpis. Integer venenatis est tempus dolor mollis, nec feugiat lorem commodo.</p> <h1 style="font-family: Century Gothic;"><em>lorem ipsum dolor sit amet, consectetur adipiscing elit</em></h1> <p style="font-family: Century Gothic; font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum lacinia. Fusce eu bibendum metus, id accumsan nisi. Quisque a nisl eu leo ultrices gravida nec et turpis. Integer venenatis est tempus dolor mollis, nec feugiat lorem commodo.</p> <h1 style="font-family: Century Gothic;"><em>lorem ipsum dolor sit amet, consectetur adipiscing elit</em></h1> <p style="font-family: Century Gothic; font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum lacinia. Fusce eu bibendum metus, id accumsan nisi. Quisque a nisl eu leo ultrices gravida nec et turpis. Integer venenatis est tempus dolor mollis, nec feugiat lorem commodo.</p> </div> <br /> <div id="footer"> <p style="font-family: Century Gothic;">Copyright <a style="text-decoration: none; font-family: Century Gothic; color: black;" href="">title.com</a> © 2014</p> </div> </body> </html> <!-- End --> Dúfam že sa vám táto téma bude páčiť. Napíšte svoj stručný názor v čom by som sa mal vylepšiť a na čom by som mal popracovať, ďakujem. PS: Viem že v kóde sa veľa vecí opakuje a je to tam nahádzané atď., nabudúce sa viac posnažím. Link to comment Share on other sites More sharing options...
Leroy 2 Odesláno: 22. Únor, 2014 Share Odesláno: 22. Únor, 2014 No ak je to prvý pokus tak fajn ... každý musí nejak začínať. Čo sa týka hodnotenia tak tam toho veľa nieje .. sú tam tri kontajnery a pár riadkov textu v nich. Chcelo by to upraviť graficky a trošku tomu dať viac než len tri kontajnery pod sebou. Jedno sa mi však nepáči najviac a to je spôsob akým využívaš kaskádové štýly.. nie je dobrým zvykom pridávať štýly pomocou atribútu style="" (pokiaľ to nie je fakt nevyhnutné) .. je lepšie si oddeliť CSS od HTML pomocou externého dokumentu a ten následne len importovať do HTML hlavičky. Získaš tým väčší prehľad a lepšie by sa ti editovalo. Ale inak na prvý pokus povedzme ,že ok. Link to comment Share on other sites More sharing options...
ebabecka 0 Odesláno: 22. Únor, 2014 Author Share Odesláno: 22. Únor, 2014 Máš pravdu s tým CSS. Je to nepriehľadné a všetko je to na sebe, nedá sa v tom orientovať. Začnem používať druhý spôsob, ktorý je efektívnejší a priehľadnejší. Ďakujem za názor Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now