Практическая работа "Web-конструирование , HTML"

Опубликовано Лукашова Валентина Николаевна вкл 28.11.2012 - 19:54

Автор:

Лукашов Николай

Скачать:

Вложение	Размер
saitkonstruirovanie.pptx	110.3 КБ

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

Чтобы пользоваться предварительным просмотром презентаций создайте себе аккаунт (учетную запись) Google и войдите в него: https://accounts.google.com

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

Слайд 1

Практическая работа: Web- конструирование сайтов Работа выполнена учащимся МБОУ «СОШ С.Шумейки » Лукашовым Н.А.

Слайд 2

Часть первая

Слайд 3

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web -узлом или сайтом . Узлы Web подобны книгам, а Web -страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами . На одном сервере может размещаться множество Web -узлов или сайтов.

Слайд 4

HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web -документа на вашем экране.

Слайд 5

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

Слайд 6

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

Слайд 7

В заголовке, ограниченном тэгами < head > и , с помощью тэгов < title > ... определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузера ми в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название. Кроме элемента < title > ... , заголовок может содержать элементы < meta > ... . Открывающий тэг < meta > включает пары имя=значение, описывающие свойства документа, например, авторство, список ключе вых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Слайд 8

Выполните следующее: Кликните правой кнопкой мыши на рабочем столе Выберете команду создать текстовой документ Кликните правой кнопкой мыши на текстовом документе Выберете команду свойства и в открывшемся окошке уберите расширение txt и напишите html ok да

Слайд 9

откройте созданный вами документ через команду открыть , и сверните открывшееся окно Откройте созданный вами документ командами: Открыть с помощью блокнот

Слайд 10

В блокноте наберите следующие команды

Слайд 11

Для ввода парных тэгов вы можете использовать операции копирования и вставки через буфер обмена Windows с последующим добавлением символа слэш / . Напомним, что первый < html > и последний тэги означают соответственно начало и конец документа, элемент < head > ... определяет заголовок Web -страницы, элемент < body > ... - тело документа, а в элементе < title > мы сейчас укажем название Web -страницы.

Слайд 12

Между открывающим < title > и закрывающим тэгами вставьте название документа – МБОУ«СОШ с.Шумейка ». Этот элемент должен выглядеть следующим образом: МБОУ«СОШ с.Шумейка »

Слайд 13

Вставьте пустую строку между тэгами < body > и и введите в ней следующий текст: Добро пожаловать на страничку! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях

Слайд 14

я каждой Web -страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тэга < body > . Для определения цвета как значения атрибутов существует два варианта: • словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен; • цифровое обозначение в шестнадцатеричной записи, например, "# ffffff " - белый, которое указывает, каким образом цвет формируется из основных цветов - красного, зеленого, синего. Конечно, словесное указание цвета более удобно и понятно. С другой стороны, численные обозначения дают больше возможностей, так как позволяют указать практически любой из 16777215 оттенков, тогда как словесные обозначения ограничены только шестнадцатью цветами. Используем в качестве примера для фона нашей Web -страницы синий цвет ( blue ), а для текста - желтый ( yellow ). Вставьте в открывающий тэг < body > атрибуты bgcolor = blue и text = yellow . Этот тэг должен принять вид:

Слайд 15

