Разное

Создание простейшей веб страницы: Практическая работа по теме «Создание простейшей Web-страницы с использованием текстового редактора»

Содержание

Создание простейшей веб-страницы. Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Создание простейшей веб-страницы. Веб-Самоделкин. Как самому создать сайт быстро и профессионально

ВикиЧтение

Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Гладкий Алексей Анатольевич

Содержание

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

В данном разделе мы на конкретном примере проиллюстрируем, как написать простейшую веб-страницу на языке программирования HTML.

Работать мы будем в любом текстовом редакторе, позволяющем сохранять созданные файлы с расширением html

Данный текст является ознакомительным фрагментом.

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

Создание простейшей веб-страницы В данном разделе мы на конкретном примере проиллюстрируем, как написать простейшую веб-страницу на языке программирования HTML.

Работать мы будем в любом текстовом редакторе, позволяющем сохранять созданные файлы с расширением

Создание новой веб-страницы

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

Создание шаблона страницы

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

Создание шаблона страницы: <fo:simple-page-master>

Создание шаблона страницы: &lt;fo:simple-page-master&gt; Как можно догадаться из названия, шаблон страницы (page master) применяется для создания страницы. Шаблон страницы задает фактическую схему и конфигурацию страницы. Каждому шаблону страницы должно быть задано уникальное имя, к

Создание эффективной посадочной страницы

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

Создание вики-страницы

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

Создание страницы веб-части при помощи обозревателя

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

Страницы

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

Страницы

Страницы Титульный листВ Word имеется коллекция красиво оформленных заготовок титульных листов. При желании вы можете использовать одну их них в своем документе.На вкладке Вставка в группе Страницы нажмите кнопку Титульная страница в открывшемся списке (рис. 1.48) выберите

Создание веб-страницы

Создание веб-страницы Поскольку основная составляющая веб-страниц – это текст, то работа в Adobe Dreamweaver CS3 ничем особо не отличается от работы в текстовом редакторе. Если программа уже запущена и создан пустой HTML-документ, как было описано выше, то можно приступать к работе.

Создание «классической» ASP-страницы

Создание «классической» ASP-страницы «Классическая» ASP-страница является комбинацией HTML и программного кода сценария сервера. Если вы никогда не работали с ASP, вам будет полезно знать, что целью использования ASP является динамическое построение HTML-кода с помощью сценария

Создание страницы Inventory

Создание страницы Inventory Чтобы добавить в проект страницу содержимого Inventory.aspx, откройте в среде разработки страницу *.master и выберите WebSite?Add Content Page из меню (если файл *.master не является активным элементом, этот пункт меню не предлагается). Роль страницы Inventory заключается в

Создание страницы BuildCar

Создание страницы BuildCar Последним нашим заданием в этом примере будет создание страницы BuildCar.

aspx. Добавьте ее в свой проект (выбрав Web Site?Add Content Page из меню). Эта страница будет содержать Web-элемент управления Wizard ASP.NET 2.0, который обеспечит простой способ прохождения конечного

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

Создание пользовательской страницы тестирования Если вы хотите, чтобы среда выполнения ASP.NET применяла пользовательский файл *.aspx для проверки ваших Web-сервисов XML, вы можете встроить в эту страницу дополнительную информацию (например, фирменный знак компании,

Создание титульной страницы

Создание титульной страницы В составе Word 2007 имеется большое количество готовых заготовок или экспресс-блоков, с помощью которых можно быстро вставлять в документ различные объекты. Здесь мы рассмотрим создание титульной страницы, а с некоторыми другими

Создание простейшей веб-страницы.

Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете

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

Начнем практику с создания простой веб-страницы с повторяющимся несколько раз текстом «Добро пожаловать!»

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

Примечание

На практике, если вам придется править HTML-код, воспользуйтесь приложением типа Notepad++ – это продвинутый блокнот с поддержкой синтаксиса многих языков программирования. Он не добавляет в код BOM – невидимые символы, из-за которых может нарушиться нормальная работа сайта.

Итак, запускаем приложение Блокнот, которое находится в папке со стандартными приложениями Windows (подобное приложение есть и в Linux), и набираем следующий текст (рис.

 3.6).

Рис. 3.6. HTML-код тестовой страницы

Документ открывается тегом <html> (он дает понять браузеру, что здесь начинается веб-страница), а заканчивается тегом </html> (конец страницы).

Примечание

Тег <html> – корневой элемент в документе HTML 5.0. Его наличие обязательно.

Наклонная черта в закрывающем теге называется «слеш». В данном случае, поскольку слеш наклонен в правую сторону, он называется прямым слешем.

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

В контейнер <head></head> (с английского head переводится как «голова») помещается название документа и различная справочная информация, например ключевые слова. Сюда же добавлен контейнер <title></title>, в котором содержится название веб-страницы. Текст, помещенный в этот контейнер, отображается в заголовке окна браузера. Некоторые начинающие веб-мастера по незнанию не заполняют контейнер <title></title> или оставляют то, что прописывается по умолчанию веб-редакторами. Если взглянуть на скриншот предлагаемой ниже страницы, то можно увидеть, что она называется «Экспериментальные физические задачи. Механика», а на ее вкладке написано Новая страница 2, то есть содержимое контейнера <title></title> даже не дает намека о содержании веб-страницы (рис. 3.7).

Рис. 3.7. По надписи в заголовке окна браузера Новая страница 2 непонятно, чему посвящена веб-страница

Что произошло? Дело в том, что при работе над сайтом использовался популярный веб-редактор Microsoft FrontPage 2003, в чем можно убедиться, заглянув в HTML-код страницы. По умолчанию этот веб-редактор задает содержимое контейнера <title></title> как Новая страница 1, Новая страница 2 и т. д. Разработчику необходимо самому позаботиться о «правильном» наполнении контейнера.

Применительно к FrontPage 2003 нужно было открыть искомую страницу, в контекстном меню выбрать пункт Свойства страницы и изменить значение поля Название с Новая страница 2 на, к примеру, Экспериментальные физические задачи. Механика.

Далее идет контейнер <body></body> (с английского body переводится как «тело») – в него помещается основное содержимое страницы: текст, картинки, таблицы и т. д.

В нашем случае в контейнере <body></body> находятся шесть контейнеров, первым из которых является <h2></h2>, а последним – <h6></h6>. Это заголовки различных уровней, самый крупный из которых – hi. Как правило, при создании веб-страниц применяются только три первых заголовка, то есть hi, h3 и h4.

Внимание!

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

Теперь можно просмотреть результат нашей работы в браузере. Для этого необходимо сохранить созданный документ как веб-страницу, то есть расширение файла должно быть .htm либо .html. Для этого заходим в меню Файл и выбираем команду Сохранить как. В появившемся окне в поле Имя файла указываем полное имя файла, в раскрывающемся списке Тип файла выбираем вариант Все файлы (рис. 3.8). Остается лишь нажать кнопку Сохранить.

Рис. 3.8. Сохранение кода в виде веб-страницы

Мы дали файлу имя proba_pera.htm. Обратите внимание, что оно набрано на латинице и вместо пробела указан знак нижнего подчеркивания. Всегда следуйте этому правилу при именовании файлов, предназначенных для размещения в Интернете. В противном случае есть большая вероятность того, что файл не удастся загрузить на сервер.

После сохранения файла как HTML-документа он будет открываться браузером, установленным в системе по умолчанию. В нашем случае это Google Chrome, который отобразил заголовки шести уровней (рис. 3.9).

Рис. 3.9. Отображение заголовков шести уровней в окне браузера

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

Данный текст является ознакомительным фрагментом.

Спортивные страницы

Спортивные страницы Лесной славился как один из спортивных центров в окрестностях Петербурга, особенно зимой, когда тут процветал лыжный спорт. В начале XX века его называли «самым здоровым спортом», а знаменитый полярный исследователь Ф. Нансен после своего путешествия

Интернет-страницы

Интернет-страницы Вся информация представлена в Интернете в виде страниц, на которых кроме текста могут находиться различные изображения, а также ссылки на другие страницы или объекты (файлы) — гиперссылки. При щелчке на такой ссылке происходит переход на другую

Веб-страницы

Веб-страницы Работа с интернет-страницами (веб-страницами) сводится к работе с информацией, представленной на них. Перечислим то, что вы можете увидеть на интернет-странице.Текст. Это может быть как обычный текст, так и «необычный», нажатие которого приводит к переходу на

Оптимизация урла страницы

Оптимизация урла страницы URL (англ. Uniform Resource Locator) – так называется запись адреса веб-документа в Сети (в народе – ссылка). Например: http://semantica.in/blog/o-budushhem-seo.html Зачем нужен URL?– Он помогает сделать навигацию более понятной, показывает пользователю в каком разделе

104 страницы про любовь

104 страницы про любовь Пьеса (1964)В молодежном кафе «Комета» поэт читает стихи. Председатель общественного совета кафе пытается устроить обсуждение. Девушка-посетительница хвалит стихи. Для сидящего неподалеку парня это становится поводом для знакомства. Девушку зовут

Интернет-страницы

Интернет-страницы www.rodos.com: Лучший веб-сайт по Родосу. Много информации, в особенности о гостиницах, квартирах в домах гостиничного типа, пансионатах и домах отдыха, также о фирмах проката автомобилей. Вся информация о ценах и прямых возможностях резервирования. www.culture.gr:

Как сделать сайт

❮ Предыдущая Далее ❯

Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.

Создание веб-сайта с нуля

Демонстрация

Попробуйте сами

«Черновик макета»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

2 Заголовок

2 Панель навигации

Боковой контент

Текст, текст. .

Основное содержание

Текст, текст..

Текст, текст

HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать базовую веб-страницу.

Примечание: Если вы не знаете HTML и CSS, мы рекомендуем вам начните с чтения нашего учебника по HTML.

Пример




Заголовок страницы


<стиль>
тело {
семейство шрифтов: Arial, Helvetica, без засечек;
}


Мой сайт


Сайт, созданный мной.


Попробуйте сами »

Объяснение примера

  • Объявление определяет этот документ как HTML5
  • Элемент является корневым элементом HTML страница
  • Элемент содержит метаинформацию о документе
  • Элемент </code> указывает заголовок документа</li><li> Элемент <code><meta> </code> должен определять набор символов как UTF-8</li><li> Элемент <code><meta> </code> с name=»viewport» позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана</li><li> Элемент <code><style></code>содержит стили для веб-сайта (макет/дизайн) </li><li>Элемент <code><body></code>содержит видимое содержимое страницы </li><li>Элемент <code><h2></h2></code>определяет большой заголовок </li><li>Элемент <code><p></code>определяет абзац </li></ul><hr/><h3><span class="ez-toc-section" id="i-28">Создание содержимого страницы </span></h3><p>Внутри элемента <code><body></code>нашего веб-сайта мы будем использовать наш «Макет Черновик" и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Дополнительное содержимое </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3><span class="ez-toc-section" id="i-29"> Заголовок </span></h3> <p> Заголовок обычно располагается в верхней части веб-сайта (или прямо под верхней меню навигации).<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-11.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/v/VuZh5TH2eaOivK6tkoWI0Nd9CnyUYXcAEFpjGx/slide-11.jpg' /></noscript> Часто содержит логотип или название веб-сайта: </p> <p> <div> <br/>   <h2><span class="ez-toc-section" id="i-30">Мой сайт</span></h2> <br/>   <p>Веб-сайт создано мной.</p> <br/> </div> </p> <p> Затем мы используем CSS для оформления заголовка: </p> <p data-readability-styled="true"> .header { <br/>   заполнение: 80 пикселей; /* немного отступов */ <br/>   text-align: center; /* текст по центру */ <br/>   background: #1abc9c; /* зеленый фон */ <br/> белый цвет; /* белый цвет текста */ <br/> } </p> <p> /* Увеличить размер шрифта элемента <h2><span class="ez-toc-section" id="i-31"> */ </span></h2> <br/> .header h2 { <br/>   размер шрифта: 40 пикселей; <br/> } </p> <p> Попробуйте сами » </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-32"> Панель навигации </span></h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по ваш сайт: </p> <p> <div> <br/>   <a href="#">Ссылка</a> <br/>   <a href="#">Ссылка</a> <br/> <a href="#">Ссылка</a> <br/>   <a href="#">Ссылка</a> <br/> </div> </p> <p> Используйте CSS для оформления панели навигации: </p> <p data-readability-styled="true"> /* Стиль верхней панели навигации */ <br/> .<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg' /></noscript> navbar { <br/>   переполнение: скрыто; /* Скрыть переполнение */ <br/>   background-color: #333; /* Темный цвет фона */ <br/> } </p> <p> /* Стиль ссылок панели навигации */ <br/> .navbar a { <br/>   с плавающей запятой: слева; /* Убедитесь, что ссылки остаются рядом */ <br/>   display: block; /* Изменяем отображение на заблокировать по соображениям безопасности (см. ниже) */ <br/>   color: white; /* Белый цвет текста */ <br/>   text-align: center; /* Текст по центру */ <br/> отступ: 14px 20px; /* Добавляем отступы */ <br/> украшение текста: нет; /* Удалить подчеркивание */ <br/> } </p> <p> /* Ссылка с выравниванием по правому краю */ <br/> .navbar a.right { <br/>   float: right; /* Поместить ссылку вправо */ <br/> } </p> <p> /* Изменение цвета при наведении/наведении мыши */ <br/> .navbar a:hover { <br/> цвет фона: #ddd; /* Серый цвет фона */ <br/>   color: black; /* Черный цвет текста */ <br/> } <br/> </p> <p> Попробуйте сами » </p> <hr/> <h3><span class="ez-toc-section" id="i-33"> Контент </span></h3> <p> Создайте двухколоночный макет, разделенный на «дополнительный контент» и «основной контент».<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1131662/slide_7.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1131662/slide_7.jpg' /></noscript> </p> <p> <div> <br/>   <div>...</div> <br/>   <div >...</div> <br/> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> <p data-readability-styled="true"> /* Обеспечьте правильный размер */ <br/> * { <br/>   box-sizing: border-box; <br/> } </p> <p> /* Контейнер столбца */ <br/> .row { <br/>   display: flex; <br/>   flex-wrap: упаковка; <br/> } </p> <p> /* Создать два неравных столбца, расположенных рядом друг с другом */ <br/> /* Боковая панель/левый столбец */ <br/> .side { <br/>   flex: 30%; /* Устанавливаем ширину боковой панели */ <br/>   фоновый цвет: #f1f1f1; /* Серый цвет фона */ <br/>   отступ: 20 пикселей; /* Немного заполнения */ <br/> } </p> <p> /* Основной столбец */ <br/> .main { <br/>   гибкий: 70 %; /* Устанавливаем ширину основного содержимого */ <br/>   background-color: white; /* Белый цвет фона */ <br/>   padding: 20px; /* Немного заполнения */ <br/> } <br/> </p> <p> Попробуйте сами » </p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/1/2/1/12127bf7134e3b8ebaf04de3a5aab38d.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/2/1/12127bf7134e3b8ebaf04de3a5aab38d.jpeg' /></noscript> Это позволит убедиться что ваш сайт хорошо выглядит на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> <p data-readability-styled="true"> /* Отзывчивый макет — когда ширина экрана меньше 700 пикселей, сделайте два столбцы располагаются друг над другом, а не рядом */ <br/> @media экран и (максимальная ширина: 700 пикселей) { <br/>   .row { <br/> flex-направление: столбец; <br/>   } <br/> } </p> <p> /* Отзывчивый макет — когда ширина экрана меньше 400 пикселей, сделайте навигационные ссылки располагаются друг над другом, а не рядом */ <br/> @media screen and (max-width: 400px) { <br/>   .navbar a { <br/> поплавок: нет; <br/>     ширина: 100 %; <br/>   } <br/> } <br/> </p> <p> Попробуйте сами » </p> <p> <strong> Совет: </strong> Чтобы создать макет другого типа, просто измените ширину гибкости (но убедитесь, что в сумме она составляет 100%). </p> <p> <strong> Совет: </strong> Вам интересно, как работает правило @media? Подробнее о это в нашей главе CSS Media Queries.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/n/n9WIUHrgka8fqzBQC5lJwKvFNh1TiymMe3udAD/slide-36.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/n/n9WIUHrgka8fqzBQC5lJwKvFNh1TiymMe3udAD/slide-36.jpg' /></noscript> </p> <p> <strong> Подсказка: </strong> Чтобы узнать больше о модуле Flexible Box Layout, прочтите нашу Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих ящика рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок ломается. Свойство <code> box-sizing </code> позволяет нам включать отступы и границы в общую ширину (и высоту) блока, следя за тем, чтобы отступ оставался внутри блока и не ломался. </p> <p> Подробнее о свойстве box-sizing можно прочитать в нашем учебнике CSS Box Sizing. </p> <hr/> <h3><span class="ez-toc-section" id="i-34"> Нижний колонтитул </span></h3> <p> Наконец, мы добавим нижний колонтитул. </p> <p> <div> <br/>   <h3><span class="ez-toc-section" id="Footer">Footer</span></h3> <br/> </div> </p> <p> И стиль: </p> <p> .footer { <br/>   padding: 20px; /* Немного отступов */ <br/>   text-align: center; /* Текст по центру*/ <br/>   background: #ddd; /* Серый фон */ <br/> } </p> <p> Попробуйте сами » </p> <p> Поздравляем! Вы создали адаптивный сайт с нуля.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/2/c/b2c4063a76f94d77d81b2ea79b06903c.jpeg' /></noscript> </p> <hr/> <h3><span class="ez-toc-section" id="W3Schools"> W3Schools Пространства </span></h3> <p> Если вы хотите создать свой собственный веб-сайт и разместить файлы .html, попробуйте наш <strong> бесплатный конструктор сайтов </strong> , называется <strong> W3schools Spaces </strong> : </p> <p> </p> <p data-readability-styled="true"> Получите свой собственный сайт </p> <p> ❮ Предыдущая Следующий ❯ </p> <br/> <h5><span class="ez-toc-section" id="i-35"> ВЫБОР ЦВЕТА </span></h5> <hr/> <hr/> <hr/> <p> <h5><span class="ez-toc-section" id="i-36"> Лучшие учебники </span></h5> Учебное пособие по HTML <br/> Учебное пособие по CSS <br/> Учебное пособие по JavaScript <br/> Учебное пособие <br/> Учебное пособие по SQL <br/> Учебное пособие по Python <br/> Учебное пособие по W3.CSS <br/> Учебное пособие по Bootstrap <br/> Учебное пособие по PHP <br/> Учебное пособие по Java <br/> Учебное пособие по C++ <br/> Учебное пособие по jQuery <br/> </p> <p> <h5><span class="ez-toc-section" id="i-37"> Лучшие ссылки </span></h5> HTML Reference <br/> CSS Reference <br/> JavaScript Reference <br/> SQL Reference <br/> Python Reference <br/> W3.CSS Reference <br/> Bootstrap Reference <br/> PHP Reference <br/> HTML Colors <br/> Java Reference <br/> Angular Reference <br/> jQuery Reference <br/> </p> <p> <code>2 Top3 Examples Примеры HTML <br/> Примеры CSS <br/> Примеры JavaScript <br/> Как сделать Примеры <br/> Примеры SQL <br/> Примеры Python <br/> Примеры W3.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/545324/slide_19.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/545324/slide_19.jpg' /></noscript> CSS <br/> Примеры Bootstrap <br/> Примеры PHP <br/> Примеры Java <br/> Примеры XML <br/> Примеры jQuery <br/> </p> <hr/> <p> FORUM | О </p> <p data-readability-styled="true"> W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. </p> <p> Copyright 1999-2022 Refsnes Data. Все права защищены. <br/> W3Schools работает на основе W3.CSS. </p> <h2><span class="ez-toc-section" id="9_-_HTML_Dev"> 9 шагов по созданию веб-страницы с использованием базового HTML для начинающих [Иллюстрированное руководство] · Dev Практический </span></h2> <p> </p> <p> Если вы когда-нибудь задумывались, как HTML используется для создания веб-сайтов с изображениями и видео, вы попали в нужное место. Я собираюсь провести вас через 9 шагов создания одностраничного веб-сайта с использованием HTML.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/u/uOw7cXN4sxHVK6tIPmM9iJn3rSvj8eZdQT1hFL/slide-10.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/u/uOw7cXN4sxHVK6tIPmM9iJn3rSvj8eZdQT1hFL/slide-10.jpg' /></noscript> Если вы можете создать одностраничный веб-сайт, вы можете создать многостраничный веб-сайт. </p> <h3><span class="ez-toc-section" id="i-38"> Требования </span></h3> <p> Вам нужны только две вещи: текстовый редактор и браузер. Если вы знаете, как использовать эти два, пропустите раздел требований и перейдите к процессу из 9 шагов. </p> <h4><span class="ez-toc-section" id="i-39"> Текстовый редактор </span></h4> <p> Вам нужен текстовый редактор для написания кода HTML. На каждом компьютере есть текстовый редактор, так что пока не спешите ничего устанавливать. Вы можете использовать Блокнот <strong> в Windows, Gedit в Ubuntu и TextEdit в MacOS X </strong>. </p> <p> Вы услышите о причудливых текстовых редакторах, которые вам следует установить. Однако для вашей первой веб-страницы HTML вам не нужно ничего устанавливать. Используйте текстовые редакторы, уже установленные на вашем компьютере. </p> <p> После создания вашей первой веб-страницы вы можете проверить некоторые другие инструменты, которые я использую при создании веб-страниц, которые сделают вашу работу более удобной.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/6/6ACWmhNcVRK5LO3BYnwtFuXUZgd2i1kSlbMyxJ/slide-28.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/6/6ACWmhNcVRK5LO3BYnwtFuXUZgd2i1kSlbMyxJ/slide-28.jpg' /></noscript> </p> <h4><span class="ez-toc-section" id="i-40"> Браузер </span></h4> <p> Вы будете использовать <strong> Firefox, Chrome, Chromium, Safari или любой другой веб-браузер </strong>, уже установленный на вашем компьютере. </p> <h4><span class="ez-toc-section" id="i-41"> Содержание веб-страницы </span></h4> <p> Все веб-страницы всегда содержат какую-либо информацию в различных форматах, например, текст, изображения, видео и т. д. Чтобы создать веб-страницу, вам необходимо какое-то содержимое или использовать фиктивный текст и изображения. </p> <p> Если вы просто хотите попрактиковаться, вы можете скопировать контент, который я уже подготовил здесь. </p> <p> Если вы хотите создать уникальную веб-страницу, вам необходимо: </p> <ul> <li> <p> <strong> Запись содержимого </strong> </p> <p> Напишите или скопируйте текстовое содержимое, которое вы будете использовать на своей веб-странице, и сохраните его в документе. Если вы скопировали часть контента из других источников в Интернете, не забудьте скопировать URL-адрес источника. Затем сохраните это в документе. </p> <p> Если вы не можете найти тему для веб-страницы, выберите тему из списка 100 идей для вашей первой веб-страницы.<img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/v/v8A0ZqSF1tMrILDN3Ch5iUmOsHwoR6lKQGP4jV/slide-22.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/v/v8A0ZqSF1tMrILDN3Ch5iUmOsHwoR6lKQGP4jV/slide-22.jpg' /></noscript> </p> </li> <li> <p> <strong> Загрузите изображения или скопируйте URL-адрес изображения </strong> </p> <p> Найдите несколько актуальных и полезных изображений. Найдя их, загрузите изображения или скопируйте URL-адрес изображения и сохраните его в документе. </p> <p> Когда у вас есть текст и изображение, пора переходить к следующему шагу. </p> </li> <li> <p> <strong> Выберите дизайн сайта </strong> </p> </li> </ul> <p> Для вашей первой веб-страницы я бы рекомендовал придерживаться веб-страницы с простым дизайном. Веб-дизайн — это то, как выглядит сайт. Помните, что вы просто практикуетесь в создании веб-страниц, а не в их дизайне. </p> <p> Вы можете выбрать из этой коллекции простых html-проектов, которую я подготовил. </p> <p> Для этого урока мы создадим веб-страницу о <strong> сверчках для еды </strong> . <br/> Эта веб-страница не роскошна, но это хороший первый проект. Я сделал это одной колонкой, чтобы все было удобно для новичков. </p> <h3><span class="ez-toc-section" id="9_HTML"> 9 шагов для создания вашей первой HTML-страницы </span></h3> <h4><span class="ez-toc-section" id="_1"> Шаг 1.</span></h4><img class="lazy lazy-hidden" loading='lazy' src="//toto-school.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/5/5k82LC6edB1oOS0zQViMZHJFfbxXsTyagYWnjP/slide-5.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/5/5k82LC6edB1oOS0zQViMZHJFfbxXsTyagYWnjP/slide-5.jpg' /></noscript> Откройте текстовый редактор </h4> <p> Помните текстовый редактор, о котором я говорил ранее, пора его открыть и использовать. Если вы использовали его раньше, перейдите к следующему разделу. Если вы не знаете, как это сделать, приведенные ниже инструкции помогут вам в зависимости от того, какой компьютер вы используете. </p> <ul> <li> Как открыть текстовый редактор на Ubuntu [Youtube] </li> <li> Как открыть текстовый редактор на компьютере с Windows [Youtube] </li> <li> Как открыть текстовый редактор на Mac [Youtube] </li> </ul> <p> После открытия любого текстового редактора создайте новый файл. Затем вы можете перейти к следующему шагу. </p> <h4><span class="ez-toc-section" id="_2_HTML"> Шаг 2. Напишите HTML-код </span></h4> <p> Теперь мы собираемся добавить шаблонный код HTML. Это код, который позволит браузеру правильно отображать вашу веб-страницу. </p> <p> Скопируйте и вставьте приведенный ниже код в свой файл. Теперь ваш файл должен выглядеть так: </p>. <pre> <!DOCTYPE HTML> <html> <голова> <title>Ваше название здесь <тело> Ваш контент здесь.

    Сохраните html-страницу, нажав CTRL + S, или выберите файл, а затем сохраните. Убедитесь, что вы назвали файл в следующем формате: «имя», затем «.html» примеров index.html, cook.html.

    Вы можете использовать эти два правила при именовании файла веб-страницы:

    • использовать расширение имени файла .html: Расширение имени файла html сообщает компьютеру, что этот файл является веб-страницей и должен просматриваться веб-браузером.
    • Используйте подчеркивание или дефис вместо пробела: Если вы решите назвать файл более чем одним словом, используйте дефис или подчеркивание между словами. Если вы поставите пробелы в имени файла, веб-страница может не быть найдена веб-браузером.

    Выберите место для сохранения файла. После того, как вы выбрали место для сохранения файла, нажмите «Сохранить».

    Для просмотра файла. Используйте файловый менеджер, чтобы перейти к папке, в которой находится ваш HTML-файл. Щелкните правой кнопкой мыши файл и откройте его в браузере. Вы должны увидеть что-то вроде этого.

    Шаг 3. Добавьте текстовое содержимое

    Скопируйте контент, который вы написали ранее, или готовый контент, который я подготовил для вас. Вставьте его между тегами body.

    Обновите веб-страницу в браузере. Это будет выглядеть как кусок текста без абзацев или заголовков, показанных ниже.

    Шаг 4. Добавьте теги HTML

    Заголовки

    Сначала займемся заголовками. Проверьте, какая часть или текст был основным заголовком. В нашем примере это «Поедание насекомых: полное руководство по поеданию сверчков».

    Поместите этот текст между тегами h2, как показано ниже: 

      
    Поедание насекомых: полное руководство по поеданию сверчков

    Сохраните свою работу и проверьте результат в браузере.

    Пункты

    Для абзацев текста поместите каждый абзац текста между тегами

    html. Пример: 

     <р>
  Когда вы слышите о поедании насекомых, большинство людей приходит в ярость. Однако насекомые
  считается деликатесом во многих частях мира. Большинство насекомых съедено
  выращиваются на фермах, но в некоторых местах они не боятся есть насекомых
  собраны из дикой природы.

    

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

    Просмотрите результат в браузере.

    Шаг 6. Добавьте список

    Списки облегчают чтение группы вещей для наших глаз и мозга. Давайте добавим список типов маркеров: 

     <ул>
  
  • полезны для здоровья, так как в насекомых меньше жира.
    • 
  
  • 
    экологически чистый: для выращивания насекомых требуется меньше пищи/растений
    по сравнению с коровами. 
  
    • 
  
  • 
    люди, которые не едят молоко и мясные продукты, могут попробовать насекомые в качестве белка
    заменять.
  
    •

Обновите и просмотрите результат в браузере.

Шаг 7. Добавьте изображения

Запомните URL-адреса или изображения, которые вы сохранили. Сейчас самое время их раскрыть.
Мы собираемся использовать HTML-тег img Показывается,когда изображение не загружается для добавления ваших изображений на веб-страницу.

Если вы только что скопировали URL-адрес изображений, вы добавите URL-адрес в кавычки атрибута src. Не забудьте добавить атрибут alt, который показывает, когда изображение не может быть отображено. Пример: 

 <изображение
  src="https://avicndugu.github.io/practice-projects-html/cricket-eating/final/img/fried-crickets.jpg"
  alt="Жареные сверчки на витрине"
/>

Шаг 8. Вставьте видео с YouTube

Найдите соответствующее видео на YouTube. Найдя его, нажмите кнопку «Поделиться»/ссылку. Вы получите всплывающее окно. Нажмите на опцию встраивания.

Нажмите кнопку копирования, чтобы скопировать отображаемый код.

Вставьте свой код на веб-страницу, где вы хотите, чтобы видео отображалось. Для моего случая это код, который я получил: 

 
 
 Просмотр HTML-страницы в браузере. 

 
 

 
 Если вы выполнили все 8 шагов, у вас должна быть работающая HTML-страница, которой вы должны гордиться. 

  
 Шаг 9. Добавьте ссылку на ваш источник информации 
 
 
 Если вы скопировали некоторый контент с другой веб-страницы, считается целесообразным добавить URL-адрес, указывающий на исходный источник информации.  

 
 Вы можете добавить ссылку, используя  слов, объясняющих, что вы найдете, если щелкнете по ссылке  HTML-тег. 

 
 <а
  href="https://avicndugu.github.io/practice-projects-html/cricket-eating/final/"
  >Проект HTML и CSS Cricket
 

 
 Просмотр HTML-страницы в браузере. Теперь у вас должна быть ссылка внизу со словами: «Проект HTML и CSS Cricket». 

 
 

  
 Полный код для создания веб-сайта с использованием HTML 
 
 
 

  <голова>
    Ваше название здесь
  
  <тело>
     
Поедание насекомых: полное руководство по поеданию сверчков
 
    

      Когда вы слышите о поедании насекомых, большинство людей приходит в ярость. Однако насекомые
      считаются деликатесом во многих частях мира. Большинство насекомых
      съеденные выращены на ферме, но в некоторых местах они не уклоняются от еды
      насекомых, собранных в дикой природе.
    

    
Поедание насекомых считается:

    <ул>
      
  • полезны для здоровья, так как в насекомых меньше жира. 
    • 
      
  • 
        экологически чистый: для выращивания требуется меньше еды/растений
        насекомых по сравнению с коровами.
      
    • 
      
  • 
        люди, которые не едят молоко и мясные продукты, могут попробовать насекомых в качестве
        заменитель белка.
      
    • 
    
    <изображение
      src="https://avicndugu.github.io/practice-projects-html/cricket-eating/final/img/fried-crickets.jpg"
      alt="Жареные сверчки на витрине"
    />