Содержание

HTML — главный язык верстки сайтов

Как я написал в предыдущем уроке, браузер открывает файл с расширением .html, и вы видите сайт. Так вот, главная технология верстки — это HTML (читается Аш Ти Эм Эль).

HTML нельзя как-то потрогать или увидеть в целом. HTML — это набор меток (тегов). Сразу к примеру — <p>Это абзац.</p>. Здесь <p></p> это и есть один из тегов HTML. Если в Word вы для того, чтобы создать новый абзац просто нажимаете ENTER, то в HTML новый абзац нужно помещать между <p> и </p>.

Как и где писать HTML

HTML можно писать прямо в блокноте. То есть, создать текстовый документ, например, 1.txt. Открыть его в блокноте и писать в нем HTML. Можно написать <p>Это абзац.</p>. Только, если открыть текстовый документ в браузере, то вы просто увидите тот же текст <p>Это абзац.</p>. Помните какие файлы надо открывать в браузере? Правильно, файлы с расширением .html. Значит, нужно текстовый файл переименовать в 1.html или в 2.html. Неважно какое название, главное, чтобы расширение было .html.

А вот теперь, когда вы откроете .html-файл в браузере, то тегов <p> и </p> вы не увидите. Браузер их обработал. В этом и есть смысл HTML, теги не показываются в браузере, они созданы для того, чтобы браузер их обрабатывал, и правильно отображал сайт.

В HTML всего несколько тегов. Их можно запомнить меньше, чем за час. К тому же, все теги названы не просто так, а с конкретным смыслом на английском языке, и так их легче запомнить. Например, уже знакомый вам тег <p></p>, это сокращение от paragraph, что переводится как абзац. Здесь плюсы со всех сторон — если вы не знаете английский, то вы его подтянете, а если вы хорошо знаете английский, то вы еще быстрее освоите HTML.

Я написал, что HTML можно писать прямо в блокноте, но удобнее писать в специальных редакторах, так же как удобнее писать рефераты, курсовые, дипломные работы в Microsoft Word. Самый популярный редактор для HTML бесплатен, и его, конечно же, можно скачать в интернете.

В следующем уроке я опишу еще 2 технологии в верстке сайтов, а потом можно будет переходить на уровень ПРОФЕССИОНАЛ и приступить к простому и интересному обучению.

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

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

  1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключенного в открывающие и закрывающие угловые скобки.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
  3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

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

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

Атрибут всегда должен иметь:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута, заключенное с двух сторон в кавычки.

Вложенные элементы

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

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведенное ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмем  элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon.png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

  • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
  • <html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
  • <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
  • <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
  • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
  • <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.

Изображения

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

  1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
  2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

Разметка текста

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

Заголовки

Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2><h6>, хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента <img>.

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

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

  1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
  2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

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

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>
    
<ul> 
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>

<p>работающих вместе ... </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a>a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

  1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
  2. Оберните текст в элемент <a>, например так:
    <a>Манифест Mozilla</a>
  3. Задайте элементу <a> атрибут href, например так:
    <a href="">Манифест Mozilla</a>
  4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.

Заключение

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

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

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

В этом модуле

Введение в HTML — Изучение веб-разработки

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

Необходимые условия

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

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

Руководства

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

Начало работы с HTML
Охватывает базовые основы HTML, чтобы вы начали изучение — мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!
Что такое заголовок? Метаданные в HTML
Заголовок HTML — это часть документа, которая не отображается в браузере при загрузке страницы. Он содержит информацию, такую как: страница <title>, ссылки на CSS (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).
Основы редактирования текста в HTML
Основной задачей HTML является придание тексту значения (также известно, как семантика), чтобы браузер знал, как его правильно отображать. В этой статье расматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
Создание гиперссылок
Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
Углубленное форматирование текста
Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье Основы редактирования текста в HTML. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.
Структура документа и веб-сайта
Помимо определения отдельных частей страницы (таких как «абзац» или «изображение»), HTML также используется для определения отдельных зон веб-сайта (таких как «шапка», «меню навигации»,  «столбец с основным содержимым».) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.
Отладка HTML
Писать на HTML хорошо, но что, если что-то идет не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут Вам помочь.

Оценка

Следующие задания проверят ваше понимание основ HTML, описанных в приведенных выше руководствах.

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

Смотрите также

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

Учебник по Html для чайников. Инструментарий.

Ступенька 2-ая.

<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.

<br>

Добро пожаловать! 🙂
</body>

</html>
(посмотреть)

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

Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.

Итак, все, что находится между < и > — это тэг. Текст, не находящийся между такими скобками < > — весь виден при просмотре в броузере.

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

<html>

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

</html>

Некоторые тэги, вроде <br>, не требуют закрывающего тэга.

Итак, вернемся, к нашему документу и рисунку.

Как сделать веб страницу html с картинкой для чайников

 

для чайников 

 

сделать веб страницу html с картинкой

 

 

 

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

  

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

 

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

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

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”.  Для этого нам понадобится любой текстовый редактор.  Я вам посоветую «Notepad++».  Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
 «page.html»

И так, открываем наш редактор, и пишем следующий код:




<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета
</body>
</html>

Сохраняем созданный текст.
Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

Вставить картинку в html страницу

Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
Выбираем нужное изображение, редактируем его  либо в документе Word (простой вариант), либо в Photoshop.
Сохраняем картинку в формате  JPEG, в нашей папке для создания страниц html.
Пример:
название папки:  user_page
в этой папке:
страница: page.html
картинка: kartinka.jpg

Для вставки картинки в страницу применяется тег <img>. 
Для указания пути к картинке в теге используется параметр src=
Вот так будет выглядеть код  html, при помощи которого можно вставить картинку в страницу  html:
<img src=»/kartinka.jpg»> (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой




<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета

<img src=»/kartinka.jpg»>
</body>
</html>

 

Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается,  сделать html страницу совсем  не сложно!

Ниже приведены атрибуты для тега <img>, и их предназначение:

















<img src=»/kartinka.jpg»>

Без атрибутов — текст по умолчанию находится снизу картинки

<img src=»/kartinka.jpg» align=»right»>

align=»right» — картинка справа, текст слева

<img src=»/kartinka.jpg» align=»left»>

align=»left» — картинка слева, текст обтекает справа

<img src=»/kartinka.jpg» align=»bottom»>

align=»bottom» — как и по умолчанию, текст внизу картинки

<img src=»/kartinka.jpg» align=»middle»>

align=»middle» — текст посередине картинки

<img src=»/kartinka.jpg» align=»top»>

align=»top» — текст вверху картинки

<img src=»/kartinka.jpg» vspace=»10″>

vspace — задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).

<img src=»/kartinka.jpg» hspace=»20″>

hspace — задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

<img src=»/kartinka.jpg» alt=»Сайт для сайтостроителей»>

alt — задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись «Сайт для сайтостроителей». Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).

<img src=»/uzeron_pc.jpg»>

width — задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)

<img src=»/uzeron_pc.jpg»>

height — задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)

<img src=»/uzeron_pc.jpg» border=»0″>

border — задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

<p align=»center»><img src=»/uzeron_pc.jpg»> </p>

<p></p> — размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
align=»left» — слева
align=»center» — в центре
align=»right» — справа

<body bgcolor=»#000000″ background= «uzeron_pc.jpg»></body>

background=»Ваш_фон.jpg»- Ваша картинка будет фоном HTML странички. В атрибуте background=»Ваш_фон.jpg» нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

Добавить комментарий
Работа с основными HTML тегами и атрибутами для новичков

Сейчас мы с вами займемся изучением основных тегов.
Начнем с того, какие теги являются обязательными на странице,
формируя ее структуру.

Блок . Структура простейшей страницы

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

В служебное содержимое, которое располагается внутри тега <head>,
входит много различных вещей, но пока нам нужны только две из них.
Это тег <title>, задающий название страницы,
которое будет видно во вкладке браузера, и тег <meta>,
который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8,
подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция
doctype, которая указывает версию языка HTML, на которой сделан сайт.
Актуальная сейчас версия языка имеет номер пять и доктайп для нее
должен выглядеть так — <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы
(чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением
.html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		Это основное содержимое страницы.
	</body>
</html>

Как выглядит этот пример в браузере
смотрите по данной ссылке.

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

Тут скоро будет видео как начать:
как сохранить с расширением .html, структура страницы,
кодировки.

Ну, а теперь, научившись создавать простейшие страницы,
мы перейдем к изучению полезных тегов, которые следует
использовать внутри тега <body>.
Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей.
Итак, приступим.

Блок . Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это абзац.
		</p>

		<p>
			Это еще один абзац.
		</p>

		<p>
			И еще один абзац.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h2, h3, h4, h5, h5, h6

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

Заголовки создаются с помощью тегов
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>.
Они имеют разную степень важности. В заголовке h2 следует располагать название
всей HTML страницы
, в h3 — название блоков страницы,
в h4 — название подблоков и так далее.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<h2>Заголовок h2</h2>
		<h3>Заголовок h3</h3>
		<h4>Заголовок h4</h4>
		<h5>Заголовок h5</h5>
		<h5>Заголовок h5</h5>
		<h6>Заголовок h6</h6>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
		<p>Это третий абзац.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно
сделать жирным и обычный текст — достаточно взять его в тег <b>.
Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <b>жирный</b> текст.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

Обратите внимание на то, что тег <b> следует
использовать внутри какого-либо другого тега, например абзаца. В этом
случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b
делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <i>курсивный</i> текст.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это курсивный текст.

Блок . Списки

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

Списки создаются с помощью тега <ul>, внутри
которого обязательно должны идти теги <li>.
Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li
соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя.
Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ul>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ul>
	</body>
</html>

Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

Списки, созданные через тег ul, называются неупорядоченными списками.
Такое название им дано потому, что существуют еще и упорядоченные списки,
у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul
имеют тег <ol>, а пункты таких списков также создаются через теги
li.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ol>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ol>
	</body>
</html>

Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

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

Блок . Ссылки

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a>
	</body>
</html>

Так код будет выглядеть в браузере:

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

Тут скоро будет видео про ссылки абсолютные и относительные

Блок . Картинки

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

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<img src="smile.png">
	</body>
</html>

Так код будет выглядеть в браузере:

Обратите внимание на то, что тег <img>
не требует закрывающего тега.

Блок . Ссылки в виде картинок

Ссылкой может быть не только текст,
но и картинка — для этого достаточно тег <img> вложить
в тег <a>, как это сделано в следующем примере.
Нажмите на картинку — и вы перейдете по ссылке на сайт phphtml.net (чтобы
потом вернуться назад на книжку — нажмите кнопку «назад» в браузере):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net"><img src="smile.png"></a>
	</body>
</html>

Так код будет выглядеть в браузере:

Блок . Разрыв строки

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

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первый абзац.

Это второй абзац.

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

Чтобы сделать такое, в том месте, где должен быть
разрыв строки, следует написать тег <br>.
Учтите, что этот тег особенный и не имеет закрывающего.

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первая строка текста, <br> а это вторая.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первая строка текста,
а это вторая.

Блок . Комментарии HTML

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

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

Комментарии в HTML оформляются следующим образом:
сначала уголок, знак ! и два дефиса — <!—,
потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<!-- 
			Это комментарий HTML -
			на странице сайта он не отображается.
		-->

		Это основное содержимое страницы.
	</body>
</html>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

HTML — чайники

Переключить навигацию

Поиск

Отправить

  • Обзор тем

    Live

    • Бытовая электроника
    • Еда и напитки
    • Игры
    • Здоровье
    • Личные финансы
    • Дом и сад
    • Домашние животные
    • Отношения
    • Спорт
    • Религия

    Learn

  • Центр
  • Ремесла
  • Образование
  • Языки
  • Фотография
  • Подготовка к экзаменам

Работа

  • Социальные медиа
  • Программное обеспечение
  • Программирование
  • Веб-дизайн и разработка
  • Бизнес
  • Карьера
  • Компьютеры
  • Индивидуальные решения

    • Поиск

      Отправить

    • Home
    • Веб-дизайн и разработка
    • HTML

    Поиск

    Отправить

    • Home
    • Веб-дизайн и разработка
    • HTML

    Выберите тему

    Переключить навигацию

    • Home
    • Веб-дизайн и разработка
    • HTML
    • Разработка сайтов
    • WordPress
    • Мобильные приложения
    • Javascript
    • Поисковая оптимизация
    • HTML5 и CSS3
    • HTML
    • Squarespace
    • Joomla
    • iOS
    • HTML5
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • Веб-хостинг
    • 9505 Веб-хостинг Программное обеспечение
    • Social Media Commerce
    • Web Analytics
    • Blender
    • Системы управления контентом
    • CSS3
    • UX
    Разработка сайта
      WordPress
      • Шаблоны, темы и плагины
      • Установка и настройка
      • Навигация и настройка
      • WordPress Design
      • Несколько сайтов и сеть
      Мобильные приложения
      • приложений для Android
      • приложений для iOS
      Javascript

        Кодирование с JavaScript для чайников Ссылки

        Часть I — Начало работы с JavaScript

        Глава 1 — упражнения из раздела «Знакомство с вами» в Начало работы с программированием

        Глава 2 — упражнения из раздела «Зачем изучать программирование?» в Начало работы с Progamming

        Глава 3 — Упражнения в Начало работы с программированием

        • Из «Зачем учиться программированию?»
        • Из «Игры со строками и числами»
        • из «Переменных»

        Глава 4 — Все уроки по массивам и объектам в JS

        Глава 5

        Глава 6 — Все упражнения в:

        Часть II — Организация вашего JavaScript

        Глава 7 — Все уроки по введению в функции в JS и сборке «Камень, бумага, ножницы»

        Глава 8 — Все уроки Введение в объекты I и создание адресной книги

        Часть IV — Помимо Основ

        Глава 15 — Все уроки по введению в объекты II и построению кассового аппарата

        Часть V — JavaScript и HTML5

        Глава 18 — Все уроки Введение в jQuery

          Вы можете пропустить онлайн-упражнения в Codecademy, как вам нравится.Чтобы перейти к конкретному уроку, откройте упражнение на главной странице «Кодирование с помощью JavaScript для чайников » и нажмите на кнопку выпадающего меню в левом верхнем углу интерфейса урока. На уроке «Начало работы с программированием» кнопка помечена как «1/28».
          Названия глав и заголовки в книге не совпадают с названиями уроков. Обязательно ознакомьтесь с приведенной выше картой урока, чтобы узнать, какие упражнения нужно выполнить после того, как вы прочитаете каждую главу.

        Получить код из книги

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

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

        ,

        HTML, XHTML & CSS All-in-One для манекена Chat Sheet

        1. Веб-дизайн и разработка
        2. Разработка сайта
        3. HTML, XHTML & CSS All-in-One для манекена Шпаргалка

        От HTML, XHTML и CSS All-In-One для чайников, 2-е издание

        Энди Харриса

        Если вы только начинаете создавать веб-страницы в HTML или хотите перейти к более сложным темам, таким как клиент При программировании на JavaScript или управлении базой данных с MySQL, есть несколько общих правил синтаксиса, атрибутов и команд, которые вы всегда должны помнить.

        Строгий шаблон XHTML

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

         
        
          <Голова>
            
            <Название> 
          
          <Тело>
          
          
         

        Общий синтаксис XHTML

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

        Общие атрибуты CSS

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

        Выбранный синтаксис JavaScript

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

        Общие команды MySQL

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

        Об авторе книги

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

        ,

        языков — манекены

        Переключить навигацию

        Поиск

        Отправить

        • Обзор тем

          Live

          • Бытовая электроника
          • Еда и напитки
          • Игры
          • Здоровье
          • Личные финансы
          • Дом и сад
          • Домашние животные
          • Отношения
          • Спорт
          • Религия

          Learn

        • Центр
        • Ремесла
        • Образование
        • Языки
        • Фотография
        • Подготовка к экзаменам

        Работа

        • Социальные медиа
        • Программное обеспечение
        • Программирование
        • Веб-дизайн и разработка
        • Бизнес
        • Карьера
        • Компьютеры
      • Индивидуальные решения

      • Поиск

        Отправить

      • Home
      • Языки

      Поиск

      Отправить

      • Home
      • Языки

      Выберите тему

      Переключить навигацию

      • Home
      • Языки

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *