HTML великий и ужастный, от слова ужасть.
Жил себе человек, горя не знал. Однажды решил, что надо как-то устраиваться в этой жизни и поступил в институт. Типа высшее образование получить.
Вот там-то его и прижали к стенке со словами:"Ты должен знать HTML!". Факультет программирования или информатики какой? Нет, ничего подобного. Но вокруг все заполонили компьютеры, в каждый дом медным кабелем заполз интернет(или скоро заползет) и потому без знаний HTML, говорят, тебе теперь никуда!
Что делать бедному студенту, если эта аббревиатура для него понятна не больше, чем надписи в египетских пирамидах?
Способы, как всегда есть разные. Можно, конечно, в знак протеста начать подкладывать кнопки на стул преподавателю, дабы максимально оттянуть момент вызова на эшафот( в смысле к доске). Можно пуститься во все тяжкие с друзьями, в надежде, что за это время преподы забудут о своем намерении вдолбить в твою голову непотребное. Можно, опять же в знак того же протеста, гордо подать заявление об уходе.
А можно попытаться найти в своей голове мысль, наподобие: "А мож все не так страшно?", И попробовать разобраться - что за зверь такой этот хтмл...?
Многотонные учебники переписывать на будем - не в том задача. Задача - устранить панический ужас от самого названия и от тех "значечков и буквочек", которыми этот самый HTML и пишется.
Каждый, кто хоть раз выходил в интернет, непременно открывал в каком-либо браузере(напр. Internet Explorer) web-страницы. Вот они-то и написаны при помощи языка гипертекстовой разметки документов(HTML). По другому информацию в интернете не передать, потому как только этот язык и понимает любой браузер.
Осознавать, что ты можешь хоть чем-то управлять в своей жизни само по себе прикольно. Просматривать веб-страницы, конечно, интересно, но еще интересней знать, что в любой момент можешь и сам сварганить нечто подобное, а то и покруче.
Вот и посмотрим, из чего же оно состоит и попробуем сделать свою, хотя бы самую простую - а там затянет и понесет...
Любой HTML код содержит в себе следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Всего и делов.
Первой строчки не пугайтесь, она определяет стандарт используемого языка разметки.
<html></html> - означает, что все, что находится между ними и есть html-документ, т.е. веб-страница.
В секции <head></head> размещается заголовок веб-страницы, который надо написать между <title></title>
В секции <body></body> находится все основное содержание страницы: тексты, рисунки, ссылки, таблицы, кнопочки, с помощью которых можно просмотреть видео, прослушать аудио и вообще все, что взбредет в голову веб-мастеру.
Теперь стоит попробовать создать веб-страницу самостоятельно, дабы понять, как все это работает. Откройте самую интересную программу встроенную в Windows, под названием "Блокнот". Копируйте и вставьте в него код, представленный ниже:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый веб-заголовок!</title>
</head>
<body>
<p>Мой первый текст веб-страницы!</p>
</body>
</html>
Теперь в меню файл выбираете пункт "Сохранить как", в поле "Имя файла" пишите: mypage.htm, и сохраняете, к примеру, на рабочий стол. Если на рабочем столе не бардак, найти его не составит труда. Нашли? Откройте и посмотрите на свое творчество.
Собственно, уже можно идти сдавать зачет, на троечку потянет. Но если нужна оценка повыше, можно попробовать чуть-чуть раскрасить страничку.
Добавьте в тот же самый код, сразу после <body>, такую строчку:
<h1 style="text-align:center">Я веб-мастер экстра класса!</h1>
Для этого в любом месте открытого htm-файла щелкните правой кнопкой и выберете "просмотр HTML-кода". Теперь предложенную строчку вставьте в указанное место, закройте открывшийся файл, сохранив изменения и обновите свою веб-страницу(F5). После того, как увидите полученный результат, попробуйте догадаться какое именно слово в коде заставляет располагаться эту надпись в центре страницы.
Так пишутся заголовки для текстов.
Добавим еще прибамбасов. Прямо перед </body> вставьте такие строки:
<p style="color:yellow">Текст желтого цвета</p>
<p style="color:red">Текст красного цвета цвета</p>
<p style="color:#4DBBF7">Ой, такой голубенький..., мне очень нравится</p>
А еще ниже вставьте такую строку:
<p style="background-color: #00FF00">Черный текст на зеленом фоне или на каком-нибудь другом, стоит только поменять цвет.</p>
Таблицу добавить чуть посложнее, но тоже вполне реально. Еще ниже вставьте:
<table border="1" width="70%" cellspacing="0" cellpadding="0" id="table1"
align="center">
<tr>
<td><p>Первая строка, первый столбец</p></td>
<td><p>Первая строка, второй столбец</p></td>
<td><p>Первая строка, третий столбец</p></td>
</tr>
<tr>
<td><p>Вторая строка, первый столбец</p></td>
<td><p>Вторая строка, второй столбец</p></td>
<td><p>Вторая строка, третий столбец</p></td>
</tr>
</table>
Еще немного добавим "красок" в новоиспеченную страницу и поместим в таблицу картинку. Для этого скопируйте на свой рабочий стол(т.е. туда же, куда сохраняли файл mypage.htm) какой-нибудь файл в формате .jpg или .gif с рисунком небольшого размера. Пусть этот файл будет в формате .jpg и переименуйте его в img1.jpg Затем в таблицу вместо слов "Вторая строка, второй столбец" вставьте следующий код:
<img border="0" src="img1.jpg">
Можете вставить его и в любой другой столбец и начать уже строить планы на свое светлое будущее в рядах доблестных строителей сайтов.
Чтобы изменить размеры рисунка, замените его код на такой:
<img border="0" src="img1.jpg" width="ваше значение ширины" height="ваше
значение высоты">
Среди всех искусств веб-дизайна наиважнейшим для нас является правильная простановка ссылок. Страниц в интернете чуть больше одной, поэтому надо как-то суметь указать пользователю, "где нахоицца канада". Для этого и предназначены ссылки. Надо только правильно писать их в коде страницы.
Дело это нехитрое, но в самом начале все же можно немного запутаться, что, впрочем, легко лечится многолетними тренировками.
Для наглядности продолжим редактировать тот же самый код. Чтобы понять, как ссылка приводит вас с одной страницы на другую, сделайте следующее
Создайте там же, на своем рабочем столе новую папку и назовите ее: new. Снова откройте "Блокнот", копируйте этот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя вторая страница</title>
</head>
<body bgcolor="#7575FF">
<p>Сюда ведет ссылка с первой страницы.</p>
</body>
</html>
и сохраните файл, назвав его nextpage.htm в папку new . С этим пока все.
Теперь откройте файл mypage.htm, доберитесь до его кода способом, указанным выше и вставьте в него такую строчку:
<p>Вторая страница уже готова, а значит пора дать <a href="new/nextpage.htm">ссылку</a>
на нее и посмотреть, что получилось.</p>
Не забывайте, что эту строку надо вставить где-то между <body></body>
Ссылка, которая ведет на какую-то реально существующую страницу в интернете, может выглядеть немного пострашнее. Для примера можете попробовать вставить вот такой код, и подключившись к интернету испытать его в действии:
Много всякого интересного на <a href="http://fort-web.ru/shop/">Fort Web Shop</a>
Продолжать такое творчество можно до бесконечности. Но для того, чтобы не испытывать затруднений на каждом шаге, стоит приобрести мало-мальски упорядоченные знания. Отыскать таковые в интернете совсем не трудно, стоит только ввести запрос в форму поиска наподобие:"HTML для начинающих", ну хотя бы вот на этой странице - Поиск по всему сайту. Или найти учебник здесь.
Но это для самых любознательных, остальным же - "ни пуха, ни пера" на экзаменах.
Как сделать сайт за 10 минут, не особо напрягаясь.
- Приготовить файл в формате .doc с текстом, который хотите видеть на сайте.
- Всавить этот файл в специальную программу.
- Нажать кнопочку в этой программе, которая и выдаст вам готовый сайт.
Текст берется из любых источников, как то:
собственная голова(рекоменд.);
слухи и сплетни;
национальная библиотека дружественного гос-ва;
космические каналы связи;
и т.д.
Далее применяется Построитель больших белых сайтов на автомате.
Обучающее видео прилагается.
