HTML первые шаги — простая инструкция для начала изучения
Приветствую вас, дорогие читатели! Сегодня мы поговорим о «языке гипертекстовой разметки». Почему его должен знать каждый дизайнер, и как сделать в html первые шаги. Если дизайнер не знает иностранных языков, это не самое страшное. Самое страшное, когда он не владеет даже базовыми знаниями html. В таком случае он рискует навсегда остаться «иностранцем» в веб-индустрии.
Язык важен
Вы разговариваете? Представьте себе, ваш браузер тоже!
Часто ли вы сталкивались с тем, что дизайн сайта продуман до мелочей, но в итоге результат оставляет желать лучшего? Это значит, что вы и ваш браузер говорите на разных языках. Когда с подобным сталкивается дизайнер, он начинает четко осознавать: сайт – это не набор красивых шрифтов, плашек и картинок.
Качественный ресурс – это прежде всего, грамотный код. А чтобы разбираться в нём, необходимо его изучить. Существует много толковых учебников, которые помогут новичку разобраться в html, книги научат читать чужой код и писать свой с нуля.
Все мы знаем, что учиться чему-то новому проще сразу на практике. Специально для новичков был разработан бесплатный онлайн‑курс «Базовый HTML и CSS». Источник поможет понять основы вёрстки, ее законы, особенности и свойства кода.
Вам не придётся читать тонны занудной литературы для программистов, или идти получать высшее образование по профилю. Интерактивность курса позволяет сразу закреплять навыки, увидеть полученный результат, а наставник поможет, если возникнут трудности.
Кстати о проблемах. У новичков часто возникают ошибки в написании кода. Тут важно помнить, что учитывается всё: пробелы, точки и запятые. Лишний знак или отсутствие оного приведут к некорректному отображению информации. А потому следить за этим нужно очень внимательно.
Главное — практика
Самое приятное, что для создания сайта, вам не потребуется сложное программное обеспечение. Можно просто обойтись блокнотом. Открываем блокнот и пишем в нём:
<html> <head> <title>Моя первая страничка</title> </head> <body> Hello World! <br> Меня зовут (имя), это моя первая страничка! </body> </html> |
<html> <head> <title>Моя первая страничка</title> </head> <body> Hello World! <br> Меня зовут (имя), это моя первая страничка! </body> </html>
Затем, сохраните всё написанное как html документ, важно, чтобы расширение было html. Как это сделать? В документе нажимаете «файл», затем «сохранить как», в поле «имя файла» задаём: index.html. После всех этих операций остаётся сделать самое интересное! Правой клавишей жмём по нашему документу, открываем любым браузером.
Вуаля! Вы написали страничку, и это только начало!
Как вы видите, код отвечает за содержимое страницы. Другими словами – за вёрстку. Как правило, за дизайн ресурса отвечает один человек, за вёрстку – другой. Но золотой серединой является то, когда один человек умеет верстать и отрисовывать картинку.
Это помогает избежать недопонимания между двумя людьми, в итоге получить тот продукт, который задумывался дизайнером.
Как и где учиться
У многих количество тегов и просто их название вызывают ужас. Словно ты попал в страну, где говорят на незнакомом языке. Без словаря не обойтись, а точнее без учебника для чайников. Курсы – это конечно хорошо, но без книги, в которой все расписано, и куда можно заглянуть в любой момент, просто не обойтись. Учебник можно скачать, а можно изучать онлайн.
Практика показывает, что онлайн-версия имеет ряд плюсов и минусов. Минус состоит в том, что для доступа к материалу, вам не обойтись без интернета. А плюсом будет в то, что онлайн-издания часто обновляют. В них можно найти всю актуальную информацию на сегодняшний день.
Алленова Наталья Вячеславовна написала толковую, подробную книгу по html (смотреть). Структура издания позволяет двигаться постепенно, осваивая более сложные алгоритмы, основанные на простых элементах. Теория и практика приятно сочетаются и дополняют друг друга.
Здесь вы найдете ответы на конкретные вопросы: как создавать формы? Как выстраивать таблицы? Как вставить картинку? Никаких абстрактных рассуждений на тему пойди туда, не знаю куда. Многие учебники в этом проигрывают, с ними вы либо теоретик, либо практик, у которого ничего не работает. Согласитесь, это не самые радужные перспективы.
Конечно, для создания сайта, придётся изучить теги более подробно. С этим, проблем возникнуть не должно, всемирная сеть предлагает огромное количество источников справочников html. Плюсы таких справочников в том, что в поисковой строке сайта можно вписать тег, узнать его значение, как и где он применяется. Иными словами – это эдакий интерактивный словарь.
Каждому, кто хочет сделать сайт самостоятельно, не обойтись одними познаниями html. Придется освоить и CSS, но это уже совсем другая история. Если после создания первой странички, вы захотите соорудить полноценный сайт, то рекомендую подписаться на мои обновления. Здесь вы сможете найти много полезной информации, которая поможет разобраться в веб-индустрии.
До новых встреч!
Ступенька 1-ая. Первые шаги в HTML
Ступенька 1-ая.
Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
Сохраним этот документ, присвоив ему имя *.html
D:\первые шаги\index.html
Многие читатели спотыкаются на фразе: «
Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:
— Файл -> Сохранить Как (File -> Save as)
— Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
— Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).
Вот и все. Надеюсь, теперь у всех все будет в порядке.
Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.
Файл — Открыть — кнопка Обзор — Наш документ (index.html)
File – Open – Browse – index.html
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Посмотрим теперь, что у нас получилось, и разберемся, как оно так получилось 🙂
Далее: Ступенька 2-ая >>>
Учебник по Html для чайников. Простейшие.Ступенька 7-ая.В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>. Начнем с заголовков. Существуют шесть уровней заголовков: <h3> текст </h3><h4> текст </h4><h5> текст </h5><H5> текст </H5><H6> текст </H6>Итак, h2 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта: <font size=»+4″> текст </font> <font size=»+0″> текст </font> <font size=»-1″> текст </font> <font size=»-2″> текст </font> Как всегда, применяем новые знания на практике. Давайте, выделим, что мы горим желанием завести еще одного виртуального друга.
Жалейте глаза своих посетителей, и они к вам потянутся. Фух:) топаем дальше. |
Первые Шаги — Учебник по Html для чайников — Программирование — Источники — Каталог файлов
Разные форматы учебника:
HTML страниц
Все шаги отдельно
Первые страницы учебника:
Учебник по Html для чайников. Инструментарий.
Ступенька 1-ая.Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
Сохраним этот документ, присвоив ему имя *.html
D:\первые шаги\index.html
Многие читатели спотыкаются на фразе: «А теперь сохраним этот документ, присвоив ему имя *.html«, они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html — никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.
Ступенька 8-ая.
После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. В этой главе мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:
| <html> <head> <title>Мой первый шаг </title> </head> <body text=»#336699″ bgcolor=»#000000″> <div align=»center»> <h4>Здравствуйте, это моя первая страница.</h4> <br> <font color=»#CC0000″> Добро пожаловать!</font> 🙂 </div> <p align=»justify»> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? 🙂</b> </p> </body> </html> (посмотреть) |
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
<tt> моноширинный шрифт </tt>
В наш пример я его вводить не буду (сделайте это самостоятельно).
Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:
<pre> текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текст </pre>У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов:
<tt><b><i> текст </i></b></tt>
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга <u>:
<u> Подчеркнутый текст </u>
Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Тэги Sup и Sub — определяют верхний и нижний индексы. Sup — верхний, Sub — нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы — H2O (все, что мы выносим со школьной скамьи:).
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </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:
<a href=»prf.html»>посмотреть мои фотографии</a>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:
(1) — <a href=»prf.html»>мои фотографии</a>
(2) — <a href=»photos/prf.html»>мои фотографии</a>
(3) — <a href=»http://www.homepage.ru/prf.html»>мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае — http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link — цвет просто ссылки, alink — цвет активной ссылки (нажатой), vlink — цвет уже посещенной ссылки.
<body text=»#336699″ bgcolor=»#000000″ link=»#339999″ alink=»#339999″ vlink=»#339999″>
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной — одинаковые, но они могут быть разными – это на ваше усмотрение.
Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
Как видите, ничего сложного.Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color=»…»></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<a href=»prf.html»><font color=»#CC0000″>посмотреть мои фотографии</font></a>
Обратите внимание, <font color=»…»></font> — прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 10-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 10-ая.Сядем, отдохнем, поговорим о планах на будущее: как рисовать, как пользоваться графическими редакторами в этом учебнике я вас учить не буду, т.к. это не относится к теме, которую мы изучаем. Так что если вы хотите изучить графические редакторы, чтобы самим создавать изображения для своего сайта, то в этом вам поможет специальный раздел на нашем сайте — Графика.
Пока мы все еще сидим, я себе позволю немного почитать вам, мой читатель, нравоучения. Запомните, страница (сайт) не должна представлять собой супер графического изыска, который весит сотни килобайт, т.к. это жестоко, и ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой вы сейчас тщательно изучаете, весит в картинках не более 70 килобайт (это общий вес всех картинок, а не вес каждой), что вполне допустимо, и не слишком тяжело.
Также я посоветую не изощряться с анимированными картинками: они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее – нелепо. Постарайтесь также создавать свои картинки для своего сайта, а не собирать их по бесплатным коллекциям с графикой, пусть ваш сайт будет уникальным.
Теперь я с чистой совестью поведаю вам, как вставлять картинки в документ:
<img src=»my.jpg»>
Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками — ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
<img src=»my/my.jpg»>
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src=»../my.jpg»>
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src=»http://www.homepage.ru/my/my.jpg»>
Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.
Если у вас нет на данный момент картинки, то сохраните сохраните эту (primtocodephoto.gif) у себя в папке с нашей страничкой. В нашем примере я использую именно ее (кстати, запомните, тэг img не требует закрывающего тэга).
Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.
Первые шаги — Учебник (руководство) по хтмл (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:
<a href=»prf.html»>посмотреть мои фотографии</a>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:
(1) — <a href=»prf.html»>мои фотографии</a>
(2) — <a href=»photos/prf.html»>мои фотографии</a>
(3) — <a href=»http://www.homepage.ru/prf.html»>мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае — http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link — цвет просто ссылки, alink — цвет активной ссылки (нажатой), vlink — цвет уже посещенной ссылки.
<body text=»#336699″ bgcolor=»#000000″ link=»#339999″ alink=»#339999″ vlink=»#339999″>
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной — одинаковые, но они могут быть разными – это на ваше усмотрение.
Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
Как видите, ничего сложного.Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color=»…»></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<a href=»prf.html»><font color=»#CC0000″>посмотреть мои фотографии</font></a>
Обратите внимание, <font color=»…»></font> — прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.