Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

 

Язык HTML был разработан примерно в 1986-1991 годах британским ученым Тимом Бернерсом-Ли.

 

 

Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье

 

Что такое HTML

 

Версии HTML

 

На данным момент актуальны такие версии HTML:

 

  • HTML 4 (разработан в 1997 году)
  • XHTML (является расширением HTML4 на основе XML)
  • HTML5 (находится в стадии разработки, но уже пользуется большой популярностью)

 

Структура HTML документа

 

Каждый HTML документ должен начинаться со строки <!DOCTYPE ...>, которая указывает на версию HTML и строгость написания и использования HTML элементов (тегов).

 

Для HTML5 данная строка выглядит так:

 

<!DOCTYPE html>

 

Далее следует сам документ, начало и конец которого обозначаются тегами <html> и </html>. Внутри документа есть два основных блока -- <head> и <body>.

 

<html>

   <head></head>

   <body></body>

</html>

 

Начала каждого блока блока обозначается открывающим тегом (<head>), а конец - закрывающим (</head>).

 

В первой части документа, в блоке <head>, содержатся элементы, описывающие документ. Они не отображаются в браузере. 

 

В блоке <head> могут содержаться:

 

  • заголовок документа <title>, который устанавливает заголовок страницы в браузере
  • названию, описания и ключевых слов документа <meta>
  • ссылка на стилевой файл документа <link>
  • ссылки на JavaScript файлы, использующиеся в документе (тег <script>)
  • описание автора документа

 

Второй раздел <body> содержит непосредственно элементы страницы.

 

<html>

   <head>

      <title>My first page</title>

   </head>

   <body>

      <h1>Page title</h1>

     <p>Page description</p>

   </body>

</html>

 

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

 

HTML тег - это элемент HTML разметки страницы(). бывают открывающими (<html>) и закрывающими (</html>). Некоторые теги не имеют закрывающего -- <img src="/images/1.jpg" />. Также теги бывают блочными и строчными. Блочные теги начинаются с новой строки и переводят следующий элемент на новую строку - <p>, <div>. Строчный элементы отображаются в той же строке - <span>, <b>. При расположении элементов на HTML странице помните, что элементы будут следовать друг за другом, отображаясь сбоку или снизу от предыдущего. Чем ниже описан элемент на HTML странице, тем ниже он будет отображаться. На расположение элемента и его соседей также влияют размеры элемента(width ширина и height высота), его внешние(margin) и внутренние(padding) отступы и границы(border). Фактический размер элемента равен сумме его высоты (ширины), вертикальных(горизонтальных) внутренних отступов и границ. На расположение соседних элементов также влияют его внешние отступы. Но следование элементов можно изменять при помощи различных свойств. Так, например, свойство float отображает блочные элементы в том же ряду. При помощи свойства position элемент можно вытащить из потока и разместить в любом месте страницы, поверх всех элементов и т.д. Об этом подробнее читайте в статье .

 

 

Блок <body> может содержать такие HTML теги:

 

  • <table> -
  • <a> -
  • <img> -
  • <div> -
  • <p> - , абзац
  • <span> - сточный элемент, без оформления
  • <form> -
  • <ul>, <ol> -
  • <input>, , - элементы формы
  • <h1> - <h6> -
  • <b>, <i>, <u>, <em> - строчные элементы для оформления текста - жирный, курсив
  • <audio>, <video>, <canvas> - мультимедийные элементы

 

В HTML5 появилось много (header, footer, article, menu, figure, meter, progress) и много (color, date, time, range, search).

 

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

 

Приведу несколько примеров использования основных тегов HTML.

 

Табличка:

 

<table>

      <tr>

           <td>1</td>

           <td>2</td>

      </tr>

      <tr>

          <td>3</td>

          <td>4</td>

      </tr>

</table>

1 2 3 4

 

 

 

Список:

 

 

 

<ul>

<li>Пункт 1</li>

<li>Пункт 2</li>

<li>Пункт 3</li>

<li>Пункт 4</li>

<li>Пункт 5</li>

</ul>

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

 

 

 

Ссылка:

 

 

 

<a href="http://kate-land.net" title="Kate-Land" target="_blank">Kate-Land</a>

 

 

 

Картинка:

 

 

 

<img src="/images/stories/html_code2.jpg" style="float: left; margin: 0 40px 5px 0;">

 

 

 

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

 

Разметка и оформление страницы

 

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

 

  • шапка сайта (header)
  • боковые колонки (sidebar)
  • подвал сайта (footer)

 

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

 

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

 

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

 

