HTML, CSS და PHP: საბოლოო მოტყუების ფურცელი

📥 ჩამოტვირთეთ ჩემი HTML, CSS და PHP მოტყუების ფურცლებიშეავსეთ ყველაფერი, რაც უნდა იცოდეთ და დაიმახსოვროთ კოდირების ამ სამ ენასთან დაკავშირებით.

• რა არის HTML?
• HTML5 მაგალითები (კოდი PlayGround)
• 📥 HTML მოტყუების ფურცელი
• რა არის CSS?
• 📥 CSS მოტყუების ფურცელი
• რა არის PHP?
• 📥 PHP მოტყუების ფურცელი
• 📥 HTML CSS და PHP მოტყუების ფურცელი

კოდირების ხელოვნებას შეიძლება წლები დასჭირდეს, რათა სრულად დაეუფლოს პროგრამირების ენების ყველა ტეგს, სინტაქსს და ხშირად ერთმანეთში გადახლართულ სხვა ელემენტებს.

უფრო გამოცდილი დეველოპერებიც კი შეიძლება მოხვდნენ ხაფანგში, რომ დაივიწყონ სწორი სინტაქსი კონკრეტული ამოცანებისთვის. როგორც ასეთი, არარეალურია მეტი მწვანეს მოლოდინი ვებ დეველოპერები ხელოვნების უნაკლო ათვისება.

სწორედ ამიტომ მოტყუების ფურცლები HTML, CSS და PHP-სთვის ძალიან სასარგებლოა, მიუხედავად იმისა, რამდენი ხანია ვარჯიშობთ. ის ემსახურება როგორც სწრაფი სახელმძღვანელო სწორი ბრძანებების და სინტაქსების მოსაძებნად, რაც საშუალებას გაძლევთ ფოკუსირება მოახდინოთ რეალურ ვებ განვითარებაზე.

ქვემოთ ნახავთ ვიზუალურად დახრილი თაღლითობის ფურცლებს, რომლებსაც წინ უძღვის სწრაფი განახლებები, რომლებიც დაგეხმარებათ კოდირების მცდელობებში. მე ასევე გავაკეთე ის, რომ ადვილად მონიშნოთ, შეინახოთ ან დაბეჭდოთ თქვენი მოხერხებულობისთვის.

რა არის HTML?

HTML ნიშნავს ჰიპერტექსტის მარკირების ენას – კოდი, რომელიც გამოიყენება ვებ გვერდის სტრუქტურისა და მისი შინაარსის შესაქმნელად.

მარკირების ეს ენა შედგება ელემენტების სერიისგან, რომლებიც გამოიყენება შინაარსის გარკვეული სახით გამოჩენის ან ფუნქციონირებისთვის და წარმოადგენს ყველა ვებსაიტის წინა კოდის ძირითად ნაწილს.

HTML არის ვებ გვერდების სტრუქტურის აღწერის ენა… HTML-ით, ავტორები აღწერენ გვერდების სტრუქტურას მარკირების გამოყენებით. ენის ელემენტები ასახელებენ შინაარსის ნაწილებს, როგორიცაა აბზაცი, სია, ცხრილი და ა.შ. - W3.org-დან

მაგალითად, შეგიძლიათ ჩასვათ ან გადაიტანოთ შინაარსის სხვადასხვა ნაწილი - სადაც თანდართული ტეგები შეუძლიათ სიტყვის ან სურათის ჰიპერბმულის შექმნას სხვა გვერდზე. თქვენ ასევე შეგიძლიათ გამოიყენოთ ეს სიტყვების დახრილად დასაწერად და სხვათა შორის შრიფტების უფრო დიდი ან პატარა გასაკეთებლად.

როგორც აღნიშნა W3, ზოგიერთი სხვა რამ, რაც HTML საშუალებას გაძლევთ გააკეთოთ, მოიცავს:

• ონლაინ დოკუმენტების გამოქვეყნება სათაურები, ტექსტი, ცხრილები, სიები, ფოტოებიდა ა.შ.
• ონლაინ ინფორმაციის მოძიება ღილაკზე დაწკაპუნებით ჰიპერტექსტური ბმულები.
• პროექტირება ფორმები დისტანციური სერვისებით ტრანზაქციების განსახორციელებლად მოიძიეთ ინფორმაცია, გააკეთეთ დაჯავშნა ან შეუკვეთეთ პროდუქტებისხვა ფუნქციებთან ერთად.
• მათ შორის ცხრილები, ვიდეო კლიპები და სხვა მედია და განაცხადები უკვე თქვენს დოკუმენტებში.

ასე რომ, თუ თქვენ უნდა გააკეთოთ ხაზი "ჩემი ძაღლი ძალიან საყვარელია" დადექით თავისთავად, შეგიძლიათ მიუთითოთ, რომ ეს არის აბზაცი, აბზაცების ტეგებში ჩასმით (დაწვრილებით ამის შესახებ მოგვიანებით), რომელიც ასე გამოიყურება: ჩემი ძაღლი ძალიან ტკბილია

რა განსხვავებაა HTML-სა და HTML5-ს შორის?

როგორც სახელი ვარაუდობს, HTML5 არის HTML სტანდარტის მეხუთე ვერსია. ის მხარს უჭერს ვიდეოსა და აუდიოს ენაში ინტეგრაციას, რაც ამცირებს მესამე მხარის დანამატებისა და ელემენტების საჭიროებას.

ქვემოთ მოცემულია ძირითადი განსხვავებები HTML-სა და HTML5-ს შორის:

გარდა ამისა, არსებობს HTML-ის მრავალი ელემენტი, რომლებიც შეცვლილია ან ამოღებულია HTML5-დან. Ესენი მოიცავს:

• – შეიცვალა
• – შეიცვალა
• – შეიცვალა
• - ამოღებულია
• - ამოღებულია
• - ამოღებულია
• - ახალი ტეგი არ არის. იყენებს CSS.
• - ახალი ტეგი არ არის. იყენებს CSS.
• - ახალი ტეგი არ არის. იყენებს CSS.
• - ახალი ტეგი არ არის. იყენებს CSS.
• - ახალი ტეგი არ არის. იყენებს CSS.

იმავდროულად, HTML5 ასევე შეიცავს უამრავ ახლად დამატებულ ელემენტს. Ესენი მოიცავს:

HTML5 მაგალითები (კოდი PlayGround)

სემანტიკური სტრუქტურის მაგალითები

In HTML5 არსებობს რამდენიმე სემანტიკური ელემენტი, რომელიც შეიძლება გამოყენებულ იქნას ვებ გვერდის სხვადასხვა ნაწილის დასადგენად. აქ არის ყველაზე გავრცელებული:

<header>
  <h1>Guide to Search Engines</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>

ძირითადი ტექსტის ფორმატირების მაგალითები

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

<button name="button">I am a Button. Click me!</button>

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

<p>This is normal text. <code>This is code.</code> This is normal text.</p>

<p>The movie starts at <time>20:00</time>.</p>

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>

ცხრილის მაგალითები

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>

მედიის მაგალითები

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>

დაასრულეთ HTML მოტყუების ფურცელი

მიუხედავად იმისა, გამოცდილი დეველოპერი ხართ თუ ვინმე, ვინც უბრალოდ ცდილობს ფეხის დატენიანებას ინდუსტრიაში, ყოველთვის გეხმარებათ HTML ფორმატირების მოტყუების ფურცელი მოხერხებული. და მე შევქმენი ისეთი, რომელიც დაგეხმარებათ ყოველ ნაბიჯზე.

ჩამოტვირთეთ HTML მოტყუების ფურცელი

რა არის CSS?

კასკადური სტილის ფურცლები ან CSS აღწერს, თუ როგორ გამოჩნდება HTML ელემენტები ეკრანზე. იმის გამო, რომ მას შეუძლია აკონტროლოს მრავალი გვერდის განლაგება ერთდროულად, დაზოგავს თქვენს დროსა და ძალისხმევას.

CSS არის ვებ გვერდების პრეზენტაციის აღწერის ენა, ფერების, განლაგებისა და შრიფტების ჩათვლით. ის საშუალებას აძლევს ადამიანს მოერგოს პრეზენტაცია სხვადასხვა ტიპის მოწყობილობებს, როგორიცაა დიდი ეკრანები, პატარა ეკრანები ან პრინტერები. - W3.org-დან

რა განსხვავებაა HTML-სა და CSS-ს შორის?

მიუხედავად იმისა, რომ HTML და CSS ორივე ენაა, რომელიც გამოიყენება ვებგვერდებისა და აპლიკაციების შესაქმნელად, მათ აქვთ განსხვავებული ფუნქციები.

HTML არის ის, რასაც იყენებთ სტრუქტურისა და შინაარსის კარნახისთვის, რომელიც გამოჩნდება ვებგვერდზე.

CSS, მეორე მხრივ, გამოიყენება მოდიფიკაციისთვის ვებ დიზაინი ვებგვერდზე არსებული HTML ელემენტების (მათ შორის განლაგება, ვიზუალური ეფექტები და ფონის ფერი).

HTML ქმნის სტრუქტურას და შინაარსს, CSS აკეთებს დიზაინს ან სტილს. HTML და CSS ერთად ქმნიან ვებგვერდის ინტერფეისს.

რა არის CSS სინტაქსი?

CSS სინტაქსი შედგება სელექტორისა და დეკლარაციის ბლოკისგან.

ამომრჩეველი განსაზღვრავს HTML ელემენტს, რომელიც უნდა იყოს სტილიზებული, ხოლო დეკლარაციის ბლოკი შეიცავს ერთ ან მეტ დეკლარაციას ან CSS-ის წყვილს, თვისების სახელს და მნიშვნელობას შორის ორწერტილით.

დეკლარაციები გამოყოფილია მძიმით და დეკლარაციის ბლოკები ყოველთვის ჩასმულია ხვეული ბრეკეტებით.

მაგალითად, თუ გსურთ შეცვალოთ თქვენი სათაურის 1 გარეგნობა, თქვენი CSS სინტაქსი ასე გამოიყურება: h1 {color:red; შრიფტის ზომა: 16pc;}

დაასრულეთ CSS მოტყუების ფურცელი

CSS საკმარისად მარტივი გამოსაყენებელია. გამოწვევა იმაში მდგომარეობს, რომ ბევრი სელექციონერი და დეკლარაციაა, რომ მათი დამახსოვრება რთულია თუ შეუძლებელი. თუმცა, თქვენ არ გჭირდებათ მათი დამახსოვრება.

აი მოტყუების ფურცელი CSS და CSS3-ისთვის რომელიც შეგიძლიათ გამოიყენოთ ნებისმიერ დროს.

ჩამოტვირთეთ CSS Cheat Sheet

რა არის PHP?

PHP არის აკრონიმი Hypertext Preprocessor-ის, პოპულარული ღია კოდის, HTML-ში ჩაშენებული სკრიპტირების ენა, რომელიც გამოიყენება დინამიური ვებსაიტების, ვებ აპლიკაციების ან სტატიკური ვებსაიტების შესაქმნელად.

მას შემდეგ, რაც PHP არის სერვერის მხარის ენა, მისი სკრიპტები შესრულებულია სერვერზე (არა ბრაუზერში) და მისი გამომავალი არის ჩვეულებრივი HTML ბრაუზერზე.

PHP არის ფართოდ გამოყენებული ღია კოდის ზოგადი დანიშნულების სკრიპტირების ენა, რომელიც განსაკუთრებით შესაფერისია ვებ განვითარებისთვის და შეიძლება იყოს ჩასმული HTML-ში. - PHP.net-დან

ეს სერვერის სკრიპტირების ენა მუშაობს სხვადასხვა ოპერაციულ სისტემაზე, მათ შორის Windows, Mac OS, Linux და Unix. ის ასევე თავსებადია უმეტეს სერვერებთან, როგორიცაა Apache და IIS.

სხვა ენებთან შედარებით, როგორიცაა ASP და JSP, PHP ადვილი შესასწავლია დამწყებთათვის. PHP ასევე გთავაზობთ უამრავ მახასიათებელს, რომელიც სჭირდება მოწინავე დონის დეველოპერებს.

რა განსხვავებაა PHP-სა და HTML-ს შორის?

მიუხედავად იმისა, რომ ორივე ენა გადამწყვეტია ვებ უზრუნველყოფა, PHP და HTML განსხვავებულია რამდენიმე თვალსაზრისით.

მთავარი განსხვავება მდგომარეობს იმაში, რისთვის გამოიყენება ეს ორი ენა.

HTML გამოიყენება კლიენტის მხარისთვის (ან ფრონტ-ენდის) განვითარება, ხოლო PHP გამოიყენება სერვერის მხარეს განვითარება.

HTML არის ენა, რომელსაც დეველოპერები იყენებენ ვებსაიტზე შინაარსის ორგანიზებისთვის, როგორიცაა ტექსტის, სურათების, ცხრილების და ჰიპერბმულების ჩასმა, ტექსტის ფორმატირება და ფერების მითითება.

იმავდროულად, PHP გამოიყენება მონაცემთა ბაზიდან მონაცემების შესანახად და ამოსაღებად, ლოგიკური ოპერაციების შესასრულებლად, ელ.წერილებზე გასაგზავნად და პასუხის გასაცემად, ფაილების ატვირთვისა და ჩამოტვირთვის, დესკტოპის აპლიკაციების შესაქმნელად და სხვა.

კოდის ტიპის მიხედვით, HTML არის სტატიკური, ხოლო PHP დინამიური. HTML კოდი ყოველთვის ერთი და იგივეა ყოველ ჯერზე მისი გახსნისას, ხოლო PHP შედეგები განსხვავდება მომხმარებლის ბრაუზერის მიხედვით.

ახალი დეველოპერებისთვის ორივე ენა ადვილი შესასწავლია, თუმცა სწავლის მრუდი უფრო მოკლეა HTML-ით, ვიდრე PHP.

დაასრულეთ PHP მოტყუების ფურცელი

თუ თქვენ ხართ დამწყები პროგრამისტი, რომელსაც სურს უფრო მეტად ფლობდეს PHP-ს ან გააფართოვოს თქვენი ცოდნა მის შესახებ, აქ არის PHP მოტყუების ფურცელი შეგიძლიათ სწრაფად მიმართოთ.

ეს თაღლითური ფურცელი შედგება PHP ფუნქციებისგან – რომლებიც არის მალსახმობები ფართოდ გამოყენებული კოდებისთვის – რომლებიც ჩაშენებულია სკრიპტირების ენაში.

ჩამოტვირთეთ PHP Cheat Sheet

საბოლოო HTML, CSS და PHP მოტყუების ფურცელი

მიუხედავად იმისა, ხართ გამოცდილი დეველოპერი თუ უბრალოდ ვინმე, ვინც იწყებს კოდირებას, ძალიან კარგია, რომ გქონდეთ ის, რასაც ყოველთვის შეგიძლიათ დაუბრუნდეთ ცნობისთვის ან უბრალოდ განაახლოთ თქვენი მეხსიერება.

და როგორც საჩუქარი დეველოპერებს შორის, რომლებიც ჟონგლირებენ HTML, CSS და PHP, აქ არის ULTIMATE მოტყუების ფურცელიშეავსეთ ყველაფერი, რაც უნდა იცოდეთ და დაიმახსოვროთ კოდირების ამ სამ ენასთან დაკავშირებით:

ჩამოტვირთეთ კომბინირებული HTML, CSS და PHP მოტყუების ფურცელი