Բարի գալուստ մեր կայքէջ
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում
և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ
Բայց առաջին հերթին եկեք
ուսումնասիրենք դատարկ էջի կմախքը
Ամեն կայքէջ սկսվում է
այս, վերևում երևացող տողը, 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"