Приятного просмотра

Разработка сайта с использованием языка HTML

Опубликовано: 2 года назад
21 280 просмотров
👎 4
Скопируйте и вставте на Ваш сайт

Описание

Пишем свой сайт с помощью блокнота.
Ссылка на задание: http://informat45.mybb.ru/viewtopic.php?id=174#p187

Субтитры

Здрасьте уважаемы посетители и пользователи ресурс информацию рак 5 в этом в этом видео мы рассмотрим о том как можно разработать сайт с использованием языка разметки текста html ну как вы знаете язык html является языком и про текстовой разведки дословно переводится как гипертекст markup ленгвич и включают себя стандартные элементы.

Форматирования наша с внешне задача будет состоять в следующем задании в любой операционной системе windows или linux требуется создать сайт с используем языка разметки текста формате html в простейшем текстовом редакторе при этом нам требуется на нашем так называемом сайте создать несколько страниц должна быть и главная страница.

Страница программы словарь анкеты и все эти файлы необходимо сохранить формате html html в папке сайта итак первым делом давайте создадим папку на рабочем столе или без разницы где где у нас будет собственно говоря содержаться материал сайта затем создадим и документ в текстовые куда впишем эти значения сейчас мы поочередно рассмотрим.

Что они выполняют и так создать текстовый документ раз уж у нас будет главная страница сейчас мы сохраним так как нам надо итак в целом и как вы наверное уже слышали с уроков информатики языки про текстура разметки это язык таков и многие теги открываются и закрываются так сказать v-образные контейнеры так html или закрыта так html.

Говорит системе о том что данный документ является файлом формата и за какие про текстово разметки ткф вместе с сайта включает себя заголовок документа то есть как вы видите здесь у нас имеется надпись заголовка новый текстовый документ если мы бы прописали скажем компьютер то вверху бы находилось в раза компьютер это заголовок а далее так body.

То есть данный т.к. включается себя уже непосредственно содержание самого документа и в целом это структура очень похожи на человечка то есть скат голова body тело далее давайте рассмотрим что получится если мы все это соберем вместе для того чтобы собрать создать html-страницу из данного текста мы используем следующий алгоритм файл сохранить как и укажем наш.

Сайт точнее на страницу как яндекс . ht мтт нас появится веб-страница вот она откроем в браузере вот заголовок компьютер как видите в самом верху и его содержание текст все о компьютере далее теперь мы должны отобразить информацию с привязкой к разным типам сторон то есть и копируем данный фрагмент текста и раз уж это должно находиться внутри нашего.

Документа то вставляем его между двумя тегами body теперь что выполнять данный т.п. фактически означает заголовок онлайн привязка лифт свойства к левой стороне ткп закрывается здесь то есть весь этот абзац будет на привязан к левой стороне аналогично второй абзац который будет привязан к правой стороне если вам нужно будет отобразить по центру заместо right.

И left можете прописать по-английски и фразу центр после этого текст будет отображаться по центру но на пока требуется превзойти к правой стороне и так так же сохраняем документ и обновляем нашу страницу и вот мы видим как текст привязан к левой стороне и к правой вроде ничего сложного идем далее теперь пусть и начальной странице компьютер будет содержать.

Центрированы крупно заголовок синего цвета деленная горизонтальной линии от двух по-разному в равнинных абзацев это тоже прописываем after party обратите внимание тут у нас имеется описание в сокращенной форме то есть на этом сайте терминологический словарь это то что мы уже выложили ранее h&r это т.к. ставит линию горизонтальную фонд фонд color это свойство для отображения.

Шрифта сразу видим что надпись phone cover подразумевает то что то что будет содержаться текст внутри данного фрагмента будет отображаться синим цветом h1 онлайн центр говорит о том что h1 заголовок 1 уровня довольно большим и жирным текстом по центру фраза все компьютере и ничего более после чего закрываем т.к. увеличенного заголовка и шрифта.

H&r это единичный так она не закрывается далее видим что все компьютер нас дублируется поэтому данный часть мы убираем остаются только данный набор фрагментов текста и так если все мы сделали правильно мы увидим следующую картину сохраняем документ и обновляем воля сразу видим как красиво стала отображение нашего сайта идем.

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

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

Находится внутри нашего документа точнее здесь внутри нашей папке будут браться отсюда но как мы сказали мы сохранили в папку сайт файл под именем один . give a line райт путь привязан к правой стороне сохраняем смотрим вот пожалуйста далее создайте папку сайта компьютер и добавим пустые страницы программы словарь анкета составим им их точнее сохраняемых.

Файлов с именами софт в ргс и анкета папки сайта такие простые страницы должны иметь заголовки и но пока не имеет содержание ну давайте тогда по быстренькому все это сделаем это закроем снова у нас остался текстовый документ который мы начали создавали и так как нам сказали первоначально у нас будет страниц программы как заголовок.

Обозначим программами но сохраним под именем софт vr файл сохранить как помните алгоритм прописываем название файлы а потом на конце формат html далее словарь так извиняюсь только между таймами и название калорий в сыре . htm и последняя анкеты анкета файл сохранить как.

Просто анкета htm все после этого нас осталось в папке 4 файла с указанием разных сайтов один файл и для изображения и текстовый документ который нам уже принципе тут не нужен можно удалить идем далее создадим панель навигации по сайту компьютер на начальной странице сайта разместим указатели гиперссылок на странице сайта в качестве указателей гиперссылок.

Удобнее всего выбрать название страниц на который будет осуществляться переход возместим указатели гиперссылок внизу страницы в новом ужасы в одну строку в разделив их пробелами пробелы именно виртуальный в html тегах обозначается видит такой вот набора символов такое размещение гиперссылок часто называют панели навигации ну скажем для того что можно было быстро и удобно найти нужный.

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

Центр по центру будет отображен и наши ссылки если все правильно сделали они будут у нас работать именно в таком порядке при нажатии на фразу программы будет осуществляться переход на страницу softwear . htm пробел после чего при нажатии на словарь будем приходить на страницу кластере и последнее при нажатии на анкету текст.

Мы будем приходить собственно на сайт с анкетами и самом низу у нас им есть еще такая своеобразная ссылка на почту сохраняем смотрим что у нас получается в итоге вот проверяем программы заголовок имеется но нет содержание как и словарь тоже заголовки медицине содержание и анкета то есть и страницу нас работают подключены все в один файл.

Но они еще не содержит никакого контента наполнение теперь давайте собственно по мнению содержанием и так веб-страница программы мы представим в виде нумерованных и маркированных списков все это копируем открываем софт vr что по сути нас является страницы с программами в блокноте все копируем сюда и смотрим что у нас тут выполняется так htm html в начале и конце создает.

Видимость того что то html-документ сама заголовки место текст программы теперь обратите внимание h11 центр по самому центру сверху синими буквами фонд color glow вот написано программное обеспечение после чего снова горизонтальная линия о л л и это уже элемента которые способ для маркированного списка о л задает начальные параметры л и второй параметр.

То есть это может быть скажем маркеры белого круга второй маркер черного круга точно сказать не могу но сейчас посмотрим will type сквер muscular как вы знаете за английского это квадрат представляет маркированный список виде квадрата ну давайте посмотрим что из этого у нас выйдет файл сохранить компьютеры приходим и.

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

Находясь мы еще все что костюм в тыл будет продолжаться дальше список но сейчас поставим скажем и четвертый элементы и системы программирования просто систем программирования одну просто для теста сохраним это уже будет как значение 4 все понятно а если мы укажем здесь как еще один элемент опять же например 2 для теста мог бы продолжать цепочку.

Данных квадратов и так сохраняем еще раз все программное обеспечение нас работает возвращаемся на главную страницу то есть данном моменте все понятно все отлично работает и так далее редактируемую веб-страницу словарь где мы указываем разнообразные теги то что теги разнообразные термины тут обратите внимание уже требуется модифицировать то есть нам не дано.

Полностью вся страница как это было прошлый раз поэтому я советую вам взять часть тегов с странице программы но сейчас мы скопируем и удалим все не нужны словари то у нас глоссарием открываем с помощью блокнота вставляем и так нам тут потребуется только замените значение названия на компьютерные термины что мы сейчас и сделаем компьютерные.

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

То что абзацев просто задавая определенный интервал от красной строки то все что находится между этими двумя тегами будет считаться как раз этими элементами dt идет как понятие dd как описание понятия удобства можно еще обозначить их тегами b для того чтобы сделать более жирным текст то сейчас мы обозначаем фразу оперативная память и процессор сохраняем.

Что у нас получилось в итоге словарь отобрать и ними процессы оперативной памяти уже посвящены более жирным текстом идем далее теперь нам осталось совсем ничего доделать анкету ну здесь тоже ничего сложного нету с учетом того что немножко объемным является данной странице но попробуем открываем анкету открыть с помощью блокнота.

Снова открываем какой-либо предыдущий файл анкета так извиняюсь это у нас словарь копируем данный фрагмент от h 1 до r горизонтальной линии и вставляем его сюда соответственно хотя у нас тут про это не сказано так что скорее всего зря мы так поторопились ладно идём по порядку первым делом мы должны создать форму где будем вводить.

Имя форм обычный способ на разных сайтов для того чтобы мы ввели свои данные ну скажем при регистрации фамилия логин пароль обратите внимание мы тут уже наконец таким т.к. как br br это как бы в виртуальный enter который приносит все сведения на новую строку то есть у нас получается будет надпись пожалуйста введите свое имя и с новой строки будет.

Input текст форма в котором можно ввести текст размером не более 30 символов ну давайте проверим сохранить анкета вот пожалуйста введите ваше имя не более 30 символов это значение то гораздо больше возможно связано это с тем что в разных браузерах по разным отображаются выполнение этих тегов и e-mail идем далее нам требуется ввести разнообразные переключатели с помощью.

Которых мы можем оказать как он какой группе пользу ему себе относим ну так же после формы вставляем их и сразу видим что они обозначаются опять же через input type режим ввода радиокнопка круглая и значение в вэлью учащийся студенты и учителя но по сути данной переменной у кассы виртуально а учащиеся как текст прописываться после указания данного вида кнопок вот пожалуйста.

И так как они относятся к одной группе мы можем выбрать только один элемент далее нам требуется указать флажки в отличие от радио кнопок флажки не привязаны к одной группе то есть мы можем указать индивидуально какому значению они будут указаны и обратите внимание снова in путает type checkbox checkbox а то есть как раз.

Флажки на m box 1 как переменная и также в конце прописываем текст обозначению все работает и на конце но почти на конце создаем список из которой можно выбрать один из вариантов так-то жестами в после флажков select name браузер в общем selected подразумевает собой разный выбор который мы можем указать данном случае у меня четыре вида.

Браузеров и все это должно быть в контейнер и select нейм и закрываться соответственно тоже select смотрим вот пожалуйста mozilla интернет эксплорер google опера и скорее всего почти что последние область куда мы можем вписать текст тоже ничего сложного вставляем текст р-н с размерностью четыре строки и 30 столбцов ну это как своеобразная таблица.

Так смотрим что у нас получается вот она при желании можно увеличить и последняя кнопка отправить тут мы увидим же просто форм action mail товаре но which method лист сразу же прописана сайт на который будет отправляться данные метод под пост и путает в сам нет это уже кнопка с надписью отправить то соответственно вы можете прописать другую фразу то что.

Будет отображаться поверх нашей кнопки сохраняем все как видите все отлично работает проверяем введите ваши имя выпуска быть евгений email ну не знаю какой нибудь такой учитель а у нас здесь что выдавался такой результат а мужчине писали текстовые содержания то есть видите пожалуйста ваше имя.

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

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

Уже более подходит к оригиналу но у некоторых местах сера нам нужно дважды поставь bf чтобы увеличить зазоры скорее всего так да так какую еще информации вы хотели видеть на сайте так этот еще мне тоже ошибка это настаиваем и все-таки сюда до бара сверху есть отлично и здесь та же пропишем следующий элемент и того какой браузер вы используете наиболее часто все вот на.

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

Кнопку назад принципе на этом все спасибо за внимание надеюсь вам было интересно прослушать данный материал из есть вопросы задавайте под описанием данного видео или на сайте который тоже в доступен в описании всем спасибо всем до свидания до скорых встреч

Комментарии

Panda TV • 4 месяца назад
Это не сайт а верстка
👍 0
Алекс • 8 месяцев назад
Помогите пожалуйсто нужно сделать ссылку на текстовый документ Word
👍 0
Trentik • 9 месяцев назад
Спасибо вам большое, очень помогли!!!
👍 0
Mr. ALEDUV • 9 месяцев назад
Огромное вам спасибо! Вы помогли мне годовую 5 по информатике получить!
👍 0
Татьяна Егорова • 9 месяцев назад
Здравствуйте. Всё получилось, но возникла проблема с сохранением сайта... Помогите пожалуйста
👍 0
Елизавета Дикунова • 10 месяцев назад
Скажите пожалуйста , почему когда я захожу на сайт и нажимаю на словарь , то мне пишет"файл не найден", что делать ?
👍 1
Елизавета Дикунова • 10 месяцев назад
InFormat45 EvilAdmin , спасибо большое
👍 0
InFormat45 EvilAdmin • 10 месяцев назад
Нужно проверить ссылку на файл, и его формат. Где-то там ошибка, либо название файла другое, либо формат указан недостоверно.
👍 1
_MarQueen _ • 11 месяцев назад
Просто огрооооооооооооомное спасибо
👍 1
Джус CS:GO • 1 год назад
Помогите пожалуйста...У меня вылетает такого рода текст в начале как это исправить? Р’СЃС‘ Рѕ компьютере     
У меня операционная система Mac Os x.Я уже переделал Text Edit так чтобы он воспринимал это как код.Но в данном случае у меня почему то не работает.Не знаете почему?
👍 0
InFormat45 EvilAdmin • 1 год назад
скорее всего файла такого нет, в ссылке он прописан как glossary.htm, точно такое же имя с форматом должно быть у твоего файла с анкетой
👍 0
Джус CS:GO • 1 год назад
Да и не в этом проблема.У меня просто не хочет переходить на страницу анкета.И дело  не в <a href.
Я делаю его большим  или маленьким  и ничего не меняется.Проблема в другом, а в в чём конкретно сказать сам не могу.
👍 0
Джус CS:GO • 1 год назад
Да вроде всё верно.Но всё равно при нажатии на панель анкета он не переходит на страницу Анкета.Не знаю как быть.Завтра сдавать с утра.А я не закончил и как быть я без понятия.
👍 0
InFormat45 EvilAdmin • 1 год назад
проверь правильность написания блока ссылок и формат файла
<a href="glossary.htm">Словарь</a>
👍 0
Джус CS:GO • 1 год назад
Добрый вечер! Нужна ваша помощь у меня с главной страницы index.htm на этом сайте  не заходит во вкладку словарь.При нажатии с главной страницы index.htm на словарь ничего не происходит.Хотя если просто нажать на словарь и открыть в браузере то всё работает.С чем это может быть связано? Подскажите? Он не выделяет текст фиолетовым цветом.Он так и остаётся при нажатии синим.
👍 0
kanal igroman • 1 год назад
что делать если не открывается программы, словарь, анкета?
👍 0
InFormat45 EvilAdmin • 1 год назад
проверь название ссылок в строке <a href=" ">, там может быть проблема с указанием неправильного имени файла или его формата.
👍 0
hedgehog 14 • 1 год назад
Спасибо вам большое!!!Не знаю как сдам,только что закончил,но все равно благодарен
👍 1
Роман Виклов • 1 год назад
Спасибо большое!
👍 0
legoMan • 1 год назад
Спасибо!!
👍 0
Duff Eston • 1 год назад
Изи пятёрка :D
👍 0
Ирина Бабушкина • 1 год назад
все хорошо, но у меня картинка получилась очень большая что делать
👍 0
InFormat45 EvilAdmin • 1 год назад
В зависимости от браузера картинка может отображаться по разному. Что бы задать фиксированный размер нужно изменить строку с добавлением картинки на следующую:
<IMG SRC="computer.gif" ALIGN="right" weight="200" height="210">
👍 0
шахром алиев • 1 год назад
спасибо вам большое вы мне очень помогли
👍 0
марина караватская • 1 год назад
При вставлении другой картинки высвечивается значок (картинка), а само изображение не открывается, почему так происходит?
👍 1
марина караватская • 1 год назад
Спасибо, я попробовала по другому
👍 0
InFormat45 EvilAdmin • 1 год назад
Такое бывает, если не правильно указано имя файла, или его формат.
👍 0
YnUkaJITV • 1 год назад
спасибо
👍 0
Михаил Воробьёв • 1 год назад
Спасибо большое, с меня лайк
👍 0
Max • 2 года назад
Спасибо большое!!!! Меня чуть на второй год не оставили из-за информатики, задали эту тему а я ничего не знал, Спасибо что помог!!!!!
👍 2
Илья Ильичев • 2 года назад
Спасибо, задание по информатике было, выполнил на 5.
👍 1