Создание сайта html презентация

Презентация «Создание HTML сайта»

Как организовать дистанционное обучение во время карантина?

Помогает проект «Инфоурок»

Описание презентации по отдельным слайдам:

Документ начинается с тега и заканчивается . HTML-документ состоит из 2-х частей: 1. Раздел заголовка 2. Содержательная часть Структура HTML-документа

язык разметки гипертекста. HTML не является языком программирования, он отвечает только за расположение элементов. HTML-это

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

инструкции браузера, указывающие способ отражения текста Теги – это

Все теги HTML начинаются с « » (правой угловой скобкой). Как правило, существует стартовый тег и завершающий тег. Пример:

Типы тегов 1. Парные (влияет на текст с того места, где употреблен тег, до того места, где указан признак окончания его действия. 2. Непарные

Структурные теги Теги символов Теги форматирования абзацев Теги оформления списков данных Теги физического форматирования списков Категории тегов

Начинается тегом Заканчивается тегом Между данными тегами располагается тег (этот тег используется для задания названия документа) Раздел заголовка

Заголовок документа Это тело HTML – документа. Здесь можно разместить все, что угодно! Пример простейшего документа

Пример простейшего документа

Полужирный шрифт Курсивный шрифт Подчеркнутый шрифт Нижний индекс Верхний индекс Теги физического форматирования

Тег позволяет изменить шрифт. Параметры тега : FAСE (задает название шрифта , которым будет выводиться текст) SIZE (задает размеры шрифта в условных единицах от 1 до 7) COLOR (устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или набором шестнадцатеричных цифр Параметры шрифта

Название шрифта Шрифт размера 5 Шрифт размера 3, цвет зеленый Примеры:

Как поменять цвет фона сайта? За фон сайта отвечает тег . Пример:

Одиночный тег
осуществляет перенос строки в том месте, где этот тег находится. При отображении тега

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

Примеры использования тега

Выравнивание по левой границе окна

Выравнивание по центру окна

Выравнивание по правой границе окна

Выравнивание по ширине окна

Тег Позволяет проводить горизонтальную линию.

Бесплатный
Дистанционный конкурс «Стоп коронавирус»

Тарасова Валентина МихайловнаНаписать 3714 07.12.2016

Номер материала: ДБ-002168

Добавляйте авторские материалы и получите призы от Инфоурок

Еженедельный призовой фонд 100 000 Р

07.12.2016 310

07.12.2016 2169

07.12.2016 707

07.12.2016 2032

07.12.2016 408

07.12.2016 261

07.12.2016 854

Не нашли то что искали?

Вам будут интересны эти курсы:

Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение редакции может не совпадать с точкой зрения авторов.

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

Создание Web-сайта на языке HTML. Учебное пособие

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

В качестве зачетной работы ученики отвечают на вопросы теста на знание тегов HTML и представляют созданный самостоятельно сайт.

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Обучающие: сформировать систему знаний по технологии создания Web-сайтов;

обучить языку разметки гипертекста HTML для создания сайтов;

познакомить с этапами проектной деятельности.

Развивающие: развить творческие способности к самовыражению, посредством создания сайтов;

сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;

развить навыки работы на компьютере
Воспитательные: воспитать добросовестное отношение к работе;

воспитать чувства товарищества и личной ответственности за созданный сайт;

воспитать художественный и эстетический вкус;

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

Читать еще: Выравнивание по ширине html

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language — язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

2. Структура HTML-документа

Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

3. Форматирование символов

Символы, заключенные между следующими тегами отображают:

…. — полужирный шрифт

…… — подчеркнутый шрифт

… — нижний индекс

… — верхний индекс

Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

Одиночный тег
разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1.

Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам

— начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

Выравнивание текста по абзацам:

— по ширине

— по правому краю

2. Задание цвета всего текста и фона документа

Описываются в начальном теге тела документа

3. Заголовки разных уровней

Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

…— строка.

— ячейка в ряду.

……

— неупорядоченный (ненумерованный) список

— упорядоченный (нумерованный) список

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

Виды нумераций списков:

5. Практичекое задание №2

Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений

Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

Одиночный тег вставляет графические изображения в текстовый поток в любом месте:

Необязательные атрибуты тега :

ALT = альтернативный текст

BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки

HEIGHT = высота изображения в пикселах или %

W >

HSPACE = свободное пространство слева и справа от изображения в пикселах или %

VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %

ALIGN = left, right, middle выравнивание изображения

Чтобы рисунок был по центру, можно использовать тег ……. /

2. Практическое задание №3

Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

Рисунок так же можно сделать, как гиперссылку, написав:

2. Практическое задание №4

Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

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

С помощью таблиц удобно создавать навигацию по сайту.

…
— вся таблица.

…

Пример таблицы из двух строк (рядов), содержащих по две ячейки:

Текст ячейки 1, 1

Текст ячейки 1 2

Текст ячейки 2, 1

Текст ячейки 2, 2

текст ячейки 1,1 текст ячейки 1,2первая строка
текст 2,1 ячейки текст 2,2 ячейкивторая строка
Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел
Основные атрибуты тегов

таблица

и задают параметры таблицы, строки или ячейки:
ALIGN=left, right, center – выравнивание (

,
,

)

BGCOLOR=’цвет’ – фоновый цвет (

,
,

)

HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

)

VSPACE=значение — свободное пространство сверху и снизу от таблицы в пикселах (

)

HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

,
)

BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

,
,

)

BORDECOLOR=’цвет’ – цет рамки (

VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

)

2. Практичекое задание №5

Создание навигации по сайту в форме таблицы из одной строки

Уроки №6 и №7

1. Секция заголовка , мета-теги

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

В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

(указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем)

2. Самостоятельная работа над своим проектом

Примерные темы проекта: “Мосты через Неву”, “Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге” и др.

Необходимо оформить главную страницу сайта по образцу файла glavn.htm, выбрав в качестве навигации по сайту таблицу или список, и 2 — 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок.

Урок №8

1. Контрольный тест на знание тегов HTML – 15 минут.

2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.

Вопросы контрольного теста – Приложение 2.

Литература для учителя

Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.

Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.

Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.

Браун М. “HTML 3.2. Наиболее полное руководство. В подлиннике”, БХВ-СПб, 1999

Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.

К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во Компьютер, Москва, 1997 г.

Литература для ученика

Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.

Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.

Презентація на тему «Создание Web-сайта»

Создание Web-сайта
Выполнила:ученик 10 класса Гиниятуллин Владислав

2 способа:
Ручной
С использованием конструктора
В чем причина возникновения
интереса к интернет-ресурсам?

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

По уровню персонификации сайты классифицируются:

Этапы создания сайта:
Анализ и проектирование сайта
Информационное наполнение сайта
Креатив, или визуальная составляющая сайта
Написание кода
Тестирование
Публикация
Раскрутка
Поддержка

Этапы создания сайта:
Анализ и проектирование сайта. Анализ аналогичных сайтов с выделением сильных и слабых их сторон. Сайт проектируется исходя из интересов предполагаемой аудитории.
Информационное наполнение сайта (контент). Привлекает потенциальных пользователей. Информация должна быть интересна для целевой аудитории и качественно оформлена.

Этапы создания сайта:
Креатив. Включает разработку дизайна, графических элементов, обработку графики и все, что с ней связано.Разработка всегда осуществляется на бумажном носителе, чтобы определить лучший вариант расположения типовых элементов. Т.к. страницы оформляются в едином стиле, то создается шаблон.
Написание кода. Создание Web-страниц, программирование, написание функциональной части.

Этапы создания сайта:
Тестирование. Проверяется удобство навигации, целостность данных, корректность ссылок и орфография: 1) альфа-версия – ошибки проверяют сами разработчики; 2) бета-версия – проверяют другие люди.
Публикация. Сайт размещается в Интернете. Можно воспользоваться бесплатным хостингом www.narod.ru, www.boom.ru, либо разместить сайт у провайдера.

Этапы создания сайта:
Раскрутка. Рекламная компания по узнаванию сайта и повышению его посещаемости – регистрация сайта в поисковых системах, обмен ссылками и.т.д.
Поддержка. Постоянное обновление сайта. (не реже 1 раза в 2 недели).

Элемент (element) — конструкция языка HTML.Это контейнер, содержащий данные и позволяющий отформатировать их определённым образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
Тег (tag) – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web- страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Атрибут (attribute) – параметр или свойство элемента. Это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в кавычки, но некоторые броузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Гиперссылка – фрагмент текста , который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Фрейм (frame) –этот термин имеет два значения. Первое- область документа со своими полосами прокрутки. Второе — одиночное изображение в сложном (анимационном) графическом файле (по аналогии с кадром кинофильма).
Примечание — вместо термина «фрейм» в специальной литературе и локализованных программных продуктах иногда можно встретить термин «кадр» или «рамка».
HTML – файл или HTML – страница – документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html. В гипертекстовых редакторах и броузерах эти файлы имеют общее название «документ».

Апплет (applet)- программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web- страницы.
Скрипт или сценарий (skript) – программа, включенная в состав Web- страницы для расширения её возможностей. Броузер Internet Explorer в определённых ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.
Расширение (extension) – элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.

CGI ( Common Gateway Interface) – общее название для программ, которые, работая на сервере, позволяют расширить возможности Web- страниц. Например, без таких программ невозможно создание интерактивных страниц.
Программный код или код – аналог понятия «текст программы».
Код HTML- гипертекстовой документ в своём первоначальном виде, когда видны все элементы и атрибуты.
World Wide Web, WWW или Web – Всемирная паутина, распределённая система доступа к гипертекстовым документам, существующая в Интернете, HTML является основным языком для создания документов в WWW. Изучая его, мы изучаем часть этой системы, хотя область применения языка намного шире.

Web – страница – документ (файл),подготовленный в формате гипертекста и размещённый в World Wide Web.
Сайт (site) – набор Web –страниц, принадлежащих одному владельцу.
Броузер (browser) – программа для просмотра Web – страниц.
Пользовательский агент (user agent) – броузер или другая программа, работающая на компьютере – клиенте.
Загрузка (downloading) – копирование файлов с сервера на компьютер – клиент.

Проектно-исследовательская работа «Создание Web – страниц c помощью языка гипертекстовой разметки HTML»

ТВОРЧЕСКИХ ПРОЕКТОВ И ИССЛЕДОВАТЕЛЬСКИХ РАБОТ

Секция: информационные технологии

Создание Web – страниц c помощью языка гипертекстовой разметки HTML

1.Web-сайты и Web-страницы

2.Основные теги HTML

4.Подключение графических объектов

8.Интерактивные формы на Web-страницах.

Список используемой литературы

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

Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.

Тема нашей работы

«Создание Web–сайта c помощью языка гипертекстовой разметки HTML».

разработать сайт с помощью языка HTML.

В процессе работы необходимо было решить следующие задачи:

Изучить основы языка HTML

Изучить основные способы создания Web – страниц

Продумать и спроектировать будующий сайт.

Собрать информацию, необходимую для верстки страниц сайта

Продумать внешний вид сайта

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

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

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

Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами. Web-страницы создаются с использованием языка разметки гипертекстовых документов. В обычный текстовый документ вставляются управляющие символы , которые определяют вид Web-страницы при просмотре в браузере.

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

Страницы сайтов- это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя. Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображённые страницы можно изменить добавлением стилей, что позволяет централизовать в определённом файле все элементы формирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

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

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

0 0 голоса

Рейтинг статьи

Оценка статьи:

Загрузка...