Использование языка HTML для создания сайта
Краткое сожержание материала:
Размещено на
Размещено на
Пояснительная записка
На данный момент самая посещаемая часть Интернета - World Wide Web - www, состоит из Web сайтов и отдельных Web - страниц, а в основе создания сайтов лежит язык HTML. Естественно HTML это только фундамент профессионального сайта, т.к. этот язык «примитивен» и является скорее оболочкой сайта, нежели новомодной начинкой. Для более профессиональных сайтов существует язык PHP, который используется в основном с MySQL базами данных. Такие познания требуются для торгового класса сайтов. Они несут в себе бизнес, доход и торговую систему, но опять же без знания простейших языков программирования вам этого не добиться, потому, как в основе любого сайта лежит HTML. Этот простенький язык может помочь в развитие бизнеса, поэту, художнику, самый же главный потенциал знания HTML это экономия при создании своего сайта. Вам ненужно будет заказывать за огромные деньги у программистов сайт, потому как вы сами сможете его сделать и возможно даже помочь коллеге в этом деле.
Язык HTML очень прост, и пользоваться им может абсолютно каждый, для этого быть программистом необязательно, достаточно иметь навыки пользования Интернетом.
Я постарался описать в своей методичке довольно простой метод обучения этому языку. За основу мы возьмем созданный мной шаблон, который будем описывать по мере создания его основ. Таким образом, на основе полученных знаний вы сможете создавать электронные учебники, легкие сайты и электронные резюме. Профессионализм приходит не сразу, но после 10-15 созданных вами сайтов на моей основе, вполне сможете вершить «шедевры».
Шедевром можно назвать свой сайт тогда когда он будет отвечать всем стандартным требованиям, естественно, если сайт будет сделан именно вами (плагиат в данном случае считается пустой тратой времени, хотя очень многие считают это в порядке вещей). Стандарты сайта, я приведу в одной из разделов данной методички.
Глава 1. Основа сайта
Тема 1. Общие характеристики
И так, преступим к созданию будущего сайта. Во всех страницах нашей методички будет использоваться один и тот же шаблон кода, который мы будем обновлять по ходу работы.
Вот этот шаблон:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Символы и слова со значками <…> называются тэгами. Тэги бывают открывающие и закрывающие.
К примеру: открывающий <title> и закрывающий </title>, они отличаются только символом /, например:
<title>Мой сайт</title>
Но не все теги HTML действуют по этому принципу, есть и такие тэги, у которых закрывающего тэга нет, например:
<br>
<b>
В данном шаблоне кода используется четыре тэга, это: <html>, <head>, <title>, <body>. Рассмотрим что они означают и для чего нужны вообще:
<html> - указывает программе просмотра страниц, что это HTML документ.
<head> - определяет место, где помещается различная информация, не отображаемая в самом документе.
<title> - не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна.
<body> - определяет видимую часть документа. Тело документа. Здесь отображается все, что вам нужно показать посетителям сайта (картинки, текст, ссылки, рамки и различные формы).
Теперь нужна идея, как должен выглядеть сайт, и в каком расположении относительно друг от друга все будет находиться. В этом я вам помогу, для начала мы рассмотрим представленную мной модель будущего сайта и попытаемся вместе ее сделать:
Начнем с того, что сделаем основу, нашего сайта. Мы создадим набор таблиц, которые расположим в нужном нам порядке. Правильное расположение этих таблиц залог успешного сайта, оно и является главным и сложным элементом при разработке. Расположение таблиц создает сложность в том, что открывающие и закрывающие тэги нужно правильно поставить по смыслу, иначе ничего не получится.
Рассмотрим несколько примеров:
Обычная таблица 3х2
<table border=”1”>
<tr>
<td>1111</td><td>2222</td><td>3333</td>
</tr>
<tr>
<td>4444</td><td>5555</td><td>6666</td>
</tr>
</table>
Результат
|
1111 |
2222 |
3333 |
|
|
4444 |
5555 |
6666 |
Два примера с применением ROWSPAN
1)
<table border=”1”>
<tr>
<th rowspan=2>1111</th>
<td>2222</td>
<td align="right">3333</td>
</tr>
</td>
<td>4444</td>
<td align="right">5555</td>
</tr>
</table>
Результат
|
1111 |
2222 |
3333 |
|
|
4444 |
5555 |
2)
<table border=”1”>
<tr>
<td>1111</td>
<td rowspan=2>2222</td>
<td>3333</td>
</tr>
<tr>
<td>4444</td><td>5555</td>
</tr>
</table>
Результат
|
1111 |
2222 |
3333 |
|
|
4444 |
5555 |
Пример с применением COLSPAN
<table border=”1”>
<tr>
<td>1111</td>
<td colspan=2>2222</td>
</tr>
<tr>
<td>3333</td> <td>4444</td> <td>5555</td>
</tr>
</table>
Результат
|
1111 |
2222 |
||
|
3333 |
4444 |
5555 |
Демонстрация множественных заголовков и COLSPAN
<table border=”1”>
<tr>
<th colspan=2>1111</th>
<th colspan=2>2222</th>
</tr >
<tr>
<th>3333</th> <th>4444</th>
<th>5555</th> <th>6666</th>
</tr>
<tr>
<td>7777</td> <td>8888</td> <td>9999</td> <td>1000</td>
</tr>
<tr>
<td>1100</td> <td>1200</td> <td>1300</td> <td>1400</td>
</tr>
</table>
Результат
|
1111 |
2222 |
|||
|
3333 |
4444 |
5555 |
6666 |
|
|
7777 |
8888 |
9999 |
1000 |
|
|
1100 |
1200 |
1300 |
1400 |
Теперь рассмотрим некоторые использованные нами теги и их атрибуты:
<table> - создает таблицу. Все прочие элементы таблицы должны быть вложенными в него.
Практически у каждого тэга есть свои атрибуты, которые добавляют к значению различные показания, такие как цвет, ширину, высоту, расстояние и многое другое.
...Интернет-технологии. Создание сайта
Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых...
Создание индивидуального сайта
Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при...
Проектирование тематического Web-сайта
Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования JavaScript...
Язык разметки гипертекста HTML
Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления...
Создание Web-сайта
Обоснование выбора средств разработки сайта. Программа Microsoft Office FrontPage 2003, характеристика и принцип работы. Разработка структуры сайта, е...
