- •1 Методы и структора и сопровождение сайта web Первый способ создания сайта
- •Второй способ создания сайтов
- •Третий способ создания сайтов
- •2 Основные теги html – языка
- •Текст документа
- •Форматирование текста документа
- •3 Формирование текста и размещение графики. Списки и формы наWeb- сайты и Web- страницы
- •4. Создание и оформление web-страниц
- •5 Гиперссылки на Web- страницах
- •1. Открыть окно текстового редактора Блокнот.
- •Задание 1 : открыть Блокнот и написать английскими буквами теги
- •Внутри тегов написать
- •Задание 4 :
- •6 Таблицы на Web- страницах
- •7 Фреймы.Ccs- технология
Государственное бюджетное профессиональное образовательное учреждение Воронежской области
«Воронежский государственный промышленно-технологический колледж»
Учебно методисеские пособие по дисциплине Информационные технологии в профессиональной деятельности часть 2
для студентов специальности
Садово-парковое и ландшафтное строительство
Составитель: преподаватель С. А. Смирнягин
Воронеж 2017
Содержание
1 Методы и структора и сопровождение сайта web 3
2 Основные теги html – языка 5
3 Формирование текста и размещение графики. Списки и формы наWeb- сайты и Web- страницы 8
4 Создание и форматирование веб страниц 10
5 Гиперссылки на Web- страницах 16
6 Таблицы на Web- страницах 19
7 Фреймы.CCS- технология 21
Литература 24
1 Методы и структора и сопровождение сайта web Первый способ создания сайта
Если использовать самый простейший способ, то действовать нужно в следующей последовательности:
1. создание шаблона на языке HTML;
2. копировать код изменяемых элементов и вынести его в отдельный файл, которому присваивается расширение «tpl»;
3. стираем код измененных элементов на страницах (только в такой последовательности);
4.на месте стертого HTML-кода на страницы вводятся только одна строчка РНР-кода. (В строчке этой – прописан путь до того самого файла с расширением «tpl» (такие строчки PHP-кода еще называют «инклудами»)).
5. меняем расширение страничек HTML, то есть мы меняем «html» на «php».
Вот такой вот незамысловатый способ, несомненно, облегчит жизнь начинающему создателю сайтов. Многие начинающие сайтостроители пользуются таким вот способом до сих пор.
Второй способ создания сайтов
Второй способ создания сайтов будет немного посложнее. Тут используется системы управления контентом (CMS), или как пишут на форумах, для легкой ориентировки — с помощью «движка». Таких «движков» тьма тьмущая по всей паутине. Большинство из них сегодня платные, но если покопаться, то можно найти и бесплатные.
В принципе самые простые (сравнительно) это «WORDPRESS» и «Joomla». Именно с помощью «WORDPRESS» создано большинство блогов.
Достоинств у такого «движка» вагон и маленькая тележка — это удобство и никаких лишних вливаний средств, то есть он бесплатный, невероятная простота установки и настройка, и конечно к нему есть масса плагинов, при подключении которых можно невероятно расширить функции этого самого «движка». Минус только в том, что создатели плагинов не всегда заботятся об их совместимости.
А теперь о втором «движке» под названием Joomla. Этот «движок» — уникальная вещь, о которой говорить можно долго, но отнюдь не нудно: с помощью его можно создавать порталы, блоги и еще кучу разных фишек в таком же роде. Четыре слова — «Сайт русской поддержки Joomla» (а точнее один из сайтов) и у вас все получится!
Третий способ создания сайтов
И третий способ создания сайтов, так сказать для людей либо ленивых по своей природе, либо с нехваткой на это дело времени.
Вам нужно будет просто на просто открыть «блогер», «живой журнал» или что-нибудь созданное на этом подобии и завести аккаунт. Там создание блога не займет много времени — на это потребуется все лишь несколько секунд или минут (все ориентируются на сайтах по-разному).
Тут конечно существует один такой большой и жирный минус! На вот таких вот сайтах где вы создаете аккаунт, у вас нет ни имени, ни рода, ни племени. Прикрыть вас могу быстрее, чем кто-либо скажет: «Безперспективняк!» Прав у вас как таковых — мизер и развернутся негде — везде возведены стены из запретов.
В общем, третий способ самый легкий, но и самый незначительный и не уважаемый, поскольку все хотят быть индивидуальными, а не идти под одной гребенкой со многими. Для начинающих блогеров — это конечно как маленький тренинг. Но конечно вот таким вот блогам до «WORDPRESS» как до другого края вселенной.
Тут только три способа создания сайтов. Но на этом средства создания и сопровождения сайта не заканчиваются. Многие вебмастера используют сторонние программы, например Photoshop. Но это уже тема другой статьи.
Структура htmi- документа
HTML-документ заключается в теги <html> и </html>. Между этими тегами располагаются два раздела: раздел заголовка ( элемент head ) и раздел тела документа ( элемент body для простого документа либо элемент frameset, задающий набор кадров ). Все указанные элементы имеют начальный и конечный тег.
Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и элементы, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.
Формально, согласно спецификации HTML 4+, первым в документе должен указываться элемент doctype, сообщающий браузеру об использованной версии HTML ( а версии, как уже говорилось, различаются наборами допустимых элементов и правилами их объявления ). В элементе doctype указывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (Document Type Definition). На практике же этот элемент зачастую опускают без ущерба для отображения документа.
Вот пример самого простого HTML-документа :
<!doctype HTML public"-//W3C//Dtd HTML 4.0 Frameset // EN" "http://www.w3.org/tr/REC-html40/frameset.dtd">
<html>
<head>
<title>Самый простой HTML-документ</title>
</head>
<body>
Проще не бывает
</body>
</html>
основные теги htmi- языка
<td rowspan="#"> |
Указывает количество строк, объединенных в одной ячейке. |
<td nowrap> |
Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
<td width="#"> |
Задает ширину ячейки таблицы в пикселях или процентах. |