Урок HTML для самых маленьких

Июль 25, 2010   Александр Маврин   9 комментариев

Для тех, кто не знает, как делаются веб-страницы, объясню на простейших примерах.

Можете вместе со мной приступать к практике. А для начала немного теории. Содержимое страницы находится между тегами:

<body></body>

Полностью исходный код страницы выглядит так:

1
2
3
4
5
6
7
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Второй тег это заголовок, в который вносятся служебные теги стилей и прочие элементы:

<head></head>

Название, которое отображается при наведении курсора на вкладку в браузере.

<title>Название сайта или страницы</title>
<body>Основной контейнер всей страницы</body>

Итак, рассмотрим на примере. Откройте любой текстовой редактор, который у Вас есть. Подойдет простой блокнот. Если же ничего подходящего нет, то можно совершенно бесплатно скачать в интернете. Их там огромное множество. Например Notepad++. Его рекомендую.
Пишем в редакторе:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Этот заголовок отображается во вкладке браузера</title>
</head>
<body text="#336699" bgcolor="#CCFFFF">
<div align="center">
<h1>Добро пожаловать на мой сайт</h1>
<br />
Здесь располагается основной текст на странице сайта
</div>
</body>
</html>

Я добавил для наглядности еще несколько тегов, а именно:

<div align="center">-блок, располагающий содержимое по центру</div>
<h1>-Размер шрифта. Так, как это заголовок, я поставил более крупный.</h1>
<br />-Перенос на следующую строку. (не требует закрывающего тега)
text="#336699" bgcolor="#CCFFFF" - цвет текста и фона страницы. Если не указывать эти значения, по умолчанию будет черным по белому.

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

Вот собственно и все для первого раза. Посмотрите и сравните, должно выглядеть вот так
Если хотите дальше изучить язык HTML, рекомендую хороший учебник для новичков, написанный простыми словами. Его можно как СКАЧАТЬ, так и ЧИТАТЬ ОНЛАЙН.

Не стесняйтесь делиться записью в социальных сетях. Спасибо


9 комментариев
  1. Просто и доступно. Новичкам полезно будет почитать.

  2. Татьяна Колесникова:

    Спасибо большое за урок

  3. Нормально,но видео-аудио было бы лучше.
    Большое спасибо за материал!!!
    С УВАЖЕНИЕМ РИНАТ САЙФУТДИНОВ!

  4. Вячеслав:

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

  5. Тамара Владимировна:

    Спасибо за такие уроки- только скажите мне,пожалуйста, , совершенно далекой( «чайнику») как Вы пишите- с нуля- какую литературу читать, чтобы потом можно было осознанно читать все выше написанное…

    С уважением Тамара Владимировна.

  6. Начать можно как раз с этого учебника. А именно, с изучения основ HTML и CSS. И конечно практиковать. Без практики никуда. Ну и, как Вы понимаете, все это происходит медленно, как и любое другое обучение.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *