FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Как помогают основы HTML при разработке сайта

Категории: Вебмастеру

что такое htmlНачинающие сайтостроители при попытке написать свой первый сайт, сразу же сталкиваются с такой, казалось бы, непреодолимой трудностью – оказывается, сайты пишутся (именно пишутся, а не рисуются, не составляются и т.д.) на языке HTML, что от английского сокращения слов HyperText Markup Language означает язык гипертекстовой разметки.

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

Кроме языка HTML, для оформления страниц сайта используется еще и стиль CSS (цвета шрифтов, страниц, построение и расположение таблиц и списков и т.д.), JavaScript (язык программирования, основанный на применении готовых скриптов). Что же такое язык HTML и как он может применяться во взаимодействии с остальными языками программирования?

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

Итак, как мы уже установили, вся Всемирная паутина банально состоит из обыкновенного текста. Что такое текст в обычном виде? Это отсутствие любого форматирования на странице, отсутствие изображений и т.д. Написание страницы на HTML обычно сводится к работе с определенным набором тегов, определяющих правила текстового набора. Работа языка разметки сводится, по большому счету, к тому, чтобы размещать в тексте, в нужном месте, необходимые метки, которые и определяют, как будет выглядеть текст – жирный шрифт, наклон, таблица или нумерованный список. Такая работа с текстом называется «разметка». Такие метки при просмотре текста в браузере не видны, но именно они и определяют внешний вид текста, и называются они тегами.

Что такое теги в HTML? Простой пример применения тега – выделение определенного слова или словосочетания жирным шрифтом. Для того, чтобы это сделать, на создаваемой странице будущий жирный текст выделяется тегом <b> </b>. Тег <b> — открывающий, после него пишется нужный текст, и тег закрывается — </b>.

Пример: <b> Простой пример применения тега – выделение определенного слова или словосочетания жирным шрифтом </b>. Такого рода теги работают только в браузере, в других программах (Блокнот, Microsoft Word) теги не работают. Наклон текста указывается таким тегом, как <i> </i>. Пример — <i> Простой пример применения тега – выделение определенного слова или словосочетания жирным шрифтом </i>. Как видите, все довольно просто. Каждый из существующих тегов имеет начальное и конечное значение и называются они соответственно открывающими и закрывающими тегами. То есть, прописывая тег, Вы указываете браузеру, как и в каком месте контент (текст) должен быть подвержен форматированию.

Ниже приведены несколько примеров распространённых тегов:

     <p> </p>

параграф или абзац, текст начинается с новой строки

<h1>Заголовок текста</h1>

<h2>Заголовок текста</h2>

<h3>Заголовок текста</h3>

<h4>Заголовок текста</h4>

<h5>Заголовок текста</h5>
<h6>Заголовок текста</h6>

<small>уменьшенный шрифт</small>

 

Следующее понятие в HTML – гипертекст, или гипертекстовая разметка. Понятие «гипертекст» можно определить, как «ссылка». Без ссылок на странице весь текст будет статичным, то есть – не имеющим продолжения. То есть, если в статье идет речь, например, о языке HTML, то к месту вставленная ссылка поможет Вам перейти на другую страницу, содержащую более расширенную информацию об этом языке. Или же рекламный рисунок, оформленный, как ссылка, перенесёт Вас на страницу рекламируемого товара или услуги. Как видите, применение гипертекста на страницах сайта весьма оправдано. Все ссылки также создаются при помощи тегов. Тег, создающий ссылки (<а> </а>), прописывается немного по-другому и выглядит посложнее, но свою работу он выполняет на «отлично». Вот пример тега для ссылок:

1
Посетите <a href="http://htmlbook.ru/">Сайт htmlbook</a>, где вы можете ознакомиться и изучить статьи по системам управления контентом и программированию

Как видно из примера, тег <а> предназначен для того, чтобы указать на ссылку, но в тексте применяется еще и атрибут (href), который указывает путь ссылки, то есть – адрес ссылочной страницы. Активная ссылка в примере – словосочетание http://htmlbook.ru/, а слова, расположенные после адреса – описание ссылки, то есть – просто пассивный текст.

А что нужно делать, если возникла необходимость вставки изображения? Эта операция производится также с помощью определенного тега —   <img>. Использование атрибута «src» предназначено для указания месторасположения картинки, а атрибут «alt» — для пропечатывания текста, который появится возле картинки при наведении мышки на неё. Применение атрибута «alt» очень помогает для распознавания изображений поисковыми системами. Кстати, тег <img> не имеет закрывающего окончания. Просто в конце тега ставится слеш.

Вставка изображения в HTML при помощи тега будет работать так же, как и тег активной ссылки. Чтобы указать браузеру месторасположение изображения, необходимо применить атрибут «src» и «alt», чтобы указать, какая надпись появится при наведении указателя мыши на картинку. Необходимо также учесть, что тег <img> не имеет закрывающего окончания. Вместо этого в конце тега, открывающего изображение, необходимо указать закрывающий слэш />. Пример написания строки для показа изображения:

1
<img src="imag/имя файла.jpg" alt="надпись при наведении курсора на картинку" />

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

1
2
3
4
5
<h1>Что такое язык программирования HTML?</h1>
 
<p>Изучив эту статью, вы можете без труда прочитать и распознать <b>HTML</b> теги. В этом тексте применены несколько тегов для форматирования текста, и, зная их предназначение, Вы свободно можете прочесть HTML-код.</p>
 
<p>Узнав, как выглядит язык HTMLвизуально и на практике, можно перейти к обсуждению более <em>концептуальных</em> вопросов. Какую роль играет язык программирования HTML в общей картине дизайна веб-страниц?</p>

Итак, подводя итог всему вышесказанному, можно обозначить такие пункты:

1. Мы узнали, что обозначает такое понятие, как язык HTML и почему он называется языком гипертекстовой разметки

2. Язык HTML предназначен для преобразования обычного текста в текст отформатированный

3. При помощи HTML можно создать активную ссылку, то есть – текст, при нажатии мышкой на который должно произойти определённое действие

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

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

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

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

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




Сегодня на десерт: Как создать шаблон для WordPress




Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail