Steve's website
Presentation
•
Computers
•
2nd Grade
•
Hard
Edukoht Edukohter
Used 17+ times
FREE Resource
65 Slides • 1 Question
1
Steve's website
2
Знакомство с HTML
3
Что такое теги?
Тег - это команда, которую отображает браузер.
4
Как выглядит тег?
<h1>Текст</h1> - парный тег
<br> - одинарный тег
5
6
Что можно добавить в теги?
В теги можно добавить атрибуты. Данные элементы дают дополнительную информацию нашему тегу.
Пример:
<img src="ссылка на картинку">
src - это атрибут, в котором мы указываем ссылку на картинку, которая будет отображаться в браузере.
7
8
Начинаем программировать
Но для начала нужно создать аккаунт на https://repl.it/
Для этого открой инструкцию, которая сейчас появится в чате :)
9
А куда же писать эти теги?
<html> - главный контейнер нашего сайта (босс)
Его подчинённые - элементы: <head> и <body>
В элементе <head> находятся все инструкции для нашего сайта. Например какой язык используются на сайте.
В элементе <body> будут находится все наши визуальные элементы. То-есть наши теги мы будем писать именно туда :)
10
Наши первые теги
Заходим во вкладку «index.html»
Создаем тег «h1» в элементе «body» и пишем туда название нашего сайта.
Пример:
Можно написать «Minecraft», «Привет, я Стив!» или что-то другое
11
12
Наша первая картинка
Чтобы создать картинку, тебе нужно воспользоваться тегом «img» и атрибутом «src»
Пример:
<img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png">
13
А какие еще бывают заголовки?
В HTML у нас есть шесть видов заголовков:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
14
Попробуй сам!
Создай заголовок «h3»
Напиши туда вот такой текст «Здесь немного информации обо мне:»
15
16
Знакомимся с тегом абзаца
Чтобы создать абзац нужно воспользоваться тегом «p»
Внутри укажи какой-нибудь текст
Пример:
«Я самый сильный герой мира Minecraft.
Я люблю строить замки, сражаться с монстрами и крафтить алмазные доспехи!»
17
18
А как можно перенести предложение на новую строчку?
Чтобы перенести текст на новую строчку, нам нужно воспользоваться тегом «br»
Попробуй добавить этот тег после первого предложения.
Если в твоем проекте только одно слово, то добавь этот тег после первой буквы :)
19
20
А теперь попробуй сам
Создай еще один тег «p» и укажи туда вот такой текст:
«Мои враги:»
21
22
Познакомимся со списками
Чтобы создать список с точечками, мы должны воспользоваться тегом «ul»
23
24
А как добавить элементы?
Чтобы заполнить наш список, нам нужно воспользоваться тегом «li» внутри элемента «ul»
Пример:
<ul>
<li>Скелет</li>
</ul>
25
26
Попробуй сам
Добавь еще два элемента «li» с названиями:
«Криппер», «Паук»
27
28
Как сделать курсивный шрифт?
Чтобы сделать наш текст курсивным, мы можем воспользоваться тегом «em»
Попробуй воспользоваться этим тегом и написать туда вот такой текст:
«Моя любимая еда:»
29
30
Списки с циферками
Чтобы создать список с цифрами, мы можем воспользоваться тегом «ol»
31
32
Multiple Choice
Как ты думаешь, при помощи какого тега мы можем добавить элементы в список с циферками?
<li>
<ul>
<p>
<h1>
33
Попробуй сам
Добавь в список с циферками два элемента «li» с названиями:
«Мясо», «Рыба»
34
35
Познакомимся с ссылками
Чтобы ее создать, мы должны воспользоваться тегом «a» и атрибутом «href»
Пример:
<a href="ссылка на сайт">Это мой создатель 😍!</a>
36
37
Попробуй сам
Создай тег «br»
38
39
Как же вставить видео?
Чтобы вставить видео, надо перейти на сайт «youtube.com»
После этого найди какое-нибудь видео
40
Как же вставить видео?
После этого нажми на него правой кнопкой мыши и выбери пункт «копировать html-код»
Вставь скопированный код в редактор кода :)
41
42
A где же красота?
43
Знакомство с CSS
Чтобы сделать наш сайт красивым, мы воспользуемся языком каскадных таблиц (CSS)
PS: Едукохтеры часто называют его «КСС» ;)
44
Селекторы
В CSS мы должны использовать специальную конструкцию, которая будет указывать какой именно элемент мы хотим украсить. Сегодня мы познакомимся с селектором «имя тега»
45
Сделаем наш заголовок другого цвета!
Чтобы поменять цвет заголовка, мы должны обратиться к нему в CSS
Для этого просто укажем имя тега - «h1»
46
47
Сделаем наш заголовок другого цвета!
После этого мы должны указать вот такие скобки - {}
Эти символы будут показывать какие CSS-свойства относятся к какому элементу.
Поставь эти скобочки после названия «h1»
48
49
Сделаем наш заголовок другого цвета!
Внутри фигурных скобочек мы должны указать CSS-свойство «color»
Потом поставить двоеточие и после этого указать цвет, в который будет покрашен наш текст.
color: red/green/blue/#1abc9c
50
51
Попробуем добавить рамку нашей фотографии
Для добавления рамки мы воспользуемся CSS-свойством «border»
Но чтобы наша рамка заработала, нам нужно указать еще значения этого свойства.
Пример:
border: 2px solid black
2px - размер рамки
solid - тип рамки (_____)
black - цвет рамки
52
53
Сделаем все по центру
Чтобы поставить все строчные элементы по центру, мы можем воспользоваться CSS-свойством «text-align» со значением «center»
Это свойство нужно указать у элемента «body»
54
55
Проблема
Почему наши точки и цифры от наших списков не встали по центру?
Дело в том, что элементы «ol» и «ul» являются блочными, поэтому применение свойства «text-align:center» никак не влияет на них
56
Как это исправить?
Чтобы убрать эту проблему, мы должны воспользоваться свойством «display» со значением «inline-block»
Укажи это свойство у элементов: «ul» и «ol»
57
58
Еще одна проблема
59
Как это исправить?
Надо поставить тег «br» перед тегом «em» и после него.
60
61
Попробуем поменять заданий фон
Чтобы поменять задний фон у нашего сайта, мы можем воспользоваться CSS-свойством «background-color»
Указать это свойство нужно у элемента «body»
62
63
Что-то необычное
Мы можем изменять CSS-свойства элемента при наведении мышки на него.
Для этого надо воспользоваться псевдо-классом «hover»
Пример:
Если мы хотим изменить цвет заголовка «h1», то пишем
h1:hover{
color: blue;
}
64
65
Что-то необычное
Попробуем теперь сделать переворот нашей картинки при наведении на нее мышкой.
Для этого пишем вот такой код:
img:hover{
transform: rotate(360deg);
transition: 2s;
}
66
Steve's website
Show answer
Auto Play
Slide 1 / 66
SLIDE
Similar Resources on Wayground
58 questions
Binary Lesson 1
Presentation
•
1st Grade
61 questions
5-25
Presentation
•
2nd Grade
61 questions
Review 3rd Grade T1 2023
Presentation
•
3rd Grade
57 questions
Energy Conversion
Presentation
•
3rd Grade
58 questions
FF3 Review U1-3
Presentation
•
2nd Grade
63 questions
02.07.2025_4.7C/E_Williams_Math
Presentation
•
4th Grade
57 questions
tinhk1
Presentation
•
KG
60 questions
ilkokul slayt
Presentation
•
1st Grade
Popular Resources on Wayground
20 questions
STAAR Review Quiz #3
Quiz
•
8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
12 questions
What makes Nebraska's government unique?
Quiz
•
4th - 5th Grade
Discover more resources for Computers
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
17 questions
2nd Grade Graphs (Bar & Picture)
Quiz
•
2nd Grade
15 questions
Telling Time
Quiz
•
2nd Grade
10 questions
Telling Time to the Nearest 5 Minutes
Quiz
•
2nd Grade
30 questions
Multiplication Facts 1-12
Quiz
•
2nd - 5th Grade
14 questions
Main Idea
Quiz
•
2nd - 3rd Grade
16 questions
Counting Coins counting money
Quiz
•
1st - 2nd Grade
10 questions
Telling Time
Quiz
•
2nd Grade