Web Yayıncılığı Araçları Rehberi
Web Yayıncılığı Araçları dersimiz için Can Güler hocamızın istediği dinamik, tek sayfa Site tasarlamak için bu rehber size yardımcı olacaktır.
Gereklilikler:
- HTML kodları bilgisi
- HTML editörü
HTML Editörleri
HTML kodlarını yazmak ve düzenlemek için bir HTML editörüne ihtiyacınız olacak. Kitapta bahsedilen bazı popüler editörler şunlardır:
- Notepad++: Ücretsiz ve açık kaynak kodlu bir editör.
- Atom: Ücretsiz ve açık kaynak kodlu, modern bir editör.
- Sublime Text: Ücretli, ancak birçok gelişmiş özelliğe sahip bir editör.
- Dreamweaver: Adobe tarafından geliştirilen ücretli bir editör.
- Bluefish: Ücretsiz ve açık kaynak kodlu, güçlü bir editör.
- Visual Studio Code: Microsoft tarafından geliştirilen, genişletilebilir ve ücretsiz bir kod editörü.
Sizin Kullanabileceğiniz Diğer Editörler
- Jetbrains PhP Storm: Öğrenci, öğretmen ve kurumlar için ücretsiz. Form doldurarak edinebilirsiniz.
- Brackets: Adobe tarafından geliştirilen ücretsiz bir editör.
- Apache Netbeans: Ücretsiz ve açık kaynak kodlu bir editör.
- Notepad++: Yukarıda bahsedildiği gibi.
Online HTML Editörleri
İnternet bağlantınız varsa, kurulum gerektirmeyen online HTML editörlerini de kullanabilirsiniz. Bazı popüler online editörler şunlardır:
- Phoenix: Kullanımı kolay bir online editör.
- TinyMCE: WYSIWYG (What You See Is What You Get) editör.
- JSFiddle: JavaScript ve HTML kodlarını test etmek için ideal bir online editör.
W3Schools
HTML, CSS ve JavaScript gibi web programlama dilleri hakkında bilgi edinmek içinW3Schools’u kullanabilirsiniz. W3Schools, interaktif alıştırmalar ve örnekler içeren ücretsiz bir web sitesidir.
Ekampüs Canlı Ders Etkinliğinde Anlatılan Temel HTML Kodları
| <!DOCTYPE html> | (HTML belgesinin başlangıcı) |
| <html> | (HTML belgesinin HTML kısmının başlangıcı) |
| <head> | (Belgenin başlık ve meta verileri içeren kısmı) |
| <title> | (Belgenin başlığı) |
| <meta charset="UTF-8"> | (Karakter kodlaması) |
| </head> | (Belgenin başlık ve meta verileri içeren kısmının sonu) |
| <body> | (Belgenin gövde kısmı) |
| <h1> | (Başlıklar, büyükten küçüğe) |
| <p> | (Paragraf) |
| <img src="resim_adi.jpg" alt="Resim"> | (Resim ekleme) |
| <a href="link.html"> | (Link ekleme) |
| </body> | (Belgenin gövde kısmının sonu) |
| </html> | (HTML belgesinin sonu) |
| <strong> | (Metni kalınlaştırır) |
| <em> | (Metni italik yapar) |
| <br> | (Satır sonu ekler) |
| <hr> | (Yatay çizgi ekler) |
| <ul> | (Sırasız liste) |
| <li> | (Liste öğesi) |
| </ul> | (Sırasız liste sonu) |
| <ol> | (Sıralı liste) |
| <li> | (Liste öğesi) |
| </ol> | (Sıralı liste sonu) |
| <table> | (Tablo başlangıcı) |
| <tr> | (Tablo satırı) |
| <th> | (Başlık hücresi) |
| <td> | (Veri hücresi) |
| </tr> | (Tablo satırı sonu) |
| </table> | (Tablo sonu) |
| <form> | (Form başlangıcı) |
| <input type="text"> | (Metin girişi) |
| <input type="submit"> | (Gönder düğmesi) |
| </form> | (Form sonu) |
Erdem Hocamız ile Yapılan Projeler
Projemiz 1- Web tasarım ve kodlama projesi.
Projenin temel konusu, ücretsiz hosting ve alan adı sağlayan servislerden birini kullanarak, basit bir web sayfası geliştirmektir. Sayfamız, bu proje kapsamında geliştirilen örnek bir uygulamadır.
Projemiz 2- WordPress üzerine kurulu bir blog sayfası.
Akademik profil:Erdem Erdoğdu
Üretim Takip Sistemi Projesi
Üretim süreçlerinin verimliliğini artırmak için PHP, MySQL ve JavaScript kullanarak geliştirmeye çalıştığım Üretim Takip Sistemi. İlgi ve Desteği içinMehmet Fırathocama sonsuz teşekkürler.
Projemiz 3- YouTube'da bir eğitim videosu.
Akademik profil:Mehmet Fırat
HTML Kodlarının Gösterimi
Projemiz kapsamında kullanılan HTML kodlarının detaylı görünümü. Kodları incelemek ve web sayfamızın nasıl oluşturulduğunu öğrenmek için aşağıdaki bağlantıya tıklayın.
Kodları GörüntüleYorumlar
3. Parti Destek Hizmeti Diaqus Kullanılarak oluşturulmuş yorum alanı
Bu Sayfa Hakkında
Bu web sayfası, insan ve teknolojiyi bir araya getirme vizyonuyla tasarlanmıştır. Sorularınız veya önerileriniz varsa,bana ulaşmak için bu linketıklayabilirsiniz. Chatgpt içinopen ai web sitesini ziyaret edin.
FORMU doldurarak kayan yazı alanına
Mesajınızı ekleyebilirsiniz
Kayan Yazı Formu
NightCafe ile Sanatın Yapay Zeka ile Buluşması
NightCafe'nin yapay zeka destekli çizim araçlarıyla hayal gücümün sınırlarını zorladığım eserlerim.
Logoya tıklayarak üye olabilirsiniz
Kullanılan Teknikler ve Teknolojiler
Bu web sayfasının oluşturulmasında aşağıdaki teknikler ve teknolojiler kullanılmıştır:
- HTML5:Sayfanın temel yapısını oluşturmak için kullanılmıştır.
- CSS3 ve Bootstrap 5:Sayfanın stilini ve duyarlı tasarımını sağlamak için kullanılmıştır.
- MySQL:Kullanıcı verilerini saklamak ve yönetmek için kullanılan ilişkisel veritabanı yönetim sistemidir.
- JavaScript ve jQuery:Dinamik içerikler ve kullanıcı etkileşimleri için kullanılmıştır.
- particles.js:Arka planda parçacık efektleri oluşturmak için kullanılmıştır. Bu kütüphane, ziyaretçilere görsel bir çekicilik katmak amacıyla kullanılmıştır.
- FontAwesome:İkonlar için kullanılmıştır.
- Google Fonts:Sayfa yazı tipleri için kullanılmıştır.
- Hyvor Talk:Yorum bölümü için bir üçüncü taraf hizmeti kullanılmıştır.
- PHP (örnek AJAX çağrıları için):Kullanıcı mesajlarını kaydetmek ve göstermek için kullanılan sunucu tarafı script dili.
- Responsive Tasarım:Sayfanın mobil ve tablet cihazlarda uygun görüntülenebilmesi için düzenlenmiştir.
- Bootstrap Modal ve Collapse Komponentleri:İçeriklerin modüler ve çökertilebilir şekilde sunulması için kullanılmıştır. Bu sayede kullanıcı deneyimi geliştirilmiştir.
- AJAX:Sayfa yenilenmeden veri alışverişini sağlamak için kullanılmıştır. Bu, örneğin, kullanıcı mesajlarının dinamik olarak kaydedilip gösterilmesi gibi işlemlerde kullanılmıştır.
- Scroll Efekti:Sayfa içindeki belirli bölümlere yumuşak geçişler sağlamak için jQuery'nin scroll özelliği kullanılmıştır.
Bu teknolojiler ve efektler, kullanıcıya modern ve etkileşimli bir web deneyimi sunmak için bir araya getirilmiştir.