Для создания разметки страницы можно использовать таблицу <table> (табличная верстка), блоки <div> (блочная верстка), а также элементы семантической разметки HTML5(<header>, <footer>, <section>, <aside>).  Подробно о блочной и табличной верстке читайте в .

 

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

 

Оформление контентной части страницы

 

Содержание страницы (статья, информация) также требует структуризации и стилизации. Для этого текст разделяют на абзацы <p>, вставляют таблицы <table>, списки <ol>, <ul>, выделяют заголовки и подзаголовки <h1>, <h2>, вставляют ссылки <a> и картинки <img>. Для выделения важного текста используют жирный шрифт(теги <b>, <strong>), курсивный текст(<i>, <em>) или подчеркивание(<u>). Также для выделения блоков с текстом могут использоваться иконки, другой цвет фона блока или текста. Подробнее можно прочитать в статье .

 

При создании текстов для веб-страниц, нужно учитывать, что с монитора читать сложнее, чем с бумаги. Потому нужно правильно выбирать сочетание фона и цвета текста, разделять текст на отдельные разделы, используя заголовки, разделять текст на списки(<ul>, <ol>), таблицы(<table>), чтобы он не шел сплошным полотном.

 

Атрибуты HTML тегов

 

Все HTML теги могут содержать атрибуты. Они могут быть обязательными или нет, глобальными или специфическими. Например, любому тегу можно задать атрибуты класс class и/или идентификатор id, при помощи которых к нему можно обратиться из CSS или JavaScript. Эти атрибуты считаются глобальными и не являются обязательными. 

 

Примеры обязательных атрибутов:

 

<img src="images/1.jpg">

<a href="index.html">Link</a>

 

Глобальные атрибуты делятся на основные атрибуты и атрибуты событий. Основными, как уже упоминалось, считаются атрибуты class и id, а также title, , style, , . Атрибутами событий являются события клавиатуры(onkeydown, onkeypress, onkeyup), атрибуты событий мыши(onclick, onmousemove) и .  

 

Пример использования атрибута contenteditable:

 

<div contenteditable="true" style="width: 300px; height: 100px;"></div>

Редактируемый блок:

 

 

 

 

CSS

 

CSS - каскадные таблицы стилей, которые служат для оформления HTML элементов.

 

При помощи CSS можно изменить расположение, размер, порядок блоков, фон и цвет текста и т.д. А при помощи CSS3 можно также делать анимацию и трансформацию элементов.

 

 

HTML CSS <h1>Article Title</h1>

h1 {

color: blue;

font-weight: normal;

}

 

 

CSS стили можно вставить в HTML документ тремя способами - в <head>(при помощи тега <style>), в <body>(при помощи тега <style>)и в атрибут style элемента. Подробнее в статье - 

 

При помощи свойств float, position и нового свойства transform можно значительно менять не только вид, но и способ отображения элемента на странице. Так, применяя к элементу свойство float, вы делаете элемент обтекаемым, все следующие элементы будут отображаться справа(слева) от него, даже его они блочные. При помощи свойства position можно делать больше чудес. Значения absolute и fixed вырвут элемент из потока так, что следующие элементы займут его место. При этом его можно разместить в любом месте страницы, независимо от того, что он физически находится. Кроме того, изменить тип отображения элемента со строчного на блочный и наоборот, можно просто применив свойство display: block(inline).

 

При помощи CSS можно делать анимацию элементов в виде или , можно рисовать без использования картинок или .

 

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

 

Современные браузеры предоставляют такие возможности CSS3, как наложение , анимация при наведении в виде , . Кроме того, разработан новый стандарт отображения элементов с использованием . А браузеры WebKit позволяют также использовать свои особенные свойства, например, , для изменения отображения изображения - черно-белое, сепия, изменения тона, насыщенности, размытия. 

 

Пример работы с CSS:

 

 

<style type="text/css">

.triangle {

width: 0px;

height: 0px;

background: transparent;

border-top: 20px solid transparent;

border-right: 20px solid transparent;

border-bottom: 101px solid blueviolet;

border-left: 147px solid transparent;

}

</style>

 

<div class="triangle">&nbsp;</div>

 

 

 

 

JavaScript

 

Язык сценариев JavaScript служит для создания динамики страницы и применяется к HTML элементам. При помощи JavaScript можно делать красивые анимированные эффекты, менять структуру и внешний вид элементов, добавлять им сложный функционал. При помощи JavaScript можно:

 

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

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

 

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

 

