Как научится HTML с нуля

Продолжаю добавлять материалы о свои первые попытки в веб дизайне, данная страница будет посвящена материала, как создать сайт на языке гипертекстовой разметки HTML. Сайт на языке гипертекстовой разметки HTML  я уже создал, и создать сайт, используя только html у меня получилось. Получилось как для меня, не хуже чем сайт создан с помощью такой специальной программы для создания сайтов Web Page Maker.

Как я уже говорил в одной из публикаций, именно когда чему-то научиться, наступает момент, когда хочется попробовать воплотить все свои старания в результат.

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

Для чего нужно создавать сайт без вспомогательных программ, для того чтобы получить практику, сначала попробуйте создать сайт без добавление каскадных таблиц стилей СЅЅ, чтобы не путатись. Хотя современные сайты сейчас пишут по разным программам, но и на HTML с добавлением стилей СЅЅ  можно сделать красивый и современный сайт.

Сначала практикуйтесь обычным способом, прописывая коды на языке гипертекстовой разметки HTML, а каскадную таблицу стилей СЅЅ  вы потом сможете добавить, таким методом можно лучше усвоить как создаются сайты, после практики у вас появятся некоторые навыки, а это самое главное, потому что вы тогда будете в состоянии, смело вносить различные изменения в шаблон сайта. Кстати, HTML уроки доступны на страницах нашего специализированного сайта.

Прописывание кодов в файлы для сайта, методом вручную по любому принесет вам пользы, так как это будет уже практика, по созданию веб–дизайна. А усвоить материал полностью возможно только тогда, когда практикуешься.

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

Мне уже пригодилось знание языка HTML, с помощью таких знаний, я внес некоторые изменения в своем шаблоне без вмешательства плагинов, одно из изменений это сделал текст обтикаемым вокруг картинки.

Перенес кнопки “Счетчиков” в центр, а ссылки “Я в Гугл+” сделал так, что открывается теперь страница в новой вкладке. Ну и еще некоторые изменения в дизайне, в принципе кто ранее заходил на сайт, то конечно их увидит.

Так что теперь с певненістю скажу, что изучение HTML вам пригодится в будущем, поэтому не ленитесь, тем более что ничего сложного чтобы освоить язык гипертекстовой разметки не должно, все достаточно легко.

Первый шаг для того чтобы сделать сайт на HTML

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

Мы собираемся создавать сайт

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

Потому что никак не зможимо мы их связывать между собой, если они будут разбросаны, теоретически можем, связать два ну или три ссылки на файлы между собой, но для всех файлов, и чтобы они имели связь между собой, в таком случае прописывать ссылки на них будет очень тяжело, для сайта нужна папка, чтобы в ней находились другие файлы и папки.

Поэтому для того чтобы создать сайт, нужно прежде всего создать “главную” папку в которую мы будем размещать наши файлы и папки. Первым делом создаем папку и даем название, желательно на английском языке.

Назовем папку “MYSITE”. В этой папке начинаем создавать первый файл, открываем текстовый редактор и копируем этот код в (таблица1).

Вставляем, скопировать можно даже через редактор WordPad, для создания html – страницы можно применять и этот редактор. Но чтобы делать изменения в коде, или вообще работать с тегами и атрибутами в языке html, лучше использовать бесплатный Notepad++.

Вообще–то для создания сайта лучше использовать html–редакторы а не текстовые редакторы, в html–редакторах присутствует подсветка кода, а она поможет увидеть ошибки в коде.

Сохраняем под названием Index.html именно так должна называться главная страница, расширение должно быть html. Далее сохраняем имя файла Index.html (тип файла выставляем “Текстовый документ в кодировке юникод если пользуетесь WordPad).

Таблица 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http–equiv= "Content–Type" content= text/html; charset=windows-1251″> <title> Назва сайту, або заголовок</title>
</head>
<body>
<table width= "805" border= "0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffff00">
<tr>
<td height ="190" colspan="3"align="center"><h2>Верхня частина-Header</h2>
</td>
</tr>
<td colspan="3"> <!-- --> <table width= "805" border= "0" align="center" cellpadding= "0" cellspacing="0" bgcolor="#ff0000">
<tr>
<td height ="40" align="center"><h2>Горизонтальний блок навігації</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="230" valign="top" bgcolor="#d8cba8">
<div id ="col_left" align="center" > <h2>Ліва колонка</h2>
</div>
</td>
<td width="345" valign="top" bgcolor="#d8cba8">
<div id ="content" align="center" > <h2>Центральна частина</h2>
</div>
</td>
<td width="230" valign="top" bgcolor="#d8cba8">
<div id ="col_right" align="center" > <h2>Права колонка</h2>
</div>
</td>
</tr>
<tr>
<td colspan="3"align="center" bgcolor="#00ff00"><h2>Нижня частина-Footer</h2>
</td>
</tr>
</table>
</body>
</html>

Может возникнуть ситуация, в зависимости каким редактором пользуетесь, что ваш браузер будет отображать страницу как на картинке, тогда сначала обратите внимание на кавычки, корректно ли они будут отображаться в редакторе, после того как вы скопируете код, как ни то поменяйте кавычки в том редакторе, в котором вы создадите файл, потому что при копировании они могут отличаться, и страница в браузере через “лапки” которые были созданы методом копировать–вставить, не правильно отображаться.

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

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

В принципе все должно отображаться корректно, поскольку я проверил в двух редакторах о которых шла речь, в WordPad выставляем при хранении расширение html, а в Notepad++ также естественно, чтобы текст отображался правильно, пришлось еще и поменять кодировку с utf–8 (без BOM) на ANSI.

Яндекс.Метрика