Главная Коллекция "Otherreferats" Программирование, компьютеры и кибернетика Подробная инструкция создания сайта и возникающие при этом трудности

Подробная инструкция создания сайта и возникающие при этом трудности

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

Рубрика	Программирование, компьютеры и кибернетика
Вид	практическая работа
Язык	русский
Дата добавления	11.05.2010
Размер файла	31,9 K

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

1. Инструкция создания сайта, уроки

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

С чего же начать?

1) Необходим текстовый редактор, подойдет самый простой - блокнот. Он есть на каждом компьютере.

Чтобы воспользоваться блокнотом, выполните следующие действия: нажмите правую кнопку мыши, затем выберите пункт СОЗДАТЬ, далее ТЕКСТОВЫЙ ДОКУМЕНТ. Теперь зайдите в созданный файл, использую двойной клик мыши

Или второй вариант. Кнопка ПУСК - > пункт программы - > стандартные - > блокнот.

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

2) Обратите внимание на код, приведенный ниже. Ваша задача скопировать его в блокнот, который вы открыли ранее. Для этого выделите код мышью, нажмите правую кнопку мыши, выберите пункт КОПИРОВАТЬ.

Далее щелкните по рабочей области блокнота правой кнопкой мыши и выберите пункт ВСТАВИТЬ.

Второй вариант. Вместо пунктов копировать и вставить, можно использовать сочетание клавиш клавиатуры: копировать - CTRL+C, вставить - CTRL+V.

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

<body>

Содержимое моего сайта.<br>Я прохожу уроки создания сайта.

</body>

</html>

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

3) В верхнем меню блокнота выбирает пункт ФАЙЛ - > сохранить как…

В появившемся окне выбирает место на вашем компьютере, куда будет сохранен документ.

Рекомендую заранее создать новую папку на диске С и назвать ее, например, web.

После того, как вы выбрали место для сохранения, напишите в строке «Имя файла» - название вашей первой страницы. Например, page.html.

Заметьте, что наличие .html - обязательно, это расширение файла, которое показывает, что документ относится к HTML.

Важное отступление. Не используйте в названии файла русские и заглавные буквы, а используйте только маленькие английские буквы, цифры, тире.

Теперь жмем кнопку «сохранить». Стоит сделать маленькую оговорку.

Ваш документ может сохраниться не как page.html, а как page.html.txt. Если это произошло, переименуйте файл в page.html.

Но для этого понадобятся программы для работы с файлами, которых нет на вашем компьютере по умолчанию. Но их с легкостью можно найти в Интернете, вот название этих программ «Total Commander» или «Windows Commander».

4) Теперь идем в ту директорию, куда был сохранен файл, и запускаем его, использую двойное нажатие левой кнопки мыши.

Если вы точно следовали инструкции создания сайта, то должны увидеть следующие > результат первого урока создания сайта.

Рекомендую точно следовать инструкции создания сайта, и тогда не возникнет проблем с нашими уроками создания сайта.

1.1 Пошаговое создание сайта, уроки

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

1) Вы сохранили файл, перешли в нужную директорию щелкнули по нему двойным кликом мыши, а открылась не Интернет страница, которая является результатом первого урока, а код, который вы копировали.

Это значит, что страница имеет название не page.html, а page.html.txt, хотя визуально название выглядит как page.

Для решения данной проблемы необходимы программы, о которых упоминалось выше. С их помощью переименуйте файл page.html.txt в page.html.

2) Страница открывается нормально, но на экране отображаются непонятные символы, а не текст.

Чтобы решить эту проблему, нужно поменять кодировку вашего браузера.

Для этого в верхнем меню браузера зайдите в пункт ВИД - > кодировка - > кириллица (Windows - 1251)

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

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

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

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

2. html теги

В этом уроке создания сайты, мы разберем знакомый вам код, и вы узнаете, что такое html теги и зачем они нужны.

Чтобы работа через Интернет не приносила проблем в техническом плане, нужно изучить основы html.

Итак, начнем с того, что страницы сайта пишутся при помощи html тегов. Вообще HTML расшифровывается, как Hyper Text Marker Language, то есть язык гипертекстовой разметки.

Поэтому расширения у страниц сайта должно быть .html.

2.1 Html коды для сайтов, теги

Итак, разберем, что такое html коды для сайта и что такое html теги.

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

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

<body>

Содержимое моего сайта.<br>Я прохожу уроки создания сайта.

</body>

</html>

Команды в треугольных скобках называются html теги, например <html> - это тег.

Начнем с того, что теги делятся на парные и непарные. Парные html теги имеют открывающий и закрывающий тег. Например, <html> - открывающий, </html> - закрывающий. Заметно, что отличаются они только наличием или отсутствием символа /.

По ходу дела, вы запомните, какие html теги парные, а какие непарные. Это важно.

Теперь обсудим html коды для сайтов, нашего примера.

Html тег <html> указывает, что начинается html документ. Его закрывающий тег </html> указывает, что html документ завершен.

Далее, пара html тегов <head> </head>. Это голова сайта, шапка.

Между этими тегами пишется другая пара <title> </title> - между этими тегами пашется заголовок страницы, название.

Далее идет пара html тегов <body> </body>. Это тело сайта. Между этими тегами пишется все основное содержимое сайта.

Теперь посмотрите на html код для сайта. Он похож на человека. <head> - голова, <body> - тело.

Вот вы и ознакомились с html кодом для сайтов. Это минимальный набор html тегов, который присутствует в любом сайте.

В html коде первого сайта был, упомянут тег <br>. Это непарный html тег, который служит для принудительного переноса текста на следующую строку.

2.2 html теги и важные моменты

Теперь подведем итог второго урока создания сайта. Несколько важных моментов, относительно html тегов.

В самом начале документа пишется тег <html>, а в самом конце </html>, все остальное между ними.

Пара тегов <title> </title>, должна стоять между тегами <head> </head>.

Само содержимое сайта, должно находиться между html тегами <body> </body>.

Вот мы и разобрали основные html теги, которые являются основой любого сайта. Далее мы будем все глубже и глубже погружаться в мир строения сайтов.

3. html цвета

Продолжаем освоение html, в третьем уроке нашего обучения мы займемся изучением html цвета, а именно изменением цветов на странице. А то как-то тускло все выглядит.

Html код который у нас уже есть:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

<body>

Содержимое моего сайта.<br>Я прохожу уроки создания сайта.

</body>

</html>

3.1 html цвет текста

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

Измените тег <body> следующим образом: <body text="#FF0000">, то есть для изменения html цвета текста, нужно добавить параметр text= и указать его значение "#FF0000".

Значение параметра определяет цвет, то есть "#FF0000" - красный цвет. Здесь действует закон трех цветов.

Например, "#00FF00" - зеленый html цвет, "#0000FF" - синий html цвет текста. При смешивании, эти три цвета образуют новые оттенки и html цвета. Например, "#3715FB".

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

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br>Я прохожу уроки создания сайта.

</body>

</html>

(Синим цветом будут выделены новые участки html кода)

Должно получиться следующее > измененный html цвет текста.

Теперь разберемся, как задавать html цвет отдельных фрагментов текста. Если вам нужно чтобы часть текста имела другой html цвет, проделайте следующие действия:

Заключите нужный текст между тегами <font> </font>. Это новый html тег, он является парным.

Затем, введите параметр color= со значением "#00FF00", то есть так <font color="#00FF00"> текст другого цвета</font>.

Применим знания на нашем html коде и изменим фрагмент текста.

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</body>

</html>

Должно получиться следующие > меняем html цвет текста .

3.2 Цвет фона html

Теперь изменим цвет фона html, для этого нужно задать в теге <body> параметр bgcolor= со значением "#494949", то есть <body bgcolor="#494949">.

Цвет фона html не обязательно брать "#494949", можно взять любой другой.

Давайте внесем изменения в наш код и изменим цвет фона html.

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</body>

</html>

Теперь посмотрим, что получилось > изменение цвета фона html .

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

Как вносить изменения в уже готовую страницу, ведь при двойном щелчке мыши она просто открывается? Допустим, вам надо изменить html цвет текста или цвет фона html, как требуется в этом уроке создания сайта.

Для этого кликаем на страницу правой кнопкой мыши, затем выбираем пункт «открыть с помощью» - > блокнот. И перед вами появиться блокнот с html кодом, который можно редактировать.

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