Например, для получения элемента с идентификатором my_id нужно написать следующий код:

 

 

jQuery:
$('#my_id')

JavaScript:
document.getElementById('my_id')

 

 

Используя jQuery значительно легче делать простую анимацию элементов. Например, скрытие, перемещение, изменение внешнего вида элементов или другие подобные эффекты, которые должны происходить через в определенное время или при определенном событии достаточно просто реализуется при помощи функции animate() из багажа jQuery. Более же сложные вещи почти всегда требуют значия JavaScript.

 

Подробнее о возможностях JavaScript  можно узнать в разделе , а про подключение JavaScript в HTML документе - в статье  .

 

JavaScript может стать незаменимым помошником при работе с крутными проектами, например, интернет-магазином. Можно реализовать сортировку товаром по категориям, ценам, производителям без перезагрузки страницы, добавление товара в корзину во всплывающем окне. Большинство сайтов в данный момент поддерживают разнообразные традиционные элементы, которые делаются при помощи JavaScript'а - всплывающие окна(лайтбоксы), увеличение фотограций при клике, переключение вкладок блока (табы) и многое другое. Кроме того, хорошим тоном считается плавная реализация простых эффектов. Например, можно сделать эффект при наведении на элемент при помощи CSS псевдокласса hover, но этот же эффект можно сделать более плавным при помощи JavaScript. 

Простой пример работы JavaScript:

 

 

<button id="clickButton">Click Me</button>

<script>

function clickButton(){

var button = document.getElementById('clickButton');

button.addEventListener('click', function(){

alert('Thank You!');

});

};

clickButton();

</script>

 

 

 

HTML5

 

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

 

Для правильной семантической верстки HTML5 предоставляет новые элементы:

 

  • header и footer для создания шапки и подвала сайта, которые повторяются на всех страницах
  • aside для создвания сайдбара(боковой части сайта)
  • article для размещения статьи или основного контента сайта
  • section для создания раздела страницы сайта или контейнера с разделами
  • menu и nav для создания меню и навигации сайта

 

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

 

Пример:

 

<video autoplay="autoplay" controls="controls" preload="auto" width="566"> <source src="/adds/nice_cats.mp4"> </video>

 

Очень интересным и полезным является элемент canvas, который позволяет рисовать на странице или создавать анимацию.

 

Новые типы элемента input и новые атрибуты элементов управления позволяют более удобно работать с формами.

 

Вам наверняка пригодятся такие элементы управления <input type="...">:

 

  • color - палитра для выбора цвета
  • date - календарь для выбора даты
  • time - для выбора времени
  • search - поле поиска
  • url - поле для ввода адреса веб-сайта, валидность поля проверяется в браузере(тоже новинка HTML5)
  • email - поле для ввода электронной почты, также проверяется на валидность
  • range - ползунок для выбора числа в заданном диапазоне
  • number - поле для ввода чисел

 

Работу с HTML5 формами и другими элементами также упрощают новые атрибуты. Приведу лишь несколько из них:

 

  • autocomplete - задает автозаполнение полей формы
  • novalidate - позволяет проверять данные формы до их отправки на сервер
  • placeholder - заменитель текста в текстовых элементах управления input, textarea
  • required - указывает на обязательность заполнения поля формы
  • contenteditable - делает содержимое элемента редактируемым
  • draggable - позволяет делать элемент перетаскиваемым

 

 

Выводы.

 

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

 

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

 

 

Полезные ссылки.

 

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

 

 - описание понятия CSS, все ключевые моменты, основные CSS свойства, виды селекторов, кроссбраузерность, CSS3 и вендорные префиксы.

 

 - список всех CSS свойств, подробно описанных на сайте, со ссылками на нужные статьи.

 

 - пример блочной верстки, трехколоночный шаблон с подробным описанием.

 

 - полезные советы для верстальщика.

 

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

 

 

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

 

 - понятие вендорного префикса, причины и примеры использования.

 

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

 

 - определение резиновой верстки, плюсы и важные моменты.

 

 

 - описание основных браузеров, под которые актуально делать верстку.

 

 - таблица специальных символов.

 

 - описание понятия сброса стилей и пример файла reset.css.

 

 - сброс стилей для новых элементов HTML5.

 

 - описание подключения нестандартного стиля на сайт при помощи font-face.

 

 

 

 


Источник: http://kate-land.net/develop-site/item/238-html


Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится

Html-код страницы где он находится