Урок 4: Создайте свой первый сайтrustutorial
После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.
Как?
В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа — текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.
Также откройте Notepad (в Accessories в Programs — Start menu):
Теперь мы готовы!
Что я могу?
Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: «Ура! Это моя первая web-страница.» Читайте дальше, и вы узнаете, как это легко сделать.
HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.
Во-первых необходимо сообщить браузеру, что вы будете «говорить» с ним на
языке HTML. Это делается тэгом <html> (тут ничего нового).
Так что, прежде чем напечатать что-либо, нужно поставить тэг «<html>»
в первой строке документа Notepad.
Как вы, возможно, помните из предыдущего урока, <html> это
открывающий тэг, который должен иметь и закрывающий тэг после того, как вы
закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг «</html>»
на пару строк ниже и вводите весь текст документа между <html> и </html>.
Следующее, что необходимо, это «head» (голова или «шапка»), которая содержит
служебную информацию о вашем документе, и «body» (тело), содержимое самого
документа. Поскольку HTML логичен, head (<head> и </head>)
находятся выше body (<body>
</body>).Ваш документ теперь должен выглядеть так:
<html>
<head>
</head>
<body>
</body>
</html>
Обратите внимание, как мы структурировали тэги по строкам (с помощью клавиши Enter) и какие сделали отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, настоятельно рекомендуем структурировать ваш HTML с помощью перевода строк и отступов, как в нашем примере.
Вот вы уже и сделали вашу первую web-страницу — первенца, который, возможно, выглядит не так, как вы предполагали, когда начинали читать этот учебник, но это уже, в некотором роде, web-сайт. Вы создали базовый шаблон для всех последующих HTML-документ.
Ну ладно, но как мне добавить содержимое в мой web-сайт?
Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head
Например, если вы хотите дать название документу, чтобы оно появлялось в
верхней строке браузера, это нужно сделать в разделе «head». Тэг для названия — <title>:
<title>Моя первая web-страница</title>
Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами «body».
Итак, мы хотим, чтобы на странице выводилось «Ура! Это моя первая страница.» Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:
<p>Ура! Это моя первая страница.</p>
Буква p в <p> это сокращение от «paragraph» и означает
именно это — параграф текста.
Ваш HTML-документ должен теперь иметь такой вид:
<html>
<head>
<title>My first page </title>
</head>
<body>
<p>Hurrah! This is my first page.</p>
</body>
</html>
Готово! Вы создали свой первый настоящий web-сайт!
Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:
- В Notepad выберите «Save as…» в меню «File».
- Выберите «All Files» в боксе «Save as type». Это очень важно — иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
- Теперь сохраните ваш документ как «page1.htm» (расширение «.htm» указывает, что это HTML-документ. «.html» даст тот же результат. Я всегда использую «.htm», но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске — не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.
Теперь откроем браузер:
- Выберите «Open» в меню «File» (CTRL+O).
- Щёлкните «Browse» в появившемся диалоге.
- Теперь найдите ваш HTML-документ и щёлкните «Open».
Теперь вы должны увидеть страницу с текстом «Ура! Это моя первая страница.» в вашем браузере. Поздравляем!
Если вы хотите, чтобы весь мир увидел ваше творение, можете перейти в Урок 14 и вы узнаете, как выгрузить вашу страницу в Internet. Или наберитесь терпения и читайте дальше. Всё ещё только начинается.
<< Урок 3: Что такое HTML-тэги?
Урок 5: Что мы уже знаем? >>
Урок 2: Что такое HTML?rustutorial
В этом уроке мы представим вам вашего нового знакомого — HTML.
Что такое HTML?
HTML это «родной язык» вашего браузера (программы просмотра вэб-страниц).
Говоря кратко, HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.
HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните «View» в линейке меню вашего браузера и выберите «Source».
Для неискушённого HTML-код выглядит сложным, но этот учебник поможет вам разобраться в нём.
Для чего я могу использовать HTML?
Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML легко изучать и использовать. Через два урока вы уже создадите ваш первый web-сайт.
HTML используется для создания web-сайтов. И это очень просто!
Okay, но как расшифровывается H-T-M-L?
HTML это сокращение от «HyperText Mark-up Language/язык гипертекстовой разметки» — и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.
- Hyper противоположно linear/построчно. В добрые старые времена — когда кошки ловили мышей — компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному — вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.
- Text — всё понятно.
- Mark-up — это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.
- Language это язык — HTML. В нём используется много английских слов.
В данном учебнике вы будете изучать так называемы XHTML (Extensible HyperText Mark-up Language), который, коротко говоря, является новым и более структурированным вариантом HTML.
Если вы поняли, что такое HTML (и XHTML), давайте перейдём к тому, для чего они оба предназначены: к созданию web-сайтов.
<< Урок 1: Начнём
Урок 3: Что такое HTML-тэги? >>
Урок 1: Начнёмrustutorial — HTML.net
В этом первом уроке мы кратко представим вам утилиты, которые нужны для создания web-сайта.
Что же необходимо иметь?
Вероятнее всего у вас уже всё необходимое.
У вас есть «браузер/browser». Это программа просмотра web-страниц. Сейчас вы просматриваете данную страницу в вашем браузере.
Не важно, какой браузер у вас имеется. Обычно это Microsoft Internet Explorer. Но есть и другие — Opera и Mozilla Firefox, и их также можно использовать.
Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Macromedia Dreamweaver или даже Microsoft Word, которые могут — или заявляют что могут — создавать web-сайты для вас. Пока что забудьте об этих программах! Они не научат вас тому, как кодировать web-сайт.
Вам нужен простой текстовый редактор. Если вы используете Windows, то в ней есть Notepad, который обычно находится в меню Старт, Программы, Стандартные:
Если вы используете не Windows, то можете выбрать аналогичный простой текстовый редактор. Например, Pico (Linux) или TextEdit (Mac).
Notepad прекрасно подходит для создания кода, поскольку никак не влияет на то, что вы пишете. Это даёт вам полный контроль над текстом. Проблема многих навороченных программ в том, что в них много стандартных функций, из которых вы можете выбирать необходимые. Обратной стороной этого является то, что всё подгоняется под эти стандартные функции. Поэтому такие программы часто не в состоянии создать точно такой сайт, какой необходим вам. Или что ещё хуже, они начинают изменять написанный вами код. При использовании Notepad или иного простого текстового редактора только вы отвечаете за то, что написано.
Браузер и Notepad (или аналогичный простой редактор) — вот всё, что вам необходимо для работы с данным учебником и создания своих web-сайтов.
Нужно ли мне быть в сети online?
Вам не обязательно иметь соединение с Internet — ни для чтения учебника, ни для создания ваших web-сайтов.
Вы можете даже распечатать этот учебник, или просто отключиться от Internet. Вы можете делать web-сайт на жёстком диске вашего компьютера и выгружать его в Internet после окончания работы.
Что дальше?
Переходите к следующему уроку и прочтите о HTML, прежде чем реально начать его изучение в Уроке 3.
<< Введение
Урок 2: Что такое HTML? >>
Урок 3: Что такое HTML-тэги?rustutorial
Теперь вы готовы начать изучение HTML-тэгов.
«Тэги»?
Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком sign «>».
Обычно имеются два тэга — открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш «/».
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
Н, как говорится, из каждого правила есть исключения, и в HTML также имеются
тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат
текста, а являются метками, например, перенос строки выглядит так: <br />.
HTML — это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.
Можете вы привести какие-нибудь примеры?
Okay, тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. («b» это
сокращение для «bold».)
Пример 1:
<b>This text must be bold.</b>
будет выглядеть при просмотре в браузере:
This text must be bold.Тэги <h2>, <h3>, <h4>, <h5>, <h5> и <h6> указывают браузеру создавать заголовки (h для «heading»),
где <h2> это заголовок первого уровня — самый крупный шрифт, <h3> — заголовок второго уровня — шрифт меньшего размера, и <h6> —
заголовок шестого уровня — самого низкого в этой иерархии, и самый маленький
шрифт.
Пример 2:
<h2>Это заголовок</h2>
<h3>Это подзаголовок</h3>
будет выглядеть в браузере:
Это подзаголовок
В каком регистре должны вводиться буквы тэгов?
Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.
Где размещать все эти тэги?
Вы печатаете ваши тэги в HTML-документе. На web-сайте имеется один или более HTML-документов. Когда вы бродите по Web, вы открываете различные HTML-документы.
Если вы перейдёте к следующему уроку, то уже через 10 минут сможете создать свой первый web-сайт.
<< Урок 2: Что такое HTML?
Урок 4: Создайте свой первый сайт >>
Урок 5: Что мы уже знаем?rustutorial
Всегда начинайте работу с базового шаблона, который мы создали на предыдущем уроке:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
В разделе head всегда пишите: <title>Название вашей
страницы</title>. Обратите внимание, что title выводится в
строке заголовка окна браузера:
Этот title очень важен, поскольку используется поисковыми машинами (такими, как Google) для индексирования вашего web-сайта и показа в результатах поиска.
В разделе body вы записываете содержимое страницы. Теперь вы уже знаете несколько важных тэгов:
<p>Параграф.</p>
<b>Текст жирным шрифтом.</b>
<h2>Заголовок</h2>
<h3>Подзаголовок</h3>
<h4>Под-подзаголовок</h4>
Запомните: единственный метод выучить HTML — метод проб и ошибок. Но не сомневайтесь, вы никогда не сможете повредить компьютер или Internet. Поэтому экспериментируйте — это лучший способ набраться опыта.
Что это означает?
Никто не сможет стать хорошим создателем web-сайтов, изучая примеры в этом учебнике. Здесь вы лишь научитесь понимать основные строительные блоки — чтобы освоить всё, вы должны использовать эти блоки по-новому и творчески.
Итак, вы смело нырнули в омут с головой, крепко стоите на ногах… Okay, может быть и нет. Но беритесь за дело и экспериментируйте с тем материалом, который изучаете.
И что теперь?
Попытайтесь самостоятельно создать несколько страниц. Например, сделайте страницу с title, heading, текстом, подзаголовком и ещё каким-нибудь текстом. Неплохо подглядывать в учебник, когда вы делаете первые страницы. Но впоследствии пытайтесь делать уже по памяти, не заглядывая в справочники.
<< Урок 4: Создайте свой первый сайт
Урок 6: Ещё немного HTML-тэгов >>
Урок 13: Публикация страницrustutorial — HTML.net
До сих пор только вы имели возможность наслаждаться просмотром ваших страниц. Теперь пришло время и всем остальным оценить ваши произведения.
Готов ли мир к этому?
Мир готов — скоро и вы тоже будете готовы. Для показа вашего web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.
Если у вас есть доступ в Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так — http://home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.
Другая возможность получить некоторое пространство в Internet — настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них — 000webhost.com (щёлкните «Order» и выберите free membership) — регистрация займёт всего несколько минут.
Для доступа на сервер вам необходимо знать «Host Name» (Например, ftp.htmlnet.site50.net) и иметь своё username и password.
Это всё, что мне нужно?
Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP. Возможно, у вас её ещё нет, но можно загрузить её бесплатно.
Имеется множество FTP-программ. Одна из лучших — FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.
А как выгружать страницы?
Ниже мы даём описание того, как выгружать страницы на бесплатную учётную запись/account на 000webhost.com с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.
Откройте FTP-программу после того, как подключитесь к Internet. Вставьте «Host Name» («ftp.htmlnet.site50.net» ниже «Address»), имя пользователя (ниже «User») и пароль (ниже «Password») и щёлкните «Connect». У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера («Local Site»), а в другой — содержимое сервера («Remote Site»):
Найдите ваши HTML-документы и изображения на вашем компьютере (в «Local site») и перешлите их на сервер («Remote site») дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http://htmlnet.site50.net/page1.htm).
Назовите одну из страниц «index.htm» (или «index.html»), и она автоматически станет стартовой страницей. т. е., если вы введёте http://htmlnet.site50.net (без указания имени файла), откроется http://htmlnet.site50.net/index.htm.
Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса. Можете купить домен, к примеру, на Speednames или NetworkSolutions.
<< Урок 12: Внешний вид (CSS)
Урок 14: Web-стандарты и проверка >>