Главная | Регистрация | Вход | RSSПятница, 29.03.2024, 11:56

Заработок в сети Интернет для всех

Меню сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

HTML – это просто

intimSHOP.ru




                                            или как написать код страницы, не зная html

                Сейчас на многих сайтах есть возможность писать тексты в визуальном редакторе. Но, к сожалению, при таком способе добавления материала код страниц получается «грязным». То есть при обработке ваших действий (отступы, переносы строк и т.д.) сайт генерирует много лишних символов. А это здорово тормозит загрузку страниц. Причем, то же самое происходит, если вы сначала пишете в каком либо текстовом редакторе, например Microsoft Office Word, а потом копируете текст, так как сохраняется все форматирование. Поэтому лучше все-таки делать страницы в html – коде.

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

                                                                              Текст

                Писать текст советую не в редакторе сайта, а в программе «Блокнот» вашего компьютера. Можно использовать и Word, но только при условии, что вы будете коды копировать, а не прописывать  вручную.

                 И так, давайте попробуем создать нашу html – страницу. Возьмем текст, например, вот такой:

Ура! У меня есть свой сайт. Дело за малым: научиться им управлять, и заполнить его интересными материалами. Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.

Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. А кроме того, он будет приносить мне ощутимый доход.

                Так как текст наиболее аккуратно смотрится, когда он ровный и с левой и с правой стороны, будем рассматривать именно этот вариант. Для того, чтобы выровнять наш текст по ширине страницы, нужно перед первой буквой текста добавить вот такую «фразу»:  <div align=justify>, а после последней точки вот такую: </div>. Ни каких пробелов между текстом и этими символами не нужно. Теперь наш текст будет выглядеть так:

<div align=justify>Ура! У меня есть свой сайт. Дело за малым: научиться им управлять, и заполнить его интересными материалами. Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.

Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. А, кроме того, он будет приносить мне ощутимый доход.</div>

                Мы видим, что наш текст состоит из двух абзацев. Это значит, что нам нужно, чтобы предложение «Мой сайт будет…» начиналось с новой строки. Для этого в конце каждого абзаца ставим вот такой значок: <br>, тоже без пробела.  А если нужно, чтобы абзацы начинались с «красной строки» (то есть с отступа), в начале каждого абзаца ставим вот такую строчку из восьми одинаковых символов:  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Теперь ваши абзацы будут с отступами, а наш текст будет выглядеть так:

<div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Ура! У меня есть свой сайт. Дело за малым: научиться им управлять, и заполнить его интересными материалами. Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.<br>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. А, кроме того, он будет приносить мне ощутимый доход.</div>



articles: urmedkonst.gif


                В таком виде наш текст уже можно скопировать и добавить в html-редактор сайта. Как это сделать, я расскажу чуть ниже. А пока покажу, как можно выделить отдельные слова или фразы. Допустим, вы хотите, чтобы какая-нибудь часть текста была написана полужирным шрифтом. Для этого нужное слово или фразу (или целые предложения) нужно заключить вот в такие значки: <b> и </b>. Соответственно первый ставится перед началом фразы (помним, пробелы не нужны), а второй в конце. Давайте выделим полужирным начало нашего текста: <b>Ура! У меня есть свой сайт.</b>.

                Если нужно, чтобы текст был подчеркнутым, заключаем его вот в такие значки: <u> и </u>. Давайте подчеркнем последнюю фразу нашего пробного текста: <u>А, кроме того, он будет приносить мне ощутимый доход.</u>.

                Если хотите что-то написать курсивом, надо этот кусок текста заключить в значки <i> и </i>. Давайте напишем курсивом последнюю фразу первого абзаца: <i> Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.</i>

                Можно сделать так, чтобы текст был написан жирным курсивом и при этом был подчеркнутым, то есть на одном куске текста использовать все три вида значков. Но при этом надо знать одно очень важное правило, иначе ничего не получится, или получится не так, как нужно. Правило простое: все эти значки (они называются тегами), вкладываются друг в друга, как матрешки. Если у вас первым открывающим тегом стоял <b>, вторым <u>, а третьим <i>, то в конце выделяемой фразы закрывающие теги нужно ставить в обратном порядке: </i>, потом </u>, а уже в конце </b>.  Можно поменять порядок этих тегов в начале, но тогда и порядок в конце будет другим. Например, вот так: <u><i><b>Мой любимый сайт</b></i></u>.

                Ну, вот, мы сделали все что хотели: написали текст, разбили его на абзацы, сделали отступы в начале абзацев, сделали фразы, которые хотели, полужирными, подчеркнутыми и курсивными. В итоге наш текст принял вот такой вид:

 <div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<b>Ура! У меня есть свой сайт.</b> Дело за малым: научиться им управлять, и заполнить его интересными материалами.<i>Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.</i><br>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. <u>А, кроме того, он будет приносить мне ощутимый доход.</u></div>

 

                                                               Вставляем страницу на сайт

               

Теперь можно смело вставлять наш текст в html-редактор сайта. Просто копируем наш готовый текст и вставляем их в окно для содержимого страницы.

Для тех, кто вдруг не знает, как скопировать текст, объясняю, остальные могут пропустить. В нашем созданном документе устанавливаем курсор перед первым символом текста, зажимаем левую кнопку мыши и, не отпуская кнопку, ведем мышь направо и вниз, до последнего символа документа. При этом весь текст окажется на темном фоне. Это и есть выделение. Когда весь текст выделили, кнопку отпускаем. Теперь правой кнопкой мыши щелкаем в любом месте выделенной области и в появившемся списке левой кнопкой мыши выбираем (нажимаем) «Копировать».

Также можно выделить и скопировать текст с помощью клавиатуры: поставьте курсор в начале текста и, зажав клавишу Shift, с помощью кнопок →(вправо) и ↓(вниз) выделите текст.  Отпустите клавишу Shift. Чтобы скопировать выделенное нажмите клавишу Ctrl и, не отпуская ее, букву C (латинскую).

 Теперь переходим в наш редактор на сайте, щелкаем в левом верхнем углу того окна, куда нужно вставить текст, правой кнопкой мыши, и в появившемся списке выбираем «вставить». Или воспользуйтесь комбинацией клавиш Ctrl+V: нажмите кнопку Сtrl и, не отпуская ее, букву V.  

Если все сделано правильно, в окне появится весь ваш текст.

                Не торопитесь сохранять его. Для того, чтобы посмотреть, что у нас получилось, есть специальная кнопка «Предпросмотр». Нажмите на нее. Теперь мы видим, как будет выглядеть наш текст на странице сайта. Сразу нужно проверить, все ли отступы и переносы строк имеются в наличии, присутствуют ли все выделения, которые мы делали в тексте, не торчит ли где кусок кода. Если видно кусок кода в тексте, это означает, что или вы его не правильно поставили, или забыли поставить второй, закрывающий или открывающий тег.

Если что-то не так, вернитесь к редактору, найдите ошибку, исправьте ее, и снова нажмите «предпросмотр».

Если все отлично, смело нажимайте «Сохранить».  Теперь можете найти свою статью через «Меню» и полюбоваться на дело рук своих.

 

                                                               Изображения

Прежде чем размещать готовую страницу с кодом картинки на сайт, не забудьте эту картинку загрузить в каталог изображений сайта, и посмотреть ее адрес. Важно! Имена файлов картинок, загружаемых на сайт, должны быть написаны латинскими буквами, далеко не все скрипты сайтов умеют распознавать русский шрифт. Узнать адрес любой картинки, не только на вашем сайте, но и на любом другом ресурсе в интернете очень просто. Щелкните по картинке правой кнопкой мыши и в появившемся списке действий нажмите левой кнопкой мыши на «Свойства изображения». Здесь можно посмотреть не только адрес изображения, но и его размер, тип файла и т.д. Если вы хотите разместить у себя картинку с другого сайта, не обязательно копировать ее и загружать на свой сайт. Достаточно скопировать ее адрес, вставить в код, и она будет видна. Однако, не советую увлекаться чужими материалами, лучше иметь свои.

Простейший код  картинки выглядит так: <img src="Адрес изображения"> Например: <img src="http://moisait./logo.jpg">.

                Однако я вам советую прописывать в код  картинки дополнительные параметры. Хотя бы такие:

<img src="адрес картинки" border="0" title="подпись к картинке" width="ширина" height="высота" />

Посмотрим, для чего все это нужно:

1. border. Дело в том, что некоторые браузеры «имеют привычку» окаймлять изображения в рамку. Если вас это устраивает, вы можете вместо 0, поставить в кавычках желаемую ширину этой рамки в пикселах (например,border="2") или не указывать этот параметр вовсе. А вот если рамка вокруг изображения не нужна – ставится border="0".

2. title. Если не указать этот параметр, при наведении курсора на картинку пользователи будут видеть рабочее название файла картинки, а они иногда бывают не очень читаемы или благозвучны. Допустим, вы разместили на сайте фото Пизанской башни и, не подумав, сократили его название так: pizba.jpg. Согласитесь, не очень приятно, если посетители вашего сайта будут видеть подобные надписи. Для того, чтобы этого не происходило, сделайте в кавычках к этому параметру подпись к картинке. Например: title="Пизанская башня". В этом случае, при наведении курсора на картинку будет появляться надпись Пизанская башня.

3.  width – это ширина (то есть длина по горизонтали) картинки в пикселах. height – это ее высота (в тех же пикселах). Некоторые браузеры могут уменьшать или наоборот, увеличивать размер изображения. Чтобы этого не происходило, нужно указывать реальные размеры вашей картинки.

Существует и другой вариант – изображение очень большое, а у вас нет нужной программы, чтобы его уменьшить или вы не умеете ей пользоваться. Тогда вы просто указываете желаемый размер по ширине или по высоте. В этом случае советую использовать только один из этих параметров (ширину или высоту), чтобы картинка отображалась пропорционально. Если вы поставите ширину, допустим 200, а с высотой не угадаете, картинку перекосит.

                Возьмем для примера изображение Пизанской башни с нехорошим названием файла. Итак, если все сделано правильно, код картинки должен выглядеть таким образом:

<img src="http://moisait.ru/pizba.jpg" border="0" title="Пизанская башня" width="400" height="250" />

                Из кода видно, что адрес нашей картинки http://moisait.ru/pizba.jpg, она не будет иметь рамку (border="0"), при наведении на изображение курсора будет появляться надпись Пизанская башня, ширина картинки 400 пикселов, высота 250 пикселов.

Вставить код картинки на страницу очень просто. Если картинка должна располагаться перед текстом или в конце его, просто вставляете код картинки выше или ниже основного кода с текстом. Если нужно, чтобы между картинкой и текстом был отступ, ставите после кода картинки или перед ним <br></br>.

Если нужно, чтобы текст располагался где-то между абзацами, желательно в конце абзаца, после которого будет вставляться картинка, закончить форматирование текста (то есть поставить значок </div>),а в начале абзаца после картинки начать его снова: поставить <div align=justify> (не забыть поставить значок </div> в конце текста).  То есть это будет выглядеть так:

<div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<b>Ура! У меня есть свой сайт.</b> Дело за малым: научиться им управлять, и заполнить его интересными материалами.<i>Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.</i><br></div>

<img src="www.moisait.ru/ logotip.gif" border="0"  title="Логотип сайта " width="300" height="180" />

<div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. <u>А, кроме того, он будет приносить мне ощутимый доход.</u></div>

 

                                                               Ссылки

                Если нужно поставить в тексте ссылку на другую страницу вашего сайта, или на любой другой сайт в Интернете, учитывайте, что голая ссылка вида: http://site.ru смотрится на странице некрасиво и не профессионально. Поэтому лучше спрятать ссылку под текст (сделать текст ссылкой).  Код ссылки имеет такой вид: <a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>

                Допустим, вы хотите дать ссылку  посетителям на страницу с информацией о себе, любимом.  Добавляете в текст, например, такую фразу: «Информацию о моих достижениях можно посмотреть здесь». И делаете слово «здесь» ссылкой. В общем тексте это будет выглядеть так:

<div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<b>Ура! У меня есть свой сайт.</b> Дело за малым: научиться им управлять, и заполнить его интересными материалами.<i>Но я человек упорный, поэтому скоро буду знать все, что нужно для этого.</i><br></div>

<img src="www.moisait.ru/ logotip.gif" border="0"  title="Логотип сайта " width="300" height="180" />

<div align=justify>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Мой сайт будет интересным полезным людям. О нем узнает весь Интернет. <u>А, кроме того, он будет приносить мне ощутимый доход. Информацию о моих достижениях можно посмотреть <a href="http://moi_uspehi.ru ">здесь.</a></u></div>

                                                               Заключение

                В принципе, этой информации достаточно, чтобы создавать полноценные страницы. Однако у html очень много разнообразных возможностей. Тем, кто хочет изучить его, рекомендую  замечательный сайт Постройка.ру:  http://www.postroika.ru/html/1step22.html - на этой странице первый урок из учебника html.  При этом, я не призываю никого учить теги и атрибуты наизусть. Главное понять сам принцип разметки страниц с помощью кода. Это здорово облегчит вам жизнь. А когда вы этот принцип поймете, при составлении документов можно пользоваться вот этим сайтом: http://htmlka.com/. Здесь много готовых кодов и интересных решений.





Live C lix: Реклама от LiveCLiX



Форма входа
Поиск
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Друзья сайта
  • Стратегия Победителей
  • Техника продаж
  • Заработаем вместе без вложений
  • Зарабатывай играя





  • Copyright MyCorp © 2024
    Создать бесплатный сайт с uCoz