Yapay Zeka ile Sanat Yarat - NightCafe'yi Deneyin!

Sanat eserlerinizi yapay zeka kullanarak hızla oluşturun.

Web Yayıncılığı Araçları Rehberi

Ekampus Resmi

Mesajınızı Kayan Yazı Alanına Eklemek İçin Buraya Tıklayın

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.

Okuyucu Önerisi: Yeni Başlayanlar İçin HTML Kılavuzu

Bir okuyucumuz olan Jennefer'ın tavsiyesi üzerine, HTML'e yeni başlayanlar için inanılmaz derecede faydalı ve kapsamlı bir rehber olan bu kaynağı da listenize ekliyoruz. Pratik adımlarla HTML öğrenmek için harika bir başlangıç noktası: HTML Kılavuzu: Yeni Başlayanlar İçin

**A note for Jennefer:** Thank you for the great suggestion! We found the guide incredibly useful and added it here for our readers.

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

Erdem Hoca İle E-Kampüs

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 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üle

Yorumlar

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


NightCafe'ye Üye Olun

Timsah kedi görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi Bataklık görseli, NightCafe ile görselleştirildi

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.

Create Art with Artificial Intelligence - Try NightCafe!

Quickly generate your artwork using artificial intelligence.

Web Publishing Tools Guide

Ekampus Image

Click Here to Add Your Message to the Scrolling Text Area

This guide will help you design the dynamic, single-page website requested by our instructor Can Güler for our Web Publishing Tools course.

Requirements:

  • Knowledge of HTML codes
  • HTML editor

HTML Editors

You will need an HTML editor to write and edit HTML codes. Some popular editors mentioned in the book are:

  • Notepad++: A free and open-source editor.
  • Atom: A free and open-source, modern editor.
  • Sublime Text: A paid editor with many advanced features.
  • Dreamweaver: A paid editor developed by Adobe.
  • Bluefish: A free and open-source, powerful editor.
  • Visual Studio Code: An extensible and free code editor developed by Microsoft.

Other Editors You Can Use

Online HTML Editors

If you have an internet connection, you can also use online HTML editors that do not require installation. Some popular online editors are:

  • Phoenix: An easy-to-use online editor.
  • TinyMCE: A WYSIWYG (What You See Is What You Get) editor.
  • JSFiddle: An ideal online editor for testing JavaScript and HTML codes.

W3Schools

You can use W3Schools to learn about web programming languages like HTML, CSS, and JavaScript. W3Schools is a free website with interactive exercises and examples.

Reader Suggestion: HTML Guide for Beginners

Based on a recommendation from one of our readers, Jennefer, we are adding this incredibly useful and comprehensive guide for HTML beginners to our list. It is a great starting point for learning HTML with practical steps: HTML Guide for Beginners

**A note for Jennefer:** Thank you for the great suggestion! We found the guide incredibly useful and added it here for our readers.

Basic HTML Codes Explained in the E-campus Live Lesson Event

<!DOCTYPE html> (Start of the HTML document)
<html> (Start of the HTML part of the HTML document)
<head> (The part containing the document's title and metadata)
<title> (The document's title)
<meta charset="UTF-8"> (Character encoding)
</head> (End of the part containing the document's title and metadata)
<body> (The document's body part)
<h1> (Headings, from largest to smallest)
<p> (Paragraph)
<img src="resim_adi.jpg" alt="Resim"> (Adding an image)
<a href="link.html"> (Adding a link)
</body> (End of the document's body part)
</html> (End of the HTML document)

<strong> (Makes the text bold)
<em> (Makes the text italic)
<br> (Adds a line break)
<hr> (Adds a horizontal line)

<ul> (Unordered list)
<li> (List item)
</ul> (End of unordered list)
<ol> (Ordered list)
<li> (List item)
</ol> (End of ordered list)

<table> (Start of table)
<tr> (Table row)
<th> (Header cell)
<td> (Data cell)
</tr> (End of table row)
</table> (End of table)

<form> (Start of form)
<input type="text"> (Text input)
<input type="submit"> (Submit button)
</form> (End of form)

Projects Conducted with Our Instructor Erdem

E-campus with Instructor Erdem

Project 1- Web design and coding project.

The main subject of the project is to develop a simple web page using one of the services that provide free hosting and domain names. Our page is an example application developed within the scope of this project.

Project 2- A blog page built on WordPress.

Academic profile:Erdem Erdoğdu

Production Tracking System Project

Production Tracking System Project

The Production Tracking System I am trying to develop using PHP, MySQL, and JavaScript to increase the efficiency of production processes. Endless thanks to my instructorMehmet Fıratfor his interest and support.

 Project 3- An educational video on YouTube.

Academic profile:Mehmet Fırat

Display of HTML Codes

Detailed view of the HTML codes used in our project. Click the link below to examine the codes and learn how our web page was created.

View Codes

Comments

Comment area created using the 3rd Party Support Service Disqus

About This Page

This web page is designed with the vision of bringing people and technology together. If you have any questions or suggestions, you can click this link to reach me. Visit the open AI website for Chatgpt.

You can add your Message to the scrolling text area by
filling out the FORM

Scrolling Text Form

The Meeting of Art with Artificial Intelligence via NightCafe

My works where I pushed the limits of my imagination with NightCafe's AI-supported drawing tools.
You can join by clicking the logo


Join NightCafe

Crocodile cat image, visualized with NightCafe Swamp image, visualized with NightCafe Swamp image, visualized with NightCafe Swamp image, visualized with NightCafe Swamp image, visualized with NightCafe Swamp image, visualized with NightCafe Swamp image, visualized with NightCafe

Techniques and Technologies Used

The following techniques and technologies were used in the creation of this web page:

  • HTML5:Used to create the basic structure of the page.
  • CSS3 and Bootstrap 5:Used to provide the page's style and responsive design.
  • MySQL:A relational database management system used to store and manage user data.
  • JavaScript and jQuery:Used for dynamic content and user interactions.
  • particles.js:Used to create particle effects in the background. This library was used to add a visual appeal to visitors.
  • FontAwesome:Used for icons.
  • Google Fonts:Used for page fonts.
  • Hyvor Talk:A third-party service was used for the comment section.
  • PHP (for example AJAX calls):Server-side scripting language used to save and display user messages.
  • Responsive Design:Arranged so that the page can be displayed appropriately on mobile and tablet devices.
  • Bootstrap Modal and Collapse Components:Used to present content in a modular and collapsible way. This improved the user experience.
  • AJAX:Used to enable data exchange without refreshing the page. This was used, for example, in processes like dynamically saving and displaying user messages.
  • Scroll Effect:jQuery's scroll feature was used to provide smooth transitions to specific sections within the page.

These technologies and effects have been brought together to offer the user a modern and interactive web experience.