Учебник HTML

Базовые HTML теги













  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;

   Естественно, мы хотим как можно быстрее начать создавать свои сайты. Даже самый простой сайт уже позволяет привлечь посетителей (ну если, конечно, сайт посвящён тому, что интересует целевую аудиторию). С помощью парочки рекламных блоков мы можем "монетизировать" сайт, и начать зарабатывать. Ведь имено для ради заработка это всё и затевается!

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


Шапка страницы, содержащая логотип и т.д.

Горизонтальное меню
Вертикальное
меню

Основной блок, содержащий контент страницы.








Рекламный
блок

Подвал, содержащий, например, счётчик посетителей и другую побочную информацию



   Проще всего создать структуру HTML-страницы с помощью таблицы, создав нужное количество строк и ячеек и объединив некоторые из них. Таблица задаётся сдвоенным HTML-тегом table:

   <table>
      Здесь содержатся теги, описывающие строки и я
   </table>

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

   <table>
     <tr>
       <td>Содержимое ячейки</td>
     </tr>
   </table>

   Стркутура из трёх строк, состоящих из трёх ячеек, получается комбинированием трёх парных тегов <tr></tr>, в каждом из которых содержатся три парных тега <td></td>.

   Но мы собрались не в крестики - нолики играть на доске 3*3. Шапка и подвал состоят из единственной ячейки! Поэтому в первой строке вместо пяти мы и записываем одинственный парный тег ячейки, но указываем браузеру, что эта ячейка является объединением нескольких, в данном случае трёх ячеек. Ячейки объединяются с помощью артибута colspan тега td:

   <td colspan="3">Содержимое ячейки</td>

   Вот описание страницы, пример которой приведён выше:

<table width="60%" border="1" align="center">
<tr><td colspan="3" align="center" ><br>Шапка страницы, содержащая логотип и т.д.<br><br></td></tr>
<tr><td colspan="3" align="center" >Горизонтальное меню<br></td></tr>
<tr><td width="20%" align="center">Вертикальное<br>меню</td><td align="center"><br>Основной блок, содержащий контент страницы.<br><br><br><br><br><br><br><br><br></td><td width="20%" align="center">Рекламный<br>блок</td></tr>
<tr><td colspan="3" align="center"><br>Подвал, содержащий, например, счётчик посетителей и другую побочную информацию<br><br></td></tr>
</table>

   Дополнительно поясню, что атрибут width="60%" тега table задаёт ширину таблицы в 60% относительно контейнера (того элемента, в котором она содержится, например целиком экрана монитора). Атрибут align размещает таблицу в центре контейнера, а атрибут border создаёт границы ячеек толщиной в 1 пиксел. Атрибут width="20%" тега td задаёт ширину данной ячейки в 20% относительно всей таблицы. Одинарный тег <br> создаёт перенос на следующую строку.

   Кстати, границы ячеек созданы лишь для наглядности, чтобы структура HTML-страницы была видна.


В начало урока          Следующий урок  

На Главную

Вопросы и комментарии (0)

Оставить комментарий:

Имя  

Текст комментария

  










© 2023 Delphi-Manual.ru - Уроки Delphi начинающим с нуля