Web Geliştirme Eğitimi Dersleri, 002

25 Aralık 2007, Salı

Linkler

W3C Elementler

HTML 4.01 Komutları

  1. A
  2. ABBR
  3. ACRONYM
  4. ADDRESS
  5. APPLET
  6. AREA
  7. B
  8. BASE
  9. BASEFONT
  10. BDO
  11. BIG
  12. BLOCKQUOTE
  13. BODY
  14. BR
  15. BUTTON
  16. CAPTION
  17. CENTER
  18. CITE
  19. CODE
  20. COL
  1. COLGROUP
  2. DD
  3. DEL
  4. DFN
  5. DIR
  6. DIV
  7. DL
  8. DT
  9. EM
  10. FIELDSET
  11. FONT
  12. FORM
  13. FRAME
  14. FRAMESET
  15. H1
  16. H2
  17. H3
  18. H4
  19. H5
  20. H6
  1. HEAD
  2. HR
  3. HTML
  4. I
  5. IFRAME
  6. IMG
  7. INPUT
  8. INS
  9. ISINDEX
  10. KBD
  11. LABEL
  12. LEGEND
  13. LI
  14. LINK
  15. MAP
  16. MENU
  17. META
  18. NOFRAMES
  19. NOSCRIPT
  20. OBJECT
  1. OL
  2. OPTGROUP
  3. OPTION
  4. P
  5. PARAM
  6. PRE
  7. Q
  8. S
  9. SAMP
  10. SCRIPT
  11. SELECT
  12. SMALL
  13. SPAN
  14. STRIKE
  15. STRONG
  16. STYLE
  17. SUB
  18. SUP
  19. TABLE
  20. TBODY
  1. TD
  2. TEXTAREA
  3. TFOOT
  4. TH
  5. THEAD
  6. TITLE
  7. TR
  8. TT
  9. U
  10. UL
  11. VAR
Linkler

HTML Compatibility Guidelines

XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)

XHTML - HTML Temel Farklar

Komutlar küçük harfle yazılmalı!

  1. <body>
  2.  <div id="header">
  3.   <p>Merhaba</p>
  4.  </div>
  5. </body>

Attribute’un kesin value’su olmalı!

  1. <input type="text" name="user_name" size="25" maxlength="40"/>
  1. <select name="test_select" multiple="multiple">
  1. <input type="checkbox" checked="checked">

Empty Elements / Omit No Tag

  1. <input type="..."/>
  2. <br/>
  3. <hr/>
  4. <img src="..." alt="..."/>
  5. <meta name="..."/>
  6. <link type="text/css" rel="stylesheet" href="../index.css"/>

Diğer

  1. img tag’inin alt attribute’u olmak zorunda!
  2. form tag’inin action atrribute’u olmak zorunda. Eğer action yok ise değeri # olmalı.
    1. <form name="test_form" action="#">

DOCTYPE - Strict’e Özel

Bu durumda form’un kesinlikle id’si olmak zorunda. Hatta name yerine id mecburiyeti var. target attribute’u sadece iframe ve frameset’ler için geçerli, yani anchor’un ( a ) target diye bir attribute’u yok!

Tasarımcı - Programcı İlişkisi

Tasarımcı

  • Grafiker, biraz da olsa HTML ile neler yapılabileceğini bilmeli.
  • HTML layout’u düşünerek çalışmalı.
  • Tasarımı, sanki DIV kutularından oluşacakmış gibi hazırlamalı.
  • Grafikleri kayıt ederken, optimizasyonu, filenaming’i düşünmeli.
  • Bazı şeylerin CSS ile de halledilebileceğini bilmeli.

Programcı

  • Programcı da biraz da olsa grafiker gibi düşünebilmeli.
  • Tasarımcıya yol göstermeli, uyumlu çalışmalı.
  • Tasarımcıya yardımcı olmalı, bazı şeyleri KOD ile halledebiliyorsa bunları tasarımcı ile paylaşmalı, fikrini almalı
Linkler

Browser Archive

Bilinen Browser’lar

Evolt’un browser arşivi

XHTML Yapı : HEAD

  1. <link type="text/css" rel="stylesheet" href="mycss.css"/>
  2. <link rel="alternate" type="application/rss+xml" title="My Rss Title" href="myrss.xml"/>
  3. <link rel="shortcut icon" href="/favicon.ico"/>
  4. <link rel="icon" href="/animated_favicon1.gif" type="image/gif"/>
  5. <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="My Dictionary"/>

“Naming” / “Namespace”

Dosya isimlendirme şeması / şablonu, geliştirme ve önemi.

“IN-LINE” yada “EMBEDDING” Nedir?

CSS yada Javascript’in direk html’in içine yazılmasıdır. ( Konumuzda bu şekilde kullanıyoruz. ). Mecbur kalmadıkça in-line kullanımdan kaçınmak gerekir. Bazı durumlarda head’in içine de yazılan CSS / Javascript koda da in-line denir.

  1. <head>
  2.  <style type="text/css">
  3.   @media screen
  4.   {
  5.    body
  6.    {
  7.     font-weight: bold;
  8.    }
  9.   }
  10.  </style>
  11.  <script type="text/javascript">
  12.  //<![CDATA[
  13.   function init()
  14.   {
  15.    alert( "Merhaba" );
  16.   }
  17.  //]]>
  18.  </script>
  19. </head>
  20. <body>
  21.  <div style="font-size: 12px;">Test</div>
  22. </body>