Html первая страница: Введение в HTML

Содержание

Первая WEB страница.

Уроки для чайников

Прежде, чем приступить к теоретическому изучению основ WEB программирования, в браузер поисковой системы интернет вставим искомое словосочетание, и увидим множество сайтов и страниц, связанных с нашей темой. В свое время , я остановился на сайте monemaster.ru, где автор сайта Владимир Бывалов подробно излагает материал по интересующей тематике и не только. На сайте достаточно справочных материалов по веб программированию и веб дизайну. Доходчиво изложен материал о создании, регистрации и размещении сайта в интернете в уроках Владимира Дворянкова. Настоящим клондайком, стала книга Владимира Дронова «Adode Dreamweaver CS3». Но об этой книге остановлюсь позже, после освоения первых уроков и создания первых страниц. И так сконцентрируем все отобранные материалы папке «избранное» и приступим к изучению и практическому применению изученного.

Что такое HTML?

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

Для установления соединения с удаленным сервером используется сетевой адрес документа. Этот адрес зовется универсальным указателем ресурса — URL (Uniform Resource Locator). В ответ сервер посылает документы, чаще всего в формате HTML. Можно считать, что в нормальных условиях после запуска программы-браузера и ее подключения к серверу последовательно происходит шесть событий:

1. Hа стороне пользователя браузер декодирует заданный URL и подключается к серверу.

2. Браузер требует от сервера предоставить необходимый документ.

3. Сервер преобразует переданную ему часть URL в имя файла и путь к нему.

4. Сервер отсылает найденный файл документа на компьютер пользователя.

5. Сервер разрывает установленное соединение.

6. Браузер на компьютере пользователя отражает полученный документ. HTML — HyperText Markup Language — язык разметки гипертекста.

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

http://www.w3c.org. Hа http://www.citforum.ru есть перевод стандарта.

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

<html>- Сообщает браузеру, что документ создан на HTML.

<head>- Отмечает вводную и заголовочную части HTML-документа.

<body>- Отмечает основной текст и информацию.

Эти тэги необходимы Web-браузеру для определения различных частей HTML-документа, они не оказывают прямого влияния на внешний вид WEB-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпретировали вашу страницу, а также для того, чтобы она выглядела одинаково в часто используемых браузерах. Например, на хостинге (место, где вы расположите веб-страницу) веб-сервером, создавая список имеющихся HTML-документов (подобных вашему), запускается программа, которая использует только эти тэги. Таким образом, если на странице нет этих тэгов, она не будет включена в этот список.

Урок 2. Первая страница на HTML

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

Страница же тоже очень похожа на нас. Нет, она не кушает плюшки с чаем и не ходит в магазин, но она имеет голову, и тело! Соответственно они имеют свои теги:


<!—голова-->
<head> 
</head>
<!—тело-->
<body> 
</body>

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

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


<html>

<head></head>

<body></body>

</html>

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

Но, сперва давайте добавим немного текста в наш шаблон.
В голове, то есть в теге head содержится тайтл, то есть заголовок нашей страницы, ее название. Задать его следует тегом title. А в теле документа мы пропишем текст, любой какой захотим.
Сверьтесь с моим кодом ниже, чтобы проверить, все ли понятно:


<html>

<head>
<title>Заголовок страницы</title>
</head>

<body>
Текст на моей странице.
</body>

</html>

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

← Урок 1. HTML теги | Содержание | Урок 3. Наполняем страницу текстом →

Введение в HTML — первая страница

Теперь мы попробуем приветствовать мир.

Прежде чем мы действительно начнём изучение следующей главы нам надо решить один вопрос. Терминология:

Сайт, вебсайт
Страница, вебстраница
Одностраничник, многостраничник
Вебпроект, вебприложение
Лэндинг, Landing page
Сайт визитка
Корпоротивный сайт
Вебмагазин
Онлайн СМИ
Вебпортал
Вебресурс

Это всё возможные синонимы, которые можно употребить к тому или иному веб-проекту.

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

Привет-мир #

Создаём рабочую папку
В папке создаём файл “first-page.html”
- Если у вас проблемы с созданием файла с расширением html, то попробуйте создать этот файл с помощью запроса в google “как создать html файл”.
- Рекомендую параллельно к этому пособию вообще нагугливать термины и объяснения из альтернативных источников. А вдруг я не прав, а вдруг всё уже поменялось?
Открываем в редакторе вашего выбора наш файл.
И пишем в нём ручками код.
helloworld
Что бы привести код в порядок и красиво его отформатировать — мы можем спросить у google как — “How do you format code in Visual Studio Code”. На первом месте (скорее всего) у вас будет сайт stackoverflow.com. Этот сайт помог не одному программисту в тяжёлой ситуации. Не стесняйтесь им пользоваться. Просто иногда задавайтесь вопросом: “Кто вы без этого сайта и сможете ли вы без него повторить то, что узнали?”

Сохраняем наш файл и открываем с помощью браузера. Если всё пошло так, то мы в Chromo-подобном браузере мы увидим:

helloworld в хромиуме

А в интернет эксплорере скорее всего:

helloworld в IE

И мы сразу же можем начинать ругать IE потому что он неправильно отображает страницы. Ну или дядю Андрея, потому что он специально не дал ещё одну строчку.

Мы добавляем её так, что бы она оказалась седьмой. Вот так:

helloworld с UTF

Сохраняемся и проверяем в Интернет Эксплорере наш файл заново:

Проверка страницы в IE

Так что же мы написали #

Давайте начнём с конца. <meta charset="utf-8"> это то, что должно стоять в вашем HTML коде всегда. Это указание браузеру, что на странице используется не только английская кодировка. Существует множество разных кодировок кроме utf-8. Пока можете не углублять свои познания и просто пишите это строчку всегда.

То что IE-7 в итоге отобразил нашу страшненькую страницу, не значит, что мы его простили. Я держу его только для того, что бы посмотреть время от времени какой oн ужасный. Раз мы уже коснулись браузеров — вам придётся поставить маленький зоопарк: Chrome, Firefox, Safari, Opera. Хотя с большего и хром, и опера, и фаерфокс это один и тот же браузер. Ну почти. Движок у них общий — chromium. этот зоопарк нужен для проверки работоспособности ваших приложений(web-apps) в различных ситуациях.

<meta charset="utf-8"> — это на самом деле 3 указания. Во-первых, мета обозначает, что сейчас пойдёт указание для браузера, которое не видно пользователю. Чисто техническая информация. Во-вторых, идёт указание о роде технической информации — charset. И, в-третьих, уже значение чарсета utf-8.

Но вернёмся к написанному.

DTD — Document Type Definition #

<!DOCTYPE html> — говорит браузеру, что сейчас начнётся документ написанный в HTML5. Браузер не обладает интеллектом и ему надо говорить, что он должен делать. И именно доктайп говорит, что сейчас надо отображать документ формата HTML, HTML5. Да именно в версии 5. Существуют различные доктайпы. Вот так мог выглядеть доктайп для четвёртого хтмл <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN".

<!DOCTYPE html> — всегда будет для вас (мастеров HTML5) одинаков, неизменяем и всегда пишется в первой строке.

HTML #

<html> один раз открывает код страницы и </html> один раз закрывает. Между открывающим и закрывающим тегом html мы и пишем весь код нашей страницы.

Сам html разбит на две части head и body — голова и тело.

Мы будем возвращаться к голове и телу ещё не один раз. Ну, во-первых, без них нельзя сделать ни одну страницу. А во-вторых некоторые последующие теги привязаны только к “голове” или только “телу”.

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

Абсолютно точно так же как и эта аллегория работает структура веб страницы эдакая матрёшка. Один элемент вложен в другой.

Должен признать. Я вас обманул. Всё это не так просто. Но вот до этой строчки был порог вхождения. Если вы всё поняли, представили и разобрались до этого момента, то дальше точно будет легко и просто. Обещаю!

Купились? Не будет. Нет ничего лёгкого даже в этом языке разметки. Мир меняется каждый день, все новые приборы, безбарьерный интернет, новые технологии — всё это накладывает отпечаток на наши веб страницы. Этих элементов и правда не много — сотня. Ещё с какое-то количество атрибутов к ним, ну как charset и их значений. Но с каждым из них реально надо разобраться, посмотреть примеры, применить в практике и запомнить. Не слушайте тех, кто скажет, что редакторам или блогерам HTML не нужен — это миф. Это как фехтовальщику не нужна техника владения мечом — просто руби сверху вниз. Каждый кто связан по работе с веб страницами — обязан хотя бы один раз ознакомится с возможностями этого самого HTML.

Но мы отвлеклись — едем дальше!

Head #

Голова, то есть head в него мы вложили ещё title. У тайтла тоже есть открывающий и закрывающий тег. И внутри него мы разместили текст.

Этот текст отображается в самом тайтле браузера или в закладке браузера, где открыта наша страница. Если закладок много, то текста пользователь скорее всего не увидит.
Но это тот же текст, который по дефoлту(default — стандартно) подставляется при внесении страницы в закладки. Попробуйте.
Это тот текст, который может быть виден пользователю в результатах поиска в Google.

Отсюда мораль — тайтл должен быть продуманным, если это рецепт борща, то я бы рекомендовал написать там “Рецепт борща — 12 шагов”. Если это первая страничка на уроке HTML — то наверное есть смысл написать там “My first HTML-page — HelloWorld !”. Или то что считаете нужным, например “qwerty” вы же теперь вебмастер знающий основы HTML — вам и решать.

Title #

Title размещается только внутри тега head. Title поддерживает “Global Attributes” — глобальные атрибуты (мне надо было похвалиться своим прекрасным знанием английского языка). Ссылку на список этих атрибутов я приведу внизу статьи, но самостоятельно вы его можете нагуглить уже сейчас, например этой магической фразой “global attributes w3c”. W3C — это консорциум всемирной паутины, проще говоря боги этого вашего интернета. Про них можно нагуглить в Википедии. Я вас всё время куда-то посылаю не потому что мне лень об этом написать. Просто если я буду писать про все детали — я никогда не закончу. Моя задача научить вас HTML-грамоте. Дополнительные, интересные и полезные материалы часто будут как ссылка в гугл.

Но давайте сконцентрируемся и перейдём к тому, что мы написали в body, мы открываем и закрываем теги 4 раза: h2, _ article_, _p_ и _q_.

HTML-тег h2 #

h2 — это заголовок всей страницы видимой пользователю. Очень часто h2 это название самого сайта или название статьи на нём (рецепта, видео, заметки). Вы заметили, что я написал h2 с большой? Мы ведь договорились писать всё с маленькой. Не забываем быть последовательными. h2 — браузеру всё равно, а вот читающему код человеку не всегда.

HTML-тег article #

article — вся статья помещается внутри этого тега. Если на странице две статьи, то article будет или должен быть использован дважды. Как вы понимаете, желаемое и действительное не всегда одно и то же.

HTML-тег p(paragraph) #

p — отмечает начало и конец абзаца. Зачем? Ну например, что бы текст начинался с красной строки или каждый нечётный абзац помечался бы другим оттенком, или&mldr; или&mldr; Вариантов использования для чего множество. Например транслировать на сайте в блоке “Интересные мысли” случайные абзацы редакторов сайта.

HTML-тег q (HTML Quote Element) #

q — короткая цитата или прямая речь. Очень удобно красиво выделять мысли в тексте. И кстати именно это пример малоизвестного тега, который входит в список “ай зачем их всех учить”. Забегая вперёд скажу, что если есть короткая цитата, то будет и длинная :).

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

Щас скажу <q>прямую речь только абзац новый начну</q> — так не правильно.

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

Щас скажу <q>прямую речь</q> только абзац новый начну

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

CSS #

Сначала будем делать руками, потом я попробую объяснить, что мы сделали.

Создаём в той же папке, где у нас лежит наш хтмл исходник, новый файл с названием style.css
Редактируем наш html файл и добавляем туда строчку <link rel="stylesheet" href="style.css">. Строчка должна быть вложена в head страницы, так как это информация не для человека, а для браузера. Этим самым мы говорим, где считывать стили страницы.

В сам css файл вносим:

body {
    background-color: #2D2D2D;
}

h2 {
    color: saddlebrown;
    font-size: 30px;
    font-family: Menlo, Monaco, fixed-width, serif;
}

p {
    color: white;
    font-family: "Source Code Pro", Menlo, Monaco, fixed-width, serif;
}

q {
    color: yellow;
}

Сохраняемся и проверяем наш результат в браузере. У нас должно было получится примерно следующее:

опера css

Ещё раз код и текст, который лежит в нашей html странице

<!DOCTYPE html>
<html>
<!-- Это моя первая страница. Создана 12 октября 2018 года -->

<head>
    <title>Привет мир</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<h2>Hello World!</h2>
<article>
    <p>
        Это моя первая web-страница и я очень волнуюсь: <q>получится ли у меня?</q>
    </p>
</article>
</body>

</html>

Что мы написали в стилях #

Мы указали каждый тег в стилях и сказали как его отображать.

Для всего body в фигурных { } скобках мы указали цвет бэкграунда. Цвет мы указали в общепринятой 16-ричной системе исчисления. Эту систему обозначают буквами HEX — hexadecimal или система исчисления с базисом 16. Если вы не знаете, что это такое, то коротко скажу, что мы используем систему с базисом 10 и считаем до десяти, вебдизайнеры считают до 16. Подробнее про неё можно (но не обязательно) загуглить в Яндексе — “Шестнадцатеричная система счисления”.

Для заголовка(h2) мы указали цвет букв, размер букв и тип и свойства шрифта.

Для абзаца(p) мы провели такую же операцию только с другими значениями, как и для тайтла. И обратите внимание, и там и там мы указали цвет “английскими словами”, а не значениями HEX. Существует табличками с заданными названиями для пары сотен HEX значений. Её точно наизусть учить не надо, но эти значения удобно использовать например в протоколировании страницы.

И наконец для короткой цитаты (q) мы просто поменяли цвет.

Принципиально всё. Вы только что изучили введение в CSS. Дальше мы будем тоже просто изменять и пробовать улучшить наши страницы и изучать, что можно сделать с помощью HTML и CSS, а что нет.

Пока можете стереть некоторые значения или даже добавить свои. Внести article в css со своими значениями и попробовать сделать конфликт, например указав разные цвет, размер для шрифтов артикля и абзаца, и посмотреть кто победит.

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

А мы продолжаем дальше.

Домашнее задание #

Создайте страницу index.html.
Открыть файл index.html текстовым редактором и написать в нем шаблон страницы. (DOCTYPE, head, body, p и так далее)
Напишите маленькую статью в нескольких абзацах с заголовком

Дополнительные ссылки #

Глобальные атрибуты в HTML — mozilla
Global Attributes — w3.org

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

Основой языка HTML является тег. Тег представляет из себя выражение, заключенное в угловые скобки. На клавиатуре угловые скобки расположены над буквами «б» и «ю», и набираются с английской раскладки. <html> — это пример тега, с которого начинается любая веб-страница.

Теги бывают парные и одиночные, например:

<body>…</body> — парные теги (их еще называют контейнерами или элементами html).
 — одиночный тег.

Первый тег из парного контейнера называют открывающим, а второй закрывающим. Их отличает лишь наличие знака «/» после открывающей скобки в закрывающем теге.

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

Любая веб-страница, как правило, состоит из трех частей:
Голова, которая заключается между тегами <head>и</head> , и называют эту часть так, исходя из перевода слова «head», что по-русски значит голова. В этой части странички размещают различную служебную информацию, помогающую построению страницы, но не видимую для пользователей.
Тело, эта часть html-страницы включает в себя основную часть содержимого (контента), и находится внутри пары тегов <body>и</body>. Основная часть того, что вы видите на сайтах, расположено именно в теле веб-страницы.

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

Вот код простейшее html-страницы:

<!DOCTYPE html>
<html>
<head>
 <title>Первая html-страница</title>
 <meta charset=»utf-8″>
</head>
<body>
 Это наша первая html-страница, созданная своими руками.
</body>
</html>

А вот так эту веб-страницу увидит посетитель вашего сайта:

В самом начале идет элемент <!DOCTYPE html>, который читается как «доктайп» и говорит браузеру, что тот имеет дело с языком HTML.

Затем внутри элемента <head> расположен блок служебной информации. Внутри контейнера «title» размещают название html-страницы, которое пользователь видит в адресной строке и закладке браузера. На скрине показано зелеными стрелками.

И второй служебный элемент указывает кодировку, в которой создана веб-страница. В данном случае указана кодировка «utf-8».

А в окне браузера находится именно то приеложение, которое помещено в «тело» html-страницы и расположено в контейнере «body».

В конце документа стоит закрывающий тег html.

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

Работа с тегом head. Создание первой html-страницы.

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.

Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.

Итак, для начала обзаведемся всем нужным. Что нам сегодня понадобится? Для начала необходимо подготовить папку, то есть создать ее в любом месте на компьютере. И назвать ее так, чтобы нам было понятно, что содержит данная папка. Я, например, назову папку html-site и расположу ее на рабочем столе. Чтобы не потерять.

И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.

Теперь, перейдем к ответам на обозначенные вопросы в начале статьи.

Что нужно писать между тегами head и зачем?

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

Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.

Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:

<!DOCTYPE html>
<html>
 <head>
 <title>Заголовок документа</title>
 </head>
 <body>
 </body>
</html>

У вас DOCTYPE может быть другим, в зависимости от выбранного.

Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.

Да, при этом текстовый документ в папке может остаться. Его можно удалить, так как он нам больше не нужен.

Итак, обратим внимание на теги head. На данном этапе, между тегами указан только заголовок страницы и ничего более. Но, что же нужно написать еще между данными тегами. И самое главное зачем? Давайте разбираться.

Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».

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

<!DOCTYPE html>
<html>
 <head>
 <title>Главная страница HTML-сайта</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="description" content="Описание" />
 <meta name="keywords" content="Ключевые слова" />
 <meta name = "robots" content = "index,follow" />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 </head>
 <body>
 </body>
</html>

Итак, теперь по порядку:

Тег title — уже знаем, что это и зачем.
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — Это мета тег, который определяет тип документа и его кодировку, для браузера. В данной строке указано, что используется тип документа — HTML. И его кодировка — UTF-8, что означает, что браузер должен распознать символы, как 8-битный Юникод. Также, кодировка может быть другой — windows-1251. Данные кодировки используются для вывода знаков в виде кириллицы. Если данная строка не указана, то браузер попытается сам определить кодировку, что иногда может привести к неправильному отображению символов, например, в виде различных непонятных знаков (кракозябр). В данном случае выбрана кодировка Юникод, так как она более универсальна и удобна.
description — Мета тег description, предназначен, для описания страниц. Данное описание также не присутствует в видимой части страницы и необходимо, для поисковых систем. Которые в свою очередь могут его использовать, для формирования сниппета поисковой выдачи. Также, актуален в сфере SEO. Данный тег необязателен и используется по желанию.
keywords — Также предназначен, для поисковых систем. Используется, для указания ключевых слов на странице. И конечно же, используется SEO-мастерами, в продвижении сайта. Тег, как и предыдущий необязателен. Но использования данных двух тегов, может напрямую повлиять на занимаемые позиции в поисковой выдаче сайтом.
robots — Еще один мета тег, с которым стоит познакомиться, но использовать также необязательно. Данный тег предназначен, для поисковых роботов. Указывает, какие страницы индексировать, а какие нет. Кроме того, указывает, как относиться к ссылкам расположенным на странице. Данный тег имеет четыре значения:
index,follow — означает, что страница должна быть проиндексирована, а также следует перейти по всем ссылкам на странице.
noindex,follow — указывает поисковому роботу, что страницу не нужно индексировать, но при этом следует перейти по всем ссылкам.
index,nofollow — индексировать страницу, но по ссылкам не переходить.
noindex,nofollow — не индексировать страницу и не переходить по ссылкам.
<link rel=»stylesheet» href=»style.css» type=»text/css» media=»screen» /> — Данная строка говорит браузеру о том, что есть документ описания стилей CSS, адрес которого указан в атрибуте href. Кроме того, указан атрибут, определяющий, на каком устройстве должны быть применены стили данного файла. В данном случае указано, что документ предназначен, для отображения на мониторах компьютеров. Если не указан, принимается по умолчанию. Для использования одинаковых стилей на всех устройствах, можно указать вместо media=»screen» — media=»all».

Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?

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

Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:

<h2>Какой-то текст</h2>

После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8». После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.

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

Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.

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

body{
background: #5b84ee;
}
h2{
color: #ffffff;
text-align: center;
}

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

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

У меня на этом все. Надеюсь, данная маленькая статья, поможет вам разобраться, что писать между тегами head, а что нет. И конечно же, надеюсь, что у вас получилось создать первую html-страницу. Если же нет, попробуйте еще раз и все получится.

Удачи!

seodon.ru | Учебник HTML — Структура HTML-документа

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете общую структуру HTML-документов и создадите свою первую страничку. Для начала посмотрите на следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Моя первая HTML-страница</title>
</head>
<body>

<p>Здравствуйте!</p>

</body>
</html>

В этом примере показан тот минимум HTML-тегов, который необходим для создания полноценной веб-страницы. Кстати заметьте, что вы уже не смотрите на код, извините, «как баран на новые ворота», не правда ли? Вы уже вполне можете определить, где какой тег начинается и заканчивается, увидеть их вложенность и отличить теги от атрибутов. А теперь давайте разберем HTML-код поподробнее и начнем со второй строки примера (о первой поговорим позже).

Тег <HTML> или корневой элемент веб-страницы

Тег <HTML> является предком всех тегов HTML-документа, его еще часто называют корневым элементом. Вне этого элемента не должно появляться ни одного тега, а сам он может содержать теги <HEAD> и <BODY>, причем каждый только в единственном числе. Помните, что значит «содержать»? Совершенно верно, это значит, что только эти два тега могут находиться внутри <HTML> на первом уровне вложенности, а уже внутри них должны располагаться остальные теги HTML-страницы, что и отображено в примере.

Тег <HEAD> или «шапка» HTML-страницы

Внутри тега <HEAD> находятся различные служебные теги, которые указывают кодировку веб-страницы, ее заголовок и так далее, очень часто его называют «шапкой» документа. Информация, находящаяся внутри этого элемента предназначена в основном для браузеров (Internet Explorer, Opera и т.п.) и поисковиков (Яндекс, Google и т.п.), поэтому она никак не отображается на странице (за исключением текста в теге <TITLE>).

Тег <META> — указываем кодировку документа

В нашем примере тег <META> отвечает за указание кодировки HTML-документа. Он является одним из семейства тегов иначе называемых метатегами, о которых мы поговорим с вами в других уроках. А пока просто ставьте его, как показано в примере, внутри элемента-контейнера <HEAD>.

Тег <TITLE> или заголовок документа

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

Каждая страница должна иметь только один заголовок, соответственно и тег <TITLE> должен быть на странице только один и только внутри элемента <HEAD>.

Пример отображения заголовка в браузере Internet Explorer.

В поисковой системе Яндекс.

Тег <BODY> или тело документа

Тег <BODY> является контейнерным элементом, между открывающим и закрывающим тегами которого находятся все те элементы, которые мы видим на странице, поэтому его и называют телом HTML-документа.

У тега <BODY> есть одно очень важное правило — он должен содержать элементы уровня блока и не может содержать встроенные элементы (уровня строки). Многие учебники, которые я видел, никогда не заостряют на этом внимание, но мы-то с вами хотим изучить правильный HTML, верно? Кстати, вы помните, что такое блочные и встроенные элементы? Блочные создают впереди и после себя перенос строки в начало, а встроенные отображаются на одной строке.

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

Пример правильного указания тегов

<body>
<p><i>Учим правильный HTML!</i></p>
</body>

Неправильное использование тегов

<body>
<i><p>А вот такой порядок тегов неверный!</p></i>
</body>

Вообще, подобные правила есть у каждого HTML-тега, а не только у <BODY>, поэтому вы конечно спросите: «А как же мы узнаем — какие теги может содержать элемент, а какие нет»? Все очень просто: во-первых, в этом учебнике я всегда вам буду это подсказывать, а во-вторых — в справочнике по HTML-тегам эта информация есть по каждому тегу. И поверьте, когда вы закончите обучение, то будете «на автомате» писать грамотный HTML, уж я об этом позабочусь. 🙂

Тег <!DOCTYPE> или выбираем версию HTML

А теперь пора вернуться к первой строке примера, тегу <!DOCTYPE>. И первое, что вам нужно понять — этот тег не входит в состав самого HTML-документа, поэтому он и вынесен за пределы тега <HTML>. А нужен он для того, чтобы браузер понял, к какой версии HTML относится созданная вами страничка. Если же <!DOCTYPE> не указать, то браузеры решат, что вы используете очень старую версию HTML и могут показать страницу так «криво», что вам и в страшном сне не привидится, поэтому пишите его всегда.

Существует три версии языка HTML 4.01, который мы будем с вами изучать, каждой из них соответствует свой Доктайп. Итак:

HTML 4.01 Strict (строгое соответствие синтаксису языка): <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 Transitional (переходный синтаксис языка): <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 Frameset (переходный синтаксис языка плюс использование фреймов): <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

HTML 4.01 Strict является самой строгой версией HTML, в нем недопустимы никакие ошибки синтаксиса, например ошибки вложенности тегов.

HTML 4.01 Transitional — это более лояльная версия, которая спокойно переносит многие ошибки кода. НО! Когда я думал над тем, какому же языку учить в данном учебнике, то решил, что это будет именно строгая версия. Так как лучше учиться сразу правильно, чем потом переучиваться.

<!DOCTYPE> расположенный последним в списке указывается, когда на странице применяются фреймы. На самом деле фреймы — это такая головная боль, что сегодня их никто не использует, поэтому и в данном учебнике по HTML они рассматриваться не будут. Если когда-нибудь станет интересно, то сможете почитать о них в справочнике.

Вообще, существует еще несколько версий HTML, например XHTML. Но отличия синтаксиса XHTML от HTML настолько минимальны, что их можно перечислить по пальцам рук, еще и свободные останутся. 🙂 Причем часть этих отличительных особенностей большинством вебмастеров вообще не используется. Другими словами, если вы освоите HTML 4.01, то вам уже не надо будет изучать XHTML, совсем. Прочитаете о нем разок, потратив пару часов, и все. Еще есть HTML 5, который находится в разработке, пока не утвержден и постоянно изменяется разработчиками W3C, но в нем вообще просто добавится несколько новых тегов и атрибутов.

Создаем свою первую HTML-страницу

Вот и пришло время создания вашей первой HTML-страницы. Как я уже говорил, в этом учебнике я буду использовать текстовый HTML-редактор «Notepad++». Открыв его, вы увидите уже до боли знакомые вам по другим текстовым редакторам (например, Microsoft Word или OpenOffice Writer) строки меню. Если меню на английском языке, то смените его на русский, выбрав: Settings → Preferences → General → Localisation → Русский.

Теперь напишите в редакторе пример, который показан в начале этого урока и нажмите «Сохранить».

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

Создать простейшую веб страницу. Что такое веб страница

и многие другие.

Элементы идентифицируются с помощью угловых скобок , окружающих имя элемента. Таким образом, элемент будет выглядеть так:

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

Так, теги ссылок будут выглядеть примерно так:

…

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

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

и .

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

Внутри элемент

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

Всё видимое содержимое веб-страницы будет находиться в элементе

. Структура типичного HTML-документа выглядит следующим образом: Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы

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

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

и вложены и сдвинуты внутри элемента . Структура отступов для элементов продолжается с новыми добавленными элементами внутри и .

Самозакрывающиеся элементы

В предыдущем примере элемент был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. является одним из таких элементов. Содержимое элемента в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:

Приведённая структура, сделанная с помощью объявления типа документа и элементов ,

и , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.

Валидация кода

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

На практике

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

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

Основные термины CSS

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

Селекторы

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы

P { … }

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам

P { color: …; font-size: …; }

Значения

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

И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.

P { color: orange; font-size: 16px; }

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

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

Работа с селекторами

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

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы

мы должны использовать селектор div . Следующий код показывает селектор типа для элементов , а также соответствующий HTML.

Div { … }

…

Классы

Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

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

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы

Awesome { … }

…

Идентификаторы

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.

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

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .

#shayhowe { … }

…

Дополнительные селекторы

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

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

Подключение CSS

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

нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.

Другие варианты добавления CSS

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

Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

Внутри элемента

применяется элемент , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент

указывает на внешний стилевой файл.

Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

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

Использование сброса CSS

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

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

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

Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.

На практике

Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.

Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.

Просматривая файл index.html в браузере мы можем видеть, что элементы

Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: «»; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент в , сразу после элемента .
Поскольку мы указываем на стили через элемент добавьте атрибут rel со значением stylesheet .

Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

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

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer

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

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

Примечание : Так же советую ознакомиться со статьей что такое веб .

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

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

Чаще всего веб-страницы разделяют по двум видам:

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

2. Динамические веб-страницы . В отличии от предыдущего типа веб-страниц, данный тип предусматривает, что содержимое одной и той же страницы может меняться. Например, страницы в форумах, где люди оставляют свои комментарии. Различные страницы поиска и многие другие примеры. Стоит отметить, что эти страницы так же представляют собой html-документ с сопутствующими файлами, однако их содержимое генерируется отдельным компьютером, который обычно называется сервер. Хотя бы раз, но, вероятно, слышали о таких языках как PHP, Asp.Net C#, Java и прочие. Именно с помощью них и осуществляется генерация страниц.

Так же страницы могут разделять по их назначению (приведу несколько вариантов):

1. Персональная страница . Эта такая веб-страница, информация которой относится к некой персоне. При этом стоит понимать, что такая страница может быть как официальной, так и нет. Относится как к реальному человеку, так и к выдуманному. Например, в форумах есть страницы с названием «профиль пользователя» — это, по сути, и есть персональная страница. Если рассматривать еще пример, то вашу страничку в социальной сети так же можно назвать персональной.

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

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

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

Навигация по записям

Как записать разговор по телефону — пошаговая инструкция и рекомендации Главная Статьи, партнеры… Как набирать добавочный номер →

Evrsoft Первая страница / 1-я страница 2006 Редактор HTML / Конструктор сайтов

Создать ослепление Сайты с абсолютным контролем.

Обзор

Более 3 000 000 загрузок с момента первого выпуска, Evrsoft представляет первую страницу 2006, долгожданное редактирование HTML программное обеспечение. Evrsoft First Page 2006 дает вам непревзойденную свободу для создания и редактирования веб-документов с абсолютным контролем кода.

Последняя версия включает сотни новых функций и ошибок. исправления.Первая страница 2006 теперь включает полную поддержку HTML, XHTML, PHP, ASP, Cold Fusion, Javascript, CSS, SSI и Perl.

FirstPage 2006 предназначена для профессиональной веб-разработки. Создавайте, редактируйте и развертывайте веб-сайты с абсолютной легкостью и точностью. Интегрированные инструменты позволяют веб-разработчикам разрабатывать на основе стандартов веб-документы, быстро и легко.

Tag Insight с помощью SmartHistory ™
CSS Insight с помощью SmartHistory ™
Поддержка классов CSS и автоматическое определение
Расширенная подсветка синтаксиса
Инструмент выбора документа тегов
Двойной механизм предварительного просмотра
Интернет-инструменты для веб-мастеров
Tag Property Sheet Inspector с SmartHistory ™
Автозавершение тегов
Design View Engine, на базе Microsoft®
Anti-Intrusive Visual Source Rendering Engine ™ в реальном времени
Двойная система редактирования
Справочные руководства HTML в один клик
Управление активами
Расширенная поддержка веб-языков
Tidy HTML Power Tools (обновлено)
Инструменты для проверки документов
iScripts ™
Цветовые темы страницы
Popupmaker Deluxe
Картограф изображений
Конструктор таблиц стилей CSS
Конструктор полос прокрутки
Мощная серверная часть включает поддержку
Инструмент проверки сайтов / ссылок
Инструмент для оценки документа / страницы
Расширяемые панели инструментов и интерфейс
Интерфейс для всех
Инструменты управления файлами
Эскизы изображений
Образы ролловера
Интеграция предварительного просмотра Internet Explorer
Предварительная интеграция с Netscape® Mozilla
Мощный расширенный интерфейс IDE
Мощный FTP-клиент
Расширенный поиск и замена в файлах
Генератор фотоальбомов

Первая страница в HTML | atnyla

Просмотры 6966

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

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

1. Откройте текстовый редактор.

Вы можете использовать любой текстовый редактор, который хотите, если он позволяет сохранять файлы. как обычный текст. Если вы используете Windows, Notepad пока подойдет. (Потом, Я покажу вам другие бесплатные альтернативы, но начните с того, что вы уже знаете.)

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

2.Введите следующий код

Действительно. Введите его в текстовом редакторе, чтобы получить некоторый опыт написания актуальный код. Я очень скоро объясню, что все это значит, но напечатайте это сейчас, чтобы прочувствуйте это:

Если вы не хотите писать, просто скопируйте форму ниже

Моя самая первая веб-страница!

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

3.Сохраните файл как

first-page.html

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

Вы можете использовать .htm или .html как расширение файла. Нет никакой разницы, решать только вам.

4. Откройте веб-браузер

Веб-браузер — это программа, используемая для просмотра страниц. После публикации вашу страницу где-нибудь на веб-сервере, ваша бабушка Гертруда может используйте ее веб-браузер для просмотра вашей страницы. Вам также понадобится один (браузер, а не бабушка Гертруда), чтобы проверить свою страницу. А пока используйте что угодно браузер, который вы обычно используете.У большинства пользователей Windows уже есть Интернет Установлен проводник. Если вы пользователь Mac, вероятно, у вас установлен Safari. Linux у людей обычно есть Firefox. Все это нормально. В главе 3 этого минибук, я объясняю, почему вам, вероятно, нужно более одного браузера и как настроить их для максимальной полезности.

5. Загрузите свою страницу в браузер.

Вы можете сделать это несколькими способами. Вы можете использовать меню «Файл» в браузере. чтобы открыть локальный файл, или вы можете просто перетащить файл со своего рабочего стола (или везде) в открытое окно браузера.

Откройте сохраненный HTML-файл в своем любимом браузере (дважды щелкните файл или щелкните правой кнопкой мыши и выберите «Открыть с помощью»).

6. Наслаждайтесь своим новообретенным гением.

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

Предварительный просмотр

Поделитесь мной:

