Безумная Aza (merengue) wrote,
Безумная Aza
merengue

Урок 1. Введение в HTML. Инструментарий вебмастера

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

А вы, мальчики и девочки, не только веб-серферы, но по совместительству еще и блоггеры (то есть ведущие собственный сетевой журнал). Во-первых, вам не надо объяснять, как устроен интернет, а во-вторых, вы уже располагаете пространством для применения полученных знаний, и это пространство – ваш личный ЖЖ.


ВВЕДЕНИЕ В HTML. НЕ ТАК СТРАШЕН ЧЕРТ, КАК ЕГО МАЛЮЮТ


Итак, не откладывая в долгий ящик, начинаем изучать премудрости создания сайтов. Основа всех основ веба – это документ, написанный на языке HTML, что расшифровывается как HyperText Markup Language, или язык разметки гипертекста. Но не пугайтесь слова «язык», это не язык программирования, а всего лишь вставление в текст специальных меток, или тэгов (от англ. tag), которые ваш браузер (сомневаюсь, что кто-либо может не знать, что такое браузер, но на всякий случай поясню – это программа, которой вы просматриваете веб-странички) отображает в соответствии со стандартами, которые в него заложили разработчики.

Думаю, что каждому из вас уже не один раз довелось размечать текст в текстовом редакторе, например, в Word'е. Разбиение текста на абзацы, выделение заголовков, написание отдельных слов жирным шрифтом или курсивом – все это и есть разметка текста для его большей читабельности или просто ради украшения. Нажимая на кнопочку, например, Ж, вы отмечали, где должен начаться и где – закончиться жирненький шрифт. Эти метки вписываются в документ, но пользователю не отображаются: мы видим изменение начертания шрифта, а метки – нет.

В HTML мы тоже расставляем метки (тэги), которые указывают браузеру, как отображать каждый элемент страницы. HTML-тэги заключаются в угловые скобки: <тэг>. Регистр, в котором набрано имя тэга, в HTML значения не имеет: запись тэга как <B> и как <b> абсолютно равнозначна.

Большинство тэгов – парные, то есть, обозначают начало и конец разметки. Такие тэги называются тэгами-контейнерами – они могут содержать другие тэги. Закрывающий тэг обозначается как </тэг>. И вот примеры:

  • Тэги-контейнеры: <b> (bold, жирный шрифт), <i> (italic, курсив), <s> (strike, перечеркнутый текст):
    Напишем следующие слова <b>жирным шрифтом</b>.
    А это слово выделим <i>курсивом</i>.
    А все, что мы напишем дальше, мы <s>старательно зачеркнем</s>.

    (Чтобы посмотреть, как этот код отобразится в браузере, скопируйте его в поле комментария и нажмите на «Просмотр» - он еще может скрываться под кнопкой «Больше возможностей». Отправлять комментарий не надо! Просто посмотрите.)


  • А вот пример одиночного тэга, не контейнера:
    <hr>

    (HR обозначает horizontal rule, горизонтальную линию).


Открывающие тэги обычно содержат еще и атрибуты, значениями которых определяется отображение элемента. Рассмотрим это на примере тэга <img> (image, картинка):
<img src="http://stat.livejournal.com/img/goat-hover.gif" width="110" height="101" border="0">

img – сам тэг;
src (source, источник), width (ширина), height (высота), border (ширина рамки) – атрибуты тэга img;
То, что заключено между кавычками – значения атрибутов.

У тэга img атрибут src является обязательным. Ведь браузер не сможет отобразить картинку, если не будет знать, откуда ее взять, не так ли? Остальные атрибуты необязательны, но часто ими и определяется внешний вид элемента. Значения атрибутов width, height, border в примере указаны в пикселях, но могут быть также в процентах или в других единицах измерения.

Тэг img – одиночный, не контейнер. Поэтому у него нет закрывающего тэга.

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



ИНСТРУМЕНТАРИЙ ВЕБМАСТЕРА


  1. Браузеры
    Не все йогурты одинаково полезны… тьфу, не во всех браузерах код страниц может отображаться так, как написан. Мы как порядочные вебмастера должны писать кроссбраузерный код, то есть стремиться к тому, чтобы наша страничка смотрелась наиболее корректно и по возможности одинаково в любом браузере. А то глянем, бывало, в Internet Explorer'е да в Firefox – все отлично, а в Опере все элементы разъехались в разные стороны, и половину текста не видать. Так что установите в дополнение к вашему IE Mozilla/Firefox и Opera (их можно скачать, пройдя по ссылочкам).


  2. HTML-редакторы
    Редакторов, создающих документы формата HTML – великое множество. Даже Word умеет сохранять в *.html. Но поверьте мне, поднаторев в HTML и увидев, как это делает Word, вы не захотите создавать в нем html-файлы ни-ког-да. Так вот, html-редакторы делятся на два, нет, на три вида. Одни называются визуальными, или WYSIWYG-редакторами (What You See Is What You Get – что ты видишь, то и получишь): в них мы работаем так же, как и в Word: нажали на кнопочку – получили жирненький, или курсив, или картинку вставили, а самих тэгов нам и не видно. Другие редакторы называют текстовыми – в них мы пишем все тэги вручную и видим всю разметку в «текстовом» виде. И есть редакторы, совмещающие в себе и визуальный, и текстовый.

    Мы, как всегда, выберем путь тернистый, но верный. Мы будем писать наш код в текстовом редакторе. Подойдет даже Notepad (Блокнот) – только не будем забывать сохранять файл не в *.txt, а в *.html. Но это на самый крайний случай, а лучше все-таки пользоваться специализированными редакторами, в которых есть и разметка тэгов цветом, чтобы в них не запутаться, и сами библиотеки тэгов на все случаи жизни – ведь не будем мы все вручную набирать, не так ли? Выбирайте тот, который больше понравится:

    Aditor (текстовый, с подсветкой тэгов);
    Mozilla Nvu (визуально-текстовый, с предпросмотром);
    Evrsoft 1st Page (текстовый, с предпросмотром).


  3. Справочная литература
    Для изучения HTML лучше всего брать не учебник, а справочник – там вы найдете и описания тэгов, и все их атрибуты, и примеры того, как они работают. Рекомендую онлайн-справочник, написанный хорошим человеческим языком: HTMLbook.ru.

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


  4. Графические редакторы
    Они нам понадобятся для подготовки изображений для веба. Запомните одно простое правило:
    !!!
    Масштабирование картинки с помощью атрибутов width и height тэга img очень часто приводит к сильной потере качества изображения. Поэтому картинку на вашу страничку следует по возможности всегда выкладывать в оригинальном размере. Если она больше или меньше, чем нужно, следует привести ее к необходимому размеру с помощью графического редактора.

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


  5. Веб-сервер
    Веб-сервер – это компьютер, на котором запущена программа, которая называется – угадайте с трех раз! – веб-сервер. Если ваши файлы лежат на вашем обыкновенном компьютере, их никто, кроме вас, не увидит. А если они на веб-сервере, то их могут видеть и другие пользователи интернета. О том, какие бывают веб-серверы, мы поговорим в другой раз, к тому же, для изучения HTML можно обойтись и без них – вашим браузером вы можете открывать файлы с вашего локального диска.

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



Прошу оставлять отзывы, пожелания, добавления и уточнения.
Tags: сайтостроение
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 51 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →