Բարի գալուստ մեր կայքէջ
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում
և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ
Բայց առաջին հերթին եկեք
ուսումնասիրենք դատարկ էջի կմախքը
Ամեն կայքէջ սկսվում է
այս, վերևում երևացող տողը, DOCTYPE-ը
տեղեկացնում է զննիչին, որ
այս կայքէջը գրված է ժամանակակից HTML-ով
այլ ոչ hին ու տաօրինակ HTML-ով
Հիմա նայենք էջի առաջին թեգին
HTML is markup language, so it's all about tags.
A tag is one of these things
that starts with an angle bracket
and ends with another angle bracket.
Or if you like math, you might think of them
as less than and greater than signs.
The first tag of every page is always
that HTML tag right under the DOCTYPE.
This one is the start HTML tag,
and then at the bottom, there's this end HTML tag,
which is the same except for this backslash,
which is really important.
The HTML tag needs to contain every other tag
that makes up this webpage.
That's why we don't have the end HTML tag until the bottom.
A lot of HTML tags come in pairs like this,
but not all of them.
Underneath HTML, there's always a head tag.
That contains tags that helps the browser render the page,
but doesn't contain anything the user actually sees.
There's this meta tag that gives the browser
more details about how to render the page.
For example, if you're using common characters
like from English language
and not harder to render characters
from the Arabic language,
then you should have meta charset equals utf-8.
Then there's this title tag,
which the browser uses to decide the title of the page.
This is what shows in the tab on top of browsers
and in bookmarks and in search results.
Here on Khan Academy, the title shows up above our webpage.
Let me change the title.
I'm going to make a page all about rabbits.
So I'll say "All About Rabbits"
and maybe you can actually see as it changes above.
Nice, now we're done with these details
so we end the head tag and move on to the tag
where it's all going to happen, the body tag.
It's pretty boring right now, just the start and the end.
What should I add?
Well, I'm making a webpage about rabbits,
so I should probably declare
that in a big ole headline at the top.
To add a headline, we use the H1 tag.
All about rabbits, great.
Actually we have six tags that we could use
for headlines: H1, H2, H3, H4, H5 and H6.
The H1 is for the most important headlines on the page
and H6 is the least important.
Let me add a few more headlines for other sections.
I'll use an H2 since these are slightly
less important sections.
And some songs, ok, great.
Now let's add some information.
Well, my target audience for this page
is aliens that have never seen rabbits.
So I better give them a good description of rabbits.
In fact, I think I need a whole paragraph of information.
How can I markup a paragraph in HTML?
With the P tag of course.
We put in that P tag, and then I'm just going to go ahead
and paste in the information
so that you don't have to watch me type the whole thing.
Beautiful.
Now the aliens will need a song to greet the rabbits with,
so I'll give them lyrics to my personal favorite.
Once again, use that P tag for it and paste in the song
"Little Bunny Foofoo", such a good song.
But uh oh, it's showing up all on the same line.
How will the aliens know when to pause?
Why didn't the browser render
the line breaks that I put in here?
Well actually, browsers mostly ignore line breaks
and white space in your HTML.
If we want the browser to render a line break,
we have to tell it explicitly using another tag,
the BR tag, which stands for break.
We'll go through and add BRs after each line.
Now it looks like lyrics.
Do you notice something funny about BR?
There's no end tag.
If you think about it,
a line break doesn't contain any content,
so it has nothing to end after.
Just the start tag is all we need.
There we have it.
The aliens will learn the basics of rabbits
and you've learned the basics of HTML.
After I'm done talking,
play around with this and try changing things.
When you're ready, go on to your first HTML challenge.
Vítejte na mé webové stránce.
Vím, není zatím příliš zajímavá.
Je úplně prázdná, ale takhle začíná každá webová stránka,
a já vám ukážu, jak takovou stránku vytvořit rychle.
Nejprve mi dejte chvilku,
abych vám představila základní strukturu prázdné stránky.
Každá webová stránka začíná s
touto srandovní věcí zvanou DOCTYPE na začátku.
Tou jen říkáme prohlížeči,
že tato webová stránka je psaná v moderním HTML,
a ne v té staré a podivné verzi HTML.
Následuje první tag naší stránky.
HTML je značkovací jazyk, takže se všechno týká tagů.
Tag je jedna z věcí,
které začínají se špičatou závorkou,
a končí s jinou špičatou závorkou.
V matematice je možná znáte
jako symboly méně než nebo více než.
První tag každé stránky je vždycky
tento tag HTML přímo pod DOCTYPE.
Tomuhle říkáme začínající tag HTML,
a pak úplně na konci je uzavírací tag HTML,
který vypadá uplně stejně kromě tohoto lomítka,
které je velmi důležité.
Dovnitř HTML musíme dávat všechny ostatní tagy,
které chceme na stránce mít.
Proto je uzavírací tag HTML až úplně na konci.
Velká část HTML tagů je takto "párová",
ale ne všechny.
Pod HTML je vždy tag head,
který obsahuje tagy pomáhající prohlížeči zobrazit stránku,
ale zároveň neobsahuje nic, co může uživatel vidět.
Tento meta tag dává prohlížeči
více informací o zobrazení stránky.
Například, pokud používáte běžné znaky,
například písmena abecedy,
a ne žádné těžší znaky,
které jsou v arabském jazyce,
pak byste měli použít znakovou sadu utf-8.
Dál tady máme tag title.
který prohlížeč používá k určení názvu stránky.
Název se ukazuje na kartě nahoře v prohlížeči,
a taky v záložkách nebo ve výsledcích vyhledávání.
Tady na Khan Academy se titulek ukazuje nad naší webovou stránkou.
Zkusíme ho změnit.
Celá stránka bude o králících.
Takže název bude "Vše o králících"
a můžete vidět, jak se název nahoře mění.
Super, tyhle detaily bychom měli.
Takže ukončíme tag head a přesuneme se k tagu,
který je centrem dění, k tagu body.
Momentálně je pěkně nudný, jenom začíná a končí.
Co bych tam měla přidat?
Protože dělám webovou stránku o králících,
měla bych to asi uvést
ve velkém nadpisu na začátku.
K přidání nadpisu používáme tag H1.
Všechno o králících, super.
Pro nadpisy existuje šest tagů:
H1, H2, H3, H4, H5 a H6.
H1 tag je pro ty nejdůležitější nadpisy na stránce.
a H6 je nejméně důležitý.
Teď přidám více nadpisů pro každou sekci.
Použiji H2, protože jsou pro trošku
méně důležité sekce.
Ještě písničky, super.
Teď pojďme přidat opravdový obsah.
Moje cílová skupina pro tuto stránku
jsou mimozemšťani, kteří nikdy neviděli králíky.
Takže jim musíme dát hodně dobrý popis králíků.
Myslím, že bychom jim mělli napsat celý odstavec plný informací.
Jak můžeme vytvořit odstavec v HTML?
Samozřejmě s tagem P.
Přidáme tag P, a potom do něj
vložím nějaké informace,
ať mě nemusíte sledovat, jak to celé píšu.
Krása.
Teď mimozemšťani potřebují píseň, kterou budou králíky zdravit,
takže jim dám můj nejoblíbenější text.
Znovu, použiji pro to tento tag P, a vložím dovnitř text písně
"Malý králíček Foofoo", taková skvělá písnička.
Ale jejej, vše se ukazuje v jednom řádku.
Jak budou mimozemšťani vědět, kdy přestat?
Proč prohlížeč nezobrazil
zalomení v řádcích, které jsem sem vložila?
No, popravdě, prohlížeč většinou ignoruje zalomení
a mezery ve vašem HTML.
Pokud chcete, aby se text zobrazil na nový řádek,
musíme to důrazně říct, vložením jiného tagu,
tagu BR, který znamená nový řádek.
Musíme to projít a přidat BR na konci každého řádku.
Teď to vypadá jako text písničky.
Všimli jste si něčeho zábavného na BR?
Není zde uzavírací tag.
Když se nad tím zamyslíme,
nový řádek nemá žádný obsah,
takže pak není co ukončovat.
Proto potřebujeme jen začínající tag.
Tady je.
Mimozemšťani se budou učit základy o králících,
a vy jste se naučili základy o HTML.
Jakmile domluvím,
můžete si s tímto hrát a různě to měnit.
A až budete připraveni, pokračujte na vaši první HTML výzvu.
Bienvenido a mi página web.
Ya sé... no es una página web muy emocionante.
Está completamente en blanco, pero todas la páginas web empiezan así,
les mostraré cómo construir esta página.
En primer lugar, dame un minuto
para mostrarte cómo crear el esqueleto de esta página web en blanco.
Cada página web comienza con
esta cosa divertida aquí arriba que llamamos DOCTYPE.
Esta es una señal para el navegador
de que esta página web está escrita en HTML moderno
y no en el viejo y raro HTML.
A continuación, sigue la primera etiqueta de la página.
HTML es un lenguaje de marcado, por lo que todo se refiere a etiquetas.
Una etiqueta es una de esas cosas
que empiezan con un paréntesis angular
y terminan con otro paréntesis angular.
O si te gustan las matemáticas, tal vez pienses en ellos
como los signos de menor que y mayor que.
La primera etiqueta de la página siempre es
la etiqueta de HTML justo debajo de DOCTYPE.
Ésta es la etiqueta de inicio de HTML,
y hasta abajo está la etiqueta de fin de HTML,
que es igual excepto por esta barra invertida,
que es realmente importante.
La etiqueta de HTML requiere cada una de las otras etiquetas
para construir esta página web.
Es por eso que tenemos la etiqueta de fin de HTML hasta abajo.
Muchas de las etiquetas de HTML se usan en pares como ésta,
pero no todas.
Debajo de HTML, siempre hay una etiqueta de inicio del encabezado.
Ésta contiene etiquetas que ayudan al navegador a reproducir la página,
pero no contienen nada que el usuario realmente pueda ver.
Ésta es una etiqueta de tipo meta que le da al navegador
más detalles acerca de cómo reproducir la página.
Por ejemplo, si estás usando los caracteres comunes
del idioma inglés
y no los caracteres difíciles de reproducir
del idioma árabe,
entonces debes tener la etiqueta de tipo meta charset igual a utf-8.
Después está esta etiqueta de título,
que el navegador usa para poner el título de la página.
Esto es lo que se muestra en la pestaña superior del navegador
en los marcadores y en los resultados de las búsquedas.
Aquí en Khan Academy, el título se muestra en la parte superior de nuestra página.
Déjame cambiar el título.
Voy a hacer una página de todo sobre conejos.
Así que pondré: "Todo sobre conejos"
y probablemente puedas ver que el título cambia arriba.
Bueno, hemos terminado con esos detalles,
terminamos con la etiqueta de encabezado y pasamos a la siguiente etiqueta
donde está todo lo que va a suceder, es la etiqueta .
Es un poco aburrido ahora, sólo tenemos el principio y el fin.
¿Qué debería poner aquí?
Bueno, voy a hacer una página web sobre conejos,
así que aquí podría poner
un título grande en la parte superior.
Para añadir un título, usamos la etiqueta H1
¡Todo sobre conejos!, muy bien.
En realidad tenemos seis etiquetas que podríamos usar
para títulos: H1, H2, H3, H4, H5 y H6.
La etiqueta H1 es para el título más importante de la página.
y la etiqueta H6 es para el menos importante.
Déjame añadir algunos títulos para otras secciones.
Voy a usar una etiqueta H2 ya que éstas son
secciones menos importantes.
Algunas canciones, ok, muy bien.
Ahora voy a añadir algo de información.
Bueno, mi público objetivo para esta página
son alienígenas que nunca han visto un conejo.
Así que mejor les doy una buena descripción de los conejos.
De hecho, creo que necesito un párrafo completo de información.
¿Cómo puedo marcar un párrafo en HTML?
Con la etiqueta P, por supuesto.
Ponemos la etiqueta P, seguimos adelante
y pegamos la información
para que no tengan que verme tecleando todo.
Hermoso.
Ahora, los alienígenas necesitarán una canción para saludar a los conejos,
así que les daré la letra de una de mis favoritas.
Una vez más, usamos la etiqueta P y pegamos la canción
"Pequeño conejito Foofoo", es una buena canción.
Pero, oh, toda la canción se muestra en la misma línea.
¿Cómo van a saber los alienígenas donde hacer pausa?
¿Por qué el navegador no reproduce
los saltos de línea que le puse?
En realidad los navegadores ignoran los saltos de línea
y los espacios en blanco de HTML.
Si queremos que el navegador reproduzca un salto de línea,
tenemos que indicarlo explícitamente usando otra etiqueta,
la etiqueta BR que es sinónimo de pausa.
Bueno, vamos a recorrer la canción y añadir BR después de cada línea.
Ahora sí se ve como letra de canción.
¿Notas algo gracioso en la etiqueta BR?
No tiene etiqueta final.
Si lo piensas,
un salto de línea no tiene ningún contenido,
así que no hay nada que terminar.
Todo lo que necesitamos es la etiqueta de inicio.
Y aquí lo tenemos.
Los alienígenas podrán aprender lo básico sobre los conejos
y tú has aprendido lo básico sobre HTML.
Después de que haya terminado de hablar,
practica con esto y trata de cambiar cosas.
Cuando estés listo, continúa con tu primer desafío de HTML.
Bienvenue sur ma page Web !
Je sais... Elle n'est pas super intéressante !
Elle est complètement vide, mais toutes les pages Web commencent comme ça !
Je vais vous montrer bientôt comment la remplir.
Pour commencez, passons une minute
à regarder le squelette d'une page Web vide.
Chaque page Web débute avec
cette ligne bizarre appelée le DOCTYPE tout en haut.
C'est juste une indication pour que le navigateur
sache que cette page Web est écrite en HTML moderne, récent,
et pas en HTML simple comme on en faisait il y a longtemps.
Ensuite, la première balise de la page.
HTML est un langage de balises ("markup" en anglais).
Une balise, c'est un de ces trucs
qui commence avec ce crochet ouvrant
et se termine par un autre crochet fermant.
Si vous aimez les maths, ces signes sont :
"strictement inférieur à" et "strictement supérieur à".
La première balise de toute les pages est toujours
la balise HTML, juste après le DOCTYPE.
Celle-là est la balise HTML de début,
et tout en bas, on trouve la balise HTML de fin,
qui lui ressemble... à part, ce caractère "back-slash"
... qui est, du coup, très important.
Cette balise HTML doit contenir toutes les autres balises...
de votre page Web.
C'est bien pour ça, que la balise HTML de fin est tout à la fin.
Beaucoup de balises ont cette construction par paire,
mais pas toutes.
OK. Sous la balise HTML, il y a toujours une balise HEAD.
Cette balise contient des informations qui aide le navigateur à afficher la page,
mais ne contient rien qui sera affiché.
Dans cette balise META, on donne plus d'infos au navigateur
sur la façon d'afficher la page.
Par exemple, si vous utilisez des caractères classiques
comme ceux de la langue anglaise ou française,
et pas de caractères de l'alphabet arabe ou chinois,
vous devez utiliser le jeu de caractères utf-8.
Ensuite, il y a cette balise TITLE ("titre" en anglais),
que le navigateur utilise pour connaître le titre de la page.
C'est ce qui est affiché comme titre de l'onglet,
dans les favoris ou dans les résultats de recherche.
Ici, sur la Khan Academy, le titre s'affiche au dessus de la page Web.
Essayons de changer ce titre.
Je vais créer une page sur les lapins. Donc j’écris...
"Tout savoir sur les lapins".
Et vous voyez que le nom de la page, au dessus, a changé aussi.
Bon. OK. On a terminé avec ça.
Donc on "ferme" la balise HEAD, et on va regarder la balise
qui contiendra tout le reste : la balise BODY.
C'est simple : on a juste la balise d'ouverture et celle de fin.
Que va-t-on ajouter maintenant ?
Je fais une page Web sur les lapins,
donc je dois indiquer ça dans un gros titre tout en haut.
Pour ajouter un titre, on utilise la balise H1.
Ensuite, j'écris : ... Tout sur les lapins.
En fait, on a 6 balises différentes pour les titres.
H1, H2, H3, H4, H5 et... H6 !
La balise H1 est à utiliser pour les titres les plus importants.
La balise H6... pour les titres les moins importants
On va ajouter d'autres titres pour avoir plusieurs chapitres.
J'utilise la balise H2,
car les chapitres sont un peu moins importants.
J'écris : infos principales... ... chansons.
Maintenant ajoutons du contenu.
Pour cette page, je cible des lecteurs...
qui sont des extra-terrestres qui n'ont jamais vu de lapins.
Donc je commence par une bonne description des lapins.
En fait, j'ai besoin d'un premier paragraphe avec du texte.
Comment faire un paragraphe en HTML ?
Avec la balise P... bien sûr !
On ajoute une balise P, et je vais copier du texte...
que je n'ai plus qu'à coller... pour ne pas avoir à tout écrire.
Impeccable !
Ensuite, les extra-terrestres auront besoin des paroles d'une chanson.
donc je vais leur proposer une de mes chansons préférées.
J'utilise la balise P pour ça... et je colle les paroles.
J'adore celle là !
Mais... Oh, oh ! Tout est affiché sur la même ligne.
Comment peuvent-ils savoir la chanter correctement ?
Pourquoi le navigateur n'affiche pas les sauts de lignes ?
En fait, les navigateurs ne tiennent pas compte des sauts de ligne,
ni des espaces dans votre HTML.
Si on veut qu'il passe à la ligne,
on doit le lui dire en utilisant une autre balise...
la balise BR : pour le saut de ligne.
OK. on va l'utiliser pour chaque saut de ligne.
Ça ressemble à une chanson, maintenant !
Avez-vous remarqué un truc spécial pour la balise BR ?
Il n'y a pas de balise de fin.
Et en fait, en y réfléchissant,
un saut de ligne ne contient aucun contenu,
donc il n'y a rien à "encadrer".
Juste la balise ouvrante BR est suffisante.
Et voilà notre première page.
Les extra-terrestres vont pouvoir en savoir un peu sur les lapins...
et vous avez appris les bases du HTML.
Quand j'aurais terminé,
jouez avec ce code HTML et essayez de changer des trucs.
Quand vous êtes prêts, continuez avec votre premier défi !
ברוכים הבאים אל עמוד האינטרנט שלי.
אני יודעת, זה לא עמוד מלהיב במיוחד
הוא עמוד לבן לגמרי, אבל כל עמוד אינטרנט מתחיל באותה דרך
ואני אראה לכם איך לבנות את העמוד הזה בקרוב
דבר ראשון, תנו לי דקה
להראות לכם את השלד (את התבנית) של עמוד ריק
כל עמוד אינטרנט מתחיל עם
הדבר הנחמד הזה שנקרא DOCTYPE כאן בקצה למעלה
זהו רק סימן לדפדפן
שעמוד אינטרנט זה נכתב בHTML מודרני (HTML5)
ולא בגרסא ישנה של HTML
לאחר מכן, התג הראשוני שנמצא בדף
HTML היא שפת תגיות, כך שהכל כאן זה בעצם על תגים
תג זה דבר כזה
שמתחיל עם הסימן >
ומסתיים עם הסימן <
או אם אתה אוהב מתמטיקה,אתה יכול לחשוב על הסימנים
כסימן קטן (> ) או כסימן גדול (< )
התג הראשון של כל עמוד אינטרנט הוא תמיד
התג html מייד לאחר המילה DOCTYPE
זהו התחלת תג ה html (באותיות קטנות)
וכאן בסוף זה סיום תג ה html
שזה אותו דבר רק שיש בו את הסימן ' /'
שזה דבר מאוד חשוב
תג הhtml צריך להקיף (להכיל) את כל התגים האחרים
שבונים את עמוד האינטרנט
וזו הסיבה שאין לנו תג html עד תחתית הדף
הרבה תגים של HTML באים בזוגות כמו תג הhtml
אבל לא כולם
בתחילת דף הHTML יש תמיד תג בשם head
תג הhead מכיל (מקיף) תגים נוספים שעוזרים לדפדפן לצייר את העמוד
אבל הם לא כוללים משהו שהמשתמש בעצם רואה
יש למשל את תג הmeta שנותן לדפדפן
פרטים נוספים איך לצייר את הדף
למשל אם אתה לא משתמש בתווים רגילים
כמו למשל תווים של השפה האנגלית
אלא מסובכים יותר כמו תווים
של השפה הערבית
אז אתה צריך לרשום בתג ה
חוץ מזה יש את תג הכותרת - title
שמופיע ככותרת הדף בדפדפן
זה מה שמופיע בלשונית שבראש הדפדפן
וגם בסימניות (bookmark ) וגם בתוצאות החיפושים
ראו כאן את הכותרת של אקדמיית קהאן בראש הדף
אני אשנה את הכותרת
אני אעשה עמוד רק על ארנבים
כך שאתן כותרת "הכל על ארנבים"
ואולי תצליחו לראות את השינוי כאן למעלה
יפה, סיימנו כרגע את הפרטים האלו
כלומר סיימנו עם תג הhead וכל מה שיש בתוכו וכעת נעבור אל התג
שבו הכל בעצם קורה, תג ה body
כרגע הוא די משעמם, רק ההתחלה ומיד הסיום
אז מה בעצם כדאי שאוסיף?
ובכן, אני עושה אתר אינטרנט על ארנבים
אז כדאי שאכריז
על כך בתרועה גדולה עם כותרת בראש הדף
כדי להוסיף כותרת, משתמשים בתג h1
"הכל על ארנבים" ("all about rabbits" ), נהדר !
למעשה יש שישה (6) תגים שאנו יכולים להשתמש בהם
עבור כותרות h1, h2 , h3, h4, h5 ו h6
אנו משתמשים בh1 עבור הכותרות החשובות ביותר בדף
וh6 הן עבור הכותרות הפחות חשובות
תנו לי ואוסיף עוד קצת כותרות עבור חלקים נוספים בדף
אשתמש בכותרת h2 מכיון שהם
עבור קטעים חשובים פחות בדף
וגם כמה שירים, יפה !
כעת, נוסיף קצת מידע
ובכן, קהל היעד שלי עבור דף זה הוא
בעצם חייזרים שאף פעם לא שמעו על ארנבים
אז כדאי שאתן להם הסברים ממש טובים על ארנבים
למעשה אני חושבת שאני צריכה פסקה שלמה עבור המידע
איך אני יכולה לתייג פסקה שלמה בשפת ה HTML ?
על ידי תג ה p כמובן
אנו שמים את תג ה p ואז ממשיכים
ומדביקים כאן את המידע
מעתיקים ומדביקים כך שלא תצטרכו לראות אותי מקלידה את הכל
נהדר
כעת החייזרים צריכים שיר להלל את הארנבים
אז אתן להם מילים אישיות שאהבתי
שוב אשתמש בתג ה p עבור זה, ואז שוב אעתיק ואדביק את השיר
"Little Bunny Foofoo" , איזה שיר נהדר
אבל תסתכלו, זה מופיע באותה שורה
איך החייזרים ידעו לעצור,להפסיק ולעבור שורה?
למה הדפדפן לא שמר על
מעברי השורה שהיו בשיר המקורי כמו שאני הוספתי ?
ובן, דפדפנים מתעלמים מסימני "עבור שורה" ( מסומן כ n\ בכל מיני מקומות)
וכן מתעלמים מ רווחים בHTML
אם אנו רוצים כי הדפדפן יצייר את מעברי השורה
נוכל לאמר זאת ישירות על ידי תג נוסף
על ידי תג ה br שהוא קיצור של המילה break
אז כעת נעבור על הכל ונוסיף br אחרי כל שורה
וכעת זה נראה כמו שירה
האם שמתם לב לדבר מעניין עבור תג ה br ?
אין תג br סוגר בסוף
אם תחשבו על זה
תראו שתג ה br בעצם לא מכיל שום תוכן
ולכן הוא לא צריך להיות לפני ואחרי משהו
מספיק שיסמן משהו לדפדפן וזה הכל - עבור שורה
וזהו, יש לנו את זה
החייזרים ילמדו קצת על ארנבים
ואתם תלמדו קצת על HTML
אחרי שאני אסיים לדבר
אז תשחקו עם זה,נסו לשנות כל מיני דברים
כשתסיימו להתנסות, עיברו לאתגר הראשון שלכם ב HTML
Բարի գալուստ մեր կայքէջ
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում
և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ
Բայց առաջին հերթին եկեք
ուսումնասիրենք դատարկ էջի կմախքը
Ամեն կայքէջ սկսվում է
այս, վերևում երևացող տողով, DOCTYPE-ով
այն տեղեկացնում է զննիչին, որ
այս կայքէջը գրված է ժամանակակից HTML-ով
այլ ոչ hին ու տաօրինակ HTML-ով
Հիմա նայենք էջի առաջին թեգին
HTML-ն ամբողջությամբ հիմնված է թեգերի վրա
Թեգն այս անկյունային
փակագծերով սկսվող և
դրանցով ավարտվող բաներն են
կամ եթե դուք սիրում եք մաթեմատիկա
կարող եք դրանց մասին մտածել որպես մեծի և փոքրի նշաններ
Յուրաքանչյուր էջի առաջին թեգն այդ
HTML թագն է, DOCTYPE-ի տակ
Սա բացվող HTML թեգն է
և ներքևում տեսնում եք փակվող HTML թեգը
Որը նույնն է բացառությամբ այս սլեշ նշանի
որը շատ կարևոր է
HTML թեգը պետք է պարունակի կայքէջը կազմող
յուրաքանչյուր թեգ
Այս պատճառով մենք գրում ենք փակող HTML թեգն ամենավերջում
HTML թեգերից շատերն այսպես զույգերով են օգտագործվում
բայց ոչ բոլորը
HTML-ի տակ միշտ կա head թեգ
Այն պարունակում է թեգեր, որոնք օգնում են զննիչին արտացոլել էջը
բայց չի պարունակում օգտատիրոջ համար տեսանելի բաներ
Սա meta թեգն է, որը ցույց է տալիս զննիչին
ավելի շատ տեղեկություն, արտացոլման համար
Օրինակ, եթե դուք օգտագործում եք տարածված սիմվոլներ
Օրինակ անգլերենի տառերը
բայց ոչ ավելի դժվար արտացոլվող տառեր
ինչպիսին են օրինակ արաբական տառերը
ապա ձեզ հարկավոր meta charset-ը հավասար է utf-8
հետո տեսնում ենք title tag-ը
որը զննիչն օգտագործում է էջի վեռնագիրը որոշելու համար
Սա զննիչի վերևում գտնվող tab-ի, էջանիշերի վրա
և որոնման արդյունքներում երևացող բառն է
Այստեղ Քան Ակադեմիայում, վեռնագիրը երևում է մեր էջի վերևում
Եկեք փոխենք վեռնագիրը
Ես կպատրաստեմ ճագարներին նվիրված մի էջ
Գրենք անգլերեն "All about rabbits"
և դուք կարող եք տեսնել, թե այն ինչպես է փոխվում
Լավ մենք վերջացրինք այս հատվածը
և մենք կարող ենք փակել head tag-ը և անցնել հաջորդ թագերին
Ամենե ինչ կատարվելու է body tag-ում
Սա բավականին ձանձրալի է հիմա միայն սկիզբն ու վերջը
Ի՞նչ ավելացնեմ
Քանի, որ պատրաստում ենք ճագարների մասին կայքէջ
հավանաբար պետք է վերևում
հայտարարել դա վեռնագրով
Վեռնագիր ավելացնելու համար օգտագործում ենք H1 tag-ը
All about rabbits, շատ լավ
Իրականում մենք ունենք 6 թեգեր,
որոնք կարող ենք օգտագործել վեռնագրերի համար, H1 H2 H3 H4 H5 և H6
H1-ն ամենակարևոր վեռնագրերի համար է
իսկ H6-ը ամենաքիչ կարևոր
եկեք ևս մի քանի վեռնագրեր ավելացնենք այլ
հատվածների համար։ Ես կօգտագործեմ H2-ը
ավելի քիչ կարևոր մասերի համար
և որոշ երգեր, ահա շատ լավ է
Հիմա եկեք ավելացնենք մի քիչ տեղեկություն
Ենթադրենք, որ իմ կայքէջի լսարանը
այլմոլորակայիններ են, ովքեր երբեք չեն տեսել ճագարներ
Նշանակում է, որ պետք է ճագարների լավ բնութագիր տալ
և ինձ պետք է տեղեկության մի պարբերություն
ինչպե՞ս կարելի է ստեղծել պարբերություն HTML-ում
Իհարկե P tag-ով
մենք դնում ենք P tag-ը և ուղակի
պատճենում տեղեկությունը
որպեսզի դուք ստիպված չլինեք տեսնել թե ես ինչպես եմ այս ամենը
տպում։ Ահա հիասքանչ է
Հիմա այլմոլորակայիններին հարկավոր է ճագարների համար երգ
և ես նրանց կտամ իմ ամենասիրելի երգերից մեկի բառերը
ևս մեկ անգամ օգտագործենք P tag-ը և պատճենենք դրա մեջ երգը
Little Bunny Fofoo շատ լավ երգ է
Բայց սպասեք, ամեն ինչ մեկ տողի վրա է
ինչպե՞ս են այլմոլորակայիններ իմանալու երբ կանգ առնեն
Ինչու՞ զննիչը չարտացոլեց
տողերի ընդհատումները որոնք ես նշել եմ
Սովորաբար զննիչներն անտեսում են դրանք
և բցատները նույնպես անտեսվում են
եթե մենք ցանկանում ենք արտացոլոլ նոր տող
պետք է դա հատուկ նշենք օգտագործելով այլ թեգ
BR tag-ը
մենք կավելացնենք BR ամեն տողից հետո
հիմա ամեն ինչ հասկանալի է
նկատու՞մ եք մի հետաքրքիր բան BR-ի վերաբերյալ
չկա փակող թեգ
եթե մտածենք դրա մասին
տողի ընդհատումը չի պարունակում ոչինչ
այսպիսով չկա ինչ-որ բան որից հետո այն պետք է վերջանա
միայն բացվող թեգը բավարար է
ահ մեզ մոտ ստացվեց
Այլմոլորակայինները կսովորեն ճագարների մասին հիմնական բաներ
իսկ դուք սովորեցիք HTML-ի հիմքերը
Երբ ես կվերջացնեմ խոսելը
մի փոքր զբաղվեք սրանով և փորձեք փոփոխություններ անել
Երբ պատրաստ կլինեք, կատարեք ձեր առաջին HTML-ի առաջադրանքը
ဝက်ဘ်စာမျက်နှာမှ ကြိုဆိုပါတယ်
စာမျက်နှာက ဗလာကြီးဆိုတော့ ငြီးငွေ့စရာပဲပေါ့
ဒါပေမယ့် ဝက်ဘ်စာမျက်နှာတိုင်းက ဒီလိုပဲ အစပျိုးခဲ့ကြရတာပါ
အခု ဝက်ဘ်စာမျက်နှာ တည်ဆောက်ပုံကို သရုပ်ပြသွားပါမယ်
ပထမဦးဆုံး ဝက်ဘ်စာမျက်နှာရဲ့
အခြေခံအချက်များကို ပြပါမယ်။
ဝက်ဘ်စာမျက်နှာတိုင်းရဲ့ အစမှာ
DOCTYPE လို့ရေးထားတာက
ဒီစာမျက်နှာကို HTML အသစ်နဲ့
ရေးထားကြောင်း ဝက်ဘ် Browser ကို အသိပေးတာပါ
ဒီဇိုင်းအဟောင်းနဲ့မဟုတ်ပါဘူး။
နောက်တစ်ခုကတော့ Tag အကြောင်းပါ
HTML က စာမျက်နှာတစ်ခုနှင့်တစ်ခုကို
ချိတ်ဆက်ပေးတဲ့ နည်းပညာဖြစ်ပြီး
Tags တွေနဲ့ တည်ဆောက်ထားတာပါ
Tag ကို ထောင့်ချွန်ကွင်းနဲ့ ရေးပါတယ်
သင်္ချာလိုတွေးရင်တော့
ပိုကြီး၊ ပိုသေးသင်္ကေတတွေလို ဖြစ်နေမှာပါ
ဝက်ဘ်စာမျက်နှာတိုင်းရဲ့ ပထမဆုံး Tag က
HTML tag ပါ
ဒါက HTML tag အဖွင့်ဖြစ်ပြီး
ဒါကတော့ အပိတ်ပါ။
အပိတ်မှာ မျဉ်းစောင်းခံပြီးပိတ်ဖို့
သိပ်အရေးကြီးပါတယ်။
HTML tag နဲ့ဖွင့်ပြီးရင် အခြားသော tags များနဲ့
ဒီဝက်ဘ်စာမျက်နှာကို တည်ဆောက်ရပါတယ်
အဲ့ဒါကြောင့် အောက်ရောက်မှပဲ ပိတ်ပါတယ်။
အများအားဖြင့် အဖွင့်-အပိတ် ရေးကြပေမယ့်
အားလုံးတော့မဟုတ်ပါဘူး။
နောက်တစ်ခုက HTML tag အောက်က
Head tag အကြောင်းပါ။
Browser ရဲ့ စာမျက်နှာကို Render လုပ်ပေးပါတယ်
ဒါပေမယ့် အသုံးပြုသူအနေနဲ့ မြင်ရမှာ မဟုတ်ပါဘူး။
အောက်က meta tag ကြည့်ရင် အသေးစိတ်သိရမှာပါ။
ဥပမာ - အင်္ဂလိပ်ဘာသာရပ်မှ
သုံးနေကျ စကားလုံးတွေကို
အာရဗီဘာသာ ပြန်ဆိုတဲ့အခါ
လွယ်ကူစေပါတယ်။
အခု meta charset မှာ utf-8 လို့ရေးရပါမယ်။
နောက် Title tag ကတော့
ဝက်ဘ်စာမျက်နှာကို ခေါင်းစီးတပ်တာပါ
Browser ရဲ့ Tab နာမည်တွေ၊
Bookmarks နဲ့ ရှာဖွေမှုရလဒ်တွေအပြင်၊
ခန်း အကယ်ဒမီရဲ့ ဝက်ဘ်စာမျက်နှာ မှာလည်းခေါင်းစီးရှိပါတယ်
အခု ခေါင်းစီးကို
ယုန်များအကြောင်း All about rabbits ဆိုပြီး
ပြောင်းလိုက်မယ်
Tab မှာလည်း လိုက်ပြောင်းမှာပါ
ကောင်းပြီ။ အခုဒီလောက်နဲ့
Head tag ကို ပိတ်ပြီ။
နောက် Body tag အကြောင်းကို ဆက်သွားရအောင်။
အခုဆို နည်းနည်းလောက်တော့ ပျင်းနေလောက်ရောပေါ့
ဟုတ်ပြီ၊ ဘာဆက်ရေး ရင်ကောင်းမလဲ?
အခုက ယုန်တွေအကြောင်း ဝက်ဘ်စာမျက်နှာ
ရေးနေတာဆိုတော့
ခေါင်းစဉ်ကြီးတစ်ခု တပ်လိုက်ပါမယ်
h1 Tag သုံးပြီး
ရေးလိုက်ပါပြီ
တကယ်တော့ ခေါင်းစဉ် Tags ခြောက်ခု
h1, h2, h3, h4, h5, h6 အထိ
သုံးနိုင်ပါတယ်။ h1 က အကြီးဆုံးဖြစ်ပြီး
h6 ကတော့ အငယ်ဆုံးပါ။
ခေါင်းစဉ်နည်းနည်း ထပ်ထည့်ပါရစေ
h2 ကို ခေါင်းစဉ်ငယ်အဖြစ်
သုံးပါမယ်။
ပြီးတော့ သီချင်းအနည်းငယ် ထပ်ထည့်မယ်။
အချက်အလက်အနည်းငယ် ထပ်ထည့်မယ်။
ဒီဝက်ဒ်စာမျက်နှာကို ယုန် မမြင်ဖူးသူတွေအတွက်
ရည်ရွယ်လိုက်ရအောင်
ဆိုတော့ ယုန်အကြောင်းကို ရှင်းအောင် ဖော်ပြရပါမယ်
တကယ်တော့ စာတွေကို စာပိုဒ်နဲ့ပြဖို့လိုတယ်
ဆိုတော့ ဘယ်လိုလုပ်ရမလဲ?
P tag ကိုသုံးမှာပေါ့
စာရိုက်ထည့်မနေတော့ဘဲ
စာကိုအပိုဒ်လိုက် ကူးယူပြီး
P tag ထဲမှာ ဖော်ပြလိုက်ရုံပဲ
လှသွားပြီ။
ကောင်းပြီ၊ အခုထပ်ပြီး သီချင်းစာသားလေး
ထပ်ထည့်လိုက်မယ်။
သီချင်းကိုအပိုဒ်လိုက် P tag နဲ့ ကူးထည့်လိုက်မယ်။
ကောင်းလိုက်တဲ့ သီချင်းတစ်ပုဒ်ပဲ
အဲနေဦး…
စာသားတွေကို တစ်လိုင်းထဲမှာ ပြနေတယ်
စာသားတွေက
ဘာကြောင့်လိုက်မဆင်းသလဲ?
တစ်ကယ်တော့ HTML မှာ browsers က
စာကြောင်းခွဲ၊ နေရာလပ်ကို လျစ်လျူရှုထားတယ်
အကယ်လို့ စာကြောင်းခွဲချင်ရင်
အခြား tag ကို သုံးရတယ်
အဲ့ဒါက BR tag Break (စာကြောင်းခွဲ) တာပါ။
အဲ့တော့ စာကြောင်းတိုင်းရဲ့နောက်မှာ BR tags လိုက်ထည့်မယ်။
အခု သီချင်းစာသားပုံပေါ်သွားပြီ။
BR tag ရဲ့ ထူးခြားချက်ကို သတိထားမိလား?
Tag အပိတ်မပါတာပဲ။
စာကြောင်းခွဲဖို့ပဲ
သုံးတာဆိုတော့
အပိတ်မလိုတော့ဘူး။
အဖွင့် tag ပဲ လိုတာပါ။
ဒီလောက်ပါပဲ။
ယုန်အကြောင်းကို မသိတဲ့သူတွေလည်း သိလောက်ပြီ
သင်လည်း HTML ရဲ့ အခြေခံကို ရလောက်ရောပေါ့။
ဒီသင်ခန်းစာကို
အနည်းငယ်ပြောင်းပြီး စမ်းသပ်လေ့ကျင့်ပါ။
သင်အဆင်သင့်ဖြစ်ရင် ပထမဆုံး HTML စိန်ခေါ်မှုစလိုက်ရအောင်
Witam na swojej stronie.
Wiem, jest nieciekawa.
Pusta. Jak każda strona na początku.
Niedługo pokażę wam, jak ją zapełnić.
Zapoznajmy się
z budową takiej pustej strony.
Każda strona zaczyna się
od deklaracji DOCTYPE.
To znak dla przeglądarki,
że stronę stworzono w nowej wersji HTML,
a nie w jakiejś starej i dziwacznej.
Przejdźmy do pierwszego znacznika na stronie.
HTML to język znaczników.
Znacznik zaczyna się
od nawiasu trójkątnego
i takim samym się kończy.
Jeśli lubicie matematykę,
nazywajcie je znakami większości i mniejszości.
Pierwszym znacznikiem na stronie
jest „html”, zawsze pod DOCTYPE.
To znacznik początkowy,
a u dołu jest znacznik końcowy,
taki sam, tylko z ukośnikiem,
który jest bardzo ważny.
Między nimi mieszczą się wszystkie inne znaczniki
tworzące tę stronę.
Dlatego znacznik końcowy jest na samym dole.
Wiele znaczników HTML to takie pary,
ale nie wszystkie.
Pod znacznikiem „html” zawsze jest znacznik „head”.
Zawiera znaczniki pomagające przeglądarce
odpowiednio wyświetlić stronę.
Znacznik „meta” szczegółowo informuje
przeglądarkę, jak to zrobić.
Jeśli np. chcemy używać tylko
alfabetu łacińskiego,
a nie skomplikowanych
liter arabskich,
wpiszemy znacznik meta charset="utf-8".
Znacznik „title”
zawiera tytuł strony,
który pojawi się w pasku na górze,
w zakładkach i wynikach wyszukiwania.
W Khan Academy tytuł widać nad naszą stroną.
Zmienię tytuł.
Zrobię stronę o królikach:
„All About Rabbits” (Wszystko o królikach).
Może już widzicie, że tytuł się zmienił.
Super! Zrobiliśmy już wszystko,
wstawmy znacznik „/head” i przejdźmy dalej do znacznika,
w którym powstaje strona. To znacznik „body”.
Na razie - nuda. Tylko początek i koniec.
Co dodać?
Skoro tworzę stronę o królikach,
powinnam to napisać
dużymi literami u góry.
Nagłówek dodamy za pomocą znacznika „h1”.
„Wszystko o królikach”, świetnie.
Mamy do dyspozycji
6 znaczników do nagłówków: „h1”, „h2”, „h3”, „h4”, „h5”, „h6”;
„h1” odnosi się do najważniejszego nagłówka,
a „h6” do najmniej ważnego.
Dodam tytuły sekcji.
Skorzystam ze znacznika „h2”,
bo te części są nieco mniej ważne.
Jeszcze piosenki. Świetnie.
Dodajmy trochę informacji.
Tworzę tę stronę
dla kosmitów, którzy nigdy nie widzieli królika.
Przyda się porządny opis.
Cały akapit z informacjami.
Jak oznaczyć w HTML akapit (paragraf)?
Oczywiście znacznikiem „p”.
Stawiam znacznik „p” i już mogę
wkleić informacje.
Nie musicie patrzeć, jak wszystko wklepuję.
Pięknie!
Kosmici muszą znać piosenkę powitalną dla królików.
Podam im tekst swojej ulubionej.
Znów użyję znacznika „p” i wkleję słowa.
„Króliczek Foo Foo”, ładna piosenka.
Oj, wszystko wyświetla się w jednej linii!
Skąd kosmici mają wiedzieć, gdzie są pauzy?
Dlaczego przeglądarka
nie pokazała podziałów wiersza?
Na ogół przeglądarki ignorują te znaki
oraz spacje w tekstach w HTML.
Żeby przeglądarka podzieliła wiersz,
musimy jej to nakazać, używając innego znacznika,
„br” (z ang. break - podział).
Dodamy więc „br” na końcu każdego wiersza.
Teraz widać tekst piosenki!
Zauważyliście coś w związku z „br”?
Nie ma znacznika końcowego.
Pomyślmy:
podział wiersza nie ma treści,
więc co tu kończyć?
Wystarczy znacznik początkowy.
Gotowe.
Kosmici dowiedzą się o królikach,
a wy poznaliście podstawy HTML.
Kiedy skończę,
pobawcie się, pozmieniajcie różne rzeczy.
A gdy będziecie gotowi, przejdźcie do pierwszego zadania w HTML.
Bem vindos à minha página.
Eu sei, não é uma página muito emocionante
Está totalmente em branco, mas toda página começa assim
e vou te mostrar como construir essa página daqui a pouco.
Mas, primeiro, me dê um momento para
mostrar o esqueleto de uma página web em braco.
Toda página começa com
essa coisa divertida chamada DOCTYPE, aqui em cima.
Isso é um indicador para o navegador
de que essa página está escrita utilizando HTML moderno
ao invés do HTML antigo e esquisito.
Em seguida, para a primeira tag da página.
HTML é uma linguagem de marcação, então, tudo se resume à tags.
E uma tag é uma dessas coisas
que começa com um colchete angular
e termina com outro colchete angular.
Ou, se você gosta de matemática, pense neles
como sinais de maior e menor (< >).
A primeira tag de todas as páginas é sempre
a tag HTML, logo abaixo do DOCTYPE.
Esse aqui é o começo da tag HTML.
e, lá embaixo, existe o fechamento da tag HTML.
que é a mesma coisa, exceto por esta barra, que é muito importante.
A tag HTML deve conter todas as outras tags
que compõem a página.
É por isso que não fechamos a tag HTML antes do fim da página.
Várias tags HTML vêm em pares como este,
mas nem todas.
Abaixo do HTML, sempre existe uma tag "head".
Ela possui tags que ajudam o navegador a processar a página
mas não contém nada que o usuário veja, de fato.
Existe essa tag "meta" que fornece ao navegador
mais detalhes sobre como ele deve processar a página.
Por exemplo, se você está usando caracteres
como os da língua Inglesa
e não caracteres mais difíceis de processar, como
os da língua Arábica,
então você deve ter o meta charset definido como utf-8
Em seguida, temos essa tag "title"
que o navegador usa para decidir o título da página.
Isso é mostrado nas abas de cima dos navegadores,
nos favoritos e nos resultados de busca.
Aqui, no Khan Academy, o título é exibido logo acima de nossa página.
Vamos trocar o título.
Eu vou criar uma página toda sobre coelhos.
Então eu vou dizer: "Tudo Sobre Coelhos!!"
e talvez você até possa ver isso mudando ali em cima.
Legal.
Agora terminamos com esses detalhes,
fechamos a tag "head" e vamos até a tag
onde tudo vai acontecer: a tag "body".
Está muito chato agora, apenas o início e o fim.
O que eu devo adicionar?
Estou criando uma página sobre coelhos,
então eu provavelmente deveria declarar isso em um grande título em cima.
Para adicionar um título, usamos a tag "h1".
e... Tudo sobre coelhos, ótimo.
Na verdade, existem seis tags que
podemos usar como títulos: h1, h2, h3, h4, h5 e h6.
"h1" é atribuído ao título mais relevante na página
e "h6", para o menos importante.
Vamos adicionar mais títulos para as outras seções.
Eu vou usar um h2 já que essas são seções
menos importantes.
E algumas músicas. Ótimo.
Agora, vamos adicionar algum conteúdo.
Meu público alvo para essa página
são alienígenas que nunca viram coelhos antes.
Logo, é bom que eu dê a eles uma descrição sobre coelhos.
De fato, acho que preciso de um parágrafo inteiro de informações.
Como eu posso demarcar um parágrafo usando HTML?
Com a tag "< p >", é claro!
Colocamos a tag "< p >" e
em seguida, vou em frente colando as informações.
Assim você não precisa me ver digitando tudo isso.
Lindo!
Agora os aliens precisam de uma música para cumprimentar os coelhos
então, vou dar-lhes a letra de uma favorita pessoal.
E, de novo usamos a tag "< p >" para isso.
E colocamos a música.
♫ Little Bunny Foofoo ♫
Ah, que música boa!
Mas, tudo está aparecendo na mesma linha.
Como os aliens vão saber onde parar?
Por que o navegador não processou as quebras de linha que coloquei ali?
Na verdade, os navegadores normalmente ignoram as
quebras de linhas e os espaços em seu HTML
Se quisermos que o navegador processe as quebras de linhas,
precisamos avisá-lo explicitamente usando uma outra tag:
a tag "< br >", que significa uma quebra de linha.
Vamos em frente e adicionando < br > após cada linha.
Agora isso parece uma letra de música.
Você percebeu algo engraçado em relação ao "< br >"?
Não existe tag de fechamento.
Se você pensar nisso, uma quebra de linha não tem conteúdo.
Logo, não há nada para ser fechado.
Precisamos apenas da tag de abertura.
Agora sim.
Os aliens vão aprender o básico sobre coelhos
e vocês aprenderam o básico do HTML.
Depois que eu terminar de falar
brinque um pouco com isso e tente mudar as coisas.
E, quando estiver pronto, encare seu primeiro desafio HTML.
Traduzidor por [Felipe Francisco] Revisado por [Fernando dos Reis]
Добродошли на моју веб страницу.
Знам, није толико узбудљива веб страница.
Комплетно је празна, али свака веб страница тако почиње,
а ускоро ћу вам показати како да изградите ову страницу.
Првo ипак, дајте ми минут
да вас упознам са костуром празне веб странице.
Свака веб страница почиње са
овом стварчицом забавног изгледа на врху која се зове DOCTYPE.
То је само сигнал претраживачу
да је ова веб страница написана у модерном HTML-у,
а не у старом, незграпном и чудном HTML-у.
Даље, идемо на скроз први таг, односно ознаку странице.
HTML је језик за означавање, те је код њега све у вези са ознакама.
Таг је једна од ових ствари
која почиње са угластом заградом,
а завршава са другом угластом заградом.
Или ако волите математику, можете мислити о њима
као о знаковима за мање и веће од.
Први таг сваке странице је увек
тај HTML таг тачно испод DOCTYPE.
Ово је почетни HTML таг,
а онда на дну странице је овај завршни HTML таг,
који је исти осим што има ову косу црту,
која је јако важна.
HTML таг треба да садржи све остале тагове
који чине ову веб страницу.
Због тога се завршни HTML појављује тек на дну странице.
Много HTML тагова долази у паровима попут овог,
али не сви.
У реду. Испод HTML тага, увек се налази HEAD таг.
Тај садржи тагове који помажу претраживачу да рендерује страницу,
али не садржи ништа што корисник заправо види.
Ту је овај МЕТА таг који претраживачу пружа
више детаља око тога како да рендерује страницу.
На пример, ако користите типичне карактере
као што су они из енглеског језика,
а не карактере теже за рендеровање
из на пример арапског језика,
онда вам треба мета charset једнако utf-8.
Затим је ту овај TITLE таг,
који претраживач користи да подеси назив странице.
А то је оно што се приказује на картици на врховима претраживача
и у букмаркцима и у резултатима претрага.
Овде на Кхан Академији, наслов се приказује изнад наше веб странице.
Дајте да променим наслов.
Направићу страницу за све о зечевима.
Дакле, назваћу је "Све о зечевима"
и можда можете видети како се то мења изнад.
Фино, у реду, сада смо завршили са овим детаљима
тако да завршавамо HEAD таг и прелазимо на таг
где ће се све дешавати, BODY таг.
Прилично је досадно сада, само почетак и крај.
Ок. Шта би требала да додам?
Па, правим веб страницу о зечевима,
тако да би то вероватно требала да нагласим
у баш великом наслову на врху.
Да додамо наслов, користимо H1 таг.
Све о зечевима, сјајно.
Заправо, имамо шест тагова које можемо користити
за наслове H1, H2, H3, H4, H5 и H6.
H1 је за најважније наслове на страници,
а H6 је најмање важан.
Додаћу још пар наслова за остале секције.
Користићу H2 пошто су ово нешто
мање важне секције.
И неке песме... у реду, одлично.
Сада додајмо неке информације.
Па, моја циљна популација за ову страницу
су ванземаљци који никада нису видели зечеве.
Дакле, боље да им дам добар опис зечева.
Заправо, мислим да ми треба цео пасус информација.
Како могу да означим пасус у HTML-у?
Помоћу Р тага, наравно.
Ставимо Р таг, а онда само идем даље
и налепим информације
тако да не морате да ме гледате како све то куцам.
Предивно.
Ок. Сада ће ванземаљцима требати песма којом ће поздравити зечеве,
па ћу им дати лирике моје лично омиљене песме.
Још једном, користите тај Р таг за то и налепите песму
"Мали зека Фуфу". Ох, тако добра песма!
Али... ух, ох... све се приказује у једној истој линији.
Како ће ванземаљци знати када је пауза?
Зашто претраживач није рендеровао
преломе редова које сам овде ставила?
Па заправо, претраживачи углавном игноришу прелом редова
и размаке у вашем HTML-u.
А, ако желимо да претраживач рендерује прелом реда,
морамо то експлицитно да му кажемо, коришћењем још једног тага,
BR тага, који представља прелом (енг: break).
Добро, проћи ћу кроз ово и додаћу BR-ове после сваке линије.
Сада личи на лирике.
Да ли сте приметили нешто забавно око BR?
Нема завршног тага!
И, ако размислите о томе,
прелом реда не садржи никакав садржај,
тако да нема ништа иза чега би се завршио.
Само почетни таг је све што нам треба.
И ту смо.
Ванземаљци ће научити основе о зечевима,
а ви сте научили основе HTML-a.
Пошто завршим са причом,
поиграјте се са овим и покушајте да мењате ствари.
Па када будете спремни, продужите на ваш први HTML изазов.
Ласкаво прошу на мою веб-сторінку!
Я знаю, що вона має не дуже приголомшливий вигляд,
адже вона повністю порожня. Але кожна сторінка так починається,
і скоро я вам покажу, як зробити її такою, якою вона має бути.
Спершу дайте мені хвилинку,
щоб познайомити вас із структурою порожньої веб-сторінки.
Кожна сторінка починається
зі слова DOCTYPE у лівому верхньому кутку редактора.
Це всього лише сигнал для браузера,
що означає, що ця сторінка написана на сучасній версії HTML,
а не на старій незрозумілій HTML з помилками.
Далі переходимо до найпершого тега на сторінці.
HTML – це мова гіпертекстової розмітки, тому ми постійно матимемо справу з тегами.
Тег – це одна з тих речей,
що починається кутовою дужкою
і закінчується іншою кутовою дужкою.
Або якщо ви любите математику, ви можете думати про них
як про знаки більше/менше.
Першим тегом кожної сторінки завжди
є той тег, який знаходиться відразу під DOCTYPE.
Цей тег є початковим тегом HTML-коду,
а внизу, в самому кінці, є кінцевий тег HTML-коду.
Він виглядає так само як і початковий, проте містить в собі символ "\" (зворотній слеш),
який є дуже важливим.
Тег HTML має містити усі інші теги,
які формують веб-сторінку.
Тому ми використовуємо кінцевий тег HTML лише вкінці.
Багато тегів HTML є парними, як цей,
але не всі.
Після початкового тегу HTML завжди має бути тег (головний тег).
Він включає в себе теги, які допомагають браузеру відображати сторінку.
Але насправді не містить нічого того, що може бачити користувач.
Тут є тег (метатег), який надає браузеру
додаткову інформацію про те, як саме потрібно відображати сторінку.
Наприклад, якщо ви використовуєте загальновживані символи,
такі як в англійській мові
чи символи з арабської мови,
які не складно відобразити,
тоді в тезі вам слід використати набір символів utf-8.
Далі йде тег (тег заголовка),
який бразуер використовує, щоб дати назву сторінці.
Це те, що відображається у вкладці браузера зверху,
в закладках та в результатах пошуку.
На сайті Khan Academy заголовок можна побачити зверху над веб-сторінкою.
Дозвольте я зміню заголовок.
Я планую створити сторінку про кроликів.
Тому я напишу "Все про кроликів",
і ви можете відразу побачити, як зверху змінюється назва.
Чудово, ми закінчили з цими деталями,
тому ми завершуємо роботу з головним тегом і переходимо до наступного тега,
в якому все відбувається. Переходимо до тега (тег тіла сторінки).
Зараз це виглядає досить нудно, всього лиш початок і кінець.
Що я маю додати?
Що ж, я роблю сторінку про кроликів,
тому я напевно маю про це написати
у великому заголовку зверху.
Щоб додати заголовок, ми використовуємо тег .
"Все про кроликів", чудово.
Загалом ми маємо шість тегів,
які ми можемо використовувати для написання заголовків: h1, h2, h3, h4, h5 та h6.
h1 використовується для написання найважливішого заголовка сторінки,
а h6 – для найменш важливого.
Давайте додамо декілька заголовків для інших розділів.
Я використаю h2, оскільки це є
трішечки менш важливий розділ.
І напишу в ньому "Пісні", добре.
Тепер додамо трішки інформації.
Цільовою аудиторією цієї сторінки є інопланетяни,
які ніколи не бачили кроликів.
Тому тут мені краще написати детальний опис кроликів.
Насправді, я думаю, що мені потрібно цілий абзац інформації.
Як я можу зробити абзац в HTML?
Звичайно ж, за допомогою тега .
Ми ставимо тут тег , і далі мені потрібно лише
вставити інформацію,
тому вам не потрібно буде дивитись, як я це все друкую.
Прекрасно.
Тепер інопланетянам потрібна пісенька, щоб привітати кроликів,
тому я дам їм слова моєї улюбленої.
Я знову використаю тег і вставлю пісню
"Маленький кролик ФуФу", така прекрасна пісня.
Але...оу, вся пісня показана в одному рядку.
Як інопланетяни знатимуть, коли зупинятись?
Чому браузер не відображає
поділ на рядки, який я зробила?
Насправді, браузери переважно ігнорують перехід рядка
і пробіли в HTML-коді.
Якщо ми хочемо, щоб браузер відобразив переходи рядків,
ми маємо це зрозуміло сказати, використавши інший тег,
тег , який означає розрив.
Ми пройдемось по тексту і додамо тег після кожного рядка.
Тепер це виглядає, як пісня.
А ви помітили дещо веселе в тезі ?
Тут немає кінцевого тега.
Якщо ви подумаєте про це,
розрив рядка не містить ніякої інформації,
тому й не має ніякого закінчення.
Лише початковий тег – це все, що нам потрібно.
Тут він і є.
Інопланетяни вивчать основну інформацію про кроликів,
а ви вже вивчили основи HTML.
Після того як я закінчу свою лекцію,
побавтеся з цими тегами і спробуйте щось змінити.
Коли будете готові, переходьте до свого першого завданя з HTML.
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, благодійний фонд "MagneticOne.org"