Создание первой страницы сайта презентация

Содержание

Слайд 2

Вид первой страницы

Вид первой страницы

Слайд 3

1) В папке Сайт 9 создать текстовый документ 2) Зайти в блокнот

1) В папке Сайт 9 создать текстовый документ

2) Зайти в

блокнот
Слайд 4

Интернет 3) На английской раскладке клавиатуры напечатать текст?



Интернет

3) На английской раскладке клавиатуры напечатать текст?

Слайд 5

Интернет закрываем тег закрываем тег Где увидим открываем тег, который



Интернет <br> закрываем тег
закрываем тег
Где увидим

открываем тег, который указывает программе просмотра страниц, что это HTML документ. (парный тег)

открываем тег, в котором располагается тег названия документа и теги для поисковых машин. (парный тег)

<br>Помещает название документа в оглавление программы просмотра страниц (парный тег) <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-5.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="4) Продолжаем печатать текст ? Устанавливает цвет фона документа, используя" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/55255/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/55255/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/55255/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>4) Продолжаем печатать текст ?<br><p><body bgcolor=aaffff><br><p><body bgcolor=------> <br>Устанавливает цвет фона документа, используя</div></h2><div class="slides-content">значение цвета в стандарте RGB - пример: FFFF00 - желтый цвет. (парный тег) <br><p>bgcolor= -- -- --<br><p> bgcolor=<br>Устанавливает цвет фона документа, используя значение цвета в стандарте RGB в шестнадцатеричной системе счисления - пример: FFFF00 - желтый цвет. Код цвета печатаете на английской раскладке (парный тег) <br>У нас с вами aaffff R 10 10 G 15 15 B 15 15 это голубой цвет <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-6.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/55255/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/55255/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/55255/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><body bgcolor=aaffff><br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-7.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Хотите увидеть результат вашего труда? Перейдите на следующую страницу и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/55255/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/55255/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/55255/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/55255/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Хотите увидеть результат вашего труда?<br>Перейдите на следующую страницу и выполните четко</div></h2><div class="slides-content">следующие действия.<br><p><html><br><head><br><title>Интернет


Что у вас в данный момент напечатано на листе

Слайд 9

В Меню Файл Сохранить как… В окне имя файла пишите

В Меню Файл
Сохранить как…
В окне имя файла пишите 1.html (

точка тоже на английской раскладке)
Закрываете документ и в папке Сайт 9 видите значок, отображаете вашим Браузером. Откройте его и посмотрите. Должны увидеть пустую страничку голубого цвета. Вверху ярлычок Интернет.

Не закрывайте, а сверните страничку вниз. А мы продолжим далее.

5) Продолжаем работать?

Слайд 10

Компьютерные сети Щелкаем по ярлычку странички в вашей папке Сайт


Компьютерные сети



Щелкаем по ярлычку странички в

вашей папке Сайт 9 (не Блокнота) правой клавишей мыши и в контекстном меню выберем Открыть с помощью – выберите программу Текстовый документ (Блокнот). И продолжаем печатать.

6) Продолжаем работать?

Слайд 11

Компьютерные сети Открываем парный тег Устанавливает цвет текста, используя значение


Компьютерные сети



Открываем парный тег


Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Закрываем парный тег


Создает САМЫЙ БОЛЬШОЙ заголовок (как отдельный абзац)

является парным тегом
align="center" это атрибут тега для выравнивания заголовка по центру.
Слайд 12

Хотите увидеть результат вашего труда? Сверните документ. Откройте страницу сайта

Хотите увидеть результат вашего труда? Сверните документ.
Откройте страницу сайта (она у

вас внизу на Панели задач) и обновите страничку. Что видите?



Интернет


Что у вас в данный момент напечатано на листе


Компьютерные сети



Слайд 13

Слайд 14

История любой отрасли науки и техники позволяет не только удовлетворить


История любой отрасли науки и техники позволяет не только

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

7) Продолжаем печатать текст ?

Текст не печатаете сами, а копируете из документа 1.doс (он у вас тоже в папке Сайт 9)

Слайд 15

Вы уже встречались с тегом (шрифт) Устанавливает текст, только теперь



Вы уже встречались с тегом (шрифт)
Устанавливает текст, только

теперь атрибуты тега align="left" (выравнивание текста по левому краю) size=6 ( размер шрифта)

Закрываем парный тег

Хотите увидеть результат вашего труда? Сверните документ.
Откройте страницу сайта (она у вас внизу на Панели задач) и обновите страничку. Что видите?

Слайд 16

Слайд 17

8) Давайте вставим картинку. Продолжаем печатать текст ? Элемент Атрибут


8) Давайте вставим картинку. Продолжаем печатать текст ?

Элемент

Атрибут src задает путь к изображению. (так как страница сайта и картинка
находятся в одной папке, то достаточно указать имя файла в нашем случае 1. png)

GIF – формат растровых изображений. Однако в отличие от JPEG и PNG этот формат файлов ограничен цветовой палитрой в 256 цветов.

Формат изображения PNG
Аббревиатура от: Portable Network Graphics - портативная сетевая графика.формат png
Расширение файлов: .png
Эта бесплатная альтернатива GIF с открытым исходным кодом, которая поддерживает 16 миллионов цветов, в отличие от GIF, максимум которого 256-цветовая палитра. Это лучший формат файлов для изображений с сохранением источника цветов

Тег одиночка, закрывать не надо.

align="left" (выравнивание картинку по левому краю)

height=30% (задаем один размер картинки в данном случае высота рисунка 30% от страницы, а ширина подбирается автоматически)

Слайд 18

Хотите увидеть результат вашего труда? Сверните документ. Откройте страницу сайта

Хотите увидеть результат вашего труда? Сверните документ.
Откройте страницу сайта (она у

вас внизу на Панели задач) и обновите страничку. Что видите?
Слайд 19

Что у вас в данный момент напечатано на листе Интернет

Что у вас в данный момент напечатано на листе



Интернет


color="blue">

Компьютерные сети




История любой отрасли науки и техники позволяет не только удовлетворить естественное любопытство, но и глубже понять сущность основных достижений в этой отрасли, осознать суще­ствующие тенденции и правильно оценить перспективность тех или иных направлений разви­тия. Компьютерные сети появились сравнительно недавно, в конце 60-х годов. Естественно, что компьютерные сети унаследовали много полезных свойств от других, более старых и распространенных телекоммуникационных сетей, а именно телефон­ных. В этом нет ничего удивительного, так как компьютер, как и телефон, является универ­сальным инструментом в руках своего хозяина и помогает ему общаться с друзьями, приобре­тать новых знакомых, удовлетворять любознательность и любопытство, делать покупки и т. д., и т. п.
В то же время компьютерные сети привнесли в телекоммуникационный мир нечто совершенно новое — неисчерпаемые запасы информации, созданные цивилизацией за несколько тысяче­летий своего существования и продолжающие пополняться с растущей скоростью в наши дни. Этот эффект особенно проявился в середине 90-х, во время интернет-революции, когда стало ясно, что возможности свободного и анонимного доступа к информации и быстрому, хотя и письменному общению очень ценятся людьми.
Результатом влияния компьютерных сетей на остальные типы телекоммуникационных сетей стал процесс их конвергенции. Этот процесс начался достаточно давно, одним из первых при­знаков сближения стала передача телефонными сетями голоса в цифровой форме. Компью­терные сети также активно идут навстречу телекоммуникационным сетям, разрабатывая но­вые сервисы, которые ранее были прерогативой телефонных, радио и телевизионных сетей — сервисы IP-телефонии, радио- и видеовещания, ряд других. Процесс конвергенции продолжа­ется, и о том, каким будет его конечный результат, с уверенностью пока говорить рано. Одна­ко понимание истории развития сетей, описываемой в данной главе, делает более ясными ос­новные проблемы, стоящие перед разработчиками компьютерных сетей.

Имя файла: Создание-первой-страницы-сайта.pptx
Количество просмотров: 87
Количество скачиваний: 0