|
|
Создание Веб-сайта «Моя страница»
1. Создаем личную папку, куда будем сохранять все файлы своего сайта. 2. Запускаем программу Блокнот (Notepad). 3. Набираем в окне программы файл HTML (см. рисунок №1), который имеет вид: <HTML> <HEAD> <TITLE> Алексеева Юлия Александровна </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue" LEFTMARGIN="40" RIGHTMARGIN="40" MARGINWIDTH="40"> <TABLE ALIGN="CENTER" BORDER="2" CELLSPACING="2" CELLPADDING="7"> <TR> <TH> <IMG SRC="Алексеева.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TH> <TD> <UL TYPE="SQUARE"> <center> <h2> <i> <FONT SIZE="4"> <B> Фамилия: </B> </FONT> Алексеева </B> </FONT> </i> </h2> </center> <center> <h2> <i> <FONT SIZE="4"> <B> Имя: </B> </FONT> Юлия </B> </FONT> </i> </h2> </center> <center> <h2> <i> <FONT SIZE="4"> <B> Отчество: </B> </FONT> Александровна </B> </FONT> </i> </h2> </center> <center> <h2> <i> <FONT SIZЕ="4"> <B> Дата рождения: </B> </FONT> 29 ноября 1992 года </B> </FONT> </i> </h2> </center> <center> <h2> <i> <FONT SIZЕ="4"> <B> Город: </B> </FONT> Смоленск </B> </FONT> </i> </h2> </center> <TR ALIGN="CENTER" BGCOLOR="#CECECE"> <TH COLSPAN="2"> Образование: </TH> </TR> <TR> <TD ALIGN="CENTER"> C 1999 года по 2008 год училась в Средней школе № 1 города Ярцево. Закончила 9 классов с отличием </TD> <TD ALIGN="CENTER"> <IMG SRC="1.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> <TR> <TD ALIGN="CENTER"> С 2002 года по 2006 год училась в Музыкальной школе искусств города Ярцево </TD> <TD ALIGN="CENTER"> <IMG SRC="2.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> <TR> <TD ALIGN="CENTER"> С 2008 года по 2012 год училась в Смоленском промышленно-экономическом колледже города Смоленска по специальности "Пожарная безопасность". Закончила с отличием </TD> <TD ALIGN="CENTER"> <IMG SRC="3.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> <TR> <TD ALIGN="CENTER"> С 2013 года учится в Финансовом Университете при Правительстве РФ по Направлению: Бизнес-информатика </TD> <TD ALIGN="CENTER"> <IMG SRC="4.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> <TR ALIGN="CENTER" BGCOLOR="#CECECE"> <TH COLSPAN="2"> Работа: </TH> </TR> <TR> <TD ALIGN="CENTER"> <A HREF="hsa.HTML"> С 2012 года работает в сфере охраны труда Специалистом лаборатории в ООО "ЭАЦ "Технологии труда" </A> </TD> <TD ALIGN="CENTER"> <IMG SRC="5.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> <TABLE> </BODY> </HTML>
Рисунок № 1 Страница в блокноте АлексееваЮ.А.txt 4. Сохраняем файл под именем АлексееваЮ.А.html в личной папке. 5. Для просмотра Web-страницы используем программу браузера Mozilla Firefox. Для этого, не покидая программу Блокнот (сворачиваем окно на панель задач), открываем личную папку и двойным кликом по файлу АлексееваЮ.А.html открываем окно браузера (см. рисунок № 2 – 5). Мы использовали картинки с расширением jpg, которые сохраняли в ту же папку, что и наш исходный файл, <TH> <IMG SRC="Алексеева.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TH>… … <TD ALIGN="CENTER"> <IMG SRC="1.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD>… …<TD ALIGN="CENTER"> <IMG SRC="5.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> Использовали текст …<TD ALIGN="CENTER"> C 1999 года по 2008 год училась в Средней школе № 1 города Ярцево. Закончила 9 классов с отличием </TD>… …<TD ALIGN="CENTER"> С 2008 года по 2012 год училась в Смоленском промышленно-экономическом колледже города Смоленска по специальности "Пожарная безопасность". Закончила с отличием </TD>… И таблицу. <TR> </TR>
Рисунок № 2 Личные сведения
Рисунок № 3 Сведения об образовании
Рисунок № 4 Сведения об образовании
Рисунок № 5 Сведения о работе Мы видим, что на данной странице имеется ссылка. Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу Наша ссылка имеет вид: <TR> <TD ALIGN="CENTER"> <A HREF="hsa.HTML"> С 2012 года работает в сфере охраны труда Специалистом лаборатории в ООО "ЭАЦ "Технологии труда" </A> </TD> <TD ALIGN="CENTER"> <IMG SRC="5.JPG" ALIGN=left HSPACE=20 VSPACE=20> </TD> </TR> Таким образом, чтобы воспользоваться ссылкой перехода на следующую страницу мы создали еще один документ в блокноте и сохранили его под именем hsa.html. <HTML> <HEAD> <TITLE> Общество с ограниченной ответственностью "ЭАЦ "Технологии труда" </TITLE> </HEAD> <IMG SRC="5.JPG" ALIGN=left HSPACE=20 VSPACE=20> <BODY BACKGROUND="FON.PNG" TEXT="#330066"> <P ALIGN="CENTER"> <FONT COLOR="#008080" SIZE="5"> <B> Общество с ограниченной ответственностью "Экспертно-аналитическая лаборатория "Технологии труда" </B> </FONT><BR> </P> <FONT COLOR="#0000FF" SIZE="4"> Организация ООО "HSA Company" основана в 2006 году <BR> В Смоленске открыт филиал в 2011 году <BR> В 2014 году переименован в ООО "ЭАЦ "Технологии труда" </B> </FONT> <BR> <TN> <H3> О центре: </H3> <HR ALIGN="CENTER" NOSHADE WIDTH="98%"> <OL> <FONT FACE="Tahoma"><B> В названии Экспертно-аналитического Центра «Технологии труда» отражена суть нашей компании и генеральная цель, к которой мы стремимся. Мы считаем, что высокая эффективность труда неразрывно связана с его высокой культурой, в первую очередь — с культурой технологической. С этой точки зрения, мы сами являем пример такой организации труда. И в работе с нашими Клиентами мы так же стремимся выйти за рамки формального подхода. Отработать от звонка до звонка — это не про нас. В каждом проекте мы в первую очередь спрашиваем себя и вас: </B></FONT> <BR> <LI> А для чего же проект реализуется, кроме очевидных, линейных, целей? <LI> Как можно сделать эффект от проекта не сиюминутным, а устремленным в будущее? <LI> Что необходимо для достижения стратегического статуса проекта? </OL> Нам приятно наблюдать, что все чаще Клиенты также задаются этими вопросами. И еще приятнее взаимодействовать с такими же увлеченными, заинтересованными в общем деле специалистами со стороны Клиента. Ведь когда мы с вами понимаем друг друга с полуслова, дело движется семимильными шагами! И вы буквально ощущаете, как технологии труда входят в вашу жизнь… Так какие же технологии труда мы предлагаем вам? Мы предлагаем не только услуги в сфере охраны труда, но и ряд смежных услуг — от методической помощи до помощи в управлении рисками. Попросту говоря, мы поставили инструменты оценки на службу экономической и социальной эффективности вашего бизнеса. <HR ALIGN="CENTER" NOSHADE WIDTH="98%"> <OL> <FONT FACE="Tahoma"><B> Наши основные продукты: </B></FONT> <LI> <A HREF="1.HTML"> специальная оценка условий труда </A> <LI> консалтинг в области специальной оценки условий труда <LI> аудит по охране труда <LI> аутсорсинг по охране труда <LI> производственный контроль <LI> обучение руководителей и специалистов по охране труда <LI> обучение пожарно-техническому минимуму </OL> <FONT COLOR="#008080" SIZE="5"> <B> Наш девиз — максимальная экономическая и социальная эффективность наших услуг! </B> </FONT><BR> </P> </HTML>
Рисунок № 6 Страница в блокноте has.txt
Рисунок № 7 Сведения об ООО «ЭАЦ «Технологии труда» Далее видим, что есть еще одна ссылка: <LI> <A HREF="1.HTML"> специальная оценка условий труда </A> То есть, нам необходимо создать еще один документ и сохранить его под именем 1.html, он будет иметь вид: <HTML> <HEAD> <TITLE> Общество с ограниченной ответственностью "ЭАЦ "Технологии труда" </TITLE> </HEAD> <IMG SRC="5.JPG" ALIGN=left HSPACE=20 VSPACE=20> <BODY BACKGROUND="FON.PNG" TEXT="#330066"> <P ALIGN="CENTER"> <FONT COLOR="#008080" SIZE="6"> <center> <h2> <i> <H3> Специальная оценка условий труда </H3> </i> </h2> </center> </P> </FONT> <FONT COLOR="#000000" SIZE="5"> <HR ALIGN="CENTER" NOSHADE WIDTH="98%"> <OL> <FONT FACE="Tahoma"> <B> Экспертно-аналитический центр «Технологии труда» проводит полный комплекс работ по специальной оценке условий труда: </B></FONT> <BR> <LI> работает в строгом соответствии с требованиями Федерального закона РФ от 28.12.2013 №426-ФЗ «О специальной оценке условий труда»; <LI> имеет государственную аккредитацию; <LI> в состав Центра входит собственная испытательная лаборатория по измерению факторов производственной среды, аккредитованная на техническую компетентность и независимость; <LI> в штате компании 15 экспертов, внесенных в Реестр Минтруда и аккредитованных на право проведения специальной оценки условий труда (по этому показателю наша лаборатория - одна из крупнейших в России) </OL> </HTML>
Рисунок №8 Страница в блокноте 1.txt
Переходим по ссылке:
Рисунок № 9 Сведения о СОУТ Итак, мы создали свой Веб-сайт, который включает в себя 3 страницы: ¾ АлексееваЮ.А..html ¾ hsa.html ¾ 1.html Заключение В данной контрольной работе мы рассмотрели следующие вопросы: 1. Базовые знания необходимые для создания Web-сайта: 1.1 Web-страницы и Web-сайты 1.2 Язык разметки гипертекстовых страниц HTML 1.3 Web-редактор Macromedia Dreamweaver 2. Как построить хороший сайт 2.1 Представление текста на Web-страницах 2.2 Представление графики на Web-страницах 2.3 Планирование информационного потока 2.4 Условия для создания успешного сайта 3. Создание Веб-сайта, состоящего из 3 страниц
Список использованных источников: 1. Дронов. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. БХВ-Петербург, 2011. Znanium.com 2. http://pyramidin.narod.ru/html401. Справочник HTML 3. http://www-sbras.nsc.ru/rus/docs. Документация и справочные материалы по Internet 4. http://www-sbras.nsc.ru/rus/docs/html40/index/elements.html. Элементы HTML 5. http://www-sbras.nsc.ru/rus/docs/html40/index/attributes.html. Атрибуты HTML
  Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...  Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот...  ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...  Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
