/ Как редактировать сайт на html

Любой одностраничный сайт, интернет магазин или портал состоит из нескольких «частей», основой является язык разметки HTML. Он отвечает за то, где будут расположены объекты на странице. Существует две наиболее популярных структуры сайтов html:

• Блочная;
• Табличная.

Блочная верстка использует в качестве основы тег «div» и каждый объект получается в собственном блоке. Удобно это тем, что в них легко добавлять классы CSS, которые отвечают за то, как будет выглядеть шрифт или картинка. Табличная верстка является устаревшей, но до сих пор встречается на просторах сети. Главная ее задумка – разбить сайт на ячейки таблицы и уже в каждую ячейку вставляется необходимый объект или текст. Это неудобно тем, что добавляя новый не предусмотренный ранее объект, приходится высчитывать заново размер таблицы и подгонять его по ширине и высоте. Редактирование включает в себя либо добавление новых атрибутов (свойств тегов), либо подключение классов CSS, которые создаются в отдельном документе.
 

Как происходит верстка сайта в html

Верстка сайта html – это сложная и затратная по времени процедура. Задача верстальщика перенести макет сайта, который, как правило, создается в PSD формате в Photoshop, в HTML код. Формат PSD немного облегчает задачу web разработчика, тем, что он может работать с каждым объектом и его свойствами отдельно. Например, узнать цвет фона или формат текста. Это что касается верстки сайта с нуля. Сайт можно создать и используя, конструкторы, либо готовые модели. Это в свою очередь удобно лишь отчасти. Так как такой ресурс будет ограничен в функционале и не столь привлекателен со стороны. Но если вам необходим одностраничный сайт, то можно использовать и этот вариант.

 

Меняем картинку на сайте

Если нужно залить картинку на html верстальщику достаточно перейти на нужный слой в Photoshop выделить его и сохранить изображение в формате JPG или PNG в папку с объектами сайта. Затем используется тег «img» с атрибутом «scr=”путь к картинке и ее название”». Если картинка у вас хранится отдельно, то процедуру в Photoshop пропускаете и сразу прописываете путь к ней. И все, изображение появится на странице в браузере.

Обратите внимание на следующую строчку, с тегом «p» и «img» в примере:

Добавим еще тег «p», чтобы мы могли поместить картинку в нужном месте экрана, вместо «p» можно использовать «div». Атрибут «align=”center”» используется для того чтобы изображение размещалось по центру. Если вместо «center», написать «left» или «right», то изображение изменит свое положение влево или вправо. Чтобы задать размер картинки, используем следующие атрибуты:

• height – высота;
• width – ширина.

Теперь изменим значение высоты и ширины (смотрим на цифры):

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

Обратите внимание лишь на код, который идет в теге «body». Это и есть «тело» сайта, все, что находится вне него, отображаться не будет. Чтобы корректно поместить текст, удобно использовать тег «div» или «p» и уже в них добавлять различные классы CSS. Если же вы форматируете лишь на HTML, то придется работать с тегами. Существует множество тегов, которые сделают текст: наклонным и жирным, подчеркнутым, перечеркнутым и любым каким вы захотите:

Но если вам нужно добавить заголовок, то можно использовать сразу тег «h1»…«h6», отличаться они будут по размеру:

Плюсы и минусы редактирования на HTML Минусы редактирования сайтов или книг только при помощи HTML заключается в том, что нельзя создать общий «алгоритм» форматирования объектов. Приходится каждый раз прописывать атрибуты к тегам. Это все очень затратно по времени. В свою очередь это легко, не нужно никаких глубоких познаний верстки. Но все-таки стоит уделить время и ознакомиться с такой замечательной вещью, как стили CSS. CSS – используется чисто для форматирования текста, картинок, боксов и прочих объектов на сайтах. Он удобен тем, что создав один класс в CSS и описав его, вы можете применять его бесконечно раз в коде HTML. И вам не придется в каждом новом теге прописывать заново атрибуты и их свойства. Достаточно просто добавить атрибут «class=”…”». Как в данном примере:

Классы в CSS могут именоваться по-разному, вы сами даете им названия. Но совет, лучше придумывать тематические названия. В примере класс «gl-text» содержит следующий код в CSS:

И достаточно легко догадаться, что он форматирует именно текст. text-align: center – означает что текст располагается по центру. padding: 50px 0 45px 0 – расположение относительно других полей и текста. font-size: 24px - размер шрифта. font-family: 'gotham_proregular' - стиль шрифта текста. border-bottom: 1px solid rgba(224, 42, 42, 0.1) - разделительная линия и ее цвет. line-height: 10px - устанавливает межстрочный интервал. Подводя итоги нужно упомянуть следующее:
 

1. Пишите код понятно, разбивайте его на блоки, старайтесь не писать все в одну строку;
2. Если вы новичок, то обязательно ознакомьтесь не только с HTML, но и CSS, он используется сейчас при верстке каждого сайта;
3. Не забывайте закрывать теги: «p»«/p», «div»«/div» (но например тег «img» закрывать не нужно);
4. Старайтесь тестировать написанный код в нескольких браузера, особенно в IE.

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