Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Создание Веб-сайта «Моя страница»





 

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">

&nbsp;&nbsp;&nbsp; &nbsp; <B> Общество с ограниченной ответственностью "Экспертно-аналитическая лаборатория "Технологии труда" </B> </FONT><BR>

</P>

<FONT COLOR="#0000FF" SIZE="4">

&nbsp;&nbsp;&nbsp; &nbsp;Организация ООО "HSA Company" основана в 2006 году <BR>

&nbsp;&nbsp;&nbsp; &nbsp;В Смоленске открыт филиал в 2011 году <BR>

&nbsp;&nbsp;&nbsp; &nbsp;В 2014 году переименован в ООО "ЭАЦ "Технологии труда" </B> </FONT> <BR>

<TN>

<H3> О центре: </H3>

<HR ALIGN="CENTER" NOSHADE WIDTH="98%">

<OL>

<FONT FACE="Tahoma"><B> &nbsp;&nbsp;&nbsp;&nbsp; В названии Экспертно-аналитического Центра «Технологии труда» отражена суть нашей компании и генеральная цель, к которой мы стремимся. Мы считаем, что высокая эффективность труда неразрывно связана с его высокой культурой, в первую очередь — с культурой технологической. С этой точки зрения, мы сами являем пример такой организации труда. И в работе с нашими Клиентами мы так же стремимся выйти за рамки формального подхода. Отработать от звонка до звонка — это не про нас. В каждом проекте мы в первую очередь спрашиваем себя и вас: </B></FONT>

<BR>

<LI> А для чего же проект реализуется, кроме очевидных, линейных, целей?

<LI> Как можно сделать эффект от проекта не сиюминутным, а устремленным в будущее?

<LI> Что необходимо для достижения стратегического статуса проекта?

</OL>

&nbsp;&nbsp;&nbsp;&nbsp; Нам приятно наблюдать, что все чаще Клиенты также задаются этими вопросами. И еще приятнее взаимодействовать с такими же увлеченными, заинтересованными в общем деле специалистами со стороны Клиента. Ведь когда мы с вами понимаем друг друга с полуслова, дело движется семимильными шагами! И вы буквально ощущаете, как технологии труда входят в вашу жизнь…

Так какие же технологии труда мы предлагаем вам?

&nbsp;&nbsp;&nbsp;&nbsp; Мы предлагаем не только услуги в сфере охраны труда, но и ряд смежных услуг — от методической помощи до помощи в управлении рисками. Попросту говоря, мы поставили инструменты оценки на службу экономической и социальной эффективности вашего бизнеса.

<HR ALIGN="CENTER" NOSHADE WIDTH="98%">

<OL>

<FONT FACE="Tahoma"><B> &nbsp;&nbsp;&nbsp;&nbsp; Наши основные продукты: </B></FONT>

<LI> <A HREF="1.HTML"> специальная оценка условий труда </A>

<LI> консалтинг в области специальной оценки условий труда

<LI> аудит по охране труда

<LI> аутсорсинг по охране труда

<LI> производственный контроль

<LI> обучение руководителей и специалистов по охране труда

<LI> обучение пожарно-техническому минимуму

</OL>

<FONT COLOR="#008080" SIZE="5">

&nbsp;&nbsp;&nbsp; &nbsp; <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> &nbsp;&nbsp;&nbsp;&nbsp; Экспертно-аналитический центр «Технологии труда» проводит полный комплекс работ по специальной оценке условий труда: </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

 

 







Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.