Feb 02

Как устроена веб-страница

HTML, учеба, аффтар: Скакунов Александр Add comments

Веб-страница устроена просто.

Она состоит из двух частей: заголовка (head) и тела документа (body).

Заголовок содержит служебную информацию, описывающую содержащиеся на странице данные или помогающие её отобразить. К описательным данным относятся: заголовок страницы (его видно в шапке броузера), список ключевых слов (чтобы поисковики лучше смогли понять о чем на этой странице написано), кодировка документа (а их только для русского языка — 4 штуки), и так далее. К элементам, помогающим отобразить содержимое, относятся каскадные таблицы стилей (CSS) и в некоторых случаях библиотеки JavaScript-кода — не пугаемся, их мы разжуём позже.

Содержимое заголовка как правило не видно — оно носит служебный характер.

Тело документа — это собственно всё, что на странице написано и нарисовано: параграфы текста, ссылки, картинки и видео-вставки.

Давайте попробуем написать простейшую веб-страничку. Открываем любой текстовый редактор (только не MS Word! Попробуйте Notepad++) и копируем туда такой текст:


<html>
  <head>
    <!-- это заголовок документа -->
    <title>First blood</title>
  </head>

  <body>
    <!-- это собственно тело -->
    <h1>Hello Rambo!</h1>
  </body>
</html>

Сохраняем файл куда угодно под названием 1.htm и открываем его в браузере (можно просто перетащить файл в браузер). Должна получится примерно такая картина (на рисунке – браузер Google Chrome, у вас может быть другой):

Ура! Теперь осталось выучить несколько основных тегов и попробовать их применять. Тэг H1 мы уже использовали в примере выше — он даёт нам заголовок первого уровня (самый крупный — тут та же идеология, что и с ватманами: А1 больше чем А3):


<strong>жирный</strong> = жирный

<em>курсив</em> = курсив

<a href="http://google.com">ссылка на Google</a> =  ссылка на Google

<input type="button"
  value="Нажми меня"
  onclick="alert('Вот и молодец!')" /> =

На закуску рекомендую прочесть статью “Простейшая веб-страница” — написана просто и с юмором, читается легко.



One Response to “Как устроена веб-страница”

  1. И тут Строим веб-приложение говорит:
    02.02.2009 в 17:59 Default LCA Avatar Image

    [...] Немного про XML Как устроена веб-страница Jan [...]

Ну-ка вякни!

Нужно сначала залогиниться, чтобы постить комменты.


[]