Скачать презентацию Создание сайта с помощью языка html Что такое Скачать презентацию Создание сайта с помощью языка html Что такое

создания сайта с помощью языка html.ppt

  • Количество слайдов: 20

Создание сайта с помощью языка html Что такое html? История создание языка Основные теги Создание сайта с помощью языка html Что такое html? История создание языка Основные теги Создание сайта с помощью блокнота Создание сайта с помощью редактора html

Что такое html? Hyper. Text Markup Language (в дальнейшем HTML) это язык гипертекстовой разметки Что такое html? Hyper. Text Markup Language (в дальнейшем HTML) это язык гипертекстовой разметки документа. В нашем случае этим документом является web страница. Проще говоря, это язык для написания web страниц. Читая код HTML, веббраузер выводит на экран Вашего монитора содержимое web страницы.

История создания языка html Начало было положено Тимом Бернерс-Ли, выпускником Оксфордского университета. В 1989 История создания языка html Начало было положено Тимом Бернерс-Ли, выпускником Оксфордского университета. В 1989 году он выдвинул предложение о создании «Системы гипертекстовых документов» , которая должна была использоваться внутри CERN. В 1990 году он назвал эту систему World Wide Web (на русский язык это можно перевести как Всемирная Паутина). Одной из составляющих системы был язык разметки гипертекста. Его основы были заложены в 1990 году, когда Бернерс-Ли разрабатывал первый веб-браузер. Наконец, в 1993 году появилась первая версия языка — HTML 1. 0. Но он не был стандартом. И только в 1995 году, когда закончилась разработка языка HTML 2. 0, он стал таковым. К тому времени вторую версию языка HTML полностью поддерживало большинство браузеров. Что же было в этой версии? Во-первых, полностью утвердилась структура документа (она осталась неизменной до настоящего времени). Во-вторых, достаточно широко были представлены элементы разметки текста. Втретьих, появилась возможность добавлять рисунки. Конечно же, можно было вставлять гиперссылки и веб-формы. Как мы видим, очень многое из сегодняшнего языка HTML уже было реализовано в 1995 году в спецификации HTML 2. 0. Именно этот язык стал базисом, который потом усложнялся и дополнялся.

Дальнейшим развитием языка стала версия HTML 3. 0. В ней были реализованы таблицы, обтекание Дальнейшим развитием языка стала версия HTML 3. 0. В ней были реализованы таблицы, обтекание текста вокруг фигур и многие другие идеи. Несмотря на обратную совместимость, отличия между версиями 2. 0 и 3. 0 были огромными, по этой причине браузеры очень медленно и достаточно вяло включали поддержку новых возможностей. Версия 3. 0 так и не стала стандартом. Зато им стала версия HTML 3. 2. Она создавалась с учетом мнений производителей браузеров (Microsoft и Netscape), что естественным образом привело к положительным результатам. Примечателен тот факт, что еще до официального утверждения данного стандарта (это произошло в 1997 году), уже в 1996 году практически все браузеры полностью поддерживали его. Во многом благодаря стандарту HTML 3. 2 веб-дизайн испытал небывалый взлет. Появилась возможность проектировать и отображать на экране сложные композиции, ничем не уступающие журналам, газетам и другим печатным изданиям (это стало возможным благодаря табличной верстке). Но из-за медленных каналов связи приходилось значительно ограничивать применение графики, а многие мониторы отображали не более 256 цветов, так что и богатство красок оставляло желать лучшего.

Несмотря на то, что язык HTML 3. 2 включал в себя многие расширения, внедренные Несмотря на то, что язык HTML 3. 2 включал в себя многие расширения, внедренные разработчиками браузеров, он все еще оставался достаточно ограниченным, поэтому и новый стандарт не заставил себя долго ждать. Уже в том же 1997 году появилась спецификация HTML 4. 0. В нее включили фреймы, унифицировали процедуру вставки различных объектов в документ, реализовали поддержку каскадных таблиц стилей. Кроме того, были значительно усовершенствованы формы и таблицы, а некоторые элементы помечены как нежелательные для использования. Необходимо отметить, что четвертая версия HTML отличается законченностью и полнотой. Фактически, это предел возможностей данного языка. Последняя версия HTML 4. 01 была стандартизирована 24 декабря 1999 года, после чего разработка этого языка прекратилась.

Основные теги Тэг – это специальное указание того как нужно отображать элемент (текст, картинка Основные теги Тэг – это специальное указание того как нужно отображать элемент (текст, картинка и т. д. ) на странице сайта. Можно представить его как команду браузеру содержащую название и параметры. < ТЭГ > Текст, на который должен воздействовать тэг < /ТЭГ >. Большинство тэгов — парные, то есть на каждую открывающую метку вида <тэг> есть закрывающая метка вида с тем же именем, но с добавлением слэша "/".

<Html> Открывающий тег, который объявляет о начале документа. Открывающий тег заголовка или головы документа Открывающий тег, который объявляет о начале документа. Открывающий тег заголовка или головы документа (кому как удобно) В дальнейшем, если речь будет идти о заголовке документа, будем говорить тег , имя в виду «заголовок» документа. Между открывающим и закрывающим тегом располагается название документа и служебная информация для браузеров и поисковых машин. Открывающий тег названия документа дает браузеру понять, что все что написано сразу за этим тегом и до закрывающего тега является названием документа. Это название выводится браузером на самую верхнюю панель браузера. Наша первая страница - собственно само название документа.

</Title> Закрывающий тег названия документа дающий понять браузеру, что на этом действие тега <Title>закончилось. Закрывающий тег названия документа дающий понять браузеру, что на этом действие тега закончилось. </Head> Закрывающий тег заголовка или головы документа дающий понять браузеру, что на этом действие тега <Head> закончилось. <Body> Между открывающим тегом <Body> и закрывающим </Body> находится все, что выводится браузером на экран. Это таблицы, текст, изображения. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. </Body> Закрываем тело документа. Сообщаем браузеру, что на этом тело или содержимое (кому как нравиться, мы будем говорить далее «тело» ) документа закончено. Иными словами в данном месте закончено действие тега <Body>. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="</Html> Закрываем HTML документ. Видя этот тег браузер понимает что действие тега <Html> на" src="https://present5.com/presentation/3/50880218_183922291.pdf-img/50880218_183922291.pdf-9.jpg" alt="</Html> Закрываем HTML документ. Видя этот тег браузер понимает что действие тега <Html> на" /> </Html> Закрываем HTML документ. Видя этот тег браузер понимает что действие тега <Html> на этом закончено. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Создание сайта с помощью блокнота Сначала создадим отдельную папку для нашего сайта. Назовем ее," src="https://present5.com/presentation/3/50880218_183922291.pdf-img/50880218_183922291.pdf-10.jpg" alt="Создание сайта с помощью блокнота Сначала создадим отдельную папку для нашего сайта. Назовем ее," /> Создание сайта с помощью блокнота Сначала создадим отдельную папку для нашего сайта. Назовем ее, например, site. Затем, откроем блокнот. Если Вы не знаете, что это такое и где он находится у вас на компьютере, то идите в панель «ПУСК» , далее «ПРОГРАММЫ» , далее на вкладке «СТАНДАРТНЫЕ» найдите и откройте «БЛОКНОТ» . Теперь пропишите следующие теги, о которых мы вам уже упоминали: <html> <head> <title>Моя страничка Добрый день! Это моя первая страница!

Теперь это все сохраним. Затем вводим название страницы. Обязательно вводим расширение. html и смотрим, Теперь это все сохраним. Затем вводим название страницы. Обязательно вводим расширение. html и смотрим, чтобы в строке «тип файла» Было выбрано «Все файлы»

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

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

Создание сайта с помощью редактора html Для начала Вам нужно выбрать редактор. Сyщecтвyeт два Создание сайта с помощью редактора html Для начала Вам нужно выбрать редактор. Сyщecтвyeт два типа HTML peдaктopoв: Редакторы типа “WYSIWYG (What-You- See-Is What-You-Get) Что видишь, то и получишь” Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word Редакторы собственно HTML-текстов. В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.

Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы На примере редактора Microsoft Office Front. Page 2003, я хочу показать примерный принцип работы редакторов. Для начала запустим его. Перед собой мы видим вот такое окно как в Word’е.

Теперь вы можете вставлять картинки, делать таблицы, писать текст, все на ваше желание, прямо Теперь вы можете вставлять картинки, делать таблицы, писать текст, все на ваше желание, прямо как в Word. А этот редактор переделает это все в html. Вот небольшой пример моей работы в Front Page:

Теперь же сохраним нашу работу: Теперь же сохраним нашу работу:

Нажимаем, и выходит такое вот окно: По умолчанию, сайт сохраняется в каталоге «Мои документы» Нажимаем, и выходит такое вот окно: По умолчанию, сайт сохраняется в каталоге «Мои документы» в папке «Мои веб-узлы»

Теперь запустим нашу сделанную страничку. Для этого заходим Мои документы->Мои веб-узлы->index. html: Теперь запустим нашу сделанную страничку. Для этого заходим Мои документы->Мои веб-узлы->index. html:

После запуска мы видим проделанную нами работу. После запуска мы видим проделанную нами работу.