WEB TASARIMININ TEMELLERİ

Slides:



Advertisements
Benzer bir sunumlar
HTML.
Advertisements

WORD 2010 KULLANIMI (GİRİŞ)
HTML
DREAMWEAVER TABLO OLUŞTURMA VE TABLO ÖZELLİKLERİ
HTML’e Devam Uygulama.
Web Bilgi Girişi Kullanım Rehberi
Ders Kitaplarında Tasarım
HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER ŞEKİL , RESİM EKLEME TABLO EKLEME
WORD ÖZET WORD’ü başlatmak için; Görev Çubuğu’ndan Başlat + Programlar + Word Yeni paragrafa başlarken ENTER tuşu kullanılır.
BTEP 203 – İnternet ProgramcIlIğI - I
Tablolar Tablolar etiketi ile belirtilir. Bir tablo etiketi satırlara bölünür ve her satır da etiketi ile sütunlara bölünür. etiketinin anlamı "table.
Temel Bilgisayar Bilimleri Dersi
Kelime İşlemci Programı
STİL SAYFALARI GELİŞTİRMEK
Support.ebsco.com DynaMed Kullanıcı Kılavuzu. Temel arama, kategorilere göre tarama, en son güncellemeleri takip etme ve sürekli tıp eğitimi puanı alma.
EXCEL 2003 Ders 1.
POWERPOİNT SUNU PROGRAMI DERSİ.
HTML’E GİRİŞ.
İNTERNET PROGRAMLAMA - 1
ÖDEVLER 1-Listeleme etiketleri 2-Color 3-Sayfa içinde bağlantı oluşturma Hilal BAYIR 2344 TUZLA TEKN İ K OKULLARI.
WEB TASARIMININ TEMELLERİ
Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır.
BAĞLANTI (KÖPRÜ) OLUŞTURMA
EXCEL DE VERİ TABANI (DATABASE) İŞLEMLERİ
Temel Bilgisayar Bilimleri Dersi
SOSYAL BİLGİLER ÖĞRETMENLİĞİ BİLGİSAYAR 2 NOT 2
WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE.
HTML KODLARI HTML Dokümanındaki ilk etiket <html>’dir.
İNTERNET PROGRAMCILIĞI I
1 İNTERNET PROGRAMLAMA - 1 Bağlantılar Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.
POWERPOİNT SUNU PROGRAMI DERSİ.
Yeliz Özcan Toondoo.com.
EĞİTİMDE BİLİŞİM TEKNOLOJİLERİ
Liste Özellikleri Html etiketlerinden bildiğimiz sıralı (ordered) ve sırasız (unordered) listelere stil vermek için liste özelliklerini kullanacağız. Sıralı.
BİÇİMLENDİRME İŞLEMLERİ
İLERİ HTML.
1 İNTERNET PROGRAMCILIĞI - 1 TABLOLAR Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.
Microsoft EXCEL (1).
5.1. Tablo Ekleme Kelime işlemci programında tablo eklemek için Ekle sekmesindeki Tablolar grubundan Tablo düğmesine tıklanır. A:Tablo; Bu kısmın üzerine.
Microsoft Office Access
WEB TASARIMININ TEMELLERİ
Hazırlayan: Yrys Moidin kyzy. 1) html; 1. html (hypertext markup language ): hipermetin işaretleme dili. 2) Bu tag wep sayfasında bulunan ilk tagdır.
WEB SİTESİ YAPIYORUM HTML
WORD WORD UYGULAMA.
Yrd. Doç. Dr. Doğan AYDOĞAN
Bilgisayar Entegre Ofis Programları-I Öğr.Gör. Türkan ÖZBAY.
Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+’da.
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar
Yrd. Doç. Dr. Murat Olcay Özcan
İnternet Programlama-I HTML. İnternet Terimleri Internet: TCP/IP tabanlı herkese açık ağdır. Özel bir ağ olmayıp, kimseye ait değil ve kimse tarafından.
İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ.
Temel Bilgisayar Bilimleri Dersi
1 / 19 © TEMEL BİLGİSAYAR BİLİMLERİ – ELEKTRONİK TABLO- I Ünite 4 Elektronik Tablo – I (Microsoft Excel) Konya, 2012 Temel Bilgisayar Bilimleri Dersi.
BİTİRME ÖDEVİNİN BAŞLIĞI Öğrencinin Numarası, Adı Soyadı
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
MS WORD Kullanımı OFFICE DÜĞMESİ HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER
HTML HTML Nedir? HTML Ne İşe Yarar?. HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, tarayıcılarla görebileceğimiz, internet.
HTML Liste Oluşturma. Liste Etiketleri HTML sayfalarında liste oluşturmak için ve etiketlerini kullanırız. Numaralı listeler oluşturmak için: Madde imli.
İleri Excel 1 Fuat Tosun.
BİLİŞİM TEKNOLOJİLERİ
WORD KULLANIMI Sayfaya sütun ve satırların oluşturduğu hücrelerden oluşan bir tablo eklememizi sağlar. TABLO EKLEMEK.
EBSCOhost ile Tam Metin Makaleler
BİTİRME ÖDEVİNİN BAŞLIĞI Öğrencinin Numarası, Adı Soyadı
İNTERNET PROGRAMCILIĞI 1
WORD KULLANIMI Office Word Programı ile çalışma sayfamıza  Yazı yazabilir,  Yazılarımızın görünümlerini değiştirebilir,  Tablolar oluşturabilir,  Resim.
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI HTML LİSTELER VE FRAMELER SAVAŞ TUNÇER.
EBSCO E-Kitaplarda Arama
powerPoint nedir
1 EXCEL DE VERİ TABANI (DATABASE) İŞLEMLERİ Excel de bir veritabanı oluşturulabilir veya başka programlarda (Access gibi) oluşturulmuş olan Veri Tabanları.
Sunum transkripti:

