Оглавление
Как научиться создавать сайты с нуля?
Создаем текстовый веб документ в Блокноте
Создаем правильный (грамотный) одностраничный html-документ
Разница между веб документами с расширениями html и htm
Правильный DOCTYPE в HTML5 это <!DOCTYPE HTML>
Элементы форматирования веб текста
Параграфы (выравнивание текста)
Цвет фона и текста. Размер и гарнитура шрифта
Что еще нужно знать для создания сайтов?
Фреймворки и другие инструменты для упрощения разработки
В программе Windows Блокнот или аналогичной создайте любой текст, например, «Мой сайт» (рис. 1).
Рис. 1. Создание в Блокноте текстового документа
Сохраните документ командой Файл-Сохранить Как дайте этому документу название index.html (рис. 2). Тип файла – все файлы (это важно).
Рис. 2. Даем документу название
Рис. 3. Открываем файл в блокноте для редактирования
Откройте сохраненный файл с помощью браузера, например, Internet Explorer и просмотрите результат. Так создается простейший веб документ для Интернет. Еще примеры:
Разметка элементов языка HTML сопровождаются специальными скобками: открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. При этом, как правило, документ состоит из двух частей – заголовка и тела.
<head> </head> - заголовок документа.
<body> </body> - тело документа.
В заголовке <head> </head>, используя теги <title> </title>, можно прописать название документа.
Для примера создадим простейшую текстовую HTML-страницу в программе Блокнот. Для этого надо создать текстовый файл (*.txt) и сохранить его с расширением *.htm (или *.html). Переименовать *.txt в *.htm удобно в любом файловом менеджере (коммандере), например, в NC или ТС, а просмотреть готовую страницу можно будет в любом браузере. Итак, листинг 1:
Листинг 1. Простейший html - документ
<HTML>
<HEAD>
<title>НАЗВАНИЕ ДОКУМЕНТА</title>
</HEAD>
<BODY>СОДЕРЖАНИЕ ДОКУМЕНТА</BODY>
</HTML>
Совет
Писать любой тег можно в любом регистре (не важно большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху - вниз.
Теперь сохраняем и меняем расширение TXT на HTM (рис. 4 и 5).
Рис. 4. Меняем расширение TXT на HTM
Рис. 5. Вид в браузере простейшего HTML-документа, созданного в программе Блокнот
Итак, создать одностраничный текстовый документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на на *.htm или *.html. Имя такого файла для главной страницы сайта принято писать, как index. Таким образом, здесь и далее сохраняем все наши однастаничные веб документы как index.html.
Hyper Text Markup Language (HTML) — стандартный язык гипертекстовой разметки документов, образующих веб-ресурсы. Файлы, написанные на html, обычно имеют расширение имени *.HTM или *.HTML. Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению. Такое расширение происходит от полного названия языка гипертекстовой разметки – Hyper Text Markup Language. Последнее слово опускается, и получается htm. Ранее это было продиктовано необходимостью ограничения на количество букв в расширении имени файла: старые операционные системы понимали только три знака в расширении файла. Сегодня таких условий нет и от наличия или отсутствия одной последней буквы в веб документе ничего принципиально не меняется. Однако при работе в старых операционных системах и программах под них пользоваться придется расширение *.htm. Итак, буква «l», образуется от последнего слова аббревиатуры HyperText Markup Language. Файлы с расширением имени html более современны и распространены сегодня. Расширение htm устарело.
Язык HTML был создан Тимом Бернерсом-Ли в 90-х годах прошлого века. Изначально главной функцией первой версии HTML было корректное, без каких-либо структурных искажений, воспроизведение текста на различных устройствах вывода информации. За прошедшее время HTML претерпел существенные изменения и значительно расширил возможности верстки документов. Язык имеет несколько версий:
HTML 1.0 — начало 90-х годов. Спецификаций не существует, так как единого официального стандарта языка на тот момент не было. Язык был ориентирован только на обработку текста и применение к нему атрибутов — жирный текст, курсив etc.
HTML 2.0 — появилась поддержка форм.
HTML 3.2 — появилась возможность создания таблиц, отображение математических формул, эффект обтекания изображений.
HTML 4.0 — были отменены некоторые элементы HTML, взамен которых было предложено использовать таблицы стилей CSS. Была добавлена поддержка скриптов и фреймов.
HTML 4.01 — доработанная версия 4.0.
HTML 5 — 2010-й год — нынешнее время.
DOCTYPE указывает тип документа (веб документ). Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу. Валидация сайта (проверка сайта на ошибки кода) позволяет следить за правильным отображением сайта в разных браузерах. Валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой.
Элемент <! DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>. Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка HTML имеет номер пять и доктайп для нее должен выглядеть так - <! DOCTYPE html>.
Пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
Это основное содержимое страницы.
</body>
</html>
Здесь тег <meta charset="utf-8"> задает правильное отображение русского языка на веб странице. Как выглядит этот пример в браузере смотрите по данной ссылке.
Еще пример:
Ниже рассматриваются основные теги, применимые к тексту документа.
В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
Весь текст внутри таких скобок считается заголовком. Размер H1 соответствует самому крупному шрифту, а размер H6 — самому мелкому. Вот пример документа с использованием заголовков первого (H1) и второго (H2) уровней (Листинг 2):
Листинг 2. Меняем кегль (размер) шрифта
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1> Заголовок первого уровня</H1>
<H2> Заголовок второго уровня</H2>
</BODY>
</HTML>
Этот код в браузере выглядит так:
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой «красной» строки. Абзац создается с помощью тега <p> таким образом:
<!DOCTYPE html>
<html>
<head>
<title>Это заголовок</title>
</head>
<body>
<p>
Это абзац.
</p>
<p>
Это еще один абзац.
</p>
<p>
И еще один абзац.
</p>
</body>
</html>
Так код будет выглядеть в браузере:
Разрыв строк, наподобие абзаца, можно задать записью вида <BR> (этот тег задает переход на новую строку). При этом задавать закрывающие скобки </BR> нет необходимости. Но, если закрывающий тег задан, то это не считается ошибкой. Код:
Этот код в браузере:
Параграфы вводятся тегом <p> </p>. С помощью параграфов можно выравнивать текст по центру, по левому (правому) краю, или по ширине. Примеры:
<p
align="center">текст</p> текст выровнен по центру.
<p align="left">текст</p> текст выровнен по левому краю.
<p align="right">текст</p> текст выровнен по правому
краю.
<p align="justify»> текст</p> текст выровнен по ширине (по обоим краям).
Примечание
Если не задавать параграфы, то текст в документе выравнивается по левому краю.
Теперь давайте изучим листинг 3.
Листинг 3. Выравнивание текста документа
<html>
<head>
<title>Выравнивание текста</title>
</head>
<body>
<H1 ALIGN=CENTER>Текст по центру</H1>
<BR>
<BR>
<P ALIGN=RIGHT> Текст по правому краю</P>
</body>
</html>
Как видим, здесь имеется два выравнивания: по центру и по правому краю. Остальные теги вам также уже знакомы.
Еще пример:
Цвет фона и текста определяется шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного (Red) цвета, вторая - для зеленого (Green), и третья пара - для синего (Blue) цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Пример изменения насыщенности красного цвета:
Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML, которая есть в Интернет:
На веб страницах можно также использовать текстовое определение цвета: BLUE, RED и т.п., например, чтобы сделать цвет фона страницы серым, можно написать
|
<BODY BGCOLOR="#808080"> или <BODY BGCOLOR="GRAY">. Эти записи равноценны. |
Вот несколько примеров цветов в их текстовом и шестнадцатеричном коде:
|
Черный BLACK #000000 |
|
Зеленый GREEN #008000 |
|
Серебро SILVER #C0C0C0 |
|
Серый GRAY #808080 |
|
Белый WHITE #FFFFFF |
|
Желтый YELLOW #FFFF00 |
|
Красный RED #FF0000 |
|
Голубой BLUE #0000FF |
Для изменения цвета и размера шрифта используется метка <FONT> </FONT>. Ее атрибуты:
COLOR="#hhhhhh" – цвет шрифта;
SIZE="n" - размер шрифта;
FACE="имя_шрифта" – гарнитура шрифта (arial, verdana, helvetica, sans-serif и другие).
Пример использования метки <FONT> приведен в листинге 4:
Листинг 4. Цвет фона и текста. Размер и гарнитура шрифта
<html>
<head>
Текст, размер, гарнитура шрифта
</head>
<body>
<BODY BGCOLOR="GRAY">
<FONT SIZE="10" COLOR="RED" FACE="SANS-SERIF">
12345
</body>
</html>
Как видим по тегам, здесь на сером фоне крупным шрифтом красного цвета и без засечек написаны цифры 12345.
Не обольщайтесь тем, что знание HTML для разметки текста – это все, что нужно знать для создания сайтов. Для того, чтобы научиться самостоятельно создавать с нуля сайты, качественные современные сайты вам понадобятся знания следующих технологий:
1. HTML и CSS
2. JavaScript, jQuery
3. PHP и MySQL
4. любого популярного сайтового движка (WordPress, Joomla, Drupal)
5. понимание того, что такое хостинг и домен
Чем лучше вы разбираетесь в этих технологиях, тем более востребованным специалистом являетесь.
База. То, без чего немыслимо создание сайтов полноценным образом. Именно с языка html начинается создание сайта. Html — это язык разметки гипертекста, с его помощью создается каркас сайта, его структура, разметка. С помощью же языка CSS все эти блоки получают тот внешний вид, который необходимо. Если сравнить это с работой художника, то html — это набросок рисунка, а css — уже раскрашенный в цвета и полностью готовый рисунок. Но нужны обе технологии, потому что пустоту не оформишь, а без оформления сайты выглядели бы совсем невзрачно. Иными словами, html без css может существовать, а наоборот быть не может. HTML — основа всего и база, именно с его помощью формируется структура страниц.
JavaScript — с этим языком любой сайт оживает, начинает реагировать на действия посетителя. Что можно сделать на JavaScript? Массу всего. Например, проверку введенных значений в форму, переключатели, слайдеры, всплывающие окна и много-много другого. Для языка JavaScript написана библиотека jQuery, которая во многом значительно упрощает работу по написанию скриптов и управлению элементами.
Это так называемая back-end разработка, а html, css и js — front-end. Бэк-эндом ее назвали потому, что на внешний вид сайтов php код почти никак не влияет, зато для работоспособности ресурса он имеет просто огромное значение. Почти все движки сайтов написаны на нем. Комментирование, регистрация и авторизация, отзывы, корзина товаров, поиск, галерея, загрузка файлов, обработка форм — все это лишь малая часть того, что реализовывается с помощью php. Ну, а MySQl? Это язык, с помощью которого происходят запросы к базе данных. База данных — одна из самых важных вещей в сайтостроении. Как вы думаете, где хранятся все ваши отзывы и комментарии на многочисленных форумах, профили в социальных сетях и статьи на блогах? Все это хранится в базах данных.
CMS — это
сайтовые движки. Это разработанные специалистами веб-программы, которые
позволяют управлять сайтом в удобной форме через панель управления. Почти все они написаны на PHP.
Соответственно, приступать к изучению работы с движком лучше уже после того,
как вы постигли хотя бы основы php. Нет смысла изучать много движков, в
большинстве случаев вы просто не сможете одновременно усваивать столько
информации. Лучше стать специалистом по какому-то одному движку, чем кое-как
разбираться во всех. И я рекомендую выбрать движок WordPress. Позднее вы
сможете попробовать и другие, когда у вас будет больше опыта.
Время изучения: От пары дней до многих месяцев, потому что движки
имеют разную сложность и порог вхождения. Например, cms Drupal не рекомендуется
для новичков ввиду своей сложности.
Вы, как будущий специалист в области сайтостроения, должны прекрасно понимать, как работать с хостингами и доменами и разбираться в терминах, близких к этим понятиям.
Если вы всегда будете создавать сайты с нуля, используя только сами языки и написание кода, то времени и сил у вас на это уйдет гораздо больше. Реализовать адаптивный дизайн для сайта — это далеко не самая простая задача, особенно если сайт сложный по макету. Но, с css-фреймворком, вроде Bootstrap вы сможете очень легко и быстро делать адаптивные шаблоны, все потому, что в фреймворк вложена система сетки. Это позволяет вам реализовать полную адаптивность, порой не написав ни одной строки css-кода. Параллельный пример можно привести и с javascript. На «голом» javascript порой будет достаточно трудно и попросту неудобно писать какой-то скрипт. Другое дело — использовать библиотеку Jquery, которая упрощает написание скриптов в несколько раз.
Задание 1.
1. Создайте в Блокноте правильный (грамотный) одностраничный html-документ с любым веб текст про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:
2. Фон (BGCOLOR) - серый,
3. Шрифт (COLOR) - синий,
4. Текст выровнять (ALIGN) по центру,
5. Размер шрифта (size) – 16,
6. Гарнитура (face) – ARIAL,
7. Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша» и т.д и т.п.
Задание 2.
В созданном вами одностраничном текстовом сайте поменяйте атрибуты одного (любого) слова:
8. Шрифт – зеленый
9. Размер шрифта – 24
10. Гарнитура – Times
11. Кодировка UTF-8
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head><body bgcolor="GRAY">Моя собака<font size="10" color="BLUE" aling="CENTER" face="ARIAL">
<p>Моя <FONT COLOR="RED"> собака <FONT COLOR="BLUE"> очень пугливая, если побежит за котом, то потом наверняка будет от него убегать. Он очень боится громких звукой (Хлопушек, выстрелов и тд). <FONT SIZE="5"> Его порода Йоркширский терьер,<FONT SIZE="24"> маленькая собака которая гоняет больших собак. Он очень предан нашей семье, ждёт нас всегда никуда не уходя, поэтому мы гуляем без поводка. Мы любим его, а он любит нас.</p>
</font></body></html>
Что такое:
· HTML, CSS, JavaScript, PHP, MySQL, CMS, Хостинг, домен, Фреймворки?
· В чем разница между веб документами с расширениями html и htm?
· Опишите HTML элементы форматирования веб текста - Заголовки H1-H6, Абзацы <BR>, Параграфы <p> </p>.
· Какими командами можно произвести выравнивание HTML текста?
· Как задать Цвет фона и текста, какой это цвет BLACK #000000?
· Для чего нужен <!DOCTYPE HTML>?
· Какое правильное название имени и расширения для сохраненного веб документа?
· Как задать размер и гарнитуру (семейство) шрифта?
· Поясните следующий код:
<BODY BGCOLOR="GRAY">
<FONT SIZE="10" COLOR="RED" FACE="SANS-SERIF">
12345
Что мы увидим в браузере?
· В чем отличие заголовка документа от его названия (<head> </head> от <title> </title>)?
Рабочие листы
к вашим урокам
Скачать
Оглавление
Как научиться создавать сайты с нуля?. 1
Создаем текстовый веб документ в Блокноте. 1
Создаем правильный (грамотный) одностраничный html-документ. 2
Разница между веб документами с расширениями html и htm... 4
Правильный DOCTYPE в HTML5 это <!DOCTYPE HTML>. 5
Элементы форматирования веб текста. 5
Параграфы (выравнивание текста) 8
Цвет фона и текста. Размер и гарнитура шрифта. 9
Что еще нужно знать для создания сайтов?. 11
Фреймворки и другие инструменты для упрощения разработки. 13
6 660 828 материалов в базе
«Информатика (базовый уровень)», Семакин И.Г., Хеннер Е.К., Шеина Т.Ю.
§ 13. Инструменты для разработки web-сайтов
Больше материалов по этой теме
Настоящий материал опубликован пользователем Молочков Владимир Петрович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72 ч. — 180 ч.
Курс повышения квалификации
36/72 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
4 ч.
Мини-курс
8 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.