INTERNET & INTRANETS DERSİ BAHAR YILI - 2. HAFTA HTML KOMUTLARI

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

Download "INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 2. HAFTA HTML KOMUTLARI"

Transkript

1 INTERNET & INTRANETS DERSİ BAHAR YILI - 2. HAFTA HTML KOMUTLARI HTML Dersler Web sayfası hazırlamak çok zor bir iş değil... Yazdığınız bir yazıyı, o yazıyla ilgili resimler görünebilecek, varsa sesleri duyulabilecek biçimde başkalarının izlemesini sağlayabilirsiniz. Ama başka bilgisayarların bunu anlayıp, sizin yaptığınız gibi gösterebilmeleri için, ortak bir dil kullanmaları gerekir. Bu dile html denir. Browser'lar (yani bilgisayardaki bu işe yarayan programlar) ingilizce olarak yazılmak zorunda olunan bu komutlara bakıp, neyi nasıl göstereceğini anlar. HTML dili kullanarak websayfası hazırlamak için özel bir editöre gerek yoktur. Notepad kullanarak sayfalarınızı hazırlayabilirsiniz. Yazı yazmanıza yarayacak bir program (Not Defteri) nasıl açılır, nasıl kaydedilir biliyorsunuz... Biraz zor gelebilecek olan şey ise, ingilizce olan bu komutları doğru yazmak olabilir. Bir şey çalışmıyorsa, önce ingilizcesini doğru yazdım mı acaba diye kortrol etmeniz iyi olur. Sonra diğer olasılıkları kontrol edersiniz. Derslerimize başlıyayım :) 1

2 KONU 01 - HTML Komutlarına başlıyoruz! Bir web sayfası <html> ile başlar, </html> ile biter <html> <head> <title>buraya sitenin adı yazılır</title> </head> <body>sitenizdeki hemen hemen herşey daha sonra burada olacak</body> </html> <HEAD> </HEAD> Sitemizin adının yer aldığı Title'lın, Meta Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim. TITLE> </TITLE> Her sitenin bir adı olması gerekir. <title> DayDay </title> Mısra ile Bulut'nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar... <BODY>... </BODY> Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm. Buradaki komutların neler olduğunu sırayla öğreneceksiniz. Ama önce, sayfamızı şöyle bir görelim değil mi? Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! " Haydi bakalım deneyelim: 2

3 KONU 02 - İlk Sayfa Denemesi İlk sayfamızı yapıyoruz Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var. Programların içinde Donatılar... Onun içinde de not defteri... Aslında bunun yerini bildiğinize eminim :) Aşağıdaki yazıyı açtığınız sayfaya yazın. <html> <head> <title> DayDay </title> </head> <body> DayDay seni çok seviyoruz </body> </html> index adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek) Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz. O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim: Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett :)) Oldu işte! Yazdığımız diğer yazılar artık görünmüyor. Görünen sadece söylemek istediğiniz şey olacak... Görünen sadece söylemek istediğiniz şey olacak... 3

4 KONU 03 - Yazı (Tip, Renk, Büyüklük) Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz. Yazılar aşağıdaki komutlar içine yazılır. <font>... </font> Yazının büyüklüğü için "size" yazı tipi için "face" Yazı rengi için "color" komutlarını kullanmanız gerekir. Aşağıdaki örneği yazın: <font size="3" face="arial" color="red">dayday seni çok seviyoruz</font> Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın. <html> <head> <title>dayday</title> </head> <body> <font size="4" face="arial" color="red">dayday seni çok seviyoruz</font> </body> </html> İsterseniz yaptığımızın neye benzediğini bir deneyip bakalım?! Şimdi tek tek tekrar edelim. 4

5 Yazı Büyüklüğü font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz. Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür. <h1> DayDay </h1> <h2> DayDay </h2> <h3> DayDay </h3> <h4> DayDay </h4> <h5> DayDay </h5> <h6> DayDay </h6> Yazı Rengi Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız. color="red" yerine, farklı renk isimleri yazın. red kırmızı ; blue mavi ; yellow sarı ; white beyaz ; black siyah Kodlarla yazmak istiyorsanız, color="#ff0000" renk adı yerine kod yazmanız gerekir. red #ff0000 ; blue #0000ff ; yellow #ffff00 ; white #ffffff ; black # Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz. Yazı Tipi face="arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir. Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın :))) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik. 5

6 KONU 04 - Renkler (İngilizce Karşılıkları) Renk Adı red Hexadecimal Kodu FF0000 yellow FFFF00 lime 00FF00 cyan 00FFFF blue 0000FF magenta FF00FF white FFFFFF whitesmoke F5F5F5 gainsboro DCDCDC lightgrey D3D3D3 silver C0C0C0 darkgray A9A9A9 gray darkkhaki BDB76B darkgoldenrod B8860B goldenrod DAA520 gold FFD700 6

7 KONU 05 - Renkler (Zemine Göre Etkileri) aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose mistyrose navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen KONU 06 - Renkler (HTML, RGB, CMYK) FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00 G=255 B=204 G=255 B=153 G=255 B=102 G=255 B=51 G=255 B=0 R=204 G=204 B=0 M=0 Y=20 M=0 Y=40 M=0 Y=60 M=0 Y=80 M=0 Y=100 C=20 M=20 Y=100 FFCC66 FFCC00 FFCC33 CC9900 CC G=204 B=102 G=204 B=0 G=204 B=51 R=204 G=153 B=0 R=204 G=153 B=51 R=153 G=102 B=0 M=20 Y=60 M=20 Y=100 M=20 Y=80 C=20 M=40 Y=100 C=20 M=40 Y=80 C=40 M=60 Y=100 7

8 KONU 07 Yazıyı Sayfaya Yerleştirme Yazıyı İstediğimiz Yere Yerleştirmek Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar. <center>...</center> Yazınızı <center>...</center> arasına yazarsanız. Sayfanın ortasında görünür. <p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar. Sola dayalı olması için: <p>yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=center>yazınızı buraya yazacaksınız</p> Sağa dayalı olması için: <p align=right>yazınızı buraya yazacaksınız</p> Satırbaşı ve Paragraf Yapmak <br> Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. <p> Bu iki komutun diğerlerinden bir farkı var. Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez. 8

9 KONU 08 Yazı (Bold, İtalik, Çizgili) Kalın, Eğik ve Altı Çizgili Yazmak Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak. Kalın (Bold) yazı <b>yazınızı buraya yazacaksınız</b> Eğik (İtalik) yazı <i>yazınızı buraya yazacaksınız</i> Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız. Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız... Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin... Altı çizgili (underline) yazı <u>yazınızı buraya yazacaksınız</u> Peki... Hem kalın hem eğik yazmak istersek ne yapacağız? O zaman her iki kodu da peşpeşe kullanacağız. Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın. 9

10 KONU 09 Resim Eklemek Web Sayfanıza Resim Eklemek Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz. Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim:) Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim... Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim: Resim ekliyoruz <html> <head> <title>sayfamızda Resim </title> </head> <body> <p><img src="cicek.jpg"> </body> </html> Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor. Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti. Resmin ortaya hizalanması <img src="cicek.jpg align="center"> Resmin sağa hizalanması <img src="cicek.jpg" align="right"> Resmimizin boyutlarını da belirleyebiliriz. Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz. <img src="cicek.jpg" width=230 height=252> Resmin üzerine gelince görünen yazı Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir. <img src="cicek.jpg" width=230 height=252 alt="dayday web sitene hoşgeldin :)"> Şimdi bir hatırlatma... Resimlerimiz ile.htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz... 10

11 KONU 10 Tablolar Tablo Yapmayı Öğreniyoruz Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir. Tablo için kullanacağımız temel etiketler aşağıdakilerdir. Tablo oluşturmak için <table> Yatay hücre oluşturmak için Dikey hücre oluşturmak için <td> 6 bölüme (hücreye) ayrılmış bir tablo yapalım <table border="1"> <td>birinci sırada Hücre1</td> <td>birinci sırada Hücre2</td> <td>birinci sırada Hücre3</td> <td>ikinci sırada Hücre1</td> <td>ikinci sırada Hücre2</td> <td>ikinci sırada Hücre3</td> Birinci sırada Hücre1 Birinci sırada Hücre2 Birinci sırada Hücre3 İkinci sırada Hücre4 İkinci sırada Hücre5 İkinci sırada Hücre6 Hücremin içi renkli olsun (bgcolor) <table> <td bgcolor="red"> kırmızı hücrem oldu</td> Kırmızı hücrem oldu 11

12 Hücremin içinde resim istiyorum (background) <table> <td background="deneme.gif"> Heeyy burada kablumbiklerim vaarr</td> Hücremin kenar kalınlığını değiştirmek istiyorum (border) <table border="10"> <td>kenarı kalın oldu</td> kenarı kalın oldu Hücremin kenarını renkli yapmak istiyorum (bordercolor) <table border="10" bordercolor="green"> <td>kenarını yeşil yaptım</td> Hücremin içini de renkli yapmak istiyorum (bgcolor) <table border="10" bordercolor="red"> <tr bgcolor="yellow"> <td>kenarını yeşil yaptım</td> içi sarı kenarı kırmızı Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ") <table border="10" width="300" height="80" > <td>genişliği 250 yüksekliği 80 piksel</td> genişliği 300 yüksekliği 80 piksel 12

13 Hücremin içindeki yazı sağda olsun (align=" ") <table border="1" width="150" height= "100"> <td align="right"> DayDay</td> DayDay Hücremin içindeki yazı altta olsun (valign=" ") <table border="1" width="150" height="100"> <td valign="bottom"> Hücre</td> DayDay Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan) <table border="1"> <td>1</td><td>2</td><td>3</td> <td colspan="2">4</td><td>5</td> <td>6</td><td>7</td><td>8</td> Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan) <table border= "1"> <td>1</td><td>2</td><td>3</td> <td >4</td><td> rowspan="2">5</td><td>6</td> <td>7</td><td>8</td> 13

14 Yazılarım hücrenin kenarına değmesin (cellpadding) <table border="1" cellpadding="15"> <td>değmiyor</td> Değmiyor Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing) <table border="1" cellspacing="15"> <td>etrafında boşluk var</td> Canım sıkılıyor Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur. 14

15 KONU 11 Link Vermek Yazıya Link Vermek Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir. Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar. Bir yazıya nasıl link veriririz? Bir yazıya link vermek istediğimizde şu kodları yazarız: <a href=" vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa </a> Linkimizin yazısını nasıl renklendiririz? Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız: (kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..) <body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Linkimizin altında açıklama çıkmasını istiyorsak (title) Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır: <a href=" title="açıklaması"> e-postamıza link verelim(mailto) Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız: <a href="mailto:serenity@webdersleri.com "> serenity@webdersleri.com </a> Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi imi yazdım. Siz sayfanızda kendi e-postanızı yazacaksınız..) Yazımızın üzerine faremizi getirdiğimiz zaman rengini değiştirmek için CSS bilmemiz gerekiyor. CSS ile sayfalarımız daha dinamik olur.. Bunu da unutmadan söyleyelim. 15

Web Tasarımı Ders Notları (2015) Adnan Menderes Üniversitesi. Ziraat Fakültesi. Web Tasarımı (BK225) Araş. Gör. Dr. Ümit ÖZYILMAZ

Web Tasarımı Ders Notları (2015) Adnan Menderes Üniversitesi. Ziraat Fakültesi. Web Tasarımı (BK225) Araş. Gör. Dr. Ümit ÖZYILMAZ Adnan Menderes Üniversitesi Ziraat Fakültesi Web Tasarımı (BK225) Giriş Günümüzde iletişim en parlak dönemini yaşamaktadır. Bunun en başta gelen araçlarından bir tanesi medya, diğeri ise internettir. Medya

Detaylı

HTML Sayfaları. Bütün html sayfaları

HTML Sayfaları. Bütün html sayfaları HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde

Detaylı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr HTML (HyperText Markup Language) Web sayfaları hazırlamak

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 Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017

Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet

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ı

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ı

Web Tasarımının Temelleri

Web Tasarımının Temelleri 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için

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ı

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ı

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 (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ı

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ı

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ı

HTML Ders Notu (BMYO) 1/77

HTML Ders Notu (BMYO) 1/77 HTML Ders Notu (BMYO) 1/77 HTML Nedir? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir.

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ı

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ı

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ı

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ı

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ı

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ı

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ı

Dinamik Kodlama. [X] Fusion@6

Dinamik Kodlama. [X] Fusion@6 Dinamik Kodlama Ürün Grubu [X] Fusion@6 Kategori [X] Yeni Fonksiyon Versiyon Önkoşulu @6 Uygulama @6 Serisi ürünlerde, kullanıcı arabirimlerinin her yerine eklenen dinamik kodlama özelliği ile, programın

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ı

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

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ı

İ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ı

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. 1. HTML NEDİR? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz bu

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ı

Site Temizlik Projesi Kodları. Site Tasarım Çalışması -3

Site Temizlik Projesi Kodları. Site Tasarım Çalışması -3 Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5cacfb4a355c5785238607/] İndir (DOCX, 15KB) Site Tasarım

Detaylı

Örnek Ölçülü Site Kodları. Site Temizlik Projesi Kodları. İlk Hafta Sunumu ve Ön Test

Örnek Ölçülü Site Kodları. Site Temizlik Projesi Kodları. İlk Hafta Sunumu ve Ön Test Örnek Ölçülü Site Kodları [crayon-5c079862dff41089602577/] Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. [crayon-5c079862e05c5626962251/] İndir (DOCX, 12KB) İlk Hafta Sunumu

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ı

www.wikispaces.com Kullanım Kılavuzu

www.wikispaces.com Kullanım Kılavuzu www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz

Detaylı

HTML Ders Notları.

HTML Ders Notları. HTML Ders Notları 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 bir web sayfası

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Birinci Bölüm Microsoft FrontPage 2003 i Yeni Web Sitesi Oluşturmak 2 Dosyanın Kaydedilmesi

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ı

Site Temizlik Projesi Kodları

Site Temizlik Projesi Kodları Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu

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ı

WEB TABANLI PROGRAMLAMA

WEB TABANLI PROGRAMLAMA WEB TABANLI PROGRAMLAMA 6. ve 7. DERS Köprü Ekleme (hyperlinks) ve Map (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için Anchor etiketi kullanılır.

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ı

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI Kelime İşlemci Nedir? Bilgisayarda yazıların(metinlerin) yazılmasını ve düzenlenebildiği, resimlerin ve tabloların eklenebildiği yazılımların(programların) genel adıdır.

Detaylı

SUPHİ KOYUNCUOĞLU ORTAOKULU 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KAĞIDI

SUPHİ KOYUNCUOĞLU ORTAOKULU 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KAĞIDI SUPHİ KOYUNCUOĞLU ORTAOKULU 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KAĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

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ı

EM Tagı...17 FONT Tagı...17 I Tagı...17 KBD Tagı...17 PLAINTEXT Tagı...18 S veya STRIKE Tagı...18 SMALL Tagı...18 STRONG Tagı...18 SUB Tagı...

EM Tagı...17 FONT Tagı...17 I Tagı...17 KBD Tagı...17 PLAINTEXT Tagı...18 S veya STRIKE Tagı...18 SMALL Tagı...18 STRONG Tagı...18 SUB Tagı... İçindekiler Sayfası İçindekiler Sayfası...1 HTML TAG ları...4 Basit WEB tasarlama İşlemi...5 1.Telnet Yapınız...5 2.Bir ve ilk sefere mahsus olmak üzere şu işlemi yapınız...5 3.Sayfanın Test Edilmesi...6

Detaylı

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir: HTML HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece

Detaylı

Site Tasarım Çalışması -3

Site Tasarım Çalışması -3 Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;

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 & 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ı

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ı

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ı

CSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi

CSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi CSS CSS, açılımı (Cascading Style Sheet) olan ve dilimize Stil Şablonları olarak yerleşen bir işaretleme dilidir. Stil Şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek

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ı

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ı

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ı

CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ

CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir.

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ı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre

Detaylı

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir.

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Sayfa numarası ekleme: Ekle menüsünden sayfa numaraları seçeneğine tıklandığında Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Tarih ve saat ekleme: Ekle menüsünden Tarih

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ı

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ı

TAG NEDĠR? WEB SAYFASI OLUġTURMAK ĠÇĠN KULLANILAN KOMUTLARA TAG DENĠR. <TAG>...</TAG> ġeklġnde KULLANILIRLAR.

TAG NEDĠR? WEB SAYFASI OLUġTURMAK ĠÇĠN KULLANILAN KOMUTLARA TAG DENĠR. <TAG>...</TAG> ġeklġnde KULLANILIRLAR. HTML WEB NEDĠR? WORLD WIDE WEB E KISACA WEB DENĠR. WEB, INTERNET'E BAĞLANAN TÜM BĠLGĠSAYARLARIN OLUġTURDUĞU BĠR AĞDIR. BU AĞDAKĠ TÜM BĠLGĠSAYARLAR BĠRBĠRĠYLE HTTP ĠLETĠġĠM STANDARDI NI KULLANARAK KONUġUR.

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ı

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ı

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ı

WEB TASARIM I. Öğr. Gör. M. Mutlu YAPICI. Ankara Üniversitesi Elmadağ Meslek Yüksekokulu

WEB TASARIM I. Öğr. Gör. M. Mutlu YAPICI. Ankara Üniversitesi Elmadağ Meslek Yüksekokulu WEB TASARIM I Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta PHP Tanımı ve Sunucu Kurulumları 2. Hafta PHP Yazım Notasyonu

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ı

İ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ı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

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ı

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA TEMEL BİLGİSAYAR Ders Notları Yrd. Doç. Dr. Seyit Okan KARA Pencerenin ortasında bulunan beyaz sayfa, slayt tasarımında kullanacağımız sayfamızdır. Sol panelde bu slayt sayfasının küçültülmüş halde bir

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ı

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ı

Html temelleri. Ders 4

Html temelleri. Ders 4 Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

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ı

Microsoft Word 2010 ara yüzündeki bölümler aşağıda gösterilmiştir.

Microsoft Word 2010 ara yüzündeki bölümler aşağıda gösterilmiştir. Başlangıç Bu dersin amacı, öğrencilerin çalışma hayatlarında Microsoft Word programını daha etkili ve verimli kullanmalarını sağlamak ve karşılaştıkları sorunların çözümlerine ulaşma konusunda deneyim

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ı

Bo lu m 7: Hesap Tabloları

Bo lu m 7: Hesap Tabloları Bo lu m 7: Hesap Tabloları Konu 1: Dosya, Tablo ve Grafik Oluşturma Hazırlayan: S.Engin Koç Bu konu bittiğinde; Dosya oluşturma ve tabloya şekil verme Tabloya sütun, satır ekleme ve hücreleri biçimlendirme

Detaylı

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd Tüm haklar mahfuzdur. Bu yayının hiçbir kısmı ECDL Kuruluşundan izin almadan hiçbir şekilde çoğaltılamaz. Çoğaltım talepleri yayıncıya yapılmalıdır. The European Computer Driving Licence Foundation Ltd

Detaylı

EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI 2015-2016 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI MİCROSOFT EXCEL PROGRAMI Programın Açılışı: Başlat Tüm Programlar Microsoft Office Microsoft

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ı

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ı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Atlama Menüsü Eklemek:

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ı

Eğitmen. Öğretmen/Eğitmen.

Eğitmen. Öğretmen/Eğitmen. Öğretmen/Eğitmen İçindekiler VeduBox İçeriği- Öğretmen... 3 Ana Sayfa... 3 Takvimim... 4 Takvimim... 4 Akademik Takvim... 4 Derslerim... 4 Ders Profili... 5 İçerik... 5 Duyurular... 7 Ödevler:... 8 Anketler...

Detaylı

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ı

Metin İşlemleri, Semboller

Metin İşlemleri, Semboller Ankara Üniversitesi Nallıhan Meslek Yüksekokulu Metin İşlemleri, Semboller NBP108 - GRAFİK ANİMASYON il Öğr.Gör. Salih ERDURUCAN 1 / 13 3. METİN İŞLEMLERİ 3.1. Metin Aracı Animasyon yazılımı yazı yazmak

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ı

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için

Detaylı

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır.

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Üye Girişi Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Giriş Sayfası Sayfa ayarlarını buradan yapabilirsiniz. Anahtar

Detaylı

TEMEL HTML DERS NOTLARI - Table-Form

TEMEL HTML DERS NOTLARI - Table-Form Tablolar ... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir.

Detaylı

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER 1.WEB PANELE GİRİŞ www.okuladı.meb.k12.tr/mebpanel Resim1: Okul Web Siteleri Yönetim Paneli [MebWeb] Giriş Ekranı AÇIKLAMA: Okulunuzun web

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ı

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ı

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ı

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ı

İ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ı

KENDİ ÇİZİM PROGRAMIMIZI OLUŞTURALIM

KENDİ ÇİZİM PROGRAMIMIZI OLUŞTURALIM 1 Şimdi kendi çizim programınızı oluşturmaya ne dersiniz. Bunun için önce kedimizi silelim ve kalem kuklasını seçelim. Daha sonra kılıklar sekmesine gidip pencilb adlı kılığı silelim. 2 Biraz önceki alıştırmada

Detaylı