Как вставить текст из файла в html страницу?
Обсуждение темы Как вставить текст из файла в html страницу? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Я только третий день изучаю html, css и JS , так что простите если задаю глупые вопросы На данный момент мне как можно .
На данный момент мне как можно скорей надо сделать небольшой простенький сайт для мамы. На нем будет не больше 6 страниц и все. Дизайн я уже оформил, уже даже боле менее понимаю как что делается (знаю сферу языка с++ pawno, просто с++ учил и paskal).
Ну так вот, проблема в том что я хочу чтоб в дальнейшем редактирование и дизайна и информации на нем было максимально простым, соотвецтвенно надо чтоб дизайн был в одном файле, структуры страниц в других(ну всмысле на страницу по файлу) и информация на странице(тоже на страницу по файлу. И потом в структурах этих страниц поуказывать в какое место надо поместить меню, шапку и что самое главное контент(ну весь текст который должен быть на странице.
Ну вот я и не могу понять как в .html страницу вставлять код из другого файла. Нашел уроки по PHP, там была показана функция include, но че то у меня с ней ни че не получилось. Попробовал установить на комп проги которые там были указаны, но тоже не выходит.
Помогите пожалуйста решить эту проблему, желательно более наглядно если не сложно
High Star
Итак, кое-что мы уже знаем. Теперь самая пора наполнить наш сайт содержимым. Я надеюсь, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами <BODY> и </BODY>. Можете даже набрать этот текст в программе Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Notepad.
Листинг 6. Вставляем текст
Я немного подумала, и решила для примера вставить главу из книги Н.В. Гончаренко «Гений в искусстве и науке». Очень уж мне она нравится. Надеюсь, понравится и вам…
Вот как я набрала в Word:
Текст в Word
Что ж.. в Ворде получилось и неплохо. Теперь я это скопирую и помещу в Notepad между <BODY> и </BODY>, вот так:
Листинг 7. Скопированный текст
И сохраним этот файл, скажем под именем text.html, затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:
Вот что у нас получилось без тегов форматирования!
Ну и где же, спрашивается, наш текст, любовно разбитый на абзацы? Где табуляция, где выделенные и помещенные в центр заголовки? Почему наш текст расползся по окну браузера, подобно манной каше? Да, должна вас огорчить — ваш (да и мой) браузер не распознает все то, что мы сейчас перечислили.
Но не переживайте! Сейчас к нам на помощь придут теги форматирования! Только позовите!
Теги форматирования текста
Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег <P>. Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.
А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег <B> отвечает за жирный текст, <I> — за наклонный и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от <H1> до <H6>. Самый крупный — <H1>, самый мелкий — <H6>. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку — в большую. Например, будет правильно написать:
а вот так неправильно:
Чтобы наши заголовки разместить по центру, необходимо добавить атрибут выравнивания <align>:
<align=center> — размещает заголовок по центру окна браузера;
<align=right> — по правой стороне окна;
<align=left> — соответственно по левой. Впрочем, по умолчанию, браузер и так пристроит ваш текст к левому краю.
Теперь откроем наш файл text.hml и внесем необходимые изменения:
Листинг 8. Добавляем теги форматирования
Сохраним наш документ под именем text2.html, и посмотрим, что же у нас вышло:
Отформатированный текст
Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:
<BR> — тег перевода строки, непарный тег;
<U> тег подчеркивания</U>;
<STRIKE>
тег зачеркивания</STRIKE>;<BIG>Большой текст</BIG>
<SMALL>Маленький текст</SMALL>
<ADDRESS>этот тег служит для сведения об авторе и/или авторских правах</ADDRESS>.
Рассмотрим эти теги на примере одного моего любимого стихотворения Ирины Лео:
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Откроем опять shablon.html в блокноте и впишем:
Листинг 9. Стихотворение
<P align=left>
Это не сложно <BR>
Это не важно <BR>
Просто отважно <BR>
В небо шагнуть <BR>
<P align=center>
И осторожно <BR>
Там, где возможно <BR>
Темного облака <BR>
Край отогнуть. <BR>
<P align=right>
Стертые лица, <BR>
Забытые профили <BR>
И многоточий упрямая нить. <BR>
Свет разливается <BR>
И проявляется <BR>
То, что уже никогда не забыть. <BR>
<ADDRESS>Ирина Лео</ADDRESS>
</BODY>
</HTML>
Сохраним этот файл под именем text3.html, и откроем в окне браузера. Получится примерно следующее
Файл text3.html
В общем, вроде как хотели, так и получилось.
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!
Текст в html
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Строчные элементы обрамляются тегами <span>. </span>.
Для обрамления элементов блочного типа используется пара <div>. </div>.
Браузеры обрамляют div-блоки разрывами строки.
Блок <div> не может располагаться внутри блока <span>.
Пример
Основные теги форматирования текста
| <p>. </p> | Абзац. |
| <h1>. </h1> | Заголовок первого уровня. |
| <h2>. </h2> | Заголовок второго уровня. |
| . | |
| <h6>. </h6> | Заголовок шестого уровня. |
| <br> | Переход на новую строку. |
| <q>. </q> | Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes. |
| <hr> | Горизонтальная разделительная линия. |
| <pre>. </pre> | Текст фиксированной ширины с сохранением всех пробелов и переносов. |
Пример
Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Выделение в тексте
| <b>. </b> | Полужирный шрифт. |
| <i>. </i> | Курсив. |
| <ins>. </ins> | Подчеркнутый текст. |
| <del>. </del> | Перечеркнутый текст. |
| <sup>. </sup> | Надстрочный текст. |
| <sub>. </sub> | Подстрочный текст. |
Пример
Текст может быть полужирным. Текст может быть курсивом.
Текст можно зачеркнуть.
Текст может быть надстрочным . Текст может быть подстрочным.
Форматирование текста в HTML, HTML теги для редактирования текста
Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами <BODY> и </BODY>).
Однако, просто вставить текст на страницу бывает мало, надо его правильно разместить согласно цветовой схеме сайта и смысловой нагрузке (абзацы, отступы и т.д.). Но тут главное не переборщить, делать все правильно и в меру, чтобы наши будущие посетители чувствовали себя комфортно.
Я постараюсь написать самое главное, покажу какие теги используются для форматирования текста и их атрибуты, чтобы достигнуть максимального результата.
С чего начинать форматирование в HTML
Для начала, я хотел бы вам рассказать о том, что такое вообще текст и как представляется. Я не буду вам рассказывать много непонятных терминов и понятий. Скажу, как взаимосвязаны форматирование текста в htmlи его редактирование в текстовых редакторах.
И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.
Однако не пугайся, перенести твой красиво оформленный текст из текстового редактора в html можно. В общем, дальше я постараюсь подробно расписать, как это сделать.
Теги форматирования в HTML
Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов <pre> и </pre>. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел 🙂
Дальше я постараюсь рассказать и показать самые популярные теги HTML для форматирования текста:
- <B></B> (или <strong></strong>) — тег, для выделения текста жирным
- <I></I> (или <em></em>) — тег, для получения курсивного текста
- <U></U> — тег, для подчеркнивания текста (кстати, перечекрнутые слова часто путают с ссылками)
- <STRIKE></STRIKE> — тег, для
зачеркиваниятекста - <SUB></SUB> — тег, для выделения подстрочного текста, или попросту говоря — нижний индекс. Очень помогает, например, для форматирования химических элементов
- <SUP></SUP> — тег, для выделения надстрочного текста, или попросту говоря — верхний индекс (10 м 2 )
Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:
результат будет выглядеть следующим образом:
Для выделения обзаца, или располодить текст блоком, используют тег <P>. Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:
Данный код на html-странице будет выглядеть следующим образом:
Создаем второй абзац.
Кстати, закрывать абзац тегом </p> необязательно, если хотите начать следующий абзац, просто напишите снова <p>.
В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге <p>. Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:
расположит наш текст по центру, на выходе получится следующее:
Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:
на html-странице это будет выглядеть вот так:выровнит текст по левому краю
Выравнивание текста по левому краю (по умолчанию)
Парой встает возможно без отступа абзаца сделать простой переход на новую строку, и можно это сделать тегом <BR>. html-код в данном случае будет следующим:
на странице будет следующий вид:
Наша первая строка.
Наша вторая строка.
У <br> отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать <br> подряд.
Существует еще тег <HR>, благодаря которому тоже можно разделить текст. При помощи него создается полоса, и в котором тоже есть свои атрибуты:
- width — ширина полосы;
- align — выравнивание;
- size — толщина полосы;
- color — цвет полосы;
- noshade — атрибут без значений для создания черной полосы без тени.
html-код на примере будет следующим (попробуй сами на примере узнать что получится):
Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.
Далее очень важные теги для форматирования, а также и для продвижения сайтов — теги заголовки. Всего их 6:
Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это <H1></H1>, ну а самый маленький <H6></H6>. У данные тегов заголовков есть атрибуты:
- align — выравнивание заголовка;
- title — всплывающая подсказка заголовка (когда наведешь курсор на него).
Приведу просто пример HTML-кода заголовков:
на странице мы увидем следующее:
Заголовок 4 размера
Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег <FONT></FONT>. У данного тега имеются следующие атрибуты:
- color — цвет шрифта;
- face — гарнитура шрифта;
- size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать <font size="+1"></font>, то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот — при -1 уменьшенным на 1.
Создать список в HTML можно используя теги <OL></OL> (список с нумерацией) и <UL></UL> (список с маркировкой). Элементы в списке должны выделяться <LI></LI>. Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге <OL></OL>:
- 1 — нумерация арабскими цифрами (по умолчанию);
- A — большими латинскими буквами по алфавиту;
- a — маленькими латинскими буквами;
- I — большими римскими цифрами;
- i — маленькими римскими цифрами.
Приведу HTML-код для примера:
на странице будет вот так:
- Элемент 1.
- Элемент 2.
- Элемент 3.
Тег <UL> имеет атрибут type вот с такими значениями:
- disc — закрашенный кружок (по умолчанию);
- circle — незакрашенный кружок;
- square — закрашенный квадратик.
HTML-код тега <UL> на примере:
На странице мы увидим следующие:
- Элемент 1.
- Элемент 2.
- Элемент 3.
Показав основные теги для форматирования текста на html-странице нельзя забыть и о спецсимволах. Спецсимволы — это символы, которых, как показывает практика, нет на клавиатуре, но которые браузер преобразует в код, принимая за управляющий. Полный список я привел на отдельной странице Спецсимволы HTML. Кстате, для форматирования текста очень важно знать правила грамматики русского языка, ведь грамотно написанный текст уже наполовину отформатирован.
Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:
Пожалуй, я закончил данный материал о HTML тегах для форматирования текста. Я постарался упомянуть самое основное что тебе следует знать. Постарайся запомнить данные уроки, они тебе еще не раз пригодятся. Далее я расскажу тебе, как вставить картинку в html-страницу и какие атрибуты можно при этом использовать.
| ← Атрибуты тега BODY | Теги HTML для вставки изображений → |
Дата публикации: 15 мая, 2012
-
Отзывы и комментарии:
Неудача — это просто возможность начать снова, но уже более мудро.
© Генри Форд
Супер-предложение!
Подпишитесь на интересные обновления моего блога, чтобы быть в тренде последних тенденций разработки и продвижения сайтов: