WEB TASARIMINDA HTML DİLİ

Save this PDF as:
 WORD  PNG  TXT  JPG

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "WEB TASARIMINDA HTML DİLİ"

Transkript

1 WEB TASARIMINDA HTML DİLİ Html dili web sayfası oluşturmak için kullanılır. Bir html sayfası oluşturmak için oluşturulmak istenen klasörde mause sağ tıklanır ve yeni seçeneğinin altında metin belgesi seçeneği seçilir, oluşan dosya ya sağ tıklanıp açılan pencereden yeniden adlandır seçeneği seçilir ve dosyamız.html uzantılı olacak şekilde yeniden isimlendirilir. Eğer dosya uzantıları görünür durumda değil ise denetim masasından klasör seçeneklerinden görünüm sekmesi seçilir ve bilinen dosya türleri için uzantıları gizle tık işareti kaldırılır. Html türü bir web sayfasında aşağıdaki kodların mutlaka olması gerekir. <!DOCTYPE HTML> <html> <head> Sayfamız hakkındaki bilgileri buraya gireceğiz </head> <body> Sayfamızdaki Yazıları, resimleri, kodları vb. bu kısma gireceğiz. </body> </html> DOCTYPE: Sayfamızın hangi html sürümü ile kodlandığını belirtir. Html dilinin son sürümü Html5 sürümdür. Bu komut sayfanın en başında kullanılır. Belgemizdeki kodların Html5 sürümüne göre kodlandığını belirtmek için DOCTYPE komutu aşağıdaki gibi kullanılır. <!DOCTYPE html> html etiketi : html dilinin kurallarına göre DOCTYPE komutu dışında sayfamızın içerisinde her şey html etiketleri arasında kullanılmalıdır. Kullanımı aşağıdaki gibidir. <html> etiketin açılış kodu </html> etiketin kapanış kodu head etiketi : Head kelime olarak kafa anlamına gelir. Eğer html sayfamızı insana benzetirsek head etiketi sayfamızın baş kısmıdır. Sayfamız ile ilgili bilgileri taşır. <head> etiketin açılış kodu </head> etiketin kapanış kodu body etiketi : body kelime olarak vücut anlamına gelir. Eğer html sayfamızı insana benzetirsek body etiketi sayfamızın gövde kısmıdır. Sayfamızda kullanılacak işlemler; yazılar, resimler vb. bu kısımda yer alır. <body> etiketin açılış kodu </body> etiketin kapanış kodu title etiketi : title etiketleri arasına yazılacak yazı sayfamızın başlık bilgisini içerir ve sayfamızı yorumlayan tarayıcımızın(internet Explorer, chrome, firefox, opera vb.) en üstündeki sekme kısmında bu bilgi görünür. Head etiketleri arasında kullanılmalıdır. Kullanımı aşağıdaki gibidir. <title>sayfa Başlığı</title> meta etiketi : head etiketleri arasında kullanılır. meta etiketleri sayfamıza bir takım ayarlar yapmamızı sağlar. Örneğin aşağıdaki kod tarayıcıya(chrome, firefox, internet Explorer vb.) sayfamızda utf-8 karakter yapısının kullanılacağını belirtir. Utf-8 karakter yapısı içerisinde Türkçenin de bulunduğu bazı dilleri kapsar. Bu sayede sayfamızda ç, ğ, ö, ü, ı, ş gibi Türkçe karakterleri kullanabiliriz. Head etiketleri arasında kullanılmalıdır. <meta>charset= utf-8 </meta>

2 <!-- --> etiketi : <!-- --> etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) görüntülenmez. <!-- Bu yazı tarayıcımızda görünmeyecektir. --> font etiketi : font etiketi yazımızın türünü, rengini, büyüklüğünü ayarlamamızı sağlar. <font size="12" face="tahoma" color="blue">bu yazı mavi, 12 punto büyüklüğünde ve tahoma tipinde görüntülenir.</font> b ve strong etiketleri : b veya strong etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) kalın harflerle yazılmış olarak görünür. <b>bu metin tarayıcımızda kalın olarak görüntülenir.</b> br etiketi : br etiketinden sonraki yazılar, tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) alt satırda görüntülenir. Kullanımı aşağıdaki gibidir. <br> bu etiket bir satır aşağı yazdırır. i etiketi : i etiketleri arasına yazılacak yazı sayfamızı yorumlayan tarayıcımızda(internet Explorer, chrome, firefox, opera vb.) eğik yazılmış olarak görünür. <i>bu yazı eğik görünür.</i> u etiketi : u etiketi arasında kalan metne altı çizili özellik ekler <u>bu metin tarayıcımızda altı çizili görüntülenir.</u> p etiketi : <p> etiketi ir paragraf taılar. <p>bu yazı ir paragraftır.</p> img etiketi : img etiketi sayfamıza resim ekler <img img src="resimlerim/elma.png" align= left alt="örnek" width="30" height="30" border= 1 hspace= 5px vspace= 5px title= elma ></img> iframe etiketi : iframe etiketleri sayfamızda bir çerçeve açar ve bu çerçeve içerisinde başka sayfalar görüntülenebilir. Belge içinde belge oluşur. <iframe src="sayfalarim/iletisim.html" align= left width="30" height="30" name= cerceve > </iframe> ol, ul, li etiketleri ol etiketi : sıralı liste tanımlar <ol type= 1,A,a,I,i > <li>kahve</li> <li>çay</li> <li>süt</li> </ol>

3 ul etiketi : sırasız liste tanımlar <ul type= square, circle, disc > <li>kahve</li> <li>çay</li> <li>süt</li> </ul> table etiketi : table etiketi belgemizde tablo oluşturur <table bgcolor= red background= resimlerim/a.jpg border= 1px height= 300px width= 300px align= center > <tr> <td>html Dersleri</td> <td>120 Saat</td> </tr> </table> tr etiketi : tr etiketi tablomuzda satır oluşturur <tr> </tr> td etiketi : td etiketi satırımızda hücre oluşturur <tr> <td height= 20px width= 50px >1. hücre</td> <td width= 60px >2. hücre </td> <tr> <td colspan= 2 >bu komut yan yana 2 hücreyi birleştirir</td> <td rowspan= 2 >bu komut alt alta 2 hücreyi birleştirir</td </tr> style etiketi : style etiketi belgemizi şekillendirir ve biçimlendirir. <head> <style type= text/css > <link href= css/stil_sayfam1.css rel= stylesheet ></link> </style> </head> <body> <p class= baslik >Bilişim</p> </body> link etiketi : input etiketi belge ile harici kaynak arasındaki ilişkiyi tanımlar. <link href= css/css.css rel= stylesheet ></link> input etiketi : input etiketi kullanıcının veri girişi yapabileceği alan tanımlar. <form action="demo.php"> İsim: <input type="text" name=" giriskutusununismi "></input><br> <input type="submit" value="gönder"></input> </form>

4 div etiketi : div etiketi belgemizde bir bölüm sektör, kutu tanımlar <div style="color:blue"> <p>html paragrafı</p> </div> embed etiketi : embed etiketi sayfamıza etkileşimli içerikler ekler <embed src="merhaba.swf"> </embed> video etiketi : video etiketi belgemize video eklememizi sağlar. <video width="320" height="240" controls="controls"> <source src="buff.mp4" type="video/mp4"></ source > <source src="buff.ogg" type="video/ogg"></ source > </video> audio etiketi : audio etiketi belgemize ses dosyası eklememizi sağlar. <audio controls="controls"> <source src="buff.ogg" type="audio/ogg"></ source > <source src="buff.mp3" type="audio/mp3"></ source > </audio> button etiketi : button etiketi belgemize düğme eklememizi sağlar.yazı yada resim olarak eklenebilir. <button type="buton, reset, submit">butoncuk</button> script etiketi : script etiketi istemci tarafında çalıştırılacak bir script tanımlar. JavaScript gibi. script etiketi içerisinde script ifadeleri olabileceği gibi src özelliği ile harici bir script dosyası çağırılabilir. <script> document.write("merhaba Dünya!") </script>

