כמה מושגי בסיס ומדריך התמצאות בממשק של ״נאוסיטיס״.
לפני שנצלול ל״נאוסיטיס״ ונפתח משתמש, אני רוצה לעבור בקצרה על מושגים בסיסיים. ישנן שפות קוד רבות שאיתן אפשר לבנות אתר, הבסיסיות ביותר הן html ו-css. על אף שהן הבסיסיות ביותר, הן מאפשרות חופש רב בעיצוב האתר, ואין צורך להיות מומחיםות כדי לדעת איך לקרוא ולכתוב אותן.
מבוא קצר על html
HTML היא שפה שנועדה לבנות את התוכן של דפי אינטרנט, מה שכתוב בקוד נותן הוראות לדפדפן איך להציג את דף האינטרנט- מה שם העמוד? כמה פסקאות יש? באיזה גודל להציג את המלל? וכדומה. לא צריך להתמקצע בHTML לפני שמתחילים לבנות אתר, ולדעתי אפילו ההפך- יותר כיף ללמוד תוך כדי עשייה.
איך יוצרים דף?
כדי ליצור דף html ניתן להשתמש בכל עורך טקסט (לדוגמא: פנקס רשימות בווינדוס, עורך המלל במק). מצאו את עורך הטקסט שזמין לכם ופתחו קובץ חדש.
כדי להפוך את המסמך שכתבנו לדף html שניתן לפתוח בדפדפן, יש לשמור את הקובץ עם סיומת שם_הקובץ.html
קטע הקוד איתו נעבוד:
אדגים עם עורך המלל בMacOS:
אחרי שכתבנו (או העתקנו והדבקנו) את הקוד, נבחר שם לדף ונשמור את הקובץ עם הסיומת .html
עכשיו הפתק נשמר בתור דף אינטרנט! הוא יופיע בתיקייה שלו בתור קובץ html ואם נקליק עליו, הוא יפתח בדפדפן ויציג את התוכן הבא-
מזל טוב! יצרתם את העמוד הראשון שלכם! (קרדיט)
מרכיבי הדף
נחזור אל הקוד בו השתמשנו:
אם תסתכלו על הקוד תוכלו לראות <תגיות> מסוגים שונים, תכף נעבור על התפקידים של חלק מהן, בנתיים שימו לב-
בכל קוד html חובה שיהיו התגיות
<DOCTYPE html>
<html>
<body>
<head>
כמו בסדר שבתמונה על מנת שהעמוד יוצג כראוי.
כל תגית ש״נפתחת״ מלווה גם בתגית ש״סוגרת״ אותה. לדוגמא: <html/> חשוב לוודא ״לסגור״ את כל התגיות שלנו כדי למנוע בלאגן בקוד.
בתמונה מעל מסומנות תגית ה<head> בצבע כתום ותגית ה<body> בצבע כחול.
● תגית ה<head>
בתגית הזאת מגדירים את מאפייני העמוד, לדוגמא, שם העמוד שיוצג בדפדפן עם תגית <title>. לא ניתן להכניס מלל ותוכן בתגית ה<head> משום שמה שנכתב בה לא מוצג בתוכן העמוד.
בתגית ה<head> ניתן להכניס גם את תגית ה<style> על מנת לערוך את אלמנטי הCSS של העמוד. (מה זה CSS ועוד בהמשך העמוד !)
● תגית ה<body>
בתגית הזאת נכנס תוכן העמוד. בקוד לדוגמא בתמונה ניתן לראות שהשתמשנו בתגיות <h1> <p> בשביל לעצב את הדרך בה המלל מוצג.
תגית <h1> משמשת בד״כ עבור כותרות, ותגית <p> משמשת עבור פסקאות.
בהמשך נלמד יותר על התגיות האלו, איך לעצב אותן, ועל תגיות נוספות שיאפשרו לנו להוסיף תמונות, לינקים וכ׳ו לעמוד שלנו.
מבוא קצר על css
css היא שפה שנלווית לHTML ו״אומרת״ לקוד הHTML איך להציג את מרכיבי העמוד (אלמנטים). כלומר, דרך עריכה של התגיות בcss נוכל לעצב ולהתאים אישית את האתר שלנו. לשנות את הפונט בפסקה מסוימת, לשנות צבע רקע של עמוד, לערוך נראות של לינקים. כל מה שתרצו ועוד !
איך משתמשים בcss?
הדרך הפשוטה ביותר לערוך ערכי css של עמוד מסויים היא על ידי הכנסת התגית <style> בתוך תגית ה<head>
אם ננסה לערוך את הcss של העמוד בלי ״להגיד״ לקוד שאלה ערכי css, הוא לא ידע מה לעשות איתם והעמוד ישאר זהה. לכן יש להכניס את ערכי הcss שנרצה לערוך בעמוד בתוך תגית ה<style>
בתמונה לדוגמא אפשר לראות שערכתי את ערכי הcss של התגית <body> (התגית שמשפיעה על כל תוכן העמוד)
אני אישית מעדיף לכתוב קוד בתוכנה בשם Visual Studio Code.
התוכנה משלימה קוד כשאני לא בטוח איך לכתוב, ומעצבת את הקוד עם צבעים שמקלים על ההתמצאות בו.
על מנת להוריד את התוכנה ניתן לעבור לאתר הרשמי שלה
בלינק הבא
כדי שאנשים אחרים יוכלו לגשת לדפים שיצרנו, צריך להעלות אותם לאינטרנט לשרת אחסון. ״נאוסיטיס״ מספק שירות אחסון חינמי (עד ג׳יגה אחד של קבצים), ללא פרסומות. כדי להעלות קבצים צריך להירשם לאתר, וכשבוחרים שם משתמש בעצם בוחרים את כתובת האתר שלכם.
הרשמה וכניסה לאחסון הקבצים
● שם משתמש:
שם המשתמש איתו תתחברו לאתר. כמו שציינתי מקודם, שם המשתמש יהיה גם כתובת האתר שלכם.
● תגיות:
לפי התגיות שתכניסו אנשים יוכלו למצוא את האתר שלכם באינדקס האתרים של ״נאוסיטיס״. מומלץ להכניס את נושאי העניין עליהם תכתבו באתר.
● מייל וסיסמא:
המייל והסיסמא שאיתם תתחברו לאתר.
השלימו את האימות האנושי, ולחצו ״Create My Site״.
לאחר הרשמה/התחברות תועברו אוטומטית לפיד שלכם. בפינה הימנית למעלה תראו כפתור ״Edit Site״
לחצו עליו ותועברו לאחסון הקבצים של האתר שלכם.
ממשק אחסון הקבצים
ברוכים הבאים לאחסון הקבצים שלכם! מכאן תוכלו לבנות ולערוך את האתר שלכם. כשנרשמים ל״נאוסיטיס״ אוטומטית נוצרים עבורכם 4 קבצים.
test test test
ניתן ללחוץ על הרשת בפינה השמאלית (שמוקפת בעיגול בתמונה) כדי לשנות את הדרך בה הקבצים מוצגים.