Первые шаги в коддинге. Или с чего начать изучение HTML. Первые Шаги - Учебник по Html для чайников Самый быстрый способ изучения html до высокого уровня – пошаговый план

Ступенька 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 документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

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 для чайников . Автор - Алленова Наталья

От автора:

"Я писала это руководство в расчете на людей начинающих, вспоминая, как когда-то начинала сама. Это не сухое изложение всего подряд, это попытка поработать на ассоциациях, сделать все более легко запоминающимся. Мне кое-где не удалось избежать нудных моментов, но я старалась и буду страться дополняя и исправляя все написанное время от времени. "

Простейшие.
4 - "Раскрась сам. Изменяем цвет текста".
5 - "Как изменять цвет фона страницы. Немного об этике цветов".
6 - "Параграфы и DIV. Учимся выравнивать текст".
7 - "Что такое заголовки и как задавать размер буковок".
8 - "Курсив, жирный текст, подчеркнутый и другие".
9 - "Стандартные шрифты. Как прописать свой шрифт".
10 - "Что такое путь? Как вставлять картинки".
11 - "Что можно сделать с картинкой. Картинка, как фон документа, и т.д.".
12 - "О любителе сосисок и принудительном прерывании обтекания текстом картинки".
13 - "Ссылка и как с нею бороться".
14 - "Ссылка на е-майл. Подсказка к текстовой ссылке".
15 - "Может ли картинка быть ссылкой".
16 - "Куда податься, на что ссылаться. Новое окно при нажатии на ссылку".
17 - "Карты. Как часть картинки сделать ссылкой".
18 - "Карты. Как часть картинки сделать ссылкой 2".
19 - "Карты. Как часть картинки сделать ссылкой 3".
20 - "Закладка. Как сделать ссылку внутри документа".

Таблицы.
21 - "Учимся создавать таблицы".
22 - "Учимся создавать таблицы" продолжение.
23 - "Таблицы, вертикальное выравнивание (valign)".
24 - "Таблицы, учимся растягивать ячейки (rowspan, colspan)".
24-2 - "Дополнительная глава. Ответы на домашнее задание".
25 - "Таблицы, что такое cellspacing и cellpadding. Что делать с пространством".
26 - "Вложенные таблицы и некоторые нюансы".
27 - "О рамках таблиц, и брюзжание о таблицах напоследок".
28 - "Создаем простой сайт с таблицами".

Дополнительные.
29 - "Спецсимволы, или головная боль".
30 - "О линиях. Просто и полезно".
31 - "Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight".
32 - "О списках. Неупорядоченные списки".
33 - "Упорядоченные списки. Ремарка: что такое спецификация и консорциум".
34 - "Cпецифические тэги, бегущая строка текста".

Фреймы.
35 - "Вступление. Зачем они (фреймы) нужны."
36 - "Учимся создавать фреймы".
37 - "Учимся создавать фреймы" продолжение.
38 - "Учимся создавать фреймы" продолжение.
39 - "Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма".
40 - "При нажатии на ссылку документ открывается в другом фрейме, в полное окно".
41 - "Последняя глава о фреймах. Что такое IFrame".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

()

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

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

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

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

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

У тэга

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

К одному фрагменту текста может применяться сразу несколько тэгов:

текст

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

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

Подчеркнутый текст вводится при помощи тэга :

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

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

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

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

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

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

Верхний индекс ^sup
Нижний индекс _sub

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

Учебник по Html для чайников. Простейшие.
Ступенька 13-ая.
Развлекательно-познавательный урок с любителем сосисок закончен, и мы переходим к следующему уроку, в котором мы поговорим о ссылках.
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.
При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.
Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.
Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:
посмотреть мои фотографии
(1) - мои фотографии
(2) - мои фотографии
(3) - мои фотографии
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в . В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.

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

text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

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

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

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

А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)

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

Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

()

Как видите, ничего сложного.
Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга и его атрибута color:
посмотреть мои фотографии
Обратите внимание, - прописывается внутри тэга , если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.