Создание веб-сайта с использованием языка html
методическая разработка по информатике и икт (8 класс) на тему

Брагина Ольга Александровна
Опубликовано 04.12.2013 - 10:53 - Брагина Ольга Александровна

В работе представлен материал для проведения практических работ по теме "Создание веб-сайта с использованием языка html". Всего 4 практические работы, позволяющие ученикам 7-9х классов иметь представление о структуре Веб-сайта и о тегах, с помощью которых формируется Веб-страничка. В помощь учителю прилагается презентация.

Скачать:

ВложениеРазмер
Файл Создание веб-сайта с использованием языка html. Практические работы194.75 КБ
Файл презентация с объяснением материала к практическим работам489.82 КБ

Предварительный просмотр:

Создание веб-сайта с использованием языка html

Методическая разработка

Учителя ГБОУ СОШ №535

Г.Санктт-Петербурга

Брагиной О.А.

Практическая работа №1

  1. В программе блокнот создайте 1-ю страничку, не забудьте сохранить её под именем index.html
  • Для просмотра страницы надо закрыть файл и открыть его в браузере
  • Для редактирования файла его открывают в блокноте



        Моя семья


        Здравствуйте, это моя первая страница. Меня зовут…..
        

 

  1. На страничке расскажите немного о себе
  2. Добавьте строку заголовка, расположенную по центру, размеры заголовков могут быть разные (см. приложение)

Обо мне

  1. Раскрасьте текст   Добро пожаловать! :)  , цвет текста может быть разный (см. приложение)
  2. Откройте страницу в браузере и просмотрите её
  3. Добавьте новые страницы, для этого:
  • Скопируйте текст предыдущей страницы и вставьте его на две новые страницы
  • 2-ю страницу назовите family.html (моя семья)
  • 3-ю страницу  назовите hobby.html (мои увлечения)
  • Поменяйте заголовки страниц и их содержание в соответствии с заданием
  • Сохраните их
  1. Откройте страницы в браузере и просмотрите их поочередно.
  2. Покажите работу учителю

Практическая работа №2

  1. Добавьте на странички изображения , например    
  2. Файлы с изображениями необходимо сохранить в одной папке с файлами страничек
  3. Для размещения изображения с обтеканием текста, используйте атрибуты обтекания (см. приложение)
  4. Сохраните страницы
  5. Откройте страницы в браузере и просмотрите их поочередно.
  6. Покажите работу учителю

Практическая работа №3

  1. В программе блокнот откройте файл  index.html  для его дальнйшего редактирования.  
  2. Добавьте тег, отвечающий за цвет текста на странице и цвет фона (коды цвета см. в приложении):

Например

  1. Установите определенный размер фрагмента текста, используя тег font size

 (см. приложение).

  1. Откройте страницу в браузере и просмотрите её.
  2. Поменяйте фон и цвет текста на страницах  family.html (моя семья) и  hobby.html (мои увлечения).
  3. Сохраните их.
  4. Откройте страницы в браузере и просмотрите их поочередно.
  5. Покажите работу учителю.

Практическая работа №4

Свяжем наши странички гиперссылками.

  1. В конце вашей главной странички поставьте  две ссылки:
  1. На каждой странички  расставьте соответствующие ссылки на главную и вторую странички.
  2. Сохраните их.
  3. Откройте страницы в браузере и проверьте ваши ссылки.
  4. Измените цвет ссылок (код цвета возьмите произвольный):
  • Для этого установите цвета параметров  link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки .
  • Параметры вставляем в тег <body>

 link="#339999" alink="#339999" vlink="#339999">

  1. Посмотрите вашу работу в браузере.
  2. Покажите работу учителю.

Приложение

Заголовки страниц

Существуют шесть уровней заголовков:

текст

текст

текст

текст

текст

текст

Н1 – самый важный, Н6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.

Установка размера текста

Заголовки предназначены для выделения небольшой части текста (строки, фразы).

Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга , который устанавливает желаемый размер шрифта:

текст
текст
текст
текст
текст
текст
текст

Цвета шрифта

Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода.

1-й способ:

По имени

white — белый

black — черный 

red — красный 

green — зеленый

blue — синий

2-й способ:

Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья - яркости зеленого (G — green) и синего (B — blue) в этом цвете.

Примеры цветов в шестнадцатеричном формате:

#FFFFFF — белый

#000000 — черный

#FF0000 — красный

#00FF00 — зеленый

#0000FF — синий

Атрибуты обтекания картинки текстом

текст слева

текст справа

текст может располагаться внизу картинки (это по умолчанию)

 - (1), посередине - (2), и вверху - (3):

(1) -
(2) -
(3) -


Предварительный просмотр:


Подписи к слайдам:

Слайд 1

Делаем свой сайт Тема: «Моя семья»

Слайд 2

В программе блокнот создадим 1-ю страничку, не забудем сохранить её под именем index.html Для просмотра страницы надо закрыть файл и открыть его в браузере Для редактирования файла его открывают в блокноте

Слайд 3

Вот текст простейшей Web-страницы на языке HTML Моя семья </ title> </head> <body> Здравствуйте, это моя первая страница. Меня зовут….. < br > </body> </html > На страничке надо рассказать немного о себе</p><p class='slide-number'>Слайд 4</p><p>Добавим строку заголовка, расположенную по центру <html> <head> <title> Моя семья </ title> </head> <body > < div align= " center "> <H3> О бо мне</H3> Здравствуйте , это моя первая страница . < br > Меня зовут….. < br > </body> </html ></p><p class='slide-number'>Слайд 5</p><p>Цвета Названия цветов Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода. Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например, white — белый black — черный red — красный green — зеленый blue — синий</p><p class='slide-number'>Слайд 6</p><p>Шестнадцатеричные коды Другой способ задать цвет — указать его код в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red ), вторая и третья - яркости зеленого (G — green ) и синего (B — blue ) в этом цвете. Примеры цветов в шестнадцатеричном формате: #FFFFFF — белый #000000 — черный #FF0000 — красный #00FF00 — зеленый #0000FF — синий</p><p class='slide-number'>Слайд 7</p><p>Раскрасим текст <html> <head> <title> Моя семья </ title> </head> <body> < div align= " center "> <H3>Обо мне</H3> Здравствуйте, это моя первая страница. < br > <font color="#CC0000"> Добро пожаловать! :) </ font > Меня зовут….. < br > </body> </html ></p><p class='slide-number'>Слайд 8</p><p>Добавим новые страницы: Скопируйте текст предыдущей страницы и вставьте его на две новые страницы 2-ю страницу назовите fam i ly.html 3-ю hobby.html Поменяйте заголовки страниц и их содержание</p><p class='slide-number'>Слайд 9</p><p>Тег для вставки изображения (имиджа) Этот пример говорит о том, что изображение лежит в том же каталоге (директории, папке), в которой лежит и web- страничка: < img src=my.jpg > где my.jpg изображение, на которое идет ссылка на странице (имя может быть любое), все расположенное между кавычками - ссылка (путь к изображению). Если изображение лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так: < img src=my / my.jpg > Если картинка (или любой файл) лежит на другом сайте, то путь прописывается полностью: < img src=http :// www.homepage.ru / my / my.jpg > Пр и нято все изображения класть в отдельную папку и тэг img не требует закрывающего тэга</p><p class='slide-number'>Слайд 10</p><p>Добавим на страницу изображение <html> <head> <title> Моя семья </ title> </head> <body> < div align= " center "> <H3>Обо мне</H3> Здравствуйте, это моя первая страница. < br > < img src=my.gif > <font color="#CC0000"> Добро пожаловать! :) </ font> Меня зовут….. < br > </body> </html ></p><p class='slide-number'>Слайд 11</p><p>Атрибуты обтекания картинки текстом < img src =my.gif align="left"> текст слева < img src =my.gif align="right"> текст справа текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): (1) - < img src ="pr1.png" align="bottom"> (2) - < img src ="pr1.png" align="middle"> (3) - < img src ="pr1.png" align="top "> дополнительные возможности см. ПРИЛОЖЕНИЕ 2</p><p class='slide-number'>Слайд 12</p><p>Цвет фона Цвет фона устанавливается в уже знакомом нам тэге < body >: < body bgcolor= "#000000"> 000000 - код черного цвета , вы же свой документ можете раскрасить любым другим. Кстати , если цвет в < body > не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше всегда прописывайте цвет фона, а так же цвет основного текста в < body >. Пример на следующей странице.</p><p class='slide-number'>Слайд 13</p><p>Пример < html > < head > < title >Мо я семья </ title > </ head > < body text= "#336699" bgcolor= "# 00 ff 00 "> Здравствуйте, это моя первая страница. < br > < font color= "#CC0000"> Добро пожаловать! :) </ font > </ body > </ html ></p><p class='slide-number'>Слайд 14</p><p>Установка размера текста Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но , если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга < font></font>, который устанавливает желаемый размер шрифта: < font size="+4"> текст </ font> <font size="+3"> текст </ font> <font size="+2"> текст </ font> <font size="+1"> текст </ font> <font size="+0"> текст </ font> <font size="-1"> текст </ font> <font size="-2"> текст </ font></p><p class='slide-number'>Слайд 15</p><p>Пример < html > < head > < title >Моя семья </ title > </ head > < body text= "#336699" bgcolor= "# 00 ff 00"> < div align = " center "> <H3>Здравствуйте, это моя первая страница.</H3> < div align = " left "> < br > < font color= "#CC0000"> Добро пожаловать!</ font > :) < br > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < font size = "+ 3 "> еще один виртуальный друг? :)</ font > </ body > </ html ></p><p class='slide-number'>Слайд 17</p><p>Создание ссылок на страницы Тэг < a ></ a > делает ссылкой заключенную в него картинку или фразу (текст). (1) - < a href= " prf.html ">мои фотографии</ a > (2) - < a href= " photos / prf.html ">мои фотографии</ a > (3) - < a href= "http://www.homepage.ru/prf.html">мои фотографии</ a > (1 ) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html , (2 ) документ лежит в поддиректории / photos , ( 3) ссылка на сайт http://www.homepage.ru, где лежит нужный нам документ.</p><p class='slide-number'>Слайд 18</p><p>Для всех ссылок в документе можно прописать цвета: link - цвет просто ссылки , alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. < body text= "#336699" bgcolor= "#000000" link= "#339999" alink= "#339999" vlink= "#339999"> Как и цвет для всего текста в документе, цвета ссылок мы прописываем в < body >. В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.</p></div></div></div></div></div><br><div class="text-center my-3"><img src="https://nsportal.ru/sites/default/files/2013/12/04/my.gif"></div><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2011/12/24/picture-43712.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2012/02/06/obobshchayushchiy-urok-razrabotka-veb-saytov-s">Обобщающий урок «Разработка Веб-сайтов с использованием языка HTML» </a></h6><p class="search-excerpt">Этот урок является заключительном  в  курсе “Разработка  Web-сайтов  с  использованием  языка  НТМL” . Он проведится его в  форме конкурса. Урок  стоит из ...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2012/10/25/picture-131256-1351164536.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2012/10/26/otkrytyy-urok-po-informatike-na-temu-razrabotka-web">Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"</a></h6><p class="search-excerpt">Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML" Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2013/10/11/picture-303452-1381469732.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2013/10/16/razrabotka-web-saytov-s-ispolzovaniem-yazyka-razmetki">Разработка Web-сайтов с использованием языка разметки гипертекста HTML</a></h6><p class="search-excerpt">Презентация для 8 класса "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2018/06/11/materialy-k-uroku-sozdanie-sayta-znakomstvo-s-yazykom">Материалы к уроку "Создание сайта. Знакомство с языком HTML"</a></h6><p class="search-excerpt">Представлены материалы к уроку в 9 классе: презентация для знакомства с языком разметки гипертекста, памятка с основными тегами и инструкция для практической работы, а также необходимые графические из...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2022/10/08/picture-1261535-1665222920.jpg"><h6><a href="/shkola/dopolnitelnoe-obrazovanie/library/2020/08/12/konspekt-zanyatiya-po-teme-sozdanie-web-saytov-s">Конспект занятия по теме: «Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML».</a></h6><p class="search-excerpt">Цель занятия: воспитанники создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML. Учащиеся должны знать:определение следующих...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2020/11/09/metodicheskaya-razrabotka-dlya-uchiteley-ispolzovanie">Методическая разработка для учителей "Использование языка HTML при создании сайтов"</a></h6><p class="search-excerpt">laquo;Использование языка HTML при создании сайтов» - методическая разработка для учителей, занимающихся созданием сайтов.  Достаточно часто, при попытке выполнить форматиро...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2022/03/03/picture-497561-1646290089.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2022/03/09/sozdanie-web-sayta-s-pomoshchyu-yazyka-gipertekstovoy">Создание Web-сайта с помощью языка гипертекстовой разметки HTML</a></h6><p class="search-excerpt">Создание Web-сайта с помощью языка гипертекстовой разметки HTML...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="657"></div> <ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li> </ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/shkola/informatika-i-ikt/library/2013/12/04/sozdanie-veb-sayta-s-ispolzovaniem-yazyka-html" data-title="создание веб-сайта с использованием языка html" data-image="https://nsportal.ru/sites/default/files/pictures/2013/06/14/picture-263291-1371196323.jpg"></div></div>  <div class="add-new-comment-button my-button-large"></div> </div> </div> </div> </div> </div> </div> </div><!-- /content-inner --> </div><!-- /content --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> </body> </html> <!-- Page cached by Boost @ 2024-12-26 01:01:00, expires @ 2025-04-17 01:01:00, lifetime 3 месяца 3 недели --> <!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2013/12/04/sozdanie-veb-sayta-s-ispolzovaniem-yazyka-html_ -->