Презентация на тему "Основы сайтостроения"

Содержание

• 
  Слайд 1

  «Основы сайтостроения»

• 
  Слайд 2

  Основные понятия Web-дизайна

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

• 
  Слайд 3
  

  Веб-сайт (от англ. «место в сети») - место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.

• 
  Слайд 4

  Программы для просмотра Web - страниц

  Примеры браузеров: Internet Explorer, Mozilla Firefox Opera Google Chrome. Веб-обозреватель, браузер (от англ.Web browser)

• 
  Слайд 5

  Этапы создания сайта

  Определение цели создания сайта Выбор темы сайта Определение содержания сайта Построение структуры сайта Разработка дизайна сайта Регистрация и размещение сайта в Интернете

• 
  Слайд 6
  

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

• 
  Слайд 7
  

  Язык HTML (от англ. HyperText Markup Language) – это язык гипертекстовой разметки. Язык гипертекстовой разметки HTML HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.

• 
  Слайд 8
  

  Пример

• 
  Слайд 9

  Программы для создания HTML – файлов:

  Блокнот (для создания страницы) Internet Explorer (для интерпретации файлов)

• 
  Слайд 10
  

  Структура HTML-файла

  заголовок окна … … …
• 
  Слайд 11

  Цвет фона, цвет шрифта

• 
  Слайд 12
  

  Заголовки HTML поддерживает заголовки шести уровнейпри помощи конструкции:

• 
  Слайд 13

  Линия Простейший графический элемент, который умеет строить браузер.

  Бегущая строка

• 
  Слайд 14

  Абзац

• 
  Слайд 15

  Атрибуты абзаца

  - выравнивает абзац по левому краю - выравнивает абзац по правому краю - выравнивает абзац по центру - выравнивает абзац по ширине
• 
  Слайд 16

  Оформление текста

• 
  Слайд 17

  Специальные символы

  Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы "", используемые для указания тегов. В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа "амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;).

• 
  Слайд 18
  

  Таблица задаётся парой тегов

  .... Между этими тегами задаются строки таблицы, тегов ... Внутри строк задаются клетки (ячейки) таблицы, теги ...). Создание таблиц
• 
  Слайд 19
  

  Пример задания таблицы, состоящей из трёх строк и двух столбцов:

  (1,1) (1,2) (2,1) (2,2) (3,1) (3,2) На экране эта таблица отображается так:
• 
  Слайд 20
  
• 
  Слайд 21
  
• 
  Слайд 22
  
• 
  Слайд 23
  

  Атрибуты тэга: src - обязательный, значение- адрес изображения alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt– строка текста, длиной до 1024 символа. Кавычки обязательны. alt= “Собака на сене“ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку. Тэг Вставка изображений

• 
  Слайд 24
  

  align– выравнивание. Положение изображения лучше всегда указывать явно. Значения тега align: left, right– по левому или по правому краю. top– верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке. middle– середина изображения выравнивается с серединой строки. bottom– (по умолчанию) нижний край изображения выравнивается с базовой линией текста. border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения border= толщина рамки в пикселях border=0 – убрать рамку height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношениюк окну. width = “100%” height= 20 – полоса на все окно шириной 20 пикселей. Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width. hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали. Атрибутытэга: