Как создать сайт html программа

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML#128578; Считайте, что сейчас я прошу вас писать эти буковки, т.к. это улучшит ваше понимание и запоминание кода.

Sublime Text очень удобен тем, что подсказывает теги (автодополнение), сам делает отступы, закрывает теги и много чего другого. Словом, он очень упрощает работу над HTML-документом, но рекомендую использовать его позже, когда уже выучите хотя бы основные теги и поймете главные правила синтаксиса. Правда, если у вас не Windows, а другая операционка – ставьте сразу Sublime.

Здесь выбирайте подходящую вам систему и качайте. Программой можно пользоваться бесплатно, но, если вам захочется убрать надпись “unregistered” – придётся заплатить $70.

Браузер

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

Как создать сайт самому в программе Frontpage

Итак, с рабочим инвентарём мы определились.

Теперь создайте папку с любым названием, например, “HTML_Start” и в ней сохраните свой первый HTML-документ:

1. Открываем Notepad++
2. В левом верхнем углу жмём «Файл» — «сохранить как», выбираем нашу папку
3. Называем файл «index.html», либо просто «index» и в строке «тип файла» выбираем Hyper Text Markup Language file.
4. Жмём «сохранить».

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

Почему именно index.html ?

Обычно мы заходим на сайт с главной страницы. Когда у сайта множество страниц, мы подсказываем веб-серверу, которую из них нужно загружать автоматически. В большинстве случаев, адрес сайта указывается кратко, без лишних файлов на конце. Сравните, vertex-academy.com и vertex-academy.com/index.html – это одна и та же страница, но мы конечно же напишем, как в первом варианте.

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

Но прежде буквально пару слов о тегах

HTML-код всегда помещен между угловых скобок.
Например,

Источник: vertex-academy.com

Создаём свой первый сайт на HTML

Урок №9
Создаём свой сайт из трёх страниц

В этом уроке, мы создадим сайт состоящий из трёх страниц. Но перед этим, для вашего же удобства, вам нужно создать папку на Рабочем столе , папку можете назвать Мой сайт .

ChatGPT Рабочий Сайт за 3 МИНУТЫ

Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,

и две фотографии:
irbis.jpg
polyarnyi-volk.jpg

Сделаем третью страницу, она будет посвящена полярной сове.

Данные третьей страницы

Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html

Название страницы , сделайте:
Страница о полярной сове

h1 < color: green; font-family: Arial; >p

Статья состоящая из двух абзацев :

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения — территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко.

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

В итоге, вы должны получить следующую страницу.

Соединяем ссылками страницы сайта

На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

Теперь нам нужно соединить их ссылками, чтобы получился сайт. Ссылки делать вы уже научились, поэтому я вам дам лишь HTML-код, который нужно разместить перед закрывающим тегом , в каждом из трёх HTML-документов:

Снежный барс Полярный волк Полярная сова

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

Как вы уже знаете, каждый HTML-документ начинается с тега , данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки , а уже под ним ставится тег . Строка даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.

Конечный HTML-документ, например файла index.html , в итоге должен выглядеть следующим образом:

Страница о снежном барсе h1 < color: green; font-family: Arial; >p

Снежный барс

Снежный барс (ирбис, ак барс) — крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.

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

Снежный барс Полярный волк Полярная сова

Всегда добавляйте строку , в начале каждого HTML-документа.

Регистрация домена и хостинг

Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html

и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен) , наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс :
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU , нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год).

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

Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!

Хостинг — это размещение сайта в интернете.

Когда вы разместите сайт в интернете, то при наборе имени сайта, например gabdrahimov.ru , первым откроется файл index.html Это своего рода главная страница сайта, с которой посетитель начинает путешествие по вашему ресурсу.

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

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

Источник: gabdrahimov.ru

Урок 2. Создание простого сайта

1. Понятие фреймов. Двухфреймовая структура HTML_документа

В этом уроке Вам предстоит оформить сайт РГППУ при помощи фреймовой структуры.

Что такое фрейм?

Фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).

Истинное назначение фреймов — это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет пользователю, просматривающему сайт, одновременно видеть больше одного документа.

В действительности, даже при использовании простого дизайна с двумя фреймами (рис.1) задействовано три документа:

• документ, описывающий фреймовую структуру;
• документ для левого фрейма;
• документ для правого фрейма.

Фреймовая структура дает возможность на все время закрепить навигацию на экране в поле зрения посетителя сайта (в нашем случае это навигационная панель со ссылками на разделы сайта РГППУ).

Организация фреймов

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

Атрибуты тега

Этот атрибут определяет количество и ширину столбцов фрейма. Ширину столбцов можно задать в пикселях или в процентах. COLS=N – определяет столбец шириной в N пикселей.

COLS=N% – выделяет данному столбцу фрейма М%-долю ширины окна броузера.

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

ROWS=N – определяет строку высотой в N пикселей.

ROWS=N% – выделяет данной строке фрейма N%-долю высоты окна броузера.

Этот атрибут определяет отображение рамок фреймовой структуры.

FRAMEBORDER=YES – отображается трехмерная рамка (значение по умолчанию).

FRAMEBORDER=NO – рамка невидима

Фреймовая структура из двух столбцов (листинг 1)

Для того, чтобы осуществить эту структуру, нам необходимо создать файлы doc1.html и doc2.html.

Листинг 2. Документ doc1.html

Документ для левого фрейма

Документ для левого фрейма

Листинг 3. Документ doc2.html

Документ для правого фрейма

Документ для правого фрейма

Упражнение 1

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 1.
3. Сохраните документ в папке web под именем frames_2.html
4. В новом документе наберите текст, изображенный в листинге 2. Сохраните документ в папке web под именем doc1.html
5. В новом документе наберите текст, изображенный в листинге 3. Сохраните документ в папке web под именем doc2.html
6. Запустите файл frames_2.html двойным щелчком. В окне браузера web-страница должна иметь следующий вид (рис. 1).

Экран по вертикали разбивается на 2 фрейма. Левый фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый фрейм займет 75% экрана и вначале покажет файл doc2.html.

Примечание: в значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.

Тег

Тег определяет отдельный фрейм. Это непарный тег. Тегов должно быть ровно столько, сколько областей определено в структуре FRAMESET. У тега имеются следующие атрибуты:

Этот атрибут указывает URL-адрес содержимого фрейма.

С помощью этого атрибута фрейму присваивается имя, которое можно использовать для ссылки на фрейм, обычно из других фреймов той же структуры. В гипертекстовой ссылке при этом используется атрибут TARGET, который ссылается на имя фрейма. Имена фреймов могут состоять из букв и цифр. В качестве первого символа имени нельзя использовать символ подчеркивания ( _ ).

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

SCROLLING=»yes» (установка полосы прокрутки)

SCROLLING=»no» (отсутствие полосы прокрутки)

SCROLLING=»auto» (значение по умолчанию).

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

Этот атрибут определяет отображение рамки фрейма:

FRAMEBORDER=»yes» — отображается трехмерная рамка (значение по умолчанию)

FRAMEBORDER=»no» — рамка невидима.

2. Трехфреймовая структура HTML-документа

Фреймовая структура из трех фреймов (листинг 4)

Листинг 5. Документ doc3.html

Документ для верхнего фрейма

Документ для верхнего фрейма

Упражнение 2

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 4.
3. Сохраните документ в папке web под именем frames_3.html
4. В новом документе наберите текст, изображенный в листинге 5. Сохраните документ в Вашей папке под именем doc3.html
5. Запустите файл frames_3.html двойным щелчком. В окне браузера web-страница должна иметь примерно следующий вид (рис. 2).

3. Бегущая строка

Эффект «бегущей строки» — популярное украшений web-страниц.

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

Атрибут определяет выравнивание бегущей строки.

ALIGN=»top» – выравнивает верхнюю границу поля по самому верхнему краю самого высокого элемента в текущей текстовой строке

ALIGN=»middle» – центрирует поле по осевой линии текущей текстовой строки.

ALIGN=»bottom» – выравнивает нижнюю границу поля по нижней линии текущей текстовой строки.

Атрибут определяет направление движения строки.

DIRECTION=»left» — строка появляется справа и движется влево (установка по умолчанию)

DIRECTION=»right» — строка входит в поде, слева и движется вправо.

Атрибут задает цвет фона бегущей строки

Атрибут определяет поведение бегущей строки.

BEHAVIOR=»scroll» — это установка, используемая по умолчанию. При этом строка «вбегает» со стороны, определенной атрибутом direction в пустое поле и выходит из него на противоположной стороне.

BEHAVIOR-SLIDE – текст не «выбегает» с другой, стороны поля, а останавливается.

BEHAVIOR=»alternate» — текст появляется в окне, «добегает» до противоположного конца окна, останавливается и начинает движение в противоположном направлении.

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

Атрибут задает ширину поля бегущей строки. Задается в пикселях или в процентах относительно ширины окна браузера.

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

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

Атрибут задает расстояние до текста по горизонтали в пикселях

Атрибут задает расстояние до текста по вертикали в пикселях. Атрибуты HSPACE и VSPACE создают свободное пространство между бегущей строкой и окружающими ее HTML- элементами.

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

LOOP=»N» – определяет N-кратное прохождение строки по экрану.

LOOP=»infinite» – повторяет бегущую строку до тех пор, пока отображение документа не будет прервано (например, загружается другая WEB-страница.

SCROLLAMOUNT и SCROLLDELAY

Эти атрибуты определяют, как быстро и насколько плавно бежит бегущая строка.

SCROLLAMOUNT=»N» — задает количество пикселей, на которое бегущая строка перемещается за один шаг. Малое значение (например N=1) соответствует строке, бегущей плавно. Если данное значение велико, строка делает большие скачки.

SCROLLDELAY=»N» — задает количество миллисекунд, которое ожидает Internet Explorer после каждого выполненного шага, прежде чем строка побежит дальше.

Чем меньше это значение, тем чаще обновляется бегущая строка, тем «мягче» она бежит. Если это значение велико, анимационный эффект теряется.

Организация бегущей строки. Листинг 6

Упражнение 3

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 6.
3. Сохраните документ в Вашей папке под именем stroka.html
4. Запустите файл stroka.html двойным щелчком.

4. Списки

Средствами HTML можно создавать любые списки: нумерованные с разными схемами нумерации и маркированные с разными типами маркеров.

Отдельный элемент списка в списке U1> формируется с помощью тега LI>.

У тегов и есть атрибут TYPE, который задает тип маркеров списка.

Его допустимые значения:

TYPE (закрашенный круг);

TYPE (окружность);

TYPE=»square» (квадрат).

Атрибут задает число, с которого начинается список.

START=»N», где N – число, с которого начинается нумерация списка.

Атрибут задает способ нумерации элементов списка.

TYPE=»1″ – нумерация выполняется арабскими цифрами.

TYPE=»a» – нумерация выполняется строчными буквами (a,b,c,…).

TYPE=»A» – нумерация выполняется прописными буквами (A,B,C…)

TYPE=»I» – нумерация выполняется римскими цифрами (I,II,III,…).

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

Создание списков. Листинг 7

Упражнение 4

1. Откройте программу Блокнот.
2. Наберите текст, изображенный в листинге 7.
3. Сохраните документ в Вашей папке под именем spisok.html
4. Запустите файл spisok.html двойным щелчком. Результат изображен на рис. 3.
5. Откройте html-код файла frames_2.html, исправьте src=»http://web-verstka.ru/uchebnyie-kursyi/czifrovyie-texnologii-v-professionalnoj-deyatelnosti/gipertekstovyij-uchebnik-na-html/doc1.html» на src line-height: 1.5;»>spisok.html».
6. Сохраните исправленный файл под именем institut.html.
7. Запустите вновь созданный файл. Результат на рис. 4

4. Организация гиперссылок

Для организации гиперссылки следует сообщить браузеру, какой элемент в HTML-файле служит привязкой, а также указать адрес документа или ресурса Internet, на который указывает ссылка. Все это делается в теге <А>. . Между А> и могут находиться только текст и графика. Текст, располагающийся между и изображается браузером в цвете.

Графические элементы привязки создаются аналогично. Вместо текстового элемента привязки с помощью тега IMG> создается графический и располагается между тегами и . Когда пользователь щелкает на любом участке изображения, браузер открывает web-страницу, ссылка на которую дана в теге .

Атрибуты тега

Этот атрибут определяет целевой адрес гиперссылки.

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

Примеры:

• — удаленный переход;
• — переход на конкретный фрагмент текущего документа. Предварительно этот фрагмент должен быть помечен меткой с помощью тега = «MYLABEL»>;
• — переход на другой документ на своем компьютере;
• — использование в ссылке абсолютного адреса на своем компьютере.

Абсолютный адрес — это полный Internet — адрес со всей информацией, требующейся клиенту для того, чтобы отыскать сервер ( HTTP :// WWW . RAMBLER . RU ).

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

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

Задание цвета гиперссылок

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

Цвет гиперссылки (по умолчанию светло-голубой)

Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)

Цвет активизированной гиперссылки (в момент щелчка)

Упражнение 5

Введем ссылки в документ spisok.html

1. Откройте документ spisok.html в виде HTML-кода.

2. Для тега задайте цвет гиперссылок:

3. Организуйте гиперссылки для пунктов Институт психолого-педагогического образования (ППО) и Институт гуманитарного и социально-экономического образования (ГСЭО)

• Для этого просмотрите в браузере файлы psihology.html и gumanitar.html из папки web.
• В документе spisok.html в соответствующих строках введите записи:

В данных записях атрибут гиперссылки target=»second» означает, что файлы psihology.html и gumanitar.html будут открываться во фрейме для второго документа, который имеет имя name=»second» (см. html-код файла frames_2.html из листинга 1.

4. Запустите файл istitut.html в браузере. Щелкайте по гиперссылкам, чтобы проверить их работу. Содержание гиперссылки должно отображаться в правом фрейме. Результат на рис. 5

Рис. 5. Содержание активной ссылки из левого фрейма отображается в правом фрейме

5. Добавление видое на web-страницу

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