Примеры создания сайтов на html: Шаблон сайта на чистом HTML. Готовый код сайта

Содержание

Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)

В Интернете есть сайты, размещающие домашние web-странички бесплатно,

например http://www.chat.ru/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб),

http://www.boom.ru/ (до 50 Мб), http://www.fortunecity.com/ (до 100 Мб).

Для размещения страничек используют броузеры Internet Explorer 4.0-5.5, Netscape

Communicator 3.0 — 4.7, Opera 3.60-5.0, а также ftp-броузеры CuteFTP или LeechFTP.

Есть сайты, например http://www.da.ru/, http://www.jump.ru/, позволяющие бесплатно

получать удобные короткие адреса страниц.

Вопросы создания элементов диалога (кнопок и других) рассмотены в

Примере 6 и 7.

Рассмотрим примеры создания простейших Web-страниц.

Пример 1.

<HTML>

<HEAD>

<TITLE>Название документа</TITLE>

</HEAD>

Здесь расположен сам Web-документ.

<CENTER><h2><font color=»yellow»>Всем привет!</h2></CENTER></font><P>

<CENTER><font color=»red» size=4>Здравствуй, мир!</CENTER></font>

</BODY>

</HTML>

Здесь атрибут size=4 задает размер шрифта.

Пример 2.

<HTML>

<HEAD>

<TITLE>Поисковые системы Internet.</TITLE>

</HEAD><BODY bgcolor=»navy» text=»yellow»>

<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>

<font color=»white»>Ниже приведены некоторые популярные зарубежные

поисковые системы и отечественная система Rambler. Для поиска

информации используется окно Search, в которое вводится ключевое

слово и нажимается кнопка Search. <br></font>

Просмотрите примеры:

<a href=»altavist.HTM»>ALTAVIST.HTM</a>,

<a href=»EXCITE.HTM»>EXCITE.HTM</a>,

<a href=»YAHOO.HTM»>YAHOO.HTM</a>!

1.<IMG SRC=»altavist.gif»>

2.<IMG SRC=»yahoo.gif»>

3.<IMG SRC=»excite.gif»>

4.<IMG SRC=»lycos.gif»><P>

5.<IMG SRC=»infoseek.gif»>

6.<IMG SRC=»rambler.gif»><hr color=»lime»>

<tt><big><U><font color=»aqua»>Используйте поисковые системы для

поиска информации в Интернете!</tt></big></U></font>

</BODY>

</HTML>

Пример 3.

<HTML>

<HEAD>

<TITLE>Эхо Москвы.</TITLE>

</HEAD>

<CENTER><u><font color=»yellow»>24 часа в сутки!</u></font><br>

Информация на любые темы!

<font color=»aqua»>Частота на УКВ 73,82 МГц или 91,2 МГц FM. <p></font>

<i><big><font color=»white»>Слушайте Эхо Москвы!

Остальное видимость!<br></i></big></font>

Адрес в Интернете:

</BODY>

</HTML>

Пример 4.

<HTML>

<HEAD>

<TITLE>Упорядоченные и неупорядоченные списки</TITLE>

</HEAD>

<h4><U>Неупорядоченный список</h4></U>

<UL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</UL>

<h4><U>Упорядоченный нумерованный список</h4></U>

<OL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</OL>

</BODY>

</HTML>

Пример 5.

<HTML>

<HEAD>

<TITLE>Списки определений</TITLE>

</HEAD>

<h4><u>Списки определений имеют вид:</h4></u>

<DL>

<DT>Название термина 1

<DD>Определение термина 1

<DD>Другое определение термина 1

<DT>Название термина 2

<DD>Определение термина 2

<DD>Другое определение термина 2

<DT>Название термина 3

<DD>Определение термина 3

<DD>Другое определение термина 3

</DL>

Петров И.C., E-mail: petrov@mail. ru

</address>

</BODY>

</HTML>

Тег <address> используется для введения адреса электронной почты

E-mail.

Пример 6.

Элементы диалога (кнопки, области для ввода текста).

<HTML>

<HEAD>

<TITLE>Формы</TITLE></HEAD>

<BASE>

<FORM>

<CENTER><FONT size=6>Элементы диалога</font></center>

<Н2>Элемент ISINDEX</h3>

<Н2>Элементы INPUT</h3>

<h4> Ввод текстовой строки </h4>

<h4> Ввод пароля </h4>

<h4> Флажки </h4>

<h4> Переключатели </h4>

<h4> Кнопка подтверждения ввода </h4>

<h4> Кнопка с изображением </h4>

<h4> Кнопка очистки формы </h4>

<Н2>Элемент SELECT

<OPTION value=а>Первый

<OPTION value=Ь>Второй

<OPTION value=с>Третий

<OPTION value=d>Четвертый

</select></h3>

<Н2>Элемент TEXTAREA

Область для ввода текста

</textarea></h3>

</FORM>

</BODY></HTML>

Пример 6 с элементамт диалога.

Элементы диалога

<Н2>Элемент ISINDEX

<Н2>Элементы INPUT
Ввод текстовой строки

Ввод пароля

Флажки

Переключатели

Кнопка подтверждения ввода

Кнопка с изображением

Кнопка очистки формы

Файл

<Н2>Элемент SELECT

<Н2>Элемент TEXTAREA Область для ввода текста

Пример 7.

Скрипт.

Программа на языке JavaScript позволяет осуществлять запуск

любой программы или переход к любому файлу при нажатии кнопки.

Здесь mark1() — метка. Для разных кнопок и разных команд надо

указывать разные метки. В данном примере при нажатии кнопки

запускается калькулятор.

<!—

function mark1(){

window.location.href=»/windows/calc.exe»;

}

//—>

</script>

В данном примере при нажатии кнопки просматривается картинка lycos.gif (для Internet Explorer).

Пример 8.

Три вертикальных фрейма.

<html>

</noframes>

</frameset>

</html>

Пример 9.

Три горизонтальных фрейма.

<html>

<!— For browsers that don’t support frames —>

</noframes>

</frameset>

</html>

Пример 10.

Два вертикальных и два горизонтальных фрейма.

<html>

</noframes>

</frameset>

</html>

Пример создания сайта — Информатика и ИКТ 11 класс

Пример создания сайта

Задание. Создать сайт, посвященный основам HTML. Сайт состоит из 10 страниц:

№	Заголовок	Содержание	Файл
1	Главная	описание ресурса	Index. html
2	Введение в HTML	общая информация об HTML	vvedenie.html
3	Цвет	работа с цветом в HTML	color.html
4	Текст	работа с текстом в HTML	text.html
5	Абзац	работа с абзацами в HTML	indent.html
6	Гиперссылки	работа с гиперссылками в HTML	hyperlink.html
7	Списки	работа с текстом в HTML	list.html
8	Рисунки	работа с текстом в HTML
9	Таблицы	работа с текстом в HTML
10	Фреймы	работа с текстом в HTML

Все страницы имеют одинаковый дизайн, основанный на таблицах.

Дизайн страницы построен на 4 таблицах

Часть 1. Разметка страницы

Задание 1. Создать шаблон страницы.

Создать в программе Блокнот файл под именем shablon.html и сохраните его в папку Site.

! Важно. При сохранении файла в качестве типа файла укажите Все файлы.

Результат (рис. 1)

Рис. 1

Таблица 1. Верх

Параметры:

Размер: 1х1
Ширина таблицы: Width=»800″
Высота строки: Height=»220″
Без границ: Border=»0″ Frame=»void» Rules=»none»
Форматирование по центру: Аlign=»center»
Задний фон – рисунок: background=»title.jpg»

Таблица 2. Меню

Параметры:

Размер: 1х7
Ширина таблицы: Width=»800″
Без границ: Border=»0″ Frame=»void» Rules=»none»
Форматирование по центру: Аlign=»center»
Расстояние внутри ячеек: Cellpadding=»5″
Цвет строки — фисташковый: Bgcolor=»#B8DB7C»
Ширина 1-го и 7-го столбца фиксированная — Width=»20″

Содержание:

гиперссылки на страницы сайта Главная, География, Животные, Растения, Информационные источники.

Таблица 3. Страница

Параметры:

Размер: 1х4
Ширина таблицы: Width=»800″
Высота строки подбирается автоматически под высоту экрана: Height=»100%»
Выравнивание в строке по верхнему краю: Valign=»top»
Без границ: Border=»0″ Frame=»void» Rules=»none»
Форматирование по центру: Аlign=»center»
Расстояние внутри ячеек: Cellpadding=»10″
Цвет строки — фисташковый: Bgcolor=»#B8DB7C»
Ширина 1-го и 4-го столбца фиксированная: Width=»20″
Ширина 2-го столбца фиксированная: Width=»100″
Цвет 2-го столбца – серый: Bgcolor=»#ADC2D1″
Цвет 3-го столбца – белый: Bgcolor=»#FFFFFF»

Содержание:

2-й столбец: три гиперссылки в виде рисунков;
3-й столбец: заголовок 1-го уровня, форматирование по центру; текст страницы, форматирование по ширине.

Таблица 4. Подвал

Параметры:

Размер: 1х1
Ширина таблицы: Width=»800″
Без границ: Border=»0″ Frame=»void» Rules=»none»
Форматирование по центру: Аlign=»center»
Высота строки фиксированная: Height=»30″
Цвет строки — фисташковый: Bgcolor=»#B8DB7C»

Содержание:

Гиперссылка на отправку письма на E-mail автора сайта.

