Простой пример HTML документа — Учебник по основам HTML
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P> Это простейший пример HTML-документа. </P>
<P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P>
</body>
</html>
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P>Это простейший пример HTML-документа.
</P>
<P>Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки
<html> … </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> … </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> … </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер.
Рекомендуется название не длиннее 64 символов.
<body> … </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<h2> … </h2> — <H6> … </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> … </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<h2 ALIGN=CENTER>Выравнивание заголовка по центру</h2>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<h2 ALIGN=CENTER>Привет!</h2>
<h3>Это чуть более сложный пример HTML-документа</h3>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.
</P>
</body>
</html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
30 невероятно простых веб-страниц | Креативы в Интернете
Некоторые из самых известных страниц очень перегружены информацией, но я предпочитаю обратное: простые.
Очевидно, величайшим представителем этой группы является Google с его минималистичной домашней страницей с самого начала своего пути. но очевидно, что это не единственный сайт в Интернете, который стремится к простоте.
Индекс
- 1 Примеры простых HTML веб-страниц
- 1.1 Кин Ричмонд
- 1.2 Алиса Другард
- 1.3 Джонатан Огден
- 1.4 Зяблик
- 1.5 Другой дизайн
- 1.6 Бризк
- 1.7 Вертикальный дизайн сада
- 1.
8 247Grad - 1.9 Наслаждайтесь этим
- 1.10 Эллисон Хоу
- 1.11 Пикселот
- 1.12 Лайонел Шолтес
- 1.13 Элегантные чайки
- 1.14 Среда обитания
- 1.15 ПинкПойнт
- 1.16 IWC
- 1.18 7Сосна
- 1.19 Сумма
- 1.20 Шляпная коробка
- 1.21 Кара лайте
- 1.22 Внутренний студийный маркетинг
- 2 Как создать простой веб-сайт на HTML
- 2.1 Немного CSS
8 247GradПримеры простых HTML веб-страниц
Кин Ричмонд
Кин Ричмонд заставляет нас увидеть простоту игры с несколькими элементами, но очень хорошо подходит для дать отличное ощущение минимализма. Его логотип в верхнем левом углу, значки Twitter и контактов справа и в центре с привлекательной типографикой, посвященной тому, чему он посвящен.
Ссылка на Интернет: Кинрих Монд
Алиса Другард
Подпишитесь на наш Youtube-канал
Алиса Другард Будьте проще, разместив свой логотип в центре четыре вкладки для перемещения между основными страницами вашего веб-сайта и серия фотографий, размещенных должным образом, чтобы мы с первого взгляда знали, что вы делаете и что делаете.
Ссылка на Интернет: Алиса Другард
Джонатан Огден
Огден продолжайте играть с тем, насколько просто ваше имя как логотип, социальные сети, расположенные чуть ниже, не привлекающие внимания, и их дизайн работает так, чтобы мы могли быстро просмотреть их. На одной странице показано все, что имеет значение.
Ссылка на Интернет: Джонатан Огден
Зяблик
Финч уже собирается в другие места, чтобы поиграть с типографикой, а те цвета, обозначающие элегантность и мудрость того, что он делает. Имея всего несколько элементов, он оставляет в поле зрения весь свой профессионализм. Он также дает понять, какие страницы связаны с вами.
Ссылка на Интернет: Зяблик
Другой дизайн
Этот сайт играть иначе. Используйте обои с заголовком, из которого мы можем перейти на главные страницы, ваш телефон и ссылки на ваши социальные сети.
Ссылка на Интернет: Другой дизайн
Бризк
Кай показывает нам свою фигуру с абстрактный треугольник и подходящая цветовая палитра чтобы дать близость.
Он также предлагает часть своей биографии с шрифтом меньшего размера на случай, если мы захотим узнать о нем больше.
Ссылка на Интернет: Бризк
Вертикальный дизайн сада
Как и предыдущий, дизайн вертикального сада направлен на фотографию, которая быстро одна из его лучших работ в аэропорту Осло. Наверху у нас есть заголовок с «панелью навигации» или панелью навигации и даже с возможностью изменения языка. Логотип помещает его в вертикальный формат, чтобы придать последний штрих очень простой странице.
Ссылка на Интернет: Вертикальный дизайн сада
247Grad
247Grad играть с монохромным и фоновым изображением почти полностью темно. Шрифт заголовка, который меньше текста и заголовка, пишется с заглавной буквы, чтобы создать отличный контраст в общем дизайне.
Ссылка на Интернет: 247Grad
Наслаждайтесь этим
Una отличная типографика может быть признаком аутентичности и что мы знаем, что делаем.
Вам не нужно больше ничего давать, если сообщение прямое. Они ясно дают понять: они любят создавать красивые приложения и веб-сайты. Они оставляют почту для проектов и их изучения по другой ссылке.
Ссылка на Интернет: Наслаждайтесь этим
Эллисон Хоу
Эллисон берет нас перед другими курсами и включает больше изображений и тот более «женственный» шрифт. То же самое касается вашего основного изображения и этого заголовка. Он может позволить себе роскошь предъявить карточку, показывающую торговые фокусы.
Ссылка на Интернет: Эллисон Хоу
Пикселот
Пикселот немного сумасшедший, но также указывает на креативность автора. Использовать указатель мыши для создания маски это размывается, где бы мы ни находились.
Ссылка на Интернет: Пикселот
Лайонел Шолтес
Если вы хотите, сделайте свое резюме в Интернете не более того, Лайонел показывает вам шаги. Подходящий шрифт, ваше фото вверху слева, ссылки на ваши социальные сети и ваш опыт.
Единственный декоративный элемент — это две горизонтальные линии разного цвета.
Ссылка на Интернет: Лайонел Шолтес
Элегантные чайки
Мы возвращаем к элегантности минимализма и эти большие пустые места. С одной стороны, заголовок очень далеко от остальных элементов, а с другой стороны, эти элементы сформированы таким образом, что создают между ними большую визуальную гармонию.
Ссылка на Интернет: Элегантные чайки
Среда обитания
Как видно из всех примеров, важно вкладки заголовка для перехода на разные страницы с сайта. Типографика имеет большое значение, поиграйте с одним для заголовка, а другой для текста с шрифтом без засечек, который отлично справляется.
Ссылка на Интернет: Среда обитания
ПинкПойнт
Контраст цветов приводит нас к немного более сложной паутине всех видов. Не все эти основные элементы отсутствуют чтобы поиграть на этот раз с градиентами для фонового изображения и тех двух разделов, которые имеют основные цвета градиента для основного изображения.
Ссылка на Интернет: ПинкПойнт
IWC
Отличная фотография с грамотно подобранный шрифт и «геройский» элемент вы можете отдать в эту сеть. С помощью слайдера он показывает часть работы, довольно простую по своему замыслу.
Ссылка на Интернет: IWC
Отбивная котлета
Цифровая иллюстрация приводит нас к Chop Chop с тот образ, который съедает все его визуальное присутствие. Синий цвет в заголовке дает возможность создавать хроматические значения, соответствующие всему изображению, проецируемому через Интернет.
Ссылка на Интернет: Отбивная котлета
7Сосна
7Сосна играет с зеленым, чтобы быть главным героем домашней тарелки. Остальное составляет его изображение с большим количеством зеленого и простым заголовком который хочет остаться незамеченным логотипом.
Ссылка на Интернет: 7Сосна
Сумма
Сумма действительно ведет нас в другом направлении. Играйте с легендарным черно-белым, очень креативной иллюстрацией и это вместе с остальными элементами и двумя другими иллюстрациями, чтобы создать более чем интересный пейзаж.
Пример создания сайта, который выделяется среди остальных.
Ссылка на Интернет: Сумма
Шляпная коробка
Синий — преобладающий цвет на этом веб-сайте, в котором нет отсутствующих изображений, полностью освещенных белым, и того, на что будет похожа игра. в 3D этого конструктора сайтов который движется, когда мы движемся.
Ссылка на Интернет: Шляпная коробка
Кара лайте
Кара идет в простота и минимализм с ее естественным и красивым присутствием на твоей фотографии. Остальное — это текст, который сопровождается основными элементами заголовка и кнопкой гамбургера, чтобы его открыть.
Ссылка на Интернет: Кара лайте
Внутренний студийный маркетинг
Es простейшего Интернета но это показывает нам, что значит вести блог. Красные и черные — главные действующие лица на очень «блоговом» сайте.
Ссылка на Интернет: Внутренний студийный маркетинг
Как создать простой веб-сайт на HTML
Мы собираемся научить вас создать простой сайт в HTML так что вы знаете самые основные элементы, из которых он состоит.
Будет необходимо иметь веб-хостинг, на котором мы сможем загрузить код и некоторые настройки в CSS, но давайте, это принципы, чтобы начать наше путешествие в HTML.
Увидев некоторые простые веб-примеры С помощью которого вы можете достаточно мотивировать себя, чтобы создавать свои собственные проекты, не слишком ломая себе голову. Иногда простое создает лучший эффект, чем усложняет нас в сложных вещах. Вы увидите, что в большинстве случаев простое работает очень хорошо. Действуй.
Создать простой веб-сайт в HTML проще, чем может показаться на первый взгляд. Сайт состоит из заголовка, тела или контент и нижний или нижний колонтитулы в качестве основных элементов. Мы можем классифицировать их так:
- документы: все документы, которые мы собираемся создавать, должны быть выполнены с . Мы открываем и всегда закрывается
- Тело или тело: видимая часть документа находится между Y
- Заголовки: они известны как h2, h3, h4 . .. Начнем с и мы заканчиваем . Текст внутри будет отображаться как заголовок и в зависимости от его нумерации будет иметь меньший или больший размер.
- Абзацы: абзац заключен в и закрывается
- Связи: самый яркий пример — ссылка на Creativos Online
- образность: мы определяем их меткой . Примером может быть . Мы вызываем изображение между кавычками и используем alt для альтернативного текста, который необходим для SEO.
- Списки: мы определяем списки с помощью для беспорядка и с для аккуратного. Элементы списка используются с . Всегда не забывайте закрывать их планкой.
.. Начнем с и мы заканчиваем . Текст внутри будет отображаться как заголовок и в зависимости от его нумерации будет иметь меньший или больший размер.С этими элементами у нас будет основа для создания простого сайта как вы увидите в большом количестве из них, которым мы научим вас в следующем разделе. Допустим, семантическая структура с ее наиболее важными элементами выглядит так:
- Заголовок с панелью навигации для различных страниц сайта.
- Статья или место для тела в котором мы можем создать запись в блоге, разместить нашу учебную программу или изображение.
- Боковая панель или боковая панель разместить дополнительную информацию.
- Нижний колонтитул или фут, где мы будем размещать ссылки на самые важные страницы сайта, а также иконки социальных сетей (всегда в качестве примера).
В примерах, которые вы увидите ниже, все основано на простом, но элегантном логотипе, верхний колонтитул, где они размещают навигацию на разных страницах сайта, центральное пространство, в котором преобладает текст или изображение, и нижний колонтитул с элементами, упомянутыми в предыдущем абзаце.
Мы рекомендуем не ломайте голову и переходите к простому. Главное, чтобы эти области выделялись среди остальных за считанные секунды визуально. Со временем мы сможем усложнять себя и работать над другими областями.
Это наглядный пример HTML-кода с наиболее важными элементами:
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'/>
<title>HTML Semántico</title>
</head>
<body>
<h2>Crear web es fácil!</h2>
<ul>
<li><a href='#'>Inicio</a></li>
<li><a href='#'>Acerca de</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Iniciar sesión</a></li>
</ul>
</body>
</html>С этими строками HTML-кода у нас будет сначала создал заголовок страницы в заголовке с, в этом случае «Семантический HTML» мы бы закрыли заголовок с , заголовок с и мы уступим место, чтобы открыть тело .
Наконец, всегда открывать документ с чтобы закрыть его в конце всего кода косой чертой. После открытия документа всегда используется ссылка на язык, в данном случае испанский с «es» и .
Важно внимательно смотреть на код и всякий раз, когда вы открываете функцию, закрываете ее с помощью панели обеспокоены.
Немного CSS
Мы немного углубимся в CSS, но попутно, чтобы вы поняли как стилизовать HTML. Предположим, что CSS и HTML идут рука об руку, чтобы создать те простые веб-сайты, которые вы найдете ниже.
Если, с одной стороны, у нас есть семантическое использование HTML для определения заголовка или заголовка, тела или тела с его статьей или изображением и нижним колонтитулом, в CSS мы использовали бы функцию «Div» для идентификации к каждому из этих пространств, чтобы впоследствии внести необходимые изменения в дизайн.
Что-то простое:
Хотя мы можем применять стили с помощью Div, подходящая и идеальная структура поможет так что поисковые роботы могут «читать», о чем наш контент, поэтому, если мы будем следовать этой базовой структуре, у нас будет отличная работа и база в первую очередь.
Un простой пример кода CSS:
h2 {
цвет: белый;
выравнивания текста: центр;
}
Мы называем h2 и текст поставим в белый цвет с цветом: белый; и выравниваем по центру с помощью «выравнивания текста». Всегда закрывайте квадратными скобками после открытия вызова h2.
Заголовок фото Грег Ракози
Шелдон БраунДемонстрация некоторых функций HTMLВам не нужно много знать HTML, чтобы создать страницу, потому что вы можете скопировать фрагменты HTML с других страниц, которые делают то, что вы хотите, а затем изменить текст! Эта страница отображается слева в том виде, в каком она отображается в вашем браузере, а соответствующий HTML-код отображается справа. Разрывы строкHTML обычно не использует разрывы строк для обычного текста. Пустое пространство любого размера рассматривается как единое пространство. Это связано с тем, что автор страницы не может знать размер экрана читателя или тип размера, установленный для браузера. Если вы хотите поместить разрыв строки в определенном месте, вы можете использовать команду « », которая вставит пустую строку. Команда заголовка (» «) помещает пустую строку выше и ниже текста заголовка.Команды запуска и остановкиБольшинство HTML-команд идут парами: например, »» отмечает начало заголовка размером 4, а «» отмечает его конец. Команда закрытия всегда такая же, как и команда открытия, за исключением добавления «/». Это размер «2» товарной позицииЭто размер «3» товарной позиции.Это размер «4» товарной позиции.Это размер «5» товарной позиции.Это размер «6» товарной позицииCopyright © 1997, Шелдон БраунЕсли вы хотите сделать ссылку или закладку на эту страницу, URL-адрес:https://www.sheldonbrown.com/web_sample1.html | |
Команды HTML связаны с пояснениями того, что они делают.
Команды HTML связаны с пояснениями того, что они делают. 
Модификатор не нужно повторять в закрывающей команде.
org/
