Разработка шаблона для web сервиса по учету ошибок программных продуктов

Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные программные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. html — своеобразная противоположность сложным языкам программирования, известным только специалистам.

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

Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров.

От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.

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

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

1. ИСТОРИЯ HTML.

Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются по сей день.

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

В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.

Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум), компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение — фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт — программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.

В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.

2. ТАБЛИЦЫ СТИЛЕЙ, УРОВНИ CSS.

Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными.

С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).

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

Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.

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

Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:

ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега.

из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:

Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.

Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа;

внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:

BODY {font-family: Arial, Helvetica;}.

INPUT {background-color: ICECECE;}.

>

Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);

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

<�Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana; ">Текстпараграфа...

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

Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):

. header { font-weight: bold; color: gray; }.

. text { color: black; font-size: llpx; }.

>

В данном случае текст табличной ячейки класса. header будет отображаться жирным начертанием и серым цветом, а ячейки класса. text — обычным начертанием, черным цветом и размером шрифта 11 пикселов;

импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:

@import: url (style. ess);

>

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

Cnoco6bi определенияшаблонов CSS.

Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования.

• Ссылка на внешний файл
• Внедрение в документ
• Включение в теговые конструкции
• Импортирование

Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами.

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

Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать файл CSS или вообще исчерпает лимит времени по загрузке данных.

В первом случае стили для части элементов не будут переопределены (браузер успеет «обнаружить» только те правила, которые размещены в верхней части CSS-файла).

Во втором случае все элементы страницы останутся без изменения, загрузившись по умолчанию.

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

CSS и Dynamic HTML — просто и привлекательно!

При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров.

К примеру, Netscape «плохо относится» к использованию символа нижнего подчеркивания (_) в указании классов для элементов HTML (.news_titie,. _about и т. д.).

Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <�то>/<�тн>: конструкция <�то CLASS="text" >TeKCT выведет текст по умолчанию, a TeKCT отобразит текст заданным стилем.

3.ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА РАЗРАБОТКУ.

сайт шаблон листинг верстка ГОСТ 19.201−78 Техническое задание.

Шаблон экранной формы для web сервиса «Система баг трекинга».

1.

Введение

.

Шаблон экранной формы представляет собой web станицу написанную на языке разметки гипер-текста. Экранная форма подразумевает наличие всех обязательных полей для создания запроса в будущем web сервисе.

2.Основание для разработки.

Программа разрабатывается на основе учебного плана кафедры 230 115 «Программирование в компьютерных системах» Московского колледжа бизнес-технологий.

3.Назначение разработки.

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

4.Требования к программе и программному изделию.

4.1 Требования к функциональным характеристикам Шаблон должен обеспечить:

Ввод всех необходимы атрибутов запроса Адаптивность к серверным приложениям по сбору данных Функциональный и не нагроможденный интерфейс Возможность формирования заявки.

Должен включать в себя несколько экранных форм.

4.3 Условия эксплуатации.

4.3.1 Технические условия эксплуатации.

Для корректного отображения экранной формы не обходимо открывать её в интернет браузере googlechrome версии 30.0 и больше.

4.3.2 Требования к персоналу.

Для работы с экранной формой оператор должен обладать минимальными навыками по работе с компьютером.

4.4 Требования составу и параметрам технических средств.

В состав технических средств должен входить персональный компьютер (ПЭВМ), выполняющий роль клиента, включающий в себя:

процессор Pentium-2.0Mz, не менее;

оперативную память объемом, 1Гигабайт, не менее;

HDD, 80 Гигабайт, не менее;

операционную систему Windows 2000 или Windows 2003;

5. Требования к программной документации.

Состав программной документации должен включать в себя:

руководство пользователя руководство программиста пояснительная записка.

6. Технико-экономические показатели.

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

Шаблон повышает скорость разработки внутри организации.

4. АНАЛИЗ ТРЕБОВАНИЙ И РАЗРАБОТКА СПЕЦИФИКАЦИЙ.

Функциональная диаграмма.

Рис. 1.

Первый уровень диаграммы.

Рис. 2.

Второй уровень.

Рис. 3.

Диаграмма потоков данных.

Первый уровень.

Рис. 4.

Второй уровень.

5. ОПИСАНИЕ СРЕДСТВ РАЗРАБОТКИ ШАБЛОНА.

В качестве текстового редакторадля работы с кодом был выбран sublimetext.

Sublime Text очень мощный текстовый редактор с богатым набором расширений. Редактор является условно бесплатным, но ограничений без покупки лицензии нет.

Из удобный функций, доступных в этой версии можно назвать Go To Definition, который позволяет с легкостью перемещаться по определениям функций и переменных в рамках текущего проекта, и скорость работы редактора.

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

Для отображения webстраницы нужен интернет браузер, который распознает код и отображает различные элементы. В качестве браузера для отображения страниц был выбран GoogleChrome. Google Chrome это качественный быстрый и легкий браузер, имеющий много функций при этом крайне прост в освоении.

Так же в нем имеются встроенные инструменты webразработчика, которые так же облегчают процесс разработки, например webконсоль и webинспектор.

6. ОПИСАНИЕ СТРУКТУРЫ.

Приступая к созданию данного шаблона не обходимо определиться с тем из каких глобальных элементов будет состоять шаблон.

Это нужно для лучшего понимания дальнейшей верстки.

Данный шаблон будет состоять из трех глобальных блоков имеющих иерархию.

Это блок рабочая области, которая обрамляет все рабочее пространство, в котором пользователь будет производить действия.

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

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

В целом концепцию верстки шаблона можно описать так: сначала в файле index. html создаются все необходимые для реализации функционала блоки, вводится вся необходимая на странице информация, после чего в файле style. css описываются все графические свойства каждого блока. Графическими свойствами могу быть: положение блоков на экране, цвет блоков, цвет текста в блоках, тени, рамки, скругления и даже анимации.

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

Экран заведения ошибок должен позволять указать все необходимые атрибуты, что бы разработчик имел всю необходимую информацию для устранения ошибки.

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

На рисунке 5 можно наглядно посмотреть реализацию данного условия.

Рис. 5.

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

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

Рис. 6.

7. ВЕРСТКА ЭЛЕМЕНТОВ ШАБЛОНА И СОЗДАНИЕ СТИЛЕЙ.

Определения Верстка сайта — процесс перевода картинки (формата .jpg, .gif, .png, обычно .PSD) в HTML-шаблон. Данная процедура является одним их этапов создания сайта.

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

HTML-верстальщик — специалист, осуществляющий верстку сайта.

Описание процесса верстки сайта в html.

На этапе создания сайта, дизайнер разрабатывает макет сайта. Для этого используются различные графические редакторы, обычно это Adobe PhotoShop и Corel. HTML-верстальщик приступает к верстке сайта после утверждения и передаче ему соответствующего макета.

Стандартное требование HTML-верстальщика, чтобы макет был в формате .PSD. Это позволяет ему быстрее и качественнее сверстать сайт, так как данный формат предполагает наличие в нём слоёв. Каждый слой — это один элемент. А так как верстка осуществляется по-элементно, то процесс верстки при наличии слоев занимает меньше времени.

В процессе верстки, html-верстальщик создаёт html-шаблон, где прописывается структура документа с использование специальных тегов. Из макета верстальщик вырезает необходимые элементы, оптимизирует их и вносит в html-шаблон. Задача верстальщика — идентичное отображение предоставленного макета и создаваемого им html-шаблона — с одной стороны. С другой стороны — html-шаблон должен быть оптимизирован по интернет (быстро загружаться, иметь интерактивные элементы, понятную структуру для программиста).

HTML-верстальщик в процессе создания html-шаблона оперирует не только знанием html-тегов для правильной верстки, а в том числе, должен понимать как правильно оформлять таблицы стилей (CSS), должен понимать как реализовываются интерактивные компоненты (JavaScript, jQuery). Качественный html-шаблон должен содержать в себе все ответы на вопрос «Как должна быть представлена информация на сайте?».

Есть четкие требования, описывающие качество html-шаблонов.

Требования к качеству html-верстки. Тестирование верстки сайта.

Относительно верстки сайта существуют очень чёткие требования, которым должна соответствовать качественная html-верстка:

Быть идентичной предоставленному макету.

Открываться во всех броузерах одинаково. На текущий момент верстка сайта должна правильно отображаться как минимум в IE, Opera, FireFox, Safari, Chrome.

Не содержать в себе ошибок, соответствовать стандартам. Есть стандарты верстки W3C, а также специальные проверяющие сервисы.

Занимать оптимальный размер при просмотре пользователем. Понятие оптимальный размер предполагает некий компромисс между объемом, например картинки и качеством её отображения на странице. Если можно уменьшить объем без потери качества это нужно сделать.

Одинаково хорошо отображаться на различных мониторах (разрешениях экрана). Мониторы у всех разные и следовательно сайт должен отображаться на них одинаково хорошо.

Соответствовать стандартам W3C.

Классификация типов верстки.

Различаю следующие типы верстки:

По принципу отображения:

Тянущаяся (резиновая). Проверить «резиновую» верстку можно очень просто. Откройте любую страницу в броузере, сделайте размер окна броузера чуть меньше, чем он есть. Если сайт при этом как бы сжимается-разжимается при изменении размера окна броузера, то верстка данного сайта называют — «резиновая».

Не тянущаяся (статическая). Не тянущиеся страницы при изменении размера окна броузера не меняют расположение элементов.

По принципу верстки:

Табличная верстка — верстка с использованием тега.

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

Базовые теги, описывающие структуру сайта:

Верстка с использованием DIV (дивная верстка сайтов). Под версткой DIV-ами (блоками) понимают такое использование верстки, когда элементы верстки разбиваются на блоки (мелкие части). Каждый блок — это отдельный элемент сайта, которым можно удобно управлять и модифицировать. Основные преимущества верстки дивами (блочная верстка) по сравнению с табличной: Уменьшение размера html-шаблона, а следовательно и веб-страницы. Громоздкие табличные структуры заменяются изящными блоками, что может привести к существенному сокращению размера html-шаблона. Следствие уменьшения объема является уменьшение времени загрузки веб-сайта. Размер CSS-файла вырастает, но так как он загружается один раз, а дальше хранится в броузере, загрузка такой верстки происходит быстрее. Удобство сопровождать, вносить изменения в верстку сайта. Все ключевые элементы оформления вынесены в CSS и разбиты по блокам. Иногда даже не нужно трогать саму верстку, достаточно изменить файл стилей. Верстка блоками лучше воспринимается поисковыми системами. В силу того, что верстка блоками имеет меньший размер, а также имеет возможность управлять расположением блоков внутри файла, страницы, оптимизированные по SEO при всех равных, будут лучше, чем имеющие табличную верстку. Для успешной верстки div-ами необходимо обладать знаниями CSS. ЗАКЛЮЧЕНИЕ. В этом проекте был рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех без исключения электронных документах, независимо от тематики, величины и коммерческой направленности Интернет проекта. В данной работе такие технологии, как CSS были затронуты лишь поверхностно дабы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта. CПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ. 1. Айзекс А. DynamicHTMLBHV-Санкт-Петербург 1998. 2. Ганчаров А. Самоучитель HTML. Питер 2000. 3. Дарнелл Р. html 4 Энциклопедия пользователя ДиаСофт 1999. 4. Денисов InternetExplorer 5 Справочник Питер 1999. 5. Хоумер А. DynamicHTML Справочник Питер 1999. 6. Петюшкин А. В., HTML. Экспресс-курс. — СПб.: БХВ — Петербург, 2003. 7. Кингсли-Хью Э., JavaScript: учебный курс. — СПб.: Питер, 2002. 8. http://www.robotland.ru/. ПРИЛОЖЕНИЕ. Дистинг html-кода. Созадтьзапрос. . Запросы. Проекты. Обавторе. . Типзапроса. НесоответсвиеУлучшениеОбращениеТест. . Проект. АРМ врачаРегиональная регистратураМедстатистикаОнлайнмагазин. . Приоритет. ВысшийПервыйВторойТретийЧетвертый. . Версия. developrelise1.02.02.12.22.32.43.0. . Описание. . . . . . . design by Gavr P41. Листинг css-кода. /* обнулениестилей. *{. margin: 0; padding: 0; outline: none; }. /* цвет «тела». body{. background: #4169E0; }. /* стиль рабочей области. #work-space {. border-radius: 20px; margin:0 auto; padding: 30px auto; width: 1500px; height: 1200px; background-color: #DCDCDC; }. /*стиль первого элемента меню. #wrapperdiv:first-child {. margin-left:200px; }. /* стиль горизонтального меню. #wrapper {. margin-top: 50px; border-radius: 10px; width:auto; height:78px; background:#EFEFEF; vertical-align:middle; }. /* стильэлементовменю. .section {. margin-top: 10px; text-align:center; border-radius: 10px; border:solid 1px #999; margin-right:100px; float:left; height:56px; font-size: 25px; width:200px; background-color: #B0C4DE; }. /* анимация элементов меню. .section:hover {. — webkit-transform: scale (1.3); — ms-transform: scale (1.3); transform: scale (1.3); transition:all 0.3s ease; }. /* стили функциональных блоков. a {. text-align: top; text-decoration: none; padding: 2px; /* Полявокругтекста */. }. a:visited {. text-decoration: none; }. a:hover {. text-decoration: none; /* Убираемподчеркивание */. color: #4169E0; /* Цвет ссылки при наведении на нее курсора мыши */. }. #body-inf {. margin: 10px auto; border-radius: 20px; width: 1460px; height: 1000px; background-color: #B0C4DE; }. #footor {. border-radius: 20px; background: #808 080; margin:0 auto; width: 1500px; height: 100px; font-size: 30px; text-align: center; }. p{. text-align:left; margin: 20px 20px; font-size: 25px; height: 10px; }. #type {. border-radius: 20px; margin: auto 40px; float: center; width: 200px; height: 30px; }. #in-project. {. border-radius: 5px; margin: auto 20px; float: top; width: 200px; height: 30px; }. #text. {. border-radius: 20px; margin: auto 20px; float: top; width: 600px; height: 300px; }. #submit{border-radius: 5px; margin: auto 20px; float: top; width: 200px; height: 30px;}. #table{. margin: 10px 221px; }.