Начало работы с HTML — Изучение веб-разработки
В этой статье мы рассмотрим самые основы HTML.Для начала в этой статье определяются элементы, атрибуты и все другие важные термины, которые вы, возможно, слышали. Он также объясняет, где они вписываются в HTML. Вы узнаете, как структурированы элементы HTML, как структурирована типичная HTML-страница и другие важные базовые языковые функции. Попутно будет возможность поиграть и с HTML!
HTML (язык гипертекстовой разметки) не является языком программирования. Это язык разметки , который сообщает веб-браузерам, как структурировать веб-страницы, которые вы посещаете.Он может быть настолько сложным или простым, насколько этого хочет веб-разработчик. HTML состоит из ряда элементов, которые вы используете, чтобы заключить, обернуть или разметить различных частей контента, чтобы они отображались или действовали определенным образом. Включающие теги могут превращать контент в гиперссылку для подключения к другой странице, выделять слова курсивом и т. Д. Например, рассмотрим следующую строку текста:
Моя кошка очень сварливая
Если мы хотим, чтобы текст выделялся сам по себе, мы могли бы указать, что это абзац, заключив его в элемент абзаца (
):
Мой кот очень сварливый
Примечание : Теги в HTML нечувствительны к регистру.Это означает, что они могут быть написаны в верхнем или нижнем регистре. Например, тег </code> может быть записан как <code><title> </code>, <code><TITLE> </code>, <code><Title> </code>, <code><TiTlE> </code> и т. Д., И он будет работать. Однако лучше всего писать все теги в нижнем регистре для единообразия и удобочитаемости. Давайте подробнее рассмотрим наш элемент абзаца из предыдущего раздела: Анатомия нашего элемента:<ul><li> Открывающий тег: Он состоит из имени элемента (в этом примере p для абзаца), заключенного в открывающие и закрывающие угловые скобки.Этот открывающий тег отмечает начало или начало действия элемента. В этом примере он предшествует началу текста абзаца.</li><li> Содержимое: Это содержимое элемента. В этом примере это текст абзаца.</li><li> Закрывающий тег: Это то же самое, что открывающий тег, за исключением того, что он включает косую черту перед именем элемента. Это отмечает, где заканчивается элемент. Отсутствие закрывающего тега — распространенная ошибка новичков, которая может привести к необычным результатам.</li></ul> Элемент — это открывающий тег, за которым следует контент, за которым следует закрывающий тег.<h4> Активное обучение: создание вашего первого элемента HTML </h4> Отредактируйте строку ниже в области «Редактируемый код», заключив в нее теги <code> </code> и <code> . </code> Чтобы открыть элемент , поместите открывающий тег <code> </code> в начало строки. Чтобы закрыть элемент , поместите закрывающий тег <code> </code> в конце строки.Это должно привести к форматированию текста строки курсивом! Следите за обновлениями изменений в режиме реального времени в области Выход . Если вы допустили ошибку, вы можете очистить свою работу с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть ответ.<h4> Вложенные элементы </h4> Элементы можно размещать внутри других элементов. Это называется вложением . Если бы мы хотели заявить, что наша кошка очень сварливая, мы могли бы обернуть слово очень в элемент <code> </code>, что означает, что слово должно иметь сильное (эр) форматирование текста:<pre> <code> Моя кошка очень сварливая. </code> </pre> Есть правильный и неправильный способ вложения. В приведенном выше примере мы сначала открыли элемент <code> p </code>, затем открыли элемент <code> strong </code>. Для правильного размещения мы должны сначала закрыть элемент <code> strong </code>, прежде чем закрывать <code> p </code>. Ниже приведен пример неправильного способа для размещения:<pre> <code> Моя кошка очень сварливая </code> </pre> Теги должны открываться и закрываться таким образом, чтобы они находились внутри или снаружи друг друга .С таким типом совпадения, как в приведенном выше примере, браузер должен угадать ваше намерение. Такое предположение может привести к неожиданным результатам.<h4> Блочные и встроенные элементы </h4> В HTML нужно знать две важные категории элементов: элементы уровня блока и встроенные элементы.<ul><li> Элементы уровня блока образуют видимый блок на странице. Элемент уровня блока появляется на новой строке после предшествующего ему содержимого. Любое содержимое, которое следует за элементом уровня блока, также отображается в новой строке.Элементы блочного уровня обычно являются структурными элементами на странице. Например, элемент уровня блока может представлять заголовки, абзацы, списки, меню навигации или нижние колонтитулы. Элемент уровня блока не будет вложен внутри встроенного элемента, но он может быть вложен внутри другого элемента уровня блока.</li><li> Встроенные элементы содержатся внутри элементов уровня блока и окружают только небольшие части содержимого документа (а не целые абзацы или группы содержимого). Встроенный элемент не приведет к появлению новой строки в документе.Обычно он используется с текстом, например, элемент <code> <a> </code> создает гиперссылку, а такие элементы, как <code> </code> или <code> </code>, создают выделение.</li></ul> Рассмотрим следующий пример:<pre> <code> первый второй третий четвертый пятый шестой </code> </pre> <code> </code> — встроенный элемент. Как вы видите ниже, первые три элемента находятся на одной строке без пробелов между ними.С другой стороны, <code> </code> — это элемент уровня блока. Каждый элемент p появляется на новой строке с пробелом вверху и внизу. (Интервал обусловлен стилем CSS по умолчанию, который браузер применяет к абзацам.) Примечание : HTML5 переопределил категории элементов: см. Категории содержимого элементов. Хотя эти определения более точны и менее двусмысленны, чем их предшественники, новые определения намного сложнее для понимания, чем block и inline. В этой статье останутся эти два условия. Примечание : Термины block и inline , используемые в этой статье, не следует путать с типами блоков CSS с одинаковыми именами. Хотя имена коррелируют по умолчанию, изменение типа отображения CSS не меняет категорию элемента и не влияет на то, какие элементы он может содержать и в каких элементах он может содержаться. Одной из причин, по которой HTML5 отказался от этих условий, было предотвращение это довольно распространенная путаница.<h4> Пустые элементы </h4> Не все элементы следуют шаблону открывающего тега, содержимого и закрывающего тега. Некоторые элементы состоят из одного тега, который обычно используется для вставки / встраивания чего-либо в документ. Например, элемент <code> <img> </code> встраивает файл изображения на страницу:<pre> <code> <noscript><img class="lazy lazy-hidden" src = "https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></noscript><img class="lazyload lazy lazy-hidden" src = "https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"><noscript><img src = "https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></noscript> </code> </pre> Это приведет к следующему: Примечание : Пустые элементы иногда называют пустыми элементами . Элементы также могут иметь атрибуты. Атрибуты выглядят так: Атрибуты содержат дополнительную информацию об элементе, которая не будет отображаться в содержимом. В этом примере атрибут <code> class </code> — это идентифицирующее имя, используемое для нацеливания на элемент с помощью информации о стиле. Атрибут должен иметь:<ul><li> Пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами.)</li><li> Имя атрибута, за которым следует знак равенства.</li><li> Значение атрибута, заключенное в открывающие и закрывающие кавычки.</li></ul><h4> Активное обучение: добавление атрибутов к элементу </h4> Другой пример элемента — <code> <a> </code>. Это обозначает якорь . Якорь может превратить заключенный в него текст в гиперссылку. Якоря могут иметь несколько атрибутов, но некоторые из них следующие:<ul><li> <code> href </code> : значение этого атрибута указывает веб-адрес для ссылки.Например: <code> href = "https://www.mozilla.org/" </code>.</li><li> <code> title </code> : Атрибут <code> title </code> указывает дополнительную информацию о ссылке, например описание страницы, на которую делается ссылка. Например, <code> title = "Домашняя страница Mozilla" </code>. Это появляется как всплывающая подсказка при наведении курсора на элемент.</li><li> <code> target </code> : Атрибут <code> target </code> указывает контекст просмотра, используемый для отображения ссылки.Например, <code> target = "_ blank" </code> отобразит ссылку в новой вкладке. Если вы хотите отображать связанный контент на текущей вкладке, просто опустите этот атрибут.</li></ul> Отредактируйте строку ниже в области Input , чтобы превратить ее в ссылку на ваш любимый веб-сайт.<ol><li> Добавьте элемент <code> <a> </code>.</li><li> Добавьте атрибут <code> href </code> и атрибут <code> title </code>.</li><li> Укажите атрибут <code> target </code>, чтобы открыть ссылку в новой вкладке.</li></ol> Вы сможете увидеть обновления ваших изменений в реальном времени в области Output . Вы должны увидеть ссылку, которая при наведении указателя мыши отображает значение атрибута <code> title </code>, а при нажатии ведет к веб-адресу в атрибуте <code> href </code>. Помните, что вам нужно включить пробел между именем элемента и между каждым атрибутом. Если вы допустили ошибку, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть ответ.<h4> Логические атрибуты </h4> Иногда можно увидеть атрибуты, записанные без значений. Это вполне приемлемо. Это так называемые логические атрибуты. Логические атрибуты могут иметь только одно значение, которое обычно совпадает с именем атрибута. Например, рассмотрим атрибут <code> disabled </code>, который можно назначить элементам ввода формы. (Вы используете это, чтобы отключить элементы ввода формы, чтобы пользователь не мог делать записи. Отключенные элементы обычно отображаются серым цветом.) Например:<pre> <input type = "text" disabled = "disabled"> </pre> В качестве сокращения допустимо записывать это так:<pre> <code> <input type = "text" отключен> <input type = "text"> </code> </pre> Для справки, приведенный выше пример также включает неотключенный элемент ввода формы. HTML из приведенного выше примера дает следующий результат:<h4> Пропуск кавычек вокруг значений атрибутов </h4> Если вы посмотрите на код многих других сайтов, вы можете встретить несколько странных стилей разметки, включая значения атрибутов без кавычек.Это разрешено в определенных обстоятельствах, но также может нарушить вашу разметку в других обстоятельствах. Например, если мы вернемся к нашему предыдущему примеру ссылки, мы могли бы написать базовую версию с только атрибутом <code> href </code>, например:<pre> <code> <a href=https://www.mozilla.org/> любимый веб-сайт </a> </code> </pre> Однако, как только мы добавляем атрибут <code> title </code> таким образом, возникают проблемы:<pre> <code> <a href = https: // www.mozilla.org/ title = Домашняя страница Mozilla> избранный веб-сайт </a> </code> </pre> Как написано выше, браузер неверно интерпретирует разметку, ошибочно принимая атрибут <code> title </code> за три атрибута: атрибут title со значением и два логических атрибута, <code> Mozilla </code> и домашнюю страницу <code> </code>. Очевидно, это не предназначено! Это вызовет ошибки или неожиданное поведение, как вы можете видеть в живом примере ниже. Попробуйте навести указатель мыши на ссылку, чтобы просмотреть текст заголовка! Всегда включайте кавычки атрибутов.Это позволяет избежать таких проблем и обеспечивает более читаемый код.<h4> Одиночные или двойные кавычки? </h4> В этой статье вы также заметите, что атрибуты заключены в двойные кавычки. Однако вы можете увидеть одинарные кавычки в некотором HTML-коде. Это вопрос стиля. Вы можете смело выбирать, какой из них вам больше по душе. Обе эти строки эквивалентны:<pre> <code> <a href="https://www.example.com"> Ссылка на мой пример. </a> <a href='https://www.example.com'> Ссылка на мой пример.</a> </code> </pre> Убедитесь, что вы не смешиваете одинарные и двойные кавычки. В этом примере (ниже) показано смешивание котировок, которое может пойти не так:<pre> <code> <a href="https://www.example.com'> Ссылка на мой пример. </a> </code> </pre> Однако, если вы используете один тип котировки, вы можете включить другой тип котировки внутри значений ваших атрибутов:<pre> <code> <a href="https://www.example.com" title="Isn't this fun?"> Ссылка на мой пример.</a> </code> </pre> Чтобы использовать кавычки внутри других кавычек того же типа (одинарная или двойная кавычка), используйте объекты HTML. Например, это сломается:<pre> <code> <a href='https://www.example.com' title='Isn't this fun?'> Ссылка на мой пример. </a> </code> </pre> Вместо этого вам нужно сделать это:<pre> <code> <a href='https://www.example.com' title='Isn't this fun?'> Ссылка на мой пример. </a> </code> </pre> Отдельные элементы HTML не очень полезны для их собственный.Затем давайте посмотрим, как отдельные элементы объединяются в целую HTML-страницу:<pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница
Это моя страница

Здесь имеем:
: файл doctype. Когда HTML был молод (1991–1992), типы документа должны были действовать как ссылки на набор правил, которым должна была следовать страница HTML, чтобы считаться хорошим HTML.Doctypes раньше выглядели примерно так:

В последнее время doctype — это исторический артефакт, который необходимо включить, чтобы все остальное работало правильно. — это самая короткая строка символов, которая считается допустимым типом документа. Это все, что вам нужно знать!
: элемент .Этот элемент обертывает все содержимое страницы. Иногда его называют корневым элементом.
: элемент . Этот элемент действует как контейнер для всего, что вы хотите включить на HTML-страницу, , что не является содержимым , которое страница будет показывать зрителям. Сюда входят ключевые слова и описание страницы, которые будут отображаться в результатах поиска, CSS для стилизации содержимого, объявления набора символов и многое другое. Подробнее об этом вы узнаете в следующей статье этой серии.
: этот элемент определяет набор символов для вашего документа в формате UTF-8, который включает большинство символов из подавляющего большинства языков письменной речи. С этим параметром страница теперь может обрабатывать любое текстовое содержимое, которое может содержать. Нет причин не устанавливать это, и это поможет избежать некоторых проблем позже.
: элемент </code>. Это устанавливает заголовок страницы, который отображается на вкладке браузера, в которую загружена страница.Заголовок страницы также используется для описания страницы, когда она добавлена в закладки.</li><li> <code><body></body> </code>: элемент <code><body> </code>. Он содержит всего содержимого, отображаемого на странице, включая текст, изображения, видео, игры, воспроизводимые звуковые дорожки или что-то еще.</li></ol><h4> Активное обучение: добавление некоторых функций в HTML-документ </h4> Если вы хотите поэкспериментировать с написанием HTML-кода на локальном компьютере, вы можете:<ol><li> Скопируйте пример HTML-страницы, указанный выше.</li><li> Создайте новый файл в текстовом редакторе.</li><li> Вставьте код в новый текстовый файл.</li><li> Сохраните файл как <code> index.html </code>.</li></ol> Теперь вы можете открыть этот файл в веб-браузере, чтобы увидеть, как выглядит обработанный код. Отредактируйте код и обновите браузер, чтобы увидеть результат. Изначально страница выглядит так: В этом упражнении вы можете редактировать код локально на своем компьютере, как описано ранее, или вы можете редактировать его в примере окна ниже (редактируемое окно образца представляет только содержимое элемента <code><body> </code>, в данном случае ).Оттачивайте свои навыки, выполнив следующие задачи:<ul><li> Сразу под открывающим тегом элемента <code><body> </code> добавьте основной заголовок документа. Он должен быть заключен в открывающий тег <code><h2></h2></code> и закрывающий тег <code></h2> </code>.</li><li> Измените содержание абзаца, включив в него текст на интересующую вас тему.</li><li> Выделите важные слова жирным шрифтом, заключив их в открывающий тег <code> </code> и закрывающий тег <code> </code>.</li><li> Добавьте ссылку в свой абзац, как объяснялось ранее в статье.</li><li> Добавьте изображение к вашему документу. Поместите его под абзацем, как объяснялось ранее в статье. Зарабатывайте бонусные баллы, если вам удастся установить ссылку на другое изображение (локально на вашем компьютере или где-то еще в Интернете).</li></ul> Если вы ошиблись, вы всегда можете сбросить его с помощью кнопки Reset . Если вы действительно застряли, нажмите кнопку Показать решение , чтобы увидеть ответ.<h4> Пробелы в HTML </h4> В приведенных выше примерах вы могли заметить, что в код включено много пробелов. Это необязательно. Эти два фрагмента кода эквивалентны:<pre> <code> Собаки глупы. Собаки глупо. </code> </pre> Независимо от того, сколько пробелов вы используете внутри содержимого элемента HTML (которое может включать один или несколько пробелов, а также разрывы строк), анализатор HTML сокращает каждую последовательность пробелов до одного пробела при рендеринге кода.Так зачем использовать столько пробелов? Ответ — удобочитаемость. Будет легче понять, что происходит в вашем коде, если вы правильно его отформатируете. В нашем HTML у нас есть каждый вложенный элемент с отступом на два пробела больше, чем тот, внутри которого он находится. Вы сами выбираете стиль форматирования (например, сколько пробелов для каждого уровня отступа), но вам следует подумать о его форматировании. В HTML символы <code> <</code>, <code>> </code>, <code> "</code>, <code> '</code> и <code> и </code> являются специальными символами.Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код. Вы делаете это со ссылками на символы. Это специальные коды, представляющие символы, которые должны использоваться именно в этих обстоятельствах. Каждая ссылка на символ начинается с амперсанда (&) и заканчивается точкой с запятой (;).<table><thead><tr><th scope="col"> Буквенный символ</th><th scope="col"> Эквивалент ссылки на символы</th></tr></thead><tbody><tr><td> <</td><td> & lt;</td></tr><tr><td>></td><td> & gt;</td></tr><tr><td> "</td><td> & quot;</td></tr><tr><td> '</td><td> '</td></tr><tr><td> и</td><td> & amp;</td></tr></tbody></table> Эквивалент ссылки на символ можно легко запомнить, потому что текст, который он использует, может быть меньше, чем для '& lt;' , цитата для "& quot; 'и аналогично для других.Чтобы узнать больше о ссылках на сущности, см. Список ссылок на символьные сущности XML и HTML (Википедия). В примере ниже два абзаца:<pre> <code> В HTML вы определяете абзац с помощью элемента . В HTML вы определяете абзац с помощью тега & lt; p & gt; элемент. </code> </pre> В живом выводе ниже вы можете увидеть, что первый абзац был неверным. Браузер интерпретирует второй экземпляр <code> </code> как начало нового абзаца.Второй абзац выглядит хорошо, потому что в нем есть угловые скобки со ссылками на символы. Примечание : вам не нужно использовать ссылки на сущности для каких-либо других символов, поскольку современные браузеры будут обрабатывать фактические символы без проблем, если кодировка символов вашего HTML установлена на UTF-8. HTML имеет механизм для написания комментариев в коде. Браузеры игнорируют комментарии, фактически делая комментарии невидимыми для пользователя. Цель комментариев - позволить вам включать в код примечания, чтобы объяснить вашу логику или кодирование.Это очень полезно, если вы вернетесь к кодовой базе после того, как пробыли достаточно долгое время, чтобы не вспомнить ее полностью. Точно так же комментарии неоценимы, поскольку разные люди вносят изменения и обновления. Чтобы написать комментарий HTML, оберните его специальными маркерами <code> <! - </code> и <code> -> </code>. Например:<pre> <code> Я не в комментариях </code> </pre> Как вы можете видеть ниже, в прямом выводе отображается только первый абзац. Вы дошли до конца статьи! Надеемся, вам понравился тур по основам HTML. На этом этапе вы должны понять, как выглядит HTML и как он работает на базовом уровне. Вы также должны уметь писать несколько элементов и атрибутов. В последующих статьях этого модуля рассматриваются некоторые из представленных здесь тем, а также представлены другие концепции языка. Примечание : Когда вы начнете больше узнавать о HTML, подумайте об изучении основ каскадных таблиц стилей или CSS.CSS - это язык, используемый для стилизации веб-страниц. (например, изменение шрифтов или цветов, или изменение макета страницы) HTML и CSS хорошо работают вместе, как вы скоро обнаружите.<h2> Узнайте, как создать первую страницу </h2><h5> Создайте свою первую веб-страницу </h5> Узнайте, как использовать редактор для создания первой веб-страницы.<h5> Изучение HTML </h5> Мы не научим вас кодировать HTML или CSS. Для этого используйте учебник, например, W3Schools: начните с «Введение в HTML» и следуйте по страницам до «HTML CSS».<h4> Основные шаги </h4> Это основные шаги, которые вам следует предпринять. Каждый шаг подробно описан ниже.<ol><li> Установить редактор</li><li> Создайте папку для своего сайта</li><li> Добавить веб-страницу (файл index.html)</li><li> Добавить HTML код</li><li> Предварительный просмотр веб-страницы</li></ol><h3> 1. Установите редактор </h3> Чтобы написать HTML-код, вам понадобится текстовый редактор. Вы можете использовать редактор, уже имеющийся на вашем компьютере (например,Блокнот), но настоятельно рекомендуется использовать редактор, который подходит для управления сайтом и написания кода. Рекомендуем: В этом уроке мы продолжим использовать Atom. Установите выбранный вами редактор и выполните следующие действия.<h3> 2. Создайте папку для своего веб-сайта </h3> Запустите редактор: Создайте папку для своего веб-сайта, например, в папке «Документы»: Мы можем сделать это из редактора (или использовать Windows Explorer / Finder): В Atom: выберите File> Add Project Folder , щелкните New Folder , введите имя, выберите его, нажмите Select Folder : Теперь вы готовы добавлять файлы в папку веб-сайта.<h5> Важно: добавить все файлы в папку сайта </h5> Все файлы, которые вы хотите добавить на свой сайт, должны находиться в папке сайта. Поэтому, если вы хотите добавить изображения, скопируйте их в папку веб-сайта (рекомендуется создать для этого подпапку, например, с именем «img»).<h3> 3. Добавьте веб-страницу (файл index.html) </h3> Если файл без названия уже существует, пропустите следующую строку. Если нет файла без названия, добавьте файл через Файл> Новый файл : Теперь у нас есть новый «безымянный» файл:. Затем сохраните «безымянный» файл: выберите «Файл »> «Сохранить » или нажмите CTRL + S.Дайте файлу имя <code> index.html </code>: Теперь ваш проект в Atom должен выглядеть так: Теперь вы готовы добавить HTML-код в файл <code> index.html </code>.<h3> 4. Добавьте HTML-код </h3> Перейдите к HTML-введению W3Schools или к любому другому руководству, в котором показано начало HTML-документа. Теперь скопируйте пример кода HTML (выберите его, щелкните его правой кнопкой мыши и выберите Скопируйте или нажмите CTRL + C): Затем вставьте его в индекс <code>.html </code> в вашем редакторе (используйте Edit> Paste или CTRL + V): Внесите некоторые изменения в код. Добавьте правильный заголовок, заголовки и текст абзаца (информация, показанная ниже, является лишь примером):<h5> Есть ли способ сделать все это быстрее? Да! </h5> Создайте новый файл: нажмите Ctrl + N. Сохраните файл с помощью Ctrl + S (например, как <code> index.html </code>). Введите html и нажмите Enter, чтобы вставить базовый HTML-код.<h4> Добавить изображение </h4> Сначала добавьте новую папку img.Щелкните правой кнопкой мыши папку веб-сайта и выберите Новая папка : Добавьте его имя «img» и нажмите Enter: Скопируйте изображение, которое будет использоваться для страницы, в папку «img» (используйте Windows Explorer / Finder): Затем вставьте его в подпапку img папки сайта: Теперь изучите главу учебника W3Schools, посвященную изображениям. Добавьте код для элемента изображения, чтобы встроить изображение в html-документ:<h3> 5.Предварительный просмотр веб-страницы </h3> Сохраните файл. ( Файл> Сохранить или CTRL + S) Чтобы проверить, хорошо ли выглядит страница, вы можете просмотреть ее в своем браузере. В проводнике Windows (или Finder) перейдите к папке веб-сайта и дважды щелкните файл <code> index.html </code>: Было бы неплохо продолжить работу с открытым предварительным просмотром, например. с браузером рядом с редактором: Советы: <ul><li> Чтобы быстро перейти к папке веб-сайта, вы можете открыть ее прямо из Atom.Щелкните файл правой кнопкой мыши и выберите «Показать в проводнике».</li><li> Вы также можете получить базовый предварительный просмотр внутри Atom: нажмите CTRL + SHIFT + M. Более качественный предварительный просмотр может быть создан с помощью пакета browser-plus. См. Внизу этой страницы, как устанавливать пакеты в Atom.</li></ul> Предварительный просмотр изменится только после того, как вы сохраните файл (нажмите CTRL + S) и обновите предварительный просмотр (нажмите F5). Но в браузере плюс вы можете включить предварительный просмотр в реальном времени (значок с полужирным шрифтом молнии), который автоматически обновит предварительный просмотр (но вам все равно придется нажимать CTRL + S для сохранения файла): Теперь вы можете дополнительно настроить страницу, сделать ее своей и опробовать. Если вы еще этого не сделали, то сейчас самое время узнать немного больше о HTML из руководств W3schools. В По крайней мере, читайте первые страницы от Введения до Стилей и используйте / проверяйте то, что вы узнали, добавляя это в свой HTML-документ. Может быть даже добавить немного стиля ( перейдите к руководству по CSS W3Schools, чтобы узнать больше). Теперь вы готовы загрузить файлы на свой сайт. Это объясняется на отдельной странице:<h5> Важно: ваша первая страница (домашняя) должна иметь имя index.html или index.php </h5> Чтобы ваш адрес сайта работал, ваш сайт должен иметь индексный файл: ваша первая страница (домашняя страница) должна иметь имя <code> index.html </code> (или <code> index.php </code>). Имена файлов чувствительны к регистру. Используйте только строчные буквы для индексных файлов.<h3> Проблемы с изображением? например изображение не показывает </h3> Наиболее частая причина того, что изображения не работают, - проблемы с именами файлов. На веб-сайте имена файлов и папок чувствительны к регистру.Поэтому вы должны быть осторожны, смешивая прописные и строчные буквы. Совет: всегда используйте строчные буквы! Другие проблемы могут возникнуть со ссылкой на изображение в html-коде. Или вы не можете загрузить изображения. Ниже приведены некоторые примеры. Некоторые статьи по этим вопросам: Совет для Windows: всегда показывайте полные имена файлов в проводнике Windows. Перейдите на вкладку View , затем с помощью параметров выберите «изменить папку и параметры поиска»: На вкладке Просмотр снимите флажок «Скрыть расширения для известных типов файлов» и нажмите Ok :<h3> Пример: разница в регистре (сочетание прописных и строчных букв) </h3> Вы можете заметить, что здесь не так ?: В приведенном выше случае расширение файла указано в верхнем регистре.А в html-коде это строчные буквы:. Лучший способ решить эту проблему - переименовать файл в <code> me_small.jpg </code> (с расширением в нижнем регистре). Проблема, которая усложняет это, заключается в том, что в Windows веб-страница будет работать при просмотре в браузере. Но как только вы его загрузите, это не сработает, поскольку большинство веб-сайтов размещены на платформах Linux, имена файлов на которых чувствительны к регистру.<h3> Наконечники Atom: код автоматической вставки </h3> Создайте новый файл ( Ctrl + N ) для практики.Введите html и нажмите Введите , чтобы вставить базовый HTML-код: Теперь добавьте заголовок h2, набрав h2 (внутри тела), чтобы добавить заголовок страницы на страницу:<h3> Советы по Atom: добавление пакетов </h3> Вы можете улучшить Atom с помощью пакетов. Мы покажем вам, как установить пакет browser-plus в качестве примера.<ul><li> Выберите Файл> Настройки </li><li> Нажмите Установить </li><li> В поле поиска введите <code> browser-plus </code></li><li> Нажмите Установить (это может занять несколько минут, вы можете продолжать использовать Atom)</li></ul> После этого вы можете закрыть Настройки: После успешной установки пакета browser-plus используйте ALT + CTRL + O, чтобы запустить его (или щелкните правой кнопкой мыши> Open Browser-Plus).<h2> Ваша первая HTML-страница </h2> Ваша первая HTML-страница<h3> Ваша первая HTML-страница </h3> Начнем с создания веб-страницы. Тогда я вернусь и объясню, что все, что означает разметка. Вы готовы? Давайте тогда!<h4> Создание страницы </h4> Чрезвычайно важно, чтобы при редактировании файла HTML вы делали это в приложение, которое может сохранять файлы в виде простого текста. Если у вас нет программы, которая специально создан для работы с HTML-файлами, вы можете использовать Блокнот на Windows, TextEdit в macOS или текстовый редактор по умолчанию в Linux (в Ubuntu он вроде бы "Текстовый редактор"). Откройте текстовый редактор и введите следующий текст:<pre> <! DOCTYPE html> <html lang = "ru"> <head> <meta charset = "utf-8" /> <title> Моя первая веб-страница Ирэн П. Смит Добро пожаловать на мою самую первую веб-страницу. Это не причудливо но он показывает, насколько легко создать веб-страницу. Свяжитесь со мной по адресу: <адрес> Ирен Смит irene @ playswithwebdesign.ком Сохраните файл в папку на жестком диске. Большинство редакторов будут сохраните редактируемый файл, нажав ** Ctrl + S **. Хорошим выбором для расположения файла в Microsoft Windows является новую папку в папке «Документы». Назовите его «myfirst.html» или что-то похожее. ПРИМЕЧАНИЕ : пользователи Mac могут создать каталог в папке \ Users \ UserName \ Documents. и пользователи Linux могут создать новый каталог в / home / UserName / Documents. Теперь, когда вы сохранили файл, поаплодируйте себе. Ты только создал вашу первую веб-страницу! Просмотр результатов Теперь откройте файл в любом используемом вами веб-браузере. В большинстве случаев Ctrl + O в Windows и Linux или Cmd + O в macOS позволит вам перейти к файлу на свой локальный компьютер и откройте его. Ваша веб-страница должна выглядеть примерно так: Теперь, когда вы создали свою первую страницу, давайте поговорим о том, что все эти "вещи" значит и сколько из них надо. Выполните следующие действия, чтобы добавить страницы на свой веб-сайт HTML или WordPress Подходит ли вам технология? Пройдите нашу 3-минутную викторину! Ты выучишь: Если вам подходит карьера в сфере технологий Какая техническая карьера соответствует вашим сильным сторонам Какие навыки вам понадобятся для достижения ваших целей Кодирование вашей первой веб-страницы и размещение ее в сети - это большое дело, поэтому, если вы уже достигли этого, поздравляем! Тем не менее, как бы вы ни заслужили похлопывание по плечу, сейчас не время останавливаться на достигнутом: оживление вашей первой веб-страницы было огромным делом, но для того, чтобы перейти от статичного веб-сайта к сайту, который будет привлекательным и привлекательным для посетителей (хотя его также могут найти поисковые системы), ваш сайт должен иметь несколько веб-страниц.Хотите знать, что именно нужно, чтобы добавить новые страницы к тому одностраничному сайту, который вы уже закодировали и загрузили на веб-сервер? Мы вас прикрыли. Написание веб-сайта вручную с нуля и создание веб-сайта с использованием системы управления контентом - два наиболее распространенных метода создания веб-сайтов. В случае ручного кодирования языки разметки, такие как HTML и CSS, определяют части веб-страницы (такие как заголовки, абзацы, шрифты и цвета), чтобы они правильно отображались в окне веб-браузера ваших посетителей, в то время как языки сценариев как JavaScript, управляют динамическим содержимым веб-страницы (слайд-шоу, интерактивные карты, прокрутка видео и т. д.)). Если вы выбираете систему управления контентом, программное обеспечение, такое как WordPress (конструктор веб-сайтов), используется для создания веб-контента с помощью раскрывающегося меню, форм и встроенных текстовых редакторов. Поскольку вы, скорее всего, создали первую страницу своего веб-сайта, используя один из этих двух методов, мы рассмотрим пошаговые инструкции по добавлению дополнительных страниц как на сайт HTML / CSS, так и на сайт WordPress. Добавление веб-страниц на веб-сайт HTML Если вы начали свой сайт с создания домашней страницы с помощью HTML и CSS, эта первая страница должна существовать в виде файла с названием index.html. Это будет страница, созданная вами в текстовом редакторе с использованием HTML-кода для таких структурных элементов, как заголовки и абзацы, и CSS (внешнего, внутреннего или встроенного) для макетов страниц, цветов и типов шрифтов. Если вы используете внешнюю таблицу стилей для определения внешнего вида всего вашего веб-сайта, у вас также будет файл .css, содержащий внешний код .css. На этом этапе эти два файла (или просто файл index.html, если ваш CSS является внутренним или встроенным) должны находиться в специальной папке проекта на вашем рабочем столе.Если вы уже разместили свой одностраничный веб-сайт в Интернете, вы также загрузите файл index.html (и файл .css, если применимо) в службу веб-хостинга. После этого вы готовы начать добавлять дополнительные страницы. Как и в случае со своей домашней страницей, откройте текстовый редактор и примените свои навыки кодирования HTML. Затем, когда вы закончите кодирование, сохраните эту новую страницу как файл .html с соответствующим именем файла - например, если вы создаете страницу «О программе» для своего сайта, назовите файл about.html. Добавьте этот новый файл в папку проекта вместе с index.html, затем откройте index.html и добавьте текст на свою домашнюю страницу со ссылкой на новую страницу, которую вы создали - помните, что как только вы начнете добавлять дополнительные веб-страницы, очень важно установить ссылку с каждой страницы на все остальные, чтобы посетители могли перемещаться по вашему сайту. Чтобы отслеживать это по мере того, как на вашем сайте начинает расти количество страниц, рекомендуется создать карту сайта. Это может быть документ, хранящийся в автономном режиме, или страница, добавленная к вашему фактическому веб-сайту, которая буквально отображает размещение страниц и то, как каждая страница ссылается на другие.Когда вы выполните эти шаги, просто загрузите новую страницу на свой веб-хостинг через FTP (точно так же, как вы загрузили исходную домашнюю страницу), и ваше новейшее дополнение к сайту будет доступно. Один совет, который следует иметь в виду при работе со страницами HTML, - при необходимости клонировать контент (а не начинать с нуля с каждой новой веб-страницей). Поступая так, вы можете повторно использовать существующий код в качестве шаблона и создавать собственный шаблон только при необходимости - это сэкономит вам много времени на протяжении вашей карьеры веб-разработчика.Для этого просто запустите новые страницы, открыв исходную страницу index.html и «сохранив как» новую страницу (например, страницу about.html, описанную выше). После этого вы сможете начать с любого кода со своей домашней страницы, который вы хотите перенести на новую страницу, удаляя при этом все, что вам не принадлежит, и добавляя новый код по мере необходимости. Это намного проще, чем перекодировать каждый аспект новой страницы или даже переключаться между файлами, чтобы скопировать и вставить HTML-код. Как добавить новые страницы на сайт WordPress Если вы используете WordPress для создания и управления веб-сайтом WordPress, метод добавления новой страницы следующий: Найдите категорию «Страницы» в меню боковой панели в левой части экрана. Щелкните "Страницы" и выберите "Добавить новый". Введите заголовок в строке под Добавить новую страницу, затем перейдите в поле текстового редактора ниже, и WordPress автоматически сгенерирует URL-адрес для вашей страницы: Вы можете оставить этот URL-адрес по умолчанию (как на изображении выше) или отредактировать его, нажав кнопку «Изменить». После этого просто добавьте содержимое своей страницы в поле текстового редактора, нажмите большую блестящую кнопку «Опубликовать», когда все будет готово, и вы только что получили новую страницу для своего веб-сайта WordPress. Наконец, помните, как и в случае с веб-сайтом HTML, вам необходимо включить связанный текст на каждой странице, чтобы посетители могли перемещаться вперед и назад по вашему веб-сайту WordPress. Подходит ли вам технология? Пройдите нашу 3-минутную викторину! Ты выучишь: Если вам подходит карьера в сфере технологий Какая техническая карьера соответствует вашим сильным сторонам Какие навыки вам понадобятся для достижения ваших целей Основы Индекса.html Веб-страница по умолчанию Одна из самых первых вещей, которую вы узнаете, когда начнете погружаться в воду дизайна веб-сайтов, - это как сохранять свои документы в виде веб-страниц. Многие учебники и статьи о начале работы с веб-дизайном предложат вам сохранить исходный HTML-документ с именем файла index.html . Давайте посмотрим на значение этого конкретного соглашения об именах, которое действительно является отраслевым стандартом. Дерек Абелла / Lifewire Домашняя страница по умолчанию Индекс.html-страница - это наиболее распространенное имя, используемое для страницы по умолчанию, отображаемой на веб-сайте, если никакая другая страница не указана, когда посетитель запрашивает сайт. Другими словами, index.html - это имя, используемое для домашней страницы веб-сайта. Архитектура сайта и Index.html Веб-сайты создаются внутри каталогов на веб-сервере. Для вашего веб-сайта вы должны сохранить каждую веб-страницу как отдельный файл. Например, ваша страница «О нас» может быть сохранена как about.html , а ваша страница «Свяжитесь с нами» может быть contact.html . Ваш сайт будет состоять из этих HTML-документов. Иногда, когда кто-то посещает веб-сайт, он делает это, не указывая один из этих конкретных файлов в адресе, который они используют для URL-адреса. Например: http://www.lifewire.com class = "ql-syntax"> Несмотря на то, что в URL-запросе, отправленном на сервер, нет страницы, этот веб-сервер все равно должен доставить страницу для этого запроса, чтобы браузеру было что отображать.Доставленный файл является страницей по умолчанию для этого каталога. Обычно, если файл не запрашивается, сервер знает, какой из них обслуживать по умолчанию. На большинстве веб-серверов страница по умолчанию в каталоге называется index.html class = "ql-syntax"> По сути, когда вы переходите по URL-адресу и указываете конкретный файл, это то, что сервер доставит. Если вы не укажете имя файла, сервер ищет файл по умолчанию и отображает его автоматически - почти так, как если бы вы ввели это имя файла в URL-адрес. Другие имена страниц по умолчанию Помимо index.html, есть другие имена страниц по умолчанию, которые используют некоторые сайты, в том числе: index.htm default.htm или default.html home.htm или home.html Реальность такова, что веб-сервер можно настроить так, чтобы он распознавал любой файл, который вы хотите использовать по умолчанию для этого сайта. В этом случае рекомендуется использовать index.html или index.htm, потому что он сразу распознается на большинстве серверов без какой-либо дополнительной настройки.Хотя default.htm иногда используется на серверах Windows, использование index.html практически гарантирует, что независимо от того, где вы решите разместить свой сайт, в том числе если вы решите сменить хостинг-провайдера в будущем, ваша домашняя страница по умолчанию будет по-прежнему распознаваться и отображаться. . У вас должна быть страница index.html во всех ваших каталогах Всякий раз, когда у вас есть каталог на вашем веб-сайте, рекомендуется иметь соответствующую страницу index.html. Даже если вы не планируете отображать контент на индексных страницах выбранных каталогов с любыми фактическими ссылками на страницы, наличие файла на месте - это разумный шаг для пользователя, а также функция безопасности. Использование имени файла по умолчанию, такого как index.html, также является функцией безопасности Большинство веб-серверов начинают со структурой каталогов, видимой, когда кто-то заходит в каталог без файла по умолчанию. Это представление показывает им информацию о веб-сайте, который в противном случае был бы скрыт, например каталоги и другие файлы в этой папке. Эта прозрачность может быть полезна во время разработки сайта, но после того, как сайт запущен, разрешение просмотра каталогов может быть уязвимостью безопасности. Если вы не поместите файл index.html в каталог, по умолчанию большинство веб-серверов будут отображать список всех файлов в этом каталоге. Хотя это поведение можно отключить на уровне сервера, это означает, что вам нужно привлечь администратора сервера, чтобы заставить его работать. При установке IIS просмотр каталогов по умолчанию отключен. Если документ по умолчанию не найден и просмотр документов и каталогов по умолчанию отключен, пользователь получит ошибку 404. Если у вас мало времени и вы хотите контролировать это самостоятельно, простой обходной путь - просто написать веб-страницу по умолчанию и назвать ее index.html. Загрузка этого файла в ваш каталог поможет закрыть эту потенциальную дыру в безопасности. Кроме того, также рекомендуется связаться с вашим хостинг-провайдером и попросить отключить просмотр каталогов. Сайты, которые не используют файлы .HTML Некоторые веб-сайты, например, те, которые работают на системе управления контентом или те, которые используют более надежные языки программирования, такие как PHP или ASP, могут не использовать.