Теперь несколько моментов связанных с написанием тегов и их параметров.

Возьмем, к примеру, строчку из нашего кода.

Заметьте, что все параметры внутри тега <body> пишутся через пробел. Далее, обратите внимание на кавычки, и не забывайте их ставить. Когда указываете код цвета, то есть значение парамерта (#CC0000), помните, что ставиться цифра 0, а не буква О.

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

4. Картинки html

В четвертом уроке нашего обучения, мы будем вставлять картинки html на страницу.

Но прежде чем приступить, изучим новую пару тегов, это <center> </center>, нужны они для выравнивания по центру. Выровнять можно все, что угодно, можно картинки html, а можно и все, что есть на сайте.

Итак, заключим содержимое нашей страницы между тегами <center> </center>.

В итоге получим следующий html код:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</center>

</body>

</html>

Заметьте, что можно выровнять по центру только то, что находится между тегами <body> </body>.

4.1 html код картинки

Теперь мы подобрались к главной теме этого урока создания сайта, использование html кода картинки на странице нашего сайта.

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

Для начала необходимо скопировать эту картинку к себе на компьютер. Для этого нажмите правую кнопку мыши на картинку, в выпадающем меню выберите пункт «Сохранить изображение как…»

Далее в появившемся окне выберите директорию для сохранения. Нужно выбрать ту папку, в которой находиться ваша страница. Если вы следовали инструкциям, то она находится на диске С и называется web.

Нажимаете сохранить. Имя картинки html менять не нужно. Проследите, чтобы название было kartinka, а формат JPEG.

Тогда расширение у картинки будет .jpg, а полное название kartinka.jpg. Если при сохранении не будет видно .jpg - ничего страшного.

Итак, после сохранения картинки, необходимо прописать html код картинки на нашей страничке.

4.2 Картинки html, вставка

Сейчас будет изучен новый тег, позволяющий вставлять картинки html.

Вот так он выглядит <img>, заметьте, что это непарный тег. Чтобы компьютер знал, какую именно html картинку нужно вставить, необходимо прописать параметр src= в теге <img>, а в значении параметра указать путь к картинке html.

То есть, должно получиться так <img src="kartinka.jpg"> , при условии, что картинка находиться в той же папке, что и страница.

Пришло время попрактиковаться. Вставьте html код картинки в нашу страницу. После изменений html код выглядит так:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</center>

</body>

</html>

Обратите внимание, что перед картинкой html есть два тега <br><br>, они нужны, чтобы картинка располагалась на две строчке ниже текста.

Помимо параметра указывающего адрес картинки html (src=""), в тег <img> можно вставлять параметры высоты и ширины картинки. Делать это не обязательно, но рекомендуется.

Итак? параметр шитаты - width="" высоты - height="". В кавычках указывается размер в пикселях.

Еще один параметр, который можно использовать в теге <img>, носит название title="", в кавычках нужно написать текст. Он будет всплывать при наведении на картинку html.

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

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</center>

</body>

</html>

Если вы все сделали, согласно инструкции создания сайта, то получится следующее > вставка картинки html .

5. html текст

Этот урок мы посвятим html тексту, а точнее его форматированию. Зачастую при создании сайтов приходится форматировать html текст, то есть изменять какие-то его фрагменты, иначе текст будет выглядеть скучно и плохо восприниматься.

Изменять цвет html текста и его фрагментов вы уже умеете. А сейчас разберем еще несколько способов выделения текста. Это будет важно, когда вы будите заниматься удаленной работой через Интернет, а именно внутренней оптимизацией.

5.1 html теги текст

Итак, изучим несколько новых html тегов текста, которые позволяют выделять html текст жирным или курсивом.

Тег <b>. Выделяет фрагмент текста жирным. Этот тег является парным, то есть html текст который должен быть выделен жирным, необходимо заключить между тегами <b> </b>.

Теперь о выделении текста курсивом. Для этого используется аналогичный тег <i>. Он тоже является парным. Заключите html текст между парой <i> </i> и он будет выделен курсивам.

Теперь к практике. Продолжим наполнять наш html код. Добавим пару фраз, выделенных жирным и курсивом.

После изменений получаем такой код:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

</center>

</body>

</html>

Эти html теги текст форматируют как поодиночке, так и вместе. То есть, можно одновременно выделить html текст и жирным и курсивом.

При этом нужно соблюдать правила вложенности. Пример, <i><b>html теги текст</b></i>.

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

Запомнить эти правила легко, они схожи с принципом матрешки. Одна пара тегов лежит в другой паре html тегов.

5.2 html текст и изменение шрифта

Теперь поговорим о том, как изменить размер шрифта у html текста.

Есть два способа. С помощью тегов <H1> <H2> - <H6> или с помощью параметра size.

Разберем первый вариант. Выделите html текст тегом <H1> </H1>. Заметьте, что серия тегов <H> - является парной.

Текст в тегах <H1> будет самым большим, а текст в тегах <H6> самым маленьким.

Теперь разберем вариант с применением параметра size=. Этот параметр можно применять в известных нам тегах <font> </font>.

То есть, пишем следующие: <font size="1">нужный html текст</font>. При этом, чем меньше значение параметра size=, тем меньше размер шрифта текст.

То есть, html текст со значением параметра 1 (<font size="1">), будет меньше, чем текст со значением 4 (<font size="4">).

Пришло время разобрать, в чем отличие этих двух вариантов изменения размера шрифта.

Тег <H> - это тег заголовков. То есть, заключенный текст будет выделяться как абзац, перенося последующий текст на следующую строку.

А использование параметра size=, позволяет изменять размер шрифта прямо в тексте, нечего не перенося.

Итог. Если нужен заголовок, то заключайте html текст в теги <H>, а если необходимо изменить размер шрифта в тексте, используйте параметр size="" в теге </font>.

Теперь вы приобрели навыки форматирования html тегами текст, который необходимо выделить из общего контекста.

6. Ссылки html

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

6.1 html код ссылки

Итак, обычно сайт состоит из большого количества страниц (от 10 до нескольких тысяч), и чтобы можно было перейти с одной страницы на другую, необходимо поставить html код ссылки.

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

Теперь о том, как поставить ссылку html. Для этого необходимо разместить на своей странице html код ссылки. Осуществить это возможно при помощи тегов <a> </a>.

Тег <a> должен иметь обязательный параметр href="", в значении этого параметра указывается адрес сайта или страницы.

Например, <a href="http://mm-business.ru">Работа через Интернет</a>. В данном случае, ссылка адресована на сайт mm-business.ru, а выглядеть она будет как «Работа через Интернет».

То есть, между тегами <a> </a> пишется анкор - ссылочное слово или фраза.

Давайте вернемся к нашему сайту, и поставит на него html код ссылки.

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

<a href="http://mm-business.ru">Работа через Интернет</a>

</center>

</body>

</html>

Теперь при нажатии на фразу «Работа через Интернет», вы отправитесь на сайт mm-business.ru.

6.2 Ссылка на страницу html

Теперь о том, как поставить ссылку на страницу html вашего сайта. Для этого нужно вместо адреса сайта mm-business.ru, указать название второй страницы html.

Например, страница называется poleznoe.html, то ссылка будет выглядеть так:

<a href="poleznoe.html ">Полезное</a>

Но это при условии, что страница poleznoe.html находится в той же папке, что и главная.

Освоим еще одну полезную вещь. Как сделать ссылку на страницу html в виде картинки, то есть, чтобы нажимать не на текстовую фразу, а на картинку.

Для осуществления этой идеи, нужно вместо фразы между тегами <a> </a>, поставить html код картинки. В итоге ссылка html буде в виде картинки.

Давайте добавим html код ссылки в виде картинки. Так как картинка на нашем сайте уже есть, заключим ее в теги <a> </a> и зададим адрес на сайт mm-business.ru.

После внесения изменений код должен выглядеть так:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</a>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

<a href="http://mm-business.ru">Работа через Интернет</a>

</center>

</body>

</html>

Обратите внимание на то, что добавлен новый параметр border="" в тег <img>, со значением 0.

Этот параметр необходим для удаления рамки по периметру картинки.

Результат шестого урока должен быть следующим > установка html кода ссылки.

Использовать html код ссылки можно не только для установки ссылки на страницу html или на сайт. Например, вам нужно чтобы посетители вашего сайта могли скачать mp3 файл или архив rar c программой.

Делается это просто, вместо адреса, вы указываете имя скачиваемого файла.

Например, <a href="pesnya.mp3">Скачать эту песню</a> или <a href="proga.rar">Ссылка на скачивание программы</a>.

Но при этом, скачиваемы файлы, должны находиться в одной папке со страницей, на которой стоит ссылка html.

7. Таблицы htm

Мы прошли основы html и осталать последняя тема, таблицы html - самая важная и трудная. Ни в коем случае не пропускайте ее. Таблицы html будут являться основой сайта.

Возможно, не все будет понятно с первого раза, так что настройтесь серьезно. И не надо пугаться, как говориться: глаза боятся, а руки делают.

Итак, приступаем к изучению таблиц html.

7.1 Создание html таблиц

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

То есть, сначала происходит создание html таблиц, которые являются скелетом сайта, а потом происходит наращивание графики и тому подобных вещей.

Итак, создание таблицы html начинается с написания тегов <table> </table>. Аналогично другим парным тегом, они обозначают начало и конец таблицы html.

Внутри тегов <table> </table> пишем пару тегов <tr> </tr>, это создание строки в таблице.

Получилось так:

<table>

<tr>

</tr>

</table>

Эта таблица html имеет одну строку, если нужно четыре строки пишем так:

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

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

<table>

</table>

Таблица html с одной ячейкой.

Чтобы таблицу было видно, в ней нужно что-нибудь написать

Теперь займемся созданием html таблицы с четырьмя ячейками.

<table>

</table>

Готово. Две строки и два столбца, в итоге четыре ячейки. Помните о правилах вложенности.

1 ячейка	2 ячейка
3 ячейка	4 ячейка

Сначала пишутся теги таблицы - <table> </table>, затем теги строк - <tr> </tr>, затем теги столбцов или ячеек - <td> </td>. И только в такой последовательности.

Теги <tr> </tr> должны находиться между тегами <table> </table>, а теги <td> </td>, между тегами <tr> </tr>. И нельзя ничего путать, особенно <tr> с <td>.

А вот содержимое ячеек нужно писать между <td> </td>. Это тоже очень важный момент в создании html таблиц.

Теперь, когда мы написали код таблицы html, давайте заполним ячейки. Делаем это так:

<table>

<tr> <td>1 ячейка, строка 1</td> <td>2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

Наша таблица получится такой:

1 ячейка, строка 1	2 ячейка, строка 1
3 ячейка, строка 2	4 ячейка, строка 2

Сейчас, для закрепления материала, вставим html код таблицы на нашу страницу.

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</a>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

<a href="http://mm-business.ru">Работа через Интернет</a>

<table>

<tr> <td>1 ячейка, строка 1</td> <td>2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

</center>

</body>

</html>

А теперь посмотрим, что получилось > создание таблицы html .

Важно понимать, как создаются html таблицы, ведь придется использовать несколько таблиц на странице, и даже создавать одну таблицу внутри другой таблицы html.

Попробуем это сделать.

<table>

<table>

</table>

</td> <td>2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

	2 ячейка, строка 1
3 ячейка, строка 2	4 ячейка, строка 2

Возникает вопрос, почему не видно внутреннюю таблицу html? Все дело в том, что если в таблице нет данных, то ее не будет видно, а для того чтобы увидеть таблицу, нужно прописать параметр border="" в теге

и дать ему значение 1. Вот так:

Этот параметр определяет размер границ таблицы html. По умолчанию его значение равно «0», поэтому границ и не было видно. Можно придать значение не 1, а 2 или 5, тогда границы таблицы html будут толще.

Учтя выше сказанное, таблица должна принять следующий вид:

1 ячейка	2 ячейка	2 ячейка, строка 1
3 ячейка	4 ячейка
3 ячейка, строка 2	4 ячейка, строка 2

Ее html код такой:

<tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr>

<tr> <td>3 ячейка</td> <td>4 ячейка</td> </tr>

</table>

</td> <td>2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

7.2 Таблицы html и изменение их размеров

Теперь поговорим о том, как задавать размер при создании html таблиц. Для этого вспомним параметры, изученные при вставке картинок html. Это width="" height="", ширина и высота соответственно.

Эти параметры нужно писать в теге <table>, а значение указывать в пиксилях, вот так:

Этой командой мы указали, что таблица должна иметь размер 120 на 90 пикселей.

Параметры ширины и высоты можно задавать не только самой таблице, но также и ее ячейкам, для этого width="" height="" нужно прописывать в тегах изменяемых ячеек, то есть так:

Это значит, что ячейка будет размером 70 на 50.

Также при создании html таблиц, можно одновременно задавать параметры и таблице и ее ячейкам.

Теперь к практике, задайте размеры нашей таблице и ее ячейкам например так:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</a>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

<a href="http://mm-business.ru">Работа через Интернет</a>

<tr> <td width="20" height="90">1 ячейка, строка 1</td>

<td width="300" height="90">2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

</center>

</body>

</html>

Должно получиться так > создание html таблиц .

Если вы что-то не поняли на данном этапе, повторите и разберитесь, таблицы html в работе на дому - очень важная тема.

8. Таблицы в html

После того, как вы создали таблицы в html, указали их размеры, перейдем к заполнению.

В таблицах можно ставить ссылки, изображения, текст. Но все это, должно находиться между тегами <td> </td>.

Также можно закрасить ячейки любым цветом, использую параметр bgcolor="", и указывая цвет, например <td bgcolor="#FA2145">Содержимое ячейки</td>.

8.1 Создание в html таблиц

Также важным параметром в создании в html таблиц является background="", он позволяет использовать в виде фона картинку. Для этого в его значении нужно указать путь к этой картинке.

Например, так:

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

А вторую ячейку залить любым цветом. Как сохранить картинку, разбиралось на предыдущих уроках создания сайта.

Изменяем наш код, в итоге получается следующие:

<html>

<head>

<title>Название страницы моего первого сайта</title>

</head>

Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>

</a>

<i>учимся выделять html текст курсивом</i>

<br>

<b>изучаем новые html теги текста</b>

<a href="http://mm-business.ru">Работа через Интернет</a>

<tr> <td width="20" height="90" background="fon.gif">1 ячейка, строка 1</td>

<td width="300" height="90" bgcolor="#24FAF3">2 ячейка, строка 1</td> </tr>

<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>

</table>

</center>

</body>

</html>

Теперь наша страничка выглядит так > заполнение таблиц в html .

8.2 Таблицы html. Подведение итогов

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

Еще один момент параметр background="" нужно писать в теге ячейки <td>. Можно его написать и в теге строки <tr>, но в некоторых браузерах это не работает.

Вот и все, что касается создания таблиц в html. Рекомендую потренироваться, создавая разные таблицы и заполняя их различными фоновыми рисунками. Это поможет лучше понять, как строятся таблицы в html. И чем скорее вы разберетесь в этой теме, тем быстрей сможете работать через Интернет на дому.

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

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

9. Уроки создания сайта. Инструкция создания сайта из 2-х страниц

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

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

Итак… Сайт будет на тему Интернет. Почему? Да не почему, вот так мне захотелось. О том, как правильно выбрать тему для создания успешного сайта, поговорим потом.

9.1 Пошаговое создание сайта

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

Схема будет такова:

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

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

Все понятно? Тогда приступаем. Открываем блокнот и пишем основные теги, которые должны присутствовать в любом сайте.

<html>

<head>

</head>

<body>

</body>

</html>

Далее, используем теги <center> </center> для выравнивания содержимого по центру. Об этом говорилось на предыдущих уроках создания сайта.

Теперь напиши название страницы в тегах <title>Сайт об Интернете. Полезные ссылки и другая информация.</title>

Далее перейдем к созданию основы сайта, каркаса. Для этого используем таблицы html следующего вида:

Вот ее html код:

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Мы использовали в теге <td> новый параметр colspan="", со значением 2. Это команда указывает, что данная ячейка должна быть равной двум предыдущим.

Это относится к шапке сайта и к низу сайта. Так как эти ячейки как бы, созданы из двух объединенных.

Продолжим наш урок создания сайта. Зададим размер ячейкам таблицы и сделаем разметку, то есть где будет меню и так далее.

Наш сайт будет иметь размеры 900 на 600. Эти параметры нужно внести в главный тег таблицы <table>.

Теперь разберемся с размерами ячеек.

Шапка сайта будет 900 на 162 пикселя, меню сайта будет 205 на 387 пикселей, область под контент 695 на 387, низ сайта 900 на 51.

Итак, внесем все эти размеры в параметры ячеек, а также сделаем разметку

<tr>

<td colspan="2" width=900 height=162>Шапка сайта</td>

</tr>

<tr>

<td width=205 height=387>Меню сайта</td>

<td width=695 height=387>Область под контент</td>

</tr>

<tr>

<td colspan="2" width=900 height=51>Низ сайта</td>

</tr>

</table>

Готово. Заметьте, что значения в параметрах width = height=, написаны без кавычек, такое допускается.

9.2 Урок создания 2-х страничного сайта, продолжение

Теперь займемся вставкой картинок в шапку сайта, а также созданием фона меню.

На предыдущих уроках создания сайта, мы разбирали эти вопросы. Вспомним.

Тег <img> отвечает за вставку картинок, а параметр background="" за создание фона, на котором можно писать.

Сейчас вставим следующие картинки:

Эту, в шапку сайта

Эту сделаем фоном меню

Эту сделаем фоном области под контент.

Эту, в низ сайта

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

В результате урока создания сайта должен получиться следующий html код:

<html>

<head>

<title>Сайт об Интернете. Полезные ссылки и другая информация.</title>

</head>

<body>

<tr>

</tr>

<tr>

<td width=205 height=387 background="menu.jpg">Меню сайта</td>

<td width=695 height=387 background="kontent.jpg">Область под контент</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html>

Такой должен быть результат этого урока создания сайта.

Заметьте, что фразы «шапка сайта» и «низ сайта» были удалены, так как вместо них мы вставили картинки. А фразы «меню сайта» и «область по контент» остались, потому что у этих ячеек мы сделали фон.

На следующем уроке создания сайта, мы доведем до ума получившуюся страницу и создадим вторую.

Если все получилось, следуйте далее, а если нет, следуйте пошаговому созданию сайта, возможно у вас ошибки в html коде.

10. Пошаговое создание сайта

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

10. Пошаговое создание сайта, продолжение урока

Для того чтобы соединить все элементы графики воедино, уберем границы таблицы html. Хоть их и не видно, но они есть.

В главную таблицу, в тег <table> поместим два параметра cellpadding=0 и cellspacing=0, со значением 0, кавычки можно опустить. Эти параметры обирают все границы.

Двигаемся дальше в пошаговом создании сайта. У нас образовался промежуток между шапкой и сайтом, его необходимо убрать.

Для этого поместим параметр topMargin="" в тег <body> и придадим ему значение 0, то есть <body topmargin="0">. После этого промежуток должен удалиться.

Теперь разберемся с текстом. Он находиться по центру, а должен вверху. Для этого преминем еще один параметр, которые укажем в ячейках меню и области под контент. Вот он, valign="", со значением top.

Итак, учтя все изменения должен получиться следующий код:

<html>

<head>

<title>Сайт об Интернете. Полезные ссылки и другая информация.</title>

</head>

<tr>

</tr>

<tr>

<td width=205 height=387 background="menu.jpg" valign="top">Меню сайта</td>

<td width=695 height=387 background="kontent.jpg" valign="top">Область под контент</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html>

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

10.2 Пошаговое создание 2-ой страницы сайта

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

Вы создали первую страницу сайта html код, которой указан выше. Эта страница должна иметь название index.html то есть весть код в блокноте нужно сохранит под именем index.html.

Если у вас другое название - переименуйте. И следите за тем, чтобы страница не называлась index.html.txt.

Вот такое правило. Главная страница сайта обязательно должна иметь название index с расширением .html или .php - это расширение динамической страницы написанной на языке программирования PHP, но об этом будет рассказано потом.

Могут быть и другие расширения, например .htm, но главная страница должна носить имя index.

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

Итак, у нас две одинаковых страницы с разными именами: index.html и page2.html

Займемся редактированием page2.html.

Откройте ее при помощи блокнота и внесите изменения. Допустим, на ней будут размещаться ссылки на разные ресурсы.

Значит, нам нужно изменить название страницы в тегах <table> </table> и написать другой контент, например ссылку на сайт mm-business.ru

Следуйте пошаговому созданию сайта. Получает следующий html код:

<html>

<head>

<title>Ссылки на полезные ресурсы Интернета.</title>

</head>

<tr>

</tr>

<tr>

<td width=205 height=387 background="menu.jpg" valign="top">Меню сайта</td>

Здесь будут ссылки на полезные ресурсы Интрента

<a href="http://mm-business.ru">Работа через Интернет</a>

</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html>

Вторая страница пошагового создания сайта выглядит так > 2 страница сайта.

Осталось только связать эти страницы между собой. Для этого в ячейке предназначенной под меню, поставим две ссылки: одну на главную страницу, другую на page2.html

Обратите внимание на то, что обе эти ссылки должны быть и на index.html и на page2.html, причем в одном и том же месте.

Это необходимо, так как меню является общим для всего сайта.

Вносим изменения в страницу index.html и получаем код:

<html>

<head>

<title>Сайт об Интернете. Полезные ссылки и другая информация.</title>

</head>

<tr>

</tr>

<tr>

<td width=205 height=387 background="menu.jpg" valign="top">Меню сайта

<a href="index.html">Главная</a>

<a href="page2.html">Ссылки</a>

</td>

<td width=695 height=387 background="kontent.jpg" valign="top">Область под контент</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html>

Все. Сайт готов и он выгляди так > результат пошагового создания сайта.

Остановимся на важных моментах. Обратите внимание на добавление тегов <br>, он нужен для переноса на другую строчку.

Обе страницы и графика должны находиться в одной папке. Главная страница должна называться index.html

Содержание ячейки меню должно быть одинаково на обеих страницах.

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

Сайт получился не очень крутым, но и его уже можно разместить в Интернете.

А что дальше?

Что вас ждет в дальнейшем? Вы прошли только первую часть пошагового обучения. Впереди еще две. После прохождения, которых можно открыть свой бизнес в Интернете и начать работать через Интернет.

практическая работа "Подробная инструкция создания сайта и возникающие при этом трудности" скачать

Подобные документы

Интернет-технологии. Создание сайта
Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

методичка [1,9 M], добавлен 06.07.2011
Разработка сайта АлтГТУ имени И.И. Ползунова с использованием HTML и Java
Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.

курсовая работа [61,3 K], добавлен 29.01.2016
Создание html-страниц. html-код
Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.

контрольная работа [16,0 K], добавлен 19.06.2014
Web-сайт, Html-программирование, дизайн сайта, front page, macromedia Dreamweaver
Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

дипломная работа [86,7 K], добавлен 25.03.2013
Создание Web-сайта
Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.

курсовая работа [2,5 M], добавлен 18.07.2014
Использование языка HTML для создания сайта
Создание основы интернет-сайта - набора таблиц, которые расположены в нужном порядке. Использованные теги и их атрибуты. Кодовое оформление сайта, наложение второго слоя. Стильный текст в HTML. Использование скриптов для большей информативности сайта.

методичка [813,6 K], добавлен 08.11.2013
Создание сайта-визитки предприятия ООО "Фаст Студия"
Рассмотрение визуального HTML-редактор Dreamweaver. Определение структуры сайта ООО "Фаст Студия". Содержание страниц "Главная", "Портфолио", "Контакты". Теги форматирования текста и способы его оформления с использованием подключаемых таблиц CSS.

курсовая работа [1,4 M], добавлен 18.08.2013
Разработка презентационного сайта для ИП Тимонин Е.Н. г. Кунгур, Пермского края
Подходы к созданию сайтов. Обоснование необходимости наличия персонального сайта компании ИП Тимонина Е.Н.. Структура, интерфейс, этапы создания сайта. Описание кода страниц. Создание web-страниц и наполнение их информацией. Верстка сайтов с чистым кодом.

дипломная работа [1,5 M], добавлен 03.06.2015
Создание Web сайта на языке html
Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.

контрольная работа [126,9 K], добавлен 18.11.2010
Создание локальной версии Web-сайта компании
Создание локальной версии Web-сайта компании, оказывающей услуги в сфере "Дизайн помещений". Логическая структура сайта – набор тематических рубрик с распределенными по разделам документами. HTML–коды Web-страниц. Теоретические аспекты создания сайта.

курсовая работа [94,0 K], добавлен 10.05.2011

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

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.