Введение в Интернет и что такое HTML.
Интернет — громадная паутина. В этой паутине можно найти, что вашей душе угодно: видео, аудио, книги, но всё это является информацией. Что бы понять, как Интернет появился нужно немного вдаться в историю.
В 1965 году Нельсон создал язык под названием HTML (Hyper Text Marking Language – Язык разметки гипертекста). HTML-интерпретируемый язык, то есть его не нужно компилировать в машинный код, а ваш браузер при запросе сам «строит» страницу по данному ему коду.
Что нам потребуется для работы:
1.Блокнот.
2.Браузер.
Урок № 2.
Структура HTML страницы.
Представьте себе человека. Можете представить себя самого, или какого либо другого человека, не в этом суть. Вот вам для примера рисунок тела человека.
Создайте файлы index.html и style.css. В процессе верстки мы постараемся большую часть форматирования вынести в style.css, т.к.:
размер html-страниц будет меньше;
если вы в будущем захотите отредактировать дизайн сайта, вам не понадобится менять все html-файлы — только style.css.
Наметим «каркас» нашей страницы. Удобно делать его в виде таблицы 100%-й высоты, разделенной на 3 горизонтальные области — Top, Text и Bottom. Top и Bottom имеют фиксированную высоту, а ячейка Text растягивается по высоте на всю оставшуюся часть экрана. Таким образом, даже когда на странице мало или совсем нет текста, Bottom всегда находится там, где ему положено — внизу.
Мы сделаем разметку немного сложнее, т.к. нам нужно, чтобы блоки Search, News, Copyright были равны по ширине. Лучший способ этого добиться — поместить их в ячейки таблицы, расположенные одна над другой.
Вот получившийся html-код (я специально поставил параметр border=«1» в теге <table> и написала внутри каждой ячейки ее название, чтобы мы удостоверились, что сделали разметку правильно. Потом все это нужно будет удалить.
index.html
Код
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main" border="1">
<tr>
<td class="top" colspan="2">top</td>
</tr>
<tr>
<td class="search">search</td>
<td class="topmenu">topmenu</td>
</tr>
<tr>
<td class="news">news</td>
<td class="text">text</td>
</tr>
<tr>
<td class="copyright">copyright</td>
<td class="bottommenu">bottommenu</td>
</tr>
</table>
</body>
</html>
style.css
Код
table.main {
width: 100%;
height: 100%;
}
td.top {
}
td.search {
}
td.topmenu {
}
td.news {
width: 30%;
}
td.text {
width: 70%;
height: 100%;
}
td.copyright {
}
td.bottommenu {
}
1) Чтобы не было промежутков между таблицей и границами экрана, пишем:
Код
html, body {
margin:0px;
padding:0px;
}
2) Чтобы убрать зазоры между ячейками, добавляем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing=«0»).
Код
table.main {
border-collapse: collapse;
}
3) Чтобы убрать отступы внутри ячеек, пишем:
Код
td {
padding: 0px;
}
Также нужно прописать несколько общих параметров, которые будут использоваться по умолчанию:
5) Цвет фона для <body> и элементов форм. Когда фон белый, об этом часто забывают. Тогда у пользователей, установивших какую-нибудь экзотическую тему оформления Windows, некоторые ячейки могут оказаться, например, зелеными 
6) Когда большая часть текста будет написана одним шрифтом (в нашем случае — Tahoma 11px, черный), имеет смысл указать его сразу для всех ячеек и элементов форм.
7) По умолчанию текст и изображения располагаются (вертикально) в середине ячейки. Обычно удобнее, чтобы они подтягивались к верхнему краю. Для этого нужно указать vertical-align: top для всех ячеек.
Код
body, input, select, textarea {
background-color: #ffffff;
}td, input, select, textarea {
font-family: Tahoma;
font-size: 11px;
color: #000000;
vertical-align: top;
}
Каркас готов. Посмотрите html-страницу, а также полный текст файлов index.html и style.css.
