{"id":7206,"date":"2020-05-22T16:00:59","date_gmt":"2020-05-22T13:00:59","guid":{"rendered":"https:\/\/www.kampuskod.com\/?p=7206"},"modified":"2020-05-22T16:53:58","modified_gmt":"2020-05-22T13:53:58","slug":"html-dersleri-17-html5-etiketleri-ile-web-site-proje-ornegi","status":"publish","type":"post","link":"https:\/\/www.kampuskod.com\/yazilim\/html5\/html-dersleri-17-html5-etiketleri-ile-web-site-proje-ornegi\/","title":{"rendered":"Html Dersleri 17. Html5 etiketleri ile web site proje \u00f6rne\u011fi"},"content":{"rendered":"\n

Bu b\u00f6l\u00fcmde bir web sitesinin web \u015fablonu nas\u0131l olu\u015fturuyor bunu \u00f6\u011frenece\u011fiz. Web site sayfas\u0131n\u0131 olu\u015ftururken \u00f6zellikle html5 etiketlerini kullanaca\u011f\u0131z. Bu kapsamda kullanaca\u011f\u0131m\u0131z yeni html etiketleri header, nav, section, article ve footer olacak. <\/p>\n\n\n\n

Olu\u015fturaca\u011f\u0131m\u0131z web sitesinin \u015fablonu a\u015fa\u011f\u0131daki g\u00f6rselde g\u00f6r\u00fcnd\u00fc\u011f\u00fc gibi olacakt\u0131r. Html5 etiketleri ile web site projesinin nas\u0131l olu\u015fturuldu\u011funun mant\u0131\u011f\u0131n\u0131 anlamak i\u00e7in a\u015fa\u011f\u0131daki e\u011fitim videosunu izleyin.<\/p>\n\n\n\n

Yazaca\u011f\u0131m\u0131z html kodlar\u0131<\/h2>\n\n\n\n
\n
<\/td><!DOCTYPE html><\/td><\/tr>
<\/td><html lang=”tr”><\/td><\/tr>
<\/td><head><\/td><\/tr>
<\/td><meta charset=”utf-8″ \/><\/td><\/tr>
<\/td><meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u201d><\/td><\/tr>
<\/td><title>HTML5 E\u011e\u0130T\u0130MLER\u0130<\/title><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><style type=”text\/css”><\/td><\/tr>
<\/td>header, nav, section, article, footer {<\/td><\/tr>
<\/td>border: 1px solid grey;<\/td><\/tr>
<\/td>margin: 25px;<\/td><\/tr>
<\/td>padding: 10px;<\/td><\/tr>
<\/td>}<\/td><\/tr>
<\/td><\/td><\/tr>
<\/td>nav ul li { display: inline; }<\/td><\/tr>
<\/td><\/style><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><\/head><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><body><\/td><\/tr>
<\/td><!– Header = \u00dcst Bilgi –><\/td><\/tr>
<\/td><header><\/td><\/tr>
<\/td><h1>HTML \u0130SKELET YAPISI<\/h1><\/td><\/tr>
<\/td><\/header><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><!– Menu alan\u0131 –><\/td><\/tr>
<\/td><nav><\/td><\/tr>
<\/td><ul><\/td><\/tr>
<\/td><li><a href=”#<\/a>“>Anasayfa<\/a> <\/li><\/td><\/tr>
<\/td><li><a href=”#<\/a>“>Hakk\u0131m\u0131zda<\/a> <\/li><\/td><\/tr>
<\/td><li><a href=”#<\/a>“>Kalite<\/a> <\/li><\/td><\/tr>
<\/td><li><a href=”#<\/a>“>\u0130leti\u015fim<\/a> <\/li><\/td><\/tr>
<\/td><\/ul><\/td><\/tr>
<\/td><\/nav><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><section><\/td><\/tr>
<\/td><h1>\u00dcnl\u00fc \u00dclkeler<\/h1><\/td><\/tr>
<\/td><article><\/td><\/tr>
<\/td><h1>T\u00fcrkiye<\/h1><\/td><\/tr>
<\/td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<\/td><\/tr>
<\/td>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<\/td><\/tr>
<\/td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <\/p><\/td><\/tr>
<\/td><\/article><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><article><\/td><\/tr>
<\/td><h1>\u0130ngiltere<\/h1><\/td><\/tr>
<\/td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<\/td><\/tr>
<\/td>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<\/td><\/tr>
<\/td>quis nostrud exercitation ullamco laboris nisi u <\/p><\/td><\/tr>
<\/td><\/article><\/td><\/tr>
<\/td><\/section><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><footer><\/td><\/tr>
<\/td><p>&copy; 2021 cihankoc.com.tr. T\u00fcm haklar\u0131 sakl\u0131d\u0131r.<\/p><\/td><\/tr>
<\/td><\/footer><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><\/td><\/tr>
<\/td><\/body><\/td><\/tr>
<\/td><\/html><\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div>\n\n\n\n

Yukar\u0131da yeni html5 etiketleri ile yazm\u0131\u015f oldu\u011fumuz web \u015fablonunun g\u00f6r\u00fcnt\u00fcs\u00fc a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"html5-semantic-proje-\u00f6rnegi\"
html5-semantic-proje-\u00f6rnegi<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Html5 etiketleri ile web site proje \u00f6rne\u011fi e\u011fitim videosu<\/h2>\n\n\n\n
\n