HTML-уроки. Моя первая страница | Заметки программиста
Осваивать язык html лучше всего самостоятельно создавая интернет странички. Для начала определим где будут хранится файлы нашего сайта. Например, я на диске D: создам папку «HTML-уроки», в ней подпапку «Урок 1». В дальнейшем у нас будут добавляться еще подпапки для картинок, css и т.п.
Теперь открываем редактор (например Блокнот Windows или Nodepad++) и набираем в нем html-код:
<html>
<head>
<title> Урок 1 <title>
</head>
<body>
<h2>Моя первая html-страничка</h2>
<p>А это текст моей первой html-странички.</p>
</body>
<html>Теперь файл надо сохранить в нашу папку — жмем «Сохранить как…» -> «D:\HTML-уроки\Урок 1» и указываем имя index.html или index.htm Какая разница html с htm? Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению.
После того как файл сохранен мы можем посмотреть нашу первую страничку открыв его в браузере.
Давайте теперь разберемся что мы написали в нашем файле index.htm:
- Тег <hеаd> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую на веб-странице, за исключением тега.
- Тег <titlе> определяет заголовок документа.
- Тег <bоdy> предназначен для хранения содержания веб-страницы (контента).
- Теги <Н1>, <Н2>, <Н3>, <Н4>, <Н5>, и <Н6> это заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Тег <Н1> наиболее важный заголовок первого уровня, а <Н6> является наименее значительным.
- Тег <р> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой.
Похожие записи
Первая страница: учебник HTML:
Начало
С чего начать?
Создание Web-страницы можно разбить на несколько этапов.
- С помощью любого текстового редактора создаем текстовый файл,
содержащий команды языка HTML.
Здесь можно использовать Блокнот или WordPad из стандартных программ,
а также любой другой текстовый редактор, например, встроенный редактор оболочки FAR.
Обратите внимание, что файл должен быть сохранен в виде простого текстового документа
(без оформления) и иметь расширение *.htm или *.html. Русские буквы
должны быть набраны в кодировке
- Открыть файл в браузере. Для этого можно использовать два способа
- Открыть браузер, выбрать пункт меню Файл-Открыть и найти файл на диске.
- Найти файл в Проводнике (или через Мой компьютер) и «открыть» его, щелкнув дважды по значку. При этом запускается браузер, установленный по умолчанию. В оболочке FAR можно выделить файл курсором и нажать клавишу Enter.
- Чтобы внести изменения в страницу, можно выбрать команду Просмотр источника (или Просмотр в виде HTML) из меню Вид или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в Блокноте или WordPad-е (для браузера Opera). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на F5 или кнопку обновления).
А проше всего — взять на этом сайте бесплатный HTML-редактор HEFS, в котором вы сможете редактировать текст Web-страницы и сразу посмотреть ее в«рабочем» виде.
Тэги
Размещение информации на Web-странице задается с помощью специальных команд — тэгов. Тэг — это команда, которую понимает браузер. Тэги заключаются в угловые скобки < и >. Можно записывать тэги как маленькими, так и большими буквами (и даже вперемежку).
Тэги бывают парные и непарные. Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например, рисунок или разделительную линию. Например, тэг
<BR>
означает переход на новую строку в тексте (без абзацного отступа).
Парный тэг состоит из двух частей — открывающего и закрывающего тэгов. Закрывающий тэг имеет то же самое имя, что и открывающий, но перед именем ставится знак
<CENTER>
…
</CENTER>
выравнивает по центру страницы всю информацию, расположенную на месте многоточия.
Простейшая страница
Вот текст простейшей Web-страницы на языке HTML:
<HTML>
<HEAD>
<TITLE>Моя первая Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
А вот как выглядит окно браузера, если открыть эту страницу:
Попробуем разобраться. Страница начинается с тэга <HTML> и заканчивается закрывающим тэгом </HTML>. Содержимое страницы находится между ними и делится на две части, которые заключаются в парные тэги <HEAD> и <BODY>.
Тэг <HEAD> (от английского head — голова) содержит заголовок страницы, записанный внутри тэга <TITLE>, и, возможно, другую служебную информацию, например, ключевые слова для поисковых машин.
В рабочую область браузера выводится все, что находится внутри тэга <BODY> (от английского body — тело). Именно внутри этого блока надо размещать текст, рисунки, таблицы и т.п.
В следующем разделе вы узнаете о том, как кодировать цвета в языке HTML.
Основы HTML для начинающих – «Моя первая страничка на HTML» . Урок №2
Главная » Основы HTML » Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:
Далее выберите «Все программы» => «Стандартные» => «Блокнот».
А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:
1). Откройте блокнот
2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.
Теперь вспомним скелет HTML из урока №1.
Скелет HTML
3). Пропишите код
Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
[Посмотреть результат]
4). Сохраните документ
Сохраните документ как «index.html».
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».
В поле «Имя файла» напишите index.html (а не просто index, это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить»:
В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:
Теперь разберем код по косточкам .
<html> — открываем HTML документ.
<head> — открываем голову HTML документа.
Моя первая HTML-страничка на StepkinBlog.ru
</title> — закрываем заголовок.
</head> — закрываем голову HTML документа.
<body> — открываем тело HTML документа.
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body> — закрываем тело HTML документа.
</html> — закрываем HTML документ.
Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:
P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:
<body> — открываем HTML документ
</body> — закрываем HTML документ (закрывается тег знаком «/»)
и теги-одиночки, которые не нуждаются в закрывающей паре:
<br> -перенос строки.
Я бы еще выразился так, что парные теги – это условный контейнер, внутри которого могут находиться другие теги, текст, картинки и т.д.
Для лучшего понимания моих слов, рекомендую глянуть на графическую схему, где я показал, как действуют парные теги:
Также хочу направить ваше внимание на правильность написания парных тегов:
<тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1>
Обратите внимание, тег, который открывается первым должен закрыться последним, второй — предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:
<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>
Обратите внимание, правильное закрытие тегов нарушено. Такое закрытие парных тегов может привести к фатальным ошибкам, то есть, страница будет отображаться неправильно. Так что, будьте внимательны, когда пишите парные теги.
Cкелет HTML. Основы HTML для начинающих. Урок №1 Следующая запись
Знакомство с CSS. Основы CSS для начинающих. Урок №1
Учебник HTML 5. Статья «Создание первой страницы»
В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.
Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.
Перед Вами откроется основное окно программы:
Рис. 2 Текстовый редактор Notepad++.Шаг 2: Напишите несколько HTML тегов
Запишите в редактор следующий HTML код:
<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML --> <html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) --> <head> <title>Моя первая страница</title> <!-- обеспечивает название для документа --> </head> <body> <!-- описывает видимое содержимое страницы --> <h3> Это заголовок </h3> <!-- описывает заголовок второго уровня --> <p>Это параграф.</p> <!-- определяет параграф (абзац) --> </body> </html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->
Давайте разберем по частям, что мы сделали в этом примере:
- Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
- Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
- В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы — «Моя первая страница». Наименование страницы, которое вы указали отображается на вкладке любого браузера.
- В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье «Комментарии и якоря».
Код HTML нашего примера в редакторе Notepad++:
Рис. 3 Пример создания HTML документа.Шаг 3: Сохраните HTML страницу
Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).
Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл «index.html» и файл автоматически сохранится как HTML документ в кодировке UTF-8.
Допускается выбрать любое понравившееся вам имя документа, на данном этапе обучения это не имеет значения. Справочно: заглавные страницы сайтов, как правило, называют index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.
После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) — это одно из основных достоиноств текстовых редакторов
Окно сохранения в редакторе Notepad++:
Рис. 4 Сохранение текстового файла как HTML документ.Шаг 4: Просмотр HTML страницы в браузере
Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:
Рис. 5 Пример отображения HTML документа в браузере.Если у вас некорректно отображается содержимое страницы, попробуйте изменить настройки кодировки Вашего браузера, необходимо указать, чтобы браузер проводил автоматически определение кодировки.
При создании собственного сайта в заголовочной части страницы необходимо обязательно указывать кодировку символов для текущего документа (подробнее об этом вы узнаете в конце учебника в статье «Метаданные в HTML»).
Изменение настройки кодировки в браузере Chrome:
Рис. 6 Пример настройки кодировки в браузере Chrome.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 1.
Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.
Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента:
Фрагмент страницы примера в инструментах разрабочика браузера Chrome.Создаем первую html страницу.
Урок 2.В этом уроке, Вы по моей инструкции создадите свою первую веб-страницу. Пока что Вам не надо вникать что за непонятные символы придется использовать. В этом уроке мы создаем страницу, а в следующих двух уроках мы полностью разберемся в каждом написанном символе.
Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.
Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:
<html><head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>
Далее, нажимаем в верхнем меню кнопку «Кодировки» и выбираем «Кодировать в UTF-8»
Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.
Теперь нужно сохранить наш файл в формате html.
Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.
Для этого нажимаем в верхнем меню кнопку «Файл», затем «Сохранить как», выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).
Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку «Сайт» и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.
Как это все работает, мы разберем в следующих уроках.
* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать «Edit with Notepad++» (открыть с помощью Notepad++).
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
Моя первая страница на PHP
Перед тем, как делать страницы на php, я должен предупредить, что без начальных знаний html вам даже не стоит дальше читать эту статью, научитесь сначала делать странички на html это займёт всего несколько дней.
Итак, подразумеваю, что вы умеете создавать страницы с расширением html и сделать новый файл с расширением php вам не составит труда, потому как коды php мы будем набирать в документе именно с таким расширением. Сделайте пустую страничку myphp.php
Обратите внимание, просмотреть html-страницы можно в обычном браузере, а вот чтобы заработала страница с расширением php нужен веб-сервер, иными словами такие страницы будут работать только непосредственно на платном хостинге (на Народ.ру работать не будет!) либо на вашем компьютере при наличии соответствующего программного обеспечения. Раньше, да и сейчас профессиональные программисты устанавливают специальные программки для работы с php-файлами, но слава богу в Интернете есть очень хорошая штуковина под названием Денвер, скачайте и установите его на свой компьютер, скачать можно на оф.сайте Denwer.ru или на нашем сайте стабильную версию Denwer3. Как пользоваться смотрите уроки по Денверу (тут же можно его скачать), создайте папку для тестирования будущих php-страничек.
Вы должны помнить, что в отличие от html страницы c php-кодом сначала обрабатываются на сервере и уж потом данные передаются в браузер, поэтому в браузере теперь мы будем видеть только результаты работы наших php-страниц. Обработка сервером php-страниц начинается автоматически как только сервер обнаружит на странице php-код. Нашу новую страничку можно начинать с обычных тегов как в html, например:
<html>
<head>
<title>Моя первая страница на php</title>
</head>
<body>
<p>Привет, друзья!</p>
</body>
</html>
<?php
чтобы закончить код пишем так:
?>
Вставим этот php-код в середине нашей страницы:
<html>
<head>
<title>Моя первая страница на php</title>
</head>
<body>
<p>Привет, друзья!</p>
<?php
?>
</body>
</html>
Для работы советую использовать программу Dreamweaver, она будет подсвечивать коды цветом — это очень облегчает работу!
Запустите Денвер и откройте страницу в браузере также как в Интернете www.сайт.ру/myphp.php. В браузере отобразится одна строка «Привет, друзья!», если посмотреть html-код страницы, то там будет всё кроме наших новых php-кодов. Сейчас внутри php-кода пусто, т.е. нет никаких функций, поэтому браузер ничего не выводит, давайте добавим в код ещё одну строку:
<html>
<head>
<title>Моя первая страница на php</title>
</head>
<body>
<p>Привет, друзья!</p>
<?php
echo «Привет, мир!”;
?>
</body>
</html>
Теперь на странице должно отобразиться две строки. В php оператор echo позволяет выводить на страницу абсолютно всё, даже html-код, поэтому попробуем добавить внутри пару тегов:
<html>
<head>
<title>Моя первая страница на php</title>
</head>
<body>
<p>Привет, друзья!</p>
<?php
echo «<b>Привет, мир!</b>»;
?>
</body>
</html>
Вот результат обработки страницы сервером:
Код php может иметь короткий вариант, например мы писали так:
<?php
echo «Привет, мир!”;
?>
а можно ещё так:
<?
echo «Привет, мир!”;
?>
Хотя первый вариант написания это классика, но и второй вариант частенько встречается в различных скриптах, обрабатываются оба варианта одинаково.
На странице php-код может начинаться и заканчиваться несколько раз, а также его можно писать одной строкой, например:
<html>
<head>
<title>Моя первая страница на php</title>
</head>
<body>
<p>Привет, друзья!</p>
<?php
echo «Привет, мир!”;
?>
<p>Привет, вам!</p>
<?php echo «Привет, всем!”; ?>
</body>
</html>
На этом закончим первый урок по php и перейдём к изучению переменных и их свойств.
Моя первая страница на PHP (С чего начать?) :: PHP: Hypertext Preprocessor
Мне часто приходят письма с вопросами, с чего начать изучение, как устроен PHP и какую книгу я бы рекомендовал для изучение? Сразу скажу, что я изучал язык PHP (и продолжаю изучать) не по какому то учебнику, у меня не было какой то конкретной книги, по которой бы я занимался. Во всех книгах, что я видел, я прочитал первые две страницы, там где рассказывают, как вывести на экран надпись:Привет, Мир!, ну или, что то в этом духе. Конечно это делается так: <?php
echo 'Привет, Мир!';И это я знал ещё до того, как решил, что я должен понимать код написанный на PHP, но этого знания очень и очень мало. Мне надо понимать почему выводится именно этот фрагмент, а не другой и при каких условиях. Интерес читать книги у меня «улетел» из головы и я больше не искал светлого пути в каких то книгах, так что рекомендовать, какую книгу выбрать и какого автора, я не буду. Могу лишь сказать если будите изучать PHP по книге, выбирайте книгу посвежее, те книги, что написанные более года назад уже устарели, имхо, конечно.
Я изучал язык PHP по различным примерам из обсуждений тематических форумов, задавал простые вопросы, которые мне казались трудными и моими силами не решаемыми. Для меня, как и для многих (наверно всех) было важно понять, как обрабатывает код, какую то информацию. После того, как я это понял, стало многое очевидно. Конкретно мне надо было понят, куда вставлять и что, что бы это работало. Всё оказалось просто! Попробую объяснить так же просто…
Практически все функции PHP имеют круглые скобки, между которых и надо что то вставить, что бы эта функция могла обработать то, что мы вставили. Вставляют в основном переменные или другие функции, которые тоже имеют круглые скобки, между которыми тоже надо что то вставить. Для примера я возьму функцию isset(). Данная функция проверяет определена ли переменная или нет. Кстати дать какое то значении переменной можно так:
$variable = 'Привет, Мир!';То есть я забил в переменную
$variable фразу Привет, Мир!, теперь проверим эту переменную функцией isset(), делаем так: Вот именно так и будет выполняться проверка переменной (это для примера, куда вставлять переменную, что бы её обработала функция). Поехали дальше, PHP интерпретатор прочитав данный код, просто вызовет данную функцию, проверит переменную и пойдет читать дальше, мы от этого ни чего не получим.
— Нам бы результат какой ни будь от этого получить, а то смысла в этой проверке ни какой нет.
— Действительно смысла от этого кода, в данном случаи нет, ведь что бы был смысл нужно получить результат. Хотя нет, смысл есть — показал вам пример! Результат например, может быть выводом значения переменной на экран, в случаи если переменная определена. Если же переменная не определена, вывести сообщение о том, что переменная не имеет ни какого значения. Задача посложнее, но это на первый взгляд! В решении этой задачи нам поможет условие. Написать условие довольно просто, пишется оно так:
if (/* какое то сравнение */)
{
# Если проверка дала добро
}Этот код вернет какой то результат, только в том случаи, если условие верно, нам же надо вернуть результат в случаи не удачи тоже, для этого в условии используется
else: if (/* какое то сравнение */)
{
# Если проверка дала добро
}
else
{
# Если проверка не дала добро
}Теперь давайте соберём всё в одну кучу. Значит ещё раз, нам необходимо проверить переменную
$variable, если она определена (то есть имеет значение), то выводим сообщение, что всё в порядке и само значение, если переменная не определена, выводим, сообщение об ошибке. К коду добавлю комментарии для понимания: <?php # Говорим PHP-машине, что дальше будет код на PHP языке
$variable = 'Привет, Мир!'; # Забиваем переменную $variable фразой: Привет, Мир!
if (isset($variable)) # Проверяем имеет ли переменная значение
{
echo 'Переменная определена! Её значение: ' . $variable; # Если условие дало добро
}
else
{
echo 'Переменна не определена.'; # Сообщение на случай если переменна не определена
}Результат на экране монитора будет таким:
Переменная определена! Её значение: Привет, Мир!
Если хотите убедиться, что проверка / условие действительно работает, удалите из кода строчку:
$variable = 'Привет, Мир!'; # Забиваем переменную $variable фразой: Привет, Мир!И результат на экране изменится:
Переменна не определена.
Ну вот пока всё! Надеюсь информация была полезной.
Спасибо за внимание.
Моя первая HTML-страница
Первая HTML-страница — шаг за шагом
HTML-файлов, которые генерируют веб-страницы, представляют собой просто текстовые документы. Это простой язык для описания содержимого веб-страниц. Понятие языков разметки не сложно понять, но вам нужно знать много вещей в деталях. Здесь мы собираемся создать и просмотреть нашу первую HTML-страницу. Вы должны выполнить следующие шаги:
Как создать и просмотреть свою первую веб-страницу
- Откройте текстовый редактор (например,грамм. Блокнот)
- Запишите содержимое HTML в файл
- Сохраните файл на локальном диске, указав расширение файла .html или .htm
- Откройте свой веб-браузер (например, IE, Chrome или Firefox)
- Выберите созданный файл HTML для просмотра
Откройте текстовый редактор, скопируйте и вставьте следующий код в текстовый файл.
Первая HTML-страница Это моя первая страница в формате HTML !!Сохраните файл как «myfirstpage.html «на локальном диске. Очень важно сохранить файл с расширениями .html или .htm.
Некоторые текстовые редакторы (например, блокнот) обычно сохраняют файлы с расширением .txt. Поэтому нажмите меню «Сохранить как» и, когда дадите имя файла, заключите его в двойные кавычки, например, «myfirstpage.html», затем нажмите кнопку «ОК».
Если у вас возникли трудности при создании или сохранении файла в первый раз, щелкните здесь, чтобы загрузить файл html
Загрузите myfirstpage.html Щелкните ссылку правой кнопкой мыши и выберите «Сохранить объект как».После создания или загрузки файла HTML вы можете просмотреть его в своем веб-браузере.
Вы можете открыть HTML-файл двумя способами.
- Дважды щелкните созданный HTML-файл, он автоматически откроет файл в веб-браузере по умолчанию.
- Откройте свой веб-браузер, например Microsoft Internet Explorer, Google Chrome или Mozilla Firefox.
Теперь вы можете видеть свою html-страницу в браузере.
Объяснение HTML-кода:
Первая HTML-страница Это моя первая страница в формате HTML !!Страница начинается с тегов и заканчивается тегами, это HTML-файл, заключающий все в теге … контейнера.
Все обычные веб-страницы состоят из головы и тела.
.. — Заголовок используется для текста и тегов, которые не отображаются непосредственно на странице, кроме заголовка.
Тег первой страницы Html. Он отображает заголовок веб-страницы, отображаемый в верхней части окна браузера.
Далее идет … часть. Часть тела используется для отображения всего текста, изображений, гиперссылок и т. Д., Отображаемых непосредственно на странице. Здесь мы просто помещаем только текст, который будет отображаться на странице.
1. Создание вашей первой страницы
Глава 1. Создание вашей первой страницы
Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию полноценного сайта начинается с здесь , с написанием одной веб-страницы.
Технически веб-страница — это особый тип документа, написанный на компьютерном языке под названием HTML (это сокращение от HyperText Markup Language). Веб-страницы написаны для веб-браузеров — таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров есть простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать.
Эта глава познакомит вас с HTML. Вы увидите, как работает простая веб-страница, и узнаете, как создать свою собственную.На данный момент вы будете работать с веб-страницами, хранящимися на вашем компьютере, которые будут видны только вам. Позже, в главе 9, вы научитесь размещать веб-страницы в Интернете, чтобы их мог видеть любой, у кого есть подключение к Интернету.
HTML: язык Интернета
HTML — единственный наиболее важный стандарт в веб-дизайне, и единственный, который абсолютно требует , если вы планируете создать веб-страницу. Каждая веб-страница написана в HTML. Неважно, содержит ли ваша страница серию записей в блоге, дюжину изображений вашего домашнего лемура или сильно отформатированный сценарий — скорее всего, если вы просматриваете его в браузере, это HTML-страница.
HTML играет ключевую роль на веб-страницах: он сообщает браузерам, как отображать содержимое страницы, используя специальные инструкции, называемые тегами , которые сообщают браузеру, когда начинать абзац, выделять слово курсивом или отображать изображение. Чтобы создавать свои собственные веб-страницы, вам нужно научиться использовать это семейство тегов.
HTML — настолько важный стандарт, что вы потратите значительную часть этой книги на изучение его функций, излишеств и случайных недостатков. Каждая создаваемая вами веб-страница будет настоящим HTML-документом.
Примечание
Стандарт HTML не имеет ничего общего с тем, как веб-браузер извлекает страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (протокол передачи гипертекста), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет. Если использовать аналогию с телефонным разговором, то телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, являются документами HTML.
Взлом Открытие файла HTML
Внутри HTML-страница на самом деле не более чем простой текстовый файл.Это означает, что исходный код каждой создаваемой веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (например, пробелов, знаков препинания и всего остального, что вы можете заметить на клавиатуре). На рис. 1.1 представлен анализ обычного (и очень простого) HTML-документа.
Вот один из секретов написания веб-страниц: вам не нужен действующий веб-сайт, чтобы начать создавать свои собственные веб-страницы. Это потому, что вы можете легко создавать и тестировать страницы, используя только свой компьютер. Фактически, вам даже не нужно подключение к Интернету.Единственные инструменты, которые вам понадобятся, — это базовый текстовый редактор и стандартный веб-браузер.
Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу). Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не нужен ни один из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.
Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование. Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.
Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:
Если у вас компьютер Windows, вы используете простой редактор Notepad.Переходим к следующему разделу.
Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.
Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение направлено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу.Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML. Вот как это сделать:
Выберите TextEdit → Настройки .
Откроется окно с вкладками параметров TextEdit (рис. 1-2).
Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).
Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст.”
Это указывает TextEdit начать вас с обычного неформатированного текста и отказаться от панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML.
Нажмите «Открыть и сохранить» и включите первую опцию «Отображать файлы HTML как HTML-код вместо форматированного текста».
Это указывает TextEdit, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.
Закройте окно настроек, а затем закройте TextEdit .
Теперь, когда вы в следующий раз запустите TextEdit, вы начнете в режиме обычного текста, который использует каждый уважающий себя веб-разработчик.
Как вы, несомненно, знаете, веб-браузер — это программа, которая позволяет вам переходить к веб-страницам и отображать их. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть.
Работа браузера на удивление проста — на самом деле, основная часть его работы состоит из двух задач.Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером . Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц.
Когда браузер получает этот контент, он задействует свой второй навык, и отображает или рисует веб-страницу.Технически это означает, что браузер преобразует простой текст, который он получает от сервера, в отображаемый документ на основе инструкций по форматированию, встроенных в страницу. Конечным результатом является страница с богатой графикой, с разными шрифтами, цветами и ссылками. Рисунок 1-3 иллюстрирует этот процесс.
Рисунок 1-3. Веб-браузер предназначен для очень хороших двух вещей: связываться с удаленными компьютерами, чтобы запросить веб-страницы, а затем отображать эти страницы на вашем компьютере.
Хотя вы обычно просите браузер получить страницы из Интернета, вы также можете использовать его для просмотра веб-страниц, хранящихся на вашем компьютере, что особенно удобно, когда вы тренируете свои навыки работы с HTML.Фактически, ваш компьютер уже знает, что файлы, заканчивающиеся на .htm или .html , содержат содержимое веб-страниц. Поэтому, если вы дважды щелкните один из этих файлов, ваш компьютер автоматически запустит веб-браузер. (Вы можете получить тот же результат, перетащив файл веб-страницы в уже открытое окно браузера.)
Хотя обычным людям нужен только один веб-браузер, это хорошая идея для обучающихся веб-разработчиков (например, себя), чтобы ознакомиться с наиболее распространенными браузерами (см. рис. 1-4).Это потому, что при разработке своего веб-сайта вам необходимо подготовиться к работе с широкой аудиторией людей с разными браузерами. Чтобы ваши красивые страницы не выглядели странными, когда на них смотрят другие люди, вам следует протестировать свой сайт с помощью различных браузеров, различных размеров экрана и операционных систем.
В следующем списке описаны самые популярные браузеры на сегодняшний день:
Google Chrome — нынешний король веб-браузеров, несмотря на то, что это самый новый ребенок на рынке.Технически подкованным поклонникам Интернета нравятся его функции, такие как закладки, которые можно синхронизировать на разных компьютерах, и его невероятная скорость.
Загрузите Google Chrome на www.google.com/chrome.
Internet Explorer — самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.
Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.
Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы просматриваете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Текущую статистику использования браузера см. Http: // tinyurl.com / stats-browsers.)Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые появляются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox.
Попробуйте Firefox на www.mozilla.org / firefox.
Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия работает несколько иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.
Откройте Safari по адресу www.apple.com/safari.
Opera — это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров.
Посетите Opera на сайте www.opera.com.
Учебное пособие: создание файла HTML
Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.
Подсказка
Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).
Готовы начать? Вот что нужно сделать:
Запустите текстовый редактор .
На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.
На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.
Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.
Начните писать свой HTML-код .
Эта задача немного сложна, потому что вы еще не знакомы со стандартом HTML. Погодите — до конца этой главы помощь будет готова. На данный момент вы можете использовать следующий очень простой фрагмент HTML.Просто введите его в том виде, в каком он выглядит, с текстом, косой чертой, заостренными скобками и всем остальным:
United Popsicle Workers Union
Мы боремся за ваши права.
Технически в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважающие себя веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху.
Когда вы закончите свою веб-страницу, выберите Файл → Сохранить .
При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5).
Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.
Выберите место для сохранения файла и дайте ему имя popsicles.htm .
Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе.
При названии файла убедитесь, что вы добавили расширение .htm или .html в конце имени файла. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML.
Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.
Примечание
С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что, когда вы дважды щелкните имя файла, ваш компьютер будет знать, что открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов.
При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .
Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как».
Ваша веб-страница будет работать, даже если вы не сделаете этого шага, но это гарантирует, что у вас не возникнет проблем, если вы используете специальные символы или другой язык на своей странице.
Нажмите «Сохранить», чтобы сделать его официальным .
Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html расширение вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).
Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .
Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.
Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).
По окончании редактирования закройте текстовый редактор .
В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.
Подсказка
Вот уловка, которая поможет вам открыть HTML-файлы в спешке. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть HTML-файл одним махом.
Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).
Просмотр HTML действующей веб-страницы
Большинство текстовых редакторов не позволяют открывать веб-страницы в Интернете.Однако веб-браузеры – дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей.
Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.
Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».
Подсказка
Firefox имеет удобную функцию, которая позволяет сосредоточиться только на части HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения».
Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого вверху страницы, лишенного всех пробелов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.
Теперь, когда вы знаете, как просматривать существующие файлы HTML и создавать свои собственные, следующим шагом будет понимание того, что происходит внутри среднего HTML-файла. Все это вращается вокруг единой концепции — теги .
HTML-теги — это инструкции по форматированию, которые сообщают браузеру, как преобразовать обычный текст во что-то визуально привлекательное. Если бы вы удалили все теги из HTML-документа, полученная страница состояла бы только из простого неформатированного текста.
Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код — это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.
Например, один простой тег — это тег , который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:
Этот текст не полужирный. Этот текст выделен жирным шрифтом.
Сам по себе тег недостаточно хорош; он известен как начальный тег , что означает, что он включает некоторый эффект (в данном случае жирный шрифт). Вы соединяете большинство начальных тегов с совпадающим конечным тегом , который отключает эффект от .
Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так вместо этого <. Таким образом, конечный тег для полужирного форматирования - . Вот пример:
Не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.
Какой браузер отображает как:
Это не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.
Этот пример отражает еще один важный принцип браузеров: они всегда обрабатывают теги в том порядке, в котором вы помещаете их в свой HTML. Чтобы получить жирное форматирование в нужном месте, вам необходимо убедиться, что вы правильно разместили теги и .
Как видите, у браузера довольно простая задача. Он сканирует HTML-документ, ищет теги и включает и выключает различные настройки форматирования. Он берет все остальное (все, что не является тегом) и отображает его в окне браузера.
Примечание
Добавление тегов к обычному тексту известно как разметка документа, а сами теги известны как разметка HTML . Когда вы смотрите на необработанный HTML, вас может заинтересовать содержимое (текст, заключенный между тегами) или разметка (сами теги).
Большинство тегов идут парами. Когда вы используете начальный тег (например, ), вы должны включать соответствующий конечный тег ( ). Эта комбинация начального и конечного тегов вместе с текстом между ними составляет HTML элемент .
Вот основная идея: пара тегов создает контейнер (см. Рис. 1-7). Вы размещаете контент (например, текст) внутри этого контейнера. Например, когда вы используете теги и , вы создаете контейнер, который применяет полужирное форматирование к тексту внутри контейнера. При создании веб-страниц вы будете использовать разные контейнеры для обертывания разных фрагментов текста. Если вы думаете об элементах таким образом, вы никогда не забудете включить конечный тег.
Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент .
Примечание
Когда кто-то ссылается на элемент , он имеет в виду весь шебанг - начальный тег, конечный тег и содержимое между ними. Когда кто-то ссылается на тег , он обычно имеет в виду начальный тег, который запускает эффект.
Конечно, без исключения жизнь не была бы такой веселой (и компьютерные книги были бы не такими толстыми).Если разобраться, на самом деле существует два типа элементов :
Контейнерные элементы , безусловно, являются наиболее распространенным типом элементов. Они применяют форматирование к содержимому, помещенному между начальным и конечным тегами.
Автономные элементы не включают и не выключают форматирование. Вместо этого они вставляют что-то, например изображение, на страницу. Одним из примеров является элемент
В этой книге все автономные элементы включают символ косой черты перед закрывающим > , что-то вроде открывающего и закрывающего тегов в одном лице. Таким образом, вы увидите разрыв строки, записанный как вместо
. Эта форма, называемая синтаксисом пустых элементов , удобна, поскольку четко отличает элементы контейнера от отдельных элементов.Так вы никогда не запутаетесь.
Примечание
В недалеком прошлом веб-разработчики были вынуждены использовать синтаксис пустых элементов, то есть теги, заканчивающиеся косой чертой, потому что это была официальная часть (теперь замененного) языка XHTML. . Сегодня завершающая косая черта является необязательной, поэтому автономные элементы могут использовать тот же синтаксис, что и начальные теги (что означает, что вы можете использовать, например, или
для вставки разрыва строки).
На рис. 1-8 показаны два типа элементов в перспективе.
Рисунок 1-8. Вверху: этот фрагмент HTML показывает как элемент контейнера, так и отдельный элемент. Внизу: браузер показывает получившуюся веб-страницу.
В предыдущем примере вы применили простой элемент , чтобы получить полужирное форматирование. Вы помещаете текст между тегами и . Однако текст - не единственное, что можно поместить между начальным и конечным тегами. Вы также можете вложить один элемент внутрь другого. Фактически, вложенных элементов - обычная практика при создании веб-страниц.Он позволяет применять к тексту более подробные инструкции по стилю, объединяя все элементы форматирования в одном наборе инструкций. Вы также можете вкладывать элементы для создания более сложных компонентов страницы, таких как маркированные списки (см. Структурирование текста).
Чтобы увидеть вложение в действии, вам понадобится другой элемент для работы. В этом примере рассмотрим, что произойдет, если вы хотите выделить текст полужирным шрифтом и курсивом . HTML не содержит ни одного элемента для этой цели, поэтому вам нужно объединить знакомый элемент (чтобы выделить текст полужирным шрифтом) с элементом (чтобы выделить его курсивом).Вот пример:
Это word выделено полужирным шрифтом и курсивом.
Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:
Это слово выделено полужирным шрифтом и курсивом.
Между прочим, не имеет значения, поменяете ли вы порядок тегов и на обратный. Следующий HTML дает точно такой же результат.
Это word выделено курсивом и полужирным шрифтом.
Однако вы всегда должны закрывать теги в порядке , обратном , из которого вы их открывали. Другими словами, если вы применяете курсивное форматирование, а затем полужирное форматирование, вы должны сначала отключить полужирное форматирование, а затем курсивное форматирование. Вот пример, который нарушает это правило:
Это слово выделено курсивом и полужирным шрифтом.
Браузеры обычно могут разобраться в этом и сделать хорошее предположение о том, чего вы действительно хотите, но это опасная привычка, которая возникает при написании более сложного HTML.
Как вы увидите в следующих главах, HTML предоставляет гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в , а затем и так далее до бесконечности.
Note
Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные HTML-теги для изменения выравнивания, интервалов и шрифтов. К сожалению, в мире Интернета вы не всегда можете контролировать все, что хотите. В главе 2 содержится подробное описание, а в главе 3 представлено лучшее решение, которое называется таблицами стилей .
Общие сведения о документах HTML
До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно активизировать свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML.
Определение типа документа
На заре Интернета веб-браузеры были полны причуд.При разработке веб-страниц люди должны были учитывать эти особенности. Например, браузеры могут вычислять поля вокруг плавающих текстовых блоков несколько разными способами, в результате чего страницы в одном браузере выглядят правильно, а в другом - странно.
Спустя годы правила HTML (и CSS, стандарта таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, в том числе те, которые основывались на старых особенностях.
Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете на этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).
Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.
Когда браузер обнаруживает doctype, он переключается в стандартный режим и отображает страницу наиболее согласованным и стандартизированным способом. Конечным результатом является то, что страница выглядит практически идентично во всех современных браузерах.
Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите разные размеры текста, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.
В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:
Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер поддерживает его - даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык - это HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы.
Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:
Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.
В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если вы не уверены, что они хорошо поддерживаются всеми браузерами , которые люди используют сегодня.
Примечание
В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).
Теперь вы готовы заполнить остальную часть веб-страницы.
Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера: , и . Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы:
-
Этот элемент обертывает все (кроме документа) на вашей веб-странице.
-
Этот элемент обозначает заголовок часть вашего документа, которая включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок появится как заголовок на вкладке. При желании раздел
может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14).-
Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру.
Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:
... ...
Каждая веб-страница использует эту базовую структуру. Эллипсы (…) показывают, куда вы вставляете дополнительную информацию. Пробелы между линиями не обязательны - они нужны только для того, чтобы вам было легче увидеть структуру элемента.
Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент
Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).
Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.
В его нынешнем виде этот HTML-документ является хорошим шаблоном для будущих страниц. Базовая структура на месте; вам просто нужно изменить заголовок и добавить текст. Это задача, которую вы возьмете за следующую.
Учебное пособие: создание полного HTML-документа
В этом руководстве вы научитесь составлять свою первую настоящую веб-страницу.Вы будете создавать онлайн-резюме (перейдите к разделу «10 важнейших элементов (и еще несколько), чтобы увидеть окончательный результат»), но подробности применимы к любой странице, которую вы создаете.
Подсказка
Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.
Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:
Запустите текстовый редактор .
Это Блокнот или TextEdit.
Введите скелет HTML в новый файл .
Это doctype, корневой элемент
Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого.
Добавьте заголовок в раздел
Добавьте элемент
</code> в новую строку между открывающим тегом <code><head> </code> и закрывающим тегом <code></head> </code>:</p><pre> <strong> <code> <title> Hire Me! Добавьте свой контент в раздел .
Например, предположим, что вы хотите написать простую страницу резюме. Вот очень простой пример:
Найми меня! Меня зовут Ли Пак.Наймите меня в свою компанию, потому что мой рабочий номер
быстро .В этом примере выделены ( жирным шрифтом, ) изменения, внесенные в базовый скелет HTML - измененный заголовок и одну строку текста. В этом примере используется единственный элемент
Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .
Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.
Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.
Используя методы HTML, описанные в следующих разделах, вы можете опираться на этот пример и дать Ли лучшее резюме.Каждый раз, когда вы вносите изменения в документ в текстовом редакторе, обновляйте страницу в веб-браузере, чтобы проверить, все ли идет по пути.
Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:
Наймите меня! Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот .
Мои навыки включают:* Быстрый набор текста (почти 12 слов в минуту).* Невероятная заточка карандашей.* Изобретательское оправдание.* Ведение переговоров с мирными офицерами.
Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).
Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере.
Проблема в том, что HTML игнорирует лишние пробелы. Сюда входят табуляции, разрывы строк и лишние пробелы (более одного последовательного пробела). В первый раз, когда это произойдет, вы, вероятно, ошеломленно уставитесь на свой экран и удивитесь, почему веб-браузеры устроены именно так. Но на самом деле это имеет смысл, если учесть, что HTML должен работать как универсальный стандарт .
Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона.
Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.
Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:
-
Указывает начало маркированного списка, называемого неупорядоченным списком на жаргоне HTML.Список - идеальный способ подробно описать навыки Ли.
-
Обозначает отдельный элемент маркированного списка. Ваш браузер делает отступ для каждого элемента списка, а для предложений, выходящих за пределы одной строки, правильно делает отступ для последующих строк, чтобы они совпадали с первой. Кроме того, перед каждым элементом ставится маркер (•). Вы можете использовать элемент списка только внутри элемента списка, например
Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:
Наймите меня! Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .
Мои навыки включают:
Быстрый набор текста (почти 12 слов в минуту).Невероятная заточка карандашей.Придумывание оправданий изобретательности.Ведение переговоров с мирными офицерами.
Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.
Вы можете использовать привычку браузера игнорировать перенос строки в свою пользу. Чтобы сделать ваши HTML-документы более удобочитаемыми, добавляйте разрывы строк и пробелы в любом месте. Веб-специалисты часто используют отступы, чтобы упростить понимание структуры вложенных элементов. В примере резюме вы можете увидеть этот стиль на практике. Обратите внимание, как элементы списка (строки, начинающиеся с элемента
Рисунок 1-14 анализирует HTML-документ с использованием древовидной модели . Древовидная модель - это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы станут более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.
Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня я
Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума
. Мои навыки: Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки. содержит элементы и .Внутри элемента находится элемент
Где все картинки?
Будь то биржевой график, логотип вашей подземной гаражной группы или подделанная фотография вашей любимой знаменитости, Интернет был бы довольно унылым без изображений. До сих пор вы видели, как поместить текст в документ HTML, но что происходит, когда вам нужно изображение?
Хотя это может показаться удивительным, вы не можете сохранить изображение в файле HTML. Есть множество веских причин, по которым вы все равно не захотите - ваши файлы веб-страниц станут действительно большими, будет сложно изменять ваши изображения или делать с ними что-то еще, и вам будет дьявольски весело редактировать свои страницы. в текстовом редакторе, потому что данные изображения могут создать беспорядок.Решение состоит в том, чтобы сохранить ваши изображения в виде отдельных файлов, а затем свяжет с ними ваш HTML-документ. Таким образом, ваш браузер вытягивает изображения и размещает их именно там, где вы хотите, на своей странице.
Инструмент связывания, который вставляет изображения, - это элемент (сокращение от «изображение»). Он указывает на файл изображения, который браузер извлекает и вставляет на страницу. Вы можете поместить файл изображения в ту же папку, что и ваша веб-страница (что является самым простым вариантом), или вы можете разместить его на совершенно другом веб-сайте.
Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :
Как и обсуждавшийся ранее элемент ,
является автономным элементом без содержимого. По этой причине имеет смысл использовать синтаксис пустого элемента. и добавьте косую черту перед закрывающей угловой скобкой.
Однако есть очевидная разница между элементом и элементом
. Хотя
является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибуты , дополнительные части информации, которые появляются после имени элемента, но перед закрывающим символом>.
Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (часть информации, которую вы предоставляете). Имя первого атрибута
-
src , что является сокращением от слова «источник»; он сообщает браузеру, где взять желаемое изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака.
Имя второго атрибута -
alt , что является сокращением для «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».
Как только вы разберетесь с элементом изображения, вы будете готовы использовать его в HTML-документе. Просто разместите его там, где это имеет смысл, внутри или после существующего абзаца:
Наймите меня! Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .
Мои навыки включают:
- Быстрый набор текста (почти 12 слов в минуту).
- Невероятная заточка карандашей.
- Изобретательное придумывание оправданий.
- Ведение переговоров с мирными офицерами.
На рис. 1-15 показано, где именно заканчивается изображение.
Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды).
Note
В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом.
10 самых важных элементов (и еще несколько)
Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов.
HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому.
Примечание
Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать.
Некоторые элементы, такие как элемент
, форматирующий абзац, важны для определения общей структуры страницы. Они называются блочными элементами . Блочные элементы получают дополнительное пространство - когда вы добавляете один на страницу, браузер начинает новую строку (отделяя этот блочный элемент от предыдущей). Браузер также добавляет новую строку в конец элемента блока, отделяя его от следующего элемента.
Вы можете размещать блочные элементы непосредственно внутри раздела вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - автономными. (Как вы узнали из статьи «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, но для автономных элементов достаточно одного тега.) Вы более подробно изучите все эти элементы в главе 2.
Таблица 1-1. Базовые блочные элементы.
ЭЛЕМЕНТ | НАИМЕНОВАНИЕ | ТИП ЭЛЕМЕНТА | ОПИСАНИЕ054 9109 9109 9109 9109 Контейнер Как, вероятно, сказал вам учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка. Заголовок Контейнер Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому Горизонтальная линия (или горизонтальная линия на языке HTML) Автономный Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.) Неупорядоченный список, элемент списка Контейнер Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить |
Другие элементы предназначены для работы с более мелкими структурными деталями, например фрагментами текста, выделенного жирным или курсивом, разрывами строк, ссылками, ведущими на другие веб-страницы, и изображениями. Эти элементы называются встроенными элементами . Вы можете поместить встроенный элемент в блочный элемент, но никогда не должны помещать блочный элемент внутри встроенного элемента.В таблице 1-2 перечислены наиболее полезные встроенные элементы.
Таблица 1-2. Основные встроенные элементы.
ЭЛЕМЕНТ | НАИМЕНОВАНИЕ | ТИП | ОПИСАНИЕ | 9109 9109 9109Контейнер | Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически |
| разрыв строки | Автономный | Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца. | ||
| Изображение | Автономный | Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут | ||
Якорь | Контейнер | Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6. |
Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.
Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме.
Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом:
Наймите меня! Наймите меня!
Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы этика, пожалуйста, оцените это электронное резюме.
Незаменимые навыки
Мои навыки включают:
- Быстрый набор текста (почти 12 слов в минуту).
- Невероятная заточка карандашей.
- Изобретательное придумывание оправданий.
- Ведение переговоров с мирными офицерами.
А еще я знаю HTML!
Предыдущий опыт работы
У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты:
- 2008-2009 - работал машинисткой в Flying Fingers
- 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
- 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство
Не беспокойтесь, если в этом примере слишком много разметки, чтобы вы могли сразу ее усвоить.В следующей главе вы получите больше практики по превращению обычного текста в структурированный HTML.
Проверка страниц на наличие ошибок
Даже веб-дизайнер с лучшими намерениями может написать плохую разметку и нарушить правила HTML. Хотя браузеры действительно должны отлавливать эти ошибки, практически ни одна из них не справляется. Вместо этого они изо всех сил стараются игнорировать ошибки и отображать некорректные документы.
На первый взгляд это кажется отличным дизайном - в конце концов, он сглаживает любые незначительные промахи, которые вы могли допустить.Но у терпимости к ошибкам есть и обратная сторона. В частности, такое поведение упрощает то, что серьезные ошибки остаются незамеченными на ваших веб-страницах. Что за серьезная ошибка? Проблема, которая безвредна, когда вы просматриваете страницу в своем любимом браузере, но вызывает смущение, когда кто-то просматривает страницу в другом браузере; ошибка, которая остается незамеченной до тех пор, пока вы не отредактируете код, что непреднамеренно обнаруживает проблему в следующий раз, когда ваш браузер отображает страницу; или ошибка, которая не влияет на отображение страницы, но не позволяет автоматическому инструменту (например, поисковой системе) прочитать страницу.
К счастью, есть способ решить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент веб-дизайна, такой как Dreamweaver, вы можете использовать его встроенное средство проверки ошибок (подробности описаны в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже).
Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:
Отсутствуют обязательные элементы (например, элемент
).</p></li><li><p> Начальный тег контейнера без соответствующего конечного тега.</p></li><li><p> Неправильно вложенные теги.</p></li><li><p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>).</p></li><li><p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code><head> </code>).</p></li></ul><p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом учебном пособии (Учебное пособие: создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code><html> </code>, <code><head> </code> и <code><body> </code>.</p><p> После того, как вы решите, что вы хотите проверить, выполните следующие действия:</p><ol type="1"><li><p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML).</p><p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»).</p></li><li><p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17).</p><p> Валидатор W3C предоставляет вам три варианта, представленные тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую.</li><li><p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>.</p><p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html).</p><p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее.</p><p> <strong> Проверка прямым вводом </strong> позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле.</p><p> Перед тем, как продолжить, вы можете щелкнуть «Дополнительные параметры» в любом из окон с вкладками, чтобы установить другие параметры, но, вероятно, вы этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p></li><li><p> <strong> Нажмите кнопку «Проверить» </strong>.</p><p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18).</p><p> Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p></li></ol><p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code><title> </code>. Во-вторых, он закрывает элемент <code><li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, замените <code></li> </b> </code> на <code> </b></li> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить его, чтобы браузеры могли отображать его правильно.</p><h2><span class="ez-toc-section" id="_HTML-11"> Редакторы HTML </span></h2><hr/><p> Простой текстовый редактор - это все, что вам нужно для изучения HTML.</p><hr/><h3><span class="ez-toc-section" id="_HTML_TextEdit"> Изучение HTML с помощью Блокнота или TextEdit </span></h3><p> Веб-страницы можно создавать и изменять с помощью профессиональных редакторов HTML.</p><p> Однако для изучения HTML мы рекомендуем простой текстовый редактор, например Блокнот (ПК) или TextEdit (Mac).</p><p> Мы верим в то, что использование простого текстового редактора - хороший способ изучить HTML.</p><p> Выполните следующие действия, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.</p><hr/><h3><span class="ez-toc-section" id="_1-3"> Шаг 1. Откройте Блокнот (ПК) </span></h3><p> <strong> Windows 8 или новее: </strong></p><p> Откройте начальный экран <strong> </strong> (символ окна в левом нижнем углу экрана). Тип <strong> Блокнот </strong>.</p><p> <strong> Windows 7 или более ранняя версия: </strong></p><p> Открыть <strong> Старт </strong>> <strong> Программы> </strong> <strong> Аксессуары> </strong> <strong> Блокнот </strong></p><hr/><h3><span class="ez-toc-section" id="_1_TextEdit_Mac"> Шаг 1. Откройте TextEdit (Mac) </span></h3><p> Откройте <strong> Finder> Приложения> TextEdit </strong></p><p> Также измените некоторые настройки, чтобы приложение правильно сохранять файлы.В <strong> Настройки> Формат> </strong> выберите <strong> «Обычный текст» </strong></p><p> Затем в разделе «Открыть и сохранить» установите флажок «Отображать файлы HTML как HTML-код вместо форматированного текста».</p><p> <strong> Затем откройте новый документ для размещения кода. </strong></p><hr/><h3><span class="ez-toc-section" id="_2_HTML-2"> Шаг 2. Напишите HTML </span></h3><p> Напишите или скопируйте следующий HTML-код в Блокнот:</p> <br/><p><h2><span class="ez-toc-section" id="i-25"> Мой первый заголовок </span></h2></p><p><p> Мой первый абзац.</p></p><p></body> <br/></html></p><p></p><hr/><hr/><h3><span class="ez-toc-section" id="_3_HTML-2"> Шаг 3. Сохраните HTML-страницу </span></h3><p> Сохраните файл на своем компьютере.Выберите <strong> Файл> Сохранить как </strong> в меню Блокнота.</p><p> Назовите файл <strong> "index.htm" </strong> и установите кодировку <strong> UTF-8 </strong> (предпочтительная кодировка для файлов HTML).</p><p></p><p> <strong> Совет: </strong> В качестве расширения файла можно использовать .htm или .html. Нет никакой разницы, решать только вам.</p><hr/><h3><span class="ez-toc-section" id="_4_HTML-2"> Шаг 4. Просмотрите HTML-страницу в своем браузере </span></h3><p> Откройте сохраненный HTML-файл в своем любимом браузере (дважды щелкните файл, или щелкните правой кнопкой мыши - и выберите «Открыть с помощью»).</p><p> Результат будет примерно таким:</p><p></p><hr/><h3><span class="ez-toc-section" id="-_W3Schools"> Онлайн-редактор W3Schools - «Попробуйте сами» </span></h3><p> С помощью нашего бесплатного онлайн-редактора вы можете редактировать HTML-код и просматривать результат в своем браузере.</p><p> Это идеальный инструмент, если вы хотите быстро протестировать код <strong>. Он также имеет цвет кодирование и возможность сохранять и делиться кодом с другими:</p><h4><span class="ez-toc-section" id="i-26"> Пример </span></h4> <br/> <br/> <br/> Заголовок страницы <br/><p><h2><span class="ez-toc-section" id="i-27"> Это заголовок </span></h2> <br/><p> Это абзац.</p></p><p></body> <br/></html></p> Попробуй сам "<p> <strong> Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает. </strong></p> <br/> <br/><h2><span class="ez-toc-section" id="webpage1"> webpage1 </span></h2><p> Существует множество способов создания веб-страниц с использованием уже написанных программ. Эти уроки научат вас использовать базовый язык разметки гипертекста - HTML. <br/></p><p> HTML - это не компьютерный код, а язык, использующий английский (США) для вставки текстов (слов, изображений, звуков) и форматирования, такого как colo (u) r и center / ering, для записи.Процесс довольно прост; основные трудности часто заключаются в мелких ошибках - если вы ошибетесь при обработке текста, ваш читатель может уловить ваши опечатки, но страница все равно будет разборчивой. Однако, если ваш HTML неточный, страница может не отображаться - написание веб-страниц, по крайней мере, очень хорошая практика для корректуры!</p><p> Изучение HTML позволит вам:</p><ul><li> создавайте собственные простые страницы</li><li> читать и ценить страницы, созданные другими</li><li> развивать понимание творческого и литературного значения веб-текстов</li><li> могут перейти к более сложному веб-дизайну</li></ul><p> Веб-страница HTML состоит из тегов.Теги заключаются в скобки, например <b> </b>. Тег сообщает браузеру, как отображать информацию. Большинство тегов нужно открывать и закрывать.</p><p> Чтобы создать простую веб-страницу, вам нужно знать всего четыре тега:</p><ul><li> сообщает браузеру, что ваша страница написана в формате HTML.</li><li> это своего рода предисловие к важной информации, которая не отображается на экране.</li><li> Напишите здесь заголовок веб-страницы - это информация, которую зрители видят на верхней панели своего экрана.(Я дал этой странице название «webpage1»).</li><li> Здесь вы помещаете содержимое своей страницы, слова и изображения, которые люди читают на экране.</li></ul><p> Все эти теги нужно закрыть.</p><h5><span class="ez-toc-section" id="i-28"> УПРАЖНЕНИЕ </span></h5><p> Напишите простую веб-страницу.</p><p> Скопируйте в точности приведенный ниже HTML-код, используя программу WP, например Блокнот. <br/> Информация выделена курсивом <i> </i> указывает, куда можно вставить собственный текст, остальная информация - это HTML и должна быть точной.Однако убедитесь, что между скобками тега и текстом внутри нет пробелов. <br/> (Найдите Блокнот, перейдя в меню ПУСК \ ПРОГРАММЫ \ АКСЕССУАРЫ \ ПРИМЕЧАНИЕ).</p><p> <br/> <i> название страницы </i> <br/> <i> напишите здесь то, что вам нравится: «моя первая веб-страница», или отрывок о том, что вы читаете, или несколько мыслей о курсе, или скопируйте несколько слов из книги или пакета кукурузных хлопьев . Просто введите свои слова, не используя лишних символов, таких как полужирный или курсив, поскольку они имеют специальные HTML-теги, хотя вы можете использовать буквы верхнего и нижнего регистра и отдельные пробелы.</i> <br/></p><p> Сохраните файл как 'first.html' (т.е. назовите файл как угодно). Это полезно, если вы запустите папку - так же, как и для обработки текста - и назовите ее как-то вроде WEBPAGES, и поместите свой файл first.html в папке.</p><p> СЕЙЧАС - откройте браузер. <br/> В Netscape процесс следующий: <br/> Главное меню; ФАЙЛ \ ОТКРЫТЬ СТРАНИЦУ \ ВЫБРАТЬ ФАЙЛ <br/> Щелкните папку WEBPAGES \ FIRST file <br/> Щелкните «открыть», и ваша страница должна появиться.</p><p> В Internet Explorer: <br/> Верхнее меню; FILE \ OPEN \ BROWSE <br/> Щелкните папку WEBPAGES \ FIRST file <br/> Щелкните "open", и ваша страница должна появиться.<br/></p><p> Если страница не открывается, вернитесь к вводу в блокноте и убедитесь, что все теги HTML верны. Убедитесь, что между тегами и внутренним текстом нет пробелов; проверьте, что все теги закрыты; проверьте, что вы не написали или. Ваша страница со временем заработает.</p><p> Сделайте еще одну страницу. Назовите его somethingdifferent.html и поместите в ту же папку WEBPAGES, как описано выше.</p><p> начать форматирование на втором уроке <br/> вернуться к индексу wws</p><h2><span class="ez-toc-section" id="i-29"> Создание и просмотр веб-страницы на вашем компьютере </span></h2><h3><span class="ez-toc-section" id="i-30"> Создание и просмотр веб-страницы на вашем компьютере </span></h3><h5></h5><strong> Требования: </strong></h5><ul><li> Текстовый редактор</li><li> Интернет-браузер</li><li> Завершил Часть 1 курса «Изучение HTML и CSS» от Codecademy</li>.</ul><h5></h5><strong> Введение </strong></h5><p> Когда вы переходите на веб-страницу в Интернете, браузер выполняет много работы.Браузер читает все необходимые файлы (HTML, CSS и JavaScript) и интерпретирует эти необработанные ресурсы, чтобы нарисовать сложную страницу, которую вы видите.</p><p> Из этой статьи вы узнаете, как создать веб-страницу с помощью текстового редактора на своем компьютере, а затем просмотреть ее в браузере. Если вы хотите опубликовать свою веб-страницу во всемирной паутине (Интернет) для всеобщего обозрения, ознакомьтесь с этой статьей после того, как поймете описанные ниже действия.</p><h5></h5><strong> Шаг 1. Откройте текстовый редактор </strong></h5><p> Первый шаг - открыть текстовый редактор.Важно использовать «необработанный» текстовый редактор, а не форматированный текстовый редактор.</p><p> Текстовые процессоры вставляют символы, которые улучшают внешний вид страницы, но не являются допустимым HTML. Это отличные инструменты для создания стильных документов, таких как научные статьи и листовки, но они также могут вставлять символы, не соответствующие формату HTML. Поскольку файл веб-страницы должен содержать допустимый HTML, текстовый редактор - лучший инструмент для создания веб-страниц, чем текстовый процессор.</p><h5></h5><strong> Шаг 2. Напишите свой HTML-скелет </strong></h5><p> Теперь, когда ваш текстовый редактор открыт, вы можете начать писать свой HTML.Как вы узнали из первого урока курса HTML и CSS, есть несколько вещей, которые всегда присутствуют в хорошо отформатированном HTML-файле. Вот они снова все вместе:</p><pre> <pre> <code> <p> <! DOCTYPE html> <html> <head> <title> Моя первая веб-страница! Привет, мир!
Если хотите, можете использовать именно этот скелет. Просто скопируйте и вставьте его в текстовый редактор.Убедитесь, что вы включили все!
Шаг 3. Сохраните файлТеперь ваша веб-страница готова, но в настоящее время она существует только внутри вашего текстового редактора. Следующим шагом будет сохранение файла на вашем компьютере. Если вы сейчас закроете текстовый редактор без сохранения, ваша новая веб-страница будет потеряна! При сохранении файла следует помнить о нескольких важных моментах:
- Используйте расширение HTML-файла
.html, т. Е.about_me.html - Не используйте в имени файла пробелы или специальные символы.Вместо этого используйте подчеркивание (_) или дефис (-).
- Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!
Используйте расширение HTML-файла
.htmlРасширение файла - это суффикс имени файла, описывающий его тип. Расширение файла - это всегда последние 3 или 4 символа имени файла, которым предшествует точка. Например, расширение HTML-файла -
.html, и оно сообщает браузеру (и другим приложениям) интерпретировать содержимое файла как веб-страницу.Обратите внимание, что на старых веб-страницах вы можете видеть.htm, но это архаично и больше не используется.Не используйте пробелы или специальные символы в имени файла
Выбирая имя файла, будьте проще. Придерживайтесь цифр и букв. Используйте символы подчеркивания (
_) или тире (–) вместо пробелов. Не используйте знаки процента, косые черты, вопросительные знаки, восклицательные знаки, запятые и другие «специальные символы». Браузеру необходимо найти файл по его имени, а специальные символы в имени файла могут прервать этот процесс.Имена файлов должны быть простыми и соответствовать соглашениям, чтобы сделать переход на вашу веб-страницу более надежным.Решите, где на вашем компьютере вы сохраните файл
После выбора имени файла выберите соответствующее место в файловой системе для сохранения веб-страницы. Рекомендуется создать новую папку для этой веб-страницы. Если вы действительно создаете новую папку, используйте те же соглашения об именах, которые описаны выше, чтобы свести к минимуму головные боли в будущем. Самая важная вещь при выборе места для сохранения - это запомнить, где вы его сохранили .Если вы уже сохранили его, но не помните, где, просто нажмите
Шаг 4. Откройте веб-страницу в браузереФайл> Сохранить как ..., выберите новое место для сохранения и обязательно запомните это время.Теперь вы готовы просматривать новую страницу в браузере! Сначала откройте свой браузер. В верхнем меню нажмите
ОбзорФайл> Открыть файл. Перейдите в место, где вы сохранили свою веб-страницу. Щелкните файл своей веб-страницы, а затем щелкнитеОткрыть.Вы должны увидеть свою веб-страницу!За это короткое время вы узнали, как взять то, что вы изучаете на Codecademy, и использовать на своем персональном компьютере. Вы также узнали о расширениях файлов, текстовых редакторах, а также о сохранении и просмотре локальных файлов. Теперь вы готовы испытать все, что вы узнаете в Codecademy, на себе и практиковаться самостоятельно!
Начиная с HTML + CSS
Начиная с HTML + CSSЭто короткое руководство предназначено для людей, которые хотят начать использовать CSS и никогда раньше не писали таблицы стилей CSS.
Он не очень хорошо объясняет CSS. Это просто объясняет, как создавать файл HTML, файл CSS и как заставить их работать вместе. После что вы можете прочитать любой из ряда других учебные пособия по добавлению дополнительных функций в файлы HTML и CSS. Или же вы можете переключиться на использование специального редактора HTML или CSS, который помогает создавать сложные сайты.
В конце руководства вы создадите HTML-файл, выглядит так:
Итоговая HTML-страница с цветами и макетом, выполненная с CSS.
Обратите внимание, я не утверждаю, что это красиво ☺
разделов которые выглядят так, необязательны. Они содержат дополнительное объяснение кодов HTML и CSS в примере. В "тревога!" знак в начале указывает, что это более продвинутый материала, чем остальной текст.
Шаг 1: написание HTML
Для этого урока я предлагаю вам использовать только самые простые из инструменты. Например, Блокнот (в Windows), TextEdit (в Mac) или KEdit (под KDE) подойдет.Как только вы поймете принципы, вы можете переключиться на более продвинутые инструменты или даже на коммерческие программы, такие как Style Master, Dreamweaver или GoLive. Но для вашей самой первой таблицы стилей CSS лучше не быть отвлекается на слишком много дополнительных функций.
Не используйте текстовый процессор, например Microsoft Word или OpenOffice. Обычно они создают файлы, которые веб-браузер не может прочитать. Для HTML и CSS, нам нужны простые текстовые файлы.
Шаг 1: откройте текстовый редактор (Блокнот, TextEdit, KEdit или все, что вам нравится больше всего), начните с пустого окна и введите следующий:
Моя первая стилизованная страница Моя первая стилизованная страница
Добро пожаловать на мою стилизованную страницу!
В нем отсутствуют изображения, но, по крайней мере, в нем есть стиль.И на нем есть ссылки, даже если они не идут где угодно & hellip;
Здесь должно быть больше, но я не знаю что еще. <адрес> Сделано 5 апреля 2004 г.
сам.На самом деле вам не нужно вводить его: вы можете скопировать и вставить его с этой веб-страницы в редактор.
(Если вы используете TextEdit на Mac, не забудьте указать Отредактируйте текст, чтобы убедиться, что текст действительно является обычным текстом, перейдя в Формат меню и выберите «Сделать обычный текст».)
первая строка HTML-файла выше сообщает браузеру, какой тип HTML это (DOCTYPE означает DOCument TYPE). В данном случае это HTML версии 4.01.
Слова внутри <и> называются тегами и, как вы можете видеть, что документ содержится в и теги. Между
и там есть место для различного рода информации, которая не отображается на экран. Пока что он содержит название документа, но позже мы добавит туда и таблицу стилей CSS. - это фактический текст документа. В принципе, там будет отображаться все, кроме текст внутри , который служит комментарием себе. Браузер проигнорирует это.Из тегов в примере
- вводит «Неупорядоченный
Список », то есть список, в котором элементы не пронумерованы. В
- - это начало «элемента списка».
- это "Пункт."А - это" якорь ", и именно поэтому создает гиперссылку.
Редактор KEdit, показывающий исходный HTML-код.
Если вы хочу знать, что означают имена в <…>, одно хорошее место для start is Начало работы с HTML. Но всего несколько слов о структуре нашего примера HTML-страницы.
- «ul» - это список с одной гиперссылкой для каждого элемента. Это будет служат нашим «меню навигации по сайту», ссылаясь на другие страницы нашего (гипотетического) веб-сайта.Предположительно все страницы на нашем сайте есть подобное меню.
- Элементы «h2» и «p» образуют уникальное содержание этого страницы, а подпись внизу («адрес») снова будет аналогично на всех страницах сайта.
Обратите внимание, что я не закрыл элементы «li» и «p». В HTML (но не в XHTML) разрешено опускать
и, которые я сделал здесь, чтобы текст немного
легче читать. Но вы можете добавить их, если хотите. - селектор (в примере: «тело»), который сообщает браузер, на какую часть документа действует правило;
- свойство (в примере «цвет» и 'background-color' - оба свойства), который указывает, что устанавливается аспект макета;
- и значение («пурпурный» и «# d8da3d»), которые дает значение свойства стиля.
Предположим, что это будет одна страница веб-сайта. с несколькими похожими страницами. Как это обычно бывает с текущими веб-страницами, у этого есть меню, которое ссылается на другие страницы гипотетического сайт, уникальный контент и подпись.
Теперь выберите «Сохранить как…» в меню «Файл», перейдите к каталог / папка, в которую вы хотите его поместить (рабочий стол в порядке) и сохраните файл как «mypage.html». Редактор пока не закрывайте, мы нужно это снова.
(Если вы используете TextEdit в Mac OS X до версии 10.4, вы увидит параметр Не добавлять расширение .txt в поле "Сохранить как" диалог. Выберите этот вариант, потому что имя «mypage.html» уже включает расширение. Более новые версии TextEdit заметят .html расширение автоматически.)
Затем откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл с помощью файлового менеджера (Windows Explorer, Finder или Konqueror) и щелкните или дважды щелкните «mypage.html »файл. Это должен открыться в веб-браузере по умолчанию. (Если это не так, откройте браузера и перетащите в него файл.)
Как видите, страница выглядит довольно скучно…
Шаг 2: добавляем несколько цветов
Вы, вероятно, видите черный текст на белом фоне, но он зависит от того, как настроен браузер. Так что одну простую вещь мы можем сделать страницу более стильной - это добавить цветов. (Оставь браузер открыт, мы будем использовать его позже.)
Мы начнем с таблицы стилей, встроенной в файл HTML. Позже мы поместим HTML и CSS в отдельные файлы. Отдельный файлы хороши тем, что упрощают использование одной и той же таблицы стилей для нескольких файлов HTML: вам нужно только написать таблицу стилей однажды. Но на этом этапе мы просто храним все в одном файле.
Нам нужно добавить элемент
[так далее.]В первой строке говорится, что это таблица стилей и что это написано в CSS («текст / CSS»). Во второй строке написано, что мы добавляем стиль элементу «body».Третья строка устанавливает цвет текста на фиолетовый, а в следующей строке фон становится зеленоватым желтый.
Стиль листы в CSS состоят из правил . В каждом правиле есть три части:
Пример показывает, что правила можно комбинировать. Мы установили два properties, поэтому мы могли бы создать два отдельных правила:
тело {цвет: фиолетовый} тело {background-color: # d8da3d}, но поскольку оба правила влияют на тело, мы написали «тело» только один раз. и соедините свойства и значения. Для получения дополнительной информации о переключатели, см. главу 2 документа Lie & Bos .
Фон основного элемента также будет фоном всего документа.Мы не указали ни один из других элементов (p, li, address…) любой явный фон, поэтому по умолчанию они будут нет (или: будет прозрачным). Свойство color устанавливает цвет текста для основного элемента, но все остальные элементы внутри тела наследует этот цвет, если явно не переопределен. (Позже мы добавим другие цвета.)
Теперь сохраните этот файл (используйте «Сохранить» в меню «Файл») и вернитесь назад. в окно браузера. Если вы нажмете кнопку «Обновить», то дисплей должен измениться с «скучной» страницы на цветной (но еще довольно скучная) страница.Помимо списка ссылок вверху, текст теперь должен быть фиолетовым на зеленовато-желтом фоне.
Как один браузер показывает страницу теперь, когда некоторые цвета были добавлен.
цвета могут быть указывается в CSS несколькими способами. В этом примере показаны два из них: по имени («фиолетовый») и по шестнадцатеричному коду («# d8da3d»). Есть около 140 названий цветов и шестнадцатеричные коды позволяют использовать более 16 миллион цветов. Добавление нотки стиля объясняет больше о эти коды.
Шаг 3: добавление шрифтов
Еще одна вещь, которую легко сделать, - это провести различие в шрифты для различных элементов страницы. Итак, давайте установим текст шрифтом «Джорджия», кроме заголовка h2, который мы дать «Helvetica».
В Интернете никогда нельзя быть уверенным, какие шрифты есть у ваших читателей. на их компьютерах, поэтому мы также добавляем альтернативы: если Грузия недоступен, Times New Roman или Times тоже подойдут, и если в противном случае браузер может использовать любой другой шрифт с засечками.Если Helvetica отсутствует, Geneva, Arial и SunSans-Regular очень похожи по форме, и если ни один из эти работы, браузер может выбрать любой другой шрифт, который без засечек.
В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):
Моя первая стилизованная страница [так далее.]Если вы сохраните файл еще раз и нажмете «Обновить» в браузере, теперь должны быть разные шрифты для заголовка и других текст.
Теперь шрифт основного текста отличается от шрифта заголовка.
Шаг 4: добавление панели навигации
Список вверху HTML-страницы предназначен для меню навигации. На многих веб-сайтах есть своего рода меню вверху или сбоку страницы, и на этой странице он должен быть как хорошо.Мы положим его на левую сторону, потому что это немного интереснее, чем наверху…
Меню уже находится на странице HTML. Это список
- на вершине. Ссылки в нем не работают, так как наш «веб-сайт» пока
состоит всего из одной страницы, но теперь это не имеет значения. На реальном
Веб-сайт, конечно, не должно быть битых ссылок.
Итак, нам нужно переместить список влево и переместить оставшуюся часть текст немного правее, чтобы освободить для него место.Свойства CSS мы используем для этого padding-left (для перемещения основного текста) и «позиция», «слева» и «вверху» (для перемещения по меню).
Есть и другие способы сделать это. Если вы ищете «столбец» или «Layout» на странице Learning CSS вы найдете несколько готовых к работе шаблоны. Но этот подходит для наших целей.
В окне редактора добавьте следующие строки в HTML файл (строки 7 и 12-16):
Моя первая стилизованная страница [так далее.]Если вы снова сохраните файл и перезагрузите его в браузере, вы теперь должен иметь список ссылок слева от основного текста. Это уже выглядит намного интереснее, не так ли?
Основной текст перемещен вправо, а список ссылки теперь находятся слева от него, а не вверху.
'position: absolute' говорит, что элемент ul позиционируется независимо от текста, стоящего до или после него в документ, а «левый» и «верхний» указывают, что это за позиция.В этом случае 2em сверху и 1em слева окно.
«2em» означает, что в 2 раза больше текущего шрифта. Например, если меню отображается шрифтом из 12 пунктов, тогда 2em равно 24 точки. 'Em' - очень полезная единица в CSS, поскольку она может адаптировать автоматически к шрифту, который использует читатель. Большинство в браузерах есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что меню увеличивается в размере по мере того, как шрифт увеличивается, чего не было бы, если бы мы использовали размер в пикселях.
Шаг 5. Стилизация ссылок
Меню навигации по-прежнему выглядит как список, а не меню. Давайте добавим ему стиля. Мы удалим маркер из списка и переместим предметы слева, туда, где была пуля. Мы также дадим каждому элементу свой белый фон и черный квадрат. (Почему бы и нет особая причина, просто потому что мы можем.)
Мы также не сказали, какими должны быть цвета ссылок, поэтому давайте добавим и это: синий для ссылок, которые пользователь не видел еще и фиолетовый для уже посещенных ссылок (строки 13-15 и 23-33):
Моя первая стилизованная страница [так далее.]Обычно браузеры показывают гиперссылки с подчеркиванием и с цвета. Обычно цвета похожи на те, что мы указали. здесь: синий для ссылок на страницы, которые вы еще не посещали (или посещены давно), фиолетовый для страниц, которые вы уже посетили видимый.
В HTML гиперссылки создаются с помощью элементов , поэтому укажите цвет, нам нужно добавить правило стиля для «а». К различать посещенные и непосещенные ссылки, CSS предоставляет два «псевдокласса» (: ссылка и: посещенный). Они называются «Псевдоклассы», чтобы отличать их от атрибутов класса , , которые появляются непосредственно в HTML, например,
class = "navbar"в нашем примере.Шаг 6: добавляем горизонтальную линию
Последним дополнением к таблице стилей является горизонтальная линейка для отделите текст от подписи внизу.Мы будем использовать 'border-top', чтобы добавить пунктирную линию над <адрес> элемент (строки 34-37):
Моя первая стилизованная страница [так далее.]Теперь наш стиль завершен. Далее давайте посмотрим, как мы можем поставить таблица стилей в отдельном файле, чтобы другие страницы могли делиться в том же стиле.
Шаг 7: размещение таблицы стилей в отдельном файле
Теперь у нас есть HTML-файл со встроенной таблицей стилей. Но если наш сайт растет, мы, вероятно, хотим, чтобы многие страницы имели один и тот же стиль. Есть способ лучше, чем копирование таблицы стилей в каждый страница: если мы поместим таблицу стилей в отдельный файл, все страницы могут укажите на это.
Чтобы создать файл таблицы стилей, нам нужно создать еще один пустой текст файл. Вы можете выбрать «Новый» в меню «Файл» редактора, чтобы создать пустое окно.(Если вы используете TextEdit, не забудьте сделайте это снова обычным текстом, используя меню «Формат».)
Затем вырежьте и вставьте все, что находится внутри <стиля> элемент из HTML-файла в новое окно. Не копируйте сами по себе. Они принадлежат HTML, не в CSS. В новом окне редактора теперь у вас должен быть полная таблица стилей:
тело { отступ слева: 11em; font-family: Georgia, "Times New Roman", Times, serif; цвет: фиолетовый; цвет фона: # d8da3d} ул.navbar { тип-стиль-список: нет; отступ: 0; маржа: 0; позиция: абсолютная; верх: 2em; слева: 1em; width: 9em} h2 { семейство шрифтов: Helvetica, Geneva, Arial, SunSans-Regular, без засечек} ul.navbar li { фон: белый; маржа: 0.5em 0; заполнение: 0.3em; border-right: 1em сплошной черный} ul.navbar a { text-decoration: none} ссылка { цвет синий } а: посетил { цвет: фиолетовый} адрес { маржа сверху: 1em; padding-top: 1em; border-top: тонкая пунктирная}Выберите «Сохранить как…» в меню «Файл», убедитесь, что вы находитесь в тот же каталог / папка, что и mypage.html и сохраните таблица стилей как «mystyle.css».
Теперь вернитесь к окну с HTML-кодом. Удалить все от тега включительно тег и замените его элементом, как показано ниже (строка 5):
Моя первая стилизованная страница [так далее.]Это сообщит браузеру, что таблица стилей находится в файл с именем «mystyle.css», и поскольку каталог не упоминается, браузер будет искать в том же каталоге, где он нашел HTML файл.
Если вы сохраните файл HTML и перезагрузите его в браузере, вы не должно быть изменений: страница по-прежнему оформлена так же, но теперь стиль берется из внешнего файла.
Окончательный результат
Следующим шагом будет размещение обоих файлов mypage.html и mystyle.css на вашем веб-сайте. (Ну, возможно, вы захотите немного изменить их сначала…) Но как это сделать, зависит от вашего интернет-провайдера.
10+ бесплатных способов попасть на первую страницу Google
Для тех, кто пытается привлечь органический трафик, Google является всемогущим. Он сканирует Интернет, определяя, какие страницы наиболее полезны и актуальны для пользователей практически по любой теме. Мы не просто доверяем результатам Google, мы полагаемся на них.
При такой огромной мощи и влиянии вывод вашего малого бизнеса на первую страницу Google может показаться нереальным. Однако именно эта сила, которой обладает Google, позволяет малым и местным предприятиям более чем когда-либо занимать высокие позиции в результатах поиска - для бесплатно!
В этом посте я расскажу о нескольких реальных действиях, которые вы можете предпринять, чтобы помочь вашему бизнесу подняться на вершину первой страницы, используя две бесплатные стратегии: оптимизация веб-сайта и оптимизация листинга.Сначала я расскажу о важности первой страницы Google, а затем перейду к тактике, которая включает:
- Добавление ключевых слов в определенные места на вашем веб-сайте
- Создание контента для людей, а не для Google
- Выделение местоположения
- Регулярное обновление и ведение вашей записи в Google
- И многие другие
Совершенно очевидно, что первая страница Google - стоящая (если не важная) цель для любого бизнеса, но давайте сначала рассмотрим ее конкретные преимущества, поскольку это может помочь вам расставить приоритеты в стратегии вашего бизнеса.
Почему важна первая страница Google
Результаты поиска Google становятся более надежными благодаря панелям знаний, полям ответов, расширяемым связанным вопросам, локальным результатам и многому другому. При таком большом количестве способов выделиться, работа для достижения наивысшего рейтинга стоит затраченных усилий, особенно с учетом того, что трафик и рейтинг кликов стремительно падают по мере того, как кто-то продвигается вниз по результатам поиска.
Трафик и вовлеченность резко падают после первых нескольких результатов.
Попадание на первую страницу означает значительно более высокий рейтинг кликов
Это известный факт, что первая страница Google захватывает большую часть трафика, но знаете ли вы, что есть существенные различия в рейтинге кликов для верхних и нижних результатов? Одно исследование показывает следующие показатели CTR по позиции Google:
• Первый результат: рейтинг кликов 36,4%
• Второй результат: рейтинг кликов 12,5%
• Третий результат: рейтинг кликов 9,5%CTR продолжает снижаться до 2.2% за 10-й результат (обычно максимум 10 обычных результатов на странице, даже меньше сейчас с локальными результатами, рекламой, полями ответов и другими новыми функциями. Если вы не находитесь в верхней части результатов поиска Google, вам не хватает выходит за много кликов.
Получите немедленное воздействие
Лучшие результаты поиска Google теперь также заполняются полями для ответов «Ноль позиции», также известными как избранные фрагменты:
Получение первого места в Google может привести к тому, что вы попадете в избранный фрагмент, что сразу же предоставит вашему бизнесу доступ и повысит доверие к вам.
Доля трафика верхней позиции
Другое исследование показало, что лучший результат в Google захватывает 33% поискового трафика. Чем ближе ваш сайт к топу появится в Google, тем лучше будет ваше присутствие в поисковой сети и авторитет бренда.
Какую пользу приносит рейтинг первой страницы вашему бизнесу?
Важно понимать, что получение высокого рейтинга в Google может помочь вашему бизнесу в достижении различных целей.
1. Улучшите свою видимость
Допустим, у вас есть кирпичное здание.Если бы у вас был выбор между размещением вашего бизнеса на главной дороге, проходящей через город, или в тихом переулке, какой из них вы бы выбрали? Конечно же, главная дорога.
При 167 миллиардах поисковых запросов в месяц попасть на первую страницу Google - все равно что начать свой бизнес на самой оживленной улице города. Чем больше людей видят ваш сайт, тем выше узнаваемость вашего бренда. Чем больше потребители знакомы с вашим брендом, тем более восприимчивыми они будут к конверсионным действиям.
2.Привлекайте больше потенциальных клиентов
А что, если бы вам пришлось выбирать между главной улицей разнообразного города или городом идеальных клиентов? Первых страниц Google столько же, сколько поисковых запросов. Ваша цель - попасть на первую страницу по запросам, которые выполняют ваши идеальные клиенты. Поступая таким образом, вы будете обнаружены потребителями, которые ищут в Интернете с намерением совершить покупку или принять участие. Эти люди с наибольшей вероятностью превратятся в потенциальных клиентов и клиентов для вашего бизнеса.
Хотите узнать, какие ключевые слова SEO люди ищут в вашей нише? Попробуйте наш бесплатный инструмент подсказки ключевых слов!3.Увеличить вовлеченность
По данным Adweek, 81% покупателей проводят онлайн-исследования перед покупкой, и Google является лучшим выбором для этого. С полями для ответов, разделом «Люди также спрашивают» и местными результатами, показывающими контактную информацию, карты, обзоры, рейтинги и описания, только страница результатов поисковой системы Google позволяет потребителям узнавать, сравнивать и взаимодействовать с вашим бизнесом еще до того, как щелкнуть на ваш результат.
Раздел «Люди тоже спрашивают».
4.Привлечь посещаемость сайта
Фрагменты и поля ответов не могут предоставить очень много информации. Хотя сама страница результатов поисковой системы может иногда предоставлять всю необходимую человеку информацию, все же остается ряд запросов, по которым люди неизбежно переходят на веб-сайт. Не забывайте, что часто требуется несколько взаимодействий с бизнесом, прежде чем человек превращается в клиента, поэтому взаимодействие с вашим сайтом очень важно.
Не только пребывание на первой странице Google значительно увеличивает посещаемость вашего веб-сайта; У , а не на первой странице Google есть огромный недостаток.Фактически, первая страница Google захватывает не менее 71% веб-трафика (некоторые источники говорят, что до 92%), а вторая страница далеко не вторая: она падает до 6% кликов на веб-сайтах. Этот резкий спад веб-трафика является показателем того, насколько важна первая страница Google.
4. Повысьте авторитет вашей отрасли
Чтобы попасть на первую страницу Google, необходимо регулярно создавать высококачественный контент, который, как признает Google, удовлетворяет потребности его поисковиков. Это требует времени, но увеличившийся трафик и полученное в результате доверие стоит вложенных средств.
Кроме того, регулярное написание статей о своей отрасли и бизнесе потребует от вас быть в курсе того, что хочет знать ваша целевая аудитория, а также последних обновлений в вашей отрасли. Появление на первой странице Google важно, потому что это способствует развитию и поддержанию надежной базы знаний, на которой может твердо стоять ваш бизнес.
5. Заработайте доверие
Алгоритм Google предназначен для распознавания спама, подозрительного и некачественного содержания.Если вы постоянно появляетесь на первой странице Google, это означает, что Google признает вас надежным источником информации, а потребители доверяют компаниям, которым доверяет Google.
6. Расширьте свою аудиторию
Как упоминалось выше, для того, чтобы попасть на первую страницу Google, необходимо создавать высококачественный, вечнозеленый контент. Этот тип контента - подарок, который продолжает дарить; его можно перепрофилировать и распространять по различным маркетинговым каналам, включая социальные сети, электронную почту и платную рекламу.
Ваши попытки попасть на первую страницу Google, ориентированные на контент, предоставят вам больше материалов и больше возможностей для взаимодействия с вашей целевой аудиторией, привлечения потенциальных клиентов и сохранения внимания.
7. Ускорьте цикл продаж
Сегодня у потребителей есть множество вариантов выбора, а также доступ ко всей информации и инструментам, которые им необходимы для обнаружения, проверки и принятия решения о бизнесе. Куда они идут, чтобы начать свои исследования? Google! Попадание на первую страницу Google поможет вам привлечь потенциальных клиентов из верхней части воронки и ускорить цикл продаж.
Сколько разных способов бесплатно попасть на первую страницу Google?
Попасть на первую страницу Google - это не только общая цель владельцев малого бизнеса, но и вполне выполнимая. Google ориентируется не на количество, а на качество. В результате более крупная компания или больший бюджет не приравниваются к высшему званию. Алгоритм Google зависит от нескольких факторов, и, благодаря тому, что страница результатов Google состоит из множества различных компонентов, существуют также различные типы носителей, которые могут получить статус первой страницы.В их числе:
• Блог публикует и страниц веб-сайта (в обычных результатах поиска )
• Ваш аккаунт в Google My Business (в разделе local / maps )Оптимизация данных о вашей компании в Google My Business гарантирует, что ваша компания и ее рейтинги будут отображаться по местным запросам.
• Фрагменты содержания вашего веб-сайта (во многих функциях страницы результатов поиска Google, включая «Люди также спрашивают» и поле для ответа.
• Ваши целевых страниц (Это через раздел платных объявлений , который не является бесплатным, но все же стоит упомянуть. Чтобы получить дополнительную помощь по использованию платных стратегий для перехода на первую страницу Google, перейдите к этому сообщению в Google Учебники по рекламе.)
Теперь вернемся к двум бесплатным средам, с помощью которых можно перейти на первую страницу.
Как использовать ваш сайт, чтобы попасть на первую страницу Google
Практика согласования вашего веб-сайта с факторами ранжирования в поисковых системах называется поисковой оптимизацией (SEO).Вы не обязательно оптимизируете для поисковых систем сразу весь сайт, а, скорее, каждую отдельную страницу вашего сайта. Вот как это сделать:
1. Определите ключевые слова
Во-первых, определите, на какие поисковые запросы вы хотите, чтобы Google отвечал на страницах вашего веб-сайта. Они известны как ключевые слова, которые, кстати, могут быть отдельными словами ИЛИ фразами.
Примеры ключевых слов:
• «Законы об арендаторах MA»
• «салон рядом со мной»
• «поздний завтрак в Бостоне»
• «ремонт кондиционеров в Брайтоне»
• «как заткнуть протекающую крышу»
• «как попасть на первую страницу Google ”Каждая страница вашего веб-сайта должна быть нацелена на разный набор ключевых слов, чтобы страницы не конкурировали друг с другом.
Правильные ключевые слова для вашего бизнеса - это те, которые ваши идеальные клиенты вводят, чтобы получить нужные им продукты и услуги. Чтобы подобрать ключевые слова для вашего бизнеса, попробуйте наш бесплатный инструмент подсказки ключевых слов.
Воспользуйтесь нашим бесплатным инструментом подсказки ключевых слов, чтобы найти популярные ключевые слова для вашей ниши.
2. Сообщите Google, какие ключевые слова вы используете
Google работает, сканируя Интернет, ранжируя миллионы существующих страниц и сохраняя их в индексе.Когда пользователь выполняет поиск, Google может сканировать свой более организованный индекс (а не всю сеть), чтобы быстро получить релевантные результаты.
Следовательно, еще один важный шаг для отображения на первой странице Google - максимально упростить для Google сканирование, индексирование и поиск вашего сайта. Для этого разместите ключевые слова в следующих местах:
Мета-заголовокУ каждого сообщения в блоге и каждой странице вашего веб-сайта есть мета-заголовок. Этот заголовок отображается вверху вашей страницы в виде заголовка, а также в качестве заголовка списка этой страницы в результатах поиска (в зависимости от настроек вашей CMS).
МетаописаниеМетаописание - это небольшое рекламное объявление, которое отображается под заголовком в результатах поиска Google.
В дополнение к сообщению Google, о чем ваша страница, мета-описание быстро сообщает поисковику, чего он может ожидать, если он нажмет на вашу страницу, увеличивая релевантные клики для этой страницы. Таким образом, мета-описание помогает Google разместить вашу компанию на правильной первой странице для правильного поиска и помогает поисковикам Google удерживать ее там.
URLВаш URL-адрес состоит из вашего доменного имени (например, wordstream.com), за которым следует косая черта и текст, разделенный дефисами.
Включение ключевых слов в ваш URL-адрес поможет Google быстрее определить, о чем ваша страница. Кроме того, URL-адрес отображается между заголовком и метаописанием в результатах поиска. Чистый URL-адрес, который соответствует названию страницы, более привлекателен и заслуживает доверия для пользователей и лучше подходит для появления на первой странице.
Альтернативные тегиGoogle может видеть изображения только в том случае, если у изображения есть альтернативный текст (также известный как тег alt). Если ваш тег alt включает ключевые слова, Google может определить дальнейшую релевантность этой страницы и будет удобнее размещать вас на своей первой странице результатов поиска.
3. Пишите для людей
Конечно, основная часть содержания вашей страницы - это самое важное место для включения ключевых слов, по которым вы пытаетесь ранжироваться. Однако очень важно, чтобы эти ключевые слова не вставлялись систематически и чрезмерно, а включались естественным образом.Фактически, теперь Google может обнаруживать переполнение ключевыми словами, и если он это делает, он уведет вас далеко-далеко от первой страницы своих результатов.
Ключом к попаданию на первую страницу Google является предоставление полезного, заслуживающего доверия, легкого для чтения, но информативного содержания, которое удержит вашу целевую аудиторию на ваших страницах и вернется за новыми. А делиться знаниями, уже находящимися в вашей голове, легко и бесплатно. Просто помните, что если вы хотите занять место на первой странице Google по определенному поиску по ключевым словам, ваша страница должна предоставлять информацию, а не только ключевые слова, , которые пользователи пытаются получить, когда они вводят этот поиск в Google.
4. Выделить место
Еще один бесплатный способ разместить страницы вашего веб-сайта на первой странице Google - настроить таргетинг на запросы на основе местоположения. Убедитесь, что на вашем веб-сайте четко указан ваш город и / или географическая область на странице контактов и, возможно, также на страницах сообщений в блогах и услугах. Таким образом, когда люди будут искать: «ваша отрасль +« ваш город », Google получит эту информацию и покажет вашу компанию в результатах поиска« рядом со мной ».
Даже если пользователь не выполняет поиск в определенном месте, Google по-прежнему будет выдавать географически релевантные результаты на основе их IP-адреса, поэтому локальная поисковая оптимизация не только бесплатна, но и всегда важна (даже во время пандемии).
5. Оптимизация для мобильных устройств
Вы не найдете веб-сайт в верхней части поисковой системы Google, который не отвечает. Потребители теперь чаще используют телефоны и планшеты, чем компьютеры и ноутбуки, и большая часть локального поиска выполняется с мобильных устройств. В результате Google отдает предпочтение сайтам, оптимизированным для мобильных устройств. Фактически, все сайты теперь индексируются с ориентацией на мобильные устройства.
Responsive идеально подходит, так как ваш веб-сайт адаптируется к экрану любого размера и сохранит функциональность. Однако, если у вас нет адаптивного веб-сайта, вы можете внести некоторые изменения в свой сайт, чтобы обеспечить максимально удобную работу для мобильных пользователей.
6. Ориентация на пользовательский опыт
Для веб-сайта недостаточно мобильности. Он также должен быть привлекательным и удобным для пользователя. Веб-сайт с интуитивно понятной навигацией, четкими призывами к действию и ответами на самые важные вопросы посетителей будет удерживать посетителей на нем дольше и возвращать их позже, что Google заметит и, в свою очередь, повысит ваш рейтинг. Чем выше ваш рейтинг, тем больше трафика вы получите на свой сайт и тем выше вероятность того, что вы попадете на первую страницу.
Как использовать данные о вашей компании, чтобы попасть на первую страницу Google
Помимо страниц вашего веб-сайта, списки вашего онлайн-каталога предприятий также могут отображаться на первой странице поиска Google. Вот что вам нужно сделать:
7. Создайте аккаунт в Google My Business
Google Мой бизнес превращается в один из самых мощных (не говоря уже о бесплатных) инструментах для владельцев местного бизнеса. И Карты Google, и Поиск используют Google Мой бизнес для создания местных списков (известных как бизнес-профили).Создание учетной записи в Google My Business - это быстрый и простой способ добавить дополнительную информацию в профиль вашей компании, которая поможет ему появиться на первой странице Google Maps и Search (в разделе обычных результатов) h. Убедитесь, что вы завершили заявку и подтвердили свое объявление, чтобы вы могли отслеживать, поддерживать и оптимизировать свое объявление.
8. Оптимизируйте данные о своей компании в Google (профиль компании)
Говоря об оптимизации вашего листинга, я считаю эту стратегию отдельной сущностью, потому что, хотя создание листинга в Google может помочь вам с вашей видимостью, оно может увести вас только в плане ранжирования.Вместо того, чтобы создавать простой список и надеяться, что он появится после одного или двух поисковых запросов, оптимизируйте данные о своей компании в Google для максимальной видимости. Вот как:
Заполните каждый раздел своего профиляЧем больше информации вы включите в свой список в Google Мой бизнес, тем больше результатов поиска он сможет отобразить на первой странице. Фактически, полные списки в Google Мой бизнес получают в среднем в 7 раз больше кликов, чем неполные.
Сохраняйте постоянство своего имени
Всегда используйте одно и то же название для своей компании.Google не любит неточностей, даже таких незначительных, как "Компания". vs «Компания»
Обновите свою информациюОтсутствие возможности найти свой бизнес, его закрытие или вызов оператора при попытке звонка может не только отпугнуть клиента, но и заставить его не доверять вашему бизнесу или написать отрицательный отзыв. Оставайтесь на вершине своего списка в Google и вносите необходимые обновления и изменения, чтобы ему можно было доверять, чтобы быть в верхней части списка.
Загрузить фото в ваше объявлениеGoogle Мой бизнес стремится предоставить потребителям как можно больше информации о бизнесе, еще до того, как они столкнутся с этим бизнесом.Это включает в себя то, каково это быть в этой компании, поэтому обязательно загружайте фотографии, на которых изображены не только продукты и услуги, которые предлагает ваша компания, но также атмосфера и люди, которые ее часто посещают.
Попробуйте наш Google My Business Grader
У нас есть бесплатный инструмент, разработанный специально для списков в Google Мой бизнес. Просто войдите в свой бизнес-аккаунт Google, и менее чем через 30 секунд вы получите оценку своего профиля и узнаете, что вам нужно сделать, чтобы приблизиться к первой странице.
9. Получите отзывы клиентовПоисковики Google любят знать, что другие люди думают о компании, поэтому неудивительно, что компании с более положительными отзывами в Google появляются на первой странице. Спросите клиентов лично и создайте ссылку для обзора, чтобы вы могли легко поощрять отзывы через свои онлайн-каналы. Хотя технически это подпадает под список оптимизаций Google Мой бизнес, не забывайте, что существует множество других сайтов с обзорами, и все они влияют на ваш рейтинг.
Отзывы могут направить вас в «Локальный пакет», который отображается в верхней части поисковой выдачи Google.
10. Разместите свою компанию в других каталогах
Google Мой бизнес - мощный инструмент, но вам все равно следует создавать и оптимизировать списки в других популярных каталогах, таких как Yelp. Во-первых, потому что Yelp имеет высокий трафик и пользуется большим доверием в Google, поэтому страница Yelp вашей компании может очень хорошо отображаться на первой странице Google при релевантном поиске. Во-вторых, потому что надежное объявление с положительными отзывами улучшает ваше присутствие в Интернете в целом.Онлайн-обзоры и ссылки с других надежных сайтов посылают в Google сигналы, которые учитываются в его алгоритме ранжирования.
Как и в случае с вашим бизнес-профилем Google, убедитесь, что остальные списки ваших онлайн-каталогов полны и точны, согласованы на разных платформах, обновлены, и что вы собираете отзывы и отвечаете на них. Не забудьте также добавить фотографии в свои онлайн-объявления.
Попасть на первую страницу Google - это осязаемая цель
Попасть в топ Google или просто улучшить свой рейтинг - это вполне выполнимо даже для малого бизнеса.Это требует работы и времени, но это одна из самых важных вещей, которые вы можете сделать для своего бизнеса. Зная, где и как вносить коррективы, вы сможете добиться того, чтобы ваш бизнес был заметен. Вот стратегии в резюме:
- Создайте стратегию ключевых слов, чтобы ориентироваться на запросы, которые ищут ваши целевые клиенты.
- Включите ключевые слова в контент вашего веб-сайта, а также в HTML-теги.
- Пишите для людей (не для поисковых систем).
- Целевой поиск на основе местоположения.
- Оптимизация для мобильных устройств.
- Используйте расширение HTML-файла