WEB TASARIMININ TEMELLERİ HTML

DIV <DIV> etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir bölüm (division) oluşturulmasını sağlar. DIV etiketi bir blok oluşturduğu için bir metnin içinde kullanılması durumunda ilgili metni kesecektir. Örnek: <div align=“center”> Metin Ortada </div> <div align=“right”> Metin Sağda </div>

BASEFONT VE FONT SEÇİMİ BİR WEB SAYFASINDA BİR YAZININ FONTU BELİRTİLMEMİŞSE ÖNCEDEN TANIMLI OLAN BİR FONT KULLANILIR. EĞER BİZ YAZILARIMIZDA FONT TİPİNİ BELİRTMEZSEK ÖNCEDEN TANIMLANMIŞ FONT KULLANILIR. BASEFONT DEYİMİ İLE BİZ BU FONTU DEĞİŞTİREBİLİRİZ. KULLANIMI = “<BASEFONT FACE=“Arial”>

<BIG> VE <SMALL> TAGLARI YAZILARIMIZDAKİ BAZI BÖLÜMLERİ DAHA BÜYÜK YAPMAK İSTİYORSAK “<BIG> DEYİMİNİ; DAHA KÜÇÜK YAPMAK İSTİYOR İSEK “<SMALL>” DAYİMİNİN KULLANIRIZ. <BIG> YAZIMIZ ARTK DAHA BÜYÜK</BIG> <SMALL> YAZIMIZ ŞİMDİ KÜÇÜLDÜ </SMALL>

ÖRNEK 22 (BIG SMALL) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body> <p>EĞER EKRANIMIZDA BAZI YAZILARIN <big> DAHA BÜYÜK OLMASINI İSTİYORSAK BİG DEYİMİNİ KULLANIRIM</big> BÖYLECE YAZILAR DAHA BÜYÜK OLUR. </p> <p>AYNI ŞEKİLDE <small> BAZI YAZILARIMIZDA <SMALL>DAHA DA KÜÇÜK</SMALL> YAPABİLİRİZ.</small> BUNUDA SMALL DEYİMİ İLE HALLEDİYORUZ </p> </BODY> </HTML>

TT DEYİMİ YAZILARIMIZ KULLANDIĞIMIZ YAZI FONTUNA GÖRE KARAKTER ARASI BOŞLUKLAR AYARLANIR. FAKAT “I” İLE “T” AYNI MİKTARDA BOŞLUĞA SAHİP DEĞİLLERDİR. BÜTÜN KARAKTERLER ARASI BOŞLUĞU EŞİT YAPMAK İÇİN “<TT>” TAGI KULLANILIR.

STRIKE DEYİMİ EĞER YAZILARIMIN ORTASINA BİR ÇİZGİ ÇEKMEK İSTERSEM BUNUN İÇİN STRIKE DEYİMİNİ KULLANIRIM <STRIKE> YAZI </STRIKE> STRIKE DEYİMİNİN YERİNE “<S>” DEYİMİNİ DE KULLANABİLİRİM.

