Страница html это: Что такое веб-страница?

Что такое веб-страница?

Что такое web страница? Это документ, написанный на языке разметки гипертекста (HTML), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса.

Веб-страница может содержать текст, графику и гиперссылки на другие страницы и файлы.

Для просмотра веб-страницы требуется браузер (например, Internet Explorer, Edge, Safari, Firefox или Chrome). В браузере можно открыть веб-страницу, указав в адресной строке URL-адрес. Например, введя «https://www.computerhope.com/esd.htm», вы откроете страницу ESD Computer Hope.

Если вы не знаете URL-адреса сайта, который хотите посетить, можно использовать поисковую систему, чтобы найти веб-страницу или воспользоваться поиском по сайту.

Первая веб-страница была создана в CERN Тимом Бернерсом-Ли 6 августа 1991 года. Перед тем, как создать web страницу, вы можете посетить и просмотреть первый сайт и первую веб-страницу по адресу http://info.cern.ch/.

Сайт — это место, содержащее более одной веб-страницы. Например, наш ресурс является сайтом, который включает в себя тысячи различных веб-страниц, включая ту, которую вы сейчас читаете:

В приведенном выше примере URL-адреса «url.htm» — веб-страница, это всегда последняя часть URL-адреса. Для URL, которые не имеют окончаний .htm, .html, .php, .cgi, .pl или другого расширения файла, сервер загружает веб-страницу index.htm по умолчанию. Например, для URL-адреса страницы контактов нет веб-страницы. В этом случае загружается индексный файл по умолчанию из каталога /contact.

Мы уже упоминали, что для просмотра web страниц используются браузеры. Веб-страница состоит из нескольких элементов, включая CSS, изображения и JavaScript. Тело веб-страницы создается с использованием HTML. Этот код может быть создан с использованием HTML-редактора, написан человеком или сгенерирован с использованием серверных скриптов. Обычно веб-страница, созданная человеком, заканчивается расширением .htm или .html. Например, эта страница имеет имя файла «webpage.htm». Страницы, сгенерированные скриптом, могут заканчиваться на .cgi, .php, .pl и т.д.

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

1. Название сайта, логотип или название компании почти всегда находятся в верхнем левом углу каждой веб-страницы. Также неплохо использовать слоган или краткое описание страницы, чтобы дать новым посетителям представление о сайте. Этот элемент веб-страницы обычно является ссылкой, которая ведет на главную страницу;
2. Панель поиска позволяет посетителям быстро найти веб-страницу. Она должна присутствовать на каждой странице;
3. Панель или меню навигации обычно находится в верхней или левой части каждой веб-страницы. Она и должна включать в себя ссылки на каждый из основных разделов сайта;
4. Рекламные баннеры могут отображаться в разных местах на веб-странице. Обычно они отображаются в верхней, левой, правой или нижней части веб-страницы или включены в основной контент;
5. Социальные кнопки позволяют посетителям делиться ссылкой на веб-страницу на сайтах социальных сетей;
6. В созданных web страницах хлебные крошки помогают посетителю понять, где он находится, а также перейти к другим разделам сайта;
7. Заголовок должен находиться в верхней части каждой веб-страницы. Он создается с использованием HTML-тега <h2>.
8. Начальный абзац является одним из наиболее важных элементов веб-страницы. Он должен заинтересовать посетителя ознакомиться с содержимым веб-страницы. Один из способов привлечь внимание посетителей — вставить изображение рядом с начальным абзацем;
9. Каждая веб-страница должна быть разбита на заголовки более низкого уровня, которые позволяют посетителю легко просматривать контент и находить на странице то, что ему наиболее интересно. При создании веб-страницы это можно сделать с помощью HTML-тегов <h3> … <h6>;
10. Хорошая идея — предоставить посетителям ссылку или кнопку, перенаправляющую на форму обратной связи, чтобы они могли сообщить, была ли полезна им данная веб-страница или нет;
11. Дополнительная информация и инструменты, такие как кнопка для вывода страницы на печать, также могут быть полезны для пользователей;
12. Футер должен включать в себя дополнительную информацию, которая важна для компании или сайта. А также ссылки на другие веб-страницы;
13. Копирайт и любое юридическое или конфиденциальное уведомление также должны быть размещены на всех веб-страницах. В основах проектирования web страниц этот элемент не только может ссылаться на соответствующую юридическую информацию. Он также указывает, что посетители достигли конца веб-страницы;
14. Кнопка «Вверх страницы» может помочь посетителям быстро вернуться к верхней части веб-страницы, чтобы получить доступ к ссылкам меню.

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

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, дизлайки, отклики, подписки, лайки огромное вам спасибо!

Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «Web page»

Что такое веб-страница?

Веб-страница (Web page) является гипертекстовым ресурсом интернета. Такие страницы зачастую пишутся на языке HTML. 

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

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

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

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

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

Веб-страница, в свою очередь, должна соответствовать определенным требованиям. Рекомендовано соответствие со следующими требованиями:

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

что это такое, какими они должны быть и что на них писать

Делаем вашу страницу интересной и стимулируем подписчиков почаще заглядывать к вам на страницу или на сайт за покупками

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

Подпишись на рассылку и получи книгу в подарок!

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

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Рассмотрим пример. Аналогию можно провести с библиотекой. На стеллажах стоят книги — веб-сайты. Они могут быть из 1-2 страниц, а также содержать более 1 млн. Каждая страница книги (веб-сайта) и есть веб-страница.

Как мы уже говорили выше, каждая единица веб-ресурса (веб-страница) создается при помощи языка HTML, и обязательно содержит главный заголовок (Title), описывающие мета-теги (Keywords, Description) и тело (Body) — ее основную часть. В теле можно видеть подключаемые изображения, тексты, ссылки и т.д. Все это можно просмотреть при помощи интернет-браузера.

Какие страницы должны быть на сайте и как их продвигать

Самой важной единицей любого веб-ресурса считается Главная. Она, как правило, располагается в корневой директории и имеет название index.php, index.html и т.п.

Попасть на нее можно по следующему URL: http://домен/index.html или просто http://домен. С главной можно перейти на все остальные разделы веб-ресурса. Совокупность разделов (веб-страниц) в виде путей по ним называется структурой интернет-сайта.

Пример структуры сайта:

Главная
— Информация
— Статьи
— Услуги
— Грузоперевозки
— Аренда машин
— Контакты

Как видно из представленного примера, у веб-документов может быть несколько уровней вложенности. Первый — главная страница, второй — документы “Информация”, “Статьи”, “Услуги”, “Контакты”, третий — “Грузоперевозки”, “Аренда машин”. Уровней может быть больше трех.

При работе над продвижением веб-проекта следует придерживаться правила 3-х кликов: переход на самый дальний документ не должен занимать более 3 кликов с главной. В представленном нами примере документы третьего уровня находятся в 2-х кликах (“Услуги” — первый клик от Главной, “Грузоперевозки” — второй клик. Теоретически из раздела “Грузоперевозки” можно сделать еще 1 клик на внутренний документ, доступный для продвижения.

Как поисковый робот индексирует веб-сайты

Поисковик изначально приходит на главную страницу. Затем собирает с нее ссылки и проходит по ним. Так в его базу попадают документы второго уровня. Следом начинается обработка документов второго уровня по такому же принципу. Часто до документов далее 3-го уровня робот-поисковик просто не доходит.

Если структура вашего веб-проекта расширенная, и без глубоких уровней вложенности обойтись не получится, — помогите поисковику. Необходимо добавить карты сайта HTML и XML, которые помогут боту увидеть структуру веб-проекта.

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

На каждую HTML-страницу следует распределять от 1 до 10 ключей, в зависимости от их частотности и тематики проекта.

Что писать на страницах сайта

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

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

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

Структура страницы

• Шапка (хедер) — главная часть вверху, сообщающая посетителю, о чем сайт.
• Контентная часть — содержимое: тексты, картинки, видео, формы отправки, калькуляторы и многое другое.
• Подвал (футер) — нижняя “закрывающая” часть.

Подробнее про структуру страницы можете почитать тут.

Что еще может быть на каждой веб-странице

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

Как создается каждая страница

По правилам разработки веб-ресурсов, сначала художник рисует в графическом редакторе дизайн. Затем верстальщик “разрезает” его на кусочки и вставляет HTML-коды. Получается полноценная, но пустая HTML-страница. После этого программист подключает систему управления — и все отдается контент-менеджеру, который наполняет сайт уникальным содержимым.

Какие HTML-страницы любит поисковая система

• Поисковик предпочитает текст. Если на сайте много красивых картинок, но мало текста — это плохо.
• Откажитесь от тяжелых изображений, java-скриптов и сложной анимации. Уделите больше внимания текстам, которые должны быть уникальными, интересными и грамотными.
• Тексты должны быть структурированы, наполнены ключевыми словами и синонимами “в меру”. Иначе может последовать наказание за переспам.
• До каждой веб-страницы можно дойти с помощью кликов по ссылкам. То есть у вас не должно быть страниц, на которые не ссылается ни одна другая.
• Придерживайтесь правила трех кликов.
  URLы должны быть человекопонятнми и короткими. Желательно применять в URL ключи на латинице. К примеру, сайт.ru/domen/price. Избавляйтесь от динамических URL и огромного количества слеш в адресе (не более 3 слешей).
• Динамическая веб-страница генерируется программно в виде HTML, и имеет адрес типа сайт/index.php?id=1039.
• Если на конечный документ ведет ссылка сайт.ru/str/, то это плохо, потому что слеш в конце URL сообщает боту о том, что на там еще есть вложенные страницы (и ссылки на них), которые нужно проиндексировать. Если робот не находит их, сайт.ru может быть понижен в выдаче.
• Код должен быть коротким и валидным (безошибочным). Все стили оформления (тексты, блоки, картинки и т.п.) следует выносить в отдельный файл CSS.
• Нельзя копировать чужой текст и размещать его на своем проекте. Поисковики любят уникальные тексты. Если без копирования не обойтись, то количество такого текста не должно превышать 10%, и под каждым из них должна стоять прямая ссылка на ресурс-первоисточник.

Сайт-одностраничник — хорошо или плохо

Если вы собираетесь продвигать веб-ресурс белыми методами и не покупать контекстную рекламу — забудьте о разработке лэндинга. Самое главное — текст, и ваш одностраничник никогда не сможет конкурировать с полноценным веб-проектом.

Но о том, каким должен быть объем “правильного” полноценного веб-проекта, никто сказать не сможет. Количество страниц веб-ресурса зависит от тематики и степени продвинутости ваших конкурентов.

Правильная базовая структура веб-страницы & новости по созданию сайтов от ABCname

Базовая структура веб-страницы

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

Базовые элементы страницы веб-сайта

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

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

Панель навигации сайта

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

Основное содержание веб-страницы

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

Боковая панель страницы

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

Нижний колонтитул

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

Составные части HTML-макета веб-страницы более подробно

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

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

Для реализации такой семантической разметки HTML предоставляет специальные теги, которые используют для представления разделов, например:

Заголовок: < header >.

Панель навигации: < nav >.

Основное содержимое: < main >, с различными подразделами содержимого, представленными элементами < article >, < section > и < div >.

Боковая панель: < aside >; часто помещается внутри < main >.

Нижний колонтитул: < footer >.

Итог

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

Помогла ли вам статья?

350
раз уже помогла

Комментарии: (0)

Написать комментарий

Как я могу просмотреть свою веб-страницу HTML на своем телефоне

Я создал веб-страницу HTML, которая также использует CSS и JS. Когда я смотрю это на своем PC, он работает и выглядит так, как должен.

Как лучше всего поместить это на мой телефон?
Я попытался поместить все соответствующие файлы на свой телефон, но он загрузит только базу HTML, все файлы были в той же папке, что и код HTML, только ссылается на имя CSS и JS, поскольку они находятся в одном файле на PC.

Я ссылаюсь на CCS как: <link href="style.css" rel="stylesheet" type="text/css"/> и сценарий как <script type="text/javascript" src="script.js">

Я открываю HTML на своем PC с помощью Google Chrome и пытаюсь просмотреть его на своем телефоне с помощью google chrome.
У меня есть телефон android.

Заранее спасибо.

javascript

android

html

css

Поделиться

Источник

JackU    

17 января 2019 в 14:47

6 ответов

7

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

Для этого я предпочитаю пакет live-server npm. Просто введите npm install -g live-server . Перейдите в каталог, в котором находится ваш веб-сайт, а затем запустите live-server . Он также покажет порт, на котором вы работаете.

Чтобы узнать свой личный IP-адрес, откройте другую командную строку и введите ifconfig (или ipconfig, если вы находитесь на windows).

Перейдите на ip-address:port-number на своем мобильном устройстве, и вы увидите свой веб-сайт. Пример частного ip-адреса и номера порта: 192.168.1.40:8080

Поделиться

yigitusta    

17 января 2019 в 15:01

3

Самый простой способ предварительного просмотра на мобильном устройстве-это использование таких веб-сайтов, как :
https://search.google.com/тест/мобильная версия ?
Я надеюсь, что это поможет вам определить вашу проблему.

Поделиться

Taha Hamedani    

02 февраля 2020 в 08:48

1

Если вы просто хотите протестировать свой веб-сайт на телефоне, вы можете подключить свой телефон через USB и подключить рабочий стол chrome к мобильному устройству chrome.

Вот руководство от Google:

https://developers.google.com/web/инструменты/chrome-devtools/remote-debugging/

Это должно позволить вам открыть и отредактировать сайт на вашем компьютере и просмотреть его на телефоне, чтобы увидеть, работает ли он.

Для постоянного решения вы можете разместить свой сайт на webserver и подключиться к нему через Интернет.

Поделиться

K1ngjulien_    

17 января 2019 в 15:17

1

Запустите веб-страницу с IDE, чтобы она была открыта для порта на вашем компьютере.
Посмотрите IP вашего компьютера и убедитесь, что вы находитесь в одной сети со своим мобильным устройством. Перейдите в своем браузере на IP-порт PC, и вы увидите его.

Поделиться

Stefan    

17 января 2019 в 14:53

0

Поместите свой стиль css внутрь html markup и откройте его в своем телефоне. Это сработает. Хотя я не уверен, что он будет отображать ваши изображения, но вы можете проверить отзывчивость вашего сайта.

Поделиться

Mesta    

23 февраля 2020 в 21:38

-3

Прежде всего, включите этот тег над вашим заголовком

Тогда есть две важные вещи,
Если в вашем коде HTML есть идентификатор CSS в отдельном файле, включите его в сам файл HTML с помощью тега, и то же самое происходит со скриптом Java, включите этот код в сами теги.
Еще одна вещь, которую я хочу подчеркнуть, заключается в том, что если ваша веб-страница состоит из изображений, которые находятся локально на вашем PC, эти изображения не будут отображаться на вашем мобильном телефоне.
Итак, используйте любые изображения из google и связывайте их.
Надеюсь, все ясно 🙂

Поделиться

Primph    

16 июля 2020 в 03:30

Похожие вопросы:

как разместить свою веб-страницу в localhost на моем Mac?

Я работаю над веб-страницей & и хотел бы посмотреть, как она отображается в моем браузере iPhone safari. Вместо того чтобы официально покупать домен & хостинга, потому что он находится в…

Как я могу просмотреть веб-сайт, работающий в localhost на компьютере в браузере chrome?

Я работаю над веб-приложением rails, в настоящее время фокусируюсь на мобильном дизайне и хотел бы просмотреть экраны html, которые я разработал в мобильном браузере chrome на моем Galaxy Nexus…

Как я могу открыть страницу html на телефоне android с моего локального сервера IIS?

Я хочу показать свою страницу html на моем телефоне android! Моя система win7, и на моем lochal IIS я создал новый виртуальный каталог, но мой телефон android не открывает страницу html, а только…

Localhost работает на mac.. могу ли я просмотреть его на своем телефоне Android?

Запуск проекта ruby on rails на моем mac. Мне нужно проверить его на моем телефоне android. Есть ли способ просмотреть мой mac localhost на моем телефоне android?

Как я могу просмотреть свою веб-страницу HTML в мобильном эмуляторе и сделать свой код более эффективным?

var Person= {}; Person.Character= function(firstName, lastName, gender, age) { this.FirstName= firstName; this.LastName= lastName; this.Gender= gender; this.Age= age; }…

Как просмотреть локальный сайт на мобильном телефоне?

У меня есть ноутбук windows 7 и телефон, оба подключены к моей домашней сети wifi. У меня есть локальный сайт, работающий на моем ноутбуке IIS7 windows. Если я наберу localhost, то смогу увидеть…

как я могу сделать свою пользовательскую веб-страницу html индексной страницей моего сайта wordpress

Я создал пользовательскую веб-страницу html, которую хочу использовать в качестве домашней страницы или индекса моего сайта. Однако мой сайт-это сайт Word press. Как я могу сделать свою…

Не могу прокрутить свою веб-страницу на телефоне

Я добавил следующие строки в свой заголовок, но когда я пытаюсь просмотреть свою веб-страницу на устройстве android, я не могу прокрутить вниз. <meta name=viewport content=width=device-width;…

Как запустить веб-страницу jquery mobile на мобильном телефоне(Android)

Я разработал веб-страницу jquerymobile на своем ноутбуке. Веб — страница состоит из мобильной карты Openlayers с некоторыми данными. Он прекрасно работает на моем рабочем столе, но я хочу проверить…

Как я могу просмотреть сервер Django на своем телефоне?

Как я могу просмотреть свое приложение с сервера разработчиков Django на своем телефоне? Я пытаюсь получить доступ к веб-приложению с моего телефона Nexus.

описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги

Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами <head> и </head>, которые никак не отображаются браузером (за исключением содержимого тега <title>). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.

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

Функции мета-тегов

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

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

Группы метатегов

Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

Группа значений атрибута

NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords»:

<!DOCTYPE html>
<html>
 <head>
  <title>keywords</title>
  <meta name="keywords" content="HTML,CSS,PHP,JavaScript"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«description» (описание страницы)

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

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

<!DOCTYPE html>
<html>
 <head>
  <title>description</title>
   <meta name="description" content="Сайт об HTML и CSS"> 
   <meta name="keywords" content="HTML,CSS,PHP,JavaScript">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="author" content="Maxim White">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

• index — страница должна быть проиндексирована;
• noindex — страница не индексируется;
• follow — гиперссылки на странице учитываются;
• nofollow — гиперссылки на странице не учитываются
• all — включает значения index и follow, включен по умолчанию;
• none — включает значения noindex и nofollow.

HTML-код с «robots»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">
  <meta name="author" content="Maxim White">
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Группа значений атрибута

HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type»:

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>  
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS">
  <meta name="author" content="Maxim White">
  <meta name="robots" content="noindex, nofollow">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

В HTML5 указание кодировки упрощено:

<meta charset="UTF-8">

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh»:

<!DOCTYPE html>
<html>
 <head>
  <title>Автозагрузка</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru.
Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

«Content-Language»

Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

HTML-код с «content-language»:

<!DOCTYPE html>
<html>
 <head>
  <title>Язык документа</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <meta http-equiv="content-language" content="ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

В HTML5 указание языка упрощено:

<html lang="ru">

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

Пример HTML:

Попробуй сам

<!DOCTYPE html>
<html>
 <head>
  <title>Заголовок страницы</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="keywords" content="HTML, Meta Tags, метаданные">
  <meta name="description" content="Сайт об HTML и CSS">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Задачи

Итоговое задание

[10-14]

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

С помощью одинарного тега <meta> задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Ключевые слова</title>  
 </head>
 <body>
  <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta name="keywords" content="HTML,CSS,JavaScript">
 <title>Ключевые слова</title>  
 </head>
 <body>
  <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
 </body>
</html>

Индексация веб-страницы

С помощью одинарного тега <meta> разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Индексация и переход по ссылкам</title>  
 </head>
 <body>
  <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta name="robots" content="index, nofollow">
  <title>Индексация и переход по ссылкам</title>  
 </head>
 <body>
  <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
 </body>
</html>

Автоматическая перезагрузка страницы

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Автоматическая перезагрузка страницы</title>  
 </head>
 <body>
  <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="30">
  <title>Автоматическая перезагрузка страницы</title>  
 </head>
 <body>
  <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
 </body>
</html>

Автозагрузка новой страницы

Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>

Материал взят с разрешения админа здесь

Создание html-страницы | Nejalko.ru — IT, web-разработка и самообразование

Здравствуйте, уважаемые читатели Nejalko.ru!

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

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

В любом удобном для Вас месте на жестком диске создаем папку с названием, например, «site«, внутри нее создаем еще одну папку с названием «www«. Можно заранее сделать отдельную папку, назвать ее «Сайтостроение» и в ней размещать все файлы, получаемые за время изучения html учебника. Папка «www» нужна нам для привыкания к правильной работе с сайтами. Дело в том, что на любом хостинге (там, где готовые сайты располагаются в интернете) Ваш сайт будет находится в папке именно с таким названием, поэтому доводим до автоматизма сразу, чтобы в будущем было проще.

Внутри папки «www» создаем текстовый документ с названием «index.html«, чтобы сделать расширение «.html» нужно у нового документа во время присвоения ему названия стереть расширение .txt и дописать .html, причем после «.html» не должно оставаться ни одного символа.

Если документ уже создан в виде index.txt, то его нужно, опять же, переименовать и дописать .html, удалив все остальное, что идет через точку или открыть файл, написать в нем код и выбрать в меню «Файл-Сохранить как» затем в нижнем выпадающем списке «Тип файла» выбрать пункт «Все файлы (*.*)«

И в поле «Имя файла» стереть «txt», а дописать вместо него «html»

Если Вам где-то встретится файл с расширением «htm» (что такое расширение файла), то этот файл создан также с использованием языка html, можете сами попробовать менять расширение файлов с «html» на «htm» и разницы в работе документа не увидите.

Открывать только что созданный файл можно через «Блокнот», а если Вы работаете в Total Commander, то выбирайте мышкой документ и нажимайте «F4», на мой взгляд еще удобнее блокнота.

С предварительной подготовкой закончили, теперь можно создать первую html-страницу, так сказать, на чистом листе. Для этого вспоминаем предыдущую статью и создаем страницу сайта за 11 шагов (можете копировать из правой колонки таблицы и вставлять в свой «index.html»:

А получиться должно следующее:

Так выглядит код этой страницы:

Ну как Вам? Согласен, не особо впечатляет, но это самое-самое начало и времени ушло на создание первой маленькой и простенькой html-страницы ровно 2 минуты.

Как мы видим, на странице выводится только то, что указано между тегами <body></body> и это единственный правильный вариант.

Но в этом примере есть недочет, не пугайтесь, он не страшный, но лучше его не делать, а заключается он в том, что текст в html должен находится в соответствующих тегах, желательно тегах параграфа: <p>текст</p>. Это не только правильно, но еще и удобно, судите сами: на странице много текста, но в коде все абзацы (параграфы) будут аккуратно разделены соответствующими тегами <p> в начале параграфа и </p> — в конце параграфа, следовательно мы сразу можем увидеть, где параграф, например, третий снизу или пятый от начала. Кроме всего прочего, использование тегов дает возможность задать каждому параграфу свой стиль, но об этом позже.

Давайте заключим наш текст в теги параграфа, то есть добавим тег <p> ПЕРЕД словом «Это», а затем поставим тег </p> ПОСЛЕ слова «HTML!» в коде страницы, сохраним и посмотрим, что из этого получится (сохранять можно комбинацией Ctrl+S).

Чтобы увидеть изменения обновите Вашу страницу кнопкой «F5» и увидите, что в итоге текст «отпрыгнул» немного вниз и в сторону, но лучше будет видно на большем количестве текста. Снова заходим в код и добавляем еще пару предложений, заодно убираем теги параграфов у первого предложения:

Сохраните этот код, обновите Вашу html-страничку и увидите… именно, мешанину текста, потому что без тегов параграфов браузер не понимает, в каком место ему нужно что разделить или объединить.

У меня, первое время, в связи с данной особенностью языка HTML, возникал когнитивный диссонанс, как же так, в Word’ e нажимаешь «Enter» и создается новый абзац, а в html нажимаешь тот же «Enter», предложение в коде перескакивает как и нужно, но после сохранения на странице никаких изменений. Так вот, чтобы в html создать новый абзац, необходимо текст этого абзаца заключить в уже знакомые нам теги <p> перед параграфом и </p> в конце параграфа. Давайте прямо сейчас это и сделаем, каждое предложение заключим в теги параграфа, вот так:

Главное, что нужно запомнить, если тег двойной (парный), то открыв его, обязательно закройте там, где действие этого тега должно закончится.

Вот что у нас получилось после сохранения кода и обновления нашей маленькой html-странички «index.html»:

Согласитесь, так гораздо приятнее, читать уже можно и глаза «на лоб не лезут».

Закрепим еще раз: без тегов параграфа у нас получается сплошной, практически не читаемый текст, несмотря на то, сколько раз в коде Вы нажмете «Enter», но стоит прописать соответствующие случаю теги параграфа, как все становится понятно и красиво, поэтому не забывайте помещать элементы html-страницы в соответствующие им теги: текст в текстовые, таблицы в теги таблиц, изображения в теги изображения и так далее.

Ну, и напоследок, есть такой интересный одиночный тег <br>, если его поставить в конце предложения, то следующее предложение будет отображаться на следующей строке, данный тег действует, как одно нажатие «Enter» в том же блокноте, то есть переносит стоящий за ним текст на следующую строку.

Попробуйте по вставлять тег <br> в разные части параграфов (или даже предложений) и понаблюдайте за результатом, так сказать, ознакомьтесь и закрепите.

Напомню еще раз, теги <br>, <img> — одиночные, то есть не требуют закрытия, а теги <p></p>, <title></title>, <html></html>, <head></head> обязательно должны закрываться с помощью слеша «/» перед второй частью тега.

Надеюсь, все запомнили, насколько просто сделать страничку сайта на html? Замечательно, тогда двигаемся далее. В следующей статье поработаем с текстом в html.

Хорошего настроения, друзья!

Поделиться, если понравилось

Как удалить последние просмотренные файлы проводника | Small Business

Internet Explorer имеет режим просмотра InPrivate, который предотвращает отображение недавно просмотренных страниц в вашей истории, но его необходимо включить, прежде чем он заработает. Если вы когда-нибудь забудете включить эту функцию, но посетите страницы, которые не хотели бы видеть посторонними глазами, вам придется вручную удалить их из своей истории. С помощью приложения IE вы можете очистить только всю свою историю; с IE для настольных ПК вы можете действовать более хирургически, удаляя только те сайты, которые вы не хотите показывать другим.

Удалить всю историю в приложении IE

Откройте приложение Internet Explorer 10.

Откройте панель чудо-кнопок и щелкните чудо-кнопку «Настройки».

Щелкните «Свойства обозревателя» и нажмите кнопку «Удалить» под заголовком «Удалить историю браузера».

Удалить всю историю в IE для настольного компьютера

Откройте настольную версию Internet Explorer.

Щелкните маленький значок шестеренки в правом верхнем углу окна, чтобы получить доступ к меню «Настройки».

Выберите «Безопасность», а затем нажмите «Удалить историю просмотров».

Щелкните, чтобы выбрать «История». Если вы хотите удалить только свою историю, отмените выбор всего остального, но у вас есть возможность удалить другие типы данных, включая временные файлы Интернета, файлы cookie и историю загрузок. Сделайте свой выбор и нажмите «Удалить».

Удалить определенные элементы истории в IE для настольного компьютера

Откройте настольную версию Internet Explorer.

Щелкните значок звездочки в правом верхнем углу окна, чтобы открыть избранное.

Выберите вкладку «История», чтобы просмотреть сайты, которые вы посетили.

Щелкните правой кнопкой мыши сайт, который вы не хотите видеть другими, а затем нажмите «Удалить», чтобы удалить его из истории браузера. При необходимости повторите.

Ссылки

Советы

• Чтобы активировать режим просмотра InPrivate в приложении IE, проведите вниз от верхнего края экрана или щелкните правой кнопкой мыши фон, чтобы открыть меню вкладок.Щелкните или коснитесь «…» в правом углу панели, а затем щелкните «Новая вкладка InPrivate». В настольной версии откройте новую вкладку и нажмите «Просмотр InPrivate» в нижней части окна.
• Эта статья относится к Internet Explorer 10. Описанные процедуры могут измениться в прошлых или будущих версиях программного обеспечения.

Writer Bio

Роберт Кингсли пишет технические копии и процедурные документы с 2007 года. Он имеет многолетний опыт работы с сетями и устранением неполадок оборудования, чтобы помочь читателям решить их проблемы, связанные с информационными технологиями.Кингсли получил степень младшего специалиста по компьютерным сетевым системам в Техническом институте ITT в Вобурне, штат Массачусетс.

1. Знакомство с HTML: язык Интернета

Глава 1. Знакомство с HTML: язык Интернета

Единственное, что стоит между вами и выходом в Интернет, — это обучение чтобы говорить на жаргоне :

HyperText Markup Language, или сокращенно HTML. Итак, приготовьтесь к урокам языка.После этой главы вы не только поймете некоторые основные элементов HTML, но также сможете говорить на HTML с небольшим стилем . Черт возьми, к концу этой книги вы будете говорить на HTML, как если бы выросли в Уэбвилле.

Веб-видео убило радиозвезду

Хотите получить идею? Продать что-нибудь? Просто нужна отдушина для творчества? Обратитесь к Интернету — нам не нужно говорить вам, что он стал универсальной формой общения.Более того, это форма общения , в которой можете участвовать ВЫ, .

Но если вы действительно хотите эффективно использовать Интернет, вы должны кое-что знать о HTML — не говоря уже о некоторых вещах о как работает Интернет. Давайте посмотрим с высоты 30 000 футов:

Что делает веб-сервер?

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

Что делает веб-браузер?

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

Но как браузер узнает, как отображать страницу? Вот где на помощь приходит HTML.HTML сообщает браузеру все о содержании и структуре страницы. Давайте посмотрим, как это работает …

Что вы пишете (HTML)

Итак, вы знаете, что HTML — это ключ к тому, чтобы браузер отображал ваши страницы, но как именно выглядит HTML? И что он делает?

Давайте взглянем на небольшой HTML … представьте, что вы собираетесь создать веб-страницу для рекламы Head First Lounge , местной встречи с хорошими мелодиями, освежающими эликсирами и беспроводным доступом.Вот что вы должны написать в HTML:

Relax

Мы еще не ожидаем, что вы знаете HTML.

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

Когда браузер читает ваш HTML, он интерпретирует все теги , окружающие ваш текст.Теги — это просто слова или символы в угловых скобках, например ,

,

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

Давайте посмотрим, как браузер интерпретирует теги в Head First Lounge:

Ваш большой перерыв в Starbuzz Coffee

Starbuzz Coffee зарекомендовала себя как самая быстрорастущая кофейня в мире.Если вы видели один на своем углу, посмотрите через улицу — вы увидите еще один.

На самом деле, они выросли так быстро, что им даже не удалось создать веб-страницу … и в этом ваш большой прорыв: случайно, покупая чай Starbuzz Chai, вы наткнетесь на Starbuzz Генеральный директор …

Brain Power

Решения, решения. Проверьте свой первый приоритет ниже (выберите только один):

Примечание

Генеральный директор что-то пишет на салфетке и протягивает вам…

Примечание

* Если вы случайно выбрали вариант A, B или D на предыдущей странице, мы рекомендуем вам передать эту книгу в хорошую библиотеку, использовать ее в качестве растопки этой зимой или, черт возьми, вперед и продайте его на Amazon и заработайте немного денег.

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

Конечно, единственная проблема со всем этим заключается в том, что вы еще не создали никаких веб-страниц. Но именно поэтому вы решили сначала погрузиться в HTML, верно?

Не беспокойтесь, вот что вы собираетесь делать на следующих нескольких страницах:

1. Создайте файл HTML с помощью вашего любимого текстового редактора.

2. Введите в меню, которое генеральный директор Starbuzz написал на салфетке.

3. Сохраните файл как «index.html».

4. Откройте файл index.html в своем любимом браузере, сделайте шаг назад и посмотрите, как происходит волшебство.

Создание файла HTML (Mac)

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

В этой книге мы будем использовать TextEdit на Mac; однако, если вы предпочитаете другой текстовый редактор, он также должен работать нормально. А если вы работаете в Windows, вам нужно пропустить пару страниц к инструкциям для Windows.

Шаг первый:

• Перейдите в папку Applications

  Приложение TextEdit находится в папке Applications . Самый простой способ попасть туда — выбрать «Новое окно Finder» в меню «Файл» Finder, а затем найти приложение прямо в ярлыках.Когда найдете, нажмите «Приложения».

Шаг второй:

• Найдите и запустите TextEdit

  У вас, вероятно, будет много приложений, перечисленных в папке Applications , поэтому прокрутите вниз, пока не увидите TextEdit. Чтобы запустить приложение, дважды щелкните значок TextEdit.

Шаг третий (необязательно):

• Сохраните TextEdit в доке

  Если вы хотите облегчить себе жизнь, нажмите и удерживайте значок TextEdit в Dock (появляется этот значок после запуска приложения).Когда появится всплывающее меню, выберите «Параметры», а затем «Сохранить в доке». Таким образом, значок TextEdit всегда будет отображаться в вашем Dock, и вам не придется искать его в папке Applications каждый раз, когда вам нужно его использовать.

Шаг четвертый:

• Измените настройки TextEdit

  По умолчанию TextEdit находится в режиме «RTF», что означает, что он добавит собственное форматирование и специальные символы в ваш файл при сохранении это — не то, что вы хотите.Итак, вам нужно изменить настройки TextEdit, чтобы TextEdit сохранял вашу работу в виде чистого текстового файла. Для этого сначала выберите пункт меню «Настройки» в меню TextEdit.

Шаг пятый:

• Задайте настройки для Обычный текст

  Когда вы увидите диалоговое окно «Настройки», вам нужно сделать три вещи.

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

  Убедитесь, что на вкладке «Открыть и сохранить» установлен флажок «Игнорировать команды отформатированного текста в файлах HTML».

  Наконец, убедитесь, что для параметра «Добавить расширение .txt к файлам с обычным текстом» установлено значение и .

  Вот и все; чтобы закрыть диалоговое окно, нажмите красную кнопку в верхнем левом углу.

Шаг шестой:

• Закройте и перезапустите

  Теперь выйдите из TextEdit, выбрав «Выйти» в меню TextEdit, а затем перезапустите приложение. На этот раз вы увидите окно без меню необычного форматирования текста вверху.Теперь вы готовы создать HTML-код.

Создание файла HTML (Windows)

Note

Или другая версия Windows

Если вы читаете эту страницу, вы должны быть пользователем Windows 7. В противном случае вы можете пропустить пару страниц вперед. Или, если вы просто хотите сидеть сзади и не задавать вопросы, мы тоже не против.

Note

Если вы используете другую версию Windows, вы также найдете там Блокнот.

Для создания файлов HTML в Windows 7 мы будем использовать Блокнот — он поставляется с каждой копией Windows, цена приемлемая, и им легко пользоваться. Если у вас есть собственный любимый редактор, работающий в Windows 7, это тоже хорошо; просто убедитесь, что вы можете создать простой текстовый файл с расширением «.html».

Предположим, вы используете Блокнот. Вот как вы собираетесь создать свой первый HTML-файл.

Шаг первый:

• Откройте меню Пуск и перейдите в Блокнот.

  Приложение «Блокнот» можно найти в Accessories . Самый простой способ попасть туда — щелкнуть меню «Пуск», затем «Все программы», а затем «Стандартные». Вы увидите список Блокнота.

Шаг второй:

Шаг третий (необязательно):

• Не скрывайте расширения известных типов файлов.

  По умолчанию проводник Windows скрывает расширения файлов известных типов. Например, файл с именем «Irule.html »будет отображаться в проводнике как« Irule »без расширения« .html ».

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

  Сначала откройте «Параметры папки», нажав кнопку «Пуск», «Панель управления», «Оформление и персонализация», а затем — «Параметры папки».

  Затем на вкладке «Просмотр» в разделе «Дополнительные настройки» прокрутите вниз, пока не увидите «Скрыть расширения для известных типов файлов» и снимите отметку с этого параметра.

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

Тем временем, вернемся в Starbuzz Coffee …

Хорошо, теперь, когда вы знаете основы создания текстового файла, вам просто нужно загрузить некоторый контент в текстовый редактор, сохранить его, а затем загрузите его в свой браузер.

Начните с ввода напитков прямо с салфетки генерального директора; эти напитки — содержание вашей страницы.Вы добавите некоторую разметку HTML, чтобы немного структурировать контент, но пока просто наберите базовый контент. Пока вы это делаете, продолжайте и добавьте «Starbuzz Coffee Beverages» в верхней части файл.

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

Чтобы все это начать, выберите «Сохранить» в меню «Файл», и вы увидите диалоговое окно «Сохранить как».Тогда вот что вам нужно сделать:

1. Сначала создайте папку «starbuzz» для всех ваших файлов, связанных со Starbuzz. Вы можете сделать это с помощью кнопки «Новая папка».

2. Затем щелкните вновь созданную папку «starbuzz», затем введите «index.html» в качестве имени файла и нажмите кнопку «Сохранить».

Открытие веб-страницы в браузере

Готовы ли вы открыть свою первую веб-страницу? В любимом браузере выберите «Открыть файл… »(или« Открыть … »в Windows 7 и Internet Explorer) в меню« Файл »и перейдите к файлу« index.html ». Выберите его и нажмите «Открыть».

Возьмите свою страницу на тест-драйв

Успех! Вы загрузили страницу в браузер, хотя результаты немного … э-э … неудовлетворительные. Но это потому, что все, что вы до сих пор делали, — это создавали страницу и просматривали ее в браузере. И пока вы набрали только контент веб-страницы.Вот где на помощь приходит HTML. HTML дает вам возможность сообщить браузеру о структуре вашей страницы. Какая структура? Как вы уже видели, это способ разметки текста, чтобы браузер знал, что такое заголовок, какой текст находится в абзаце, какой текст является подзаголовком и т. Д. Как только браузер узнает немного о структуре, он сможет отображать вашу страницу в более понятной и удобочитаемой форме.

У вас есть HTML-файл с разметкой — это делает веб-страницу? Почти.Вы уже видели теги , , , и . Как только вы это сделаете, сохраните изменения и перезагрузите файл в браузере.

Хорошо, вы видели небольшую разметку, поэтому давайте увеличим масштаб и посмотрим, как на самом деле работают теги.

Примечание

Чтобы сообщить браузеру о структуре вашей страницы, используйте пары тегов вокруг вашего контента.

Помните:

Элемент = Открывающий тег + Контент + закрывающий тег

Сила мозга

Теги могут быть немного более интересными, чем то, что вы видели до сих пор. Вот тег абзаца с небольшим добавлением к нему. Как вы думаете, что это значит?

  
 Гладкая, мягкая 
  смесь кофе из Мексики, Боливии 
  и Гватемала.
  

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

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

Вот где на помощь приходит CSS. CSS дает вам способ описать, как ваш контент должен быть представлен.Давайте промочим ноги, создав CSS, который сделает страницу Starbuzz более презентабельной (и при этом начнем вашу карьеру в Интернете).

Примечание

CSS — это сокращение от Cascading Style Sheets. Мы рассмотрим, что все это означает позже, а пока просто знайте, что CSS дает вам способ указать браузеру, как должны выглядеть элементы на вашей странице.

Чтобы добавить стиль, вы добавляете новый (скажите это вместе с нами) E-L-E-M-E-N-T на свою страницу — элемент