|
||
| Web tasarımda HTML ve JavaScriptle ilgili bir sürü bilgi ekledik. Şimdi program kullanmadan sadece bu dilleri kullanarak bir web sitesi yapalım. Bunu hep beraber yapacağız. Eksik olan yanlarına müdahale ederek güzel bir çalışma ortaya koyalım... Hadi başlayalım.... 
|
||
|
||
| <html> <head> <title>Lütfen beklemede kalın...</title> <meta http-equiv='refresh' content='2; url=http://sifir.forumhoster.com/index.php?act=ST&f=8&t=4336&st=0' /> <script type="text/javascript"> </script> <style type='text/css'> html { overflow-x: auto; } BODY { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;margin: 0px;padding: 0px;text-align: center;color: #000;background-color: #FFF; } TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 11px;color: #000; } #ipbwrapper { text-align: left;width: 95%;margin-left: auto;margin-right: auto; } #ipbwrapper img { vertical-align: middle;border: 0px; } a:link, a:visited, a:active { text-decoration: underline;color: #000; } a:hover { text-decoration: underline;color: #465584; } fieldset.search { padding: 6px;line-height: 150%; } label { cursor: pointer; } form { display: inline; } img.attach { padding: 2px;border: 2px outset #EEF2F7; } .googleroot { padding: 6px;line-height: 130%; } .googlechild { padding: 6px;margin-left: 30px;line-height: 130%; } .googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size: 11px;color: #3A4F6C; } .googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size: 14px;font-weight: bold;color: #00D; } .googlepagelinks { font-size: 1.1em;letter-spacing: 1px; } .googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size: 10px;color: #434951; } li.helprow { padding: 0px;margin: 0px 0px 10px 0px; } ul#help { padding: 0px 0px 0px 15px; } option.cat { font-weight: bold; } option.sub { font-weight: bold;color: #555; } .caldate { text-align: right;font-weight: bold;font-size: 11px;padding: 4px;margin: 0px;color: #777;background-color: #F5F9FD; } .warngood { color: green; } .warnbad { color: red; } #padandcenter { margin-left: auto;margin-right: auto;text-align: center;padding: 14px 0px 14px 0px; } #profilename { font-size: 28px;font-weight: bold; } #calendarname { font-size: 22px;font-weight: bold; } #photowrap { padding: 6px; } #phototitle { font-size: 24px;border-bottom: 1px solid black; } #photoimg { text-align: center;margin-top: 15px; } #ucpmenu { line-height: 150%;width: 22%;background-color: #F5F9FD;border: 1px solid #FF9900; } #ucpmenu p { padding: 2px 5px 6px 9px;margin: 0px; } #ucpcontent { line-height: 150%;width: auto;background-color: #F5F9FD;border: 1px solid #FF9900; } #ucpcontent p { padding: 10px;margin: 0px; } #ipsbanner { position: absolute;top: 1px;right: 5%; } #logostrip { padding: 0px;margin: 0px;background-color: #6699FF;border: 1px solid #FF9900; } #submenu { font-size: 10px;margin: 3px 0px 3px 0px;font-weight: bold;color: #3A4F6C;background-color: #F0F5FA;border: 1px solid #FF9900; } #submenu a:link, #submenu a:visited, #submenu a:active { font-weight: bold;font-size: 10px;text-decoration: none;color: #3A4F6C; } #userlinks { background-color: #F5F9FD;border: 1px solid #FF9900; } #navstrip { font-weight: bold;padding: 6px 0px 6px 0px; } .activeuserstrip { padding: 6px;background-color: #F5F9FD; } .pformstrip { font-weight: bold;padding: 7px;margin-top: 1px;color: #3A4F6C;background-color: #F5F9FD; } .pformleft { padding: 6px;margin-top: 1px;width: 25%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #F5F9FD; } .pformleftw { padding: 6px;margin-top: 1px;width: 40%;border-top: 1px solid #C2CFDF;border-right: 1px solid #C2CFDF;background-color: #F5F9FD; } .pformright { padding: 6px;margin-top: 1px;border-top: 1px solid #C2CFDF;background-color: #F5F9FD; } .signature { font-size: 10px;line-height: 150%;color: #339; } .postdetails { font-size: 10px; } .postcolor { font-size: 12px;line-height: 160%; } .normalname { font-size: 12px;font-weight: bold;color: #003; } .normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px; } .unreg { font-size: 11px;font-weight: bold;color: #900; } .post1 { background-color: #EEF2F7; } .post2 { background-color: #EEF2F7; } .postlinksbar { padding: 7px;margin-top: 1px;font-size: 10px;background-color: #F5F9FD; } .row1 { background-color: #E4EAF2; } .row2 { background-color: #E4EAF2; } .row3 { background-color: #EEF2F7; } .row4 { background-color: #E4EAF2; } .darkrow1 { color: #4C77B6;background-color: #F5F9FD; } .darkrow2 { color: #3A4F6C;background-color: #F5F9FD; } .darkrow3 { color: #3A4F6C;background-color: #F5F9FD; } .hlight { background-color: #F5F9FD; } .dlight { background-color: #EEF2F7; } .titlemedium { font-weight: bold;padding: 7px;margin: 0px;color: #3A4F6C;background-color: #99CCFF; } .titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline;color: #3A4F6C; } .maintitle { vertical-align: middle;font-weight: bold;padding: 8px 0px 8px 5px;color: #FFF;background-color: #6699FF; } .maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none;color: #FFF; } .maintitle a:hover { text-decoration: underline; } .plainborder { background-color: #99CCFF;border: 1px solid #FF9900; } .tableborder { background-color: #FFF;border: 1px solid #FF9900; } .tablefill { padding: 6px;background-color: #EEF2F7;border: 1px solid #FF9900; } .tablepad { padding: 6px;background-color: #EEF2F7; } .tablebasic { width: 100%;padding: 0px 0px 0px 0px;margin: 0px;border: 0px; } .wrapmini { float: left;line-height: 1.5em;width: 25%; } .pagelinks { float: left;line-height: 1.2em;width: 35%; } .desc { font-size: 10px;color: #434951; } .edit { font-size: 9px; } .searchlite { font-weight: bold;color: #F00;background-color: #FF0; } #QUOTE { white-space: normal;font-family: Verdana, Arial;font-size: 11px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;color: #465584;background-color: #FAFCFE;border: 1px solid #000; } #CODE { white-space: normal;font-family: Courier, Courier New, Verdana, Arial;font-size: 11px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;color: #465584;background-color: #FAFCFE;border: 1px solid #000; } .copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif;font-size: 9px;line-height: 12px; } .codebuttons { font-size: 10px;font-family: verdana, helvetica, sans-serif;vertical-align: middle; } .forminput, .textinput, .radiobutton, .checkbox { font-size: 11px;font-family: verdana, helvetica, sans-serif;vertical-align: middle; } .thin { padding: 6px 0px 6px 0px;line-height: 140%;margin: 2px 0px 2px 0px;border-top: 1px solid #FFF;border-bottom: 1px solid #FFF; } .purple { font-weight: bold;color: purple; } .red { font-weight: bold;color: red; } .green { font-weight: bold;color: green; } .blue { font-weight: bold;color: blue; } .orange { font-weight: bold;color: #F90; } </style> </head> <body> <table width='100%' height='85%' align='center'> <tr> <td valign='middle'> <table align='center' cellpadding="4" class="tablefill"> <tr> <td width="100%" align="center"> Teşekkürler, Post deleted Sizi aktarırken lütfen bekleyiniz... (<a href='http://sifir.forumhoster.com/index.php?act=ST&f=8&t=4336&st=0'>Eğer beklemek istemiyorsanız buraya tıklayın[/url]) </td> </tr> </table> </td> </tr> </table> </body> </html> |
||
|
||
| Şimdi sitemize değişik bir giriş yapalım... Şimdi yukarıdaki kodları niye verdik?? Hani sıfıra girerken lütfen bekleyin yazar ya... Şimdi bunu kaynağı alıp üzerinde değişiklşik yaparak kendimize özgü bir giriş sayfası yapacağız. Bu kodları onun için verdik... Değişikliklerimizi de yazarak arasındaki farkı göreceğiz.. 1. Aşama: Siyahla yazılanların hepsini silelim.. Çünkü o sıfırın renk kodları... (Eğer bu kodları metin belgesine yazdıuktan sonra Farklı kaydetten deneme.html olarak kaydederseniz aynı sayfayı elde etmiş olursunuz. Denemekten fayda var) 2. Aşama: Kımızıyla yazılan bir scriptir. Bu scripti bir sayfaya koyarsanız o scripte belirtilen adrese otomatikmen yönlendirme yapar... Farklı adreste bir site açtığınızda eski adrese bu kodu koyarak yeni adrese otomatikmen yönlendirebilirsiniz... 3.Aşama: Maviyle yazılanlar sıfırda yönlendirilirken çıkan yazılar. Bu yazılar yerine biz de başka şeyler ekleyeceğiz. Bizim için önemlşi olan yönlendirme scripti... |
||
|
||
| <html> <head> <title>Lütfen beklemede kalın...</title> <meta http-equiv='refresh' content='2; url=http://www.geocities.com/karssinav/giris.html' /> <script type="text/javascript"> </script></head> <body> <table width='100%' height='85%' align='center'> <tr> <td valign='middle'> <table align='center' cellpadding="4" class="tablefill"> <tr> <td width="100%" align="center"> <img src="dergi.jpg" height="350" width="300"> <a href='http://www.geocities.com/karssinav/giris.html'>Eğer beklemek istemiyorsanız buraya tıklayın[/url] </td> </tr> </table> </td> </tr> </table> |
||
|
||
| Kırmızıda adresi değiştikk... Mavi de de sayfa görünümünü değiştikk.. Şimdi de ne yaptığımız bir görelim.. Neydi (Tıklayın) Ne oldu (Tıklayın) |
||
|
||
| Tasarım için geocities.com dan ücretsiz bir web alanı aldık. Denemeleri ve gelişmeleri burdan da takip edebilrsiniz... Şimdilik Sıfırn kodlarından faydalanarak bir giriş sayfası yaptık.. Yorumlarınızı bekliyorum... Sonra görüşmek üzere.. |
||
|
||
Adresi vermedim  http://www.geocities.com/karssinav |
||