PRE DEYİMİ EĞER NOT DEFTERİNDE YAZILDIĞI GİBİ YAZILARIMIZIN GÖRÜNMESİNİ İSTERSEK “<PRE>” DEYİMİNİ KULLANABİLİRİZ. BUNUN İÇİN YAZIMIZI “<PRE>” TAGI ARASINDA YAZMAMIZ GEREKİR

ÖRNEK 23 (PRE DEYİMİ) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body> <PRE> ADI SOYADI ADRESİ TELEFON ----------------------------------------------------------------------------- SEZAİ KARATOZ BORNOVA 4640917 ŞENOL GÜNGÖRDÜ BAYRAKLI 4586254 </PRE> </BODY> </HTML>

<SUB>...</SUB> METİNLERİ “ALT METİN” YAPMAYA YARAR. <P> PARAGRAF BAŞLADI. <SUB>BU KISIM ALT TARAFTA. </SUB> PARAGRAF NORMAL DEVAM EDİYOR. </P

SAYFA BAŞLIĞI SAYFA İLE İLGİLİ BİR TAKIM BİLGİLER VERMEK İÇİN HTML SAYFALARINDA “HEAD” (SAYFA BAŞLIĞI) ŞEKLİNDE ADLANDIRILAN BİR BÖLÜM VARDIR. BU BÖLÜMDEKİ BİLGİLER TARAYICIDAN GÖSTERİLMEZ. BU BÖLÜMDE SADECE AŞAĞIDAKİ TAG’LAR KULLANILABİLİR: <BASE>, <LINK>, <META>, <TITLE>, <STYLE> VE <SCRIPT>

ÖZEL HTML KARAKTERLERİ <,>,&, “, ‘ GİBİ KARAKTERLER HTML KOMUTLARI İÇİNDE KULLANILAN ÖZEL KARAKTERLERDİR. BU KARAKTERLER BROWSER’DAN GÖSTERİLMEZLER. EĞER BU TÜR KARAKTERLERİ METİN İÇİNDE KULLANMAK VE BROWSER’DAN GÖSTERMEK İSTİYORSANIZ, BUNLARA VERİLEN ÖZEL KODLARI YAZMALISINIZ.

ÖZEL HTML KARAKTERLERİ < İÇİN &LT; > İÇİN &GT; & İÇİN &AMP; “ İÇİN " X İÇİN × Boşluk İçin  

HTML LİNKLERİ HTML SAYFALARINDAKİ BİR SAYFADAN BAŞKA BİR SAYFAYA GİTMEK İÇİN “HYPERLINK”LERİ KULLANMALISINIZ. BUNUN İÇİN <A> TAGI KULLANILIR.

<A>...</A> (ANCHOR) KULLANIMI AŞAĞIDAKİ GİBİDİR. <A HREF=“URL”> GÖRÜNTÜLENECEK METİN </A> <A HREF=“www.bilkur.net”> tıklayınız...</A> HEMEN HEMEN TÜM NESNELERİ KULLANARAK LİNKLER OLUŞTURABİLİRSİNİZ. RESİMLER, SES DOSYALARI, GÖRÜNTÜ DOSYALARI, METİNLER V.B.

Örnek 24 <a> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> Dokuz eylul Üniversitesi web sayfası için <A HREF="htpp://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> </body> </html>

Örnek 25 <name> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <p>Dokuz eylul Üniversitesi web sayfası için <A HREF="http://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="#son">Sona Git</a><br> <a name="son"></a></p> </body> </html>

Örnek 26 <img> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <p>SD Üniversitesi web sayfası için <A HREF="http://www.sdu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="http://www.deu.edu.tr"><img src=“image.gif"></a> <a href="#son">Sona Git</a><br> <a name="son"></a></p> </body> </html>

Örnek 27 <mailto> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <p>Dokuz eylul Üniversitesi web sayfası için <A HREF="htpp://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="http://www.deu.edu.tr"><img src=“image.gif"></a> <a href="mailto:skaratoz@mail.com">mail yolla</a> <a href="#son">Sona Git</a><br> <a name="son"></a></p> </body> </html>

HTML LİSTELERİ WEB SAYFALARINDA NESNELERİNİZİ LİSTELER HALİNDE SIRALAYARAK DAHA DÜZENLİ GÖRÜNMELERİNİ SAĞLAYABİLİRSİNİZ. HTML LİSTELERİ SIRALI, SIRASIZ VEYA TANIMLI OLABİLİR.

SIRASIZ LİSTELER (UNORDERED LIST) SIRASIZ LİSTELERDE NESNELER MADDE İMLERİ İLE LİSTELENİR. <UL type=“square”> <LI>KAHVE</LI> <LI>ÇAY</LI> <LI>ŞEKER</LI> </UL> SONUÇ: ÇAY KAHVE ŞEKER

SIRALI LİSTELER (ORDERED LIST) ELEMANLAR NUMARALANDIRILARAK LİSTELENİR. <OL type=“1”> <LI>ÇAY</LI> <LI>KAHVE</LI> <LI>ŞEKER</LI> </OL> SONUÇ ÇAY KAHVE ŞEKER

TANIM LİSTELERİ NESNELERİ LİSTELEMEK İÇİN DEĞİL DE, BAŞLIK/ALT BAŞLIK ŞEKLİNDE SIRALAMAK İÇİN KULLANILIRLAR. <DL> <DT>KAHVE</DT> <DD>SİYAH VE SICAK İÇECEK</DD> <DT>SÜT</DT> <DD>BEYAZ VE SOĞUK İÇECEK</DD> </DL>

TANIM LİSTELERİ SONUÇ: KAHVE SÜT SİYAH VE SICAK İÇECEK BEYAZ VE SOĞUK İÇECEK

Örnek 28 <LI>KAHVE</LI> <LI>ÇAY</LI> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <UL type=“”> <LI>KAHVE</LI> <LI>ÇAY</LI> <LI>ŞEKER</LI> </UL> <OL type=“i”> </OL> <DL> <DT>KAHVE</DT> <DD>SİYAH VE SICAK İÇECEK</DD> <DT>SÜT</DT> <DD>BEYAZ VE SOĞUK İÇECEK</DD> </DL> </body> </html>

HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN <TABLE> TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ SAYFA İÇİNDEKİ NESNELER TABLOLARLA DÜZENLENİR VE HİZALANIR.

<TABLE> TABLOLAR <TR> TAGIYLA SATIRLARA VE HER SATIR DA <TD> TAGIYLA SÜTUNLARA BÖLÜNÜR. BU İŞLEM SONUNDA OLUŞTURULAN HÜCRELERDE METİNLER, LİSTELER, RESİMLER, PARAGRAFLAR, FORMLAR VE BAŞKA DİĞER NESNELER DE OLABİLİR.

<TABLE>...</TABLE> <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <table border="1"> <tr> <td>Hücre 1</td> </tr> </table> </body> </html>

BORDER ÖZELLİĞİ <TABLE BORDER=“1”> ŞEKLİNE TABLONUN SINIRLARININ KALINLIĞI BELİRTİLİR.

TABLODA BAŞLIKLAR <table border="1"> <tr> <th>İSİM</th> </tr> <td>Dokuz Eylül</td> </table>

BOŞ HÜCRELİ TABLOLAR BOŞ HÜCRELER ÇOĞU BROWSER'DA KÖTÜ BİR ŞEKİLDE KENARLARI OLMADAN GÖRÜNÜRLER. <TABLE BORDER="1" > <TR> <TD>HÜCRE 1</TD> <TD>HÜCRE 2</TD> </TR> <TD>HÜCRE 3</TD> <TD></TD> </TABLE>

BOŞ HÜCRELİ TABLOLAR BU SORUNDAN KURTULMAK İÇİN BOŞ HÜCRELERE (&NBSP;) KOYULUR VE BU ŞEKİLDE HÜCRE KENARLIKLARININ GÖRÜNMESİ SAĞLANIR. <TABLE BORDER="1" > <TR> <TD>HÜCRE 1</TD> <TD>HÜCRE 2</TD> </TR> <TD>HÜCRE 3</TD> <TD>&NBSP;</TD> </TABLE>

ÖRNEK 29 <HTML> <HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title> </head> <body> <TABLE BORDER="1" > <TR ALİGN="CENTER" VALİGN="TOP"> <TD WİDTH="94"><STRONG>ÜLKE ADI</STRONG></TD> <TD WİDTH="72"><STRONG>NÜFUSU</STRONG></TD> <TD WİDTH="153"><STRONG>BULUNDUĞU KITA</STRONG></TD> </TR> <TR> <TD>AVUSTURYA</TD> <TD>8,000,000</TD> <TD>AVRUPA</TD>

ÖRNEK 29 (devam) <TR> <TD>ALMANYA</TD> <TD>80,000,000</TD> <TD>AVRUPA</TD> </TR> <TD>TÜRKİYE</TD> <TD>70,000,000</TD> </TABLE> </body> </html>