Верстка сайта с нуля

Верстка сайта с нуля

Видеокурс "Создание движка на PHP и MySQL 2.0" научит Вас создавать профессиональные движки для сайтов на PHP и MySQL с использованием ООП и паттерна MVC. В курсе разобрана вся теория по структуре движка: как всё устроено, какие должны быть объекты, какая у них иерархия и как они взаимодействуют между собой. В практической части будет создан движок с чистого листа. Будет создано ядро, все адаптеры, все вспомогательные классы, а также классы для работы с объектами базы данных. И чтобы курс был максимально полезным, будет создан движок для сайта MyRusakov.ru. Аналогично Вы сможете создать движок для абсолютно любого сайта. Данный курс идеально подходит тем, кто уже более-менее знает PHP, но ещё не умеет создавать действительно качественные и сложные по функционалу сайты.

Подробнее

Уроки и статьи

Новинка

Инструкция заработка на создании сайтов под заказ

javascript-cover

Получите бесплатную пошаговую инструкция с подробными видеокомментариями по тому, как с нуля за 3 месяца выйти на доход в 25 000 рублей/месяц, делая сайты на заказ


Для получение этого курса, пожалуйста, заполните форму снизу!

Имя:

e-mail:

Другие курсы

Яндекс-директ

Василий Кулик HTML - HTML основы

Работа с тегами div, span и hr


  В этом уроке мы затронем еще несколько тегов, которые не затрагивали в прошлых уроках.


  Давайте создадим новый файл и напишем структуру HTML-документа и в тегах body создадим тег div


<div>
    <p>Здесь информация о интересных тегах...</p>
</div>


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


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


В этом примере, чтобы Вы лучше понимали я покажу Вам div содержащий в себе ссылки верхнего меню.


<div>
    <a href="#">Главная</a>
    <a href="#">Портфолио</a>
    <a href="#">О нас</a>
    <a href="#">Обратная связь</a>
</div>


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


Во втором примере я познакомлю Вас с тегом span. Этот тег используется для работы с текстом. Например у Вас есть следующий текст и необходимо в нем выделить второе слово и восьмое в синий и курсивный вид. Для этого нам нужно будет поместить нужные слова для выделения в этот тег span и затем придать ему в CSS стили. В CSS нужно будет обратиться к блоку div и к тегу span и указать стили. В этом уроке я это делать не буду в связи с тем, что Вам еще рано думать об этом, неусвоив HTML.


Давайте посмотрим на реализацию второго примера:


<div>
    <p>Данный <span>урок</span> посвящен тегам div, span, а <span>также</span> тегу br </p>
</div>


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


Давайте проведем линию после некого текста. Это выглядит так:


<div>
    <p>Текст данного урока. тег hr отвечает за линию. Тег hr очень прост в использовании...</p>
    <hr />
</div>


После обновления Вы, безсомневно, увидите горизонтальную линию. Разумеется данным тегом тоже можно манипулировать с помощью каскадной таблицы стилей css. Ну и конечно, создавать линию можно уже с помощью тега div и CSS уже какого хочешь вида. Конечно, я уверен, что вы не очень поняли работу данных тегов. Для лучшего понимания нужно их практиковать вместе с css. Это однозначно. Урок был прост и синтаксис этих тегов Вам нужно знать, так как они используются постоянно в верстке сайтов.




Создано: 2015-08-01 13:32:20


Предыдущая статья

Вернуться на страницу со списками статей

Следующая статья




Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/wasiliykulik. Если Вы хотите дать оценку мне и моей работе, то напишите её на стене моего аккаунта.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления



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



Порекомендуйте эту статью друзьям:


Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт



Для добавление коментариев Войдите в систему
Если Вы ещё не зарегистрированы то сначала зарегистрируйтесь

Комментарии:(0)