Создание сайта

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

Рубрика Программирование, компьютеры и кибернетика
Вид отчет по практике
Язык русский
Дата добавления 13.03.2015
Размер файла 24,9 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

Томский государственный педагогический университет

Кафедра информатики

Отчет

по практике

Создание сайта

Работу выполнила:

Студентка гр. 416

Казиева Н.Ж.

Научный руководитель

Стахин Н.А.

Томск 2014

Содержание

Введение

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

2. Форматирование текста

3. Создание и форматирование рисунков

4. Использование внешних и внутренних гиперссылок

5. Использование абзацев, прерываний

6. Содержание сайта

Вывод

Литература

Введение

Современный человек не представляет своей жизни без техники и Всемирной паутины. Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не выходя из дома оплатить коммунальные услуги, пополнить счет мобильного телефона, заказать продукты питания и различные товары с доставкой, общаться с друзьями, коллегами на расстоянии и многое другое.

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

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

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

сайт форматирование графический гиперссылка

Сайт состоит из 4 страниц. Сайт предназначен для пользователей компьютерной алгебры Maxima, не имеющих практического опыта работы с этой программой, поэтому я включила текстовое наполнение на тему: Установка программы Maxima на домашний компьютер.

Целью практики является изучение проектирования Web-сайтов при помощи языка HTML.

При выполнении отчёта по практике и разработке Web-сайта были поставлены следующие задачи:

Сайт должен отражать концепцию изучение данной темы, рассказывать о постановке задачи и о том, как мы решаем задачу и строим графики с помощью Maxima.

Для того, чтобы текстовый файл превратился в HTML-файл, необходимо изменить его расширение с ".txt" на ".html" и соблюсти "правило первой строки". Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так

Разделы меню сайта, состоящее из 4 общих разделов:

· Maxima

· Установка и запуск программы

· График функции в Maxima

· Таблица

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

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

Элементы, изображенные на страницах сайта, размещаются в таблице, которая задана с помощью дескриптора и тегов столбец ячейки, строка ячейки. Между ними размещается текст, который должен отображаться в ячейках таблицы. Ширина ячейки таблицы задана атрибутом WIDTH, которому присваивается значение в пикселях равное целому числу. Высота ячейки задается атрибутом Height, которому также присваивается значение в пикселях равное целому числу.

2. Форматирование текста

Тег <FONT> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис:

<font>Текст</font>

Закрывающий тег обязателен. К параметрам относятся:

· Color - устанавливает цвет текста;

· Face - определяет гарнитуру шрифта;

· Size - задает размер шрифта в условных единицах.

< height:80px;font-size:40px>

Форматирование текста на странице задано при помощи тегов, размер шрифта, выделение курсивом и подчеркивание тегами. Данные теги размещаются непосредственно перед текстом.

Цвет фона страницы задан атрибутом дескриптора BGColor=" #000000 ", где значением является определитель цвета. Цвет шрифта изменяется при помощи тега

color:black;font-weight:normal

и его атрибута Color, которому также присваивается значение определителя цвета.

Для создания заголовков используются теги

<b> </b> - текст заголовка выделяется полужирным шрифтом;

3. Создание и форматирование рисунков

Тег <IMG> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <IMG> в контейнер <A>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border="0" в тег <IMG>.

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

Синтаксис: <img src="URL" alt="">

Закрывающий тег отсутствует. К параметрам относятся:

Align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом.

Border - толщина рамки вокруг изображения;

Height - высота изображения;

Src - путь к графическому файлу;

Vspace - вертикальный отступ от изображения до окружающего контента;

Width - ширина изображения;

Графические изображения выведены на экран с помощью тега, в котором находится адрес расположения изображения. Значение атрибутов видны на следующем примере <p> <img src="image/image.bmp" style="img"></p>

4. Использование внешних и внутренних гиперссылок

Тег <A> является одним из важных элементов HTML и предназначен для создания гиперссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис: <a href="URL">...</a> <a name="идентификатор">...</a>

Закрывающий тег обязателен. К параметрам относятся:

Href - задает адрес документа, на который следует перейти;

Name - устанавливает имя якоря внутри документа;

Target - имя окна или фрейма, куда браузер будет загружать документ;

Title - добавляет всплывающую подсказку к тексту ссылки.

