Уроки HTML - Первая страничка (Урок 3)

Всем Hello World! В этом уроке вы напишите свою первую страничку и посмотрите на неё в действии.

Поехали!

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

Однако даже разобравшиеся в этом, навернека незнают еще как зделать чтобы документ отображался в браузере.

Помните речь шла о <!DOCTYPE>, так вот, сейчас он нам не понадобится, можете его либо упустить либо просто записать строчку: <!DOCTYPE>

Итак давайте создадим на рабочем столе папку с названием mySite, в принципе название может быть любое, главное чтобы в пределах разумного и чтобы было понятно что это за папка. Дальше в этой папке создадим файл index.html и откроем его в текстовом редакторе. В первом уроке (Введение в HTML) я вам советовал замечательный Notepad++ (я им сам пользуюсь), но естевственно выбор остается за вами. И еще одно среди вашего выбора не должно быть никаких IDE (Интегрированая Среда Разработки). Да, они упрощают жизнь, но надо учиться всё своими руками :)

Вернёмся к уроку, мы создали папку в которой будет размещаться наш сайт, если у вас операционная система Windows 7 или 8, то откройте наш любимый ттекстовый редактор Notepad и создайте в нём новый файл, дальше в меню выберите пункт "Файл" и нажмите "Сохранить как..."


найдите ранее созданую на рабочем столе папку


введите имя файла - index.html и нажмите сохранить

Всё, первая страница вашего сайта создана! Теперь нужно её наполнить содержимым.

В прошлом уроке мы разсматривали основные елементы необходимые для создания странички, одкако страничка будет работать и без самых основных елементов: html, head, body, есть даже такая необходимость когда ненужно использовать эти элементы, она возникает когда вы хотите собрать целую страницу по частям, фрагментам, чтобы было легче работать и отдельно для каждого фрагмента подключать собственные модули.

Это очень полезная схема разработки веб-сайта, она экономит время, например когда у вас есть меню которое вы хотите использовать на всех страницах своего сайта, в таком случае нет надобности писать или вставлять код меню в каждую страницу, здесь вы ограничитесь всего одной строчкой кода, но этот трюк мы будем разсматривать в Уроках по PHP, а сейчас давайте создадим нашу первую страничку.

Начнём: откройте ранее сохраненный файл в папке вашего сайта.

Вставьте туда следующий код:

<html>   <head>     <title>Моя первая страничка!</title>     <meta charset="utf-8" />     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   </head> <body align="center">   <h1>Hello World!</h1>   <h2>Hello World!</h2>   <h3>Hello World!</h3>   <h4>Hello World!</h4>   <h5>Hello World!</h5>   <h6>Hello World!</h6>      Hello World! Hello World! Hello World! Hello World! Hello World!      <p>     Hello World! Hello World! Hello World! Hello World! Hello World!   </p>      <div>     Hello World! Hello World! Hello World! Hello World! Hello World!   </div>      <b>Hello World!</b> </body> </html> 

У вас должно получиться следущее:


Отлично! Теперь давайте будем кушать код по частям.

Пожаловаться Подписаться
2 ответа
twim

Все четко и понятно объяснил. Спасибо!

burnskull

twim, спасибо за отзыв! Рад стараться! Ждите новых уроков.

авторизуйтесь чтобы ответить