1 голос

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

Язык важен

Вы разговариваете? Представьте себе, ваш тоже!

Часто ли вы сталкивались с тем, что дизайн сайта продуман до мелочей, но в итоге результат оставляет желать лучшего? Это значит, что вы и ваш браузер говорите на разных языках. Когда с подобным сталкивается дизайнер, он начинает четко осознавать: сайт – это не набор красивых , плашек и картинок.

Качественный ресурс – это прежде всего, грамотный код. А чтобы разбираться в нём, необходимо его изучить. Существует много толковых учебников, которые помогут новичку разобраться в html, с нуля.

Все мы знаем, что учиться чему-то новому проще сразу на практике. Специально для новичков был разработан бесплатный онлайн‑курс «Базовый HTML и CSS ». Источник поможет понять основы вёрстки, ее законы, особенности и свойства кода.


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

Кстати о проблемах. У новичков часто возникают ошибки в написании кода. Тут важно помнить, что учитывается всё: пробелы, точки и запятые. Лишний знак или отсутствие оного приведут к некорректному отображению информации. А потому следить за этим нужно очень внимательно.

Главное — практика

Самое приятное, что для создания сайта, вам не потребуется сложное . Можно просто обойтись . Открываем блокнот и пишем в нём:

<html > <head > <title > Моя первая страничка</ title > </ head > <body > Hello World! <br > </ body > </ html >

Моя первая страничка Hello World!
Меня зовут (имя), это моя первая страничка!

Затем, сохраните всё написанное как html документ, важно, чтобы расширение было html. Как это сделать? В документе нажимаете «файл», затем «сохранить как», в поле «имя файла» задаём: index.html . После всех этих операций остаётся сделать самое интересное! Правой клавишей жмём по нашему документу, открываем любым браузером.

Вуаля! Вы написали страничку, и это только начало!

Как вы видите, код отвечает за содержимое страницы. Другими словами – за . Как правило, за дизайн ресурса отвечает один человек, за вёрстку – другой. Но золотой серединой является то, когда один человек умеет верстать и отрисовывать картинку.

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

Как и где учиться

У многих количество тегов и просто их название вызывают ужас. Словно ты попал в страну, где говорят на незнакомом языке. Без словаря не обойтись, а точнее без учебника для чайников. Курсы – это конечно хорошо, но без книги, в которой все расписано, и куда можно заглянуть в любой момент, просто не обойтись. Учебник можно скачать, а можно изучать онлайн.

Практика показывает, что онлайн-версия имеет ряд плюсов и минусов. Минус состоит в том, что для доступа к материалу, вам не обойтись без интернета. А плюсом будет в то, что онлайн-издания часто обновляют. В них можно найти всю актуальную информацию на сегодняшний день.

Алленова Наталья Вячеславовна написала толковую, подробную книгу по html (смотреть ). Структура издания позволяет двигаться постепенно, осваивая более сложные алгоритмы, основанные на простых элементах. Теория и практика приятно сочетаются и дополняют друг друга.

Здесь вы найдете ответы на конкретные вопросы: как создавать ? Как выстраивать ? Как вставить картинку? Никаких абстрактных рассуждений на тему пойди туда, не знаю куда. Многие учебники в этом проигрывают, с ними вы либо теоретик, либо практик, у которого ничего не работает. Согласитесь, это не самые радужные перспективы.

Конечно, для создания сайта, придётся изучить теги более подробно. С этим, проблем возникнуть не должно, всемирная сеть предлагает огромное количество источников справочников html. Плюсы таких справочников в том, что в поисковой строке сайта можно вписать тег, узнать его значение, как и где он применяется. Иными словами – это эдакий интерактивный словарь.

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

Первые страницы учебника:

Учебник по Html для чайников. Инструментарий.

Ступенька 1-ая.

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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:



Мой первый шаг


Здравствуйте, это моя первая страница.

Добро пожаловать! :)

()

Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html

Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html ", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Ступенька 8-ая.

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

Сначала рассмотрим курсив и полужирный текст:

Полужирный текст
Наклонный текст (курсив)

Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:



Мой первый шаг



Здравствуйте, это моя первая страница.



Добро пожаловать! :)

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)



()

Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:

моноширинный шрифт

В наш пример я его вводить не буду (сделайте это самостоятельно).

Также моноширинным шрифтом отображается текст заключенный в тэг 

:
 
Текст (куча пробелов) текст
 текст (куча пробелов) текст
 текст (куча пробелов) текст


У тэга 
Есть одна замечательная особенность: текст,
заключенный в него, выводится с точностью до пробела так, как вы его
набили в блокноте. Этот тэг вам может быть полезен, допустим, для
форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов:


  текст



В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот
так-то:). Не бойтесь использовать различные комбинации тэгов,
экспериментируйте, но с умом:)

Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга :

  Подчеркнутый текст
  
Тэги  и  представляют текст перечеркнутым
шрифтом, можете использовать какой вам угодно из них, принципиальной
разницы между ними нет:

  Перечеркнутый  

 Перечеркнутый  
Тэг  представляется крупным шрифтом, а  малым шрифтом относительно основного текста: 

  Малый 

Нормальный текст

 Большой  
Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub
 - нижний. Где они могут пригодиться? Ну, например, при написании
какой-нибудь формулы - H 2 O (все, что мы выносим со школьной скамьи:). 
Верхний индекс  sup 

Нижний индекс  sub  


Сегодня рассмотрим,
 как основной способ добавления графики на HTML-страницу - соответственно, непосредственно с помощью тега «img»
, так и другие дополнительные способы
, которые могут понадобиться в различных ситуациях при разработке интернет-страниц.


Разберём всевозможные настройки и особенности,
 которые можно применить к графике: указание размера (ширина, высота), выравнивания, отступы, различные эффекты при наведении мышью на картинку и прочее...

 
Заработок на написании статей, комментариев на форумах
Сервис позволяет зарабатывать копирайтерам - платят за написание статей для сайтов, создание новых тем на форумах, написание к ним комментариев. Также можно зарабатывать на рерайте, копипасте и переводах текста. Отличный раскрученный сервис, множество работ...

 
Хостинг для «Drupal 8»
Разрабатывая новый сайт, как обычно выбрал «Drupal» (на момент написания статьи, наиболее новой стабильной версией является 8-я)
.


Если в общем, то считаю данный «движок» лучшим. Но, как вы знаете, документации на русском языке не так много, как хотелось бы, а в виду широких возможностей Друпал, её недостаток порой может создавать сложности веб-мастерам, недавно начавшим работать с данной системой, да и не только начинающим... Я, например, работаю с данной CMS уже более 8 лет, но при решении сложных задач иногда возникают трудности, так как не владею английским на должном уровне. Хотя, когда проблему удаётся решить, в очередной раз убеждаешься в том, насколько хорош и удобен «Drupal» в плане своих возможностей.

 
Выезжающая панель на «Mootools»
Данный урок мы посвятим созданию всплывающих панелей для сайта.


Нам потребуется
 малейшее представление о «Mootools» и, конечно же, знание CSS-стилей, необходимых для создания её дизайна.


Прежде чем начать, скачайте файл-архив с исходниками . Там же вы найдете пример получившейся панели (index.html).


Приступим к реализации...

 
Как заработать много денег в интернете - с помощью чего это можно сделать

 
Основы внутренней оптимизации сайтов под поисковые системы
Процесс оптимизации сайтов под поисковые системы разделяют на 2 этапа:


  1. Внутренняя оптимизациия
 - оптимизация внутренних факторов сайта (код, структура сайта, контент)
. Необходимо изначально делать свой сайт привлекательным для поисковых систем, чтобы не увеличивать себе объёмы работ по мере дальнейшего продвижения.
    2. 
 
  2. Внешняя оптимизация
 - улучшение позиций сайта за счёт внешних факторов (покупка ссылок, обмен и прочее)
.
    3. 

Сегодня хотелось бы отдельно поговорить о внутренней оптимизации
 и выделить основные моменты.


 
Как сделать скриншот экрана в Windows 7, 8, 10 или XP
Скриншот
 (ScreenShot)
 экрана - это функция, позволяющая быстро скопировать все, что отображается в данный момент на вашем мониторе. Фактически - это мгновенная фотография вашего монитора, автоматически сохраняемая (в основном в формате.png).


Быстрая съемка экрана может потребоваться в различных ситуациях. Например, при возникновении появлений сообщений об ошибке , что может существенно помочь мастеру, который будет выполнять ремонт, если вам необходимо составить инструкцию для пояснения работы в какой-либо программе или на определенном сайте, или же вы достигли определённых результатов в компьютерной игре и хотели бы сохранить их отображение на память.

 
Как сделать восстановление системы Windows 7, 8, 10 или XP
Самостоятельная установка программного обеспечения на ПК связанна с определенным риском, который может выражаться в повреждении правильности работы всей системы или же удалении некоторых полезных функций и настроек, которые были удобны для пользователя.


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


С этой целью в ОС «Windows» предусмотрена специальная функция для восстановления системы, которая позволяет создавать контрольные точки состояния Виндовс. Последние дают возможность восстановить программное обеспечение ПК до предыдущего состояния.


 / Учебник по Html.
Ступенька 8-ая.
 





Учебник по Html для чайников. Простейшие.

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

 Полужирный текст



 Наклонный текст (курсив)


Как видите, все просто. Можете их сами понатыкать в тексте, где
хочется, для пробы, а в примере я снова помучаю виртуального друга:

 


 

 

 
 




Мой первый шаг 









Здравствуйте, это
моя первая страница.





Добро пожаловать!
 :)




Я совсем недавно
начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции
тоже захотелось создать свою домашнюю страничку для моих новых
виртуальных друзей и знакомых, чтобы они могли посмотреть мои
фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую
книгу. А может и просто случайный посетитель вдруг захочет познакомится
со мной, и у меня появится
 еще один виртуальный друг? :)




 


 

 ()



Теперь
пара строк о моширинном шрифте. Что это такое за шрифт? Это
шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей
машинки. А тэг для него следующий: 

  моноширинный шрифт
 
В наш пример я его вводить не буду (сделайте это самостоятельно). 
Также моноширинным шрифтом отображается текст заключенный в тэг

:
 
 
текст (куча пробелов) текст 
 текст (куча пробелов) текст
 текст (куча пробелов) текст

У тэга 
Есть одна замечательная особенность: текст,
заключенный в него, выводится с точностью до пробела так, как вы его
набили в блокноте. Этот тэг вам может быть полезен, допустим, для
форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов: 

 
текст


 
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот
так-то:). Не бойтесь использовать различные комбинации тэгов,
экспериментируйте, но с умом:) 
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на
этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга :

  Подчеркнутый текст

 
Тэги  и  представляют текст
перечеркнутым шрифтом, можете использовать какой вам угодно из них,
принципиальной разницы между ними нет:

  Перечеркнутый
 

 Перечеркнутый  
Тэг  представляется крупным шрифтом, а
 малым шрифтом относительно основного текста: 

  Малый


Нормальный текст

 Большой  
Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний,
Sub - нижний. Где они могут пригодиться? Ну, например, при написании
какой-нибудь формулы - H 2 O (все, что мы выносим
со школьной скамьи:). 
Верхний индекс  sup


Нижний индекс  sub
 
Вот, собственно, и все. Можем переходить на следующую ступеньку.

Ступенька 1-ая.


Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\ 
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно.
Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:



 



Мой первый шаг 





Здравствуйте, это моя первая страница.
 

Добро пожаловать! :)



 ()



Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html 
Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html
", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

Файл -> Сохранить Как (File -> Save as)

- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).

- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save). 
Вот и все. Надеюсь, теперь у всех все будет в порядке.

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.

Файл - Открыть - кнопка Обзор - Наш документ (index.html) 

File – Open – Browse – index.html
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.