Ваш текстовый файл должен выглядеть примерно так: МБОУ «СОШ с.Шумейка » </ title> </head> <body bgcolor =blue text=yellow> Добро пожаловать на страничку ! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </ body > </html></p><p class='slide-number'>Слайд 16</p><p>Далее в блокноте выполните команды: Файл Сохранить А на html страничке выполните команду: обновить</p><p class='slide-number'>Слайд 17</p><p>Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид • Размер текста • Средний в браузере Internet Explorer</p><p class='slide-number'>Слайд 18</p><p>Часть вторая</p><p class='slide-number'>Слайд 19</p><p>Чтобы наша Web -страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок HTML имеет шесть уровней заголовков разделов документа, Заголовок первого уровня h 1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h 6 - очень мелким.</p><p class='slide-number'>Слайд 20</p><p>Вставьте в текст тэги < h 1> и </ h 1> так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид: < h 1> Добро пожаловать на страничку! </ h 1> Сохраните файл, выбрав команду Сохранить меню Файл программы Блокнот .</p><p class='slide-number'>Слайд 21</p><p>Операцию сохранения необходимо всегда выполнять перед просмотром документа, так как браузер открывает файл для просмотра, загружая его в оперативную память компьютера с диска. Если после редактирования кода HTML вы не сохраните файл, то никаких изменений в браузере не увидите. Нажмите клавишу F 5 или кнопку Обновить на панели инструментов рабочего окна программы Internet Explorer</p><p class='slide-number'>Слайд 22</p><p>По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге < h 1> используется атрибут align = right , а для центрирования — align = center . Допускается также явное указание левостороннего выравнивания - align = left . Добавьте в тэг < h 1> атрибут align = center , чтобы центрировать заголовок. Этот элемент должен принять следующий вид: < h 1 a lign = center > Добро пожаловать на страничку ! </ h 1></p><p class='slide-number'>Слайд 23</p><p>Вид вашего блокнота: <html> <head> <title> МБОУ "СОШ с. Шумейка " </ title> </head> <body bgcolor =blue text=yellow> <h1 align=center> Добро пожаловать на страничку </ h1> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </ body> </html></p><p class='slide-number'>Слайд 24</p><p>Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные тэги < b ></ b > . Вставьте в файле * . html открывающий < b > и закрывающий </ b > тэги так, чтобы они ограничили текст Здесь вы узнаете… . Этот элемент должен принять следующий вид: < b > Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </ b > Курсивное начертание устанавливается с помощью тэгов < i ></ i > . Вставьте в исходный код HTML тэг < i > и </ i > так, чтобы отредактированный элемент принял следующий вид: < b >< i > Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </ i ></ b ></p></div></div> </div> <div class="links-container"> <ul class="links inline"><li class="comment-add first last"></li> </ul> </div> <div class="share_buttons clearfix">Поделиться:<div class="share42init" data-url="nsportal.ru/ap/library/nauchno-tekhnicheskoe-tvorchestvo/2012/11/28/prakticheskaya-rabota-web-konstruirovanie-html" data-title="Практическая работа "Web-конструирование , HTML"" data-path="/sites/all/themes/acquia_marina/_img/" data-icons-file="share-icons.png"></div></div> <div class="clearfix"></div><a href="/ap/blog/literaturnoe-tvorchestvo/2021/02/18/el"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2021/02/18/andnrsen_el3.jpg"></div><p>Ель</p></div></a><a href="/ap/blog/hudozhestvenno-prikladnoe-tvorchestvo/2018/10/23/raznotsvetnoe-derevo"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2018/10/23/triad-tree-10.jpg"></div><p>Разноцветное дерево</p></div></a><a href="/ap/blog/literaturnoe-tvorchestvo/2016/04/27/skazka-uznay-zerkala"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2016/04/27/35.jpg"></div><p>Сказка "Узнай-зеркала"</p></div></a><a href="/ap/blog/hudozhestvenno-prikladnoe-tvorchestvo/2018/08/30/kak-narisovat-osennee-derevo-akvarelyu"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2018/08/30/11.jpg"></div><p>Как нарисовать осеннее дерево акварелью</p></div></a><a href="/ap/blog/iskusstvo-teatra-i-kino/2019/11/30/skazka-12-mesyatsev"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2019/11/30/12_mesyatsev.jpg"></div><p>Сказка "12 месяцев". История и современность</p></div></a> <div class="clearfix"> </div> <div id="promo-card"></div><div id="banner_ap"></div> </div> </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 type="text/javascript" src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> </body> </html>