<head> <title>wxMaxima</title> </head>

5. Использование абзацев, прерываний

Тег <P> определяет текстовый параграф. Он является блочным элементом, поэтому он начинается с новой строки, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента.

Синтаксис:

<p>Текст <p>Текст</p>

Закрывающий тег обязателен.

Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега <BR> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Синтаксис:

Текст<br> текст

Закрывающий тег отсутствует. К параметрам относятся:

Clear - сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Остальные страницы сайта разработаны аналогично главной странице.

6. Содержание страниц сайта

На странице «Установка программы и запуск программы» пошаговым образом описывается инсталляция программы на домашний компьютер под управлением операционной системы Windows 7. Приведены скриншоты, помогающие пройти все этапы установки начинающему пользователю.

На странице «Нарисовать график функции» приведен конкретный пример построения графика функции (1/2*х^2+sin(2*x)). Для построения графика вызывается меню программы Maxima Графики Plot 2d... В открывшемся окне диалога записывается функция. Построение функций на странице сайта делается многократно, но значения изменения аргумента выбирается всякий раз таким, чтобы графики выглядели покрупнее.

Кроме значения самой функции строятся также графики производной функции и находятся точки решения уравнения y' = 0. Для Maxima используется команда вида.

Поскольку значения аргумента функции, при которых имеются экстремумы удовлетворяет условию равенства нулю касательной к графику.

Численные значения точек экстремума уточняются при помощи функции find_root(). В Maxima используется команда вида.

Найденные точки экстремума собраны в таблицу вида:

Вывод

В этом проекте создан сайт для начинающих, желающих воспользоваться компьютерной алгеброй Maxima для анализа поведения сложных функций (нахождения производных и точек экстремума) и построения графиков функций. Описан процесс инсталляции программы Maxima на домашний компьютер под управлением операционной системы Windows 7.

В предыдущих разделах отчета описаны инструменты создания сайта, рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех направлениях бизнеса, промышленности и образования.

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

Литература

1. Пример сайта, используемого в рекламных целях для отдыха (Электронный доступ). URL: http://arabatka.in.ua/

2. http://genichesk.com.ua/

3. http://www.htmlbook.ru

4. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998

5. Ганчаров А. Самоучитель HTML. Питер 2000

6. Дарнелл Р. HTML 4 Энциклопедия пользователя ДиаСофт 1999

7. Петюшкин А.В., HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003

8. Хоумер А. Dynamic HTML Справочник Питер 1999

Размещено на Allbest.ru


Подобные документы

  • Форматирование текста с помощью HTML. Задание цвета на веб-странице. Задание размера шрифта. Физическое и логическое форматирование символов. Вставка специальных символов. Удобочитаемость, содержание и форма шрифта. Подбор шрифта и верстка текста.

    курсовая работа [1,3 M], добавлен 01.10.2014

  • Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.

    реферат [23,7 K], добавлен 17.08.2007

  • История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.

    курсовая работа [1,2 M], добавлен 27.03.2009

  • Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

    методичка [1,9 M], добавлен 06.07.2011

  • Создание основы интернет-сайта - набора таблиц, которые расположены в нужном порядке. Использованные теги и их атрибуты. Кодовое оформление сайта, наложение второго слоя. Стильный текст в HTML. Использование скриптов для большей информативности сайта.

    методичка [813,6 K], добавлен 08.11.2013

  • Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.

    курсовая работа [2,5 M], добавлен 18.07.2014

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

    курсовая работа [2,2 M], добавлен 16.04.2017

  • История появления первого в мире сайта info.cern.ch в 1991 году. Страницы сайтов как набор текстовых файлов, размеченных на языке HTML. Использование конструктора при разработке сайтов. Создание сайта "с нуля", разработка дизайна, верстка, оформление.

    реферат [21,5 K], добавлен 26.05.2015

  • Структура информационных потоков и концептуальная модель учебника. Создание Web-страницы с помощью языка HTML: текст, фреймы, JavaScript, дизайн. Руководство по инсталляции, требования к программному и техническому обеспечению. Мероприятия по охране труда

    дипломная работа [2,1 M], добавлен 20.08.2009

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

    курсовая работа [383,8 K], добавлен 18.01.2011

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.