5 WEB TASARIMINDA CSS DİLİ CSS dili html ile oluşturulmuş web sayfalarını şekillendirmek ve biçimlendirmek için kullanılır. Bir css sayfası oluşturmak için oluşturulmak istenen klasörde mause sağ tıklanır ve yeni seçeneğinin altında metin belgesi seçeneği seçilir, oluşan dosya ya sağ tıklanıp açılan pencereden yeniden adlandır seçeneği seçilir ve dosyamız.css uzantılı olacak şekilde yeniden isimlendirilir. Eğer dosya uzantıları görünür durumda değil ise denetim masasından klasör seçeneklerinden görünüm sekmesi seçilir ve bilinen dosya türleri için uzantıları gizle tık işareti kaldırılır..css uzantılı bir sayfa ve bunun html sayfasından çağırılışı aşağıdaki gibidir..css uzantılı sayfa:.stil_a { font: tahoma, comic sans ms red 12px bold ; background: #fff.stil_b { font: times new roman,arial blue 18px italic;background:url(resimlerim/1.png) no-repeat.html uzantılı sayfa: <!DOCTYPE HTML> <html> <head> <link href= css/css.css rel= stylesheet ></link> </head> <body class= stil_a > /* body etiketi arasında kullanacağınız tüm yazılar özellikle belirtilmemişse css sayfasında belirlediğiniz stil_a kurallarına göre şekillendirilir.*/ <p clas= stil_b >buraya yazacağınız yazı css sayfasında belirlediğiniz stil_b kurallarına göre şekillendirilir.</p> </body> </html> CSS Kodları ve kullanımları Font özellikleri: Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. Fontun alt parametreleri ve kullanımları aşağıdaki gibidir. 1. color 2. font-family 3. font-size 4. font-weight 5. font-style 6. font-variant 7. font

6 1. color: (color) etileriizi regii taılaaız içi kullaılır..stil1{ color:#f00; /* renk kodları aşağıdaki gibi de kullanılabilir. Aqua, black, blue, fuchsia, gray, gren, lime, maron, navy, olive, purple, red, silver, teal, white, yellow #00FF00 yeşil, #0000ff avi, ff0000 kırızı v. Daha fazla renk kodu için yandaki bağlantıyı inceleyebilirsiniz. */ 2. font-family: (font-family) metinlerimizin rengini tanımlamamız için kullanılır..stil2{ font-family: Courier New", Courier, "Lucida Console", Monaco, monospace; /* aşağıdaki font aileleri de kullanılabilir. "Times New Roman", Times, Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif "Comic Sans MS", cursive, Impact, Charcoal, Tahoma, Geneva, "Lucida Sans Unicode", "Lucida Grande", sans-serif */ 3. font-size: (font-size) metinlerimizin rengini tanımlamamız için kullanılır..stil3{ font-size: 12px; /* pixel cinsinden px değeri yazıldığı gibi xx-small x-small small medium large x-large xx-large gibi değerlerde alabilir. */ 4. font-weight: Fontun kalınlık incelik durumunu belirler..stil4{ font-weight: bolder; /* 100(ince)-900(kalın)arasında bir değer alabildiği gibi bold, bolder ve normal değerlerini de alır. */ 5. font-style: Fotu eğikitaliktik olup olaaasıı elirler..stil5{ font-style: italic; /* oblique değerini de alabilir. Yine yazıyı italic yapar. normal değeri verilirse eğik yazı iptal edilir. */

7 6. line-height: iki satır arasıdaki uzaklığı elirtir...stil6{ line-height: 10px; 7. font: Yukardı alatıla fot özelliklerii tek sefer de taılaak içi kullaılır..stil7{ font: bold italic Verdana, Helvetica, Arial, sans-serif #ff00cc; Zemin (Background) özellikleri: Background alt parametreleri ve kullanımları aşağıdaki gibidir. 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position 6. background 1. background-color: Eleetleri zeiie ir rek ataak içi kullaılır..stil8{ background-color: skyblue; 2. background-image: Elementlerin zeiie resi ekleek içi kullaılır..stil9{ background-image: url(/resimlerim/resim2.gif); 3. background-repeat: background-image ile zeie eklee resi tekrarı ile özellikleri elirler..stil10{ background-image: url(/resimlerim/resim2.gif); background-repeat: no-repeat; 4. background-attachment: zeie eklee resi sayfa ile sroll etesii veya sayfaı zeii de çakılı kalasıı sağlar..stil11{ background-image: url(/resimlerim/resim2.gif); background-attachment: fixed;

8 5. background-position: background-position özelliği background-image ile elirlee resi aşlagıç oktasıı elirler..stil11{ /* En kolay kullanım şekli; Yatay değerler için: left,center,right Dikey değerler için: top, center, bottom Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler. Eğer yanlızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. */ background-image: url(deneme.gif); background-repeat: no-repeat; background-position: 10% 50%; 6. background: Bu özellik )eiakgroud ile ilgili tü özellikleri ir arada kullaıı sağlar..stil12{ background: url(/resimlerim/resim2.gif) no-repeat #0fc top left; list-style özellikleri: Liste özelliği ilk olarak listelee aaçlı kullaılsa da şidilerde eü yapııda kullaıı revaçtadır. List-style alt parametreleri ve kullanımları aşağıdaki gibidir. 1. list-style-type 2. list-style-image 3. list-style-position 4. display 5. list-style 1. list-style-type: list-style-type özelliği list-ite işaretii tipii elirler..stil13{ list-style-type: lower-roman; /* küçük roman rakamları ile listeleme yapar */ /* disc, square, decimal, circle, upper-roman gibi değerlerde alabilir. */ 2. list-style-image: disk, daire, kare v işaretler yerie resi koyak içi kullaılır..stil14{ list-style-image: url(resimlerim/3.gif); 3. list-style-position: işaretleri etii içideiside veya solda dışıdaoutside ı olaağıı elirler..stil15{ list-style-position: outside;

9 4. display: elementlere aşağıdaki üç değerden birini atamak için kullanılır: block: elementden önce ve sonra bir satır bırakır. inline : elementden önce ve sonra bir satır bırakmaz. none: element görüntülenmez. Elementi gizler..stil16{ display: none; Kenarlık (border) özellikleri: Kearlıkorder, içerik alaı ve paddig etrafıdaki ir veya daha fazla çizgiye deir. 1. boder-style 2. border-width 3. border-color 4. border 1. border-style: border-style özelliği kearlık stilii elirleeizi sağlar.ör: dottedoktalı, douleçift v..stil17{ border-style:dotted dashed solid double; /* burada üst kenalık dotted, sağ dashed, alt solid, sol double verilmiştir */ border-style: double; /* tüm kenarlıklar(üst, sağ, alt, sol) çift olur. */ 2. border-width: kearlık kalılığıı elirleek içi border-width değeri kullaılır..stil18{ Border-width:1px; 3. border-color: kearlık regii elirleek içi kullaılır..stil19{ Border-color:green; /* Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk de tanımlanabilir */ 4. border: yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır..stil20{ Border:gren solid 2px; margin özellikleri: Margi özelliği eleeti etrafıdaki oşluk olarak taılaır. margin-top margin-right margin-bottom margin-left magrin 1. magrin-top: eleeti üst kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil21{ magrin-top: 2px;

10 2. magrin-right: eleeti sağ kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil22{ magrin-right: 50%; 3. magrin-bottom: eleeti alt kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil23{ magrin-bottom: 50%; 4. magrin-left: eleeti sol kear oşluğuu elliir değer kadar veya yüzde olarak elirler..stil24{ magrin-left: 30px; 5. magrin:.stil25{ magrin: 30px 20px 20px 50px; /* sırası ile üst, sağ, alt ve sol boşluk belirtirler. */ magrin: 20px 50px; magrin: auto; /* bu şekilde girilir ise element ortalanır anlamına gelir.*/ padding özellikleri: Paddig içerik alaı ile kearlık arasıdaki aladır. /* bu şekilde girilir ise sırası ile üst 20, sağ, 50, alt 20 sol 50 anlamına gelir.*/ padding-top padding -right padding -bottom padding -left padding 1. padding-top: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil26{ padding-top: 0.25in; 2. padding-right: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil27{ padding-right: 5px; 3. padding-bottom: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil28{ padding-bottom: 50%;

11 4. padding-left: içerik alaı ile üst kearlık arasıdakiesafeyi elirler..stil29{ padding-left: 30px; 5. padding:.stil30{ padding: 30px 20px 20px 50px; /* sırası ile üst, sağ, alt ve sol, iç boşluk belirtirler. */ Kutu modeli özellikleri: Width Height Float Clear 1. width: Eleetleri aşlagıçtaki geişlik değeri auto yai kedi asıl geişliğidir. Öreği ir resi geişliği gii Yüzde değeri ebveyn elementi kıstas alarak uygulaır..stil31{ width: 300px; 2. height: Eleetleri aşlagıçtaki yükseklik değeri auto yai kedi asıl geişliğidir. Öreği ir resi yüksekliği gii Yüzde değeri ebveyn elementi kıstas alarak uygulaır..stil32{ height: 0.25in; 3. float: float özelliği ir eleetiig, tale, div vd. kouunu elirleeksağa veya sola içi kullaılır. Siz ir elemente flaot=left değeri verirseiz diğer eleetler o eleeti sağıda akar. Bu HTML, deki resieimg) uygulanan alig= left ve alig= right ile özdeş ir özelliktir..stil33{ float: left; 4. clear: Resi ve eti eleetleri diğer eleetlere göre flotig eleet olarak taılaır. clear özelliği floating uygulaaya eleete köşe taıı yapar. left değeri uyguladığı eleeti floatig eleeti ir alt solua atar, right özelliği ezer şekilde sağa atar, none özelliği eleeti aşlagıç değerii geri döndürür.stil34{ clear: left; 5. text-indent: Paragrafları ilk üleleri solda içeriye kaydırılası içi kullaıla ir özelliktir..stil35{ text-indent: 10px;

12 5. text-align: Bir eleti diğerlerie göre hizasıı erlileek içi kullaılır. Sadee etiler içi kullaılaz, diğer eleetler içide kullaılır..stil36{ text-align: left; 6. vertical-align: Bir eleeti içeriğii dikey hizalaası içi kullaılır..stil37{ vertical-align: middle; /* baseline : Orta(metin içeriğine göre), top : Yukarı(elemente göre), text-top: Yukarı (Metin içeriğine göre), middle : Orta (Elemente göre), bottom : Alt (Elemente göre), text-bottom : Alt(Metin içeriğine göre) */ 7. line-heigh: Bir eleeti içeriğii dikey hizalaası içi kullaılır..stil38{ line-height: 20px; /* Satırlar arasındaki yüksekliği belirler. normal, pixel veya yüzdedeğerlerin den birini alabilir. */ Link özellikleri: a:; a:hover ; /*Linkin imleç üzerine getirildiğindeki durumudur.*/ a:active ; /*Linkin tıklandığı andaki durumudur. */ a:visited ; /*Linkin tıklandıktan sonraki durumudur. */ 1. a: Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur a:link { color:#bf0000; 2. a;hover: Linkin imleç üzerine getirildiğindeki durumudur. a:hover { text-decoration:none; /* linklerin altı çizgili olarak gelir bunları kaldırmak için kullanılır.*/ 3. a;active: Linkin tıklandığı andaki durumudur. a:active{ background-color:#bf00bf; /* linklerin arkasına renk atar.. */ 3. a;visited: Linkin tıklandıktan sonraki durumudur. a:visited{ text-decoration:none;

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

Ekran 1 : Font Komutları Dosyası ekranı

Ekran 1 : Font Komutları Dosyası ekranı 27 Ekim 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : ETASQLFORM DĐZAYNLARDA FARKLI FONT LU YAZI TĐPĐ KULLANIMI ETASQL Doküman Düzenleyicisi olan ETASQLFORM.EXE ile Fatura, Sipariş,

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

ADOBE DREAMWEAVER CS5 CSS PANEL

ADOBE DREAMWEAVER CS5 CSS PANEL CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 ÖZELLİKLER TYPE Font-Family : Yaz lar n alaca yaz tipini belirler Font adlar al r, Tahoma, Verdana Arial gibi. font-family: Arial, Helvetica,

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin Dimension, Font, Generated Content, BACKGROUND Özellik Açıklama Değerler IE F N W3C color background background-attachment Bir öğedeki yazıların renklerini tanımlamakta kullanılır Bir yöndeki tüm art alan

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Web Sayfasını Kayıt Etmek : Share point designer ya da Notepad de oluşturduğumuz HTML kodunu kaydetmek için File Save As komutunu seçiniz. Kayıt

Detaylı

Radio butonları CSS ile makyajlamak

Radio butonları CSS ile makyajlamak Radio butonları CSS ile makyajlamak 4 Ocak Cuma 13 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/radio-butonlari-css-ile-makyajlamak Bildiğiniz gibi bazı form elementlerine (radio butonlar, check

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 5. DERS, YARD. DOÇ. DR. MEHTAP YALÇINKAYA 01.04.2011 RENK 16'lık sayı düzeninde d renk kodu girmek 16'lık sayı sisteminde de toplam 16

Detaylı

WEB TASARIM DERSLERİ

WEB TASARIM DERSLERİ HTML de Sınıflar (Class) WEB TASARIM DERSLERİ Ders 8: HTML Giriş Web tasarım kurslarımıza devam ediyoruz. Bu günlük Html de sınıfları inceleyeceğiz. Class elemanını daha önce ki derslerimizde öğrenmiştik

Detaylı

Temel HTML Eğitimi. Erman Yükseltürk

Temel HTML Eğitimi. Erman Yükseltürk Temel HTML Eğitimi Erman Yükseltürk HTML Nedir? 1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması

Detaylı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

Detaylı

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1

Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:

Detaylı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN

HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN HTML TABLO OLUŞTURMA HALİL İBRAHİM AKGÜN HTML Nedir? İşaretleme dili (HyperText Markup Language) Web sayfalarında gösterim işini sağlamak için kullanılan bir işaretleme dilidir. İşaretleme dili, metinlerin

Detaylı

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU CSS Anlatımları #1 Hazırlayan Oğuzhan CABBAROĞLU Önsöz İnternetteki çeşitli kaynaklardan, birikimlerimizden bir araya getirdiğimiz CSS Anlatımları serimizin başlangıç yazısı Css e Giriş ile takipçilerimize

Detaylı

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin Özellikleri Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

HTML (Hyper Text Markum Language)

HTML (Hyper Text Markum Language) HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

WEB TASARIMIN TEMELLERİ

WEB TASARIMIN TEMELLERİ WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.

Detaylı

DIV KAVRAMI <style> position: absolute

DIV KAVRAMI <style> position: absolute DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 3

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 3 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 3 Etiketi ve Alt Etiketleri 2 Sayfa içeriği ve biçimi ile ilgili ayarların yapıldığı etikettir. etiketinin aldığı özellikler: Alink: Aktif bağlantıların

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

BÖLÜM 5. HTML Biçimleme Belirteçleri

BÖLÜM 5. HTML Biçimleme Belirteçleri BÖLÜM 5 HTML Biçimleme Belirteçleri 12. Genel Bakış 12.1 Giriş Paragraflar, başlıklar, veya listeler için bir HTML belirtecini kullandığınızda, o belirteç sadece kullanıldığı alandaki yazıları belirlenen

Detaylı

10. STİL ŞABLONU (CSS) ÖZELLİKLERİ

10. STİL ŞABLONU (CSS) ÖZELLİKLERİ 10. STİL ŞABLONU (CSS) ÖZELLİKLERİ Bu bölümü bitirdiğinizde, Zemin özelliklerinin ne olduğunu ve nasıl kullanıldığını, Font özelliklerinin ne olduğunu ve nasıl kullanıldığını, Metin kutusu özelliklerinin

Detaylı

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir. 21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme

Detaylı

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ Hazırlayan: URL: Amaç: Ögr.Gör. Mehmet Emin ÖZCAN www.gantep.edu.tr/~ozcan/ders/internet1 MYO öğrencileri için css dökümanı Kaynaklar. GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ KASIM-2009 CSS (Cascading

Detaylı

İnternet Programcılığı

İnternet Programcılığı İnternet Programcılığı 1 Öğr.Gör. Fırat YÜCEL Akdeniz Üniversitesi Enformatik Bölümü Kaynak H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002 2 Web

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 5. ve 6. DERS Listeler ve Resim Ekleme (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 5. ve 6. DERS Listeler ve Resim Ekleme (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ 5. ve 6. DERS Listeler ve Resim Ekleme (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA LİSTELER HTML de üç tip liste hazırlama vardır Sıralı listeler (orderedlist)

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

GELİŞMİŞ İNTERNET UYGULAMALARI

GELİŞMİŞ İNTERNET UYGULAMALARI Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004

Detaylı

CSS ile Web Sayfası Oluşturma

CSS ile Web Sayfası Oluşturma CSS in en büyük avantajlarından biri ve en önemlisi başka bir koda(xhtml hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.css 1996 dan beri kullanıla gelen bir standart

Detaylı

CSS ile yazıcı çıktı işlemleri

CSS ile yazıcı çıktı işlemleri CSS ile yazıcı çıktı işlemleri Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz. HTML Tablolar Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz. Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği

Detaylı

Html Komutlar. <TITLE>... </TITLE> belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Html Komutlar. <TITLE>... </TITLE> belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r. Html Komutlar 1. ... Aras nda Kullan lan Komutlar ... belirteç çifti: Bu belirteç çifti aras na browser' n (listeleyici) ba k çubu unda görülecek olan sayfan n ba yaz r.

Detaylı

CSS i Web Sayfalarına Eklemek

CSS i Web Sayfalarına Eklemek CSS i Web Sayfalarına Eklemek CSS in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value) XML de

Detaylı

Renault Clio HP BVA Executive

Renault Clio HP BVA Executive İlan no: 272383 Renault Clio 1.6 110 HP BVA Executive Sahibinden 30.000 km'de BAYANDAN TEMİZ KULLANILMIŞ LPG'Lİ YAKIT CİMRİSİ 39.000 TL İlan tarihi: 10 Mart 2016 İlan detayları İlan detayları İl

Detaylı

HTML 6. Bölüm. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228

HTML 6. Bölüm. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228 HTML 6. Bölüm Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com (Son Güncelleme: 19.04.2015) Dersin Course Page: www.ismailkaras.com/228 Yığılmalı Stil Kağıtları / CSS-Cascading Style Sheets

Detaylı

CSS ile Sayfa Yerleşim Düzeni

CSS ile Sayfa Yerleşim Düzeni CSS ile Sayfa Yerleşim Düzeni Katmanlar (Layers) Katmanların HTML kod karşılığı Div etiketidir.. ... Katmanların genel özelliklerini şöyle sıralayabiliriz: Katmanlara genişlik ve yükseklik

Detaylı

Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir.

Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir. 3. GİRİŞ SEKMESİ Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir. 3.1. Excel 2010 da Kesme, Kopyalama, Yapıştırma ve Biçim Boyacısı Giriş sekmesinin ilk grubu olan Pano

Detaylı

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm HTML 2. Bölüm Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com (Son Güncelleme: 18.02.2015) Dersin Course Page: www.ismailkaras.com/228 HTML ile Metin Biçimlendirme / Styles - Formatting

Detaylı

LESS ile hiyerarşik ve fonksiyonel css yazmak

LESS ile hiyerarşik ve fonksiyonel css yazmak LESS ile hiyerarşik ve fonksiyonel css yazmak 13 Kasım Pazar 11 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak LESS bir çeşit css derleyicisi ve aslında

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

Web Teknolojileri ve Programla

Web Teknolojileri ve Programla Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?

Detaylı

Yüzen Kutu (Float) ve Konumlandırma (Position) Özellikleri

Yüzen Kutu (Float) ve Konumlandırma (Position) Özellikleri Yüzen Kutu (Float) ve Konumlandırma (Position) Özellikleri 1. Yüzen kutu özellikleri FLOAT ve CLEAR, CSS ile web sitesi kodlamanın en önemli özelliklerinden iki tanesidir. Float, bir elemanı Normal Akışın

Detaylı

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir?

HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir? HTTP & HTML Seval ÖZBALCI Bilgisayar Programcılığı Bölümü Ders 3 HTTP ve HTML Kullanarak İlk Web Sayfasının Oluşturulması BİRİNCİ BÖLÜM HTTP Nedir? HTML Nedir? Temel Unsurlar Editör Türleri İlk Sayfanın

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

Tim Berners-Lee Tim Berners-Lee .html .htm HTML nin Tanımı not defteri WordPad pico, joe vi WYSIWYG

Tim Berners-Lee Tim Berners-Lee .html .htm HTML nin Tanımı not defteri WordPad pico, joe vi WYSIWYG 1 Tim Berners-Lee tarafından 1989 yılında HTML ( Hyper Text Markup Language) işaretleme dili geliştirilmiştir. Tim Berners-Lee aynı zamanda WWW, HTTP ve URL yide geliştiren mucittir. Tüm keşifleri 1989-1991

Detaylı

CSS Nedir. CSS Nedir?

CSS Nedir. CSS Nedir? CSS Nedir? Css in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere

Detaylı