אלמנטים של Zen Coding – עבור HTML

בדף זה רשימה מסודרת של אלמנטים בשפת HTML בהם ניתן להשתמש כקיצורי מקלדת של Zen Coding עם עורך הקוד בו אתם אוהבים להשתמש. אם אתם לא יודעים מהו Zen Coding ובונים אתרים (אפילו אם "במשרה חלקית") הגיע הזמן להכיר. Zen Coding יחסוך לכם המון זמן ומאמץ!

 

  • מסמך HTML
  • תגי מטא
  • תגי סקריפט
  • נפוץ בשימוש
  • תגי כותרת
  • רשימות
  • טבלאות
  • טפסים
  • שונות

איך זה הולך לעבוד?

מעל לתיבת הקוד אכתוב את קיצור הדרך בעזרתו אפשר ליצור את התג המסוים. מתחת לקיצור תופיע תיבת קוד אפורה בה התוצר של כתיבת הקיצור ולחיצה על שילוב המקשים Ctrl + E (לרוב).

קיצורי HTML

יצירת תג HTML +
קוד

	html (שילוב המקשים ctrl+e)
	
תוצאה
	<html></html>
	

יצירת מסמך XML +
קוד

	html:xml (שילוב המקשים ctrl+e)
	
תוצאה
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>
	

יצירת מסמך html 4 Traditional +
קוד

	html:4t (שילוב המקשים ctrl+e)
	
תוצאה
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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 4 strict +
קוד

	html:4s (שילוב המקשים ctrl+e)
	
תוצאה
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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>
	

יצירת מסמך xhtml Traditional +
קוד

	html:xt (שילוב המקשים ctrl+e)
	
תוצאה
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://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>
	

יצירת מסמך xhtml Strict +
קוד

	html:xs (שילוב המקשים ctrl+e)
	
תוצאה
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://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>
	

קיצורי Meta Data

יצירת תג head +
קוד

	head (שילוב המקשים ctrl+e)
	
תוצאה
	<head></head>
	

יצירת תג title +
קוד

	title (שילוב המקשים ctrl+e)
	
תוצאה
	<title></title>
	

יצירת תג base +
קוד

	base (שילוב המקשים ctrl+e)
	
תוצאה
	<base href="">
	

יצירת תג שמכליל קובץ Css +
קוד

	link:css (שילוב המקשים ctrl+e)
	
תוצאה
	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	

יצירת תג שמכליל קובץ Css להדפסה +
קוד

	link:print (שילוב המקשים ctrl+e)
	
תוצאה
	<link rel="stylesheet" type="text/css" href="print.css" media="print">
	

יצירת תג שמגדיר קובץ favicon +
קוד

	link:favicon (שילוב המקשים ctrl+e)
	
תוצאה
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	

יצירת תג שמודיע על קובץ Rss Feed +
קוד

	link:rss (שילוב המקשים ctrl+e)
	
תוצאה
	<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
	

יצירת תג שמודיע על קובץ Atom Feed +
קוד

	link:atom (שילוב המקשים ctrl+e)
	
תוצאה
	<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">
	

יצירת תג מטא עם קידוד utf-8 +
קוד

	meta:utf (שילוב המקשים ctrl+e)
	
תוצאה
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	

יוצר תגיות עבור סקריפט CSS בראש המסמך +
קוד

	style (שילוב המקשים ctrl+e)
	
תוצאה
	<style type="text/css"></style>
	

קיצורי סקריפטים

יצירת תג המודיע על סקריפט JavaScript +
קוד

	script (שילוב המקשים ctrl+e)
	
תוצאה
	<script type="text/javascript"></script>
	

יצירת תג המודיע על המאפשר לקרוא לסקריפט +
קוד

	script:src (שילוב המקשים ctrl+e)
	
תוצאה
	<script type="text/javascript" src=""></script>
	

יצירת תג המודיע על חלק בלי סקריפט +
קוד

	noscript (שילוב המקשים ctrl+e)
	
תוצאה
	<noscript></noscript>
	

נפוץ בשימוש

יצירת תג המודיע על סקריפט JavaScript +
קוד

	script (שילוב המקשים ctrl+e)
	
תוצאה
	<script type="text/javascript"></script>
	

יצירת תג גוף מסמך +
קוד

	body (שילוב המקשים ctrl+e)
	
תוצאה
	<body></body>
	

יצירת תג DIV +
קוד

	div (שילוב המקשים ctrl+e)
	
תוצאה
	<div></div>
	

יצירת תג פסקה +
קוד

	p (שילוב המקשים ctrl+e)
	
תוצאה
	<p></p>
	

יצירת תג קו חוצץ +
קוד

	hr (שילוב המקשים ctrl+e)
	
תוצאה
	<hr>
	

יצירת תג שובר שורה +
קוד

	br (שילוב המקשים ctrl+e)
	
תוצאה
	<br />
	

יצירת תג ציטוט +
קוד

	blockquote (שילוב המקשים ctrl+e)
	
תוצאה
	<blockquote></blockquote>
	

יצירת תג קישור +
קוד

	a (שילוב המקשים ctrl+e)
	
תוצאה
	<a href=""></a>
	

יצירת תג קישור עם http:// מוכן +
קוד

	a:link (שילוב המקשים ctrl+e)
	
תוצאה
	<a href="http://"></a>
	

יצירת תג קישור מוכן לכתובת אימייל +
קוד

	a:mail (שילוב המקשים ctrl+e)
	
תוצאה
	<a href="mailto:"></a>
	

יצירת תג קו תחתון +
קוד

	em (שילוב המקשים ctrl+e)
	
תוצאה
	<em></em>
	

יצירת תג טקסט מודגש +
קוד

	strong או str (שילוב המקשים ctrl+e)
	
תוצאה
	<strong></strong>
	

יצירת תג טקסט מוקטן +
קוד

	small (שילוב המקשים ctrl+e)
	
תוצאה
	<small></small>
	

יצירת תג טקסט נטוי +
קוד

	i (שילוב המקשים ctrl+e)
	
תוצאה
	<i></i>
	

יצירת תג שקורא לתמונה +
קוד

	img (שילוב המקשים ctrl+e)
	
תוצאה
	<img src="" alt="">
	

כותרות

תגי כותרת בסיסיים +
קוד

	h1 (שילוב המקשים ctrl+e)
	h2 (שילוב המקשים ctrl+e)
	h3 (שילוב המקשים ctrl+e)
	h4 (שילוב המקשים ctrl+e)
	h5 (שילוב המקשים ctrl+e)
	
תוצאה
	<h1></h1>
	<h2></h2>
	<h3></h3>
	<h4></h4>
	<h5></h5>
	

תג כותרת עם קישור בפנים +
קוד

	h1>a (שילוב המקשים ctrl+e)
	
תוצאה
	<h1><a href=""></a></h1>
	

תג כותרת עם קלאס וSpan בפנים +
קוד

	h1.>span (שילוב המקשים ctrl+e)
	
תוצאה
	<h1 class=""><span></span></h1>
	

חמש כותרות עם תג ID משתנה +
קוד

	h1.id-$*5 (שילוב המקשים ctrl+e)
	
תוצאה
	<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>
	

רשימות

יצירת רשימות +
קוד

	ol (שילוב המקשים ctrl+e)
	ol (שילוב המקשים ctrl+e)
	
תוצאה
	<ol></ol>
	<ul></ul>
	

יצירת רשימה עם פריט +
קוד

	ol+ (שילוב המקשים ctrl+e)
	ol+ (שילוב המקשים ctrl+e)
	
תוצאה
	<ol>
		<li></li>
	</ol>
	
	<ul>
		<li></li>
	</ul>
	

יצירת רשימה עם פריטים לפי כמות +
קוד

	ol>li*5 (שילוב המקשים ctrl+e)
	
תוצאה
	<ol>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
	

טבלאות

יצירת תג שפותח טבלה +
קוד

	table (שילוב המקשים ctrl+e)
	
תוצאה
	<table></table>
	

יצירת תגים לטבלה בסיסית עם תא אחד +
קוד

	table+ (שילוב המקשים ctrl+e)
	
תוצאה
	<table>
		<tr>
			<td></td>
		</tr>
	</table>
	

יצירת תגים לטבלה בסיסית עם שלוש תאים +
קוד

	table>tr>td*3 (שילוב המקשים ctrl+e)
	
תוצאה
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	

יצירת תגים לטבלה בסיסית עם שתי עמודות ושלושה תאים בכל אחד +
קוד

	table>tr*2>td*3 (שילוב המקשים ctrl+e)
	
תוצאה
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	

טפסים

יצירת תג שמצהיר על טופס +
קוד

	form (שילוב המקשים ctrl+e)
	
תוצאה
	<form action=""></form>
	

יצירת תג שמצהיר על טופס בשיטת get +
קוד

	form:get (שילוב המקשים ctrl+e)
	
תוצאה
	<form action="" method="get"></form>
	

יצירת תג שמצהיר על טופס בשיטת post +
קוד

	form:post (שילוב המקשים ctrl+e)
	
תוצאה
	<form action="" method="post"></form>
	

יצירת תג שיוצר תווית +
קוד

	label (שילוב המקשים ctrl+e)
	
תוצאה
	<label for=""></label>
	

שדות קלט שונים +
קוד

	input (שילוב המקשים ctrl+e)
	input:hidden או input:h (שילוב המקשים ctrl+e)
	input:text או input:t (שילוב המקשים ctrl+e)
	input:button או input:b (שילוב המקשים ctrl+e)
	
תוצאה
	<input type="" />
	<input type="hidden" name="" />
	<input type="text" name="" id="" />
	<input type="button" value="" />
	

תפריט Select עם שדה פנימי +
קוד

	select+ (שילוב המקשים ctrl+e)
	
תוצאה
	<select name="" id="">
		<option value=""></option>
	</select>
	

יצירת תג שיוצר שדה טקסט +
קוד

	textarea (שילוב המקשים ctrl+e)
	
תוצאה
	<textarea name="" id="" cols="30" rows="10"></textarea>
	

שונות

יצירת תג שלקורא לאיפריים +
קוד

	iframe או ifr (שילוב המקשים ctrl+e)
	
תוצאה
	<iframe></iframe>
	

יצירת תג שמטמיע אובייקט (לדוגמה סרטון פלאש) +
קוד

	object (שילוב המקשים ctrl+e)
	
תוצאה
	<object data="" type=""></object>
	

יצירת תג שמצהיר על פרמטר של אובייקט +
קוד

	param (שילוב המקשים ctrl+e)
	
תוצאה
	<param name="" value="" />
	

יצירת תג שמוכן להטמעת סרטון +
קוד

	video (שילוב המקשים ctrl+e)
	
תוצאה
	<video src=""></video>
	

יצירת תג שמוכן להטמעת סאונד +
קוד

	audio (שילוב המקשים ctrl+e)
	
תוצאה
	<audio src=""></audio>
	

כותבים קוד ברבע מהזמן!

במה מדובר? אם הגעתם עד לכאן ואתם לא מבינים במה עוסק מאמר זה סימן שדילגתם על ראש הדף אבל הסירו דאגה. כל שעליכם לעשות כדי לדעת עוד הוא לבקר במאמר בונה אתרים? תקתק קוד עם Zen Coding!.

בדף זה פסחתי על מספר אלמנטים בהם אני לא עושה שימוש תדיר אבל אם הם חסרים לכם תמצאו קישור אל הדף המקורי שמכיל את כל הפקודות של HTML עם Zen Coding בראש הדף… אהבתם? פרגנו לנו עם לייק או מילה טובה ובהצלחה.

  • אהבתם? שתפו!