Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

W3SCHOOLS.com içeriği ışığında Temel HTML semineri
by

BARIS OZTEKIN

on 23 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

Ankara
İstanbul
HTML
H
yper
T
ext
M
arkup
L
anguage

HTML (Hyper Text Markup Language)
HTML
"işaretleme"
dilidir. PROGRAMLAMA dili değildir.
"TAG" denilen etiketler setinden oluşur.
Bu etiketler, dokümanın içeriğini oluşturur.
HTML dokümanları etiketlerden ve metinlerden oluşur.
HTML dokümanları yaygın olarak WEB SAYFASI olarak bilinir.
barış öztekin / 2013 - Ref:http://www.w3schools.com/html/

Bu etiketler köşeli parantezler içinde ve açılış kapanış olarak, çiftler halinde kullanılırlar...

<html></html>
<body></body>
<p></p>
....

HTML Elemanları - HTML Etiketleri / (Elements - Tags)
aynı şeyi ifade ediyor gibi görünse de aslında HTML elemanı açılış etiketi ile başlayan, içerikle devam eden ve kapanış etiketi ile biten parçadır.

<p>kahrolsun "bağzı" şeyler!</p>
Tarayıcıların görevi
HTML dokümanını okuyup bir web sayfası olarak göstermekdir. HTML etiketlerini göstermezler ancak
bu etiketleri, içeriği ekranda oluşturabilmek için kullanırlar.
semantik web
Semantik: anlamları inceleyen bilim.

Semantik Web:
web içeriklerinin sadece doğal dillerde değil, aynı zamanda ilgili yazılımlar tarafından anlaşılabilir, yorumlanabilir ve kullanılabilir bir biçimde ifade edilebileceği, böylece bu yazılımların veriyi kolayca bulmasını, paylaşmasını ve bilgiyi birleştirmesini sağlamayı amaçlamaktadır.


<h1> heading
<p> paragraph
<ul> unordered list
<li> list item
...
SE
Ekran okuyucular
1991 / HTML (Tim Berners-Lee)
1993 / HTML+
1995 / HTML 2.0
1997 / HTML 3.2
1999 / HTML 4.01
2000 / XHTML 1.0
2012 / HTML5
2013 / XHTML5
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Notepad (Win)
Notepad++
Text Edit (MacOS)
....
HTML Editörler
* içeriği olamayan etiketler açılırken kapatılır ve tek olarak kullanılır. <br/> <hr/>
<!DOCTYPE html>
<html>
<body>
<h1>İşte geldim burdayım!</h1>
<p>Ben bu işte ustayım...</p>
</body>
</html>
usta.html / usta.htm
HTML Attributes
PS: <P>=<p> lowercase HTML4.0 ve XHTML
Attributes (niteleyiciler), HTML elemanları için ek bilgilendirmeler sağlarlar.

Her zaman açılış etiketi içinde yer alırlar ve isim ve değeri şeklinde kullanılırlar.
<a
href="http://www.google.com" target="_new"
>GOOGLE</a>
class="..."
id="..."
style="..."
title="..."
HTML ETİKETLERİ
HTML Headings (Başlıklar)
Başlıklar
<h1>
taginden
<h6>
tagine kadar kullanılır. <h1> en önemli üst başlıktır. <h2>...<h6> önem sırasına göre devam eder.

Hem kullanıcıların göz gezdirirken sitenizin içeriği hakkında hızlıca fikir edinmelerine yardımcı oldukları için, hem de arama motorlarının siteniz hakkında indexlemeyi doğru yapması açısından başlık tagi çok önemlidir.

İçerik metninizi büyük yada kalın yapmak için başlık tagleri kullanmayınız.
HTML Paragraphs (Paragraflar)
İçerik metinleriniz paragraflardan oluştuğunda
<p>
tagini kullanmalısınız.

<p> Neredeyse tüm tarayıcılar, paragraf tagini kapamamış olsanız da otomatik olarak kapama etiketi varmış gibi davranacaktır. Ama siz mutlaka kapama etiketini kullanın
</p>
HTML Links (Bağlantılar)
Bağlantılar neredeyse tüm web sayfalarında kullanılırlar ve
<a>
tagi ile gösterilirler. İçlerine kelime, kelime grupları, imaj ve HTML5 ile diğer html elamanlarını alabilirler.

<a
href
="http://www.google.com">Google arama motoru</a>
şekli, en temel kullanım şeklidir.

title, id, style, class, target... gibi attributeları vardır.
HTML Images (Görseller)
Görseller
<img>
tagi ile kullanılırlar. Yalnızca açılış tagi olarak kullanılır, 'attribute'larca nitelenirler. Kapanma tagleri yoktur.

<img
src=
"xtras/images/btn_play.png"
alt=
"Play button"
title=
"Play button"
width=
"200"
height=
"120"
style
...
class
...
id
... />
<img>
<map>
<area>
HTML Tables (Tablolar)
Tablolar
<table>
tagi ile oluşturulurlar. Tablolar satırlardan (table tows <tr>) ve her satır bilgi hücrelerinden (table data cells <td>) oluşur.

<table>
<tr>
<td>DATA 1</td>
<td>DATA 2</td>
</tr>
</table>

<td> tagleri içine resim, metin, tablo, .... gibi bir çok farklı içerik alabilirler.
...
Table Headers (Tablo başlıkları)
<table>
<thead>
<tr>
<th>ID</th>
<th>Kullanıcı Adı</th>
</tr>
</thead>
<tbody>
<tr>
<td>007</td>
<td>James Bond</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Kayıt Sayısı: 1</td>
</tr>
</tfoot>
</table>
* rowspan
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table

<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists (Listeler)
<ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</ol>
Ordered Lists / Unordered Lists / Description Lists
List item 1
List item 2
1. List item 1
2. List item 2
<dl>
<dt>Coffee</dt>
<dd>Black - Hot</dd>
<dt>Milk</dt>
<dd>White - Cold</dd>
</dl>
Coffee
Black - Hot
Milk
White - Cold
HTML Tag list:
http://www.w3schools.com/tags/
HTML Text Formatting
Doküman içeriğinizde kimi zaman bazı kelime ve/veya cümlelerin daha dikkat çekici olmasını istediğimizde,
<b>, <strong>, <i>
... gibi etiketler kullanırız. Tarayıcılar bu vurgulamaları
aksi bir stil tanımlanmamış
ise kalın, italik, font ailesini değiştirme gibi farklılaştırmalar giderek gösterecektir.

Kimi etiketler farklı amaçlarda kullanılmalarına rağmen, ekranda aynı şekilde görünüyor olabilirler. Örneğin çoğu tarayıcı
<b> (bold-kalın)
etiketini
<strong> (güçlü vurgu)
ile aynı şekilde kalın gösterecektir. Ancak,
"Semantik"
kodlama açısından buna dikkat etmemiz, bugün var olan yaygın tarayıcı davranışının ileride değişebileceğini göz ardı etmememiz gerekir.
CSS / style
açılış etiketi
içerik
kapanış etiketi
}
HTML
Elemanı
...................................
<b>
Defines bold text
<em>
Defines emphasized text
<i>
Defines a part of text in an alternate voice or mood
<small>
Defines smaller text
<strong>
Defines important text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
<mark>
Defines marked/highlighted text
<code>
Defines computer code text
<kbd>
Defines keyboard text
<samp>
Defines sample computer code
<var>
Defines a variable
<pre>
Defines preformatted text
<abbr>
Defines an abbreviation or acronym
<address>
D efines contact information for the author/owner of a document
<bdo>
Defines the text direction
<blockquote>
Defines a section that is quoted from another source
<q>
Defines an inline (short) quotation
<cite>
Defines the title of a work
<dfn>
Defines a definition term
HTML Text Formatting Tags
HTML "Computer Output" Tags
HTML Citations, Quotations, and Definition Tags
HTML dokümanının dışarıdan kullanacağı script ve stil dosyalarının adreslerini
<link>
, sayfa başlığını
<title>
, dokuman içine kullanılacak scriptleri
<script>
stilleri
<style>
, içerik hakkında arama motorlarına bilgi verecek tanımlamaları
<meta>
içeren bir konteynerdir. Ayrıca tarayıcılar için gerekli bilgilerin yer alacağı etikletleri
<nonscript><base>
barındırır.
<html>
<head></head>
<body>..</body>
</html>
<!DOCTYPE html>

<head>
<title>HTML head Elements</title>
<meta charset="windows-1252">
<meta name="Keywords" content="HTML,CSS,XML,JavaScript,....." />
<meta name="Description" content="Free HTML CSS JavaScript ..." />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<script type="text/javascript">
//GOOGLE ANALYTICS
</script>
<script>
function searchfield_focus(obj){...}
</script>
<!--[if IE]>
<style>
#leftcolumn{margin-left:0}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/stdtheme.css">
</head>

<body></body>

</html>
CSS ile STIL
inline
Attribute olarak kullanılır ve yalnızca o elaman için geçerli olur.
<p style="color:blue>Artık maviyim.</p>
internal
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
external
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Artık maviyim.
CSS HTML4 ile birlikte duyurulmuştur. HTML elamanlarının daha doğru ve iyi bir yolla biçimlendirilmesini amaçlamaktadır.
Page Layouts
Düzen
Yerleşim
Div Layout
Table Layout
HTML Tablolarla güzel görünen layoutlar oluşturabiliyor olsanız da, <table> tagi çizelgeler (tablolar) oluşturmak içindir.
LAYOUT oluşturmak için değil!
- sayfalarınız daha hızlı yüklenir
- hosting maliyetiniz daha düşüktür
- tasarımı değiştirmek daha hızlı ve az maliyetlidir
- görsel bütünlüğü sağlamanız ve yönetmeniz daha kolaydır
- arama motorları sizi sever
- sitenin farklı cihazlardan yazılımlardan erişimi sorunsuz olur
- standartlara uygun iş yapmış olursunuz
- semantik kodlamaya aykırı olmadığından daha doğru ve kolay anlaşılırsınız
(hem insanlarca, hem makinalarca)
- görsel değişikliği projeyi tekrar derlemeden yapabilir böylece gereksiz iş gücü - harcamaz proje maliyetini artırmazsınız
- bakım maliyetlerinizi iş gücü bakımından artmasına neden olmaz
......
Div Layout'un faydaları
İçeriğizi yönetmenizi zorlaştırır
Sayfa boyutunun gereksiz büyümesine neden olur
Bandwidth israfına neden olur
Tasarım maliyetlerini çok artırır ve çoğunlukla "kişi bağımlı" kılar
Görsel bütünlüğü sağlamak gerçekten zor ve maliyetlidir
Tablo-tabanlı sayfaların ekran okuyucular tarafından doğru okunması zordur
Mobil cihazların erişimi zordur
....
"Layout için"
TABLO kullanmanın kötü yanları
structural markup: code what you mean, mean what you code
HTML Forms (formlar)
HTML formlar, sunuculara veri aktarmak için kullanılırlar.

Formlar;
text fields, checkboxes, radio-buttons, submit buttons, lists, textarea, legend, fieldset, label
içerebilirler
<form>
...
input
...
</form>
HTML Forms - The Input Element
En önemli form elemanı <input> etiketidir.

Kullanıcıdan
bilgi almak
için kullanılır.

<input> elemanı, attribute'una göre çok çeşitli şekillerde olabilir.

Metin alanı (text field), checkbox, şifre kutusu (password), radyo butonlar (radio button), gönderme butonu (submit button)....

Text Fields
<input type="text">
şeklinde kullanılır ve kullanıcıdan tek satırda girebileceği bir bilgi girişi beklenir.

<form>
İsim: <input type="text" name="firstname">
Soyisim: <input type="text" name="lastname">
</form>
İsim: Soyisim:

<input type="password" name="pwd"/>
****
aste
risks
asterix
<form>
<input type="radio" name="city" value="Ank"/>Ankara<br/>
<input type="radio" name="city" value="Ist"/>İstanbul<br/>
</form>
Radio Buttons
<label> </label>
<label> </label>
Checkbox
<form>
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car"/>I have a car
</form>
I have a bike
I have a car
<label> </label>
<label> </label>
Dropdown Lists / <Select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<form name="input" action="html_form_action.asp" method="get">
Kullanıcı adı: <input type="text" name="user"/>
<input type="submit" value="GÖNDER!"/>
</form>
Submit Button
Kullanıcı adı:
GÖNDER!
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
<input type=" "/>
<iframe>
<iframe src="http://www.w3schools.com"></iframe>
tarayıcınız iframe'i desteklememektedir
align
frameborder
longdesc
marginheight
marginwidth
scrolling
sandbox
seamless
srcdoc
height
width
name
src
<iframe> attributes
HTML 4.0
XHTML1.0
HTML5
teşekkürler
1/4
2/4
3/4
Full transcript