Подсказка-код (допишите недостающие строки кода)

<HTML>
<HEAD>
<TITLE>Удивительная планета</TITLE>
</HEAD>
<BODY>

<!—Верх —>
<table border=»0″ frame=»void» rules=»none» align=»center»>
<tr> <td background=»title.jpg»>
</table>

<!—Меню —>
<table border=»0″ rules=»none» align=»center» cellpadding=»5″>
    <tr bgcolor=»#B8DB7C»>
        <td>
        <td><a href=»index. html»>Главная</a>
        <td>
</table>

<!—Страница —>
<table frame=»void» border=»0″ rules=»none» align=»center» cellpadding=»10″>
    <tr bgcolor=»#B8DB7C» valign=»top»>
        <td >
        <td bgcolor=»#ADC2D1″>
        <p><a href=»geo.html»><img src=»IMAGES/mountain.jpg» width=»100″ ></a>
        <td bgcolor=»#FFFFFF» >
        <h3 align=»center»>Заголовок</h3>
        <p align=»justify»>Основной текст
        <td>
</table>

<!—Подвал —>
<table border=»0″ rules=»none» align=»center» cellpadding=»5″>
    <tr bgcolor=»#B8DB7C»>
        <td align=»center»> © Все права защищены. И.И. Иванов, 2020
        <br> <A href=»mailto: @mail.ru»>Написать Администратору сайта</a>
</table>

</BODY>
</HTML>

Задание 2. Используя файл shablon.html как шаблон, создайте заготовки всех страниц сайта.

№	Файл	Заголовок
1	index.html	Главная
2	geo.html	География
3	animal.html	Животные
4	flora.html	Растения
5	links.html	Информационные источники

Часть 2. Создание страниц сайта

Задание 3. Заполните страницы сайта содержимым.

Дизайн страницы Растения (файл flora.html) на рис. 3.

Рис. 3

Фрагмент кода (допишите недостающие строки кода, курсивом выделены команды кода, добавляемые в страницу-шаблон).

<!—страница —>
<table frame=»void» border=»0″ rules=»none» align=»center» cellpadding=»10″>
    <tr bgcolor=»#B8DB7C» valign=»top»>
        <td > <td bgcolor=»#ADC2D1″ width=»100 «>
        <a href=»geo. html»><img src=»IMAGES/mountain.jpg» width=»100″ ></a>
        <p><a href=»animal.html»><img src=»IMAGES/koala.jpg» width=»100″></a>
        <p> <a href=»flora.html»><img src=»IMAGES/flower.jpg» width=»100″></a>
        <td bgcolor=»#FFFFFF»>
        <a name=»top»>
        <h3 align=»center»>Растения-рекордсмены</h3>
        <ul>
            <li><a href=»#c1″>Самые большие цветы</a>
        </ul>
        <a name=»c1″> <p align=»center»><strong>Самые большие цветы</strong>
        <table align=»center» border=»1″ cellpadding=»5″>
<tr><td>№<td>Название<td>Примечание
<tr><td>1<td>Аморфофаллус<td>Высота — 3 м
       </table>
    <p align=»right»><a href=»#top»>ВВЕРХ</a>
    <td>
</table>

веб-сайтов HTML — 52+ лучших идей веб-дизайна HTML 2023

Пожалуйста, нажмите «Сохранить избранное», прежде чем добавлять другие понравившиеся дизайны

Вы посмотрели 99 дизайнов и хотите еще один кусочек?

по ET

Поиск идей для веб-сайтов

HTML-сайты не подходят? Попробуйте что-нибудь еще:

Сайты разработки

Вход на веб-сайты

Одностраничные сайты

Веб-сайты главной страницы

Мобильные сайты

Одностраничные сайты

Ценовые сайты

Сайты целевых страниц

веб-сайты Magento

Веб-сайты панели инструментов

Веб-сайты для настольных компьютеров

Веб-сайты интерфейса

Создание веб-сайтов

Веб-сайты электронной коммерции

Сайты блогов

Сайты недвижимости

Видео сайты

Веб-сайты фотографии

Образовательные сайты

Бизнес-сайты

Как создать свой HTML-дизайн сайта

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

Начать конкурс

Дизайнеры со всего мира предлагают вам свои идеи. Вы предоставляете отзывы, оттачиваете свои фавориты и выбираете победителя.

Начать конкурс

Начать проект

Найдите идеального дизайнера, соответствующего вашему стилю и бюджету. Затем сотрудничайте один на один, чтобы создать собственный веб-сайт.

Начать проект

Узнайте больше о дизайне веб-страниц

4,6 в среднем от 2355 отзывы клиентов о веб-дизайне

Что отличает хороший HTML-сайт?

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

Типы веб-сайтов
Существует 8 различных типов веб-сайтов. Узнайте, что они из себя представляют, чтобы решить, какие из них будут соответствовать вашим потребностям… Продолжайте читать

Как создать сайт
Создание веб-сайта может быть сложным. Это руководство шаг за шагом проведет вас через процесс создания веб-сайта… Продолжайте читать

Цвета веб-дизайна
Выбор правильных цветов веб-сайта может подчеркнуть сильные стороны вашего бизнеса и помочь вам привлечь нужных клиентов… Продолжайте читать

Дополнительные советы по веб-дизайну

540 Особенности Примеры HTML-кода

В нашем множестве шаблонов веб-сайтов HTML 2022 представлено более 25 лучших бесплатных и премиум-шаблонов на выбор, а премиум-темы и премиум-плагины для адаптивных многоцелевых HTML-шаблонов скоро появятся в наших демо-макетах. Бесплатные темы с HTML-шаблоном премиум-класса, похожие на Revolution Slider wpbakery, и лучшие темы WordPress загружаются с наших защищенных серверов. Мы уважаем личные данные и конфиденциальность, поэтому наша функциональная контактная форма PHP для веб-дизайнеров и разработчиков имеет все необходимые меры безопасности. С помощью многоцелевого адаптивного HTML-шаблона премиум-класса для бизнеса вы можете перейти к основному контенту и начать продавать, имея отличный дизайн веб-сайта вашего мегаменю с цветовой схемой и дизайном логотипа. Нет необходимости использовать шаблоны маркетинговых форм 2022, если у вас есть адаптивные бесплатные темы WordPress, готовые к работе с сетчаткой, которые можно легко загрузить из нашего интернет-магазина. Дизайн и огромная функциональность 2022 наших простых и красивых шаблонов таблиц css3 на основе Bootstrap 4 предоставляют резюме Vcard, где вы можете найти наши красиво оформленные шаблоны таблиц с доступными доменными именами.

Если у вас нет навыков кодирования, используйте наши бизнес-шаблоны WordPress для администрирования, чтобы создать эффективную поисковую оптимизацию для бизнес-сайта или конструктора интернет-магазина недвижимости с плавными анимационными эффектами наведения, которые упрощают реализацию ваших идей. Наши дизайнеры и разработчики создали 100% адаптивный HTML-шаблон веб-сайта, доступ к которому осуществляется через панель администратора. Войдя в него, вы увидите последнюю версию шаблонов html5, основанную на bootstrap 4, конструкторе страниц wpbakery, который вы можете использовать при создании своего веб-сайта электронной коммерции, и нет необходимости в квалифицированном персонале. Полностью адаптивный шаблон retina-ready позволяет переключаться между несколькими целевыми страницами веб-шаблонов, чтобы выбрать лучшие шаблоны страниц для вашего HTML-сайта. При использовании бесплатных тем WordPress премиум-класса и плагинов WordPress, подходящих для шаблона веб-сайта с дизайном, вы должны использовать конструктор страниц с перетаскиванием, который может размещать эти бесплатные темы на целевой странице для предварительного просмотра. При выборе темы WordPress автоматически применяются светлые и темные цветовые схемы и плавная прокрутка параллакса с поддержкой сетчатки. Вы можете использовать видеофоны в шаблоне HTML5 без потери быстро загружаемых шаблонов CSS. В шаблонах начальной загрузки Moodle используется рабочая контактная форма, позволяющая пользователям отслеживать адаптивные шаблоны веб-сайтов и помогать вам улучшать их.

Затем к основному содержимому создаваемого HTML-шаблона применяются полностью адаптивные стили заголовков с поддержкой Retina. Профессиональный конструктор перетаскивания с уникальным дизайном сочетает в себе бесплатные шаблоны начальной загрузки, 4 настраиваемых виджета и шаблоны блогов, современное портфолио, чтобы сделать ваши бизнес-темы WordPress узнаваемыми. Тема WordPress с перетаскиванием страниц предоставляет уникальные демонстрации для тестирования различных бесплатных шаблонов веб-сайтов. Создайте веб-сайт, используя наши бесплатные шаблоны PSD для темы WordPress рекламного агентства или новостного журнала, где вы можете интегрировать 100% мгновенный личный блог с новейшими шрифтами Google. Ползунок Visual Revolution Customizer, шрифты Google, липкая навигация и мегаменю имеют эффекты наведения в макетах страниц, чтобы сделать ваши проекты без веб-дизайна более эффективными в социальных сетях.

Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)

Пример создания сайта — Информатика и ИКТ 11 класс

Пример создания сайта

веб-сайтов HTML — 52+ лучших идей веб-дизайна HTML 2023

HTML-сайты не подходят? Попробуйте что-нибудь еще:

Как создать свой HTML-дизайн сайта

Что отличает хороший HTML-сайт?

540 Особенности Примеры HTML-кода

Добавить комментарий Отменить ответ

Рубрики