Пример простой страницы html

Код файла index html

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

Что такое html код страницы?

То, что вы сейчас видите, — простой текст внутри блоков, но всё это расположено внутри «кода html» — это сравнимо с каркасом дома, который мы не сможем увидеть, поскольку он и снаружи и внутри облицован.

Чтобы увидеть данный скрытый код html вам нужно проделать несколько действий:

И уже на странице введите сочетание клавиш «ctrl + U».

Состав представленной простой html страницы

Друзья!

Простая html страница

И конечно же — как же без видео

Код простой html страницы

Ниже приведенный код и называется кодом простой страницы! Это основа! Любая страница в интернете начинается с этого!

Для начала вам нужно знать, сто пишется в титлах title — основной заголовки для страницы! И внутри тега body размещается текст, что собственно вы сейчас читает!

Пример простой страницы — для того, чтобы посмотреть код, нажмите ctrl + U

Из чего состоит простая html страница

Двойной тег head, в который помещаются все остальные теги :

Тег head голова, там находится вся информация о странице:

Одинарный тег meta с атрибутом кодировки:

Двойной тег title — заголовок страницы

Двойной тег body, в котором находится основной контент страницы и вы читаете данные строки:

Как сохранить простую страницу html

Существует ли в компьютере программа, которая может сохранить простую страницу!? Да есть такая программа — это обычный блокнот, единственное, что он может сохранить простую страницу в кодировке utf-8 — подробнее о сохранении страниц html
1). Открываем блокнот.
2). Копируем код
3). Сохранить как — тип файлов — все файлы, кодировку выбираем utf-8 — сохранить!

Как посмотреть в браузере простую страницу html

Чтобы посмотреть простую страницу html в браузере есть несколько способов:

1). Наводим мышку на файл простой html страницы нажимаем ПКМ ищем строку открыть с помощью, справа выбираем браузер.
Если браузеров нет, то нажимаем выбрать другое приложение — ищем браузер
2). Зажимаем файл мышкой и перетаскиваем в адресную строку браузера.

Как видим простая html страница прекрасно открылась по локальному адресу на компьютере!

Пример простой страницы html

Ну и собственно, если вы хотите видеть вашу простую html страницу в интернете, вам понадобится filezilla и ftp

Источник

Каркас страницы HTML. Создаём файл

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

В предыдущей статье мы создали Директорию сайта, а в этой приступим к написанию страницы, или созданию html документа (файла), что в общем-то одно и тоже.

Каркас страницы по версии HTML 5

И каркас страницы по версии HTML 4.01 Transitional, являющейся переходной между 4 и 5 версиями, и актуальной до сих пор.

Как видите, версия HTML 5 заметно проще своих предшественников.

Кратко рассмотрим, что-же означают все эти слова и символы.

указывает на тип создаваемого нами документа.

Здесь указано, что создаётся html-документ по версии html 5 или 4.01.

Далее идёт столбик из тегов. Тег — это конструкция языка, которая указывает браузеру, что нужно отображать на экране монитора. Какие-то теги говорят, что нужно отображать заголовок, какие-то абзац и так далее. В каркасе страницы находятся теги называющиеся тегами верхнего уровня.

Первый тег в столбике — это . Обратите внимание на то, что и последний тег тоже только со слешем (наклонной чертой). Это классический пример парного тега, где сначала идёт открывающий элемент, а потом закрывающий.

Значит теги бывают парные, и представляют из себя контейнера для html-кода, но бывают и одиночные. Придёт время и мы их так же разберём. Данный тег является контейнером для всей страницы.

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

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

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

Из примеров видно, что код каркаса в HTML 5, заметно сократился. В теге нет больше описания версии и типа файла, в остался только charset , для указания кодировки.

И ещё, при подключении таблиц стилей больше не нужно будет указывать type=»text/css» в тегах и

Теперь давайте откроем установленный у нас редактор Notepad++. Так как мы будем пользоваться им очень часто, предлагаю разместить его в меню Пуск. Для этого нужно щёлкнуть по значку Пуск, затем правой клавишей, по открывшейся строчке с блокнотом и карандашом, и в открывшемся меню выбрать Закрепить на панели задач

Затем щёлкнем по его иконке, появившейся в нижней строке монитора, и нам откроется домашняя страница редактора. Щёлкаем по первой вверху иконке (новый), и открываем новый документ, в который и скопируем, или перепишем(как угодно), каркас страницы.

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

После этого, в строке панели управления(вверху), находим пункт Encoding(кодировка), и в открывшемся меню выбираем Преобразовать в UFT-8.

И чтоб в дальнейшем не волноваться по этому поводу, щёлкнем по пункту Settings(опции), затем по строке Настройки”, в окне настроек – Новый документ, и ставим точку в строке UTF-8. Затем Закрыть

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

Открываем папку site, в строчке Имя файла убираем nev1, пишем index.html, и жмём Сохранить.

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

Поздравляю! Вы только-что создали файл. Теперь, если зайти в директорию сайта (Пуск-Компьютер-Документы-site), то там Вы увидите такую конструкцию:

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

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

Перемена

Чем отличается мужское общежитие от женского?
В мужском общежитии дурдом, а в женском — домдур

Раньше студенты учились и подрабатывали, а теперь работают и подучиваются.

Источник