Пошаговое руководство по HTML: часть 2

Пошаговое руководство по HTML: часть 2

В первой части нашего экспресс-курса вы познакомились с основами HTML: узнали, что такое теги, для чего они нужны и научились создавать простейшую страничку. Уверены, что вы справились с заданием! Теперь перейдем ко второму этапу обучения. Для того, чтобы сделать сайт функциональным, мы предлагаем вам пошаговое руководство, с помощью которого вы научитесь создавать таблицы и простейшие формы.

Создаем таблицу

Таблицы обычно вызывают множество проблем, особенно у новичков. Но полчаса потраченного времени,  немного тренировки и усердия — и вот вы уже сможете создавать как простенькие, так и сложные и развернутые таблицы.

Для создания таблицы нам понадобятся такие теги:

  • <table> — тег, который сообщает браузеру, что следующий элемент — таблица;
  • <tr> — тег, который расшифровывается как table row и необходим для создания строк в таблице;
  • <td> — table data обозначает данные, которые находятся внутри таблицы.

Обратите внимание, что теги <td> всегда должны находиться внутри тегов <tr>.

Теперь потренируемся делать таблицу самостоятельно. Можете попробовать сделать ее в том документе, который вы создали на прошлом уроке, или же начать работу в новом документе. Начните таблицу с тега <table> (он должен находиться внутри тега <body>). Теперь придумайте название для своей таблицы и заключите его между тегами <h1><h6>.

Напишите тег <tr>, чтобы создать самую первую строку. В строке ничего писать не нужно. В полноценной таблице должны также присутствовать и столбцы, которые вводятся с помощью тега <td>. Чтобы создать столбцы, необходимо в каждую строку <tr> добавить по ячейке <td>.

Принцип, по которому располагаются столбцы и ячейки, выглядит следующим образом:

<table>
   <tr>
     <td>Строка 1, столбец 1</td>
     <td>Строка 1, столбец 2</td>
     <td>Строка 1, столбец 3</td>
   </tr>
   <tr>
     <td>Строка 2, столбец 1</td>
     <td>Строка 2, столбец 2</td>
     <td>Строка 2, столбец 3</td>
   </tr>
   <tr>
     <td>Строка 3, столбец 1</td>
     <td>Строка 3, столбец 2</td>
     <td>Строка 3, столбец 3</td>
   </tr>
</table>

Теперь наполните таблицу так, как показано ниже:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Добавляем строки</title>
  </head>
  <body>
    <h1>Что я выучил</h1>
    <table border="1">
      <tr>
         <td>Тема</td>
         <td>Оценка</td>
      </tr>
      <tr>
         <td>Самые важные теги</td>
         <td>5</td>
      </tr>
      <tr>
         <td>Ссылки и изображения</td>
         <td>5</td>
      </tr>
      <tr>
         <td>Таблицы и формы</td>
         <td>5</td>
      </tr>
   </table>
</body>
</html>

таблица-в-html

Обратите внимание на атрибут <table border=»1″>, который создает видимые границы вашей таблицы. Если вам нужны невидимые границы, впишите в атрибут table border значение “0”.  

Создание форм

Теперь переходим к такой важной теме, как формы. Формы необходимы для сбора данных, которые вводит пользователь, и отправки их на веб-сервер, который обработает их и решает, что с ними делать. Формы нужны для регистрации пользователя на сайте, создания и отправки письма, сообщения на форуме и т.д., поэтому их важность для веб-странички очевидна.  Стоит упомянуть, что эти формы — чисто визуальные, т.к. данные обрабатывает не браузер, а сервер.

пример-формы

Form и input

Для создания формы (например, для подписки на ваш сайт) нам понадобится соответствующий тег form. Внутри него должны быть такие атрибуты:

  • action — атрибут, который говорит браузеру, куда отправить информацию,т.е. задает адрес.
  • method — атрибут, который задает то, КАК будет отправлена та или иная форма.

У атрибута method есть две величины: get и post. Метод get отправляет данные, как часть URL адреса. То есть данные видны для пользователя в адресной строке браузера и идут после знака “?”. Адресная строка примет вот такой вид:

https://www.google.com/search?q=unihost

А метод post передает данные так, что пользователь этого не сможет увидеть.

Для начинающих разницы между двумя этими двумя методами нет, так как они оба приведут к одному результату. Но различие между ними все же есть. Метод get используется в поисковых формах, поскольку он позволяет получить ссылку на результаты поиска. Метод post используется тогда, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, когда вы редактируете на сайте свой личный профиль.

Большинство полей форм создается с помощью одиночного тега input. Этот тег имеет два обязательных атрибута:

  • type задает тип поля;
  • name задает имя поля.

Тип поля отвечает за то, как это поле будет отображаться. Самый распространенный тип — это text, который обозначает текстовое поле.

Создание формы регистрации

Попробуем сделать простейшую регистрационную форму. Для начала нам нужно создать форму:

<form action=”action_page.php”>

Затем нам понадобятся поля для ввода Фамилии и Имени пользователя. Выбираем тип поля text и задаем имя поля name. Если задать величину value, то в поле будет отображаться так же имя или фамилия пользователя. Кнопку регистрации можно создать при помощи типа поля submit. Регистрационная форма теперь должна принять вот такой вид:

<form action=”action_page.php”>
   Фамилия: <br>
    <input type=”text” name=”firstname” value=”Чёрный”><br>
  Имя:<br>
    <input type=”text” name=”lastname” value=”Плащ”><br><br>
    <input type=”submit” value=”Submit”>
</form>

Примечание: Теги <br> создадут разрыв строки для того, чтобы отделить одно поле для ввода от другого.

Вывод:

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

ПОНРАВИЛАСЬ СТАТЬЯ?
Подпишитесь и получайте рассылку на почту!

Про Автора

Вам также могут понравиться

Сайтостроение 0 комментариев

Как стать веб-мастером: 10 шагов на пути к успеху.

Только представьте: на сегодняшний день количество сайтов в интернете уже перевалило за отметку в 1 миллиард. И с каждым годом это число растет в геометрической прогрессии! Впечатляет, правда? Особенно если

Сайтостроение 0 комментариев

Как стать лидером в социальных сетях

Мучаетесь вопросом, а стоит ли связываться с этими Вконтакте и Facebook? Думаете, что потратите много сил, а ответной реакции — ноль? Ваши страхи небезосновательны. В сфере маркетинга происходит что-то странное.

Сайтостроение 0 комментариев

9 вредных советов: Как НЕ стать отличным блоггером

1. Пишите только о том, в чем прекрасно разбираетесь. Чтобы писать лучше, нужно время от времени ставить перед собой почти невероятные задачи. Если изо дня в день писать только на