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

Готовая 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

Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили, например, использовать Bootstrap или awsm.css. Как больше нравится.

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

Это мой сайт
Он хороший
Первая секция
Она обо мне
Но может быть и о семантике, я пока не решил.
Вторая секция
Она тоже обо мне
И третья
Вы уже должны были начать догадываться.
 -->

Короткий разбор

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

Доктайп помогает браузеру понять, как отображать страницу.

Тег, в котором мы показываем, что наша страница на русском языке.

Называем кодировку страницы — для русского языка подходит utf-8 .

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

Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про относительные ссылки.

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

Это шапка сайта — блок, который может повторяться на любой странице.

Это заголовки первого и второго уровня.

Это мой сайт
 
Первая секция
 

Семантический тег, в нём хранится основное содержимое страницы, которое относится только к этой странице.

Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.

Параграф текста — здесь пишем просто какой-то текст, который хотим вынести на страницу. Подробнее — в тренажёре.

Но может быть и о семантике, я пока не решил.
 

Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно раскомментровать.

На этом всё, дорабатывайте шаблон по своему усмотрению. Например,

Удачи в обучении!

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Сайты созданные с помощью гипертекста HTML

Цель работы: формирование навыков использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот.

Web-сайт состоит из 5 связанных гиперссылками страниц:

1. Титульная страница «Времена года» — файл index.htm;
2. «Зима» – файл winter.htm;
3. «Весна» – файл spring.htm;
4. «Лето» – файл summer.htm;
5. «Осень» – файл autumn.htm.

Часть 1 Создание страницы «Зима»

Скопировать папку «Времена года» в личную папку.

1. Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).
2. Разместить на странице теги, определяющие страницу в целом.
3. Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.
4. Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.
5. Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.
6. Просмотрите страницу в браузере.
7. Установите фоновый цвет страницы (голубой, bgcolor=»ccccff»).
8. Поместите рисунок, выравнивая его по правому краю документа.
9. Поместите стихотворение, выравнивая его по левому краю страницы. Каждую строку оформите отдельным абзацем, строфы отделите пустой строкой.
10. Создайте панель навигации по сайту.
11. Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

Часть 2 Создание страницы «Весна»

1. Запустить приложение Блокнот. Создать html-код страницы «Весна».
2. Заголовки и их отбивку выполнить аналогично странице «Зима», цвет второго заголовка – зеленый.
3. Цвет фона – бирюзовый (bgcolor=»00ffcc»).
4. Стихи разместить аналогично странице «Зима», начертание символов определить как полужирный курсив.
5. Рисунок разместить аналогично странице «Зима», установив размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.
6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – spring.htm
7. Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 3 Создание страницы «Лето»

1. Запустить приложение Блокнот. Создать html-код страницы «Лето».
2. Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.
3. Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor=»00cc66″).
4. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – summer.htm.
5. Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 4 Создание страницы «Осень»

Запустить приложение Блокнот. Создать html-код страницы «Осень».

1. Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.
2. Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor=»ffcc66″).
3. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – autumn.htm.
4. Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 5Создание титульной страницы

Запустить приложение Блокнот. Создать html-код титульной страницы.

1. Поместить заголовок первого уровня «Времена года», выравнивание – по центру, цвет заголовка – синий.
2. Выполнить отбивку заголовка прямой линией.
3. Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.
4. Поместить в ячейки иллюстрации.
5. Добавить панель навигации.
6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – index.htm.
7. Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Источник