בדף זה רשימה מסודרת של אלמנטים בשפת HTML בהם ניתן להשתמש כקיצורי מקלדת של Zen Coding עם עורך הקוד בו אתם אוהבים להשתמש. אם אתם לא יודעים מהו Zen Coding ובונים אתרים (אפילו אם "במשרה חלקית") הגיע הזמן להכיר. Zen Coding יחסוך לכם המון זמן ומאמץ!
- מאמר זה הוא מאמר המשך למדריך: בונה אתרים? תקתק קוד עם Zen Coding!
- דף פרויקט בגוגל קוד: Zen HTML Elements
-
מסמך HTML
-
תגי מטא
-
תגי סקריפט
-
נפוץ בשימוש
-
תגי כותרת
-
רשימות
-
טבלאות
-
טפסים
-
שונות
איך זה הולך לעבוד?
מעל לתיבת הקוד אכתוב את קיצור הדרך בעזרתו אפשר ליצור את התג המסוים. מתחת לקיצור תופיע תיבת קוד אפורה בה התוצר של כתיבת הקיצור ולחיצה על שילוב המקשים Ctrl + E (לרוב).
קיצורי HTML
תוצאה [html] <html></html> [/html]
תוצאה [html] <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru"></html> [/html]
תוצאה [html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html lang="he"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> </body> </html> [/html]
תוצאה [html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> </body> </html> [/html]
תוצאה [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> </body> </html> [/html]
תוצאה [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> <body> </body> </html> [/html]
קיצורי Meta Data
תוצאה [html] <head></head> [/html]
תוצאה [html] <title></title> [/html]
תוצאה [html] <base href=""> [/html]
תוצאה [html] <link rel="stylesheet" type="text/css" href="style.css" media="all"> [/html]
תוצאה [html] <link rel="stylesheet" type="text/css" href="print.css" media="print"> [/html]
תוצאה [html] <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> [/html]
תוצאה [html] <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> [/html]
תוצאה [html] <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml"> [/html]
תוצאה [html] <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> [/html]
תוצאה [html] <style type="text/css"></style> [/html]
קיצורי סקריפטים
תוצאה [html] <script type="text/javascript"></script> [/html]
תוצאה [html] <script type="text/javascript" src=""></script> [/html]
תוצאה [html] <noscript></noscript> [/html]
נפוץ בשימוש
תוצאה [html] <script type="text/javascript"></script> [/html]
תוצאה [html] <body></body> [/html]
תוצאה [html] <div></div> [/html]
תוצאה [html] <p></p> [/html]
תוצאה [html] <hr> [/html]
תוצאה [html] <br /> [/html]
תוצאה [html] <blockquote></blockquote> [/html]
תוצאה [html] <a href=""></a> [/html]
תוצאה [html] <a href="https://"></a> [/html]
תוצאה [html] <a href="mailto:"></a> [/html]
תוצאה [html] <em></em> [/html]
תוצאה [html] <strong></strong> [/html]
תוצאה [html] <small></small> [/html]
תוצאה [html] <i></i> [/html]
תוצאה [html] <img src="" alt=""> [/html]
כותרות
תוצאה [html] <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> [/html]
תוצאה [html] <h1><a href=""></a></h1> [/html]
תוצאה [html] <h1 class=""><span></span></h1> [/html]
תוצאה [html] <h1 class="id-1"></h1> <h1 class="id-2"></h1> <h1 class="id-3"></h1> <h1 class="id-4"></h1> <h1 class="id-5"></h1> [/html]
רשימות
תוצאה [html] <ol></ol> <ul></ul> [/html]
תוצאה [html] <ol> <li></li> </ol>
<ul> <li></li> </ul> [/html]
תוצאה [html] <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> [/html]
טבלאות
תוצאה [html] <table></table> [/html]
תוצאה [html] <table> <tr> <td></td> </tr> </table> [/html]
תוצאה [html] <table> <tr> <td></td> <td></td> <td></td> </tr> </table> [/html]
תוצאה [html] <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> [/html]
טפסים
תוצאה [html] <form action=""></form> [/html]
תוצאה [html] <form action="" method="get"></form> [/html]
תוצאה [html] <form action="" method="post"></form> [/html]
תוצאה [html] <label for=""></label> [/html]
תוצאה [html] <input type="" /> <input type="hidden" name="" /> <input type="text" name="" id="" /> <input type="button" value="" /> [/html]
תוצאה [html] <select name="" id=""> <option value=""></option> </select> [/html]
תוצאה [html] <textarea name="" id="" cols="30" rows="10"></textarea> [/html]
שונות
תוצאה [html] <iframe></iframe> [/html]
תוצאה [html] <object data="" type=""></object> [/html]
תוצאה [html] <param name="" value="" /> [/html]
תוצאה [html] <video src=""></video> [/html]
תוצאה [html] <audio src=""></audio> [/html]
כותבים קוד ברבע מהזמן!
במה מדובר? אם הגעתם עד לכאן ואתם לא מבינים במה עוסק מאמר זה סימן שדילגתם על ראש הדף אבל הסירו דאגה. כל שעליכם לעשות כדי לדעת עוד הוא לבקר במאמר בונה אתרים? תקתק קוד עם Zen Coding!.
בדף זה פסחתי על מספר אלמנטים בהם אני לא עושה שימוש תדיר אבל אם הם חסרים לכם תמצאו קישור אל הדף המקורי שמכיל את כל הפקודות של HTML עם Zen Coding בראש הדף… אהבתם? פרגנו לנו עם לייק או מילה טובה ובהצלחה.
9 תגובות