Выдаём удостоверения и дипломы установленного образца

Получите 5% кэшбэк!

Запишитесь на один из 793 курсов и получите 5% кэшбэк стоимости курса на карту

Выбрать курс
Инфоурок Информатика ПрезентацииПрезентация по информатике на тему "Мой первый сайт"

Презентация по информатике на тему "Мой первый сайт"

Скачать материал
библиотека
материалов
24.05.2014 Главное управление образования и молодежной политики Алтайского кр...

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

1 слайд 24.05.2014 Главное управление образования и молодежной политики Алтайского кр
Описание слайда:

24.05.2014 Главное управление образования и молодежной политики Алтайского края КГБОУ СПО «Алтайский строительный техникум» Специальность: «Монтаж, наладка и эксплуатация электрооборудования промышленных и гражданских зданий и сооружений»

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

Рассмотреть основные способы создания сайтов; Изучить основы языка гипертекстовой разметки документов; Научиться создавать сайт с помощью блокнота. 2

3 слайд Создание сайта в Интернете бесплатно используя для этого специальные бесплатн
Описание слайда:

Создание сайта в Интернете бесплатно используя для этого специальные бесплатные сервисы и платформы. Создание сайта самому с помощью конструктора сайтов, который позволяет объединить все этапы создания сайта в один пакет. Заказ изготовления сайта дизайнерской web-студии. Стоимость сайта будет зависеть от целей, которые он должен будет преследовать. Изучении основ html, свойств css и дальнейшем самостоятельном создании сайта на html. 1 2 3 4 3

4 слайд HTML (HyperText Markup Language) - язык гипертекстовой разметки документов. Н
Описание слайда:

HTML (HyperText Markup Language) - язык гипертекстовой разметки документов. Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора. Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку. Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. Примером непарного тега является <hr> - тег вставки в HTML документ горизонтальной линии. В качестве примера парного тега можно привести тег <html></html>, этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа "/", однако первая часть тега может содержать и дополнительные параметры. Например в теге <font size="4" color="red"></font>, параметр size="4" определяет размер текста, а color="red" задает цвет. 4

5 слайд 5
Описание слайда:

5

6 слайд Обязательные теги языка HTML Любой HTML документ должен содержать следующие т
Описание слайда:

Обязательные теги языка HTML Любой HTML документ должен содержать следующие теги <html></html>, <head></head>, <body></body>, <title></title>. Внутри тега <head></head> располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами). Тело HTML документа Заголовки Заголовки в языке HTML выделяются тегами <h1></h1>, <h2></h2>, ... , <h6></h6>. Таким образом существует 6 уровней заголовков h1 – самый крупный шрифт, h6 – самый маленький. Абзацы в языке HTML Абзац в HTML документе заключается в тег <P></P>. Выделение текста в HTML Для выделения текста, или области текста в HTML используют теги <b></b>, <i></i>, <u></u>, таким образом строка <b>жирный</b>, <i>курсив</i>, <u>подчёркнутый</u>, <u><i><b>жирный подчёркнутый курсив</b></i></u> Маркированные списки в HTML Ненумерованные списки прописывают в HTML коде следующим образом <UL><LI>пункт 1<LI>пункт 2<LI>пункт 3</UL>. Нумерованные списки в HTML Нумерованные списки прописывают следующими тегами <OL><LI>пункт 1<LI>пункт 2<LI>пункт 3</OL>. 6

7 слайд Гиперссылки Гиперссылка в языке HTML прописывается тегом . Например запись ви
Описание слайда:

Гиперссылки Гиперссылка в языке HTML прописывается тегом <a></a>. Например запись вида <a href="html.rar">Скачать учебник языка HTML</a> Параметр href определяет место документа на который ссылается ссылка, в нашем примере ссылка относительная она ссылается на документ html.rar расположенный в той же директории что и страница HTML. Абсолютная ссылка прописывается следующим образом <a href="http://webdesign.net-soft.ru/html.rar">Скачать учебник языка HTML</a> Правила расстановки относительных ссылок в языке HTML Если документ на который ссылается ссылка расположен в директории (папке) на уровень ниже, скажем dir, то ссылка параметр href будет иметь вид href="dir/html.rar" , а если документ расположен в директории на уровень выше, то нам необходимо будет записать href="../html.rar". Вставка рисунков в HTML страницу Рисунок в HTML документ вставляется следующим образом <img src="ris.jpg" width="100" height="140" alt="Учебник по языку HTML">. Параметр src задаёт путь к изображению, параметры width и height определяют ширину и высоту рисунка в пикселях, параметр alt задаёт альтернативный текст - тот текст который отображается в браузере если отключена загрузка графики. 7

