«Весенне-летний фестиваль знаний 2024»

ПРОФПРОБА. Компетенция «Веб-дизайн и разработка сайта»

ПРОФПРОБА

Компетенция «Веб-дизайн и разработка сайта»

Цель занятия: познакомить с основами web-дизайн и разработкой сайта

Задачи:

обучающая: сформировать знания о методах создания web-страниц с помощью HTML-документа.

воспитательная: формирование информационной культуры обучающихся, усидчивости, положительной мативации учебного труда

развивающая: развитие познавательного интереса к профессии программист (web-дизайнер)

Олимпиады: Информатика 1 - 11 классы

Содержимое разработки

Профессиональная проба - реальная возможность для школьников за короткое время, час-полтора,  научиться выполнять действия, характерные для людей той или иной профессии. Её идея заключается в организации освоения школьниками простейших профессиональных операций, чтобы они могли "почувствовать руками" труд и  некоторые повседневные обязанности по профессии.    На этом этапе подросток получает время, чтобы спланировать шаги  по достижению профессионального успеха.

Профессиональная проба (профпроба) помогает в профессиональном самоопределении, осмысливании версий профессионального будущего, поскольку профпроба выступает индикатором правильности выбора. Ведь зная свои возможности, имея начальное, практическое, представление о профессии, человек сможет определить, понравится ему работа или нет. И сможет ли он выполнять все её требования.

Педагоги и психологи рекомендуют  учащимся школ пройти как можно больше видов профпроб и только после этого выбрать ту профессию, в которой их интересы и способности могут раскрыться максимально. Тогда  и в дальнейшем, при начале трудовой деятельности, удовлетворённость трудом будет высокой.

 

План проведения профессиональных проб

на декабрь 2018 года

  Текст документа (.pdf)

ПРОФПРОБА

Компетенция «ИТ-квантум. Веб-дизайн и разработка сайта»


Цель занятия: познакомить с основами web-дизайн и разработка сайта

Задачи:

обучающая: сформировать знания о методах создания web-страниц с помощью HTML-документа.

воспитательная: формирование информационной культуры обучающихся, усидчивости, положительной мативации учебного труда

развивающая: развитие познавательного интереса к профессии программист (web-дизайнер


Здравствуйте, меня зовут (Валентина Александровна) (Елена Фанилевна).

Вы успешно прошли тестирование по профориентации на сайте «Билет в будущее», получили информацию к размышлению, в каком направлении двигаться, создавая карьерную лестницу. Я, в свою очередь, предлагаю Вам познакомиться с одной из компетенций, которая, я надеюсь, вам понравится и, быть может, кто-то свяжет свое будущее с этим направлением.

Давайте отгадаем кроссворд.

Педагог. Как вы думаете, какова тема сегодняшнего занятия? (ответы обучающихся) Итак, тема нашего занятия: «Язык гипертекстовой разметки HTML для создания сайта».

Я расскажу Вам о создании простейшего сайта. Кто знает, может быть, знания, которые Вы получите на этом занятии, впоследствии станут началом Вашего большого жизненного успеха.

Разумнее начать с простого, а именно с HTML (HyperText Markup Language - язык гипертекстовой разметки) - базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML - простейший язык, который может освоить даже школьник младших и средних классов.

Пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: Веб-дизайн и разработка сайта.

Для создания простейшей Web-странички можно воспользоваться текстовым редактором «Блокнот».

Синтаксис языка HTML

Язык разметки гипертекста используется для создания Web – страниц. Язык разметки гипертекста (HTML) – сокращение от английского словосочетания Hypertext Markup Langrage.

HTML представляет собой набор команд, определяющих, в каком виде документ будет просматриваться в окне браузера.


Документ HTML – это текстовый файл, в который вставлены флаги разметки – «тэги» (Markup tags). Стандартное расширение файла web – документа *.htm или *.html

В основе HTML-файла лежат теги. Теги определяют структуру Web-страницы. Теги несут ключевую информацию о том, как форматировать текст, где помещать картинки, где делать перенос и т.д. для того, чтобы отличать теги от текста, их заключают в угловые скобки - флаги разметки.

Флаги разметки – это определенная последовательность символов, расположенная между знаками

означает начало флага;

означает конец флага.

Флаги подразделяются на:

  1. парные и непарные;

  2. открывающие и закрывающие.

Каждый тег имеет свое имя. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.

Пример: B B эти флаги определяют область расположения полужирного теста (форматирующие флаги всегда парные).

Пример: br переход на новую строку в документе.

Замечания:

  1. Перед закрывающим флагом ставится знак / (наклонный вправо слеш).

  2. Флаги можно писать строчными или прописными буквами.

  3. Флаги показывают:

  • Как должен быть расположен текст на экране;

  • Где должны быть вставлены рисунки, находящиеся в другом файле;

  • Как формируются связи с другими WEB – страницами и ресурсами Internet.

  1. Флаги могут иметь параметры (атрибуты)

Структура HTML документа.

Любой HTML документ состоит из двух частей: заголовка и тела

Обзор структурных флагов (базисные флаги)

  1. HTML HTML начинают и заканчивают документ (внешний флаг)

Web-страница помещается в контейнер и состоит из двух частей: заголовка и отображаемого в браузере содержания.

  1. HEAD HEADмежду этими флагами располагается заголовок - это информация о документе, которая не выводится на экран.

Заголовок страницы помещается в контейнер . Заголовок содержит название страницы, которое помещается в контейнер /TITLE и при просмотре отображается в верхней строке окна браузера.

  1. TITLE TITLEмежду этими флагами располагается название странички, которое находится в заголовке окна просмотра браузера.

  2. BODY BODY между этими флагами заключается тело странички.

Тело документа – это произвольная часть странички, которую разрабатывает автор и отображает браузер

Задание №1 Структура Web - документа

  1. Наберите (в текстовом редакторе Блокнот или в программе Visual Studio Code) следующее:


html

head

titleПрофессиональная проба title

head

body

h1 Профессиональная проба - Агидель - 2018h1

ИТ –квантум. Веб-дизайн и разработка.

pЭтот текст можно увидеть на экране браузераp

body

html


  1. Сохраните этот файл под названием index1.html в папку HTML

- Файл - Сохранить Как (File - Save as)
- Дальше вводите имя своего документа, например: index1.html (а не просто index1; приписочка *.html должна быть обязательно).


  1. Откройте файл для просмотра результата.

В программе просмотра, в котором открыта Ваша страница, нажмите правую кнопку мыши и выберите пункт «Просмотр в виде HTML» и начинайте редактирование.

С этого момента Вы будете работать с двумя файлами: текстовым документом и html –файлом.

Чтобы увидеть результат Вашей работы в браузере нажмите обновить (F5). После редактирования файла с тегами, не забудьте сохранить файл.

- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл - Сохранить (File - Save). 

Теперь откроем в браузере наш документ, допустим в Google Chrome (не закрывайте блокнот, он нам еще пригодится). 
В Блокноте: Файл - Открыть - кнопка Обзор - Наш документ (index1.html) 

Если мы что-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ. 










Задание №2 Использование таблиц на Web-странице

Для создания дизайна сайта возьмем таблицу, чтобы структурировать на странице текст и изображение.

Элементы таблицы: -Заголовки – Строки –Столбцы -Ячейки

Замечание: Таблицы не содержат вычисляемые формулы

  • Флаги создания таблицы:

TABLE TABLE - включение таблицы в документ

TH TH - заголовки столбцов

TR TR - создание строк

TD TD - задание ячеек таблицы

1.Создадим таблицу:

DOCTYPE html

html

head

titleПрофессиональная проба title

head

body

h1 Профессиональная проба - Агидель - 2018h1

ИТ –квантум. Веб-дизайн и разработка.

TABLE

THЗаголовок столбца 1TH

TH Заголовок столбца 2TH

TR

TDстрока 1.столбец 1TD

TDстрока 1.столбец 2TD

TR

TR

TDстрока 2.объединим столбец 1 и столбец 2TD

TR

TR

TDстрока 3.столбец 1TD

TDстрока 3.столбец 2TD

TR

TR

TDстрока 4. объединим столбец 1 и столбец 2TD

TR

TABLE

body

html

Таблица содержит 4 строки и 2 столбца. Таблица не имеет границ.

2.Управление отражением границ таблицы:

Для отражения текстовых и числовых данных удобно использовать таблицу с границами.

Для отображения границ служит параметр BORDER тега TABLE

BORDER = число (ширина границы в пикселях)

Примеры:

TABLE BORDER=1

TABLE BORDER=0 таблица не имеет границ


DOCTYPE html

html

head

titleПрофессиональная проба title

head


body

h1 Профессиональная проба - Агидель - 2018h1

ИТ –квантум. Веб-дизайн и разработка.


THЗаголовок столбца 1TH

TH Заголовок столбца 2TH

TR

TDстрока 1.столбец 1TD

TDстрока 1.столбец 2TD

TR

TR

TDстрока 2.объединим столбец 1 и столбец 2TD

TR

TR

TDстрока 3.столбец 1TD

TDстрока 3.столбец 2TD

TR

TR

TDстрока 4. объединим столбец 1 и столбец 2TD

TR

TABLE


body

html



3. Выравнивание содержимого ячеек

параметры ALIGN и VALIGN флага TD

ALIGN – задаёт режим горизонтального выравнивания

Значения параметра:

left – пол левому краю

center - по центру

right - по правому краю

Пример записи:

TD ALIGN=”right

VALIGN – задаёт режим выравнивания содержимого ячейки по вертикали

Значения параметра:

top – по верхнему краю

center - по центру

bottom - по нижнему краю

Пример записи:

TD VALIGN=”top

4.Объединение ячеек

параметры COLSPAN и ROWSPAN флагов TH и TD

позволяют расширить ячейку таблицы на несколько строк и столбцов

Примеры:

TH rowspan=3 - задаёт ширину табличного заголовка равную 3-м строкам

TD COLSPAN=2 -задаёт ячейку в 2 столбца высотой

Ячейки объединяются в направлении слева направо и сверху вниз.

Чтобы объединить четыре ячейки, расположенные в двух строках и двух столбцах для верхней левой ячейки нужно указать параметры colspan=2 rowspan=2. Те ячейки, на которые идёт распространение можно не объявлять

Профессиональная проба

body

h1 Профессиональная проба - Агидель - 2018h1

ИТ –квантум. Веб-дизайн и разработка.

TR

TD ЭМБЛЕМА Ячейка (строка 1.столбец 1)TD

Инновационно- образовательный комплекс «Технопарк» г Агидель - 2018 Ячейка (строка 1.столбец 2)

TR

TR

Технопарк – это не место работы, это состояние ума Ячейка (строка 2.столбец 1)

TR

TR

TD Меню Ячейка (строка 3.столбец 1)TD

Внимание! 15 декабря 2018 года в МАУ ДО ЦДО «Савитар» г Агидель состоится открытие «Технопарка» Ячейка (строка 3.столбец 2)

TR

Ячейка, захватывающая две строки(4 и 5 строки, столбец1)

COLSPAN=2 align="center" Ячейка, захватывающая две строки (4 и 5 строки столбец 2)

TR

© разработчик страницы ФИО, класс, школа (строка 6. объединим столбец 1 и столбец 2)

Получите свидетельство о публикации сразу после загрузки работы



Получите бесплатно свидетельство о публикации сразу после добавления разработки


Олимпиады «Весенне-летний фестиваль знаний 2024»

Комплекты учителю



Качественные видеоуроки, тесты и практикумы для вашей удобной работы

Подробнее

Вебинары для учителей



Бесплатное участие и возможность получить свидетельство об участии в вебинаре.


Подробнее