TechnoHTML 5

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

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

Цели

Целите на курсот се да им овозможат на учениците основно познавање и практични вештини за креирање веб-страници со користење на HTML и CSS, како и да развијат интерес за компјутерски науки и програмирање, во согласност со STEM целите за основно и средно образование.

По завршувањето на курсот, учениците ќе умеат да:

• Препознаваат тема, цел и публика за веб-страница
• Го разгледуваат изворниот код на постоечка веб-страница
• Го разбираат значењето и улогата на HTML и CSS таговите
• Планираат и организираат идеи за изглед и содржина на веб-страница
• Креираат едноставна веб-страница со HTML и ја стилизираат со CSS
• Поставуваат атрибути за телото на страната, текстот и графиката
• Вметнуваат слика и ја позиционираат со CSS
• Додаваат хиперврска (линк) на текст или слика користејќи HTML
• Вметнуваат мета тагови за клучни зборови и опис на страната
• Креираат листи, поставуваат слика како позадина, користат класи или додаваат табели

Овој курс претставува вовед во програмирањето и има за цел да ги мотивира учениците да продолжат со понатамошно учење и истражување во областа на веб-развојот и технологијата.

Задачи

Курсот TechnoHTML има вкупно 18 задачи поделени во шест сесии. Забелешка: Овој проект е наменет за деца. Активностите воведуваат само основни HTML тагови и CSS атрибути. Нашата цел е учениците да го засакаат програмирањето. Поради тоа, содржината е поедноставена. До крајот на проектот, учениците треба да се чувствуваат сигурни во нивната способност да додаваат HTML елементи и да поставуваат CSS атрибути – а не фрустрирани. HTML лекциите за почетници се дизајнирани да развијат интерес за програмирање.

• Сесија 1: Во потрага по изворот
  Учениците добиваат основно разбирање за Интернетот и HTML. На почетокот учат клучна терминологија и размислуваат за значењето на Интернетот во нивниот живот. Потоа читаат за најважните настани во развојот на оваа технологија. Откако ќе се запознаат со историјата, учат за World Wide Web и користат интернет прелистувач за да гледаат веб-страници. Им се претставува HTML и неговото значење во денешниот свет. Потоа ја разгледуваат изворната кодна структура на веб-страниците и го толкуваат значењето. По оваа сесија, учениците треба да имаат основно разбирање за интернет термините и HTML кодот.
• Сесија 2: Декодирање на кодот
  Учениците учат за функцијата на HTML таговите и CSS атрибутите. Отпочнуваат со отворање на веб-страница и менување на кодот за: наслов, заглавија, пасуси, прекин на ред, хоризонтална линија, слика и хиперлинк. Откако ќе се запознаат со основните елементи, продолжуваат со форматирање на веб-страница. Користејќи пример-датотека, го уредуваат CSS за да ја изменат бојата, ширината, фонтот, големината на фонтот, висината на линијата, порамнувањето и внатрешните растојанија (padding). Откако ќе го разберат HTML документот и кодната структура, го планираат изгледот на својата лична веб-страница, барајќи информации, слики и интересни линкови. Ова им служи како подготовка за следната сесија – започнување со изработка.

• Сесија 3: Почеток на изработка на веб-страницата
  Учениците започнуваат со изработка на својата веб-страница. Прво ја создаваат HTML структурата, додаваат наслов, заглавие, неколку пасуси и хоризонтална линија. Страницата се зачувува како index.html. Потоа, секој елемент се форматира со CSS: боја, ширина, позиција, фамилија на фонт, големина на фонт, порамнување, внатрешно растојание и висина на линија. Им се даваат совети за подобрување на изгледот и предизвици со кодирање за ученици што сакаат дополнително да се тестираат.
• Сесија 4: Додавање слики и линкови
  Учениците продолжуваат со дизајнирање на веб-страницата. На почетокот ги проверуваат снимените слики – дали се соодветно именувани и димензионирани. Откако се подготвени, користат HTML за да ги вметнат сликите и CSS за стилизирање. Потоа креираат хиперлинкови кон три веб-страници. Во проширените активности има дополнителни предизвици поврзани со дизајнот.
• Сесија 5: Мета тагови
  Учениците се запознаваат со мета тагови. Истражуваат како пребарувачите и социјалните мрежи ја користат оваа информација. Во HTML документот вметнуваат мета тагови за опис и клучни зборови. Потоа користат контролна листа за да ја анализираат својата веб-страница и да идентификуваат области за подобрување. Доколку има време, се нудат и проширени активности како вметнување анимиран текст, анимирани гифови и табели.
• Сесија 6: Поставување на веб-страницата
  Во последната сесија, се организира Конференција на HTML развивачи на која учениците ги гледаат веб-страниците на своите соученици и оставаат позитивни коментари за истите.

Дополнителни активности:

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

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

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

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

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

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