Html первая страница: Введение в HTML | htmlbook.ru

Первая WEB страница.

Уроки для чайников

Что такое HTML?

Урок 2. Первая страница на HTML

Введение в HTML — первая страница

Привет-мир #

helloworld

helloworld в хромиуме

helloworld в IE

helloworld с UTF

Проверка страницы в IE

Так что же мы написали #

DTD — Document Type Definition #

HTML #

Head #

Title #

HTML-тег h2 #

HTML-тег article #

HTML-тег p(paragraph) #

HTML-тег q (HTML Quote Element) #

CSS #

опера css

Что мы написали в стилях #

Домашнее задание #

Дополнительные ссылки #

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

Работа с тегом head. Создание первой html-страницы.

Что нужно писать между тегами head и зачем?

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

seodon.ru | Учебник HTML — Структура HTML-документа

Тег <HTML> или корневой элемент веб-страницы

Тег <HEAD> или «шапка» HTML-страницы

Тег <META> — указываем кодировку документа

Тег <TITLE> или заголовок документа

Тег <BODY> или тело документа

Тег <!DOCTYPE> или выбираем версию HTML

Создаем свою первую HTML-страницу

Создать простейшую веб страницу. Что такое веб страница

Теги

Атрибуты

Демонстрация основных терминов HTML

Настройка структуры документа HTML

Демонстрация структуры HTML-документа

Самозакрывающиеся элементы

Валидация кода

На практике

Основные термины CSS

Селекторы

Свойства

Значения

Работа с селекторами

Селекторы типа

Классы

Идентификаторы

Дополнительные селекторы

Подключение CSS

Другие варианты добавления CSS

Использование сброса CSS

Кроссбраузерность и тестирование

На практике

Демонстрация и исходный код

Резюме

Ресурсы и ссылки

Навигация по записям

Evrsoft Первая страница / 1-я страница 2006 Редактор HTML / Конструктор сайтов

Первая страница в HTML | atnyla

1. Откройте текстовый редактор.

2.Введите следующий код

3.Сохраните файл как

4. Откройте веб-браузер

5. Загрузите свою страницу в браузер.

6. Наслаждайтесь своим новообретенным гением.

Предварительный просмотр

Поделитесь мной:

Начало работы с HTML — Изучение веб-разработки

Ирэн П. Смит

Свяжитесь со мной по адресу:

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

Выполните следующие действия, чтобы добавить страницы на свой веб-сайт HTML или WordPress