7. TechnoHTML 5

Станете веб-дизајнер користејќи веб-базиран уредувач на текст на HTML.

Во овој проект, студентите стануваат веб -дизајнери, користејќи HTML и CSS. За почеток, студентите се запознаваат со историјата на Интернет и HTML јазикот. Следно, тие манипулираат со изворниот код за да ја откријат функцијата на вообичаените ознаки и CSS атрибути. Ова знаење се применува за изградба на веб -страница. Во текот на процесот на дизајнирање, инструкциите објаснуваат како да стилизирате текст, графика и хиперврски за да создадете информативна веб -страница. За оние на кои им е потребен дополнителен предизвик, активностите за проширување ги охрабруваат учениците да креираат листа, да применат позадина на слика, да приспособат хиперлинкови, да користат CSS часови, да вметнуваат анимирани слики и да градат табели. По завршувањето, веб -страниците се споделуваат со други.

Цели

По завршувањето на овој проект ученикот:

• Ќе умее да идентификувајте тема, цел и публика за веб страница
• Ќе умее да го погледне изворниот код на веб страницата
• Ќе умее да го декодира значењето на ознаките HTML и CSS
• Ќе умее да планира и организира идеи за веб страница
• Ќе умее да создаде веб страница користејќи HTML и обликувајќи ја со CSS
• Ќе умее да постави атрибути за телото, текстот и графиката
• Ќе умее да вметне слика и да ја постави со помош на CSS
• Ќе умее да додаде хиперврска до текст или слика користејќи HTML
• Ќе умее да додаде мета-ознаки за клучни зборови и опис
• Ќе умее да создаде списоци, позадина на слики, часови или табели

Задачи

• Задача 1: Основи на Интернет
  Научете основна терминологија. Размислете за употреба на Интернет во секојдневниот живот.
• Задача 2: Историја на Интернет
  Зголемете ја свесноста за пронајдоците што го формираа Интернетот.
• Задача 3: За World Wide Web
  Истражете делови од веб -прелистувач. Дознајте зошто е измислена World Wide Web.
• Задача 4: Што е HTML?
  Стекнете основно разбирање за HTML и неговата важност во светот денес.
• Задача 5: Барање извор
  Проверете го изворниот код на веб-страница. Декодирајте го значењето на ознаките.
• Задача 6: Уредете HTML документ
  Анализирајте примерна веб-страница користејќи HTML уредувач на текст. Изменете ги ознаките.
• Задача 7: Уредете го стилот на HTML документ
  Изменете ги атрибутите на веб-страница за да откриете како CSS создава конзистентен дизајн.
• Задача 8: Планирајте веб-страница
  Завршете организатор за да планирате веб-страница. Соберете информации, слики и веб-страници.
• Задача 9: Започнете со градење веб-страница
  Кодирајте HTML ознаки за да додадете наслов, наслов, тело и хоризонтално правило.
• Задача 10: Форматирајте ја веб-страницата користејќи CSS
  Доделете атрибути на секој елемент на веб-страницата за да го поставите стилот.
• Задача 11: Подгответе ги вашите слики
  Прилагодете го името на датотеката, видот на датотеката и големината на сликите.
• Задача 12: Додајте слики и форматирајте го стилот
  Додадете слики на веб-страницата. Форматирајте стил на слика, плови и маргини користејќи CSS.
• Задача 13: Создадете хиперврски
  Врска до дополнителни информации користејќи хиперврски за текст и слика.
• Задача 14: Истражувајте мета тагови
  Скенирајте ги резултатите од пребарувачот користејќи клучни зборови. Погледнете мета-ознаки во изворниот код.
• Задача 15: Додадете мета-ознаки на веб-страница
  Кодирајте мета-ознаки за да ја опишете веб-страницата.
• Задача 16: Дали сте подготвени да испратите?
  Прегледајте ја веб-страницата користејќи список за проверка. Прегледајте го кодот.
• Задача 17: Поставете ја вашата веб-страница
  Објавете веб-страница на Интернет.
• Задача 18: Конференција за развивачи на HTML
  Погледнете веб-страници. Понудете позитивни повратни информации на врсниците.

Факултативни задачи

• Анализирање веб страници: Погледнете три примероци веб страници и одговорете на прашања.
• Списоци на формати: Користете парови со ознаки и CSS за да направите списоци со нумери и нумери.
• Додадете слика во позадина: Користете слика како позадина за веб-страницата.
• Форматирај стил на хиперврска: Поставете атрибути на CSS. Променете го изгледот на врските.
• Креирај класа: Поставете уникатни атрибути за слики за слики и текст.
• Додајте анимиран текст и слики: Создадете анимиран текст. Додадете анимиран гиф.
• Создадете табела: Организирајте информации користејќи HTML за да направите редови и колони.
• Поднесете ја вашата страница до пребарувач: Зголемете ги шансите пребарувачите да ја најдат веб-страницата

Технолошка интеграција: компјутерски науки, јазични уметности

Технолошка вештина: Интернет, програмирање, веб дизајн

Програма: Уредувач на текст

Наставата се изведува:

• целосно онлајн,
• по однапред утврден распоред на часови,
• во виртуелна училница под водство на инструктор.

Предуслов:

• Персонален компјутер или лаптоп
• Windows 7 или понов
• Интернет конекција