Главная Веб-программинг HTML


Создаем свою первую Веб-страничку

 Печать E-mail
Автор Administrator   
22.11.2008 г.

Рейтинг 2.8/5 (18 голосов)

Моя первая Веб-страничкаСоздать простенькую Веб-страничку достаточно легко. Для этого необходимо знать лишь HTML и ничего более. Это займет у вас 1-2 минуты, и вы поймете, как можно быстро написать Веб-страницу используя Блокнот. Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.

Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.

Также откройте Блокнот (в меню "Пуск" - "Стандартные программы"):

Открываем блокнот

Теперь мы готовы!

Что я могу?

Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая 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 вы вносите информацию о странице, а body содержит информацию самой страницы.

Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия - <title>:

            <title>Моя первая web-страница</title>

Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".

Итак, мы хотим, чтобы на странице выводилось "Ура! Это моя первая страница." Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:

            <p>Ура! Это моя первая страница.</p>

Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.

Ваш HTML-документ должен теперь иметь такой вид:

           <html> 
             <head>  
               <title>Моя первая web-страница</title>      
             </head>       
            <body>    
              <p>Ура! Это моя первая страница.</p>       
            </body>           
           </html>

Готово! Вы создали свой первый настоящий web-сайт!

Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:

  • В Notepad выберите "Save as..." в меню "File".
  • Выберите "All Files" в боксе "Save as type". Это очень важно - иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
  • Теперь сохраните ваш документ как "page1.htm" (расширение ".htm" указывает, что это HTML-документ. ".html" даст тот же результат. Я всегда использую ".htm", но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске - не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.

Сохранить Веб-страничку

Теперь откроем браузер:

  • Выберите "Open" в меню "File".
  • Щёлкните "Browse" в появившемся диалоге.
  • Теперь найдите ваш HTML-документ и щёлкните "Open".

Открыть документ

Теперь вы должны увидеть страницу с текстом "Ура! Это моя первая страница." в вашем браузере. Поздравляем!

www.html.net
 

 

Похожие темы

 

Комментарии  

 
#1 lukutov.dmitry 2010-02-08 22:50 мне понравилось только я не понял как сохронять Цитировать
 
 
#2 Яночка 2010-05-19 19:50 Я тож не поняла как сохранять) Цитировать
 
 
#3 Димка 2010-12-10 19:50 чё тут понимать-то, мне всего лишь 7 лет, а я и то понимаю, тип файла выбераете все файлы, а сам файл сохраняете своё имя.htm или html, короч должно быть это расширение и всё, открываете файл и он открываеться в Internet Explorer и всё! чё тут не понятного-то?! Цитировать
 
 
#4 Анюта 2011-04-19 14:29 Цитирую Димка:
чё тут понимать-то, мне всего лишь 7 лет, а я и то понимаю, тип файла выбераете все файлы, а сам файл сохраняете своё имя.htm или html, короч должно быть это расширение и всё, открываете файл и он открываеться в Internet Explorer и всё! чё тут не понятного-то?!

Мальчику 7 лет, а он чёто понял! не, я поняла конечно тоже, но меня прикалывает сам факт. Только одно НО. Не у всех стоит Internet Exploter, а так мальчик юный програмист Цитировать
 
 
#5 Анюта 2011-04-19 14:33 Ну и хочу сказать пару слов. В общем написано понятным языком и без всяких приколов, как некоторые. Сайт создали нормальные люди, а не то, что некоторые. И если вы подумали, что так можно создать социальную сеть (типа Вконтакте или Одноклассники), то вы глубоко ошибаетесь. Короче сайт и админы нормальные Цитировать
 
 
#6 Алиюшка 2011-05-16 17:38 Люди легкче купить книгу 8 класса и в конце написаны все теги для создания веб-страницы…сама оттуда начинала… а если у вас нет возможности купить эту книгу то пишите мне в личку вконтакте http://vkontakte.ru/id_jabbawockees_crew
я вам скину все теги для начинающих (Хакер новичок) Цитировать
 

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

Вы можете добавлять комментарии, относящиеся к данной теме. Регистрироваться при этом необязательно.


Защитный код
Обновить

Rambler's Top100