Jump to content
php.lv forumi

Mana pirmā web lapa!

mangarsocepumi
 Share

Recommended Posts

mangarsocepumi Newbie

mangarsocepumi

Posted
Posted (edited)

Tātad draugi ir negulēta nakts un pirmo reizi esmu izveidojis savu pirmo web lapu, mazliet pasvīdu, bet visā visumā viss nogāja gludi, gribētu dzirdēt jūsu viedokli, kritiku, ieteikumus, ko kā labāk varbūt uzlabot, ko mainīt, vai kodā nav šausmīgs bardags un vai to css ko uzrakstīju es vai viņu nevar uzrakstīt uz pusi īsāku, ja ne vēl vairāk ^^

 

Palūgšu uzreiz cilvēki neesiet ļoti skarbi, tas ir pirmais ķēriens pie programmēšanas.

Lūdzu kritiku, ieteikumus, visu uzklausīšu, zinu ka kods ir miskastē metams, jo css varētu uzrakstīt uz pusi īsāk

 

Arhīvu varam novilkt šeit un būšu patiesi laimīgs, ja to izdarīs vairāki cilvēki un paskaidros ko vajadzētu darīt labāk, vai pareizāk vai kaut kā tamlīdzīgi.

 

 

 

<!DOCTYPE html>
<html lang"en">

<head>
    <title>First WEB</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>

<body>

    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="#">Sākums</a></li><li>
                <a href="#">Par mani</a></li><li>
                <a href="#">Pakalpojumi</a></li><li>
                <a href="#">Sociālie tīkli<img src="img/arrow2.png" /></a>
                    <ul>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Draugiem</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="mainHeader">
        <div class="content">
            <article class="topcontent">
                <img src="img/logo.png">
                    <header>
                        <aside class="middlesidebar">
                            <article>
                                <h6>Mani sauc Gatis un esmu iesācis veidot savu pirmo mājas lapu, kas iespējams tālākā
                                nākotnē varētu būt kā sava veida blogs vai portfolio interneta vidē. Šī mājas lapa veidota uz html/css bāzes</h6>
                            </article>
                        </aside>
                        
                        <aside class="maincontent">
                            <article>
                                <h3>PAKALPOJUMI</h3>
                                    <aside class="top-sidebar">
                                        <article>
                                            <h2>Mājas lapas dizains</h2>
                                            <p>Izveidosim no pavisam vienkāršu vizītkaršu tipa mājas lapas, līdz pavisam nopietniem uzņēmuma projektiem u.c</p>
                                        </article>
                                    </aside>
    
                                    <aside class="middle-sidebar">
                                        <article>
                                            <h2>Uzņēmuma vizītkarte</h2>
                                            <p>Izveidosim no pavisam vienkāršu vizītkaršu tipa mājas lapas, līdz pavisam nopietniem uzņēmuma projektiem u.c</p>
                                        </article>
                                    </aside>
    
                                    <aside class="bottom-sidebar">
                                        <article>
                                            <h2>Logo izveide</h2>
                                            <p>Izveidosim no pavisam vienkāršu vizītkaršu tipa mājas lapas, līdz pavisam nopietniem uzņēmuma projektiem u.c</p>
                                        </article>
                                    </aside>                                        
                        </aside>
                    </header>
                            </article>
        </div>
    </div>
    <aside class="footer">
        <h3>DARBI</h3>
            <div id="work">
                <div id="work_list">
                    <ul>
                        <a href="#"><img src="img/darbs.jpg" title="www.inbox.lv"></a>
                        <a href="#"><img src="img/darbs2.jpg" title="www.draugiem.lv"></a>
                        <a href="#"><img src="img/darbs3.jpg" title="www.pornhob.com"></a> <br />
                        <p>Uzzejot uz darba ir arī aplūkojams, kam tas ir veidots un kādā nolūkā</p>
                    </ul>
                </div>
            </div>
    </aside>
    
    <footer class="mainFooter">
    <p>Copyright © 2015 <br/> Gatis Smiltiņš    <a href="www.gatismiltins.wordpress.com" title="blogs" src="Gata darbnīca"></a></p>    
    </footer>
    
    
</body>

 

 

 

 

 

body {
    margin: 0%;
    overflow-y: scroll;
    font-family: Arial, 'Luicide Sans Unicode';
    font-size: 90%;
}

#nav {
    background-color: #333;
    border-top: 5px solid #1E8EB9;
}

#nav_wrapper {
    width: 50%;
    margin: 0 auto;
    text-align: left;
}

#nav ul  {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

#nav ul li {
    display: inline-block;
    /*background:-moz-linear-gradient(#564, #546);  iedod gradientu no augšas uz leju.*/
}

#nav ul ul li:hover {
    background-color: #000;
}
 /* navigacijas teksts - apmeklets, kā izskatās. */
#nav ul li a,visited  {
    color: #fff;
    display: block;
    padding: 10px;
    text-decoration: none;
}

#nav ul li a:hover {
    background-color: #fff;
    color: #222;
    text-decoration: none;
}
#nav ul li img {
    vertical-align: middle;
    width: 5px;
    padding-left: 5px;
    background-color: solid blue;
}

#nav ul li:hover ul {
    display: block;
}
 
#nav ul ul {
    display: none;
    position: absolute;
}

#nav ul ul li {
    display: inline-block;
}

/* apakšadaļas sociālajiem tīkliem uzejot virsū */
#nav ul ul li a,visited {
    color: #000;
}

#nav ul ul li a:hover{
    color: #000;
}

.a {
    text-decoration: none;
}
 /* logo (augša) */
.content{
    margin-top: 25px;
    width: 100%;
    text-align: center;
}

h6{
    color: #400;
    font-size: 12px;
    background-color: #FFD300;
    padding: 2%;
    margin-bottom: 0%;
    margin-top: 0%;
}

.maincontent h3 {
    font-family: Arial, 'Luicide Sans Unicode';
    font-size: 32px;
    color: #1E8EB9;
    margin: 1% 1% 2.5%;
}

.maincontent {
    width: 100%;
    padding-top: 20px;
    background-color: #222;
    padding-bottom: 278px;
    color: white;
}

.maincontent h2{
    color: #1E8EB9;
    font-size: 18px;
    font-family: Arial, 'Luicide Sans Unicode';
    margin: 0%;
}

.maincontent p {
    font-size: 16px;
    font-family: Arial, 'Luicide Sans Unicode';
    color: black;
}

.top-sidebar {
    width: 23%;
    float: left;
    background-color: #FFD300;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 3px solid white;
    margin-left: 3.8%;
    padding: 5% 3%;
}

.middle-sidebar {
    width: 23%;
    float: left;
    background-color: #FFD300;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 3px solid white;
    margin-left: 2%;
    margin-bottom: 10%;
    padding: 5% 3%;
}

.bottom-sidebar {
    width: 23%;
    float: left;
    background-color: #FFD300;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 3px solid white;
    margin-left: 2%;
    margin-bottom: 2%;
    padding: 5% 3%;
}

.footer {
    width: 100%;
    padding-top: 20px;
    background-color: #FFD300;
    padding-bottom: 30px;
    color: white;
}

.footer h3 {
    float: left;
    padding-right: 30%;
    margin-top: -3%;
    margin-left: 46%;
    font-size: 32px;
    font-family: Arial, 'Luicide Sans Unicode';
    color: #1E8EB9;
}

#work_list ul a img {
    background-color: red;
    width: 70%;
    height: 200px;
    margin-left: 14%;
    text-align: center;
    list-style-type: none;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#work_list p {
    color: black;
    text-decoration: Italic;
    text-align: center;
    font-family: Arial;
    font-size: 9px;
}

.mainFooter {
    width: 100%;
    height: 100%;
    background-color: #222;
    padding-top: 1%;
    padding-bottom: 1%;
    border-bottom: 5px solid #1E8EB9;
}
    
.mainFooter p {
    color: white;
    text-align: center;
}

.mainFooter a,p:hover{
    color: #1E8EB9;
}

.mainFooter a,p:active{
    color: #FFD300;
}

.mainFooter a,p:visited{
    color: #FFD300;
}

 

ŠEIT ARHĪVS

 

http://www.bildites.lv/images/xjazvve4mywzv4lppkcn.png

http://www.bildites.lv/images/rpqr5y67d26td963wxz8.png

http://www.bildites.lv/images/23luzmunegcmjb0antx.png

 

nesanāca ielikt sakarīgi bildes, jo kropļoja foruma izmēru.

 

Liels paldies tiem, kas ieteica un kaut kādā veidā palīdzēja!

Edited by mangarsocepumi
Link to comment
Share on other sites
mangarsocepumi Newbie

mangarsocepumi

Posted
  • Author
Posted

Liels paldies par ieteikumiem, nezināju tādas lietas, bet vēl, jo projām gaidu kādu cilvēku, kas pakritizēs un pateiks ko, kā labāk veidot :)

Bet vispār priekš pirmās lapas nav slikti? :)

 

Un vai tiešām kodā nav bardags un vai to nevar uzrakstīt uz pusi mazāku koda ziņā ?

 

Kā arī iespējams kāds var paskaidrot, kas īsti ir HTML5 nu piemēram, kā tas atšķiras no iepriekšējām HTML versijām?

Link to comment
Share on other sites
Roze Newbie

Roze

Posted
Posted

Kā arī iespējams kāds var paskaidrot, kas īsti ir HTML5 nu piemēram, kā tas atšķiras no iepriekšējām HTML versijām?

Ja gribas tehniski un specifiski, tad http://www.w3.org/TR/html5-diff/ .. īsumā - jauni elementi/atribūti un izmaiņas esošajos.

 

 

Un vai tiešām kodā nav bardags un vai to nevar uzrakstīt uz pusi mazāku koda ziņā ?

Koda "lielumu" parasti/bieži vien nosaka visādi dizaina vipendroni.

Nu, piemēram, vai ir tik ļoti būtiski tie apaļie stūrīši (vai uz lielākām izšķirtspējām tos var pamanīt?)? Novienkāršojot uz parastām kastēm paliek mazāk atsķirīgu elementu attiecīgi arī css samazinās utt

 

No otras puses parasti jau ir tā, ka (skarbajā) ikdienā šādas lietas ir mazākā sāpe - proti, weblapā tiek ielikta(s) megabaitīga(s) bilde(s) (flash video/gigantisks baneris) vai arī teiksim ielādēts kaut kāds jQuery u.c. kur pāris baitu optimizācijai vairs nav nekādas būtiskas nozīmes.

 

Bez tam reti kura weblapa no koda/formatēšanas viedokļa vairs izskatās pievilcīga - visi nodarbojas ar dažādiem inline / minify css/js utt hackiem ..

Link to comment
Share on other sites
  • 2 years later...
  • aaxc locked this topic
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...