WEB TASARIMININ TEMELLER HTML erik l l HTML
WEB TASARIMININ TEMELLERİ HTML
İçerik l l HTML Nedir? TAG Özellikleri Temel HTML TAG’ları
HTML
HTML NEDİR? l l l 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.
HTML NEDİR? l l 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.
HTML EDİTÖRLERİ l 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 l l DREAMWEAVER MX, CS 3 MS FRONTPAGE, EXPRESSİON STUDIO OFFİCE WORD vs. . BU TÜR PROGRAMLAR İLE OLDUKÇA PROFESYONEL WEB SAYFALARI HAZIRLANABİLİR.
HTML l HTML üç kısımdan oluşur. Bunlar; l 1. <html> ; Ana bloktur. Tüm html dosyaları "<html> </html>" arasında yer alır.
HTML l 2. <head> ; Tanımlamalar yani kullanıcının browserde görmediği bölümdür. Bu kısımda site ilgili açıklamalar, arama motorları için anahtar kelimeler, site başlığı, CSS ve javasciptler gibi bölümler bulunur.
HTML l 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.
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. l 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. l Bir örnek ile göstermemiz gerekirse; <P>Bu bir HTML paragrafıdır. </P> l
TAG Nedir? l WEB sayfası oluşturmak için kullanılan komutlara tag denir. l <TAG>. . . </TAG> şeklinde kullanılırlar. HTML 4. 01 TAG referansı: http: //www. w 3 schools. com/tags/default. asp l
HTML TAGLARI (ETİKET) l l 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.
ÖRNEK HTML SAYFASI l l HER HTML BELGESİ BELİRLİ SAYIDA STANDART HTML TAGLARI İÇERMELİDİR. BİR HTML BELGESİNDE OLMASI GEREKEN KISIMLAR ŞUNLARDIR; l TEMEL <HTML> METNİ l BAŞ <HEAD> METNİ l GÖVDE <BODY> METNİ İYİ BİR HTML BELGESİNDE BU ÜÇ KISIMDA OLMALIDIR.
Ö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>
TAG ÖZELLİKLERİ l l TAGLARIN ÖZELLİKLERİ DE OLABİLİR. ÖRNEĞİN SAYFANIN ARDALAN RENGİNİ BELİRLEMEK İÇİN <BODY> TAG’ININ “BGCOLOR” ÖZELLİĞİ KULLANILIR. l l <body Bgcolor=“red”>. . . </body>
TAG ÖZELLİKLERİ l l TAG ÖZELLİKLERİ DAİMA “İSİM/DEĞER” ŞEKLİNDE BULUNURLAR. YANİ l l l Name=“value” Bgcolor=“red” ŞEKLİNDE OLURLAR.
TEMEL HTML TAGLARI l BUNLAR l l l l <html> <body> <h 1>, . . . , <h 6> <hr> <!-- GİBİ TAGLARDIR.
<HTML>. . . </HTML> l HER WEB SAYFASI BU TAG’LA BAŞLAYIP BU TAGLA BİTER. l <HTML>. . . . . </HTML>
<HEAD>. . . </HEAD> l l l 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.
<TITLE>. . . </TITLE> l l PENCERE BAŞLIĞINI BELİRLER. <HEAD> l l <TITLE>DESEM BİLGİSAYAR KURSLARI. . . </TITLE> </HEAD>
ÖRNEK. . . <TITLE> <HTML> <HEAD> <TITLE> DESEM BİLGİSAYAR KURSLARI. . . </TITLE> </HEAD> </HTML>
<BODY>. . . </BODY> l l SAYFAMIZIN GÖVDE KISMIDIR. BROWSER’DA ZİYARETÇİ TARAFINDAN GÖRÜNECEK BİLGİLERİ İÇERİR. <HTML> <BODY> l l l BU KISMA YAZILANLAR ZİYARETÇİ TARAFINDAN GÖRÜLÜR. </BODY> </HTML>
ZEMİN RENGİ (BACKGROUND) l l l İ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.
ZEMİN RENGİ (BACKGROUND) l SAYFANIZDA ZEMİN RENGİ TANIMLAMAK İÇİN <BODY> TAG’INI DEĞİŞTİRMELİSİNİZ l l l <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.
ÖRNEK 1 (ZEMİN RENGİ) <HTML> <HEAD> <TITLE> DESEM Bilgisayar Kursları. . . </TITLE> </HEAD> <BODY bgcolor="Yellow"> </BODY> </HTML>
ÖRNEK 2 (ZEMİN RENGİ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları. . . </title> </HEAD> <BODY bgcolor="FFFF 00"> </BODY> </HTML>
ZEMİN RESMİ l l l SAYFANIZIN ZEMİNİNE BİR RESİM DE KOYABİLİRSİNİZ. “BACKGROUND” ÖZELLİĞİ BU İŞLEM İÇİN KULLANILIR. BUNUN İÇİN; l l l <body background="clouds. gif"> <body background=“C: Windowsdesktopdosyalarbulutlar. gi f"> <body background="http: //www. w 3 schools. com/clouds. gif"> YAPABİLİRSİNİZ.
ÖRNEK 3 (ZEMİN RESMİ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları. . . </title> </HEAD> <BODY background= "C: WINDOWSDesktopdosyalarBulutlar. gif" > </BODY> </HTML>
TEXT DEYİMİ l l BODY İÇİNDE “TEXT” DEYİMİ KULLANILARAK SAYFADA BULUNAN YAZILARIN RENKLERİ AYARLANABİLİR. KULLANIMI l <BODY TEXT=“RENK_ADI”> ŞEKLİNDEDİR.
ÖRNEK 4 (METİN RENGİ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları. . . </title> </HEAD> <body background="C: WINDOWSDesktopdosyalarBulutlar. gif“ text="BLUE"> Bu yazı mavi renkli bir yazıdır. . </BODY> </HTML>
AÇIKLAYICI EKLEME l l l 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. . .
Ö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>
- Slides: 32