Доброго времени суток, гости блога и дорогие подписчики. Сегодняшняя статья поможет вам понять, как написать сайт на html с нуля, сложно ли это и сможете ли вы заниматься сайтостроением.
Поэтому я во всех подробностях расскажу, что необходимо узнать и разобрать, чтобы создавать веб-приложения, из каких компонентов состоит простой сервис, опишу распространенные редакторы кода, а под конец статьи приведу пример небольшого сайта. Давайте приступим к разбору материала!
А смогу ли я заниматься веб-разработкой?
Очень многие люди в начале своего пути изучения языков программирования, библиотек, паттернов и других технологий задают себе эти вопросы: «А смогу ли я? А стоит ли вообще начинать?».
Здесь я могу сказать только одно, пока не попробуете – не поймете. В добавок к этому в IT-сфере одну попытку нельзя назвать полноценной. Эта область знаний очень обширна и относительно новая. С каждым годом она пополняется новыми технологиями, открытиями и алгоритмами. Поэтому не бойтесь начать и пытаться программировать, пробовать что-то новое!
Безусловно, IT-сфера требует от ее представителей множество знаний, умений и логического мышления. Однако все это достижимо, если работать и стараться. К тому же не все отрасли являются тяжелыми для изучения. Как, например, сайтостроение.
Зная только основы html – языка гипертекстовой разметки, и css – каскадных стилевых таблиц – можно создать приличный лендинг (одностраничный сайт, который обычно используют как визитку, портфолио и т.д.), информационные сервисы, новостные ресурсы и т.д.
На страницах моего блога вы сможете найти множество обучающих статей для новичков с конкретными примерами кода и пошаговыми инструкциями. Если этого вам будет мало, то в интернете в свободном доступе выложено огромное количество книг, курсов, видеоуроков на ютубе и примеров.
Основы языка гипертекстовой разметки
Для тех, кто не знает, html – это язык разметки гипертекста. Он включает в себя определенные элементы управления – теги, благодаря которым и производится разметка страниц. Так, с их помощью создаются абзацы и заголовки, изображения и ссылки, блоки объектов, кнопки и множество других элементов.
На сегодняшний день существует и обновленная спецификация, новая платформа – html5.
Каждый документ с кодом на html имеет расширение .html или .htm и включает в себя базовый каркас, т.е. минимальный стандартный текст, который всегда присутствует при создании веб-приложения. Он выглядит следующим образом:
Все существующие теги для лучшего понимания общей картины можно приблизительно поделить на 8 групп:
- Теги обязательного верхнего уровня;
- Теги, необходимые для заголовков;
- Блочные единицы;
- Строчные единицы;
- Универсальные элементы;
- Теги табличных представлений;
- Разнообразные виды списков;
- Фреймы.
Для того, чтобы окончательно понять, что к чему, ниже я прикрепил таблицу с описанием основных тегов.
| Верхний уровень Это обязательные теги, без которых веб-страница не пройдет валидацию и может некорректно отображаться в браузерах. | |
| <html></html> | Включает в себя все последующие элементы и контент. Указывает, что данный файл является html-документом. |
| <head></head> | Содержит информацию, которая в дальнейшем не отображается в теле документа, но является важной для работы программы и поисковых роботов. |
| <body></body> | Определяет видимую часть тела файла. В эту часть вносится основная разметка веб-сайта. |
| Заголовок документа Определяют название страницы и хранят информацию для поисковых роботов и других аналогичных программ браузера | |
| <title></title> | Отвечает за наименование документа. |
| <meta> | Хранит в себе информацию для поисковых систем. |
| Блочные единицы Занимают доступную ширину отображаемой страницы и всегда начинаются с новой строки | |
| <div> | Универсальный элемент. Используется для разметки блоков текста, группы объектов и создания отдельных частей страниц (блочная верстка). |
| <h1>,…,<h6> | Парные теги заголовков. |
| <p> | Используется для создания абзацев. |
| Списки | |
| <ol></ol> | Создает нумерованный перечень. |
| <li></li> | Определяет пункты списка. |
| <ul></ul> | Создает ненумерованный перечень. |
| Таблица | |
| <table></table> | Задает таблицу |
| <tr></tr> | Определяет строку таблицы |
| <th></th> | Определяет шапку страницы |
| <td></td> | Определяет ячейки таблицы |
| Строчные единицы Это теги, которые могут входить в состав других элементов языка разметки | |
| <a> | С его помощью создаются анкоры (ссылки). |
| <b></b> | Задает жирное начертание текста. |
| <i></I> | Создает курсивный шрифт. |
| <img> | Элемент, предназначенный для отображения изображений и гиф-анимаций. |
Вот вы и познакомились с основными тегами языка, с помощью которых уже можно сверстать что-то приличное. Однако разметка поможет вам только правильно разместить контент, а вот для красивого оформления вам понадобятся знания css.
Что еще нужно для создания сайтов?
Как я уже оговорился, вам понадобятся знания каскадных таблиц стилей, т.е. css. Данный инструмент содержит в себе свойства и их различные значения. Благодаря ему можно редактировать виды шрифтов, задавать цветовую палитру, красиво оформлять, выравнивать и указывать размеры блокам, медиафайлам, создавать анимации и многое другое.
Стили можно подгружать с отдельного файла (обычно его называют style.css), прописывая в элементе <head> ссылку подключения вида:
<link rel=»stylesheet» href=»style.css» />
Также можно внедрять css прямо в html-текст. Как думаете каким образом? Правильно, через тег. Для этого стоит в том же хедере прописать парный элемент <style></style> и в него вписать свойства со значениями.
Помимо уже описанных двух механизмов иногда требуется подключать такой язык, как JavaScript и его библиотеку jQuery. Они увеличивают возможности программы, позволяя обрабатывать запросы, формы регистрации и входа в аккаунт. Также их используют для программирования определенной логики приложений, обработки неких событий, формирования корзины покупок и т.д.
Это уже более сложные инструменты управления программой. А пока вам стоит изучить первые два.
В чем же можно писать код?
На самом деле для простых примеров или при отсутствии специальных визуальных редакторов, можно воспользоваться обычными текстовыми. Скажу вам даже больше. Программировать можно и в «Блокноте». Просто под конец работы документ стоит сохранить в определенной кодировке и с указанным выше расширением. Если вам интересно, как это делается, то найдите на моем блоге статью о редакторах кода.
Более профессиональными и удобными программами считаются Notepad++, Sublime Text 3. Это популярные продукты для редактирования и проверки кода, которые обладают рядом преимуществ:
- Подсвечивают переменные, функции, теги и другие элементы разными цветами, что увеличивает читабельность и восприятие кода, а также способствует быстрому нахождению ошибок;
- Проверяют код на ошибки и подсвечивают их в случае обнаружения;
- Проводят валидацию;
- Позволяют проводить быстрый поиск по тексту.
Однако здесь стоит выделить Sublime Text 3, так как это не все его возможности.
Sublime Text 3 очень мощный кроссплатформенный текстовый редактор, который поддерживает всевозможные плагины на языке программирования Python.
Помимо этого, продукт различает и поддерживает множество языков, что не свойственно для редакторов. К ним относятся: C-подобные, перечисленные выше, Java, всевозможные веб-языки, SQL, Haskell, R, Ruby, MATLAB, D и другие.
Если вы хотите прочувствовать всю прелесть программирования в профессиональной среде, то скачайте описанный редактор. А про его настройку прочитайте на моем блоге.
Результат нужно увидеть своими глазами
Чтобы показать вам, дорогие читатели, как при помощи перечисленных инструментов можно создать простой, но приличный сайт, я решил сверстать пример и прикрепить его к публикации.
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 |
<style>
body {
padding:0;
margin: 0;
background: url(https://kvest-spb.com/img/kvest-minastirit/photo00.jpg) repeat-y scroll;
background-size: cover;
}
header{
background: url(https://img0.cfstatic.com/wallpapers/e6cbeca78c026a3bd1f64be1b27541c8_large.jpeg) top center no-repeat fixed;
background-size: cover;
border-bottom: 9px double #FFFFF0;
padding: 45px;
text-align: center;
color: #FFFFF0;
font-size: 27px;
text-shadow: 0 0 9px #F0FFFF;
font-family: cursive;
}
.content, footer{
background-color: rgba(24, 16, 20, 0.9);
width: 80%;
margin: 0 10% 0 10%;
font-size: 18px;
color: #F0FFFF;
text-align: center;
}
.content > h1 {
padding: 13px;
text-shadow: 0 0 9px #F0FFFF;
text-decoration: underline;
}
img {
float: left;
}
.photo {
display: inline-block;
}
footer {
margin-top: 15px;
color: #F0FFFF;
bottom: 0;
}
footer >h2 {
text-shadow: 0 0 9px #F0FFFF;
}
</style>
|
Квест-комнаты от компании «Mystery»
Вы попадете в мир тайн, где только ваши способности помогут вам выбраться из ловушек!
Закажите игру в одной из квест-комнат и станьте детективами, распутайте все головоломки и раскройте дело.
«Изоляция» приведет вас в постапокалиптический мир, где люди живут в бункерах и спасаются от мутантов. Найдите вакцину от мутации и выберетесь из комнаты.
Комната по мотивам известной истории ужасов.
Вы проснулись после летаргического сна и вам необходимо выбраться из «Склепа».
===========================
Чтобы узнать больше всего полезного в области верстки, подписывайтесь на мой блог и читайте публикации. Не забывайте делиться ссылками на интересные статьи с друзьями. Желаю удачи в обучении! Пока-пока!
С уважением, Роман Чуешов
В примерной программе по информатике и ИКТ на
тему “Коммуникационные технологии” отводится
всего 12 часов и предлагается создать Web-страничку
с использованием шаблонов. На тему
“Мультимедийные технологии” выделяется 8 часов,
но если в образовательном учреждении
информатика изучается на пропедевтическом
уровне уже в 5, 6 и 7 классах, то целесообразно
перенести изучение мультимедийных технологий в
пропедевтический курс и тогда можно увеличить
время на изучение коммуникационных технологий, а
точнее, можно добавить тему “Создание Web-сайтов
на языке HTML” в 8 классе.
Освоение технологии создания сайтов
рекомендуется начать с языка разметки
гипертекста HTML в программе Блокнот, что является
первоосновой в данном направлении. Конечно, за 8
часов невозможно изучить весь язык HTML, но можно
показать назначение и применение основных тегов
языка. Если ученик заинтересуется технологией
создания сайтов, то сможет продолжить изучение
материала самостоятельно или на соответствующих
курсах, кружках или факультативах.
Представленное методическое пособие прошло
неоднократную опрабацию в 8-х классах гимназии
№441 Фрунзенского р-на Санкт-Петербурга и
включает материал для проведения теоретических
и практических занятий, выполнение которых
сначала демонстрируется через проектор, а затем
учащиеся выполняют самостоятельно на
компьютере, используя раздаточный материал к
уроку.
Для учащихся, которые бысторо выполнили
запланированную работу на уроке предусмотрены
дополнительные задания.
Эффективно осваивается материал, когда
учащиеся вместе с учителем выполняют общий
проект, например, по теме из истории
Санк-Петербурга “Драматические театры
Санкт-Петербурга”, а затем в качестве итоговой
работы создают собственный небольшой проект,
используя в качестве шаблона сайт, созданный
совместно с учителем.
В качестве зачетной работы ученики отвечают на
вопросы теста на знание тегов HTML и представляют
созданный самостоятельно сайт.
Основные цели обучения: формирование
познавательного интереса, развитие
интеллектуальных и творческих способностей в
области Web-технологий.
Задачи.
Обучающие:
- сформировать систему знаний по технологии
создания Web-сайтов; - обучить языку разметки гипертекста HTML для
создания сайтов; - познакомить с этапами проектной деятельности.
Развивающие:
- развить творческие способности к
самовыражению, посредством создания сайтов; - сформировать умение сопоставлять, искать
аналог и осуществлять перенос знаний в новую
предметную область Web-технологий; - развить навыки работы на компьютере
Воспитательные:
- воспитать добросовестное отношение к
работе; - воспитать чувства товарищества и личной
ответственности за созданный сайт; - воспитать художественный и эстетический вкус;
- воспитать грамотного и корректного
пользователя сети Интернет.
Урок 1
1. Общие сведения о Web-сайтах и языке HTML
Публикации во Всемирной паутине (World Wide Web) реализуются
в форме Web-сайтов. Web-сайт по своей структуре
напоминает журнал, который содержит информацию,
посвящённую какой-либо теме или проблеме. Как
журнал состоит из печатных страниц, так и Web-сайт
состоит из компьютерных Web-страниц, объединённых
гиперссылками. Web-страницы могут содержать текст,
рисунки, таблицы, мультимедийные и динамические
объекты. Создание Web-сайтов можно осуществлять с
помощью языка HTML.
HTML – Hyper Text Markup Language — язык разметки
гипертекста. HTML ни в коей мере не является языком
программирования, он отвечает только за
расположение элементов (текста, рисунков) в окне
браузера. HTML является языком для создания
Web-сайтов во Всемирной паутине. Язык HTML состоит из
простых команд – тегов. Теги управляют
представлением информации на экране при
отображении HTML-документа. Теги заключаются в
угловые скобки <>…</> и бывают парные и
непарные (одиночные <>).
Документ HTML – это текстовый файл с
расширением .html или .htm, содержащий набор
тегов.
Браузер – (browser) – программа для просмотра
Web-страниц. Широко используют бразеры Microsoft Internet
Explorer, Opera и др. Браузер при получении документа HTML
выполняет его анализ, строит объектную модель
документа, затем результат отображает на
мониторе.
2. Структура HTML-документа
<HEAD>
Секция заголовка
Записываются meta-теги, содержащие информацию о
названии страницы, об авторе и др.</HEAD>
<BODY>
Тело документа
Содержит непосредственно информацию страницы:
тексты, рисунки, таблицы</BODY>
</HTML>
3. Форматирование символов
Символы, заключенные между следующими тегами
отображают:
| <B>….</B> — полужирный шрифт <I>……</I> — курсивный шрифт
<U>……</U> — подчеркнутый шрифт |
<SUB>…</SUB> — нижний индекс <SUP>…</SUP> — верхний индекс |
Параметры шрифта
Текст, заключенный между тегами <FONT….>
……..</FONT> имеет заданный размер, цвет и
гарнитуру. Для этого используются атрибуты: SIZE =
значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white),
каждому цвету соответствует свой
шестнадцатеричный код от 000000 до FFFFFF.
Если в тексте имеется несколько пробелов между
словами или символы табуляции, то браузер на
экран выводит всего один пробел. Если необходимы
дополнительные пробелы то между словами надо
добавить — символьный примитив.
Одиночный тег <BR> разрывает текстовый
поток и вставляет пустую строку. Несколько таких
тегов добавляют несколько пустых строк.
Межстрочный интервал – одинарный.
4. Практическое задание №1.
Создание первого HTML-документа “Драматические
театры Санкт-Петербурга”, работа со шрифтами,
задание цвета и размера шрифта. Освоение
технологии работы.
Урок №2
1. Форматирование текста по абзацам
Тег <P> …</P> — начинает абзац с новой
строки. Новый абзац отделяется от предыдущего
двойным межстрочным интервалом.
Выравнивание текста по абзацам:
| <P ALIGN=CENTER> …</P> — по центру <P ALIGN=JUSTIFY>…</P> — по ширине |
<P ALIGN=LEFT>… </P> — по левому краю <P ALIGN=RIGHT>…</P> — по правому |
2. Задание цвета всего текста и фона
документа
Описываются в начальном теге тела документа <BODY>
<BODY BGCOLOR=цвет фона документа TEXT=цвет
текста >.
3. Заголовки разных уровней
Тегами <Hn>….</Hn> оформляют
заключенный в них текст. Значения n меняются от 1
до 6, при этом текст выводится от более крупного к
более мелкому. Теги <Hn>….</Hn> могут
иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
4. Простые списки
| <UL>……</UL> — неупорядоченный (ненумерованный) список <OL>……</OL> Часть текста, которая будет оформляться как |
Виды нумераций списков:
<OL <OL TYPE=»Circle»> <OL TYPE=»Disk»> <OL TYPE=»A»> <OL TYPE=»I»> |
5. Практичекое задание №2
Форматирование текста по абзацам, цвет фона,
заголовки разных уровней, списки.
Урок №3
1. Вставка графических изображений
Всеми браузерами поддерживаются форматы .gif,
.jpg. Эти форматы являются растровыми. GIF –
поддерживается прозрачность и анимацияю, хорошо
подходит для рисованных изображений. JPG – для
полноцветных изображений, хорошо подходит для
отсканированных изображений и фотографий,
анимацию не поддерживает.
Одиночный тег <IMG> вставляет графические
изображения в текстовый поток в любом месте:
<IMG SRC=’имя графического файла’>
Необязательные атрибуты тега <img>:
| ALT = альтернативный текст BORDER = толщина обрамляющей рамки в
HEIGHT = высота изображения в пикселах или %
WIDTH = ширина изображения в пикселах или % |
HSPACE = свободное пространство слева и справа от изображения в пикселах или % VSPACE =- свободное пространство
ALIGN = left, right, middle выравнивание |
Чтобы рисунок был по центру, можно использовать
тег <CENTER>…….<CENTER>/
2. Практическое задание №3
Вставка и форматирование графических
изображений. Самостятельное создание Web-страниц
драматических театров.
Урок №4
1. Гиперссылки
Связь с другими документами организуется
тегами <A>…</A>.
<A href=”имя файла на который надо перейти” >
текст гиперссылки </A>.
Рисунок так же можно сделать, как гиперссылку,
написав:
<A HREF =’имя файла на который переходим’><
IMG SRC =’имя графического файла’></a>
2. Практическое задание №4
Оформление списка театров на главной странице
glavn.htm, как гиперссылки на соотвествующие
Web-страницы театров.
Урок №5
1. Таблицы
Используют не только для того, чтобы
располагать данные в ячейках, сколько с целью
позицирования фрагментов текста и изображений
друг относительно друга.
С помощью таблиц удобно создавать навигацию по
сайту.
таблица.
<TR>…</TR> — строка.
<TD>…</TD> — ячейка в ряду.
Пример таблицы из двух строк (рядов), содержащих
по две ячейки:
|
Текст ячейки 1, 1 |
Текст ячейки 1 2 |
|
Текст ячейки 2, 1 |
Текст ячейки 2, 2 |
<TR>
<TD> текст ячейки 1,1</TD> <TD> текст
ячейки 1,2</TD> </TR> первая строка
<TR> <TD> текст 2,1 ячейки </TD> <TD>
текст 2,2 ячейки </TD> </TR> вторая строка
</TABLE>
Ячейки таблицы могут содержать текст или
изображения, а также текст с HTML-тегами и
гиперссылки. Не следует оставлять ячейки таблицы
незаполненными, надо поместить хотя бы
неразрывный пробел
Основные атрибуты тегов <TABLE> <TR> и <TD>
задают параметры таблицы, строки или ячейки:
ALIGN=left, right, center – выравнивание (<table>,
<tr>, <td>)
BGCOLOR=’цвет’ – фоновый цвет (<table>, <tr>,
<td>)
HSPACE=значение – свободное пространство слева
и справа от таблицы в пикселах (<table>)
VSPACE=значение — свободное пространство сверху
и снизу от таблицы в пикселах (<table>)
WIDTH=значение – ширина таблицы (ячейки) – в
пикселах, или в процентах (<table>, <td>)
HEIGHT= значение – высоты таблицы (ячейки,
строки) – в пикселах, или в процентах (<table>,
<td>, <tr>)
BORDER= значение – толщина рамки вокруг таблицы
и ее ячеек, по умолчанию значение=1, если
значение=0, то рамки нет (<table>, <td>)
BORDECOLOR=’цвет’ – цет рамки (<table,<td>>)
VALIGH=bottom, middle, top – выравнивание содержимого
по вертикали (<tr>, <td>)
2. Практичекое задание №5
Создание навигации по сайту в форме таблицы из
одной строки
Уроки №6 и №7
1. Секция заголовка <HEAD>, мета-теги
В секции заголовка на каждой странице
указывается информация о документе, которая
используется при его отображении. Текст,
заключенный между тегами <TITLE> … </TITLE>,
отображается в заголовке окна браузера.
В секции заголовка обычно помещается и ряд
тегов <META> с различными атрибутами,
предоставляющими дополнительную информацию
(метаинформацию) о Web-сайте:
<HEAD>
<title>Драматические театры
Санкт-Петербурга</title>
<meta HTTP-EQUIV=»Content-Type» CONTENT=»text/html;
charset=windows-1251″> — — (указывается тип кодовой
таблицы (windows-1251, Koi8-R и другие),
использованной при подготовке текстовой части
документа.
<meta name=»author» CONTENT=»Смирнова Татьяна,
учитель 441 гимназии СПб»> — информация об
<meta name=»Keywords» content=»драматические,
театры, Товстоногов, Комиссаржевская, Европа,
ул.Рубинштейна”> (указывается через запятую
набор ключевых слов, которые могут быть
использованы рядом поисковых систем)
</HEAD>
2. Самостоятельная работа над своим проектом
Примерные темы проекта: “Мосты через Неву”,
“Реки и каналы Санкт-Петербурга”, “Мосты через
каналы Санкт-Петербурга”, “Необычные музеи
Санкт-Петербурга”, “Музыкальные театры”,
“Филармонии и капелла”, “Технические ВУЗ-ы
Санкт-Петербурга”, “Детские театры
Санкт-Петербурга”, “Гуманитарные ВУЗ-ы
Санкт-Петербурга”, “Пригороды
Санкт-Петербурга”, “Музеи Санкт-Петербурга”,
“Военные учебные заведения в Санкт-Петербурге”
и др.
Необходимо оформить главную страницу сайта по
образцу файла glavn.htm, выбрав в качестве навигации
по сайту таблицу или список, и 2 — 3 страницы,
раскрывающие содержание сайта и содержащие:
заголовок, текст и рисунок.
Урок №8
1. Контрольный тест на знание тегов HTML – 15 минут.
2. Рефлексия. Представление проекта и
оценивание его учениками класса и учителем – 30
минут.
Практические задания – Приложение 1.
Вопросы контрольного теста – Приложение
2.
Литература для учителя
- Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004
г. - Смирнова И. “Начала Web-дизайна, Санкт-Петербург,
БХВ, 2004г. - Томас А.Пауэл “Web-дизайн. Наиболее полное
руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005
г. - Браун М. “HTML 3.2. Наиболее полное руководство. В
подлиннике”, БХВ-СПб, 1999 - Захаркина В.В. “Основы создания Web-страниц”,
методическое пособие, СПБ, 2000 г. - К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во
Компьютер, Москва, 1997 г.
Литература для ученика
- Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004
г. - Смирнова И. “Начала Web-дизайна, Санкт-Петербург,
БХВ, 2004г.
Перечень Internet-ресурсов
- http://htmlbook.ru — Мержевич Влад. Краткий, но
информационно насыщенный учебник по технологии
создания сайтов, HTML, CSS, дизайну, графике и др. - http://html.manual.ru — Городулин Владимир.
HTML-справочник. - http://winchanger.narod.ru — А. Климов. Краткий справочник
по тегам HTML-языка.
HTML – это язык гипертекстовой разметки,
которые позволяет создавать сайты людям, а браузерам на их компьютерах и
телефонах считывать и отображать эти сайты. По факту HTML не является языком программирования
даже. Он очень прост, и вы сможете освоить его на базовом уровне всего за 1
неделю!
Чтобы сделать сайт на языке HTML нужно подготовить файл формата index.html. Потребуется вставить в этот документ стандартный код, называемый скелетом и подключить к нему файл style.css. Впоследствии формируется меню, разрабатывается логотип и готовятся основные разделы: подвал, шапка сайта, блок контента. Приступим!
Чтобы понять, как сделать сайт
html, надо уяснить правила использования разметки гипертекста. Данный формат,
помимо текста содержит теги, позволяющие задавать команды для браузера, который
руководствуясь ими, отображает информацию в определённом виде, например, как заголовок
первого уровня: <h1>…</h1>.
Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы для браузера</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div class="main"> <h1>Мой заголовок страницы</h1> <p>Мой текст.</p> </div> </body> </html>
Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:
<link rel="stylesheet" href="style.css">
У тега могут быть различные
свойства, например, класс, идентификатор, высота и другие. Но в современном
интернете обходятся классом, а любые параметры – цвет, размер, бордюр, фон и
другие – задаются в CSS
стилях через класс.
Создаем меню
Надо создать меню сайта, используя списки HTML, указывая для каждого из включаемых в него разделов ссылку на страницу, к которой будет переходить посетитель при нажатии на соответствующую надпись.
<!DOCTYPE html> <html> <head> <title>Заголовок страницы для браузера</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="menu"> <li>Главная</li> <li>Новости</li> <li>Контакты</li> </ul> <div class="main"> <h1>Мой заголовок страницы</h1> <p>Мой текст.</p> </div> </body> </html>
Чтобы создать логотип надо сделать
папку «image», в
которой будут находиться все картинки, имеющие отношение к сайту.
Внимание! Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку.
Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).
<img src="image/logo.png" alt="Наш логотип">
Чтобы сделать на сайте подвал внедряем с помощью HTML следующее содержание:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы для браузера</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="menu"> <li><img src="image/logo.png" alt="Наш логотип"></li> <li>Главная</li> <li>Новости</li> <li>Контакты</li> </ul> <div class="main"> <h1>Мой заголовок страницы</h1> <p>Мой текст.</p> </div> <div class="footer"> <p>© 2019 Копирайт. <a href="https://goodlifer.ru/">Блог Гудлайфера</a>.</p> </div> </body> </html>
Внимание! Именно в подвале при создании сайтов делается копирайт.
Сформированная нами первая
страница станет шаблоном, на основании которой мы создаём остальные, на которых
теперь будет размещаться блог, новостной, информационный или коммерческий сайт.
Работа с таблицами стилей CSS
Нами ранее была сформирована таблица стилей CSS, но вот что-либо добавить туда, мы пока не удосужились. Начнём с написания для сайта такого кода HTML:
* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}
Звездочка обозначает – любые элементы,
то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для
установления правил, определяющих внешний вид веб-страницы, нам придётся
обратиться к классу main, задав ряд команд:
- ширина контейнера;
- отображение по центру;
- добавление рамок чёрного цвета с каждой из сторон.
Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:
.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}
Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.
Изначально задаём стиль для шапки
сайта, сделав для неё рамку, позволяющую визуально отделить этот раздел от
прочих блоков. Теперь основная задача заключается в смещении в сторону боковой
колонки, которая по умолчанию будет отображаться сверху вниз, то есть так, как
прописана в нашем коде. Добиться отображения блока в требуемом формате можно
задав для сайдбара основные показатели:
- ширина;
- высота;
- правило float: left – прижатие компонента к
левой стороне родительского компонента.
Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки.
После этого пишем блок
«Подвал», который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и «Боковая колонка», считающиеся
плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both.
Однако пока наш сайт на HTML чёрно-белый, как немое
кино с Чарли Чаплином. Разукрасить его можно двумя методами:
- Фон прописывается контейнеру по классу .content и
задаётся сразу для всего сайта. - Отдельно задаётся для каждого из блоков, для
подвала, шапки, контента и т.д.
Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:
.main {backgroun-color:#f9f9f9;}
В видео уроке я немного дописал таблицу стилей и вот что получилось.
Скачать готовый HTML-сайт, разработанный в уроке можно по ссылке ниже:
Видео-урок разработки сайта
Теги – основа языка HTML
Пользуясь простыми примерами кода
HTML, мы словно
конструктор, собрали свой site, однако можем ли мы сделать это самостоятельно?
Чтобы написать веб-страницу с нуля, нужно знать всё о тегах и принципах их
использования. Разберёмся, как создаются
сайты html, опираясь на азы, знакомые каждому профессиональному
веб-программисту. Тегов очень много,
поэтому мы выделим основные:
- <html></html> – используются для
открытия и закрытия веб-страницы, давая браузеру понять, что он имеет дело с
веб-документом; - <head></head> – содержит ключевые
данные, касающиеся веб-страницы; - <title></title> – содержит основной
заголовок – описание содержания страницы; - <body></body> – тело страницы, в
котором помещаются все объекты, которые нужно видеть пользователям Интернета,
это могут быть картинки, заголовки, текстовый контент.
Внимание! Надо уже на
этапе создания сайта подумать о его продвижении, так как теги Title и H1 будут
влиять на ранжирование страниц в результатах поисковой выдачи.
Чтобы информация на страничках отображалась по центру, а ни как придётся, надо пользоваться тегами <center>, без которых текст будет располагаться справа. Наверное, вы обратили внимание, что все теги парные, то есть один открывающий, а второй закрывающий. Однако существуют и единичные теги и самый распространённый из них это <br/>. Именно его использование помогает перепрыгивать с одной строчки на другую, делая отступ. Таких пробелов в статьях будет ровно столько, сколько веб-мастер поставит соответствующих тегов HTML.
Этапы разработки веб-проекта
Работа проводится в несколько этапов:
- Подготовка макета, позволяющего получить
визуальный образ с помощью растровых редакторов. Также удобно рисовать макет на
листе бумаги. - Вёрстка
из макета psd, создаваемого дизайнером в программе Photoshop, с последующей адаптацией к
мобильным устройствам и проведением
тестирования, позволяющего корректно отображаться HTML сайту во
всех браузерах. - Верстка HTML макета на систему управления сайтом или язык PHP, что позволяет сделать
веб-ресурс динамичным.
Макет делают в графических
редакторах, таких как Adobe Photoshop, в котором нужно открыть новый документ,
с присвоением ему имени MySite. Чтобы добиться корректного отображения выбираем
большое разрешение от 1170 пикселей по ширине и более 800 px по высоте.
Осталось активировать изображение
направляющими и линейками, которые обязательно должны быть привязаны к границам
формируемого документа. Пользуясь
инструментами «Текст», «Форма», «Прямая», «Раскройка» добавляют необходимые
элементы страницы, делая полноценный шаблон сайта HTML.
Вёрстка заключается в размещении
всех блоков в текстовом файле index.html., который надо начать со строки
<!DOCTYPE html>, чтобы браузер знал, как проводить обработку содержимого.
Затем размещаются теги, содержащие отображаемую и скрытую от пользователя
информацию.
Внимание! Теги <head>…</head>, а точнее информация,
размещённая между ними, не будет видна пользователям.
Организация текста на страницах
преимущественно осуществляется основными тегами:
- <div>…</div>
- <p>…</p>
- <table>…</table>
- Списками
<ul><li>…</li></ul>
Формат отображения отдельных
элементов, располагающихся на сайте, задаётся тегами HTML напрямую или таблицей CSS, что
наиболее предпочтительно, поскольку, таким образом можно повторно использовать
стили компонентов.
Внимание! Задать таблицу CSS можно в рамках
<head>, но чаще всего это делают в файле style.css, помещая внутри тегов
ссылку на него.
Надо правильно разместить эту ссылку, пользуясь соответствующим тегом HTML: <link href=”style.css” type=”text/css” rel=”stylesheet”>.
Альтернативные методы бесплатного создания сайтов
Чтобы всё это проделать, надо
освоить азы веб-программирования, но можно обойтись и без таких жертв,
воспользовавшись бесплатными
конструкторами сайтов. Нужно просто компоновать элементы на веб-странице,
формируя шаблон, который впоследствии загружается на хостинг. Можно воспользоваться следующими
конструкторами сайтов:
- Weblium;
- UKit;
- Nethouse;
- UMI.
Альтернативой конструкторам служат CMS системы, пригодные для разработки
блогов, визиток и даже корпоративных ресурсов и форумов. Наиболее популярны следующие из них:
- WordPress;
- Joomla;
- InstantCms.
Воспользовавшись этими системами
можно получить доступ к уже созданным шаблонам и использовать их как есть, или
вносить изменения, касающиеся расположения блоков, формата отображения,
цветовой гаммы страниц.
Заключение
Если хочешь разместить в
Интернете свою статью на собственном сайте, то язык HTML подойдёт для этого лучше всего.
Чтобы открыть доступ к веб-странице для других людей, помести её на бесплатный
или платный хостинг, воспользовавшись услугами любого из сервисов. Сделать это
можно в несколько кликов, предварительно зарегистрировавшись. Стать
веб-мастером не так уж сложно!
HTML – это основа всех современных сайтов. По сути, это язык разметки, который помогает браузеру правильно отображать те или иные элементы. Чтобы создать свои первые web-страницы будет достаточно даже простого текстового блокнота (имеется ввиду программа-редактор для работы с текстом, а не бумажная записная книжка).
Какие именно шаги нужно пройти и как сделать свой первый сайт «бесплатно», «без регистрации и SMS» — ниже.
С одной стороны, создание универсального синтаксиса для разметки интернет-страниц позволило этому самому интернету перерасти из технологии объединения сетей до современного WEB’а со всем его многообразием. С другой стороны, так можно сказать про любой язык программирования – он помогает преобразовывать логические структуры в машинный код. Но для того, чтобы получить более-менее внятный результат нужно проделать огромный пласт работы: изучить и досконально знать синтаксис, а на это может уйти много времени и сил, накопить опыт по созданию своих скриптов и т.п., а это ещё больше времени.
HTML был призван добавить интерактивности к скучным «простыням» документов, которые были практически единственным видом контента на заре зарождения глобальной паутины (из-за низких скоростей).
Фактически это язык разметки, который позволяет выделять определённые элементы страницы и задавать для них специфичные параметры (размер, шрифт, тип: картинка это, текст, ссылка, видеофайл и т.д.).
Немного о синтаксисе
Например, комбинация <h1>Здесь текст</ h1> позволяет выделить заголовок первого уровня, она состоит из открывающего и закрывающего (с косой чертой) тегов. Некоторые теги, могут использоваться самостоятельно – без закрывающих элементов.
Любой HTML-документ может быть представлен в текстовом виде и должен иметь определённую структуру.
Обязательными тегами для любых HTML-страниц являются следующие:
<HTML> <HEAD></HEAD> <BODY></BODY> </HTML>
Внутри тега <HTML></HTML> располагается вся разметка страницы.
Внутри тега HEAD описываются параметры заголовка страницы, включая так горячо любимые seo-атрибуты: title и description.
А внутри BODY располагается весь остальной контент.
В общей сложности в современной версии языка разметки HTML5 используется 125 основных элементов (тегов).
Простая web-страница в блокноте
Открываете любой доступный текстовый редактор (это может быть встроенное системное приложение, например, «Блокнот» в Windows, или сторонний софт, например, Notepad++, AkelPad и т.п.).
Алгоритм работы очень простой:
- Создаёте новый документ.
- Если ваш редактор поддерживает работу с разными кодировками, то выбираете по умолчанию utf-8.
- Вписываете в него нужную структуру документа (с использованием нужных тегов).
- Сохраняете документ как текст (с расширением .txt) и меняете расширение на .html. Или сразу сохраняете файл в формате .html, если это позволяет ваш редактор.
- Теперь документ можно открыть в любом браузере, он распознает в нём вашу разметку и отобразит содержимое.
Обратите внимание, блокнот Windows в устаревших версиях системы сохраняет текст в кодировке ANSI (в новых версиях он работает с UTF-8), это не преступление, но вместо кириллических символов в браузере вы можете увидеть кракозябры. Поэтому с помощью специального атрибута нужно просто «подсказать» браузеру, что ему нужно работать с ANSI:
<meta charset=»windows-1251″> (тег вписывается внутри блока HEAD).
Хватит теории, пора переходить к делу. Давайте создадим в блокноте полноценную страницу. Просто скопируйте и вставьте следующий код в ваш блокнот.
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>Название страницы - отображается на вкладке браузера и в поиске</title>
<style type="text/css">
a{
color: #fff;
text-decoration: none;
}
html{
background: #FFF8CC;
min-height: 100%;
font-family: Helvetica;
display: flex;
flex-direction: column;
}
body{
margin: 0;
padding: 0 15px;
display: flex;
flex-direction: column;
flex: auto;
}
h1{
margin-top: 0;
}
h1, p{
color: #006064;
}
img{
border: 0;
}
.header{
width: 100%;
min-width: 460px;
max-width: 960px;
margin: 0 auto 30px;
padding: 30px 0 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
}
.logo{
font-size: 1.5rem;
color: #fff;
text-decoration: none;
margin: 5px 0 0 5px;
justify-content: center;
align-items: center;
display: flex;
flex: none;
align-items: center;
background: #839FFF;
width: 130px;
height: 50px;
}
.nav{
margin: -5px 0 0 -5px;
display: flex;
flex-wrap: wrap;
}
.nav-item{
background: #BDC7FF;
width: 130px;
height: 50px;
font-size: 1.5rem;
color: #fff;
text-decoration: none;
display: flex;
margin: 5px 0 0 5px;
justify-content: center;
align-items: center;
}
.sqr{
height: 300px;
width: 300px;
background: #FFDB89;
}
.main{
width: 100%;
min-width: 460px;
max-width: 960px;
margin: auto;
flex: auto;
box-sizing: border-box;
}
.box{
font-size: 1.25rem;
line-height: 1.5;
margin: 0 0 40px -50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box-base{
margin-left: 50px;
flex: 1 0 430px;
}
.box-side{
margin-left: 50px;
font: none;
}
.box-img{
max-width: 100%;
height: auto;
}
.content{
margin-bottom: 30px;
display: flex;
flex-wrap: wrap;
}
.banners{
flex: 1 1 200px;
}
.banner{
background: #FFDB89;
width: 100%;
min-width: 100px;
min-height: 200px;
font-size: 3rem;
color: #fff;
margin: 0 0 30px 0;
display: flex;
justify-content: center;
align-items: center;
}
.posts{
margin: 0 0 30px 30px;
flex: 1 1 200px;
}
.comments{
margin: 0 0 30px 30px;
flex: 1 1 200px;
}
.comment{
display: flex;
}
.comment-side{
padding-right: 20px;
flex: none;
}
.comment-base{
flex: auto;
}
.comment-avatar{
background: #FFA985;
width: 50px;
height: 50px;
}
.footer{
background: #FF3366;
width: 100%;
max-width: 960px;
min-width: 460px;
color: #fff;
margin: auto;
padding: 15px;
box-sizing: border-box;
}
@media screen and (max-width: 800px) {
.banners{
margin-left: -30px;
display: flex;
flex-basis: 100%;
}
.banner{
margin-left: 30px;
}
.posts{
margin-left: 0;
}
}
@media screen and (max-width: 600px) {
.content{
display: block;
}
.banners{
margin: 0;
display: block;
}
.banner{
margin-left: 0;
}
.posts{
margin: 0;
}
}
</style>
</head>
<body>
<header class="header">
<a class="logo">
LOGO
</a>
<nav class="nav">
<a href="#posts" class="nav-item">Посты</a>
<a href="#comments" class="nav-item">Комменты</a>
<a href="#footer" class="nav-item">Подвал</a>
<a href="#posts" class="nav-item">Посты2</a>
</nav>
</header>
<main class="main">
<div class="box">
<div class="box-base">
<h1>Заголовок 1</h1>
<p>Здесь расположен осмысленный текст и самом важном продукте на свете...</p>
</div>
<div class="box-side">
<div class="sqr">
</div>
</div>
</div>
<div class="content">
<div class="banners">
<div class="banner">Баннер 1</div>
<div class="banner">Баннер 2</div>
<div class="banner">Баннер 3</div>
</div>
<div class="posts" id="posts">
<div class="post">
<h1>Пост #1</h1>
<p>Концепция маркетинга индуцирует контент. Системный анализ развивает тактический рекламный клаттер. Медиавес поддерживает экспериментальный нишевый проект. Лидерство в продажах допускает эмпирический социальный статус.</p>
</div>
<div class="post">
<h1>Пост #2</h1>
<p>Департамент маркетинга и продаж реально допускает жизненный цикл продукции. Стоит отметить, что опросная анкета стабилизирует охват аудитории. До недавнего времени считалось, что promotion-кампания изоморфна времени. </p>
</div>
<div class="post">
<h1>Пост #3</h1>
<p>В соответствии с законом Ципфа, сущность и концепция маркетинговой программы синхронизирует тактический медиамикс, осознав маркетинг как часть производства. Общество потребления сознательно отталкивает презентационный материал.</p>
</div>
</div>
<div class="comments" id="comments">
<div class="comment">
<div class="comment-side">
<div class="comment-avatar">
</div>
</div>
<div class="comment-base">
<h1 class="comment-title">Комментарий #1</h1>
<p>Рекламный бриф масштабирует из ряда вон выходящий выставочный стенд. Изменение глобальной стратегии, в рамках сегодняшних воззрений, индуцирует культурный ребрендинг.</p>
</div>
</div>
<div class="comment">
<div class="comment-side">
<div class="comment-avatar">
</div>
</div>
<div class="comment-base">
<h1 class="comment-title">Комментарий #2</h1>
<p>Имидж предприятия, в рамках сегодняшних воззрений, вполне вероятен. Стоит отметить, что имидж версифицирован. Экспертиза выполненного проекта осмысленно программирует из ряда вон выходящий клиентский спрос. </p>
</div>
</div>
<div class="comment">
<div class="comment-side">
<div class="comment-avatar">
</div>
</div>
<div class="comment-base">
<h1 class="comment-title">Комментарий #3</h1>
<p>Представляется логичным, что особенность рекламы нейтрализует потребительский сегмент рынка. Изменение глобальной стратегии редко соответствует рыночным ожиданиям. </p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer" id="footer">
Подвал сайта расположен, как это ни странно внизу, здесь можно разместить контакты и другую информацию...
</footer>
</body>
</html>
Сохраните файл как index.html и откройте в браузере.
Вы получили типовой адаптивный шаблон, который можно наполнить своим контентом. Только править нужно наполнение, а не теги, нельзя их удалять или нарушать структуру (например, убирать закрывающие), так как в противном случае вся ваша «вёрстка» съедет и будет отображаться «криво».
Стили CSS, скрипты, картинки и другой контент
Как можно заметить, приведённый пример адаптируется под ширину окна браузера и может выстраиваться в одну вертикальную колонку на мобильных устройствах. Как так получилось? Всё дело в таблице каскадных стилей (они же CSS).
Вы можете задать для каждого HTML-тега свои параметры оформления: цвет заливки, текста, тип шрифта, его размер, отступы и многое другое. В нашем примере стили прописаны в блоке <style type=»text/css»> (между открывающим и закрывающим тегом style).
Такое написание можно заменить ссылкой на внешний файл (причём файл стилей может располагаться как в каталоге на вашем сервере, так и на любом другом, главное, чтобы ссылка на него была правильной).
Например, <link rel=»stylesheet» type=»text/css» href=»mysitestyle.css»>.
mysitestyle.css можно заменить на полную (абсолютную) или даже относительную ссылку (отсчёт будет вестись относительно каталога, в котором будет лежать исходный html-файл).
Аналогичным образом вставляются js-скрипты, которые помогают анимировать страницу или добавить какие-либо специфические функции.
Изображение или видео тоже может располагаться на вашем сервере (в корне с html-файлом) или вообще на другом сайте. В первом случае можно использовать относительные ссылки, чтобы было просто сменить домен, а во втором, можно использовать ресурсы со сторонних сайтов (не нужно хранить изображение у себя и отнимать ресурсы сервера).
Пример вставки изображения со своего сайта (файл image.png должен лежать рядом с index.html):
<img src=»image.png» alt=»текст, который будет показан вместо изображения, если оно не загрузится» width=»190″ height=»260″>
Параметры ширины и высоты можно пропустить или задать в таблице стилей CSS.
В нашем примере вы можете заменить баннер:
- Вместо тега <div class=»banner»>Баннер 1</div>
- Пишем <img class=»banner» src=»image.png» alt=»баннер-картинка»>
- Рядом с index.html кладём любое изображение в формате .png и меняем имя на image.png
Обратите внимание на указание класса (class=»banner»), этот параметр позволяет задать стиль оформления централизовано – через CSS. Поэтому изображение любого размера аккуратно впишется в имеющийся дизайн.
Точно также можно заменить все остальные баннеры на свои изображения или добавить их внутри других блоков (только в последнем случае уже без указания класса banner, иначе верстка «поедет»).
Многостраничные сайты в блокноте
Вы можете создать сколько угодно страниц, но, чтобы они были взаимосвязаны между собой, и пользователь мог переходить с одной на другую, нужно правильно прописать ссылки.
Например, вы создаёте страницу page1.html, а нужно попасть на page2.html. тогда нужно внутри страницы page1 прописать ссылку для перехода на page2. Это делается с помощью специального тега и его параметра:
<a href=»page2.html»>Нажмите для перехода на Страницу 2</a>
Файл page2.html должен лежать рядом с page1.html в одном каталоге, иначе нужно указывать более подробный относительный путь или абсолютную ссылку, если страница расположена на другом сайте.
Соответственно, если со Страницы 2 вам нужно вернуться на первую, то внутри второй страницы нужно прописать уже другой URL, который будет ссылаться на первую. И т.д.
Количество ссылок на другие страницы никак не ограничено, вы можете создавать столько страниц, сколько вам нужно.
Размещение на хостинге
Все созданные HTML-файлы и дополнительные ресурсы (изображения, скрипты, видео и т.д.) вы можете разместить на хостинге и открыть доступ к ним для любого желающего.
Любой web-хостинг работает с html-файлами, даже если у него нет поддержки PHP или баз данных. Хостинг-провайдеров безумное множество, для статичных (html) сатов даже встречаются бесплатные варианты, например, GitHub Pages. Но мы рекомендуем не тратить время, и выбрать проверенный сервис, такой как Bluehost (компания работает с 2002 года и позволяет размещать даже динамические сайты, например, на популярном движке WordPress, а ещё здесь есть возможность установки любой системы управления контентом прямо из панели управления в один клик и тарифы с полным безлимитом).
Как разместить HTML-сайт на хостинге, пошагово:
- Вы регистрируете новое доменное имя, если его ещё у вас нет.
- Перенаправляете его на DNS-сервера выбранного хостера.
- В панели управления хостинга создаёте новый сайт (имя задаётся в соответствии с доменом).
- Далее в веб-версии файлового менеджера или через FTP-протокол закачиваете ваши страницы в корень каталога сайта.
- После того, как обновятся данные в DNS-системе и ваш домен начнёт ссылаться на сервера хостинга, сайт можно будет открыть в любом браузере просто введя имя (домен).
Стоит учесть, что если вы введёте в адресной строке vash-sait.ru, то хостинг будет пытаться загружать главную страницу, которую он ожидает увидеть с именем index.html в корне каталога (http://vash-sait.ru/index.html).
Если такого файла не будет, отобразится ошибка. Но вы можете прописать полный путь, например, vash-sait.ru/page1.html, и если файл с таким именем в каталоге сайта есть, то станица будет отображена.
Выводы
Мы рассмотрели основы «олдскульного» подхода к созданию сайтов. Сейчас в блокнотах сайты делать просто бессмысленно, так как это очень сложно для новичков и очень нерационально для профессионалов (они работают со специальными средами разработки и другими инструментами).
Начинающим web-мастерам проще и быстрее воспользоваться онлайн-конструкторами, которые позволяют собрать сайт своими руками даже без знания основ вёрстки или погружения в HTML, а результат ничем не будет уступать профессиональным продуктам. Посмотреть на достойные сервисы можно в нашем рейтинге лучших конструкторов сайтов.
Кроме того, в большинстве случаев одним только HTML ограничиться не получится. Если вам нужна интерактивность (обратная связь от посетителей: формы заказа звонков, чат, функционал интернет-магазина и т.п.), то придётся подключать языки программирования и JavaScript или готовые CMS-системы/фреймворки.
На прошлых уроках мы узнали о том, что
интернет, это не только система глобальных компьютерных сетей, а так же и
глобальная информационная система, которая обеспечивает пользователям
возможности доступа к информации и общения между собой.
Важнейшей информационной службой интернета
является всемирная паутина. Это система веб-страниц, которые связаны
между собой гиперссылками. Текст, который содержит гиперссылки называется гипертекстом.
Всемирная паутина работает по системе клиент-сервер.
Веб-сервер и компьютер-клиент взаимодействуют между собой по протоколу HTTP.
Клиент отправляет на веб-сервер запрос на веб-страницу, а сервер в ответ
отсылает указанную веб-страницу или сообщение об ошибке, если она недоступна.
Большая часть веб-страниц содержится в
составе веб-сайтов. Веб-сайт – это система связанных между собой
веб-страниц, принадлежащих одной организации или лицу.
На прошлых уроках мы кратко рассмотрели
основные инструменты разработки веб-сайтов. Мы знаем, что не зависимо от
средств разработки любой сайт содержит код разметки, написанный при
помощи языка разметки гипертекста «HTML».
Упростить процесс создания сайта помогают
различные визуальные HTML-редакторы.
Создавать веб-страницы с помощью некоторых из них может даже пользователь,
который не знает языка разметки гипертекста. Это возможно благодаря тому, что
пользователь работает с блоками гипертекста, не на прямую через язык разметки,
а используя их визуальное представление и меняя их настройки при помощи
различных инструментов.
Сегодня мы более подробно рассмотрим
визуальный HTML-редактор «KompoZer»,
а так же начнём создание типового веб-сайта «Домашняя страница» с его
использованием.
Рассмотрим интерфейс программы «KompoZer».
Его можно разделить на несколько частей. Вверху располагается главное меню.
Через него можно получить доступ ко всем элементам функциональности программы.
Ниже главного меню располагается панель быстрого доступа. Она содержит
кнопки вызова наиболее часто используемых операций. Ещё ниже располагается панель
форматирования текста, на ней расположены инструменты, которые свойственны
большинству текстовых редакторов. Здесь можно настроить шрифт и размер текста,
а также его форматирование, например, создавая различные списки. Большую часть
окна программы занимает рабочая область. Помимо окна, в котором
отображаются результаты работы (окна редактирования), она содержит панель
вкладок, которая позволяет переключаться между различными страницами веб-сайта,
а также панель управления режимами редактирования. Она позволяет
выбирать между режимами: дизайн, в котором отображается лишь визуальное
представление блоков, код, в котором отображается код страницы на языке
разметки гипертекста. При выборе объединённого режима окно результатов будет
разделено на две части по горизонтали. В верхней части располагается окно
дизайна, а в нижней – окно кода. В левой части окна находится менеджер сайта,
который позволяет загрузить созданный сайт на веб-сервер.
Начнём создание сайта «Домашняя страница».
Создание любой-веб страницы начинается с установки нужных значений её глобальных
настроек. К глобальным настройкам веб-страницы относятся её цвета,
заголовок и свойства.
Начнём с цветов.
Для настройки цветов веб-страницы,
необходимо в меню «Формат» выбрать пункт «Цвета и фон страницы», после чего на
экране появится соответствующее окно. Рассмотрим его. В верхней части окна
находятся две радиальные кнопки, которые позволяют нам выбрать между
использованием пользовательских цветов по умолчанию и настройкой используемых
цветов. В нижней части окна находится текстовое поле ввода, которое позволяет
выбрать фоновое изображение веб-страницы, указав его адреса на жёстком диске
компьютера. Изменим цвет фона страницы, для этого установим выделение на
радиальную кнопку «Использовать цвета», после чего нажмём на кнопку с
изображением цвета фона.
Перед нами появилось окно настройки цвета
фона. Рассмотрим его. Настроить цвет можно несколькими способами. Первый
способ очевиден, выбрать его на непрерывной или дискретной палитре.
Так же это можно сделать, изменяя его ЭрГэБэ-модель, то есть путём
смешивания в различных количествах красного, синего и зелёного цветов. Можно
изменять цвет, редактируя такие его параметры как «Оттенок»,
«Насыщенность» и «Яркость». Можно выбрать один из основных цветов, указав
в поле «Имя» его название на английском языке, начиная со строчной буквы,
например, серый, или «silver».
Можно указать в соответствующем поле ввода шестнадцатеричный код
цвета, как это делается в языке разметки гипертекста. При использовании
других способов данный код генерируются автоматически. Таким образом, выберем
светло-зелёный цвет фона, указав его код, он всегда начинается со знака
решётка. Таким же образом выберем чёрный цвет для текста, а также коричневый
цвет для гиперссылок.
Теперь настроим заголовок страницы
и её свойства.
Для этого выберем в меню «Формат» пункт
«Заголовок и свойства страницы». В появившемся окне в поле «Заголовок» укажем
«Домашняя страница Коли Николаева». Нажав на кнопку «Выбрать кодировку» укажем
для данной страницы кодировку «Кириллица, windows
двенадцать пятьдесят один».
Теперь, когда мы подобрали цвета для нашей
страницы, настало время наполнить её основным информационным содержимым.
Как, мы знаем, оказавшись на главной
странице сайта, пользователь должен сразу понять, о чем он. Поэтому для начала разместим
заголовок страницы. Для того чтобы разместить текст на странице, достаточно
установить курсор в рабочем окне и начать вводить его. Введём текст заголовка
«Домашняя страница Коли Николаева». Теперь нужно настроить форматирование
данного текста. Панель форматирования текста в редакторе «KompoZer»,
напоминает такие же панели большинства текстовых процессоров. Выделим наш
заголовок и установим для него параметры форматирования. Стиль абзаца:
«Заголовок один», шрифт: «Times
New Roman»,
зададим коричневый цвет заголовка, введя соответствующий код. Установим
выравнивание «По центру», а затем при помощи кнопок увеличения и уменьшения
размера текста, подберём подходящий размер. Укажем тип шрифта
«Полужирный курсив».
Теперь введём текст страницы: «Здравствуйте!
Я, Коля Николаев. Приветствую вас на моей домашней странице. Здесь вы можете
узнать обо мне, о моих друзьях, и о моей семье». Установим для введённого
текста параметры форматирования. Установим стиль абзаца «Обычный
текст», шрифт «Arial»,
выравнивание «По центру».
Как мы знаем, веб-страницы связаны между
собой гиперссылками. Добавим на нашу страницу несколько гиперссылок.
Для этого необходимо навести курсор на
свободное место рабочего окна, нажать правую кнопку мыши и выбрать пункт
контекстного меню создать ссылку. В появившемся окне «Свойства ссылки», введём
текст ссылки «Обо мне», а затем укажем адрес веб-страницы, можно указать
расположение файла на жёстком диске, или же относительный универсальный
указатель ресурса. Укажем его «My
HTML».
Точно так же добавим ссылки на страницы о друзьях, и о семье. В первом
случае укажем универсальный указатель ресурса «Friends
HTML»,
а во втором – «Family
HTML».
Зададим параметры форматирования текста для созданных гиперссылок.
Сохраним созданную нами веб-страницу.
Для этого выберем пункт главного меню файл
и в появившемся подменю выберем пункт «сохранить как». Сохраним нашу
веб-страницу в рабочей папке под именем «Индекс HTML».
Так почти всегда называется файл, содержащий главную страницу сайта.
Добавим на наш сайт ещё одну веб-страницу.
Для этого нужно создать новую вкладку.
Чтобы это сделать нажмём на панели вкладок правой кнопкой мыши и выберем пункт
контекстного меню «Новая вкладка». Зададим параметры страницы, так же,
как мы делали это для главной. Выберем цвета для фона, текста и гиперссылок.
Укажем заголовок веб-страницы «Обо мне», укажем кодировку «Кириллица,
windows двенадцать пятьдесят
один».
Добавим на эту веб-страницу заголовок
«Обо мне». Установим параметры его форматирования так же, как и на
главной странице. Теперь добавим основной текст о Коле. Придумаем? когда
он родился, в какой школе учится, чем увлекается и тому подобное. Установим для
основного текста выравнивание «По ширине».
Так как эта страница о конкретном
человеке, логично, что на ней должна быть его фотография.
Рассмотрим, как добавить изображение на
веб-страницу. Установим курсор, в начало заголовка и в меню «Вставка»
выберем пункт «Изображение». Рассмотрим появившееся окно «Свойства
изображения». На вкладке «Адрес» данного окна, можно задать файл с изображением,
указать текст выплывающей подсказки, которая будет отображаться при
наведении курсора на картинку. Так же можно указать альтернативный текст,
который будет отображаться на месте изображения у пользователей, в настройках
браузера которых отключена загрузка изображений. На вкладке «Размеры» можно
указать размеры изображения на веб-странице, если требуется
масштабирование. На вкладке «Внешний вид» можно установить отступы для
изображения, а так же указать, как должен отображаться текст
относительно его. На вкладке «Ссылка» можно, сделать из изображения
гиперссылку, задав указатель перехода.
Выберем файл с изображением «Коля png»
из нашей рабочей папки. Укажем для него текст выплывающей подсказки «Коля
Николаев», и такой же альтернативный текст. Так, как оригинал изображения имеет
неподходящие размеры, укажем новые. Для этого на вкладке размеры установим
выделений радиальной кнопки «Задать размер» и установим флажок в пункте
«Соблюдать пропорции». Укажем значение ширины «Двести пятьдесят пикселей»,
как видим, значение длины изменилось автоматически. На вкладке «Внешний вид»
установим значения отступов, справа и слева – два, а сверху и снизу – пять.
Установим расположение текста относительно изображения – справа. Теперь мы
видим, что изображение было успешно вставлено на нашу веб-страницу. Сохраним
получившуюся веб-страницу в файле «Мy
HTML».
Содержимое веб-страниц «О друзьях» и «О
семье», вы можете заполнить самостоятельно, так же, как мы это сделали для
первых двух страниц. Теперь нужно оценить результаты нашей работы и проверить,
как созданные нами веб-страницы будут отображаться в окне браузера, то есть,
как их увидят пользователи.
Для этого в подменю «файл» необходимо
выбрать пункт просмотр. Так же мы можем проверить, работает ли на главной
странице гиперссылка на страницу «Обо мне».
Сегодня мы изучили создание сайта
«Домашняя страница» с помощью визуального HTML-редактора
«KompoZer».
Мы рассмотрели интерфейс данного визуального редактора и узнали, что он состоит
из следующих элементов:
·
главное
меню;
·
панель
быстрого доступа;
·
панель
форматирования текста;
·
рабочая
область, которая содержит окно редактирования, панель вкладок и панель
управления режимами редактирования;
·
менеджер
сайта.
Мы научились создавать простейшие гипертекстовые
страницы с помощью визуального HTML-редактора
«KompoZer».
§ 4.4. Создание web-сайта
Информатика. 9 класса. Босова Л.Л. Оглавление
Ключевые слова:
• структура сайта
• навигация
• оформление сайта
• шаблон страницы сайта
• хостинг
4.4.1. Технологии создания сайта
Существуют несколько способов создания сайтов.
Во-первых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличать теги от текста, их заключают в угловые скобки (рис. 4.7).
Во-вторых, можно документ, подготовленный в текстовом процессоре (Microsoft Word, OpenOffice Writer), сохранить как web-страницу (в формате HTML).
В-третьих, можно воспользоваться специальным программным обеспечением — визуальными HTML-редакторами или конструкторами сайтов.
Веб-дизайнер — специалист, проектирующий структуру вебсайта, а также подбирающий способы подачи информации и выполняющий художественное оформление веб-проекта. Веб-дизайнер должен знать современные веб-технологии; желательно, чтобы он имел художественное образование.
Рис. 4.7. Простейшая веб-страница и её HTML-код
Вы можете попытаться освоить основы веб-дизайна самостоятельно, пройдя дистанционный курс «Web-конструирование» А. А. Дуванова в Роботландском университете (http://www.botik.ru/~robot/ru/).
4.4.2. Содержание и структура сайта
Независимо от того, каким инструментарием вы будете пользоваться для создания сайта, первоначально следует продумать его содержание и структуру.
Предположим, вы посещаете кружок компьютерной графики и решили создать сайт этого творческого объединения. Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников.
Теперь необходимо определить структуру (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
Очевидно, сайт может включать в себя общую информацию (программу и расписание занятий, место проведения занятий, фамилию, имя, отчество руководителя и т. д.), страницу новостей и объявлений, личные страницы руководителя и участников объединения, галерею работ участников объединения, полезные ссылки на другие ресурсы сети Интернет и многое другое. Изобразим структуру сайта в виде графа (рис. 4.8).
Рис. 4.8. Иерархическая структура сайта
Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую.
4.4.3. Оформление сайта
Любой сайт загружается с главной (домашней) страницы (home page), которая прежде всего должна давать ответ на вопрос «О чём этот сайт?». Для этого на главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, а также главное меню — ссылки на основные разделы сайта. Также на главной странице могут быть размещены имя автора сайта и его контактная информация, счётчик посетителей, новости и т. д.
Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это:
• заголовок сайта, расположенный в самом верху страницы;
• главное меню, как правило, размещаемое в левой части страницы (количество пунктов меню, их названия и порядок неизменны на всех страницах сайта).
Желательно, чтобы страницы сайта были выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы сайта, на котором представить элементы, имеющиеся на всех страницах сайта (рис. 4.9).
Рис. 4.9. Примерный шаблон страниц сайта
При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:
• Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
• Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
• Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
• Не размещайте на странице слишком много информационных и художественных блоков.
• Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
• В каждом абзаце используйте одни и те же приёмы форматирования.
4.4.4. Размещение сайта в Интернете
Перед размещением сайта в сети Интернет следует провести его тестирование, т. е. убедиться в том, что он правильно отображается разными браузерами: тексты хорошо читаются на выбранном фоне, рисунки расположены на своих местах, гиперссылки обеспечивают правильные переходы и т. д.
Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Платным хостингом для размещения своих сайтов обычно пользуются крупные компании. При этом они получают удобное для прочтения и запоминания доменное имя второго уровня, которое может совпадать с названием компании.
Частные лица для своих сайтов могут воспользоваться бесплатным хостингом, возможности которого ограничены по сравнению с платными вариантами (небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня и т. д.), но их вполне достаточно для домашних страниц пользователей и некоммерческих сайтов. Главным недостатком бесплатных хостингов является то, что при размещении вашего сайта компания самостоятельно добавляет на его страницы коммерческую рекламу.
Список серверов, предоставляющих бесплатный хостинг, можно получить поиском по запросу «бесплатный хостинг».
САМОЕ ГЛАВНОЕ
Структура (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.
Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую.
Шаблон страницы — это схема страницы, на которой представлены элементы, имеющиеся на страницах сайта. Использование шаблонов страниц помогает выдержать единый стиль оформления сайта.
Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Вопросы и задания
1. Ознакомьтесь с материалами презентации к параграфу, содержащейся в электронном приложении к учебнику. Дополняет ли презентация информацию, содержащуюся в тексте параграфа?
2. С помощью каких инструментов можно создавать сайты?
3. Что такое структура сайта?
4. Продумайте и изобразите в виде графа структуру одного из следующих сайтов.
5. Перечислите основные элементы, размещаемые на страницах сайта.
6. Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами?
7. С какой целью проводится тестирование сайта?
8. Что является основным недостатком бесплатного хостинга?
9. Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный хостинг сайтов.
§ 4.3. Информационные ресурсы и сервисы Интернета
§ 4.4. Создание web-сайта
Загрузить PDF
Загрузить PDF
В этой статье мы расскажем вам, как с помощью HTML-кода создать простейшую веб-страницу. HTML является одним из основных компонентов интернета, потому что задает структуру веб-страниц. Веб-страницу можно создать в текстовом редакторе, который есть в Windows или macOS.
-
1
Откройте текстовый редактор. В Windows запустите Блокнот или Notepad++, а в macOS — TextEdit:
-
2
Введите <!DOCTYPE html> и нажмите ↵ Enter. Так вы сообщите веб-браузеру, что это документ HTML.
-
3
Введите <html> и нажмите ↵ Enter. Это открывающий тег HTML-кода.
-
4
Введите <head> и нажмите ↵ Enter. Этот тег содержит описание веб-страницы и заголовочные элементы. Контент этого тега на странице, как правило, не отображается. Контентом являются описание страницы, метаданные, таблицы стилей CSS и другие языки сценариев.[1]
-
5
Введите <title>. Этот тег содержит имя страницы.
-
6
Введите имя страницы. Введите текст, который будет отображаться на вкладке страницы.
-
7
Введите </title> и нажмите ↵ Enter. Этот тег закрывает тег имени страницы.
-
8
Введите </head> и нажмите ↵ Enter. Этот тег закрывает тег описания страницы. На данном этапе HTML-код должен выглядеть примерно так.
<!DOCTYPE html> <html> <head> <title>Моя веб-страница</title> </head>
Реклама
-
1
Введите тег <body> под закрывающим тегом «head». Этот тег содержит весь контент HTML-документа. Контент этого тега отображается на веб-странице.
-
2
Введите <h1>. Этот тег содержит заголовок страницы. Заголовок — это текст большого размера, который, как правило, расположен вверху страницы.
-
3
Введите заголовок страницы. Это может быть название страницы или приветствие.
-
4
Введите </h1> после текста заголовка и нажмите ↵ Enter. Этот тег закрывает тег заголовка.
- Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов <h1></h1> — <h6></h6>. Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
<h1>Добро пожаловать на мою страницу!</h1> <h2>Меня зовут Макс.</h2> <h3>Надеюсь, вам не будет скучно.</h3>
- Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов <h1></h1> — <h6></h6>. Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
-
5
Введите <p>. Этот тег содержит абзац текста. Такой тег отобразит текст нормального размера.
-
6
Введите текст. Например, введите описание веб-страницы или любую другую информацию.
-
7
Введите </p> после текста и нажмите ↵ Enter. Этот тег закрывает тег абзаца текста. Ниже приведен пример абзаца в HTML-документе:
- Чтобы создать несколько абзацев под одним заголовком, добавьте подряд несколько строк.
- Измените цвет текста. В начале текста введите тег <font color = "цвет">, а в конце тег </font>. Вместо слова «цвет» подставьте нужный цвет (на английском языке), причем кавычки не удаляйте. Эти теги позволят изменить цвет любого текста (например, заголовка). К примеру, чтобы сделать текст синим, введите следующий код: <p><font color = "blue"> Киты — величественные животные.</font></p>
- Также шрифт можно сделать полужирным, наклонным и другим. Ниже приведены примеры форматирования текста с помощью HTML-тегов:[2]
<b> Полужирный текст </b> <i> Наклонный текст </i> <u> Подчеркнутый текст </u> <sub> Подстрочный текст </sub> <sup> Надстрочный текст </sup>
Реклама
-
1
Добавьте картинку на страницу. Для этого:
- Введите <img src=. Этот тег содержит картинку.
- Скопируйте и вставьте URL-адрес картинки после знака равенства (=) в кавычках.
- Введите > после URL-адреса изображения, чтобы закрыть тег картинки. К примеру, если URL-адрес изображения http://www.myimage.com/ocean.jpg, введите следующий код:
<img src="http://www.myimage.com/ocean.jpg">
-
2
Добавьте ссылку на другую веб-страницу. Для этого:
- Введите <a href=. Этот тег содержит ссылку на другую страницу.
- Скопируйте и вставьте URL-адрес после знака равенства (=) в кавычках.
- Введите > после URL-адреса, чтобы закрыть адрес.
- Введите текст ссылки после символа «>».
- Введите </a> после текста ссылки, чтобы закрыть тег ссылки.[3]
Ниже приведен пример ссылки на Яндекс.<a href="https://www.ya.ru">Яндекс</a>.
-
3
Добавьте разрыв строки. Для этого введите <br>. Будет вставлен перенос строки. Этим тегом можно пользоваться, чтобы отделить друг от друга различные разделы страницы.
Реклама
-
1
Обратитесь к официальному списку названий цветов и их кодов в HTML color. Консорциум Всемирной паутины (W3C) ведет официальный список цветов, который можно найти по адресу https://www.w3.org/wiki/CSS/Properties/color/keywords. У каждого цвета есть официальное название, 6-значный шестнадцатиричный код и десятичное значение. Вы можете использовать любой из этих параметров, чтобы задать цвет элементов на своей странице. В этом примере мы возьмем официальные названия цветов.
-
2
Задайте цвет фона с помощью тега <body>. Для этого к тегу нужно добавить атрибут style. Допустим, вы хотите сделать фон всей страницы lavender (лавандовым):
- <body style="background-color:lavender;">
-
3
Задайте цвет текста для любого тега. Атрибут style также можно использовать для указания, какого цвета будет весь текст в пределах определенного тега. Например, вы хотите, чтобы текст в пределах одного из ваших тегов <p> был midnightblue (темно-синим):
- <p style="color:midnightblue;">
- Изменение цвета коснется только текста в пределах данного тега <p>. Если позднее вы откроете новый тег <p>, где текст также должен иметь цвет midnightblue, атрибут «style» нужно будет задать и для него.
-
4
Задайте цвет фона для заголовка или абзаца. Подобно тому, как вы задаете цвет фона для тега «body», вы можете выбрать цвета фона для других тегов. Например, вы хотите, чтобы цвет фона <p> был lightgrey (светло-серым), а цвет фона заголовка стиля H1 — lightskyblue (светло-голубым):
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
Реклама
-
1
Введите </body>, чтобы закрыть тег «body». Когда вы закончите добавлять текст, изображения и другие элементы, введите указанный тег внизу HTML-документа.
-
2
Введите </html>, чтобы закрыть HTML-код. Введите этот тег под закрывающим тегом «body». Так вы сообщите веб-браузеру, что после этого тега HTML-кода нет. Весь HTML-код должен быть примерно таким:
<!DOCTYPE html> <html> <head> <title>Фан-страница Яндекса</title> </head> <body> <h1>Приветствую вас на моей странице</h1> <p>Это фан-страница Яндекса</p> <h2>Важные даты</h2> <p><i>1 января 2000</i> - День рождения Яндекса</p> <h2>Ссылки</h2> <p>Ссылка на Яндекс: <a href="http://www.ya.ru">Яндекс</a></p> </body> </html>
Реклама
-
1
Преобразуйте документ в обычный текст (только для пользователей macOS). Нажмите «Формат» (вверху экрана) > «Создать простой текст» (в выпадающем меню).
Это нельзя и не нужно делать в Windows.
-
2
Нажмите Файл. Эта опция находится в строке меню вверху экрана.
-
3
Щелкните по Сохранить как. Вы найдете эту опцию в меню «Файл».
- Также можно нажать Ctrl+S (Windows) или ⌘ Command+S (Mac).
-
4
Введите имя HTML-документа. Введите его в строке «Имя файла» (Windows) или «Имя» (Mac).
-
5
Измените формат файла с TXT на HTML. Для этого:
- Windows — щелкните по меню «Тип файла», выберите «Все файлы», а затем введите .html в конце имени файла.
- macOS — в конце имени файла вместо .txt введите .html.
-
6
Щелкните по Сохранить. Эта опция находится внизу окна. Будет создан HTML-файл.
- Обычно HTML-файлы открываются в веб-браузере по умолчанию.
-
7
Закройте текстовый редактор. Теперь откройте HTML-файл в браузере, в котором можно просмотреть созданную веб-страницу.
-
8
Откройте HTML-файл в браузере. Для этого дважды щелкните по HTML-файлу. Если открылось уведомление об ошибке, сделайте следующее:
- Windows — щелкните по файлу правой кнопкой мыши, выберите «Открыть с помощью», а затем нажмите на нужный браузер.
- macOS — нажмите на файл, щелкните по «Файл», в меню выберите «Открыть с помощью», а затем выберите нужный браузер.
-
9
Отредактируйте HTML-документ (если потребуется). Возможно, вы заметили ошибку на странице. Чтобы исправить ее, внесите изменения в содержимое HTML-файла:
- В Windows щелкните по файлу правой кнопкой мыши и выберите «Редактировать» (если на компьютере установлен Notepad++, выберите опцию «Редактировать в Notepad++»).
- В macOS щелкните по файлу, нажмите «Файл», выберите «Открыть с помощью» и нажмите «TextEdit». Теперь перетащите HTML-файл в окно TextEdit.
Реклама
Советы
- На страницу можно добавить боковую полосу прокрутки текста с помощью тега
<marquee></marquee>. Но помните, что некоторые браузеры не распознают этот тег. - Многие люди используют Notepad++, чтобы писать и компилировать код.
- Каждый тег нужно закрыть. Например, теги
<tag1><tag2>следует закрыть так:</tag2></tag1>. - Чтобы отцентрировать картинку на странице, введите
<class="center">после имени картинки в теге «img» (к примеру,<img src="URL" class="center">).
Реклама
Предупреждения
- Загрузите свои картинки на сайт Imgur или подобный, если собираетесь добавить их на свою веб-страницу. Помните, что использование картинок, которые принадлежат другим людям, нарушает авторские права.
Реклама
Об этой статье
Эту страницу просматривали 226 313 раз.