10 первых шагов в мир Web-дизайна. (Учимся создавать сайт на HTML, понятие CSS)

Сентябрь 12, 2022

Главная
Алгебра
10 первых шагов в мир Web-дизайна. (Учимся создавать сайт на HTML, понятие CSS)

Содержание

2. Введение Что такое HTML Что бы представить информацию для размещения в сети Интернет, нужен универсальный язык,
3. Основные теги и структура HTML-документа Все тэги HTML начинаются с (правой угловой скобки). Как правило, существует
4. Список базовых тэгов HTML
5. Сделаем сайт только средствами HTML Шаг 1: Пишем и форматируем текст Создаем файл *.txt и вписываем
6. Второй шаг: Вставка рисунков На странице фотоархива, созданной на следующем шаге вставить фотографии. При этом фотографии
7. Третий шаг: Создание гиперссылок. Для этого мы создаем копии нашей страницы и вписываем новый блок. Общий
8. Четвертый шаг: Списки. Дописываем основную информацию на главной странице, и начнем дополнять остальные. Список базовых тэгов
9. Пятый шаг: Таблицы Таблицы представляют собой особую часть HTML-документа.Данные в них организованы в виде прямоугольной сетки,
10. Шестой шаг: Формы. Создадим анкету на одной из страниц. Анкета Пожалуйста, введите ваше имя: E-mail: Укажите
11. Седьмой шаг: Фреймы Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях: 1.При необходимости
12. Восьмой шаг. Мультимедиа (Звук и видео). Добавим на страницу проигрыватель. Для хранения музыки также создаем папку.
13. Девятый шаг: Понятие Flash-анимация (её виды). С помощью Flash можно создавать анимированые изображения различного типа -
14. Десятый шаг. Понятие CSS. CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами,
16. Скачать презентацию

Слайд 2

Введение Что такое HTML
Что бы представить информацию для размещения в сети Интернет,

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

Слайд 3

Основные теги и структура HTML-документа
Все тэги HTML начинаются с < (левой

угловой скобки) и заканчиваются символом > (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:
Заголовок документа

Слайд 4

Список базовых тэгов HTML

Слайд 5

Сделаем сайт только средствами HTML Шаг 1: Пишем и форматируем текст
Создаем

файл *.txt и вписываем в него первый блок тегов, и сохраняем его формате HTML - *.html.

Информационно-технологический профиль

Сайт информационно-технологического профиля

МБОУ СОШ №9 г.Нерчинска

Добро пожаловать на нашу страницу!

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

Слайд 6

Второй шаг: Вставка рисунков
На странице фотоархива, созданной на следующем шаге вставить

фотографии. При этом фотографии желательно хранить в отдельной папке, которая находится в папке сайта!

Общий формат изображений
Выравнивание по верху

Выравнивание по середине
Выравнивание по низу
Задание альтернативного текста

Слайд 7

Третий шаг: Создание гиперссылок.
Для этого мы создаем копии нашей страницы и

вписываем новый блок.

Общий формат гиперссылки Текст гиперссылки
Закладка на данной HTML-странице Текст закладки
Гиперссылка на закладку Текст гиперссылки
Электронная почта Текст гиперссылки
Файл (или каталог)FTP Текст гиперссылки

Слайд 8

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

остальные.

Список базовых тэгов HTML (списки):
Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
1. Неупорядочные списки (Тег

Слайд 9

Пятый шаг: Таблицы
Таблицы представляют собой особую часть HTML-документа.Данные в них организованы

в виде прямоугольной сетки, состоящей из столбцов и рядов

- таблица
- строка
- ячейка
Некоторые дополнительные метки расширения HTML:
- Размер рамки таблицы
- Ширина таблицы

- Ширина клетки таблицы

- Интервал клетки таблицы
- Заполнение клетки таблицы

Слайд 10

Шестой шаг: Формы.
Создадим анкету на одной из страниц.
Анкета

Пожалуйста, введите

ваше имя:

E-mail:

Укажите к какой группе пользователей вы себя относите:

Учащийся

Студент

Учитель

И так далее……….

Слайд 11

Седьмой шаг: Фреймы
Выбор фреймовой структуры отображения информации на WWW оправдан

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

Слайд 12

Восьмой шаг. Мультимедиа (Звук и видео).
Добавим на страницу проигрыватель. Для хранения

музыки также создаем папку.

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

Слайд 13

Девятый шаг: Понятие Flash-анимация (её виды).
С помощью Flash можно создавать анимированые

изображения различного типа - от простейших «живых» кнопок, до сложных мультипликаций.
Во Flash анимации предусмотренно три различных механизма анимации обьектов:
Покадровая (классическая) анимация.
При просмотре последовательности кадров возникает иллюзия оживления изображенных предметов.
Анимация с заполнением кадров (Tweened Animation).
Создается только первый и последний кадры Flash-фильма, а программа автоматически заполняет кадры из определенного промежутка, заключенного между двумя ключевыми кадрами.
Анимация на основе сценариев.
Сценарий - описания поведения объекта на собственном языке ActionScript.

Слайд 14

Десятый шаг. Понятие CSS.
CSS это язык стилей, определяющий отображение HTML-документов. Например,

CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами
HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).
С появлением каскадных таблиц стилей (CSS - Cascading Style Sheets) можно отделить структуру документа, описанную на языке HTML, от правил отображения этого документа.

10 первых шагов в мир Web-дизайна. (Учимся создавать сайт на HTML, понятие CSS)

Содержание

Введение Что такое HTMLЧто бы представить информацию для размещения в сети Интернет,

Основные теги и структура HTML-документаВсе тэги HTML начинаются с < (левой

Список базовых тэгов HTML

Сделаем сайт только средствами HTML Шаг 1: Пишем и форматируем текст Создаем

Сайт информационно-технологического профиля

МБОУ СОШ №9 г.Нерчинска

Добро пожаловать на нашу страницу!

Второй шаг: Вставка рисунковНа странице фотоархива, созданной на следующем шаге вставить

Третий шаг: Создание гиперссылок.Для этого мы создаем копии нашей страницы и

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

Пятый шаг: ТаблицыТаблицы представляют собой особую часть HTML-документа.Данные в них организованы

Шестой шаг: Формы. Создадим анкету на одной из страниц.АнкетаПожалуйста, введите

Анкета

Седьмой шаг: Фреймы Выбор фреймовой структуры отображения информации на WWW оправдан

Восьмой шаг. Мультимедиа (Звук и видео).Добавим на страницу проигрыватель. Для хранения

Девятый шаг: Понятие Flash-анимация (её виды).С помощью Flash можно создавать анимированые

Десятый шаг. Понятие CSS.CSS это язык стилей, определяющий отображение HTML-документов. Например,

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