Язык HTML в программировании

Описание:
Тип работы: курсовая работа
Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
Доступные действия
Введите защитный код для скачивания файла и нажмите "Скачать файл"
Защитный код
Введите защитный код

Нажмите на изображение для генерации защитного кода

Текст:

Министерство Образования Московской Области

МОСКОВСКИЙ ОБЛАСТНОЙ ПРОМЫШЛЕННО-ЭКОНОМИЧЕСКИЙ КОЛЛЕДЖ

Курсовая работа

По предмету: «Web-Дизайн»

На тему: Язык HTML

Выполнил: Студент гр. ПР3

Соколов С.С.

Проверил: Витальева .Т.Б.

Дубна 2010


Оглавление

 

Введение

Теоретическая часть

Практическая часть

Заключение


Введение

 

Что такое HTML?

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

Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип жми на то, что интересно, лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language).

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

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

верстка язык html


Теоретическая часть

 

Структура HTML-документов
Web-страницы описываются на специальном языке, называемом HTML (HyperText Markup Language язык разметки гипертекстовой информации), который позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов.
Будучи подмножеством языка SGML, HTML имеет теговую структуру. Это означает, что в тексте встречаются команды, изменяющие интерпретацию информации.
Теги записываются в угловых скобках и могут содержать дополнительные параметры. Большинство тегов располагается в виде ``скобок"" вокруг текста (как теги и вокруг слова ``курсивом"" в приведенном выше примере). Благодаря этому свойству, теги можно подразделить на открывающие и закрывающие. Не у всех тегов существуют соответствующие им закрывающие, такие теги иногда называют ``пустыми""(empty). Общую структуру открывающего тега можно записать так:
Соответствующий закрывающий тег будет иметь вид
Теги HTML
Заглавные теги
(соответственно, в конец документа, закрывающего тега ; никогда не забывайте закрывать скобки!). Заголовок HTML-файла находится в обязательной секции , которая должна находиться в самом начале, то есть сразу после тега . Оформляется заголовок с помощью тега .</h6> <h6><strong>BACKGROUND</strong> - позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра.</h6> <h6><strong>TEXT</strong> - задает цвет текста документа. Цвет задается так же как и для параметра BGCOLOR.</h6> <h6><strong>LINK</strong> - задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors).</h6> <h6><strong>VLINK</strong> - (Visited LINKs color) задает цвет для ранее выбранных ссылок.</h6> <h6><strong>ALINK</strong> - (Active LINKs color) задает цвет для ссылок в момент выбора.</h6> <h6>Форматирующие теги</h6> <h6>Для того чтобы вставить ``насильный"" перевод строки, необходимо воспользоваться тегом <BR> . Если вам необходимо сделать так, чтобы в определенном месте текст НЕ МОГ быть разорван, напишите в этом месте тег <NOBR></h6> <h6>Для разбивки текста на параграфы используется тег <Pпараметры>ТЕКСТ<P> Тег <P> имеет один параметр ALIGN, указывающий на способ выравнивания текста внутри параграфа: текст может быть выровнен по правому (RIGHT), левому (LEFT) краям или отцентрирован (CENTER). Если параметр опущен, текст выравнивается по левому краю.</h6> <h6>Чтобы отцентрировать параграф можно также пользоваться тегом</h6> <h6><CENTER>...</CENTER></h6> <p>Еще одним способом разделения текста на части можно назвать <i>горизонтальную линию</i>. Линия является элементом языка HTML и вставляется в текст посредством тега<HRпараметры>,где параметры могут быть следующими:</p> <h6><strong>WIDTH</strong> - задает ширину линии</h6> <h6><strong>SIZE</strong> - задает толщину линии.</h6> <h6><strong>NOSHADE</strong> - если этот параметр задан, линия не будет иметь тени.</h6> <h6>Комментарии</h6> <h6>Комментарии заключаются между последовательностями <!-- и -->.</h6> <h6>Заголовки</h6> <h6>Для их создания используются теги <H1>...</H1>,...,<H6>...</H6>. Размер 1 соответствует самому крупному шрифту, размер 6 самому мелкому</h6> <h6>Шрифты</h6> <h6>Выделение курсивом осуществляется с помощью тега <I> (от слова <i>Italic</i>), а жирным шрифтом -- с помощью тега <B> (от слова <i>Bold</i>).</h6> <h6>В HTML есть также понятие <i>emphasis</i> - обобщенное выделение. Оформляется оно с помощью тега <EM>...</EM>. Такое выделение - средство описания логической структуры документа. Обычно выделенный таким способом текст отображается курсивом.</h6> <h6>Другим средством логического выделения можно считать тег <STRONG>...</STRONG></h6> <h6>Содержимое тега обычно отображается жирным шрифтом.</h6> <h6>Изменить размеры и цвет шрифтов можно с помощью тега <FONT параметры>...</FONT></h6> <h6>Параметры могут быть следующими:</h6> <h6><strong>SIZE</strong><strong>=``</strong><strong><i>value</i></strong><strong> или </strong><strong><i>value</i></strong><strong>""</strong> - задает абсолютный или относительный размер шрифта. Относительный размер задается по отношению к базовому размеру. Диапазон принимаемых значений от одного до семи.</h6> <h6><strong>COLOR</strong> - указывает цвет для текста.</h6> <h6><strong>FACE</strong> - расширение Microsoft Internet Explorer и Netscape Navigator. Позволяет задать <i>гарнитуру</i> (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста.</h6> <h6><strong>SIZE</strong> - задает размер шрифта.</h6> <b><br> </b> <h6>Списки</h6> <h6>Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока</h6> <h6><UL></h6> <h6><LI>элемент</h6> <h6><LI> элемент</h6> <h6></UL></h6> <h6> Нумерованный список отличается от ненумерованного тем, что около пунктов вместо жирных точек вставляются порядковые номера пунктов. Оформляется он в виде блока </h6> <h6><OL></h6> <h6><LI>элемент</h6> <h6><LI>элемент</h6> <h6></OL></h6> <h6>Третим видом списка является список терминов. Он очень удобен для оформления всевозможных</h6> <h6>глоссариев. Оформить такой список можно с помощью </h6> <h6>блока</h6> <h6><DL></h6> <h6><DT>Термин1<DD>Описание1</h6> <h6> <DT>Термин2<DD>Описание2</h6> <h6></DL></h6> <b><br> </b> <h6>Гипертекстовые ссылки</h6> <h6>Одной из самых мощных возможностей WWW является возможность организации гипертекстовых связей между документами.</h6> <h6>Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <A> (<i>anchor</i>). Полный синтаксис тега таков:</h6> <h6><Aпараметры></h6> <h6></A></h6> <h6>где параметры могут быть следующими:</h6> <h6><strong>HREF</strong> - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.</h6> <h6><strong>NAME</strong> - если этот параметр указан, то ссылка никуда не ссылается. Неочевидно, но в этом случае тег <A> указывает <i>именованную метку</i> в документе, на которую потом можно будет сослаться используя символ # в параметре HREF.</h6> <h6><strong>target</strong> - параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно.</h6> <h6>Верстка таблиц</h6> <h6>Таблицы являются мощнейшим средством HTML для верстки страниц. До появления в языке HTML средств верстки таблиц, нельзя было создать даже самый простой многоколончатый текст или сводную таблицу, то после появления такой возможности Web-дизайнеры стали использовать ее в полной мере и добиваться сложных эффектов.</h6> <h6>Создается таблица с помощью конструкции</h6> <h6><TABLE параметры ></h6> <h6><CAPTION>Заголовок</CAPTION></h6> <h6><TR параметры></h6> <h6><TD параметры></h6> <h6></TD></h6> <h6>.... </TR></h6> <h6></TABLE></h6> <h6>Тег TABLE начинает описание таблицы и может иметь следующие параметры:</h6> <h6><strong>BORDER</strong> - определяет толщину рамки таблицы. Если указано нулевое значение то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается).</h6> <h6><strong>WIDTH</strong><strong>, </strong><strong>HEIGHT</strong> – указывает размеры таблицы, если они должны быть жестко заданы.</h6> <h6><strong>ALIGN</strong> - определяет, как должна быть выровнена таблица: справа (RIGHT), слева (LEFT) или в центре (CENTER) страницы.</h6> <h6><strong>CELLSPACING</strong> - число точек между отдельными ячейками в таблице.</h6> <h6><strong>CELLPADDING</strong> - число точек между рамкой и содержимым ячейки.</h6> <h6>С помощью тега <TR параметры>...</TR> оформляются строки таблиц. Он может иметь следующие параметры:</h6> <h6><strong>ALIGN</strong> - используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (RIGHT), левому (LEFT) краям или центрироваться (CENTER).</h6> <h6><strong>VALIGN</strong> - используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (TOP), нижнему (BOTTOM) краям, центрироваться (MIDDLE) или иметь общую базовую линию (BASELINE).</h6> <h6>Конкретные ячейки задаются с помощью тега <TD параметры>...</TD>, где параметры могут быть следующими:</h6> <h6><strong>WIDTH</strong> - задает ширину ячейки.</h6> <h6><strong>COLSPAN</strong> - определяет, сколько колонок таблицы ячейка будет перекрывать.</h6> <h6><strong>ROWSPAN</strong> - определяет, сколько строк таблицы ячейка будет перекрывать.</h6> <h6><strong>NOWRAP</strong> - если этот параметр указан, содержимое ячеек не будет переноситься, чтобы влезать в ширину ячейки.</h6> <h6><strong>BGCOLOR</strong> - параметр, поддерживаемый современными браузерами: указывает цвет фона ячейки в виде RGB-триплета или символьного имени.</h6> <h6>Еще один тег для оформления ячеек таблиц - тег <TH>...</TH> - нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.</h6> <h6>Если нужно задать заголовок ВСЕЙ таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:</h6> <h6><strong>ALIGN</strong> - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.</h6> <h6>Рамки (фреймы)</h6> <h6>Мощным визуальным средством являются так называемые <i>рамки или фреймы</i> (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как Netscape Navigator (начиная с версии 2.0) и MS Internet Explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые.</h6> <h6>Рамки описываются в специальном HTML-документе, называемом <i>Документом Описания Рамок</i>. Этот документ содержит описание числа, размеров и положения рамок, а также URL-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах.</h6> <h6>При описании рамок тег <BODY> заменяется на тег</h6> <h6><FRAMESETпараметры></h6> <h6>описания содержимого рамок</h6> <h6></FRAMESET></h6> <h6>Тег будет игнорироваться браузером, если перед ним встретятся любые теги, в обычном случае встречающиеся внутри тега <BODY>. Теги <FRAMESET> могут быть вложенными, что позволяет, как Читатель увидит далее, создавать очень сложные конструкции. Параметры тега <FRAMESET> могут быть следующими:</h6> <h6><strong>ROWS</strong><strong>=``</strong><strong>x</strong><strong>1,</strong><strong>x</strong><strong>2,... или </strong><strong>x</strong><strong>1%,</strong><strong>x</strong><strong>2%,... или </strong><strong>x</strong><strong>1*,</strong><strong>x</strong><strong>2*,...""</strong> - этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения.</h6> <h6><strong>COLS</strong><strong>=``</strong><strong>x</strong><strong>1,</strong><strong>x</strong><strong>2,... или </strong><strong>x</strong><strong>1%,</strong><strong>x</strong><strong>2%,... или *""</strong> - используется для описания рамок как столбцов различной ширины. Используется так же, как параметр ROWS.</h6> <h6>Примеры:</h6> <h6><FRAMESET ROWS="3*,*"></h6> <h6>задаст две горизонтальные рамки, причем первая (верхняя) будет в три раза выше второй (нижней).</h6> <h6><FRAMESET ROWS="100,*,50"></h6> <h6>задаст три горизонтальные рамки, причем первая (верхняя) будет иметь высоту 100 точек, третья (нижняя) будет иметь высоту 50 точек, а вторая (средняя) займет все оставшееся пространство.</h6> <h6><FRAMESET COLS="70%,30%"></h6> <h6>задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) -- 30%.</h6> <h6>Для задания содержимого рамки используется тег <FRAME параметры>. Параметры могут быть следующими:</h6> <h6><strong>SRC</strong> - указывает URL документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.</h6> <h6><strong>NAME</strong> - значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра TARGET тега <A>.</h6> <h6><strong>SCROLLING</strong> - показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения:</h6> <h6><strong>YES</strong> - содержимое рамки МОЖЕТ проматываться.</h6> <h6><strong>NO</strong> - содержимое рамки НЕ может проматываться.</h6> <h6><strong>AUTO</strong> - браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию.</h6> <h6><strong>NORESIZE</strong> - если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).</h6> <h6><strong>MARGINWIPH</strong> - указывает на величину горизонтального отступа внутри рамки.</h6> <h6><strong>MARGINHEIGHT</strong> - указывает на величину вертикального отступа внутри рамки.соответствует примерно следующей раскладке рамок в области отображения:</h6> <h6>Что же происходит, если браузер не понимает рамок? Пользователь видит абсолютно чистый экран и не может добраться до нужной ему информации. Как сделать так, чтобы такая ситуация не возникала? Разработчики расширений предусмотрели такую ситуацию и придумали тег, содержимое которого никогда не отображается в браузере, понимающем рамки, тогда как ``глупый"" браузер, увидя незнакомый тег, честно отобразит его содержимое без применения каких-либо хитростей. Такой тег называется</h6> <h6><NOFRAMES></h6> <h6>Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок.</h6> <h6>Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.</h6> <br> <p><b>Практическая часть </b></p> <p><b> </b></p> <p><b>Разработка сайта посредством </b><b>HTML</b></p> <p>Итак, в качестве практической части была выбрана работа по созданию сайта на тему: «Япония»</p> <p><b>Создание графических объектов</b></p> <p>В первую очередь перед началом верстки гипертекста нужно продумать общий дизайн страниц, их количество, структуру, а также создать элементы графической оболочки сайта. Лучше всего подойдет Adobe Photoshop CS5. </p> <p>Кнопки меню</p> <p><img width="159" height="26" src="images/servus/12/39/4443912.jpeg" alt="">       <img width="159" height="26" src="images/servus/13/39/4443913.jpeg" alt="">       <img width="159" height="26" src="images/servus/14/39/4443914.jpeg" alt=""></p> <p><img width="159" height="26" src="images/servus/15/39/4443915.jpeg" alt="">       <img width="159" height="26" src="images/servus/16/39/4443916.jpeg" alt=""> </p> <p><img width="141" height="37" src="images/servus/17/39/4443917.jpeg" alt="">          или    <img width="111" height="44" src="images/servus/18/39/4443918.png" alt=""> (кому как нравится)</p> <p>Для новостной ленты:</p> <p><img width="561" height="40" src="images/servus/19/39/4443919.jpeg" alt=""></p> <p>Для части HEAD</p> <p><img width="539" height="68" src="images/servus/20/39/4443920.jpeg" alt=""></p> <br> <p><b>Макет страницы</b></p> <p>Также важно продумать макет структуры сайта. Макет нашего сайта будет выглядеть примерно так:</p> <p><img width="610" height="549" src="images/servus/21/39/4443921.jpeg" alt=""></p> <p><b> </b></p> <p><b>Верстка</b></p> <p>Теперь можно приступать к верстке. Делаем главную страницу:</p> <p>Главная страница:</p> <p><html></p> <p><head ></p> <p><META HTTP-ENQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1251"> </p> <p><META NAME="AUTHOR" CONTENT="Руслан Смоилов"></p> <p><meta name="robots" content="all"></p> <p><title> Добро пожаловать в Японию

Новостная строка

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

Добро пожаловать в Японию!


Регистрация


Информация о сайте

   Сайт разработан с чисто демонстрационными целями.

Почему именно Япония? Незнаю.

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


Япония — развитая страна с очень высоким уровнем жизни (десятое место по индексу развития человеческого потенциала).

В Японии одна из самых высоких ожидаемых продолжительностей жизни, в 2009 году она составляла 82,12 года, и один из самых низких уровней младенческой смертности


Автомобиль какой японской марки вы предпочитаете?



Итоги опроса:

Toyota 40%
Honda 10%
Subaru 20%
Nissan 10%
Mitsubishi 20%






japan.com

google.com






Desined by Ruslan Smoilov
Dubna 2010


smoiloff_new@mail.ru

Страница 2

Добро пожаловать в японию

Новостная строка

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">


Регистрация



<<На главную

Регистрация пользователей


Фамилия

Имя         

Отчество


Страна           


Автомобиль какой японской марки вы предпочитаете?



Итоги опроса:

Toyota 40%
Honda 10%
Subaru 20%
Nissan 10%
Mitsubishi 20%






japan.com

google.com






Desined by Ruslan Smoilov
Dubna 2010


smoiloff_new@mail.ru

Страница 3

Добро пожаловать в японию

Новостная строка

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">


Регистрация




<<На главную

Фотографии


Автомобиль какой японской марки вы предпочитаете?



Итоги опроса:

Toyota 40%
Honda 10%
Subaru 20%
Nissan 10%
Mitsubishi 20%






japan.com

google.com






Desined by Ruslan Smoilov
Dubna 2010


smoiloff_new@mail.ru


Заключение

 

На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext Markup Language— «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.Web Hypertext Application Technology Working Group) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов ит.д., которые не очень удачно вписываются в модель XHTML 2.

Информация о файле
Название файла Язык HTML в программировании от пользователя z3rg
Дата добавления 10.1.2012, 4:27
Дата обновления 10.1.2012, 4:27
Тип файла Тип файла (zip - application/zip)
Скриншот Не доступно
Статистика
Размер файла 160.73 килобайт (Примерное время скачивания)
Просмотров 510
Скачиваний 63
Оценить файл