8 слайд Таблицы в языке HTML Таблицы в HTML документ вставляются следующим образом  Я
Описание слайда:

Таблицы в языке HTML Таблицы в HTML документ вставляются следующим образом <table border="1" style="border-collapse: collapse" bordercolor="#111111"> <tr><td>Ячейка11<td>Ячейка12</tr> <tr><td>Ячейка21<td>Ячейка22</tr> </table> Таблицу открывает и закрывает тег <table></table>, тег <tr></tr> - определяет столбец, одиночный тег <td> определяет ячейку в столбце, таким образом представленный код прописывает таблицу размером 2х2. Теги style и bordercolor определяют соответственно стиль отображения таблицы и цвет границы. Добавление комментариев в HTML-код Внесение комментариев в html-код страницы - это удобное средство для понимания написанного кода. Текст комментария должен быть заключен между открывающим <!-- и закрывающим --> разделителями. Текст, заключенный между такими скобками, браузером не воспринимается и на экране не отображается. 8

9 слайд Тег  Атрибуты в HTML Атрибуты содержат в себе дополнительную информацию о эле
Описание слайда:

Тег <font> Атрибуты в HTML Атрибуты содержат в себе дополнительную информацию о элементе. Атрибуты всегда указываются в открывающем теге. Синтаксис атрибутов таков: название_атрибута="значение" Атрибуты позволяют сделать текст на странице более наглядным. Например, они могут выравнить текст нужным образом, увеличить его, поменять цвет и т.д. < H1 align=CENTER >Выравнивание текста по центру</H1> < H1 align=RIGHT >Выравнивание текста по правому краю</H1> < H1 align= LEFT >Выравнивание текста по левому краю< /H1> 9

10 слайд На рабочем столе в папке «Студенческие работы», найдите свою папку и создайте
Описание слайда:

На рабочем столе в папке «Студенческие работы», найдите свою папку и создайте в ней папку «Мой первый сайт»; В левом нижнем углу монитора нажмите кнопку «Пуск», затем - «Все программы» – «Стандартные» - «Блокнот» 10

11 слайд Сохраните по указанному пути с именем файла glavnay.html 11
Описание слайда:

Сохраните по указанному пути с именем файла glavnay.html 11

12 слайд В папке «Мой первый сайт» появится соответствующий значок. 12 Для того чтобы
Описание слайда:

В папке «Мой первый сайт» появится соответствующий значок. 12 Для того чтобы отредактировать сайт, нажмите 1 раз правой кнопкой мыши на значок и в контекстном меню выберите «Открыть с помощью» – «Блокнот». Для просмотра нажмите 2 раза левой кнопкой мыши на значок, и результат вашей работы отобразится в браузере.

13 слайд Вы являетесь автором сайта, поэтому его тему, внутреннее содержание и оформле
Описание слайда:

Вы являетесь автором сайта, поэтому его тему, внутреннее содержание и оформление разрабатываете самостоятельно. В качестве примера можно рассмотреть создание сайта «ЖЕНСКОЕ ЛИЦО КОСМОНАВТИКИ» Откройте с помощью Блокнота файл «glavnay.html» и запишите следующие теги (Бледно желтым выделены комментарии, вы их не пишите, просто обращаете внимание какой тег за что отвечает). 13 Вводите свое название страницы РЕГУЛЯРНО СОХРАНЯЙТЕ!!!

14 слайд В папку «Мой первый сайт» скопируйте рисунки и фотографии необходимые для офо
Описание слайда:

В папку «Мой первый сайт» скопируйте рисунки и фотографии необходимые для оформления вашего сайта. 14 Продолжаем редактировать теги сайта. Вставим картинку и заголовок.

15 слайд Можете просмотреть промежуточный результат нажав 2 раза левой кнопкой мыши на
Описание слайда:

Можете просмотреть промежуточный результат нажав 2 раза левой кнопкой мыши на файл «glavnay.html», и результат вашей работы отобразится в браузере. 15 Если цвет фона или заголовка вас не устроили, вернитесь в блокнот и поэкспериментируйте с другими цветами.

16 слайд Создадим гиперссылки. В папке «Мой первый сайт» создайте страницы блокнота: g
Описание слайда:

Создадим гиперссылки. В папке «Мой первый сайт» создайте страницы блокнота: gipperssilka1.html, gipperssilka2.html, gipperssilka3.html, gipperssilka4.html. Страниц необходимо столько, сколько вы запланировали гиперссылок. 16 Продолжаем редактировать теги сайта. Вставим гиперссылки.

17 слайд Вставляем цвет бордового цвета и еще одну картинку. 17 Главная страница готов
Описание слайда:

Вставляем цвет бордового цвета и еще одну картинку. 17 Главная страница готова. Можете просмотреть результат нажав 2 раза левой кнопкой мыши на файл «glavnay.html», и результат вашей работы отобразится в браузере.

18 слайд 18
Описание слайда:

18

19 слайд Открывает файл «gipperssilka1.html» с помощью блокнота и записывает теги. 19
Описание слайда:

Открывает файл «gipperssilka1.html» с помощью блокнота и записывает теги. 19 Смотрим результат.

20 слайд 20 При желании можете вставить картинку.
Описание слайда:

20 При желании можете вставить картинку.

21 слайд Открывает файл «gipperssilka2.html» с помощью блокнота и записывает теги. 19
Описание слайда:

Открывает файл «gipperssilka2.html» с помощью блокнота и записывает теги. 19 Открывает файл «gipperssilka2.html» с помощью блокнота и записывает теги. Смотрим результат.

22 слайд 20 При желании можете вставить картинку.
Описание слайда:

20 При желании можете вставить картинку.

23 слайд Открывает файл «gipperssilka3.html» с помощью блокнота и записывает теги. 19
Описание слайда:

Открывает файл «gipperssilka3.html» с помощью блокнота и записывает теги. 19 Смотрим результат.

24 слайд 20
Описание слайда:

20

25 слайд Открывает файл «gipperssilka4.html» с помощью блокнота и записывает теги. 19
Описание слайда:

Открывает файл «gipperssilka4.html» с помощью блокнота и записывает теги. 19

26 слайд 20
Описание слайда:

20

27 слайд Сайт «Хочу все знать», статья «Основы языка HTML», http://sheiko28.narod.ru/i
Описание слайда:

Сайт «Хочу все знать», статья «Основы языка HTML», http://sheiko28.narod.ru/index/0-71; Сайт «Веб-школа», раздел «HTML», http://www.weblabla.ru/html/html_main.html; Сайт «Новосибирск», раздел «Как создать сайт самому», http://novosibirsk.cc/help/site/; Сайт «Munasipov cайтостроение от А до Я», уроки создания сайта, http://munasipov.jimdo.com/%D1%83%D1%80%D0%BE%D0%BA%D0%B8-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D1%81%D0%B0%D0%B9%D1%82%D0%B0/; Сайт «Дом, который построил Джек», раздел «Строим», подраздел «Создание УР», статья «Описание основ HTML», http://uchresours.narod.ru/html.htm и статья «Блокнот», http://uchresours.narod.ru/notepad.htm. 20

  • Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
    Пожаловаться на материал
Курс повышения квалификации
Курс профессиональной переподготовки
Учитель математики и информатики
Курс профессиональной переподготовки
Учитель информатики
Скачать материал
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Общая информация
Учебник: «Информатика (базовый уровень)», Семакин И.Г., Хеннер Е.К., Шеина Т.Ю.
Тема: § 13. Инструменты для разработки web-сайтов

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

Скачать материал

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

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.