Мастер-класс Основы сайтостроения

Содержание

Слайд 2

Веб-сайт (от англ. «место в сети») - место в Интернете, которое

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

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

Программы для просмотра Web - страниц Microsoft Internet Explorer Netscape Communicator The Bat! Opera и т.д.

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

Microsoft Internet Explorer
Netscape Communicator
The Bat!
Opera и

т.д.
Слайд 4

Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день.

Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день.


Как же создаются web – страницы?

Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.

Слайд 5

Язык HTML (от англ. HyperText Markup Language) – это язык гипертекстовой

Язык HTML (от англ. HyperText Markup Language) – это язык гипертекстовой

разметки.

Язык гипертекстовой разметки HTML

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

Слайд 6

Пример

Пример

Слайд 7

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

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

Программы

для создания HTML – файлов:
Слайд 8

Структура HTML-файла заголовок окна … … …

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



заголовок окна


…
…
…


Слайд 9

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

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

Слайд 10

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

Заголовки

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

Слайд 11

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

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

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

Слайд 12

Абзац

Абзац

Слайд 13

Атрибуты абзаца - выравнивает абзац по левому краю - выравнивает абзац

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

<Р align=lef t> - выравнивает абзац по левому краю
<Р align=right>

- выравнивает абзац по правому краю
<Р align=center> - выравнивает абзац по центру
<Р align=justify> - выравнивает абзац по ширине
Слайд 14

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

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

Слайд 15

Специальные символы Некоторые символы, введенные в HTML документ будут интерпретироваться не

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

Некоторые символы, введенные в HTML документ будут интерпретироваться не

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

Таблица задаётся парой тегов ... . Между этими тегами задаются строки

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

...
.
Между этими тегами задаются строки таблицы,

тегов
...
Внутри строк задаются клетки (ячейки) таблицы, теги
...).

Создание таблиц

Слайд 17

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

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

border=1>

(1,1)
(1,2)


(2,1)
(2,2)


(3,1)
(3,2)


На экране эта таблица отображается так:

Слайд 18

Слайд 19

Слайд 20

Слайд 21

Атрибуты тэга : src - обязательный, значение- адрес изображения alt –

Атрибуты тэга :
src - обязательный, значение- адрес изображения

“dog.gif”>

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

Тэг

Вставка изображений

Слайд 22

align – выравнивание. Положение изображения лучше всегда указывать явно. Значения тега

align – выравнивание. Положение изображения лучше всегда указывать явно.
Значения тега align:
left,

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

Атрибуты тэга :

Слайд 23

ПРАКТИКА

ПРАКТИКА

Слайд 24

Задание Открыть файл КОЗЛЕНОК.txt.

Задание

Открыть файл КОЗЛЕНОК.txt.

Слайд 25

Создать Web-страницу, содержащую это стихотворение. Стих

Создать Web-страницу, содержащую это стихотворение.






<br><p>Стих<br><p>


Слайд 26

Сохранить Web-страницу с расширением html. (Файл/Сохранить как)

Сохранить Web-страницу с расширением html. (Файл/Сохранить как)

Слайд 27

Откроем полученный Web-сайт. Браузер Internet Explorer вывел стихотворение без переходов на

Откроем полученный Web-сайт.

Браузер Internet Explorer вывел стихотворение без переходов на

новую строку.

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

Слайд 28

Изменений HTML-файл будет выглядеть следующим образом. Вставим тег .

Изменений HTML-файл будет выглядеть следующим образом.

















Вставим тег
.

Слайд 29

Сохраняем с внесёнными изменениями. Закрываем полученный документ.

Сохраняем с внесёнными изменениями.

Закрываем полученный документ.

Слайд 30

Снова открываем Web-страницу. Чтобы увидеть внесённые изменения, страницу нужно обновить. ОБНОВЛЕНИЕ

Снова открываем Web-страницу.
Чтобы увидеть внесённые изменения, страницу нужно обновить.

ОБНОВЛЕНИЕ

I способ
В Строке

меню выбрать
Вид→Обновить
Слайд 31

Теперь наша Web-страница выглядит лучше. Добавим на страницу цветной фон. Для

Теперь наша Web-страница выглядит лучше.

Добавим на страницу цветной фон.
Для этого

в теге допишем атрибут bgcolor с указанием цвета.

Например:

Слайд 32

bgcolor=pink Не забудьте сохранить файл и обновить страницу.

bgcolor=pink

Не забудьте сохранить файл и обновить страницу.

Слайд 33

Вот наша Web-страница. Сделаем текст стихотворения цветным. Для этого в теге

Вот наша Web-страница.

Сделаем текст стихотворения цветным. Для этого в

теге допишем атрибут text с указанием цвета.

Например:

Слайд 34

text=blue Не забудьте сохранить файл и обновить страницу.

text=blue

Не забудьте сохранить файл и обновить страницу.

Слайд 35

Наша Web-страница преобразилась. Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом .

Наша Web-страница преобразилась.

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

этого воспользуемся парным тегом .
Слайд 36

Не забудьте сохранить файл и обновить страницу.



Не забудьте сохранить файл и обновить страницу.

Слайд 37

Теперь наша Web-страница выглядит лучше. Добавим на нашу Web-страницу картинку. Нам

Теперь наша Web-страница выглядит лучше.

Добавим на нашу Web-страницу картинку. Нам

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

Например:

Слайд 38

Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с

Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка

с козлёнком называется 248.gif


Не забудьте сохранить файл и обновить страницу.

Слайд 39

Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри

Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться

внутри парного тега .

Например:


Задание. Сделайте бегущей строкой название стихотворения и изображение козлёнка

Слайд 40

Не забудьте сохранить файл и обновить страницу.





Не забудьте сохранить файл и обновить страницу.

- Предыдущая
Lonic CLI
Следующая -
Готовность обучающихся к ГИА по физике

Похожие презентации

Операции реляционной алгебры
Creative presentation template
Формальная постановка комбинаторно-оптимизационных задач. (Тема 3)
Rynkl - сервис для отслеживания состояния кожи на основе машинного обучения
Условный оператор. Инструкция if. Множественное ветвление
Строковые функции в Visual Basic ГБОУ СОШ №143 Санкт-Петербург Предмет: Информатика и ИКТ Электронные ресурсы Программа: 10 класс Разра
Системы мониторинга и управления ресурсами (СМУР)
Основные понятия ACCESS. Назначения и возможности
Компьютерные сети
Использование компьютерного зрения в ИТС
Работа_в_REDMINE_
Динамическое программирование
Электронные архивы проектно-технологической документации. Интегрированная система ТЕХНО
Операционные системы. Введение (часть 1)
Когда Grammar не проблема
Крестики-нолики. Графический редактор Paint
75 лет победы. Шаблон сайта
Правила оформления презентации
Analyst Documentation
Использование графов при решении задач
Wi-FIT PROJECT
Классификация языков программирования
Н.Г. Угринович. 8 класс. § 1.3.1
Системы счисления
Инструкция к элементу Задание (1)
Презентация "Устройства ввода - вывода" - скачать презентации по Информатике
Безопасный Интернет – детям!
Оператор ветвления (условный оператор)
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть