[Nדר*ך]בסיסי לHTML F2H הורדה ישירה מילים צלצול פלייבק רמיקס יוטיוב

עמוד ראשי

חדשות המוסיקה

מילים לשירים

עמוד ראשי » פורומים - דיון, פנאי, תמיכה והעשרת חווית המשתמש » פורום מדריכים, טיפים וטריקים

הינך צופה בנושא » [Nדר*ך]בסיסי לHTML

עמוד 1 מתוך 1 [ 10 הודעות ]

[Nדר*ך]בסיסי לHTML

מחבר

הודעה

][*Re$p3cT*][

נושא ההודעה: [Nדר*ך]בסיסי לHTML

פורסם: 15 אפריל 2006, 23:04

נושם זהב

הצטרף: 02 אוקטובר 2005, 16:39
הודעות: 34581
לייקים: 118 אוהבים
פידבקים: 0 (0%)

מדריך בסיס מלא לHTML
מדריך HTML מפורט:

הקדמה:
טוף, בלי הרבה סיבוכים - HTML היא השפה הכי בסיסית (עד כמה שידוע לי) לבניית אתרים באינטרנט. (Java, JavaScript, Asp וכו' הם שפות עזר או תוספות, או פשוט שפות מסובכות יותר אבל לדעתי למתחילים הכי טוב להתחיל עם HTML).
אני בטוח ששמעתם על זה הרבה וגם אם לא - חשוב שתדעו שאם משקיעים ומתאמנים, HTML יכולה להפוך לשפה הכי קלה שיש.

המדריך:
טוב בואו נתחיל ללמוד, מוכנים? (גם אני לא).
דבר ראשון שעליכם לדעת בHTML, היא בנויה מתגים. זה די פשוט - יש תג פתיחה, טקסט או תגים ברמה נמוכה יותר באמצע, ובסוף (כמעט תמיד יש) תג סגירה. חשוב להדגיש שהתגים בנויים ככה: <שם תג> אני יתן דוגמא אם לא הבנתם:
קוד:
<שם התג>text, or other tags</שם התג>

אוקי, מה יש לנו כאן? תג הפתיחה, דברים באמצע (תלוי בסוג התג..) והופה הנה תג הסגירה! מה שונה כאן? יש סלאש לפני השם:
קוד:
</שם התג>

ולמה זה? כדי שהדפדפן יבחין שזהו תג סגירה ולא יחשוב שפתחנו עוד תג!
(שכחתי להזכיר, אל תתבלבלו כשאני כותב את הדוגמאות בעברית, שמות התגים כתובים באנגלית ויש רק כמה תגים מסוימים אז אל תנסו לנחש שמות...).
עכשיו יש עוד משהו שעליכם ללמוד על תגים - התג שנפתח ראשון, נסגר אחרון. מה שאומר שהתג שנפתח אחרון, נסגר ראשון. זה קצת מסובך אז הנה דוגמה:
קוד:
<1>
<2>
<3>
<4>
</4>
</3>
</2>
</1>

טוב כאן ראינו דוגמה של ארבעה תגים. מכיוון שתג 1 נפתח ראשון הוא יסגר אחרון חביב בסוף הדף. מכיוון שתג 2 נפתח שני הוא יסגר אחד לפני אחרון וכך הלאה.
יש גם מקרים קצת יוצאי דופן אבל עליהם אני אסביר בהמשך.
לכל תג יש מאפיינים ותת מאפיינים, ככה אני קורא להם . לדוגמה לתג
קוד:
<font>

יש את המאפיין "Color" והתת מאפיין "Blue" או "Red" וכו'. אז כשנרצה שהתג יהיה יותר משפיע על הקובץ שלנו נוסיף לו מאפיינים. ככה יראה התג פונט לאחר ההוספה:
קוד:
<font color="blue">

לרוב התגים יש את המאפיינים שמתאימים להם ולרוב המאפיינים יש את התת מאפיינים שמתאימים להם.
טוב אז למדנו על תגים ואני מנחש שכבר משעמם לכם אז בואו נפתח את הכלי הכי בסיסי לקודי HTML - פנקס רשימות! (C:/Windows/Notpad.exe), עכשיו, עליכם לדעת שכל קודי הHTML נפתחים בתג האחד והיחיד -
קוד:
<html>

כמובן שגם לתג הזה יש הרבה מאפיינים אבל לא נדון עליהם עכשיו, נדון רק על אחד מהם בשביל ההדגמה.
אוקי נכתוב:
קוד:
<html dir="ltr">

מה עשינו? השתמשנו במאפיין דיר ובתת מאפיין ltr.
בעצם אמרנו לדפדפן שזה קובץ html, ושאנחנו רוצים שהוא יהיה משמאל לימין -
ltr הם ראשי תיבות של left to right. עכשיו נלחץ על אנטר כדי שתהיה לנו הפרדה בין הפקודות (לא חייבים אבל ככה יותר נוח וקריא מאשר לעשות הכול בשורה אחת), ונכתוב נסיון. (עם הנקודה). נסגור את הפקודה HTML ומה שקיבלנו זה:
קוד:
<html dir="ltr">
נסיון.
</html>

כל הכבוד, עכשיו נשמור את הקובץ בsave as כ - נסיון.html (חשוב מאוד לכתוב html אחרת זה יחשוב שזה מסמך טקסט והכול ילך לזבל).
עכשיו לא נסגור את הפנקס רשימות אלא רק נמזער אותו ונלך להסתכל על דף הHTML שיצרנו. מה קרה? במסמך אנחנו רואים את הנסיון בצד שמאל כתוב ככה: .נסיון
ולמה זה? כי אמרנו לדפדפן לכתוב את המילה משמאל לימין. עכשיו נחזור לפנקס רשימות ונשנה את התת מאפיין "ltr" ל"rtl". עכשיו נחזור לדף הHTML ונלחץ על רענן. עכשיו המילה עברה לצד ימין והיא כתובה יפה. טיפ: אם ניצור אתרים בעברית, רצוי להוסיף בתג HTML את המאפיין Dir="rtl" ואם ניצור באנגלית כמובן שיהיה עדיף לנו Dir="ltr".
אוקי עברנו על תגים ועל התג HTML. עכשיו אנחנו ניגשים לפקודה מאוד מעניינת ושמה Head שפירושה ראש הדף. עכשיו נכתוב מתחתיה עוד פקודה ששמה הוא Title, ופירושה הוא הכותרת. נכתוב זאת כך:
קוד:
<html dir="rtl">
<head>
<title>האתר שלי</title>
</head>
</html>

חשוב לסגור את כל התגים ולפי הסדר אחרת זה לא יצא טוב. טוב מה בעצם עשינו?
אמרו לדפדפן שזהו קובץ HTML ושיכתוב אותו מימין לשמאל, אחר כך פתחנו פקודה שאומרת לדפדפן שאנחנו לא כותבים עכשיו בתוך הדף אלא בראשו. ואחר כך פתחנו את title שאומרת לדפדפן שיכתוב את הטקסט בפס הכחול למעלה שהוא כותרת הדף. אז כתבנו בתוך הטייטל האתר שלי וזהו גמרנו את העבודה וצריך להתחיל לסגור. סגרנו את הפקודה האחרונה שנפתחה, כלומר טייטל. לאחר מכן את ה"הד" ולבסוף את תג הHTML.
טוב עכשיו אנחנו רוצים שיהיה לנו משהו בתוך הדף עצמו ולכן נזדקק לפקודה Body.
נכתוב זאת כך:
קוד:

<html dir="rtl">
<head>
<title>האתר שלי</title>
</head>

שלום! הגעתם לאתר שלי! תהנו!

</html>

עשינו משהו קצת מסובך. מכיוון שאנחנו לא יכולים לשים את הפקודה של גוף הדף, בתוך ראש הדף, כי הם כמו הפכים, סגרנו את Head אבל במקום לסגור את HTML פתחנו עוד פקודה. (כן כן זה אפשרי! ) אז עכשיו כל מה שנכתוב במקום להמשיך להיות בכותרת הוא יהיה בגוף הדף. סגרנו את Body כי זה התג הפתוח האחרון ואז את HTML.
עכשיו אנחנו נבדוק את המאפיינים של Body:
קוד:

bgcolor - צבע הרקע בדף.
background - תמונה שתהיה ברקע הדף. אם התמונה באותה תיקיה של הדף כתבו רק את שמה, אם לא את הכתובת המלאה שלה.
text - צבע הטקסט בדף.
link - צבע הלינקים (הקישורים) בדף.
alink - צבע הלינקים בזמן הלחיצה.
vlink - צבע לינקים שכבר לחצנו עליהם בעבר.

זהו זה בערך, אתם רשאים לעצב את הBody כרצונכם.
טוב עכשיו נלמד על הפיסקה:
קוד:

<p>

היא מעצבת את הטקסט בצורה של פיסקאות. עוד דבר נורא חשוב בה זה המאפיין הבסיסי שלה: align שזה אומר יישור. יש שלושה יישורים (יש עוד אחד אבל שכחתי... הוא לא כל כך חשוב): ימין (right), שמאל (left) ומרכז (center) לדוגמא אם נכתוב:
קוד:

<html dir="rtl">
<head>
<title>האתר שלי</title>
</head>

<p align="center">
שלום! הגעתם לאתר שלי! תהנו!
</p>

</html>

זה יכתוב את הטקסט במרכז הדף. אם אתם רוצים ליישר אבל לא בפיסקה, תשתמשו בפקודה:
קוד:
<dir align="?">

תחליפו את סימן השאלה באחד מהיישורים שהזכרתי קודם.
(אתם מוזמנים להסתכל על הדף שלכם מתי שתרצו אבל אל תשכחו לשמור ולרענן..).
טוב עכשיו נעבור לכותרות! שהם H1-H6, הכוונה יש 6 כותרות, הם נקבעות לפני הגודל, 6 הכי קטנה, 1 הכי גדולה. לדוגמה אם תבחרו 3 אתם תקבלו משהו באמצע.
קוד:

<html dir="rtl">
<head>
<title>האתר שלי</title>
</head>

<h1>
ברוכים הבאים לאתר שלי!
</h1>
<p align="center">
שלום! הגעתם לאתר שלי! תהנו!
</p>

</html>

מה שבעצם עשינו עכשיו זה כותרת ענקית שאומרת ברוכים הבאים ואז את הטקסט. שכחתי להוסיף בקשר לכותרות שהם מאוד מיוחדות. הם יכולות לבדן, בלי שום מאפיינים ליישר את עצמן לאמצע ולעשות אחריהן שורת רווח.
עכשיו נלמד על הפונט שהזכרתי קודם. הוא מעצב את הטקסט.
מאפיינים:
קוד:

color - צבע.
size - גודל.
face - הפונט עצמו.

עוד משהו על טקסט, מאוד חביב ומוסיף קצת אנימציה לאתר:
פקודת הmarquee. היא פקודה טיפל'ה יותר מסובכת . מה שהיא בעצם עושה זה מריצה טקסט ברחבי המסך איך שתרצו.
מאפיינים:
קוד:

direction - כיוון התנועה של הכתובית (up,down,right,left).
width - המרחב שנותנים לכתובית לטייל בו.
height - האורך שנותנים לכתובית לטייל בו.
bgcolor - צבע הרקע בכתובית.

יש עוד אבל אני נותן רק את הבסיסיים ביותר.
טוב עד עכשיו גמרנו את הנושא של טקסט! (כל הכבוד לנו! ).
עכשיו נתחיל עם טבלאות. הפקודה של טבלה היא:
קוד:

<table>

מאפיינים:
קוד:

bgcolor - צבע רקע.
width - רוחב.
height - אורך.
align - יישור.
border - רוחב הקו.

עכשיו טבלה לא יכולה להתקיים בלי שורות (tr) ותאים (td). הנה דוגמא לטבלה:
קוד:

<table>
<tr>
<td>
שם
</td>
<td>
מיקום
</td>
<td>
תחומי עניין
</td>
</tr>
<tr>
<td>
Spidy
</td>
<td>
איפשהו
</td>
<td>
כדורגל, מחשבים, אינטרנט, סרטים.
</td>
</tr>
</table>

טוב בואו ננתח מה עשינו עכשיו כי זה היה די מסובך.
קוד:

<table>
<tr>
<td>
שם
</td>

פתחנו טבלה, פתחנו בה שורה ובה תא אחד שכתוב בתוכו "שם".
קוד:

<td>
מיקום
</td>
<td>
תחומי עניין
</td>
</tr>

פתחנו עוד 2 תאים באותה השורה שבהם כתוב בתא אחד "מיקום" ובשני "תחומי עניין" וסגרנו את השורה. אז יש לנו שורה ובה שלושה תאים. בואו נמשיך:
קוד:

<tr>
<td>
Spidy
</td>

שימו שלא סגרנו את הטבלה אלא פתחנו עוד שורה ועכשיו יש לנו 2. עכשיו התא הראשון בשורה הזאת יהיה בעצם מתחת לתא הראשון בשורה הראשונה נכון? אז כתבתי בו Spidy. עכשיו לסוף:
קוד:

<td>
איפשהו
</td>
<td>
כדורגל, מחשבים, אינטרנט, סרטים.
</td>
</tr>
</table>

זהו אז המשכנו וכתבנו עוד שני תאים כדי שהטבלה תהיה בנויה עד הסוף ובשורה השניה בעצם ענינו כביכול לשאלות של הראשונה ומה שקיבלנו זאת טבלה נחמדה מאוד, בקלות רבה.
עכשיו בואו נעבור לתמונות. אחד הדברים החשובים ביותר באתרי אינטרנט. התג של התמונה הוא:
קוד:

מאפיינים:
קוד:

src - הוספת תמונה, אחריה תבוא הכתובת של התמונה, אפשר גם רק את השם אם היא באותה תיקיה של הקובץ HTML שבו נמצא התג.
width - רוחב.
height - אורך.

טוב נעבור ללינקים (קישורים).
הם דבר משמעותי מאוד בדפי HTML ובלעדיהם לא תהיה לכם דרך לעבור בין כל הדפים שתבנו. אחרת הכל יהיה בדף אחד ארוך והאתר שלכם לא יהיה הצלחה גדולה. התג הוא:
קוד:

<a>

והמאפיינים:
קוד:

href - יוצר את הלינק, אחריו באה הכתובת של הדף או התמונה או כל קובץ אחר שתרצו לקשר אליו.
:mailto - אחריו כתבו את האימייל שאליו אתם רוצים שהגולשים יגיעו.

את זה אצטרך להדגים כי כאן צריך ליצור שני דברים:
1. הכתובת שהלינק ילך אליו.
2. הלינק עצמו, הדבר שלוחצים עליו.
אז בעצם אם נרצה לקשר לאתר MircX (או לכל דבר אחר, זה רק בשביל הדוגמה) נכתוב כך:
קוד:

<a href="http://www.G.co.il">לחצו כאן כדי להיכנס לאתר MircX!!</a>

כלומר שבין תגית הפתיחה לבין תגית הסגירה כותבים את מה שהגולשים ילחצו עליו.
עכשיו נעבור לכל מיני סוגים של טקסטים:
קוד:

- מודגש.
- קו תחתון.
- נטוי.
<s> - קו באמצע.
<sub> - כתב תחתי.
<sup> - כתב עילי.

_________________
בשבילי את העולם בשבילך אני קיים ואיתך הכל מושלם
בלעדייך מי אני את החצי השני לעולם לעולםםםםםםםםםם
איתך רוצה לעוף למרחקים ובך אני בוחר כל החיים bh:}

אור טובים מנהל ראשי - Admin

חזור למעלה

עמוד ראשי » פורומים - דיון, פנאי, תמיכה והעשרת חווית המשתמש » פורום מדריכים, טיפים וטריקים

עמוד 1 מתוך 1 [ 10 הודעות ]

עבור ל:

[Nדר*ך]בסיסי לHTML

היכל התהילה | דירוגים | הצוות

Powered By PHPBB Copyright Noshmim Mizrahit 2003-2011 © All right reserved
שיווק הפרסומות באתר זה מופעל על ידי @.מ.י - שירותי מדיה וסליקה באינטרנט
רוצה לפרסם באתר זה? שלח אלינו מייל לקבלת הצעה משתלמת במיוחד