>> Lets start with index.html.
Don't worry HTML is pretty simple.
It describes the content and lay out of elements on a web page.
We'll be comparing what we see here to the website.
In this top section, we see the page's head tag defined.
We'll often find CSS in JavaScript links, like these here.
Inside the body of the text, we can see that we've got content that says,
Hello world.
And when we flip over to Chrome, there it is.
If you want to learn more about HTML,
check out the link in the instructor's notes.
Looking through the HTML for our resume, there are a few elements worth noting.
Like this one, div id equals main.
I can see that it says, Hello world here, but showed up on the website.
Div represents different elements on the page,
you can think of them as starting like empty all purpose boxes.
In this case, we've given this div a unique id of main,
which our JavaScript will be referencing later.
Do you see anything else, James?
>> It doesn't look like a resume at all right now,
but I do see some structure for one.
It looks like there are sections for education, work and projects.
What do you think about filling these in with our resume data?
>> Yeah.
You know, web developers have options for building great web pages.
And I think there are two obvious strategies.
They can either hard code the information by writing HTML that
explicitly defines the content users should see.
Or they can use an HTML template and
fill it in with data programmatically when a user requests a page.
In this case, we can see the two work experience sections.
In the hard coded version, we can see all of Phillip J.
Fry's data listed here.
While on the template side, we see the work experience section.
But right now, it's empty.
>> The hard coded route is good to start, but it isn't a solution for
the long term.
Anytime we want to make a change to the page,
we have to open up the HTML, make the changes by hand, which can be a big pain.
For the resume project, we'll be using the template strategy.
What do you think?
>> Yeah, that works for me.
besides, if we weren't then this class would be about HTML.
Which it isn't.
>> Yeah, there are other great introductions to HTML online.
See the instructor's notes for a few links.
At the top of the HTML, there's a link to jQuery.js, the jQuery library.
There's also helper.js,
which contains some simple helper JavaScript we've prepared for your project.
We'll be coming back to it in a few minutes.
>> We've got two more script tags at the bottom of the HTML.
This tag for resumeBuilder.js, tells the browser to download and
execute some JavaScript.
We'll be using this script to add HTML content to the main section of the HTML.
>> The browser will render this page just saying, Hello world.
To give you a better overview of what's going on here,
we've zoomed out the page so you can see everything all at once.
We have Hello world here, some empty resume sections and then some JavaScript.
And over on this side,
we can see a general representation of how it would look in a browser.
We're printing the Hello world and
then after the Hello world, we have all of the resume sections.
And when we hit the JavaScript section that includes resume builder down here,
the browser will run the script.
Which will change the HTML in these experience sections and
the page will now show our resume.
>> But wait.
You may ask yourself, what about all of these experience sections.
It looks like they're in the resume, but
they aren't showing up on the page right now.
That's because of these scripts at the bottom of our resume.
Using JavaScript, we're checking to see if any of
these sections contain any content.
And if not, we hide them.
We'll get a chance to break down these JavaScript sections later
.>> فلنبدأ بـindex.html
.لا تقلقوا فـHTML بسيط جدًا
.إنه يصف محتوى العناصر وتخطيطها في أي صفحة ويب
.سنقارن ما نراه هنا بموقع الويب
.في هذا القسم العلوي، نرى علامة رأس الصفحة معرَّفة
.وكثيرًا ما سنجد CSS في روابط JavaScript، كهذه هنا
،وبداخل الجزء الرئيسي من النص، يمكننا أن نرى بأن لدينا محتوى يقول
.Hello world
.وعندما نقلب وننتقل إلى Chrome، فها هو
،إذا أردتم معرفة المزيد عن HTML
.راجعوا الرابط في ملاحظات المدرب
.وبالنظر في HTML الخاص بسيرتنا الذاتية، فإن هناك بضعة عناصر جدير بنا أن نذكرها
.مثل هذا العنصر، div id equals main
.يمكنني أن أرى بأنها تعبر عن، Hello world here، لكنها ظهرت على موقع الويب
،Div يمثل عناصر مختلفة في الصفحة
.يمكنكم التفكير فيها عند البدء على أنها كل مربعات الأغراض الفارغة
،وفي هذه الحالة، أعطينا div معرِّفًا فريدًا وهو main
.الذي ستشير إليه JavaScript لاحقًا
هل ترى أي شيء آخر جيمس؟
،>> لا تبدو كسيرة ذاتية على الإطلاق حتى الآن
.لكني أرى بالفعل بنية لواحدة
.يبدو وكأن هناك أقسام للتعليم، والعمل، والمشروعات
ما رأيكم في ملء هذه الأقسام ببيانات سيرتنا الذاتية؟
.>> أجل
.أتعلمون، يمتلك مطورو الويب خيارات لبناء صفحات ويب رائعة
.وأعتقد بأن هناك استراتيجيتين واضحتين
يمكنهم ترميز المعلومات بشكلٍ ثابت من خلال كتابة HTML التي
.تعرِّف المحتوى الذي يجب أن يراه المستخدمون بشكلٍ صريح
أو يمكنهم استخدام قالب HTML وملؤه
.بالبيانات برمجيًا عندما يطلب المستخدم صفحة
.وفي هذه الحالة، يمكننا رؤية قسمي الخبرة العملية
.وفي النسخة ذات الترميز الثابت، يمكننا أن نرى كل
.بيانات فيليب جيه فراي مدرجة هنا
.بينما على جانب القالب، نرى قسم الخبرة العملية
.لكنه حتى الآن فارغ
>> من الجيد أن نبدأ بالمسار ذو الترميز الثابت، لكنه لا يُعد حلاً
.على المدى الطويل
،وفي أي وقت نود فيه إدخال تغيير على الصفحة
.سنضطر إلى فتح HTML، وعمل إجراء التغيير يدويًا، وهو ما قد يمثل معاناة كبيرة
.بالنسبة لمشروع السيرة الذاتية، سنستخدم استراتيجية القالب
ما رأيكم؟
.>> أجل، أرى ذلك مناسبًا
.وعلاوةً على ذلك، لو أننا لم نستخدم تلك الاستراتيجية لكانت هذه الحصة عن HTML
.وهو ما ليس صحيحًا
.>> أجل، هناك مقدمات أخرى رائعة عن HTML على الإنترنت
.راجع ملاحظات المدرب للعثور على بعض الروابط
.في قمة HTML يوجد رابط إلى jQuery.js، مكتبة jQuery
،وهناك أيضًا helper.js
.الذي يحتوي على بعض JavaScript المساعدة التي أعددناها لمشروعك
.سنعود مرةً أخرى إليها بعد دقائق معدودة
.>> لدينا علامتي برنامج نصي إضافيتين في أسفل HTML
هذه العلامة الخاصة بـresumeBuilder.js تطلب من المستعرض تنزيل بعض
.JavaScript وتنفيذه
.سنستخدم هذا البرنامج النصي لإضافة محتوى HTML للقسم الرئيسي من HTML
.>> سيعرض المستعرض هذه الصفحة التي يظهر فيها Hello world
،لنمنحكم نظرة عامة أفضل عما يجري هنا
.فقد صغَّرنا الصفحة حتى يمكنكم رؤية كل شيء مرة واحدة
.لدينا Hello world هنا، وبعض أقسام السيرة الذاتية الفارغة، ثم بعض JavaScript
،وفي أعلى هذا الجانب
.يمكننا أن نرى تمثيلاً صغيرًا لما سيبدو عليه في أي مستعرض
سنطبع Hello world ثم
.بعد Hello world، لدينا كل أقسام السيرة الذاتية
،وعندما ننقر فوق قسم JavaScript الذي يحتوي على resume builder هنا
.سيشغِّل المستعرض البرنامج النصي
الذي سيغيِّر HTML في أقسام الخبرات هذه
.وستُظهر الصفحة الآن سيرتنا الذاتية
.>> لكن انتظروا
.ربما تسألون أنفسكم، ماذا عن كل أقسام الخبرات هذه
إنها تبدو مثلما هي في السيرة الذاتية، لكنها
.لا تظهر على الصفحة الآن
.والسبب في ذلك هو تلك البرامج النصية في أسفل سيرتنا الذاتية
وباستخدام JavaScript، سنتحقق لنرى ما إذا كان أيٌّ
.من هذه الأقسام يحتوي على أي محتوى
.وإذا لم تكن تحتوي على محتوى، فسنخفيها
ستكون لدينا فرصة تقسيم أقسام JavaScript هذه لاحقًا
index.html부터 시작해보죠
HTML은 정말 간단하니 걱정하지 마세요
HTML은 웹페이지 요소의 내용과 레이아웃을 나타냅니다
여기 보이는 것과 실제 웹사이트를 비교해볼까요?
위쪽에 head 태그가 정의되어 있네요
자바스크립트 링크에는 CSS가 자주 보입니다
부분에서는
Hello world!라는 문구를 볼 수 있어요
그리고 Chrome 창을 열면
보이시죠?
HTML에 대해 더 알고 싶다면
체크해두면 좋을 내용이 있으니
instructor's notes의 링크를 확인하세요
>> 같은 것들요
웹사이트에 나타난 Hello world!가 여기 있네요
div는 페이지 각각의 요소를 나타냅니다
빈 상자라고 생각하시면 될 것 같아요
여기서는 div에 id="main"이라는 선택자를 넣어줬습니다
이 부분은 추후 자바스크립트가 참조할겁니다
제임스, 더 설명할 거 있어요?
>>아직 이력서 같지 않지만
학력, 경력, 프로젝트 이력 등의
몇 가지 형식은 보이네요
그럼 내용을 채워볼까요?
>> 그래요
좋은 웹페이지를 만드는 다양한 방법이 있겠지만
크게 두 가지 전략이 있다고 생각해요
하나는 사용자들이 봐야 하는 내용을 명시적으로
하나하나 코딩하여 구현하는 방법(하드코딩)과
다른 하나는 사용자들이 페이지를 찾을 때마다
프로그램을 이용해 HTML 템플릿을 채우는 방법이에요
여기 2개의 경력란이 있는데요
하드코딩 버전을 보면
필립 제이 프라이(애니메이션 등장인물)의 정보가 있고
반면 템플릿 방식 경력란을 보면
지금은 비어있어요
>>처음 시작할 때는 하드코딩이 좋을 수 있겠지만
장기적으로 봤을 때 좋은 방법은 아니죠
페이지에서 바꾸고 싶은 게 생길 때마다
일일이 고친다면 매우 힘들겠죠?
그래서 우리는 템플릿 방법을 써보려고 합니다
어떻게 생각하세요?
>>좋아요
게다가 템플릿 방법을 사용하지 않는다면
HTML 강의가 되어버릴 거예요
>> 필요하다면 instructor's notes에 HTML 온라인 강의 링크를
걸어두었으니 참고해보세요
HTML 상단에 jQuery.js라는
jQuery 라이브러리 링크가 있네요
helper.js도 있어요
hepler.js는 간단한 자바스크립트 도우미랍니다
이 부분은 잠시 후에 다시 보도록 하죠
>>아래에 2개의 script 태그가 더 있군요
이 태그는 브라우저에게
자바스크립트를 다운로드하고 실행하라고 명령합니다
이 스크립트로 HTML을 작성해보겠습니다
>> 브라우저에는 Hello world만 보일 거예요
페이지를 확대해 설명드리겠습니다
Hello world가 있고
빈 이력서 부분과 자바스크립트가 보입니다
그리고 오른쪽에
브라우저에 보일 화면을 그려봤습니다
먼저 Hello world를 출력하고
이력서 영역이 나오겠죠
아래 쪽의 resume builder가 포함된 부분을 누르면
브라우저에서 코드가 실행될 거예요
그러면 경력란의 HTML이 바뀌고
이력서가 페이지에 나타날 것입니다
>>잠시만요
페이지에 경력란이 왜 보이지 않는지 궁금하실 수 있어요
이력서 안에 경력란이 있는 것 같지만
실제 페이지에서는 보이지 않죠
이력서 아래의 코드 때문인데요
자바스크립트에서는
각 칸이 내용을 담고 있는지 확인하고
내용이 없다면, 칸 자체가 숨겨집니다
이 부분은 나중에 더 알아봅시다
Vamos começar com index.html.
Não se preocupe, o HTML é muito simples.
Ele descreve o conteúdo e layout
dos elementos em uma página da Web.
Vamos comparar o que vemos
aqui com o site.
Nesta seção superior, vemos
a tag head da página definida.
Muitas vezes, vamos encontrar CSS
em links JavaScript, como estes aqui.
Dentro do corpo do texto,
podemos ver que temos
conteúdo que diz, Hello world.
E quando alternamos
para o Chrome, ele está lá.
Se quiser saber
mais sobre HTML,
confira o link
nas Notas do instrutor.
Percorrendo o HTML
do nosso currículo,
há alguns
elementos importantes.
Como este aqui: div id="main".
Posso ver que ele diz "Hello world"
aqui, mas é mostrado no site.
Div representa diferentes
elementos na página,
você pode pensar neles, a princípio,
como caixas vazias versáteis.
Nesse caso, demos a
este div uma id exclusiva de main,
à qual nosso JavaScript
fará referência mais tarde.
Você vê mais
alguma coisa, James?
Não parece em nada um currículo
até agora,
mas vejo
a estrutura de um.
Parece que há seções
para formação, experiência e projetos.
O que você acha de preenchê-las
com nossos dados de currículo?
Pois é.
Sabe, os desenvolvedores Web
têm opções
para criar excelentes páginas da Web.
E eu acho que
há duas estratégias óbvias.
Podemos fixar as informações
no código escrevendo um HTML
que defina explicitamente
o conteúdo que os usuários veem.
Ou podemos usar um template HTML
e preenchê-lo com dados
de modo programático
quando um usuário solicitar uma página.
Nesse caso, podemos ver
duas seções de experiência profissional.
Na versão em código,
vemos todos os dados de Phillip J. Fry
listados aqui.
Enquanto, no lado do template,
vemos a seção de experiência profissional.
Mas, no momento, está vazia.
A rota fixada no código é
um bom começo, mas não é
uma solução de longo prazo.
Quando quisermos fazer
uma alteração na página,
temos que abrir o HTML
e fazê-la manualmente,
o que pode ser um grande problema.
Para o projeto do currículo, usaremos
a estratégia de template.
O que você acha?
Sim, por mim, tudo bem.
Até porque, se não fosse,
esta aula seria sobre HTML.
O que não é.
Sim, há outras excelentes introduções
ao HTML online.
Veja alguns links
nas Notas do instrutor.
Na parte superior do HTML,
há um link para jQuery.js,
a biblioteca jQuery.
Também há helper.js,
que contém JavaScript
de auxílio simples que
preparamos
para seu projeto.
Voltaremos nisso
daqui a pouco.
Temos mais duas tags script
na parte inferior do HTML.
Esta tag para resumeBuilder.js
diz ao navegador para baixar
e executar JavaScript.
Usaremos este script para adicionar
conteúdo HTML
à seção principal do HTML.
O navegador vai renderizar esta página
dizendo apenas Hello world.
Para que você tenha uma melhor visão geral
do que acontece aqui,
reduzimos a página para que
você possa ver tudo de uma vez.
Temos Hello world aqui,
algumas seções vazias
e algum JavaScript.
Deste lado,
podemos ver uma representação geral
de como seria sua aparência em um navegador.
Estamos imprimindo o Hello World,
e depois de Hello World, temos
todas as seções do currículo.
E, quando acessamos a seção JavaScript
que inclui
o construtor de currículo aqui,
o navegador executa o script.
O que mudará o HTM
nas seções de experiências
a página agora mostrará
nosso currículo.
Mas, espere.
Você pode se perguntar: e quanto a
todas essas seções de experiência?
Parece que elas estão no currículo,
mas não são mostradas
na página no momento.
Isso se deve a esses scripts
na parte inferior do nosso currículo.
Usando JavaScript, estamos verificando
se algumas
destas seções
têm algum conteúdo.
Se não tiverem, nós as ocultaremos.
Teremos a chance de decompor
essas seções JavaScript mais tarde.
index.html ile baslayalim.
HTML cok kolay, endiselenmeyin.
HTML, icerigi ve farkli parcalarin web sayfasinda nerelerde bulunacagini tanimliyor.
Burada gorduklerimizi, web sayfasiyla karsilastiracagiz.
Bu ust kisimda, sayfanin head etiketi tanimlanmis.
Burada oldugu gibi, CSS javascript linkerinin icerisinde sikca gorulur.
Merhaba dunya.
>> Давайте почнемо із index.html
Не хвилюйтесь HTML досить
простий
Він описує зміст та макет елементів
веб-сторінки
Ми будемо порівнювати що бачимо тут
порівнянно із веб-сторінкою
В цій верхній секції ми бачимо тег head
сторінки
Ми часто будемо знаходити посилання на
CSS в JavaScript як це
Всередині body тексту ми бачимо зміст
"Hello world" (Привіт світ)
А тепер переключимось до Chrome
і ось він є.
Якщо ти хочешь вивчити більше про
HTML
Глянь посилання в примітках ментора
Проглядаючи код нашего резюме помітні
декілька елементів які варто відзначити
Як цей div id = main
Я бачу що він вказує що Hello world тут
і він з'явився на сайті
Div представляє собою різні елементи
сторінки
можеш про них думати як про порожні
універсальні коробки
В цьому випадку ми даємо div унікальний
ідентифікатор-main
до якого JavaScript буде звертатись
пізніше
Ти не бачиш ще чогось, Джеймс?
>> Воно не виглядає як резюме зараз
проте я бачу структуру для нього
Виглядає ніби тут є виділені розділи для
освіти, досвіду та проектів
Може вже пора наповнювати резюме
інформацією?
>> Так
Ти знаеш веб-розробники мають декілька
варіантів побудови крутих веб-сторінок
Я гадаю тут є дві очевидні стратегії
Вони можуть вписати інформацію прямо в
HTML
таким чином фіксуючи контент видимий
користувачам
Або вони можуть використовувати HTML
шаблон
та програмно його заповнювати коли
користувач запитує сторінку
В цьому випадку ми бачимо 2 секції
о досвіді
В версії із зафіксованим контентом ми
бачимо всю інформацію Филпа Дж.
Фрая перелічену тут
А в варіанті із макетом ми бачимо лише
розділ для досвіду
Проте зараз він пустий
>> Фіксований контент це хороший початок
проте це
не довгострокове рішення
Коли нам буде потрібно змінити сторінку
нам доведеться відкривати HTML файл робити
зміни вручну що може бути досить боляче
Для проекту із резюме ми будемо
використовувати макет
Що ти гадаеш?
>> Так, це гарна ідея
до того ж в іншому випадку цей курс був би
про HTML
а він про інше
>> Так, до того ж інший крутий стартовий
курс про HTML
Переглянь нотатки ментора за посиланнями
Вгорі HTML файлу є посилання до jQuery.js
бібліотеку jQuery
Також є helper.js
який простий допоміжний JavaScript який
ми приготували для твого проекту
Ми повернемось до нього через декілька
хвилин
>> У нас ще є декілька тегів скриптів
внизу HTML
Цей тег для resumeBuilder.js вказує
браузеру завантажити та
виконати деякий JavaScript
Ми будемо використовувати цей скрипт аби
додати зміст до головних секцій HTML
>> Браузер відобразить цю сторінку лише
із написом Hello world
Аби дати кращій огляд що тут коїться
ми зменшили сторінки аби ти одразу бачив
все що одразу
Ми маємо Hello world тут декілька пустих
секцій резюме і потім якийсь JavaScript
И на цій стороні
Ми бачимо як воно буде взагалі
виглядати в браузері
Ми друкуємо Hello world та
потім йдуть наші секції резюме
І коли ми потрапимо в секцію що включає
будівника резюме
браузер запустить скрипт
Котрий змінить HTML в секціях про
досвід роботи та
сторінка тепер відобразить наше резюме
>> Проте зачекай,
Ти можешь спитати, що такого в секції про
досвід роботи
Вони ніби в резюме проте
їх не видно зараз
Це через те що ці розташовані внизу
Використовуючи JavaScript, ми перевіряємо
чи є в цих секціях якась інформація
Якщо ні то ми їх ховаємо
Ми ще повернемось до цих сецій JavaScript
пізніше
我们先来看一下 index.html
别担心 HTML 其实非常简单
它用于描述网页内容和元素布局
我们来看里面都写了什么
最上面是页面的 head 标签
我们通常会链接到 CSS 像在这里
在 body 部分 我们能找到一行文字
Hello world
转到 Chrome 浏览器上能看到同样的文字
如果你想学习更多 HTML 知识
请查看讲师注释
HTML 里面有几个值得注意的元素
比如这个 id 等于 main 的 div 元素
里面包含显示在浏览器的那行 Hello world
Div 分隔页面中的不同部分
你可以把他们看成装东西的空箱子
这里 我们赋予该 div 唯一 id main
后面会通过 JavaScript 引用它
你注意到其它东西了么 James?
这看起来还不像一份简历
但基本结构已经有了
比如 education work projects 三个部分
现在向里面填充内容怎么样 ?
好
这时 网站开发者
通常有两种策略可选
一种是采取硬编码的方式
将内容直接写到 HTML 里
另一种是使用 HTML 模板
在用户请求页面的时候向里面填充所需数据
来看一看 experience 部分的两种实现
硬编码版本中
所有 Phillip J.Fry 的信息都列在这里
再来看看模板方法里 experience 部分
目前它还是空的
硬编码的方式适于初学
但长远来讲绝不是个好办法
我们可能在任意时间要修改页面
每次都要打开 HTML 进行手动修改绝对是个头疼事
在简历项目中 我们会使用模板方法
你觉得怎么样
棒 那对我很有用
另外 这并不是 HTML 课程
那不是我们关注的重点
优秀的 HTML 在线课程有很多
查看讲师注释里的链接吧
在 HTML 文件顶部 有一个链接指向 jQuery 库
我们还引入了 helper.js,
里面保存着为项目准备的代码
过几分钟我们来细看它
HTML 文档底部还有两个脚本标记
这是对应 resumeBuilder.js 的
来告知浏览器下载并运行 JavaScript
我们用该脚本向 HTML 的 main 部分添加内容
浏览器渲染页面后显示 Hello world
为了方便观察
我们聚焦到页面上
Hello world 在这 然后是一些空白部分和 JavaScript
在另一边
我们能看到它在浏览器中大概样貌
先打印 Hello world
之后是简历的若干部分
到了包含 JavaScript 的部分
浏览器就会运行脚本
改写 HTML 的 experience 部分
页面中出现我们的简历内容
等一下
你可能会问其它部分在哪
我们简历中本应包含的内容
页面上却没有完全显示
这是底下这段代码造成的
我们用 JavaScript
检查这些部分是否有内容
如果没有 就隐藏它们
我们之后会对这段 JavaScript 作详细说明