68 подписчиков

Тексты на веб-страницах

7 сентября 20187 сен 2018

1 мин

Тексты на любом сайте это одно их главных достоинств. Теперь. Как монтируются тексты в веб-страницах? Если вы пользуетесь Wordpress или любой другой "монтировкой", то там все просто. Но мы же типа сами хотим... :))) Итак. Все просто снова. Первое. Вы можете располагать тексты на страницах внутри таблиц... Я так тоже начинал. Таблица задается тегом <table>. О таблицах в другой раз. Таблицы не очень удобны для дизайна сайтов и особенно текстовых полей. Мы будем делать текстовые блоки. Простейший блок можно записать так: <div> Я толковый веб-дизайнер </div> Все. Обратите внимание, теги в HTML должны быть " закрыты " ( </div> )... Это важно. Иначе ваша страница будет читаться браузером неправильно, что увеличит время загрузки. Дальше. Блоки на странице надо расположить. Тут вы вольны раскидать их как вам нравится. Это возможно только если вы делаете сами, ни одна " система управления контентом ( CMS ) " вам не позволит вольностей. Именно за этим мы учимся, чтобы нам " никто не указ ". Чтоб

Итак. Все просто снова.

Первое. Вы можете располагать тексты на страницах внутри таблиц... Я так тоже начинал. Таблица задается тегом <table>. О таблицах в другой раз. Таблицы не очень удобны для дизайна сайтов и особенно текстовых полей.

Мы будем делать текстовые блоки. Простейший блок можно записать так:

<div> Я толковый веб-дизайнер </div>

Все. Обратите внимание, теги в HTML должны быть " закрыты " ( </div> )... Это важно. Иначе ваша страница будет читаться браузером неправильно, что увеличит время загрузки.

Дальше. Блоки на странице надо расположить. Тут вы вольны раскидать их как вам нравится. Это возможно только если вы делаете сами, ни одна " система управления контентом ( CMS ) " вам не позволит вольностей. Именно за этим мы учимся, чтобы нам " никто не указ ".

Чтобы нам задать расположение текстового блока ( или любого другого ) нам надо просто задать его координаты на поле страницы. Это отступ слева и сверху, или как вам удобно :))) Вот вам образец страницы, для тренировки:

<!DOCTYPE html>

<html>

<head>

<style>

div {

position: absolute;

left: 100px;

top: 150px;

}

</style>

</head>

<body>

<h1>Позиционирование</h1>

<div><h2>Этому заголовку " указали место! "</h2></div>

<p>Абсолютное позиционирование. Заголовок расположен 100px слева и 150px от верха страницы.</p>

</body>

</html>

Вы можете это сохранить, открыть в браузере и поэксперементировать с цифрами. Сохраняйте с расширением .html :)))

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

Точно так же можно задать положение любого элемента, картинки, ссылки.

Вот. Теперь вы и сам себе конструктор! Успехов!