Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
WEB TASARIMININ TEMELLERİ
HTML
2
İçerik HTML Nedir? TAG Nedir? TAG Özellikleri Temel HTML TAG’ları
3
HTML
4
HTML NEDİR? HTML, “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN KISALTILMIŞIDIR. BİR HTML DOSYASI, TAGLARDAN OLUŞAN BİR METİN DOSYASIDIR. TAG’LAR, BROWSER’A WEB SAYFASININ NASIL GÖRÜNMESİ GEREKTİĞİNİ ANLATIRLAR.
5
HTML NEDİR? STANDART BİR WEB SAYFASININ UZANTISI .HTM VEYA .HTML OLMALIDIR. HTML DOSYALARI “NOT DEFTERİ” GİBİ BASİT BİR METİN EDİTÖRÜ VEYA “Expression Studio” GİBİ GELİŞMİŞ EDİTÖRLERLE OLUŞTURULABİLİRLER.
6
HTML EDİTÖRLERİ HTML KODLARINI YAZMAK İÇİN BASİT BİR METİN DÜZENLEME PROGRAMI YETERLİDİR. FAKAT KOD YAZIM KONUSUNDA ÇOK GELİŞMİŞ EDİTÖRLER MEVCUTTUR. BUNLAR DREAMWEAVER MX,CS3 MS FRONTPAGE, EXPRESSİON STUDIO OFFİCE WORD vs.. BU TÜR PROGRAMLAR İLE OLDUKÇA PROFESYONEL WEB SAYFALARI HAZIRLANABİLİR.
7
HTML HTML üç kısımdan oluşur. Bunlar;
1. <html> ; Ana bloktur.Tüm html dosyaları "<html> </html>" arasında yer alır.
8
HTML 2. <head> ; Tanımlamalar yani kullanıcının browserde görmediği bölümdür. Bu kısımda site ile ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve javasciptler gibi bölümler bulunur.
9
HTML 3. <body> ; Sayfa üzerinde görülecek herşeyin yazıldığı bölümdür. Yani sayfa içeriğinin başlangıç ve bitiş bloğu denebilir.
10
HTML işaretleri HTML de her işaretleme dilindeki gibi komutlardan oluşur, bu komutlara tag veya mark-up denir. Tag'ler herhangi bir metinden ayrılıp browser tarafından anlaşılabilsin diye "<“ ve ">" işaretlerinin arasına yazılır. Her tag'in bir başlangıcı ve bitişi vardır. Bitiş tag'lerinde, "<" işaretinden sonra tag'in bitiş tag'i olduğunu belirtmek için "/" işareti kullanılır. Bir örnek ile göstermemiz gerekirse; <P>Bu bir HTML paragrafıdır.</P>
11
TAG Nedir? WEB sayfası oluşturmak için kullanılan komutlara tag denir.
<TAG>.....</TAG> şeklinde kullanılırlar. HTML 4.01 TAG referansı:
12
HTML TAGLARI (ETİKET) HTML TAGLARI, HTML SAYFALARINI OLUŞTURMAK VE DÜZENLEMEK İÇİN KULLANILIRLAR. <TAG>.....</TAG> ŞEKLİNDE KULLANILIRLAR. TAGLARIN ARASINDA KALAN METNE “TAG İÇERİĞİ” DENİR. TAG’LER BÜYÜK HARFLE VEYA KÜÇÜK HARFLE YAZILABİLİRLER. GENELDE KÜÇÜK HARF TERCİH EDİLİR.
13
ÖRNEK HTML SAYFASI HER HTML BELGESİ BELİRLİ SAYIDA STANDART HTML TAGLARI İÇERMELİDİR. BİR HTML BELGESİNDE OLMASI GEREKEN KISIMLAR ŞUNLARDIR; TEMEL <HTML> METNİ BAŞ <HEAD> METNİ GÖVDE <BODY> METNİ İYİ BİR HTML BELGESİNDE BU ÜÇ KISIMDA OLMALIDIR.
14
ÖRNEK HTML SAYFASI <html> <head>
<title>SAYFA BAŞLIĞI</title> </head> <body> BU BENİM İLK SAYFAM. <b>BU METİNLER KALINDIR.</b> </body> </html>
15
TAG ÖZELLİKLERİ TAGLARIN ÖZELLİKLERİ DE OLABİLİR.
ÖRNEĞİN SAYFANIN ARDALAN RENGİNİ BELİRLEMEK İÇİN <BODY> TAG’ININ “BGCOLOR” ÖZELLİĞİ KULLANILIR. <body Bgcolor=“red”> </body>
16
TAG ÖZELLİKLERİ TAG ÖZELLİKLERİ DAİMA “İSİM/DEĞER” ŞEKLİNDE BULUNURLAR. YANİ Name=“value” Bgcolor=“red” ŞEKLİNDE OLURLAR.
17
TEMEL HTML TAGLARI BUNLAR GİBİ TAGLARDIR. <html> <body>
<h1>,...,<h6> <br> <hr> <!-- GİBİ TAGLARDIR.
18
<HTML>...</HTML>
HER WEB SAYFASI BU TAG’LA BAŞLAYIP BU TAGLA BİTER. <HTML> ...... </HTML>
19
<HEAD>...</HEAD>
SAYFA İLE İLGİLİ BİLGİLER VERMEK İÇİN KULLANILIR. BU BÖLÜMDEKİ BİLGİLER BROWSER’DAN GÖSTERİLMEZ. SAYFA ÖZELLİKLERİ BU BÖLÜME YAZILIR. SAYFANIN BAŞLIĞI “<TITLE>” BU BÖLÜMDEDİR.
20
<TITLE>...</TITLE>
PENCERE BAŞLIĞINI BELİRLER. <HEAD> <TITLE>DESEM BİLGİSAYAR KURSLARI...</TITLE> </HEAD>
21
ÖRNEK...<TITLE>...<TITLE>
<HTML> <HEAD> <TITLE> DESEM BİLGİSAYAR KURSLARI... </TITLE> </HEAD> </HTML>
22
<BODY>...</BODY>
SAYFAMIZIN GÖVDE KISMIDIR. BROWSER’DA ZİYARETÇİ TARAFINDAN GÖRÜNECEK BİLGİLERİ İÇERİR. <HTML> <BODY> BU KISMA YAZILANLAR ZİYARETÇİ TARAFINDAN GÖRÜLÜR. </BODY> </HTML>
23
ZEMİN RENGİ (BACKGROUND)
İYİ BİR ZEMİN RENGİ WEB SİTENİZİN DAHA GÜZEL GÖRÜNMESİNİ VE DAHA FAZLA ZİYARETÇİ GELMESİNİ SAĞLAYABİLİR. SAYFANIZIN ZEMİN RENGİNİ <BODY> TAG’I İÇERİSİNDE TANIMLAMANIZ GEREKİR. ZEMİN RENGİ İÇİN İSTERSENİZ TEK BİR RENK VEYA BİR RESİM KULLANABİLİRSİNİZ.
24
ZEMİN RENGİ (BACKGROUND)
SAYFANIZDA ZEMİN RENGİ TANIMLAMAK İÇİN <BODY> TAG’INI DEĞİŞTİRMELİSİNİZ <BODY bgcolor=“RENK_ADI”> BURADAKİ “RENK_ADI” BÖLÜMÜNDE RENKLERİN İNGİLİZCE KARŞILIĞINI GİRMEMİZ GEREKMEKTEDİR. RENK ADI YERİNE O RENGE KARŞILIK GELEN “RGB” CİNSİNDEN HEXADESİMAL SAYIYI DA YAZABİLİRİZ.
25
ÖRNEK 1 (ZEMİN RENGİ) <HTML> <HEAD> <TITLE>
DESEM Bilgisayar Kursları... </TITLE> </HEAD> <BODY bgcolor="Yellow"> </BODY> </HTML>
26
ÖRNEK 2 (ZEMİN RENGİ) <HTML> <HEAD>
<title>DESEM Bilgisayar Kursları...</title> </HEAD> <BODY bgcolor="FFFF00"> </BODY> </HTML>
27
ZEMİN RESMİ SAYFANIZIN ZEMİNİNE BİR RESİM DE KOYABİLİRSİNİZ.
“BACKGROUND” ÖZELLİĞİ BU İŞLEM İÇİN KULLANILIR. BUNUN İÇİN; <body background="clouds.gif"> <body background=“C:\Windows\desktop\dosyalar\bulutlar.gif"> <body background=" YAPABİLİRSİNİZ.
28
ÖRNEK 3 (ZEMİN RESMİ) <HTML> <HEAD>
<title>DESEM Bilgisayar Kursları...</title> </HEAD> <BODY background= "C:\WINDOWS\Desktop\dosyalar\Bulutlar.gif" > </BODY> </HTML>
29
TEXT DEYİMİ BODY İÇİNDE “TEXT” DEYİMİ KULLANILARAK SAYFADA BULUNAN YAZILARIN RENKLERİ AYARLANABİLİR. KULLANIMI <BODY TEXT=“RENK_ADI”> ŞEKLİNDEDİR.
30
ÖRNEK 4 (METİN RENGİ) <HTML> <HEAD>
<title>DESEM Bilgisayar Kursları...</title> </HEAD> <body background="C:\WINDOWS\Desktop\dosyalar\Bulutlar.gif“ text="BLUE"> Bu yazı mavi renkli bir yazıdır.. </BODY> </HTML>
31
AÇIKLAYICI EKLEME SAYFANIZDA İSTEDİĞİNİZ YERDE AÇIKLAMA BİLGİLERİ EKLEYEBİLİRSİNİZ. EKLEDİĞİNİZ AÇIKLAMALAR TARAYICI (INTERNET EXPLORER) DA GÖRÜNMEZ. AÇIKLAMA YAZISI “<!--” İLE BAŞLAR VE “-->” İLE BİTER...
32
ÖRNEK 5 (AÇIKLAMA) <HTML> <HEAD>
<title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> Bu yazı mavi renkli bir yazıdır.. </BODY> </HTML>
Benzer bir sunumlar
