Создаем HTML страницу
Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу.
Для того чтобы сделать сайт, нужно сначала создать HTML-страницу. Сделав несколько HTML-страниц и соединив их с помощью ссылок, мы получим сайт.
HTML-страницы создаются с помощью языка HTML, а код этого языка записывается в текстовых редакторах, например в обычном Блокноте от Windows. Открыв Блокнот и введя туда код написанный на языке HTML, а затем сохранив получившийся документ в файл с расширением .html мы получим HTML-файл, который можно просмотреть с помощью браузера.
Открыть Блокнот в Windows можно следующим образом:
Пуск — Все программы
В Блокноте наберите следующий код:
Название страницы Заголовок статьи
Абзац статьи.
Или просто скопируйте его и вставьте в Блокнот :
Затем сохраните получившийся документ на Рабочий стол , в виде файла с названием index и расширением .html
Для этого нажмите на кнопки:
Файл — Сохранить как…
В появившемся окне выберите Рабочий стол , имя файла напишите index.html и нажмите кнопку:
Сохранить
Теперь файл index.html , который вы сохранили на Рабочий стол , можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox :
Открыть с помощью — FireFox
Если у вас на компьютере не установлен браузер FireFox , то можете открыть файл index.html любым другим браузером, например: Opera , Google Chrome , Internet Explorer или Safari .
Файл index.html , открытый в браузере FireFox :
На этом, первый урок учебника по HTML, окончен. В следующем уроке мы подробно разберём HTML-код и узнаем из каких частей он состоит.
- Category: HTML
- Tag: html, создание страницы, учебник html
Создание простой главной страницы
Помогите создать главную страницу с помощью HTML, CSS, JAVASCRIPT. Не знаю как сделать. Хотела слева в углу логотип»Психологическое тестирование», и на этом же уровне в строчку создать горизонтальное меню, где будут ссылки Главная, Регистрация, Вход, Создать тест.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Создание главной страницы сайта
Всем привет! Делаю сайт на HTML про остров и его описание. Хочу сделать так, как это показано на.
Разбивка главной страницы
Всем доброго времени суток! я начинающий. Возникла следующая проблема — не могу разбить.
Не верное отображение главной страницы
Всем привет! Тут вот такое дело: использую: thymeleaf + spring boot. Есть 2 страницы: индекс и.
Медленная загрузка главной страницы
Даже не знаю, как точно выразится. Есть проблема — главная страница сайта (http://domen.com).
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
Регистрация: 20.05.2013
Сообщений: 202
там код непонятный получается, сложный, я хотела простой(
Регистрация: 27.09.2013
Сообщений: 278
Я не знаю куда еще проще:
(если есть какой-то дизайн, надо его предоставить)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> title>Тесты/title> link href="css/style.css" type="text/css" rel="stylesheet"> script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">/script> /head> body> div class="wrapper"> div class="header"> div class="logo"> a>Психологическоеbr> тестирование/a> /div> div class="head_menu"> ul> li>a href="#">Главна/a>/li> li>a href="#">Регистрация/a>/li> li>a href="#">Вход/a>/li> li>a href="#">Создать тест/a>/li> /ul> /div> /div> div class="body"> h1>Тело документа/h1> /div> div class="footer"> p>Футер сайта/p> /div> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""} body { font: 12px/18px Arial, sans-serif; } .wrapper{ width: 1200px; margin: 0 auto; } .header{ width: 95%; padding: 40px 2.5% 40px 2.5%; background: #074776; overflow: hidden; } .body{ width: 95%; background: #475D41; height: 500px; padding: 40px 2.5% 40px 2.5%; } .footer{ width: 95%; padding: 10px 0 10px 0; background: #633003; padding: 40px 2.5% 40px 2.5%; } .logo{ float: left; width: 30%; } .logo a{ font-size: 24px; color: #000000; font-weight: bold; display: block; } .head_menu{ } .head_menu ul{ overflow: hidden; } .head_menu ul li{ float: left; margin-left: 10px; } .head_menu ul li a{ color: #ffffff; text-decoration: none; } .head_menu ul li a:hover{ text-decoration: underline; }
Главная страница
Главной называется веб-страница, с которой обычно начинается просмотр сайта. Она открывается при наборе адреса сайта и в каком-то смысле является его «лицом». Именно с главной страницы начинается знакомство посетителей с сайтом, поэтому надо сразу передать тематику сайта и обеспечить быстрый доступ к содержанию.
На главной странице нашего учебного сайта представлено три блока — краткое описание сайта, предупреждение и ссылки на страницы с описанием методов. Во всех блоках используется текст, поэтому в первую очередь нужно задать его стилевое оформление. Гарнитуру шрифта, его размер и межстрочное расстояние (интерлиньяж) можно задать через универсальное свойство font .
body < font: 0.9em/1.2 Arial, Helvetica, sans-serif; >Первое значение 0.9em означает размер шрифта, второе после слэша интерлиньяж, а после пробела следует набор шрифтов, которые следует использовать на странице. Если первый идущий шрифт Arial не будет найден в операционной системе, браузер начнёт искать шрифт Helvetica. Если и он не обнаружится, будет выбран любой другой рубленый шрифт, или как их ещё называют, без засечек.
Блок с предупреждением
В этом блоке используется два изображения: одно для головы, второе для заголовка текста (рис. 6.12).
Рис. 6.12. Блок с предупреждением
Само расположение элементов можно выполнить разными методами, к примеру, установить рисунок с головой как фоновый без повторения и сдвинуть текст вправо, либо сделать обтекание через float . Рассмотрим эти методы подробнее.
Метод 1. Использование обтекания
Для начала нам требуется создать код, к которому в дальнейшем прикладываются стили. Плавающие элементы всегда располагаем в начале, поэтому рисунок с головой вставляем первым, затем уже следует заголовок и текст (пример 6.18).
Пример 6.18. Блок с предупреждением
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
В стилях для изображения головы ставится свойство float со значением left , а тексту заголовка и абзаца смещение левого края через margin-left . Для отмены обтекания к warning добавляется overflow со значением hidden .
section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ >.voodoohead < float: left; /* Обтекание справа */ >.warning H1, .warning P < margin: 0 0 0 70px; /* Отступы */ >Метод 2. Фоновая картинка
Код останется практически неизменным по сравнению с примером 6.18, только изображение головы следует убрать, поскольку оно добавляется через свойство background .
section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ background: url(images/head.png) no-repeat; min-height: 92px; /* Минимальная высота */ >.warning H2, .warning P < margin: 0 0 0 70px; /* Отступы */ >Также следует добавить свойство min-height , чтобы при уменьшении высоты блока фоновая картинка не обрезалась. Значение равно высоте изображения head.png.
Блок со ссылками
Каждый блок со ссылкой и её описанием обрамлён тегом , сама ссылка располагается внутри тега , который в свою очередь находится внутри . Такая логика может показаться странной — зачем нам , когда на странице он уже есть, и к чему столько тегов ? В HTML5 своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов . . Соответственно, задавал заголовок страницы, и подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один . Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги и создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег .
Допущения
Для упрощения расчетов некоторые реальные величины заменяются их приближенным аналогом, которые хотя и влияют на точность результата, находятся в пределах допустимой погрешности вычисления.
Метод простых итераций
Самый простой метод поиска льва основанный на переборе.
В стилях устанавливаем цвет ссылок через свойство color , цвет ссылок при наведении на них курсора мыши с помощью псевдокласса :hover и параметры заголовка .
a < color: #1b75bc; /* Цвет ссылок */ >a:hover < color: #d6562b; /* Цвет ссылок при наведении */ >a img < border: none; /* Прячем границу вокруг изображений-ссылок */ >section h1 < font-size: 1.5em; /* Размер текста */ font-weight: normal; /* Нормальное начертание */ margin-bottom: 0; /* Отступ снизу */ >Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта (пример 6.19).
Пример 6.19. Главная страница
HTML5 IE Cr Op Sa Fx
Как поймать льва в пустыне?
Похожие публикации: